JavaScript

发表于 | 更新于 | 评论数： | 阅读次数：

写在开头

 今天看了一个动态博客 typecho
 等结束这一阶段抽空了解下,看看买一个服务器和域名,动态域名可以直接从浏览器写博客方便了很多!  我学习Java主要的还是用来做web后台开发,需要对web有一点了解,从今天开始写一些关于java web的博客,包括但不仅限于:html,js,jQuery,tomcat&servlet,xml,各类框架,还有案例.
 今天看下JavaScript~

JavaScript

 学习的时候有写思维导图的习惯,但是一直没在博客里贴出来,因为JavaScript的内容相对来说比较简单,所以说这一节我贴一个html的思维导图(提供高清版下载),贴一些代码去更真实的体验下html代码的使用
 我也会把学习过程的软件以链接的形式贴上去(阿里云存储服务器,不会限速的(✿◡‿◡))

 废话不多说,开始吧~ 思维导图下载
  

  

引入方式

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 type="text/javascript">
			//使用window.onload可以保证js代码执行在整个文档加载完毕之后
			window.onload = function() {
				console.log(document.getElementById("big"));
			}
		</script>
	</head>
	<body>
		<div id="big"></div>
		<script type="text/javascript">
			console.log(document.getElementById("big"));
		</script>
	</body>
	<script type="text/javascript">
		console.log(document.getElementById("big"));
	</script>
</html>

JavaScript基本语法

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JavaScript</title>
	</head>
	<body>
		
	</body>
	<script>
	var age = 18;
		var height = 185.5;
		var name = "中国一帅";
		var isBoy = true;
		var wife = {
			name: "中国一美",
			gender: "女"
		};
		var son;
		var three = null;
		var hobby = function() {
			console.log("抽烟喝酒烫头");
		}
		console.log(typeof(age));<!-- 控制台输出,未经处理的变量数据类型 -->
		console.log(typeof(height));
		console.log(typeof(name));
		console.log(typeof(isBoy));
		console.log(typeof(wife));
		console.log(typeof(son));
		console.log(typeof(three));
		console.log(typeof(hobby));
	</script>

</html>

四则运算案例

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="num1" placeholder="请输入第一个数字" />
		<input type="text" id="num2" placeholder="请输入第二个数字" />
		<input type="text" id="sign" placeholder="请输入运算符(+ - * /)" />
		<input type="button" id="btn" value="计算" />
	</body>
	<script type="text/javascript">
		//获取元素
		var numInput1 = document.getElementById("num1");
		var numInput2 = document.getElementById("num2");
		var signInput = document.getElementById("sign");
		var btn = document.getElementById("btn");
		
		//为按钮添加点击事件
		btn.onclick = function() {
			//获取值
			var num1 = Number(numInput1.value);
			var num2 = Number(numInput2.value);
			var sign = signInput.value;
			
			switch (sign){
				case "+":
					alert(num1 + num2);
					break;
				case "-":
					alert(num1 - num2);
					break;
				case "*":
					alert(num1 * num2);
					break;
				case "/":
					alert(num1 / num2);
					break;
				default:
					break;
			}
		}
	</script>
</html>

案例

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>tabchange</title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: red;
				color: white;
				font-size: 100px;
				text-align: center;
				line-height: 200px;
				font-weight: bold;
				display: none;
			}
		</style>
	</head>
	<body>
		<input style="background-color: green;" type="button" value="按钮1" />
		<input type="button" value="按钮2" />
		<input type="button" value="按钮3" />
		<div style="display: block;">1</div>
		<div>2</div>
		<div>3</div>
	</body>
	<script type="text/javascript">
		//获取按钮以及div
		var btns = document.getElementsByTagName("input");
		var divs = document.getElementsByTagName("div");
		
		//为按钮循环添加点击事件
		for (var i = 0; i < btns.length; i++) {
			//为按钮绑定一个属性，来存储下标i
			btns[i].index = i;
			btns[i].onclick = function() {
				//将所有按钮的颜色清除，将所有div隐藏
				for (var j = 0; j < divs.length; j++) {
					divs[j].style.display = "none";
					btns[j].style.backgroundColor = "";
				}
				//为当前点击的按钮设置背景色
				this.style.backgroundColor = "green";
				//将当前按钮对应的div显示出来
				divs[this.index].style.display = "block";
			}
		}
	</script>
</html>

JavaScript数组的使用

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//数组的使用
		var arr = new Array();//空数组
		var arr1 = [1, 2, 3, 4, 5];//具有初值的数组
		var arr2 = new Array(5);//初始长度为5的数组,每个元素都是未定义类型undefined
		console.log(arr);
		console.log(arr1);
		console.log(arr2);
		console.log(arr2[0]);
		arr2[5] = 10;
		console.log(arr2);
		arr2.push(20);
		console.log(arr2);
		
		//随机数如何生成？
		/*
		 	[10, 20]区间内的随机整数
		 	Math.random() [0.0, 1.0) 内的浮点数
		 	1、得到目标区间内的整数个数 20 - 10 + 1
		 	2、让整数个数 * Math.random() ==> [0.0, 11.0)
		 	3、对第二步的区间进行取整操作  ==> [0, 10]
		 	4、第三步的区间 + 目标区间最小值  ==> [10, 20]
		 	
		 	[a, b]
		 	parseInt(Math.random() * (b - a + 1)) + a
		 */

鼠标事件案例

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
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>mouseEvent</title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
	<script type="text/javascript">
		var div = document.getElementsByTagName("div")[0];
		
		//封装一个函数来产生随机数
		/*
		 	函数定义的语法格式：
		 	function 函数名称(参数列表) {函数的主体}
		 	参数列表书写时，区别于java，直接写名称即可，不需要写类型！
		 */
		function randomNum(min, max) {
			return parseInt(Math.random() * (max - min + 1)) + min;
		}
		
		//点击事件
		/*div.onclick = function() {
			this.style.backgroundColor = "rgb(" + randomNum(0, 255) +
										"," + randomNum(0, 255) +
										"," + randomNum(0, 255) + ")";
		}*/
		//双击事件
		div.ondblclick = function() {
			this.style.backgroundColor = "rgb(" + randomNum(0, 255) +
										"," + randomNum(0, 255) +
										"," + randomNum(0, 255) + ")";
		}
		//鼠标移入事件
		div.onmouseover = function() {
			this.style.backgroundColor = "rgb(" + randomNum(0, 255) +
										"," + randomNum(0, 255) +
										"," + randomNum(0, 255) + ")";
		}
		//鼠标移出事件
		div.onmouseout = function() {
			this.style.backgroundColor = "rgb(" + randomNum(0, 255) +
										"," + randomNum(0, 255) +
										"," + randomNum(0, 255) + ")";
		}
		//鼠标移动事件
		div.onmousemove = function() {
			this.style.backgroundColor = "rgb(" + randomNum(0, 255) +
										"," + randomNum(0, 255) +
										"," + randomNum(0, 255) + ")";
		}
	</script>
</html>

键盘事件案例

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>keyEvent</title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//键盘按下事件
		/*document.onkeydown = function(ev) {
			alert(ev.keyCode);
			switch (ev.keyCode){
				case 37:
					alert("往左走");
					break;
				case 38:
					alert("往上走");
					break;
				case 39:
					alert("往右走");
					break;
				case 40:
					alert("往下走");
					break;
				default:
					break;
			}
		}*/
		//键盘抬起事件
		/*document.onkeyup = function() {
			alert("键盘抬起了~");
		}*/
		//长按事件
		document.onkeypress = function() {
			//长按只能识别数字、字母、回车、空格，空能键识别不了，比如上下左右
			alert("长按");
		}
	</script>
</html>

表单事件

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>formEvent</title>
	</head>
	<body>
		<form action="" method="get">
			<input type="text" name="username" value="张二麻子" /><br />
			<select name="province">
				<option value="山东省">山东省</option>
				<option value="河北省">河北省</option>
				<option value="日本省">日本省</option>
			</select>
			<select name="city">
				<option value="">---请选择---</option>
			</select><br />
			<input id="btn" type="button" value="提交"/>
		</form>
	</body>
	<script type="text/javascript">
		//表单的提交事件，如何点击按钮让表单提交
		var btn = document.getElementById("btn");
		var form = document.getElementsByTagName("form")[0];
		btn.onclick = function() {
			form.submit();
		}
		//聚焦、失焦事件
		var i = document.getElementsByName("username")[0];
		i.onfocus = function() {
			console.log(this.value);
		}
		i.onblur = function() {
			this.value = "王二驴子";
		}
		//值改变事件
		var s = document.getElementsByName("province")[0];
		s.onchange = function() {
			console.log(this.value);
		}
	</script>
</html>

定时器

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>timer</title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		/*
		 	循环定时器，每隔特定时间，执行一个功能
		 	开启、创建循环定时器的方法setInterval()
		 	此方法的参数：
		 		1、定时器绑定执行的方法
		 		2、间隔时间，单位毫秒
		 		第一次执行绑定方法时，此时间代表延迟时间，之后每一次代表间隔时间
		 	关闭定时器的方法为clearInterval(定时器对象)
		 */
		var index = 1;
		var timer = setInterval(function() {
			index++;
			if (index > 5) {
				clearInterval(timer);
			}
			console.log("cnfox");	
		}, 1000);
		
		/*
		 	单次定时器，可以实现方法的延迟执行
		 	开启单次定时器的方法为setTimeout()
		 	此方法的参数：
		 		1、单次定时器绑定执行的方法
		 		2、方法执行的延迟时间，单位毫秒
		 */
		setTimeout(function() {
			console.log("cnfox");
		}, 3000);
	</script>
</html>

晚安

 今天就到这里了，明天见，加油！

-------------本文结束感谢您的阅读-------------
0%