1.JavaScript的简介
- JavaScript是一种解释性脚本语言(代码不进行预编译),由浏览器解释执行,用来向页面添加交互行为;
- Java Script由三个主要组成部分:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型);
注:ECMAScript描述了Js的基本语法:类型、语句、关键字、保留字、运算符和对象等。DOM是把整个文档中的所有节点解析成一个一个对象,并且这些对象之间会形成一个层级关系。通过DOM我们可以对文档中所有节点做CRUD操作。BOM是浏览器的一种特性,它可以对浏览器窗口进行访问和操作,例如移动、关闭窗口,调整窗口的大小等。
2.JavaScript的三种写法
1. 行内JS
- 行内JS使用几率较少,只有针对某些标签的特殊操作:
语法:
<a href="javascript:alert('点你就点你');">点我</a>
- 上述代码中,我们将JS代码写在href属性中,这样我们在点击链接的时候,执行的就不是跳转地址,而是其中的JS代码;
- javascript:这是伪协议的意思,类似咱们http:,伪协议是为了告诉浏览器接下来的代码是JS代码,当然部分地方可以省略,但建议写上伪协议;
- alert(参数值)是用来弹出一个提示框,弹框中的提示信息即为传入的参数值,弹框是JS的重要调试手段之一;
5.console.debug()也是JS的一种调试手段,但此种调试手段在IE上不支持。
2. 内部JS
1.页面内的JS是写在一组<script>
标签内,这组标签可以写在页面内的任意位置:
语法:<script type="text/javascript"> JS代码 </script>
代码:
<body>
<script type="text/javascript">
alert(“不点我也来”);
</script>
</body>
3. 外部JS
- 外部JS方式,其实就是先单独定义一个JS文件,然后将这个JS文件与要使用的网页将关系关联起来;
语法:引入外部JS文件:
<script type="text/javascript" src="JS文件位置"></script>
代码:
外部JS文件:javascript.js
alert("我是javascript.js文件。。。。。");
引入外部JS文件:
<body>
<script type="text/javascript" src="javascript.js" ></script>
</body>
- 引入CSS文件使用标签,引入JS文件而是使用
<script>
标签,在<script>
标签内使用了src属性指定独立JS文件的位置。
3.JavaScript变量
1. 语法
var 变量名; 【声明变量】
var 变量名=值; 【声明变量并赋值】
代码:
<script type="text/javascript">
var a1=110;//number类型
var a2="杰克";//string类型
var a3=true;//boolean类型
var a4=null;//null(空对象)
var a5;//undefined(未定义或未初始化)
//在控制台打印类型
console.debug(a1);//110
console.debug(a2);//杰克
console.debug(a3);//true
console.debug(a4);//null
console.debug(a5);//undefined
</script>
2. Js中真假判断
- 在js中,所有的变量都可以判断真假。一般认为有内容或存在的(值或对象,0除外)进行判断时就是true值,而没有内容或不存在的("",undefined,null等等)进行判断时就是false值;
- 0、""、undefined、NaN、null、false(基本数据类型的false)为false,其他值都为true(包括{ }、[ ]);
4.JavaScript运算符
1. 赋值运算符
注:赋值运算符的使用和Java一样。
2. 算术运算符
注释:在JS中+运算符中有字符串的应用,会演变为字符串的拼接。
代码:
<body>
<script>
var x=3 + “3”;
console.debug(x); //33
</script>
</body>
3. 比较运算符(关系运算符)
1.比较运算符用于判断两个变量大小关系:>、<、==、<=、>=、===、!=、!===
,其中:
(1) == : 代表相等(它只比较内容,不比较类型)
(2) ===: 绝对相等(先比较类型,再比较内容)
(3) !==: 绝对不等
代码:
<body>
<script>
var x=10;
var y=”10”;
console.debug(x==y); //true
console.debug(x===y); //false
console.debug(x!==y); //true
</script>
</body>
4. 逻辑运算符
&& :逻辑AND运算符,一假遍假
|| :逻辑OR运算符 ,一真遍真
! :逻辑NOT运算符,真为假,假为真
5.JavaScript流程控制
JS中同Java一样存在流程控制语句,用法一样:
- 分支:
(1) if语句
(2)switch语句 - 循环:
(1) while语句
(2) do-while语句
(3) for循环 - break/continue语句
- 三目表达式
6.JavaScript函数
1. 语法
function 函数名(参数列表){
JS代码
[return 返回值;]
}
- JS中函数的定义使用function关键字,这一点是和Java不一样的地方,同时允许函数具备返回值,返回值采用关键字return,如果函数没有定义返回值,接收到的将是一个undefined;
代码:
<script type="text/javascript">
function add(num1,num2){
console.debug(num1+num2);
}
add(100,200);//300
</script>
2. 全局变量和局部变量
<script type="text/javascript">
var msg="显示全局变量";
function show(){
msg="隐式全局变量";
}
show();
console.debug(msg); //隐式全局变量,需要先调用方法才能访 问该变量
var msg2="全局变量";
function show2(){
var msg2="局部变量";
}
show2();
console.debug(msg2);//全局变量
</script>
3. 匿名函数语法
<script type="text/javascript">
//匿名函数
var aa = function (a,b){//aa:接收匿名函数
console.debug(a+b);
}
aa(100,"xd");//100xd(不同类型是拼接)
</script>