[TOC] ## 用例源码 [点击下载](http://pan.baidu.com/s/1bp1eGxD) # JS 实现 script标签 ~~~ <script> alert("My First JavaScript"); </script> ~~~ # JS 输出 ~~~ document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph</p>"); ~~~ # JS 语句 ~~~ var name="Hello"; var name = "Hello"; ~~~ # JS 注释 ~~~ /* 多行注释 */ //单行注释 ~~~ # JS 变量 ~~~ var pi=3.14; var name="Bill Gates"; var answer='Yes I am!' var carname; carname="Volvo"; ~~~ 变量必须以字母开头 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做) 变量名称对大小写敏感(y 和 Y 是不同的变量) > 提示:JavaScript 语句和 JavaScript 变量都对大小写敏感 # JS 数据类型 字符串、数字、布尔、数组、对象、Null、Undefined javaScript 拥有动态类型。这意味着相同的变量可用作不同的类型: 实例 ~~~ var x // x 为 undefined var x = 6; // x 为数字 var x = "Bill"; // x 为字符串 ~~~ # 字符串 字符串可以是引号中的任意文本。可以使用单引号或双引号: ~~~ var carname="Bill Gates"; var carname='Bill Gates'; ~~~ 可以在字符串中使用引号,只要不匹配包围字符串的引号即可: ~~~ var answer="Nice to meet you!"; var answer="He is called 'Bill'"; var answer='He is called "Bill"'; ~~~ # 数字类型 JavaScript 只有一种数字类型。数字可以带小数点,也可以不带: ~~~ var x1=34.00; //使用小数点来写 var x2=34; //不使用小数点来写 ~~~ 极大或极小的数字可以通过科学(指数)计数法来书写: ~~~ var y=123e5; // 12300000 var z=123e-5; // 0.00123 ~~~ # 布尔 布尔(逻辑)只能有两个值:true 或 false。 ~~~ var x=true var y=false ~~~ # 数组 ~~~ var cars=new Array(); cars[0]="Audi"; cars[1]="BMW"; cars[2]="Volvo"; 或者 (condensed array): var cars=new Array("Audi","BMW","Volvo"); 或者 (literal array): 实例 var cars=["Audi","BMW","Volvo"]; ~~~ 数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推 # 对象 对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔: ~~~ var person={firstname:"Bill", lastname:"Gates", id:5566}; ~~~ 对象 (person) 有三个属性:firstname、lastname 以及 id。 空格和折行无关紧要。声明可横跨多行: ~~~ var person={ firstname : "Bill", lastname : "Gates", id : 5566 }; ~~~ 对象属性有两种寻址方式: ~~~ name=person.lastname; name=person["lastname"]; ~~~ Undefined 和 Null Undefined 这个值表示变量不含有值。 可以通过将变量的值设置为 null 来清空变量。 ~~~ cars=null; person=null; ~~~ 当声明新变量时,可以使用关键词 "new" 来声明其类型: ~~~ var carname=new String; var x= new Number; var y= new Boolean; var cars= new Array; var person= new Object; ~~~ JavaScript 变量均为对象。当声明一个变量时,就创建了一个新的对象。 # JS 函数 函数就是包裹在花括号中的代码块,前面使用了关键词 function: ~~~ function functionname() { //这里是要执行的代码 } ~~~ 可以发送任意多的参数,由逗号 (,) 分隔: ~~~ myFunction(argument1,argument2) ~~~ 用于字符串的 `+ `运算符 `+` 运算符用于把文本值或字符串变量加起来(连接起来)。 `str="abc"+"cbd" str="abccbd"` # JS 比较 运算符 == 等于 `x==8 为 false` === 全等(值和类型) ~~~ x===5 为 true; x==="5" 为 false != 不等于 x!=8 为 true > 大于 x>8 为 false < 小于 x<8 为 true >= 大于或等于 x>=8 为 false <= 小于或等于 x<=8 为 true ~~~ 可以在条件语句中使用比较运算符对值进行比较,然后根据结果来采取行动: ~~~ if (age<18) { document.write("Too young"); } ~~~ 逻辑运算符用于测定变量或值之间的逻辑。 给定 x=6 以及 y=3,下表解释了逻辑运算符: 运算符 ~~~ && and (x < 10 && y > 1) 为 true || or (x==5 || y==5) 为 false ! not !(x==y) 为 true ~~~ # If...Else if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码 ~~~ if(true){ // do } ~~~ if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码 ~~~ if(true){ // do }else{ // do } ~~~ if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行 switch 语句 - 使用该语句来选择多个代码块之一来执行 # JS Switch 请使用 switch 语句来选择要执行的多个代码块之一。 语法 ~~~ switch(n) { case 1: //执行代码块 1 break; case 2: //执行代码块 2 break; default: //n 与 case 1 和 case 2 不同时执行的代码 } ~~~ # JS For ~~~ for (语句 1; 语句 2; 语句 3) { //被执行的代码块 } ~~~ JavaScript 支持不同类型的循环: for - 循环代码块一定的次数 for/in - 循环遍历对象的属性 while - 当指定的条件为 true 时循环指定的代码块 do/while - 同样当指定的条件为 true 时循环指定的代码块 # JS While while 循环 While 循环会在指定条件为真时循环执行代码块。 语法 ~~~ while (条件) { //需要执行的代码 } ~~~ do/while 循环 do/while 循环是 while 循环的变体。该循环会执行一次代码块,在检查条件是否为真之前,然后如果条件为真的话,就会重复这个循环。 语法 ~~~ do { //需要执行的代码 } while (条件); ~~~ JS Break break 语句可用于跳出循环。 break 语句跳出循环后,会继续执行该循环之后的代码(如果有的话): Continue 语句 continue 语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。 # JS 错误 try 语句允许我们定义在执行时进行错误测试的代码块。 catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。 JavaScript 语句 try 和 catch 是成对出现的。 ~~~ try { //在这里运行代码 } catch(err) { //在这里处理错误 } ~~~ # JS 验证 用户是否已填写表单中的必填项目? 用户是否在数据域 (numeric field) 中输入了文本? # 常用对象 JavaScript 中的所有事物都是对象:字符串、数值、数组、函数... 此外,JavaScript 允许自定义对象。 ## JS 数字 数字属性和方法 属性: > MAX VALUE > MIN VALUE > NaN 方法: > toString() ## JS 字符串 计算字符串的长度 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。 match() 来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。 replace() 方法在字符串中用某些字符替换另一些字符。 ## JS 日期 ~~~ Date() 返回当日的日期和时间。 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 getMonth() 从 Date 对象返回月份 (0 ~ 11)。 getFullYear() 从 Date 对象以四位数字返回年份。 getYear() 请使用 getFullYear() 方法代替。 getHours() 返回 Date 对象的小时 (0 ~ 23)。 getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。 getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。 getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。 getTime() 返回 1970 年 1 月 1 日至今的毫秒数。 ~~~ 月的特殊性 ## JS 数组 创建数组 for...in 声明来循环输出数组中的元素。 concat() 方法来合并两个数组。 join() 方法将数组的所有元素组成一个字符串。 sort() 方法从字面上对数组进行排序。 ~~~ <script type="text/javascript"> var arr = new Array(6) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" arr[3] = "James" arr[4] = "Adrew" arr[5] = "Martin" document.write(arr + "<br />") document.write(arr.sort()) </script> ~~~ sort() 方法从数值上对数组进行排序。 ~~~ <script type="text/javascript"> function sortNumber(a, b) { return a - b } var arr = new Array(6) arr[0] = "10" arr[1] = "5" arr[2] = "40" arr[3] = "25" arr[4] = "1000" arr[5] = "1" document.write(arr + "<br />") document.write(arr.sort(sortNumber)) </script> ~~~ ## Window 有浏览器都支持 window 对象。它表示浏览器窗口。 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。 全局函数是 window 对象的方法。 甚至 HTML DOM 的 document 也是 window 对象的属性之一: 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari: window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explorer 8、7、6、5: ~~~ document.documentElement.clientHeight document.documentElement.clientWidth ~~~ 或者 ~~~ document.body.clientHeight document.body.clientWidth ~~~ 实用的 JavaScript 方案(涵盖所有浏览器): 实例 ~~~ var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; window.open() - 打开新窗口 window.close() - 关闭当前窗口 window.moveTo() - 移动当前窗口 window.resizeTo() - 调整当前窗口的尺寸 ~~~ ## JS Location 一些例子: ~~~ location.hostname 返回 web 主机的域名 location.pathname 返回当前页面的路径和文件名 location.port 返回 web 主机的端口 location.href 属性返回当前页面的 URL。 ~~~ JS History `history.go(-1)` # JS 正则表达式 学习的工具 notepad + + ## 量词 ~~~ 量词 描述 n+ 匹配任何包含至少一个 n 的字符串。 n* 匹配任何包含零个或多个 n 的字符串。 n? 匹配任何包含零个或一个 n 的字符串。 n{X} 匹配包含 X 个 n 的序列的字符串。 n{X,Y} 匹配包含 X 或 Y 个 n 的序列的字符串。 n{X,} 匹配包含至少 X 个 n 的序列的字符串。 n$ 匹配任何结尾为 n 的字符串。 ^n 匹配任何开头为 n 的字符串。 ?=n 匹配任何其后紧接指定字符串 n 的字符串。 ?!n 匹配任何其后没有紧接指定字符串 n 的字符串。 ~~~ ## 方括号 ~~~ 方括号用于查找某个范围内的字符: 表达式 描述 [abc] 查找方括号之间的任何字符。 [^abc] 查找任何不在方括号之间的字符。 [0-9] 查找任何从 0 至 9 的数字。 [a-z] 查找任何从小写 a 到小写 z 的字符。 [A-Z] 查找任何从大写 A 到大写 Z 的字符。 [A-z] 查找任何从大写 A 到小写 z 的字符。 [adgk] 查找给定集合内的任何字符。 [^adgk] 查找给定集合外的任何字符。 (red|blue|green) 查找任何指定的选项。 ~~~ ## 元字符 ~~~ 元字符(Metacharacter)是拥有特殊含义的字符: 元字符 描述 . 查找单个字符,除了换行和行结束符。 \w 查找单词字符。 \W 查找非单词字符。 \d 查找数字。 \D 查找非数字字符。 \s 查找空白字符。 \S 查找非空白字符。 \b 匹配单词边界。 \B 匹配非单词边界。 \0 查找 NUL 字符。 \n 查找换行符。 \f 查找换页符。 \r 查找回车符。 \t 查找制表符。 \v 查找垂直制表符。 \xxx 查找以八进制数 xxx 规定的字符。 \xdd 查找以十六进制数 dd 规定的字符。 \uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。 ~~~ ## 示例 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>es6</title> <script type="text/javascript"> // RegExp var re = new RegExp('cat'); var re1 = /cat/; var data = '123123123'; var re2 = /123/gi; // g 继续, i 不区分大小写; //检测是否存在 var data4 = "123123,213,12312,312,3,Cat,cat,dsfsdfs,"; var reCat4 = /cat/gi; console.log(reCat4.exec(data4)); //Cat //String console.log(re2.test(data)); var data3 = "123123,cat,213,12312,312,3,Cat,cat,dsfsdfs,"; var re3 = /cats/gi; var rs3 = data3.match(re3); console.log(rs3) var data5 = "123123,213,12312,312,3,Cat,cat,dsfsdfs,"; var reCat5 = /cat/g; console.log(data5.search(reCat5)); //23 var data6 = "123123,213,12312,312,3,Cat,cat,dsfsdfs,"; var reCat6 = /cat/gi; console.log(data6.replace(reCat6, "libinqq")); var data7 = "123123,213,12312,312,3,Cat,cat,dsfsdfs,"; var reCat7 = /,/; console.log(data7.split(reCat7)); var data8 = '`[会计从业资格管理]``[会计专业技术职务资格管理]``[追究违法会计人员的刑事责任]``[会计人员继续教育管理]`'; var reg8 = /[^\`\[]{1,}(?=\]\`)/g; console.log(data8.match(reg8)) console.log(''.substr(0, 50)) </script> </head> <body> <div id="msg"> </div> </body> </html> ~~~ # 示例 ~~~ <!DOCTYPE html> <html> <head> <title></title> <script> //js hello //console.log('hello world 1'); //alert("hello world 2"); //var i = 10; //console.log(typeof i); //i = '1'; //console.log(typeof i); //i = "我2345"; //console.log(i.charAt(0)); //i = 3.14159265; //console.log(typeof i); /* 注释 */ //document.write('hello'); //window.onload = function () { // document.write('hello'); //}; //var str = "100"; //var num = Number(str); // time number string //undefined //null //NaN not a number if (NaN) { console.log('true'); } else { console.log('flase'); } //for (var i = 0; i < 100; i++) { // // console.log('flase'); //} //window.document //document //console.log(window.i); //while (i<150){ // console.log(i); // i++; //} //do { // console.log(i); // i++; //} while (i<150); //console.log("end"); // Array(/*1 ,2 length 3 args*/) //var arrT = []; //console.log(arrT); //arrT.push('曾'); //arrT[7] = '祥'; //console.log(arrT[5]); //for (var item in arrT) { // console.log(arrT[item]); //} try { document.getElementByI('sb'); //尝试 } catch (e) { //捕获 console.log(e, '333'); } var t = 1 / 0 console.log(t); (function func_demo() { for (var i = 0; i < 10; i++) { console.log('flase'); } })(window); //console.log(i); var func_1 = function () { console.log('s'); } func_1(); var obj = {}; obj.name = '_name'; obj.sex = '男'; obj.age = 100; obj.sayHello = function () { console.log('p:hello'); } obj.sayHello(); for (var item in obj) { console.log(typeof item); // console.log(obj[item]) } var sex = 'sex'; console.log(obj[sex]); // key - value; var objs = []; objs.push(obj); console.log(objs); //dom //document.getElementById('') window.onload = function () { console.log(document.getElementsByTagName('div')); } </script> </head> <body> <div>hahaah</div> </body> </html> ~~~