JavaScript
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <!--js不管是外部引入还是内部定义，一般都是放在body标签内部的最下面，这样就不会因为js加载问题导致页面不能正常显示--> <!--引入外部js文件--> <script src="js/common.js"></script> <!--直接在script标签中定义--> <script> alert(123) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <script> name = 123; //全局变量 var a = 456; //局部变量(加var) function f1() { var i = 123; } function f2() { } alert(i); //f1函数中定义的局部变量i，外部不能调用 </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <script src="js/common.js"></script> <script> //数据类型 // JavaScript 中的数据类型分为原始类型和对象类型： // 原始类型 // 数字 // 字符串 // 布尔值 // 对象类型 // 数组 // “字典” // ... // 特别的，数字、布尔值、null、undefined、字符串是不可变。 // null、undefined // null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。 // undefined是一个特殊值，表示变量未定义。 //数字 // a = "123" // parseInt(a) //将a转换成数字，失败则返回NaN-----NaN：非数字 // // b = "asdga" // isNaN(b) //判断b是否是非数字，是则返回true // // c = Infinity //Infinity表示无穷大 // isFinite(c) //判断c是否是无穷大，如果是非数字或数字为无穷大，则返回false-----如果数字非常大，也会提示是无穷大的 //字符串 s1 = "alex"; s1.length; //s1字符串长度 s1.charAt(1); //获取s1第2个字符（从0开始计算） s2 = "sb"; s1.concat(s2); //拼接字符串s1和s2 s1.indexOf('e'); //在s1中查找e的位置（从0开始算）----从前向后找 s1.lastIndexOf('e'); //在s1中查找e的位置（从0开始算）----从后向前找 s1.substring(1,3); //获取s1中1-3(不包含3)的子序列（从0开始计算） s3 = "ALEX"; s3.toLowerCase(); //s3转换成小写 s1.toUpperCase(); //s1转换成大写 </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <script> //布尔类型 // 布尔类型仅包含真假，与Python不同的是其首字母小写。 // == 比较值相等（只比较值，跟类型没关系，相当于将类型都转换成字符串，再进行比较） // != 不等于 // === 比较值和类型相等 // !=== 不等于 // || 或 // && 且 // a = "123"; // b = 123; // a == b; //只比较值，所以返回结果时true-----相当于a和b都转换成字符串，然后进行比较 // a === b; //比较值和类型，所以返回结果时false //数组 a = [11,22,33,44,55,66]; //创建数组 a.length; //数组a的长度 a.push(4); //尾部追加元素 a.pop(); //尾部获取元素 a.unshift(9); //头部插入元素 a.shift(); //头部获取元素 //obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素 //start：起始位置, deleteCount：要删除的数据的个数, value：要添加的数据 a.splice(1,0,'aa'); //数组a下标为1的位置插入数据‘aa’ a.splice(1,1,'bb'); //数组a下标为1的位置的数据替换为‘bb’ a.splice(1,1); //删除数组a下标为1的位置的数据 a.slice(1,3) //切片，获取数组1-3的内容（不包括3） a.reverse(); //反转 a.join('_') //以‘_’为分隔符，拼接数组a a.concat('a','b','c') //批量向a中添加数据 a.sort() //排序 </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <div id="i1" style="display: inline-block;background-color: green;color: white">欢迎xxx莅临指导！</div> <script> //每隔1000毫秒(1秒)执行一次f1----setInterval：定时器 setInterval('f1()',1000) //跑马灯 function f1() { //js获取id为i1的标签 var tag = document.getElementById('i1'); //获取标签的内容 var text = tag.innerText; //取text的第一个字符 var a = text.charAt(0); //取text除第一个字符外的剩余字符串 var b = text.substring(1,text.length); //拼接b和a var new_str = b + a; //为text重新赋值为new_str tag.innerText = new_str; } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <script> //序列化 // a = {"k1":123,"k2":456}; // JSON.stringify(a); //序列化：将对象a转换成字符串 // b = '{"k1":123,"k2":456}'; // JSON.parse(b) //反序列化：将字符串b转换成对象 //转义 // decodeURI( ) URl中未转义的字符 // decodeURIComponent( ) URI组件中的未转义字符 // encodeURI( ) URI中的转义字符 // encodeURIComponent( ) 转义URI组件中的字符 // escape( ) 对字符串转义 // unescape( ) 给转义字符串解码 // URIError 由URl的编码和解码方法抛出 //URL转义 // var url = "http://www.baidu.com?n=老男孩"; //原始url // var ret = encodeURI(url); //将原始URL转义 //// alert(ret); // console.log(ret); // var u = decodeURI(ret); //将转义过的url再转回未转义的url格式 //// alert(u); // console.log(u); //eval // JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。 // eval('alert("123")') //时间处理 d = new Date(); //获取当地时间 console.log(d) //分开获取时间 d.getFullYear(); //年 d.getUTCFullYear(); //UTC时间，下面的都类似 d.getMonth(); //月 d.getDate(); //日 d.getHours(); //时 d.getMinutes(); //分 d.getSeconds(); //秒 d.getDay(); //星期 //设置时间---其他的都类似 d.setFullYear(2020); //设置年份为2020年 d.setDate(d.getDate()+2); //设置日期在当前基础上加两天 </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <script> //条件语句：if、switch //if if(条件){ }else if(条件){ }else{ } //switch switch(name){ case '1': age = 123; break; case '2': age = 456; break; default : age = 777; } //循环语句 //while while(条件){ // break; // continue; } //for..in var names = ["alex", "tony", "rain"]; for(var index in names){ console.log(index); //拿到的是索引 console.log(names[index]); } //for var names = ["alex", "tony", "rain"]; for(var i=0;i<names.length;i++){ console.log(i); console.log(names[i]); } //异常处理 try { //try中的代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行 throw new Error('error'); //主动触发异常 } catch (e) { // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。 //e是一个局部变量，用来指向Error对象或者其他抛出的对象 } finally { //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。 } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <script> // JavaScript中函数基本上可以分为一下三类： // 普通函数 function func(arg){ return true; } // 匿名函数 var func = function(arg){ return "tony"; } // 自执行函数 (function(arg){ console.log(arg); })('123') </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <script> // JavaScript中每个函数都有自己的作用域，当出现函数嵌套时，就出现了作用域链。当内层函数使用变量时，会根据作用域链从内到外一层层的循环，如果不存在，则异常。 // 切记：所有的作用域在创建函数且未执行时候就已经存在。 //JavaScript中无块级作用域 function Main(){ if(1==1){ var name = 'seven'; } console.log(name); // 输出： seven } //JavaScript采用函数作用域：在JavaScript中每个函数作为一个作用域，在外部无法访问内部作用域中的变量。 function Main(){ var innerValue = 'seven'; } Main(); console.log(innerValue); // 报错：Uncaught ReferenceError: innerValue is not defined //JavaScript的作用域链：由于JavaScript中的每个函数作为一个作用域，如果出现函数嵌套函数，则就会出现作用域链。 //作用域链：寻找顺序为根据作用域链从内到外的优先级寻找，如果内层没有就逐步向上找，直到没找到抛出异常 xo = 'alex'; function Func(){ var xo = "seven"; function inner(){ var xo = 'alvin'; console.log(xo); } inner(); } Func(); //JavaScript的作用域链执行前已创建：JavaScript的作用域在被执行之前已经创建，日后再去执行时只需要按照作用域链去寻找即可。 // xo = 'alex'; // function Func(){ // var xo = "seven"; // function inner(){ // // console.log(xo); // } // return inner; // } // // var ret = Func(); // ret(); // 输出结果： seven // xo = 'alex'; // // function Func(){ // var xo = "eirc"; // function inner(){ // // console.log(xo); // } // xo = 'seven'; // return inner; // } // // var ret = Func(); // ret(); // 输出结果： seven xo = 'alex'; function Bar(){ console.log(xo); } function Func(){ var xo = "seven"; return Bar; } var ret = Func(); ret(); // 输出结果： alex //声明提前：在JavaScript中如果不创建变量，直接去使用，则报错 // console.log(xxoo); // 报错：Uncaught ReferenceError: xxoo is not defined // var xxoo; // console.log(xxoo); // 输出：undefined function Foo(){ console.log(xo); var xo = 'seven'; } Foo(); // 输出：undefined </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <script> //闭包 // 闭包是指可以包含自由（未绑定到特定对象）变量的代码块。 // 「闭包」，是指拥有多个变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。 // 闭包是个函数，而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」 // 由于作用域链只能从内向外找，默认外部无法获取函数内部变量。闭包，在外部获取函数内部的变量。 function f2(){ var arg= [11,22]; function f3(){ return arg; } return f3; } ret = f2(); ret(); //面向对象 // Foo充当的构造函数 // this代指对象 // 创建对象时需要使用 new function Foo (name,age) { this.Name = name; this.Age = age; this.Func = function(arg){ return this.Name + arg; } } var obj = new Foo('alex', 18); var ret = obj.Func("sb"); console.log(ret); // 上述代码中每个对象中均保存了一个相同的Func函数，从而浪费内存。使用原型和可以解决该问题： function Foo (name,age) { this.Name = name; this.Age = age; } //把函数单独拿出来，所有对象共用一份函数 Foo.prototype = { GetInfo: function(){ return this.Name + this.Age }, Func : function(arg){ return this.Name + arg; } } </script> </body> </html>
