JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
是一种解释性脚本语言（代码不进行预编译）。
JavaScript 基本特点:
1.主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
2.可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
3.跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。 Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
4.可以实现web页面的人机交互。
JavaScript 存在位置
1. Script代码块，只能在当前页面使用。
应用场景：所有功能仅当前页面需要（如果代码太多也推荐放入js文件）。
1 DOCTYPE html> 2 <html> 3 <head> 4 <title>js testtitle> 5 <script type="text/javascript"> 6 // 内部编写JavaScript代码 7 script> 8 head> 9 <body> 10 11 body> 12 html>
2. 独立js文件，可以被多个引入之后使用。
应用场景：多个页面公共功能可以放入文件，避免重复编写。
1 DOCTYPE html> 2 <html> 3 <head> 4 <title>js testtitle> 5 <script type="text/javascript" src="js文件路径">script> 6 head> 7 <body> 8 9 body> 10 html>
javascript 推荐位置
推荐js代码都放在body标签的底部。因为浏览器在解析HTML、CSS、JavaScript文件时，是按照从上到下逐步解释并执行，如果JavaScript代码或文件放在head中可能会有因为耗时（网络请求或代码）导致页面显示速度太慢，影响用户体验。
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JavaScript推荐位置title> 6 7 <link rel="stylesheet" href="CSS文件路径"> 8 <style> 9 /* 内部编写CSS代码 */ 10 style> 11 head> 12 <body> 13 <h1>HTML标签和样式h1> 14 15 <script type="text/javascript" src="JavaScript文件路径">script> 16 <script type="text/javascript"> 17 // 内部编写JavaScript代码 18 script> 19 body> 20 html>
JavaScript 基础
JavaScript 变量
1 <script type="text/javascript"> 2 // 全局变量 3 var1 = "hello kugou!"; 4 function func1(){ 5 // 声明一个局部变量(推荐) 6 var var2 = "music is enough"; 7 // 声明一个全局变量（不推荐） 8 var3 = "TME"; 9 console.log(var2); 10 } 11 func1(); 12 console.log(var1); 13 // console.log(var2); 如从再此次访问var2会报错，作用域问题。 14 console.log(var3); 15 script>
JavaScript常见的数据类型
1. 数字（Number）
JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。
1 <script type="text/javascript"> 2 // 声明 3 var page = 111; 4 var age = Number(18); 5 var a1 = 1,a2 = 2, a3 = 3; 6 // 转换 7 parseInt("1.2"); // 将某值转换成数字，不成功则NaN 8 parseFloat("1.2"); // 将某值转换成浮点数，不成功则NaN 9 /*NaN，非数字。可使用 isNaN(num) 来判断。 10 Infinity，无穷大。可使用 isFinite(num) 来判断。*/ 11 //查看变量类型 12 typeof(a1) 13 script>
2.字符串（String）
字符串常用操作
1 <script type="text/javascript"> 2 //字符串声明 3 var name1 = "hello kugou!"; 4 var name2 = String(" hello kugou! "); 5 var name3 = new String(12); 6 7 //数组常用方法 8 console.log(name1[0]); //根据索引获取字符串元素 9 console.log(name2.length); //获取字符串长度 10 console.log(name1.charAt(3)) //根据索引获取字符串元素 11 console.log(name2.trim()) //去除字符串空白字符 12 console.log(name1.substring(0,name1.length - 1)) //根据索引范围获取字符串值 13 script>
举例-标题跑马灯
1 <script type="text/javascript"> 2 //标题跑马灯 3 function paomadeng() { 4 // body... 5 var title = document.title; 6 var lastChar = title.charAt(title.length - 1); 7 var newTitle = lastChar + title.substring(0, title.length-1); 8 document.title = newTitle; 9 } 10 11 // setInterval(handler: any, timeout?: long, arguments...: any) 每隔long s 执行一次 any函数 12 setInterval(paomadeng, 1000); 13 script>
3.布尔类型（Boolean）
1 <script type="text/javascript"> 2 var status = true; 3 var status = false; 4 /* 5 在js中进行比较时，需要注意： 6 == 比较值相等 7 != 不等于 8 === 比较值和类型相等 9 !=== 不等于 10 || 或 11 && 且 12 */ 13 script>
4.数组（Array）
1 <script type="text/javascript"> 2 //数组声明 3 var arr1 = ['hello','kugou','is','good'] 4 var arr2 = new Array('hello','kugou','is','good') 5 //数组常见方法 6 console.log(arr1[0]) //根据下标获取数组值 7 arr1.push('nice') //尾部追加元素 8 console.log(arr1) 9 var value = arr1.pop() //尾部移除一个元素 10 console.log(value);console.log(arr1) 11 arr1.unshift('hi') //头部插入元素 12 console.log(arr1) 13 value = arr1.shift() //头部移除一个元素 14 console.log(value);console.log(arr1) 15 // names.splice(index,0,ele) // 在指定索引位置插入元素 16 // names.splice(index,1,ele) // 指定索引位置替换元素 17 // names.splice(index,1) // 指定位置删除元素 18 arr1.splice(2,0,'music') //在指定索引位置插入元素 19 console.log(arr1) 20 arr1.splice(1,1,'TME') //指定索引位置替换元素 21 console.log(arr1) 22 arr1.splice(2,1) //指定位置删除元素 23 console.log(arr1) 24 console.log(arr1.slice(0,2)) //切片 25 console.log(arr1.reverse()) //数组反转 26 console.log(arr1.join('-')) // 将数组元素连接起来以构建一个字符串 27 console.log(arr1.concat(arr2)) // 连接数组 28 console.log(arr1.sort()) // 对原数组进行排序 29 script>
5. 字典（对象Object）
1 <script type="text/javascript"> 2 //字典定义 3 var dic1 = { 4 'name':'nuanhuang', 5 'age':29, 6 'addr':'河南许昌', 7 } 8 //字典常规操作 9 var name = dic1['name'] //获取字典值 10 dic1['age'] = 30 //更新字典值 11 dic1['Level'] = 'T2-1' //新增元素 12 delete dic1['age'] //删除某个元素 13 console.log(dic1); 14 script>
6.其他(null、undefine)
1 var var1 2 typeof(var1) //null 类型 3 typeof(xxx) //undefine 类型
JavaScript条件&循环语句
1. if...else 语句
1 <script type="text/javascript"> 2 var a = 1,b=2; 3 if (a == 1){ 4 console.log("a=1") 5 }else { 6 console.log('a!=1') 7 } 8 9 if (a == 1 && b == 1){ 10 console.log("a==1 and b==1") 11 }else if (a == 1 || b == 1) { 12 console.log("a==1 or b==1") 13 }else { 14 console.log("a!=1 and b!=1") 15 } 16 script>
2. for循环
1 <script type="text/javascript"> 2 var dic1 = { 3 'name':'nuanhuang', 4 'age':28, 5 'addr':'gz', 6 } 7 8 var arr = ['nuanhuang','love','kugou','music'] 9 10 for(var i in dic1){ 11 console.log(dic1[i]) 12 } 13 for(var i in arr){ 14 console.log(i,arr[i]) 15 } 16 17 var sum = 0 18 for(var i =0 ;i < 10;i++){ 19 sum += i 20 } 21 console.log(sum) 22 script>
3. switch...case语句
1 var sum = 40 2 switch (sum) { 3 case 10: 4 // statements_1 5 console.log('sum == 10') 6 break; 7 case 20: 8 console.log('sum == 20') 9 break; 10 case 40: 11 console.log('sum == 40') 12 break; 13 default: 14 console.log('sum != 10 and sum != 20 and sum != 40') 15 // statements_def 16 break; 17 }
4.异常处理try...catch...finaly
主动抛异常 throw “xx” 或 throw Error({code:1000,error:’错了’})
catch只能破获一次，如果想要对异常精细化处理可以在catch代码块中再做类型判断。
1 <script type="text/javascript"> 2 try { 3 //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行 4 var name = '' 5 } 6 catch (e) { 7 // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。 8 //e是一个局部变量，用来指向Error对象或者其他抛出的对象 9 } 10 finally { 11 //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。 12 } 13 script>
JavaScript函数
1.普通函数
1 <script type="text/javascript"> 2 //js 普通函数 3 function func1(args){ 4 alert(args) 5 } 6 func1("hello kugou!") 7 script>
2.匿名函数
1 <script type="text/javascript"> 2 function runTitle(){ 3 var title = document.title; 4 var lastChar = title.charAt(title.length-1); 5 console.log(lastChar) 6 var newTitle = lastChar+title.substring(0,title.length-1); 7 document.title = newTitle; 8 } 9 //setInterval(handler: any, timeout?: long, arguments...: any) 内置函数 10 setInterval(runTitle, 1000) 11 script>
3.自执行函数
1 <script type="text/javascript"> 2 //js自执行函数（无参数） 3 (function func2(){ 4 alert("js自执行函数") 5 })() 6 7 //js自执行函数（有参数） 8 (function func3(args){ 9 alert(args); 10 })("hello kugou") 11 script>
4.内置函数 编码/解码
1 <script type="text/javascript"> 2 var url='http://www.kugou.com?name="黄涛"&age=18&skill="python&MySQL"' 3 4 //字符串作为 URI 进行编码 5 var url_encode = encodeURI(url) 6 //输出：http://www.kugou.com?name=%22%E9%BB%84%E6%B6%9B%22&age=18&skill=%22python&MySQL%22 7 console.log(url_encode) 8 //解码 9 decodeURI(url_encode) 10 11 //字符串作为 URI 组件进行编码 12 var url_encode = encodeURIComponent(url) 13 //输出：http%3A%2F%2Fwww.kugou.com%3Fname%3D%22%E9%BB%84%E6%B6%9B%22%26age%3D18%26skill%3D%22python%26MySQL%22 14 console.log(url_encode) 15 //解码 16 decodeURIComponent(url_encode) 17 script>
5.内置函数 eval()
eval 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
1 <script type="text/javascript"> 2 //eval 函数可计算某个字符串，并执行其中的的 JavaScript 代码。 3 eval("var x=10; var y=20;document.write(x*y)"); 4 document.write(eval("2+2")); 5 var x=10; 6 document.write(eval(x+17)); 7 script>
6.Date时间对象
1 //返回当前时间 2 document.writeln(Date()) 3 4 var my_date = new Date() 5 #根据Date()对象获取时间属性 6 document.writeln(my_date.getFullYear()) 7 document.writeln(my_date.getMonth()) 8 document.writeln(my_date.getDate()) 9 document.writeln(my_date.getHours()) 10 document.writeln(my_date.getMinutes()) 11 document.writeln(my_date.getSeconds())
JavaScript序列化
JSON.stringify(object) ，序列化
JSON.parse(str)，反序列化
1 <script type="text/javascript"> 2 var info = {name:'nuanhuang',age:19,skill:['Python','Shell','MySQL','Redis']} 3 //序列化 4 var infoStr = JSON.stringify(info) 5 console.log(infoStr) 6 //序列化为字符串 7 console.log(typeof(infoStr)) 8 9 //反序列化 10 var info = JSON.parse(infoStr) 11 console.log(info) 12 console.log(typeof(info)) 13 script>