标签：box console log js 字符串 var document day42
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 文档); 权威标签：box,console,log,js,字符串,var,document,day42 来源： https://www.cnblogs.com/aiaii/p/11914734.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。