一.JavaScript
1.JavaScript简介
- JavaScript一种解释性脚本语言,是一种动态类型、弱类型、基于原型继承的语言,内置支持类型。
- 它的解释器被称为JavaScript引擎,作为浏览器的一部分,广泛用于客户端的脚本语言,用来给HTML网页增加动态功能。
2.JavaScript的使用方法
<!--js的使用方式 -->
<!-- script的type属性可以不写,如果要写的话使用
type="text/javascript" -->
<!--
方式1:js的内部方式
-->
<!-- <script>
//单行注释
/*多行注释*/
//在js常见的函数
//向浏览器打印内容,类似于Java中的控制台输出语句
document.write("hello,JavaScript我来了!") ;
//还可以在浏览器中控制台中打印内容
console.log("hello,JavaScript我来了") ;
//在浏览中弹出一个提示框
//window对象是浏览器中顶级对象,可以省略不写!
//window.alert("helloworld") ;
//简写为:
alert("helloworld") ;
</script> -->
<!-- 方式2:外部方式 实际开发中(前端开发人员开发使用的!)
需要在js文件夹中单独创建一个后缀为.js的文件
书写js代码,在当前html页面中将js文件导入即可!
-->
<!-- 导入外部js文件
-->
<script src="js/01.js"></script>
</head>
<body>
</body>
</html>
3.javascript中的变量以及数据类型
js的基本数据类型
无论是整数还是小数,都是number类型, ---- js引擎会自动提升为 Number 对象类型
无论是字符串还是字符,都是string类型----js引擎会自动提升为 String 对象类型
boolean类型 ----js引擎会自动提升为 Boolean 对象类型
object类型 (创建一个对象 ) ---- js引擎会自动提升为Object对象类型,在Js中,Object对象代表所有js对象的模板!
undefined类型 :未定义类型 (这种没有意义),因为没有赋值!
<script>
var a = 10 ;
var a = 20 ;
var b = 3.14 ;
c = "hello" ;
var d = 'A' ;
var e = true ;
var f = false ;
var g = new Object() ;
var h ;
</script>
定义变量的注意事项
1)在js中定义变量,使用var来定义,var可以省略不写(刚开始,建议写上)
2)javascript是弱类型语言,它的语法结构不严谨! 可以重复定义变量的,后面的变量的值将前面的变量值覆盖掉
3)查看js的变量的数据类型,使用一个函数 typeof(变量名)
4)var可以任意数据类型!
4.js的运算符
- Js是弱类型,语法结构不严谨
- true,false在运算的时候都自己默认值 true是1,false是0
- 实际开发中,不会这样去做的,boolean类型值都是直接进行逻辑判断!
- 算术运算符
- +,-,*,/,%
- ++,--
- 赋值运算符
- =:基本赋值
- +=,-=,*=,/=,%=
- 比较(关系运算符)
- <,<=,>,>=,==,!=
- 逻辑运算符
- 实际开发中:逻辑双与&&,逻辑双或||
- 三元(三目)运算符
- (表达式)?执行true的结果:false的结果
-
<script> //算术运算符 //定义两个变量 var a = 3 ; var b = 4 ; document.write((a+b)+"<br/>") ; document.write((a-b)+"<br/>") ; document.write((a*b)+"<br/>") ; document.write((a/b)+"<br/>") ; //Java中是默认取整,js是不会的 document.write((a%b)+"<br/>") ; document.write((a+true)+"<br/>") ; document.write((b-false)+"<br/>") ; document.write((++a)+"<br/>") ; document.write((--a)+"<br/>") ; document.write("<hr/>") ; //赋值运算符 var c = 20 ; //将20赋值给c这个变量 c+=10; // 等价于 c = c + 10 ; //将左边的变量和右边的值相加,在赋值给左边变量c document.write("c的值是:"+c) ; document.write("<hr/>") ; //比较(关系运算符) var x = 3 ; var y = 4 ; var z = 5 ; document.write((x+y)>=(x+z)) ; document.write("<hr/>") ; document.write(((x+y)<(x+z))+"<br/>") ; document.write(((x+y)<=(x+z))+"<br/>") ; //==不能写成= document.write((x==y)+"<br/>") ; document.write("<hr/>") ; //逻辑双与&&:有false,则false //逻辑双或||:有true,则true //逻辑双与&&和逻辑双或||和Java的&&和||一样 //&&:左边的表达式为false,则右边不执行了,具有短路效果 //||:左边的表达式为true,则右边不执行了,具有短路效果 //实际开发:这种&&,|| 效率非常高! document.write(((x>y) && (x>z))+"<br/>") ; document.write(((x>y) && (x<z))+"<br/>") ; document.write(((x<y) && (x>z))+"<br/>") ; document.write(((x<y) && (x<z))+"<br/>") ; document.write("<hr/>") ; document.write(((x>y) || (x>z))+"<br/>") ; document.write(((x>y) || (x<z))+"<br/>") ; document.write(((x<y) || (x>z))+"<br/>") ; document.write(((x<y) || (x<z))+"<br/>") ; document.write("<hr/>") ; var m = 5 ; var n = 6 ; document.write("m:"+m+",n:"+n+"<br/>") ; document.write((((++m)==5) && ((--n)==6))+"<br/>") ; document.write("m:"+m+",n:"+n+"<br/>") ; document.write("<hr/>") ; //(表达式)?执行true的结果:false的结果 var age = 20 ; document.write((age>=18)? "成年人!":"未成年人!") ; </script>
5.js中的流程控制语句
-
三大类
-
1)顺序结构:js代码从上而下依次加载
2)选择结构
if结构
if(表达式){
语句
}
if(表达式){
}else{
}
if(表达式1){
语句1;
}else if(表达式2){
语句2 ;
...
...
}else{
语句n;
}
switch结构
switch(表达式){
- 三元(三目)运算符
- 实际开发中:逻辑双与&&,逻辑双或||
- 逻辑运算符
- <,<=,>,>=,==,!=
- 比较(关系运算符)
- +=,-=,*=,/=,%=
- =:基本赋值
- 赋值运算符
- ++,--
- +,-,*,/,%
- 算术运算符
- 实际开发中,不会这样去做的,boolean类型值都是直接进行逻辑判断!
- true,false在运算的时候都自己默认值 true是1,false是0