JS入门

Posted on

JavaScript的组成

1
2
3
1.核心（ECMAScript）是一个标准 ES6
2.文档对象模型（DOM）Document Obj Model
3.浏览器对象模型（BOM）Browser Obj Model

特点

1
2
3
4
5
6
1.一种解释性执行的脚本语言（无需编译）
2.一种基于对象的脚本语言
3.一种简单弱类型的脚本语言（数字、字符、函数、对象、数组、undefined）
4.一种相对安全的脚本语言（只能在浏览器运行）
5.一种事件驱动的脚本语言
6.一种跨平台性的脚本语言

引入方式和弹出框

直接上颗栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--外部引入-->
		<script src="a.js" type="text/javascript" charset="utf-8"></script>
		<!--内部引入-->
		<script type="text/javascript">
		//消息框
			alert("a");
		//确认框
			var a = confirm("是否？");
			alert(a);
		//提示框
			var n = prompt("请输入姓名？");
			alert(n);
		</script>
	</head>
	<body>
	</body>
</html>

注释

1
2
单行注释 //
多行注释 /* */

变量

1
2
3
4
5
number 值为数值
string 值为字符串
boolean 值为布尔值（true、false）
undifined 值未定义
null 值为空

命名规范

1
2
3
4
5
6
7
区分大小写

1.首字符只能使用字母、下划线和$
2.其他字符可以使用字母下划线、$和数字
3.命名字符中间不能含有空格
4.不能以关键字或保留字命名
注：不能使用name命名

javascript操作符

赋值操作符

1
= 赋值运算符并不是等于 , var a = 5: 把5赋给a

算术操作符

1
2
3
4
5
6
7
8
9
10
11
12
+、- 、/ 、* 、%（模/取余）(输出数字）

模的算法栗子：
2%7 = 2              7%4  = 3     

(-2)%7 = -2         (-7)%4  = -3 

2%(-7) =  2          7%(-4) = 3 

(-2)%(-7) =  -2     (-7)%(-4)  = -3 

+= -= *= /=（算法简写）

直接上颗栗子

1
2
3
4
5
6
7
8
var a = 1;
a = 5+7;
//a = a+1;//a= 12+1
//简写
a += 1;//a= 12+1
a *= 2;//a= 13*2
alert(a);
//++ — （a=a+1 a=a-1 的简写）

关系操作符(返回布尔值)

1
2
3
4
5
6
7
8
9
10
11
12
13
1)>大于

2)<小于

3)==等于

4)===全等于（判断类型和值）

5)<=小于等于

6）>=大于等于

7）!=不等于

直接上颗栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var a = 5;
var b = 6;
var c = "5";
var bol = null;
bol = a<b;//true
bol = a>b;//false
bol = a==b;//false
bol = a!=b;//true
bol = a>c;//false
bol = a>=c;//true
bol = a==c;//true
bol = a===c;//false
bol = a!=c;//false
bol = !true;//false
bol = "abc" > "addd";//ASCII 码
alert(bol);

逻辑操作符

1
2
3
与 && 真真为真 真假为假 假假为假
或 || 真真为真 真假为真 假假为假
非 ！ 相反

直接上颗栗子

1
2
3
4
5
6
7
8
9
var a = 5;
var b = 10;
var c =15;
var bol = null;
bol = a>b && c>b;//false
bol = a<b && c>b;//true
bol = a>b || c>b;//true
bol = (a>b && c>b) || !false;//true
alert(bol);

条件操作符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
if 语句语法

if (判断语句) {
    语句1  
              
} else{
    语句2 
               
}
语句3

if (判断语句1) {
    语句1
                
} else if(判断语句2){
    语句2  
              
}else{
    语句3 
               
}
语句4

简写: 判断表达式 ？ 表达式1 ：表达式2 例：a>b? c=1:c=2; true c=1, false c=2

获取元素

1
2
3
4
getElementById() 根据id获取元素
getElementByITagName() 根据标签名获取元素
getElementByName() 根据name获取元素
getElementByClassName() 根据类获取元素 ie6不兼容

直接上颗栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
window.onload = function(){
//等页面内容加载完成后执行
	//根据ID获取
	var d = document.getElementById('d1');
	//document整个HTML文档
	alert(d);
	//[object HTMLDivElement] object--对象
	//根据name属性获取
	var p = document.getElementsByName('pp');
	alert(p);
	//[object NodeList] 数组集合
	alert(p[0]);
	//[object HTMLParagraphElement]
	//根据类名获取
	var a = document.getElementsByClassName('aa');
	alert(a[0]);
	//127.0.0.1:8020/20160524-js/js_link.html###
	//根据标签名获取
	var li = document.getElementsByTagName('li');
	alert(li[0]);
	//[object HTMLLIElement]
}

onclick 事件

直接上颗栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!--例子：显示隐藏-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: cornflowerblue;
			}
		</style>
	</head>
	<body>
		<input type="button" name="btn" id="btn" value="显示隐藏"/>
		<div id="d1"></div>
	</body>
	<script type="text/javascript">
		//根据id名获取
		var btn = document.getElementById('btn');
		var div = document.getElementById('d1');
		btn.onclick = function (){
		//显示隐藏
			if(div.style.display !="none") {
				div.style.display = 'none';
			} else{
				div.style.display = 'block';
			}
		//简写
//div.style.display=="block"?div.style.display = 'none':div.style.display = 'block';
			if (bol) {
				div.style.display = 'none';//语句1
			} else{
				div.style.display = 'block';//语句2
			}
			bol = !bol;
			//第一次点击
			//bol = true
			//判断,执行语句1
			//给bol赋值bol = !bol 得 bol = false
			//第二次点击
			//	bol = false
			//判断,执行语句2
			//给bol赋值bol = !bol 得 bol = true
			//第三次点击
			//bol = true
			//判断,执行语句1
			//给bol赋值bol = !bol 得 bol = false
			//...
		}
	</script>
</html>

onmouseover onmouseout 事件

直接上颗栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
	var div = document.getElementById('d1');
//	div.onmouseover = function(){
//当鼠标移到div里面的时候触发的事件 有bug
//		div.style.background = "darkorange";
//	}
//	div.onmouseout = function(){
//当鼠标离开div里面的时候触发的事件  有bug
//		div.style.background ="cornflowerblue";
//	}
	div.onmouseenter = function(){
	//当鼠标移到div里面的时候触发的事件  无bug  兼容ie8
		div.style.background = "darkorange";
	}
	div.onmouseleave = function(){
	//当鼠标离开div里面的时候触发的事件  无bug  兼容ie8
	div.style.background ="";
	}

++a与a++

1
++a 先加再执行、a++ 先执行再加

直接上颗栗子

1
2
3
4
var i = 0;
var a = i++ + 1;//计算之前 i=0 计算完后i=1
var b = ++i +1;//i= 1 计算之前 i+=1 计算完后i=2
alert("a= "+a+", b= "+b);//a= 1, b= 3
1
2
3
4
5
6
() 提升优先级
[] 数组
{} 对象
Number() 转换为数字类型
paresInt() 整数
NaN 非数字，不知道类型，所以 NaN 不等于 NaN，这是个神奇的东西

小贴士

1
2
3
4
5
6
7
8
9
<head>
	<script type=“text/javascript”>
		var a = document.getElementById('a');
		alert(a);
	</script>
</head>
<body>
	<p id=“a"></p>
</body>

如果用上面的写法弹出的会是undefined，是因为代码是由上往下执行，a还没执行，js已经执行完了，所以没有找到a，解决方法有两种：

1.在或a后面写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
	<p id=“a"></p>
	<script type=“text/javascript”>
		var a = document.getElementById('a');
		alert(a);
	</script>
</body>
<!--或-->
<!--
<script type=“text/javascript”>
	var a = document.getElementById('a');
	alert(a);
</script>
-->

2.如果你想要在head里面写，可以给他加一个onload事件，然它先加载标签在运行js：

1
2
3
4
5
6
7
8
<head>
	<script type=“text/javascript”>
		window.onload = function (){
			var a = document.getElementById('a');
			alert(a);
		}
	</script>
</head>