day42 js

day42 js   一.javascript     1.ECMAScript5基础语法         js引入方式:             外接方式:<script type="text/javascript" src="./index.js"></script>             内接方式:<script type="text/javascript"></script>             加载顺序,从上往下            var 声明变量         测试语句             console.log(变量名):控制台输出内容, 测试             alert(变量名):弹出框测试         数据类型             基本数据类型                 number                     var a = 123;                     console.log(typeof a) //typeof 变量名: 检查当前变量是什么数据类型                     var a1 = 5/0;  //特殊情况                     console.log(typeof a1) //输出:Infinity无限大, 类型:number <script>     var a = 5/0;     console.log(a);     console.log(typeof a); </script>                 string                     var str = '123';                     console.log(typeof str)                     //字符串的 *                     var a = "one";                     var b = "two";                     console.log(a*b);    输出:NaN(not a number), 类型: number                     //字符串拼接使用+ <script>     //字符串的拼接, 变量的替换     var name = 'bajie';     var age = 18;     var str = name+" is "+age+" years old.";    //正常使用js语法, 用+号拼接(行内替换: "+name+")     var str1 = `${name} is ${age} years old.`;   //使用es6的模板字符串, 整个字符串反引号``, 里面用shell的变量引用方法替换     console.log(str);     console.log(str1); </script>                 boolean                     var b1 = false;    //flase 和 true都是小写                     console.log(typeof b1)                 null                     var c1 = null; //输出null本身 类型:object                     console.log(c1)                 undefined                     var d1; //表示变量未定义                     console.log(typeof d1) <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script>                    //script可以写在body,尾部,任何地方         var a = 2;              //声明并赋值         var b;         b = 6;                  //先声明再赋值         var c = 'bajie';         console.log(a);         //测试打印         console.log(b);         console.log(c);         console.log(window.c);  //变量的落脚点, python是global, 这里是窗口window,可省略不写         console.log(typeof a);  //查看变量的类型         console.log(typeof c);         var ac = a + c;          //数值 + 字符串 = 字符串(浏览器的隐式转换)         console.log(ac);         console.log(typeof ac);         console.log(typeof (66+''));    //数字+一个空的字符串, 就能隐式转换成字符串         alert('弹出警告框');         // 每行结束为什么要加一个分号; 因为这些js文件上线的时候要压缩,以节省文件大小; 分号在其中起分隔作用         var a = prompt('今天是什么天气?'); //js 自带的弹出输入框, 基本不用这个.         console.log(a);         //直接量; 字面量; 常量都一个意思, 就是看到什么就是什么         // console.log(notdefined); //Uncaught ReferenceError: notdefined is not defined: 没定义过的变量会报错:         //js中有报错,会中止程序, 先注释掉         var e;                          //只声明没有赋值的变量:         console.log(e);                 //输出是undefined         console.log(typeof e);          //变量类型是undefined         //变量的命名规范: 和python不同的是可以使用美刀$符号来命名         //保留字: 此语言保留的,将来可能成为关键字, 不允许用做变量名, 不用记, IDE会给你提示         var a = 3;         var b = '1';         var c = a - b;         console.log(c);         console.log(typeof c);  //只要出现了减号, 无论是字符串还是数值,个数是几个,运算后的结果都是数值     </script> </head> <body> </body> </html>               引用数据类型                 Function                 Object                 Array                 Date         运算符             赋值运算符                 = 也有+= -=等             算数运算符                 有++ 和--, 用法和c语言一样             比较运算符                 有个 === !== 和is差不多 <script>     console.log(26 == '26'); //结果是true, 当比较时, 比较的是数值(如有字符串会隐式转成数值)     console.log(26 === '26'); //结果是false, 等同于, 要求内存地址相同,即数值和数据类型都相同 </script>           数据类型转换             将数值转成字符串 <script>     var a = 123;     console.log(String(a));     console.log(a.toString()) </script>               将字符串转成数值 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script>         console.log(parseInt('66.55'));         console.log(parseInt('66bajieai2018'));         console.log(parseInt(66.55));               //结果都是数值66, 1.将字符串转换数值, 2.净化作用, 只保留开头的数字 3.截取功能,只保留小数点前面的内容     </script> </head> <body> </body> </html>   <script>     console.log(Number('123.432abc'));      //输出NaN; 没有净化作用, 有字母时, 返回的结果是NaN, 类型是number     console.log(Number('123.432'));      //输出123.432; 将字符串转换成number类型, 这个没有截取     console.log(parseFloat('123.432abc55.6cdf')); //输出123.432; 和parseInt()类似, 返回浮点数(浮点数不用截取); 也有净化作用: 返回开头的浮点,其他不要 </script>                          任何数据类型都可转为boolean类型 <script>     var a1 = '123';     var a2 = -123;     var a3 = Infinity;     var a4 = NaN;     var a5 = 0;     var a6;     var a7 = null;     console.log(Boolean(a1),Boolean(a2),Boolean(a3),Boolean(a4),Boolean(a5),Boolean(a6),Boolean(a7)); //true true true false false false false </script>           流程控制             if-else <script>     var age = 10;     if(age > 18){                        //用法和c语言的一样         console.log('go to school');     }else{         console.log('go to home');     } </script>               && ||                 和python的 and 和 or的用法一样             switch <script>     var age = 20;     switch (age) {                            //用法和c语言的一样         case 18: console.log('is 18 man'); break;         case 19: console.log('is 19 man'); break;         case 20: console.log('is 20 man');         default: console.log('is other man');     } </script>               while <script>     // 循环三步走: 1,初始化循环变量 2,判断循环条件 3,更新循环变量     var a = 1;     while(a<=9){                            //用法和c语言的一样         console.log(a);         a++;     }     var a;     while(a=1,a<=9,a++){         console.log(a);     } </script> <script>     // 循环三步走: 1,初始化循环变量 2,判断循环条件 3,更新循环变量     var a = 0;     while(a<=100){              //和c不完全一样{a=0,a<=100,a+=2}这样就不支持         console.log(a);         a+=2;     } </script>             do-while                 先做一次, 再去while             for <script>     for(var i = 0; i<=100; i++) {         if (i%2==0) {             console.log(i);         }     } </script>           常用内置对象             Array                 prototype: 可以认为是数组的父类, 在父类上挂载一些方法, 在子类上可以继承使用 <script>     var arr = ['bajie','wukong','datang']; //字面量方式创建     console.log(arr);     var arr1 = [];                          //字面量方式创建     arr1[0] = 'xixi';     console.log(arr1);     //es5的js中没有class的概念, 我们创建对象使用构造函数 new     var arr = new Array();              //构造函数方式创建(这里的Array是内置的)     console.log(arr); </script>         prototype: 数组常用的方法(proto 原型)   <script>     var a1 = [1,2,3];     var a2 = ['a','b','c'];     var a3 = a1.concat(a2);     //合并两个数组为一个     console.log(a3);       var a4 = a2.join('');     //把数组中的元素用('')里的东西拼接起来     console.log(a4);       var a5 = a1.toString();     //把数组转换成字符串,每个元素之间使用逗号隔开     console.log(a5);     console.log(typeof a5);       var a6 = a2.slice(1,4);     //切片,返回一个新的数组, 猜开头不猜结尾     console.log(a6);       a2.push('d');               //追加元素: 直接加, 返回的不是新列表, 而是新列表的个数     console.log(a2);     a2.push('e','f');         //追加多个元素     console.log(a2);     a2.push(['g','h']);          //追加一个列表进去       var a7 = a1.pop();          //弹出最后一个元素,返回弹出的元素. 不能按下标弹出     console.log(a7);     console.log(a1);       var a8 = a2.reverse();      //反转数组     console.log(a2);     console.log(a8);            //返回值和源数组一样...       var a9 = [1,4,11,9,2,3,10,5,65];    //只按第一个数或字母排序;没啥用     var a10 = a9.sort();     console.log(a9);     console.log(a10);       //返回值和源数组一样...       console.log(Array.isArray(a9));  //判断是不是数组       var a11 = [1,2,3,4];     a11.shift();            //从前面弹出一个元素     console.log(a11);       a11.unshift(1);          //从前面追加一个元素     console.log(a11);       arr = ['bajie','wukong','datang'];     for(var i = 0; i < arr.length; i++){            //遍历数组         console.log(arr[i]);         document.write(arr[i]);     } </script>               String   <script>     var str = 'bajie';              //字面量声明字符串并赋值,     console.log(str.charAt(0));      //按索引下标取字符       var str = new String();           //构造方法声明字符串: 这个在控制台可以显示父类挂载的方法     console.log(str);       var str1 = 'ba12a3';     var str2 = 'jie';     console.log(str1.concat(str1,str2,str2));   //几个字符串的拼接       console.log(str1.replace('b',123456));   //字符串中元素的替换       console.log(str1.indexOf(2));    //查找char在字符串中的索引, 没有则返回 -1       console.log(str1.slice(0,1));   //切片, 猜开头,猜不到结尾       console.log(str1.split('a'));   //分隔, 和python一样返回的是数组, 如果有第二个参数,表示的是返回数组的最大长度       console.log(str1.substr(0,2));  //和slice一样也是切片       console.log(str1.toLowerCase());    //     console.log(str1.toUpperCase());    //       var str3 = 1234.5678;     console.log(str3.toFixed(2));   //四舍五入, 括号里面的是保留的小数个数       console.log('  bajie  '.trim());    //python 中的strip()   </script>               Date   <script>     var date = new Date();  //创建日期对象只有这一种方式,     console.log(date);  //Date Fri Nov 15 2019 19:42:43 GMT+0800 (中国标准时间)     console.log(date.getDate());    //1-31     console.log(date.getMonth());    //0-11     显示的时候要+1: 1-12     console.log(date.getFullYear()); //     console.log(date.getDay());       //0-6     console.log(date.getHours());      //0-23     console.log(date.getMinutes());    //0-59     console.log(date.getSeconds());    //0-59     console.log(date.toLocaleString()); //返回的是我想要的时间: 2019/11/15 下午8:36:22 </script>               Math内置对象 <script>     console.log(Math.random()); //范围: 猜到开头, 猜不到结尾.  从0~1之间的随机数     console.log(200+Math.random()*(500-200)); //生成一个  200~500 之间的随机数     console.log(Math.min(45,66));     console.log(Math.max(45,66));     console.log(Math.floor(1.234)); // 1; 向下取整     console.log(Math.ceil(1.234));  // 2; 向上取整 </script>             Function函数   <script>     add(6,9);                //调用函数: 和python不同的是, 调用时可以在任何地方(可以在定义函数之前调用)     function add(x,y) {     //声明函数         alert(x+y);     }     add(5,6);               //调用函数: </script>   <script>     function add(x) {         console.log(x);                 //形参和实参的数量不用一一对应         console.log(arguments);         //arguments是个伪数组: 所有的实参元素都会传到这个伪元素里         // arguments.push('wukong');    //伪数组不能用数组函数的功能, 但是可以使用遍历         // console.log(arguments);         console.log(arguments[1]);      //有数组的下标和长度     }     add('bajie',123) </script>       2.DOM: Document object model: 文档对象模型 <script>     document.write('<h1>八戒</h1>')  //js可以把写的标签或文本渲染到浏览器上 </script>         cocument对象 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script>         console.log(document);                  //获取的是文档对象(整个网页的文档)         console.dir(document);         console.log(document.documentElement);  //获取html部分         console.log(document.body);             //擦, body是null, 获取不到 ? 因为js不能随便写,和之前说的不一样: 不是, 是因为之前的操作确实是可以随便写         window.onload = function() {            //如何解决: 方式二,使用入口函数:窗口加载: 先是文档加载, 图片是后加载的, 最后才能执行js             console.log(document.body);         //方式二: 有个问题; 如果网络卡顿, 图片没加载完, 那么你点击图片就没有反应(也就是说js点击动作不会生效),所以请看方式三         };                                      //方式二: 有另外一个问题: 当有多个"窗口加载"时,有事件覆盖现象,即只有最后一个"窗口加载"被执行                                                 //异步: 不等待, 下面的代码不会等上面的代码执行完采取执行.(所以"窗口加载"这个函数是异步函数)         //函数对象: 就是一个匿名函数,然后赋值给一个变量         var add = function () {             alert(123321);         };         add();     </script> </head> <body>     <script>         console.log(document.body);           //如何解决: 方式一, 写到body部分的最后面, 以及之后的位置     </script> </body> </html>         事件三步走, 单击事件 <html lang="en"> <head>     <style>         .box{             width: 200px;             height: 200px;             background-color: red;         }     </style> </head> <body>     <div id="box" class="box"></div>     <script>         //需求: 默认盒子200*200 红色, 点击盒子让盒子变成绿色         //事件三步走: 1.获取事件源(获取你的标签) 2.事件(比如点击) 3.事件驱动程序         //1.获取事件源, 下面介绍的是获取DOM的三种方式         var objDiv = document.getElementById('box');         console.log(objDiv);         var objDiv2 = document.getElementsByClassName('box')[0];   //Elements 是负数, 获取出来的是伪数组, 可以加下标取某个标签如[0]         console.log(objDiv2);         var objDiv3 = document.getElementsByTagName('div');         console.log(objDiv3[0]);         //还有一种获取DOM的方式, 现在基本不用了         var objDiv4 = document.querySelector('.box');   //按类名获取标签: 多个类名时, 只能获取第一个标签         var objDiv5 = document.querySelector('#box');   //按id获取标签         //2.事件         //(onclick: 点击鼠标)         objDiv.onclick = function () {      // 函数里的代码默认不会被执行,只有(事件)点击的时候才会执行             //3.驱动程序             console.log(objDiv.style);                objDiv.style.backgroundColor = "green";  //当这句执行时, 样式被加到了行内标签里, 优先级最高         }     </script> </body> </html>           驱动程序里: 简单的流程控制 <html lang="en"> <head>     <style>         .box{             width: 200px;             height: 200px;             background-color: red;         }     </style> </head> <body>     <div id="box" class="box"></div>     <script>         //不停地点击: 在红色和绿色之间交替变换         var isRed = true;         var objDiv = document.getElementsByTagName('div')[0];         objDiv.onclick = function () {             if(isRed){                 objDiv.style.backgroundColor = 'green';                 isRed = false;             }else{                 objDiv.style.backgroundColor = 'red';                 isRed = true;             }         }     </script> </body> </html>           盒子的显示与隐藏: 方式一: 使用display实现 <!DOCTYPE html> <html lang="en"> <head>     <style>         #box{             width: 200px;             height: 200px;             background-color: red;         }     </style> </head> <body>     <button id="btn">隐藏</button>     <div id="box"></div>     <script>         var objBtn = document.getElementById('btn');         var objDiv = document.getElementById('box');         var isShow = true;         objBtn.onclick = function () {             if(isShow){                 objDiv.style.display = 'none';                 isShow = false;                 this.innerText = '显示';          //this相当于python中的self, innerText: 设置文本内容             }else{                 objDiv.style.display = 'block';                 isShow = true;                 this.innerText = '隐藏';             }         }     </script> </body> </html>            盒子的显示与隐藏: 方式一: 使用display实现: 获取事件源的简化代码 <!DOCTYPE html> <html lang="en"> <head>     <style>         #box{             width: 200px;             height: 200px;             background-color: red;         }     </style> </head> <body>     <button id="btn">隐藏</button>     <div id="box"></div>     <script>         // var objBtn = document.getElementById('btn');         // var objDiv = document.getElementById('box');         //简化代码: 获取事件源, 可以用函数封装起来, 返回事件源对象         function $(id){                                    //$是函数名, 理论上可以是任何合法的标识名, 只是习惯用$             return document.getElementById(id);         }         var isShow = true;         $('btn').onclick = function () {             if(isShow){                 $('box').style.display = 'none';                 isShow = false;                 this.innerText = '显示';             }else{                 $('box').style.display = 'block';                 isShow = true;                 this.innerText = '隐藏';             }         }     </script> </body> </html>           盒子的显示与隐藏: 方式二: 提前写好隐藏的样式, 用标签属性添加隐藏样式的类名(实际和方式一一样也是使用的display属性) <!DOCTYPE html> <html lang="en"> <head>     <style>         #box{             width: 200px;             height: 200px;             background-color: red;         }         .active{             display: none;         }     </style> </head> <body>     <button id="btn">隐藏</button>     <div id="box" class="app"></div>     <script>         function $(id){             return document.getElementById(id);         }         $('btn').onclick = function () {             console.log($('box').className);    //这里用到的是标签的属性: .className; 刚刚用到的是标签样式属性.style.             $('box').className += ' active';    //因为 = 是赋值, 会把className之前原有的属性覆盖掉, 所以用 += , ' active':注意value前面有个小技巧: 有个空格         }     </script> </body> </html>           标签属性的简单介绍 <!DOCTYPE html> <html lang="en"> <head> </head> <body>     <button id="btn">隐藏</button>     <img src="" alt="" id="myImg">     <script>         function $(id){             return document.getElementById(id);         }         $('btn').onclick = function () {             $('myImg').src = './guanggao.jpg';             $('myImg').alt = 'guanggao';         }     </script> </body> </html>              事件类型: onclick          单击鼠标时                   onm ouseover      鼠标悬停                   onm ouseout       鼠标移出                     ondblclick       鼠标双击                   onkeyup          按下并释放键盘上的一个键时触发                   onchange         文本内容或下拉菜单中的选项发生改变                   onfocus          获得焦点, 表示文本框等获得鼠标光标                   onblur           失去焦点, 表示文本框失去鼠标光标                   onl oad           网页文档加载事件                   onunload         关闭网页时                   onsubmit         表单提交事件                   onreset          重置表单时        3.BOM: browser  object model: 浏览器对象模型   二.推荐阅读     百度一下: es6 阮一峰       看网页的发展:         2004.sina.com.cn         2008.sina.com.cn         2012.sina.com.cn          前端的一个网页     百度一下: 开发者网络 (MDN Web 文档); 权威      
上一篇:使用Jenkins实现.net程序自动化编译系列--总结篇


下一篇:day42(互动bug完美解决,浏览器缓存)