1、JavaScript-简介、实现、输出
js--是一种轻量级编程语言，HTML中的脚本；
脚本代码必须位于 <script> 标签之间，<script> 可在 <head> 或者 <body> 引入；
通用的 js库 在 <head> 中引入；某些需要文档加载才开始执行 js 写在 <body> 相应位置
js 脚本引入方式：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!-- head 内引入 js --> 12 <script type="text/javascript" src="../js/bootstrap.min.js"></script> 14 </head> 15 <body> 16 <p id="p1">段落段落段落</p> 17 18 <!-- body内引入 js文件 defer属性 定义 脚本 会在整个页面加载到某一布时 再执行，这样就不会造成 网页打开延迟--> 19 <script type="text/javascript" defer="defer"> 20 document.write("<h1>这是一个标题</h1>>"); 22 </script> 24 </body> 25 </html>
2、JavaScript-语法和注释
javascript语句：向浏览器发出命令，告诉浏览器该做什么
javascript代码执行顺序：按照编写顺序依次执行
javascript标识符：必须以字母、下划线或者$符号开始
javascript关键字不能作为变量等名称使用
javascript对字母大小写敏感，会忽略多余空格
javascript注释：单行注释 //
多行注释 /* */
3、JavaScript-变量和数据类型\
（1）变量
变量作为存储信息的容器，其值可通过变量名访问。js是弱数据类型语言，定义变量统一使用关键字var，也可以不使用var；
函数中，若使用var声明变量，程序会强制定义一个新变量，有同名的全局变量会覆盖该变量；
1 <html> 2 <head lang="en"> 3 <meta charset="UTF-8"> 4 <title></title> 5 <script type="text/javascript"> 6 // 定义全局变量 word 7 var word = "全局变量"; 8 function demo() { 9 // 局部变量 覆盖 全局变量 10 document.writeln(word + "<br/>"); 11 // 定义局部变量 作用范围在 函数内 12 var word = "局部变量" 13 document.writeln(word); 14 } 15 </script> 16 </head> 17 <body> 18 <p id="result">幸福</p> 19 <button onclick="demo()">点击</button> 20 </body> 21 </html>
执行结果 
函数中若不使用var声明变量，系统会优先在当前上下文中搜索是否存在该变量，不存在时系统才会重新定义一个新变量；若存在，系统会将全局变量赋值函数内变量（也是全局变量）。js没有块级作用域的概念，if和for语句中声明的变量会添加到当前的执行环境中。
1 <html> 2 <head lang="en"> 3 <meta charset="UTF-8"> 4 <title></title> 5 <script type="text/javascript"> 6 // 定义全局变量 7 var word = "全局变量"; 8 function demo() { 9 // 局部变量 覆盖 全局变量 10 document.writeln(word + "<br/>"); 11 // 定义局部变量 作用范围在 函数内 12 word = "局部变量" 13 document.writeln(word); 14 } 15 </script> 16 </head> 17 <body> 18 <p id="result">幸福</p> 19 <button onclick="demo()">点击</button> 20 </body> 21 </html>
（2）数据类型
1）字符串（string）
字符串相关应用如下：
1 <html> 2 <head lang="en"> 3 <meta charset="UTF-8"> 4 <title></title> 5 </head> 6 <body> 7 <p id="ph">One Flew Over the Cuckoos Nest</p> 8 <button id="btn">获取字符长度</button> 9 <br/> 10 <script> 11 var film = "The Shawshank Redemption"; //定义 字符串 12 var character = film[6]; //定义 film 的 第六个字符 13 var n = film.indexOf("w"); //定义 film 字符串中 w 字符串的位置 14 document.write(film); 15 document.getElementById("btn").onclick = function(){aboutString()}; 16 17 function aboutString(){ 18 //获取字符长度 19 document.getElementById("p1").innerHTML = film.length; 20 //访问第六个字符 21 document.getElementById("p2").innerHTML = character; 22 //获取 w 字符出现的位置 23 document.getElementById("p3").innerHTML = n+1; 24 //匹配字符串中某些字符内容 有即返回字符 25 document.getElementById("p4").innerHTML = film.match("HaHa"); 26 //替换字符串 内容 27 var str = document.getElementById("ph").innerHTML; 28 var str_new = str.replace("The Godfather Part II"); 29 document.getElementById("p5").innerHTML = str_new; 30 //字符串转 大写 31 document.getElementById("p6").innerHTML = film.toUpperCase(); 32 //字符串转 小写 33 document.getElementById("p7").innerHTML = film.toLowerCase(); 34 //字符串转 数组 35 var str = "a,b,c,d,e"; 36 var n = str.split(","); 37 document.getElementById("p8").innerHTML = n[1]; 38 } 39 </script> 40 <p id="p1"></p> 41 <p id="p2"></p> 42 <p id="p3"></p> 43 <p id="p4"></p> 44 <p id="p5"></p> 45 <p id="p6"></p> 46 <p id="p7"></p> 47 <p id="p8"></p> 48 </body> 49 </html>
2）数字
1 <html> 2 <head lang="en"> 3 <meta charset="UTF-8"> 4 <title></title> 5 </head> 6 <body> 7 <button id="btn">数字运算</button> 8 <script> 9 document.getElementById("btn").onclick = function(){aboutMath()}; 10 var a = 123.456, 11 b = 456.789 12 function aboutMath() { 13 //取整 最接近的 14 document.getElementById("p1").innerHTML = Math.round(a); 15 //取随机数 0-1 16 document.getElementById("p2").innerHTML = Math.random(); 17 // 取较大数 18 document.getElementById("p3").innerHTML = Math.max(a,b); 19 // 取较小数 20 document.getElementById("p3").innerHTML = Math.min(a,b); 21 } 22 </script> 23 <p id="p1"></p> 24 <p id="p2"></p> 25 <p id="p3"></p> 26 <p id="p4"></p> 27 </body> 28 </html>
3）布尔
1 <script type="text/javascript"> 2 var flag = true; 3 var tree = false; 4 </script>
4）数组
1 <html> 2 <head lang="en"> 3 <meta charset="UTF-8"> 4 <title></title> 5 </head> 6 <body> 7 <!-- 数组：使用单独的变量名来存储一系列的值 --> 8 <button id="btn">点击</button> 9 <script> 10 document.getElementById("btn").onclick = function(){aboutArray()}; 11 12 function aboutArray() { 13 // 创建数组 14 var grandparents = ["Amy","John"]; 15 var parents = ["Sophia","Brown","Jim","Mona"]; 16 var children = new Array(); 17 children[0] = "Kat"; 18 children[1] = "Fang"; 19 children[2] = "Ana"; 20 //数组元素输出 21 document.getElementById("p1").innerHTML = children.join(); 22 //合并二个数组 23 var older = parents.concat(grandparents); 24 document.getElementById("p2").innerHTML = older; 25 //合并三个数组 26 var family = parents.concat(brothers,children); 27 document.getElementById("p3").innerHTML = family; 28 //删除数组最后元素 29 document.getElementById("p4").innerHTML = parents.pop(); 30 //数组末尾添加元素 31 document.getElementById("p5").innerHTML = grandparents.push("Smith"); 32 //数组元素倒序 33 document.getElementById("p6").innerHTML = parents.reverse(); 34 //删除数组第一个元素 35 document.getElementById("p7").innerHTML = parents.shift(); 36 //显示第二至第三元素 37 document.getElementById("p8").innerHTML = parents.slice(1,2); 38 //升序 39 // 排序会有字母升序、数组升序、数字倒序等情况 40 var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; 41 document.getElementById("p9").innerHTML = fruits.sort(); 42 // 43 document.getElementById("p10").innerHTML = grandparents.splice(2,0,"Kiwi","Cheer"); 44 var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; 45 document.getElementById("p11").innerHTML = fruits.toString(); 46 document.getElementById("p12").innerHTML = fruits.unshift("Cheer"); 47 } 48 </script> 49 <p id="p1"></p> 50 <p id="p2"></p> 51 <p id="p3"></p> 52 <p id="p4"></p> 53 <p id="p5"></p> 54 <p id="p6"></p> 55 <p id="p7"></p> 56 <p id="p8"></p> 57 <p id="p9"></p> 58 <p id="p10"></p> 59 <p id="p11"></p> 60 <p id="p12"></p> 61 </body> 62 </html>
5）对象
6）空
可以通过赋值为空的方式清除变量值
7）未定义