爱站程序员基地一、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>56 <script type=\"text/javascript\">7 //JavaScript代码8 alert(123);9 </scpript>代码存在于HTML文档中
注：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 }89 // 常用判断符号与逻辑符号10 && 逻辑与11 || 逻辑或12 > < 大于 小于13 == != 判断值14 === !== 判断值和类型选择语句_1
1 // x代指变量，case为x不动的取值情况，defult当上面的case都不满足执行defult，相当于else2 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 }678 a = {\'k1\':\'v1\', \'k2\':\'v2\', \'k3\':\'v3\'};9 for (var item in a){10 console.log(a[item]);11 }1213 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 }
四、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中常用的系统方法
- 定时器，每隔特定的时间执行一次特定的任务，用途十分广泛。
var a = setInterval(function(){console.log(\'hello\');}, 间隔时间);clearInterval(a); // 清除定时器
- 超时器，设置一段时间，比如5秒钟，当时间超过5秒钟后执行某一任务。
var b = setTimeout(funciton(){console.log(\'hello\')}, 5000); // 设置超时器clearTimeout(b); // 清除超时器，比如当用户执行某一操作后，取消超时器使用它
- 弹出提示框
alert(\'message\') // message代指要提示的信息
- 弹出确认框
// 向用户弹出一个确认框，如果用户选择确认，v=true；否则，v=false。var v = confirm(\'message\') // message为确认提示信息，比如真的要删除吗？
- 刷新页面
location.reload(); // 执行此方法浏览器自动刷新当前页面，可以和定时器配合使用用以定时刷新页面
- 页面跳转
location.href // 获取当前页面的urllocation.href = url; // 从当前页面跳转到指定url，可与超时器配合使用，做网站的页面跳转location.href = location.href; // 与location.reload()效果相同，刷新当前页面
- eval（使用eval，可将字符串转换成代码执行）
var s = \'1+2\';var a = eval(s);console.log(a);
- 序列化
序列化试将一个对象转化成字符串，方便存储，打印等。在任何一门编程语言中都存在序列化。
而反序列化是将读取到的字符串转化为对象，方便程序使用。
在js中，序列化与反序列画的操作如下：
ls = [1,2,3,4];s = JSON.stringify(ls); //object ---> stringconsole.log(s);new_ls = JSON.parse(s) //string ---> objectconsole.log(new_ls);
- 字符串的编码与解码
为了能够在所有计算机上识别出字符串，在传输过程中要对字符串编码，传输完成后要对字符串解码。
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完成一些常用功能
- HTML中的模态对话框**
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><style>.c2{background-color: black;opacity: 0.4;z-index: 8;position: fixed;top: 0;right: 0;bottom: 0;left: 0;}.c3{background-color: white;z-index: 9;height: 200px;width: 500px;position: fixed;top: 25%;left: 50%;margin-left: -250px;}.hid{display: none;}</style></head><body style=\"margin: 0 auto;\"><div><table style=\"border: 1px solid red\" border=\"1\"><thead><tr><th>host</th><th>port</th></tr></thead><tbody><tr><td>1.1.1.1</td><td>1111</td></tr><tr><td>1.1.1.2</td><td>1112</td></tr><tr><td>1.1.1.3</td><td>1113</td></tr></tbody></table></div><div><input type=\"button\" value=\"添加\" onclick=\"ShowModel();\"/></div><!--遮罩层--><div id=\"i2\"; class=\"c2 hid\"></div><!--对话框--><div id=\"i3\" class=\"c3 hid\"><fieldset style=\"border: 1px solid red;\"><legend>添加</legend><div><label>host:</label><input type=\"text\"/></div><div><label>port:</label><input type=\"text\"/></div><p><input type=\"button\" value=\"取消\" onclick=\"HiddenModel();\"/><input type=\"button\" value=\"确定\"/></p></fieldset></div><script>function ShowModel() {tag = document.getElementById(\'i2\').classList.remove(\'hid\');tag = document.getElementById(\'i3\').classList.remove(\'hid\');}function HiddenModel() {tag = document.getElementById(\'i2\').classList.add(\'hid\');tag = document.getElementById(\'i3\').classList.add(\'hid\');}</script></body></html>
- HTML中的全选，反选，取消按钮
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title></head><body><div><div><input type=\"button\" value=\"全选\" onclick=\"checkedAll();\"/><input type=\"button\" value=\"反选\" onclick=\"reverseAll();\"/><input type=\"button\" value=\"取消\" onclick=\"cancelAll();\"/></div><table style=\"border: 1px solid red;\" border=\"1\"><thead><tr><th>opotion</th><th>host</th><th>port</th></tr></thead><tbody id=\"i3\"><tr><td><input type=\"checkbox\"></td><td>1.1.1.1</td><td>1111</td></tr><tr><td><input type=\"checkbox\"></td><td>1.1.1.2</td><td>1112</td></tr><tr><td><input type=\"checkbox\"></td><td>1.1.1.3</td><td>1113</td></tr><tr><td><input type=\"checkbox\"></td><td>1.1.1.4</td><td>1114</td></tr><tr><td><input type=\"checkbox\"></td><td>1.1.1.4</td><td>1114</td></tr><tr><td><input type=\"checkbox\"></td><td>1.1.1.5</td><td>1115</td></tr></tbody></table></div><script>function checkedAll() {var tags = document.getElementById(\"i3\").children;for (var i in tags) {var checkbox = tags[i].firstElementChild.firstElementChild;checkbox.checked = true;}}function cancelAll() {var tags = document.getElementById(\"i3\").children;for (var i in tags) {var checkbox = tags[i].firstElementChild.firstElementChild;checkbox.checked = false;}}function reverseAll() {var tags = document.getElementById(\"i3\").children;for (var i in tags) {var checkbox = tags[i].firstElementChild.firstElementChild;if (checkbox.checked) {checkbox.checked = false;}else {checkbox.checked = true;}}}</script></body></html>
- 类似于购物商城的左侧菜单栏
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><style>.item {margin-bottom: 15px;}.menu {background-color: blueviolet;height: 30px;line-height: 30px;font-weight: bolder;}.hide {display: none;}.content{background-color: lightseagreen;}</style></head><body><div style=\"height: 150px;\"></div><div style=\"width: 350px; border: 1px solid red;\"><div class=\"item\"><div id=\"i1\" class=\"menu\" onclick=\"ChangeMenu(\'i1\');\">菜单1</div><div class=\"content\"><div>内容1</div><div>内容1</div><div>内容1</div><div>内容1</div></div></div><div class=\'item\'><div id=\"i2\" class=\"menu\" onclick=\"ChangeMenu(\'i2\');\">菜单2</div><div class=\"content hide\"><div>内容2</div><div>内容2</div><div>内容2</div><div>内容2</div></div></div><div class=\'item\'><div id=\"i3\" class=\"menu\" onclick=\"ChangeMenu(\'i3\');\">菜单3</div><div class=\"content hide\"><div>内容3</div><div>内容3</div><div>内容3</div><div>内容3</div></div></div><div class=\'item\'><div id=\"i4\" class=\"menu\" onclick=\"ChangeMenu(\'i4\');\">菜单4</div><div class=\"content hide\"><div>内容4</div><div>内容4</div><div>内容4</div><div>内容4</div></div></div></div><script>function ChangeMenu(id) {menu = document.getElementById(id);items = menu.parentElement.parentElement.children;for (var i=0; i<items.length; i++) {var current_item = items[i].children;current_item[1].classList.add(\'hide\');}menu.nextElementSibling.classList.remove(\'hide\');}</script></body></html>
- 鼠标移到标签某行改变其样式，移走恢复
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title></head><body><table border=\"1\" width=\"300px\"><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr></table><script>var myTag = document.getElementsByTagName(\'tr\'); // 找到标签for (var i=0, len=myTag.length; i<len; i++) {myTag[i].onmouseover = function () {this.style.backgroundColor = \"red\"; // 改变样式}myTag[i].onmouseout = function () {this.style.backgroundColor = \"\"; //恢复样式}</script></body></html>
- 搜索框提示信息
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><style>.search{margin: 0 auto;border: 1px solid red;}</style></head><body><div style=\"width: 100%;\"><input id=\"i1\" class=\"search\" type=\"text\" name=\"keywords\" onfocus=\"Focus();\" onblur=\"Blur();\" value=\"请输入关键字\"/><input type=\"button\" value=\"搜索\"/></div><script>function Focus() {tag = document.getElementById(\'i1\');val = tag.value;console.log(val);if (val == \"请输入关键字\") {tag.value = \"\";}}function Blur() {console.log(2);tag = document.getElementById(\'i1\');val = tag.value;if (val == \"\") {tag.value = \"请输入关键字\";}}</script></body></html>
