一、JavaScript的简单介绍
JavaScript是一种属于网络的脚本语言（简称JS）,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
JavaScript代码常存在于HTML文档中，被script标签所包裹。为了方便多个HTML使用同一份JavaScript代码，也可以将JavaScript代码写在js文件中，需要在HTML文档中使用，导入即可。
1 <script>
2 //JavaScript代码
3 alert(123);
4 </scpript>
5
6 <script type="text/javascript">
7 //JavaScript代码
8 alert(123);
9 </scpript>
代码存在于HTML文档中
使用HTML文档导入JavaScript代码
注：script标签可放在HTML文档的head标签内，但建议将其放置在body标签内部的最下方（这样写浏览器会先加载网页的内容，再加载其动态效果）。
二、JavaScript的基本数据类型
JavaScript的基本数据类型有数字(在JS中，数字不区分整型和浮点类型)、数组，字符串，布尔(只用两个值，true和false)。
在JavaScript中申明一个变量：
PI = 3.14 // 声明一个全局变量，赋值3.14， 数字类型
var a = 6; // 声明一个局部变量a，为其赋值6，是数字类型
var b = [1,2,3,4] // 数组
var c = "hell world" // 字符串
var d = true // 布尔类型
var e = {'k1':v1, 'k2':v2, 'k3':v3} //字典
c = null // 清空变量c
字符串类型的常用方法：
"string".length 返回字符串长度
" string ".trim() 移除字符串的空白
" string ".trimLeft() 移除字符串左侧的空白
" string ".trimRight) 移除字符串右侧的空白
"string".charAt(n) 返回字符串中的第n个字符
"string".concat(string2, string3, ...) 拼接
"string".indexOf(substring,start) 子序列起始位置
"string".lastIndexOf(substring,start) 子序列终止位置
"string".substring(from, to) 根据索引获取子序列
"string".slice(start, end) 切片
"string".toLowerCase() 将字符串转为大写
"string".toUpperCase() 将字符串抓为小写
"string".split(delimiter, limit) 以特定字符分割字符串
// 与正则表达式搭配使用
"string".search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效)
"string".match(regexp) 全局搜索，如果正则中有g表示找到"string".replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号
数组类型的常用方法：
obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 从尾部弹出元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
// 可用此句完成对数组的插入，删除，替换操作
obj.splice(start, deleteCount, value, ...) 从start位置开始，删除deleteCount个元素，插入value,...
obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序
四、JavaScript的选择和循环语句
与其他编程语言类型，JS也有三种程序执行流程，即顺序，选择，和循环。
1 if (判断条件){
2 // js代码
3 }else if(判断条件){
4 // js代码
5 }else{
6 // js代码
7 }
8
9 // 常用判断符号与逻辑符号
10 && 逻辑与
11 || 逻辑或
12 > < 大于 小于
13 == != 判断值
14 === !== 判断值和类型
选择语句_1
1 // x代指变量，case为x不动的取值情况，defult当上面的case都不满足执行defult，相当于else
2 switch(x){
3 case '1':
4 var i = 1;
5 break;
6 case '2':
7 var i = 2;
8 break;
9 case '3':
10 var i = 3;
11 break;
12 defult:
13 i = 0;
14 }
选择语句_2
1 1. 循环时循环的是索引
2 a = [11,22,33];
3 for (var item in a){
4 console.log(a[item]); // 在浏览器的console中打印a[item]的值，item是索引
5 }
6
7
8 a = {'k1':'v1', 'k2':'v2', 'k3':'v3'};
9 for (var item in a){
10 console.log(a[item]);
11 }
12
13 2. 常规for循环
14 for (var i=0; i<10; i++){
15 //js代码
16 }
for循环
1 var len = 10;
2 var i = 0;
3 while(i < len){
4 console.log(i); // 代指js代码
5 i++;
6 }
while循环
五、JavaScript的函数申明
与其他编程语言类型，JS也有函数，在JS中申明一个函数特别简单。
// 常规函数
function funcname(a, b, c) {
var a = 0; // JS代码块
}
// 匿名函数，匿名函数只有某一块代码使用，在声明时已经确定由谁来执行它
setIntervar(function(){
console.log(123); // js代码块
}, 5000)
// 自执行函数，函数声明完后立即执行并且不会被其他代码调用
(function(arg){
console.log(arg); //js代码块
})(1)
六、JS面向对象
在JavaScript中，面向对象其实是函数的一种变种，与函数的定义非常类似。
方式一：
// 定义一个类
function Foo(n){
this.name = n; // 属性
// 方法
this.sayHello = function(){
console.log("hello,", name);
}
}
// 实例化一个对象
var obj = new Foo('abc');
obj.name; // 调用属性
obj.sayHello(); // 调用方法
方式二：
function Foo(n){
this.name = n;
}
Foo.prototype = {
'sayHello': function(){
console.log("hello,", this.name);
}
}
var obj = new Foo('abc');
obj.name;
obj.sayHello();
注：通常使用方式二来定义和使用一个对象。
七、JavaScript中常用的系统方法
1. 定时器，每隔特定的时间执行一次特定的任务，用途十分广泛。
var a = setInterval(function(){console.log('hello');}, 间隔时间);
clearInterval(a); // 清除定时器
2. 超时器，设置一段时间，比如5秒钟，当时间超过5秒钟后执行某一任务。
var b = setTimeout(funciton(){console.log('hello')}, 5000); // 设置超时器
clearTimeout(b); // 清除超时器，比如当用户执行某一操作后，取消超时器使用它
3. 弹出提示框
alert('message') // message代指要提示的信息
4. 弹出确认框
// 向用户弹出一个确认框，如果用户选择确认，v=true；否则，v=false。
var v = confirm('message') // message为确认提示信息，比如真的要删除吗？
5. 刷新页面
location.reload(); // 执行此方法浏览器自动刷新当前页面，可以和定时器配合使用用以定时刷新页面
6. 页面跳转
location.href // 获取当前页面的url
location.href = url; // 从当前页面跳转到指定url，可与超时器配合使用，做网站的页面跳转
location.href = location.href; // 与location.reload()效果相同，刷新当前页面
7. eval（使用eval，可将字符串转换成代码执行）
var s = '1+2';
var a = eval(s);
console.log(a);
8. 序列化
序列化试将一个对象转化成字符串，方便存储，打印等。在任何一门编程语言中都存在序列化。
而反序列化是将读取到的字符串转化为对象，方便程序使用。
在js中，序列化与反序列画的操作如下：
ls = [1,2,3,4];
s = JSON.stringify(ls); //object ---> string
console.log(s);
new_ls = JSON.parse(s) //string ---> object
console.log(new_ls);
9. 字符串的编码与解码
为了能够在所有计算机上识别出字符串，在传输过程中要对字符串编码，传输完成后要对字符串解码。
escape(str) // 对字符串编码
unescape(str) // 对字符串解码
encodeURI() // 对URI编码
decodeURI() // 对URI解码与encodeURI() 对应
encodeURIComponent() // 对URI编码
decodeURIComponent() // 对URI解码与encodeURIComponent() 对应
八、触发JavaScript的事件
当我们用鼠标点击浏览器界面中的一个按钮时就触发了一个事件(即点击事件)，类似的还有很多其他事件，比如当鼠标移动到某个标签上，光标选中某个输入框等，这些都是事件，那么就，接下来就介绍一下一些常用的事件。
标签绑定事件的方式：
对div标签绑定点击事件
方式一：
<div id="i1" onclick="funcname">点我</div>
方式二：
<div id="i1">点我</div>
tag = document.getElementById("i1");
tag.onclick = funciton () {console.log("div i1");};
方式三：
<div id="i2">点我</div>
tag = document.getElementById("i2");
tag.addEventListener("click", function () {
console.log("div i2");
}, false);
注：使用方式二和方式三可做到事件与标签相分离，在测试代码时，可以使用方式一绑定标签与事件，在日常编程中建议使用方式二和方式三。
常用的事件有：
onclick --- 鼠标点击执行js函数
onfocus --- 光标选中执行js函数
onblur --- 光标移走执行js函数
onmouseover --- 鼠标移到某个标签执行js函数
onmouseout --- 鼠标从某个标签移走执行js函数
八、使用JavaScript完成一些常用功能
1. HTML中的模态对话框
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <style>
8 .c2{
9 background-color: black;
10 opacity: 0.4;
11 z-index: 8;
12 position: fixed;
13 top: 0;
14 right: 0;
15 bottom: 0;
16 left: 0;
17
18 }
19 .c3{
20 background-color: white;
21 z-index: 9;
22 height: 200px;
23 width: 500px;
24 position: fixed;
25 top: 25%;
26 left: 50%;
27 margin-left: -250px;
28 }
29 .hid{
30 display: none;
31 }
32 </style>
33 </head>
34 <body style="margin: 0 auto;">
35 <div>
36 <table style="border: 1px solid red" border="1">
37 <thead>
38 <tr>
39 <th>host</th>
40 <th>port</th>
41 </tr>
42 </thead>
43 <tbody>
44 <tr>
45 <td>1.1.1.1</td>
46 <td>1111</td>
47 </tr>
48 <tr>
49 <td>1.1.1.2</td>
50 <td>1112</td>
51 </tr>
52 <tr>
53 <td>1.1.1.3</td>
54 <td>1113</td>
55 </tr>
56 </tbody>
57 </table>
58 </div>
59 <div>
60 <input type="button" value="添加" onclick="ShowModel();"/>
61 </div>
62
63 <!--遮罩层-->
64 <div id="i2"; class="c2 hid"></div>
65 <!--对话框-->
66 <div id="i3" class="c3 hid">
67 <fieldset style="border: 1px solid red;">
68 <legend>添加</legend>
69 <div>
70 <label>host:</label>
71 <input type="text"/>
72 </div>
73 <div>
74 <label>port:</label>
75 <input type="text"/>
76 </div>
77 <p>
78 <input type="button" value="取消" onclick="HiddenModel();"/>
79 <input type="button" value="确定"/>
80 </p>
81 </fieldset>
82 </div>
83
84 <script>
85 function ShowModel() {
86 tag = document.getElementById('i2').classList.remove('hid');
87 tag = document.getElementById('i3').classList.remove('hid');
88 }
89 function HiddenModel() {
90 tag = document.getElementById('i2').classList.add('hid');
91 tag = document.getElementById('i3').classList.add('hid');
92 }
93 </script>
94 </body>
95 </html>
View Code
2. HTML中的全选，反选，取消按钮
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <div>
9 <div>
10 <input type="button" value="全选" onclick="checkedAll();"/>
11 <input type="button" value="反选" onclick="reverseAll();"/>
12 <input type="button" value="取消" onclick="cancelAll();"/>
13 </div>
14
15 <table style="border: 1px solid red;" border="1">
16 <thead>
17 <tr>
18 <th>opotion</th>
19 <th>host</th>
20 <th>port</th>
21 </tr>
22 </thead>
23 <tbody id="i3">
24 <tr>
25 <td><input type="checkbox"></td>
26 <td>1.1.1.1</td>
27 <td>1111</td>
28 </tr>
29 <tr>
30 <td><input type="checkbox"></td>
31 <td>1.1.1.2</td>
32 <td>1112</td>
33 </tr>
34 <tr>
35 <td><input type="checkbox"></td>
36 <td>1.1.1.3</td>
37 <td>1113</td>
38 </tr>
39 <tr>
40 <td><input type="checkbox"></td>
41 <td>1.1.1.4</td>
42 <td>1114</td>
43 </tr>
44 <tr>
45 <td><input type="checkbox"></td>
46 <td>1.1.1.4</td>
47 <td>1114</td>
48 </tr>
49 <tr>
50 <td><input type="checkbox"></td>
51 <td>1.1.1.5</td>
52 <td>1115</td>
53 </tr>
54 </tbody>
55 </table>
56 </div>
57 <script>
58 function checkedAll() {
59 var tags = document.getElementById("i3").children;
60 for (var i in tags) {
61 var checkbox = tags[i].firstElementChild.firstElementChild;
62 checkbox.checked = true;
63 }
64 }
65
66 function cancelAll() {
67 var tags = document.getElementById("i3").children;
68 for (var i in tags) {
69 var checkbox = tags[i].firstElementChild.firstElementChild;
70 checkbox.checked = false;
71 }
72 }
73
74 function reverseAll() {
75 var tags = document.getElementById("i3").children;
76 for (var i in tags) {
77 var checkbox = tags[i].firstElementChild.firstElementChild;
78 if (checkbox.checked) {
79 checkbox.checked = false;
80 }
81 else {
82 checkbox.checked = true;
83 }
84
85 }
86 }
87 </script>
88 </body>
89 </html>
View Code
3. 类似于购物商城的左侧菜单栏
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <style>
8 .item {
9 margin-bottom: 15px;
10 }
11
12 .menu {
13 background-color: blueviolet;
14 height: 30px;
15 line-height: 30px;
16 font-weight: bolder;
17 }
18
19 .hide {
20 display: none;
21 }
22
23 .content{
24 background-color: lightseagreen;
25 }
26 </style>
27 </head>
28 <body>
29
30 <div style="height: 150px;"></div>
31 <div style="width: 350px; border: 1px solid red;">
32 <div class="item">
33 <div id="i1" class="menu" onclick="ChangeMenu('i1');">菜单1</div>
34 <div class="content">
35 <div>内容1</div>
36 <div>内容1</div>
37 <div>内容1</div>
38 <div>内容1</div>
39 </div>
40 </div>
41 <div class='item'>
42 <div id="i2" class="menu" onclick="ChangeMenu('i2');">菜单2</div>
43 <div class="content hide">
44 <div>内容2</div>
45 <div>内容2</div>
46 <div>内容2</div>
47 <div>内容2</div>
48 </div>
49 </div>
50 <div class='item'>
51 <div id="i3" class="menu" onclick="ChangeMenu('i3');">菜单3</div>
52 <div class="content hide">
53 <div>内容3</div>
54 <div>内容3</div>
55 <div>内容3</div>
56 <div>内容3</div>
57 </div>
58 </div>
59 <div class='item'>
60 <div id="i4" class="menu" onclick="ChangeMenu('i4');">菜单4</div>
61 <div class="content hide">
62 <div>内容4</div>
63 <div>内容4</div>
64 <div>内容4</div>
65 <div>内容4</div>
66 </div>
67 </div>
68 </div>
69
70 <script>
71 function ChangeMenu(id) {
72 menu = document.getElementById(id);
73 items = menu.parentElement.parentElement.children;
74
75 for (var i=0; i<items.length; i++) {
76 var current_item = items[i].children;
77 current_item[1].classList.add('hide');
78 }
79 menu.nextElementSibling.classList.remove('hide');
80 }
81 </script>
82 </body>
83 </html>
View Code
4. 鼠标移到标签某行改变其样式，移走恢复
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <table border="1" width="300px">
9 <tr><td>1</td><td>2</td><td>3</td></tr>
10 <tr><td>1</td><td>2</td><td>3</td></tr>
11 <tr><td>1</td><td>2</td><td>3</td></tr>
12 </table>
13
14 <script>
15 var myTag = document.getElementsByTagName('tr'); // 找到标签
16
17 for (var i=0, len=myTag.length; i<len; i++) {
18 myTag[i].onmouseover = function () {
19 this.style.backgroundColor = "red"; // 改变样式
20 }
21
22 myTag[i].onmouseout = function () {
23 this.style.backgroundColor = ""; //恢复样式
24 }
25 </script>
26 </body>
27 </html>
View Code
5. 搜索框提示信息
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .search{
8 margin: 0 auto;
9 border: 1px solid red;
10 }
11 </style>
12 </head>
13 <body>
14 <div style="width: 100%;">
15 <input id="i1" class="search" type="text" name="keywords" onfocus="Focus();" onblur="Blur();" value="请输入关键字"/>
16 <input type="button" value="搜索"/>
17 </div>
18
19 <script>
20 function Focus() {
21 tag = document.getElementById('i1');
22 val = tag.value;
23 console.log(val);
24 if (val == "请输入关键字") {
25 tag.value = "";
26 }
27 }
28 function Blur() {
29 console.log(2);
30 tag = document.getElementById('i1');
31 val = tag.value;
32 if (val == "") {
33 tag.value = "请输入关键字";
34 }
35 }
36
37 </script>
38 </body>
39 </html>
View Code
js实现Element中input组件的部分功能并封装成组件(实例代码)
纯JS实现贪吃蛇游戏 —— 可能是全网代码最优雅的实现
