JS复习
JavaScript
一. 概念：
是一门运行在客户端浏览器的脚本语言，可以被现在的任何浏览器所解析，因为它们都自带JavaScript解析引擎。
脚本语言：不需要编译，可以直接被解析运行的。
功能：可以控制html元素，增强用户和页面的交互，让页面产生动态效果在，增强用户体验。
- JavaScript发展史（了解）：
- 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C-- ，后来更名为：ScriptEase
- 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
- 1996年，微软抄袭JavaScript开发出JScript语言
- 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。
- JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
二. ECMAScript：客户端脚本语言的标准
1. 基本语法：
-
与html的结合：
2. 内部JS： * 定义<script>，标签体内容就是js代码 3. 外部JS： * 定义<script>，通过src属性引入外部的js文件 * 注意： 1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。 2. <script>可以定义多个。 -
注释
5. 单行注释：//注释内容 6. 多行注释：/*注释内容*/ -
数据类型
-
原始数据类型(5种基本数据类型)：面试问题
- number：数字，可以是整数，小数，和NaN（not a number 不是一个数字的数字类型）
- string:字符/字符串 ‘a’ “avs” “s”
- boolean:true or false
- null:一个对象为空 的占位符
- undefined:未定义，如果没有给一个变量初始化，则默认会给这个变量undefined类型
<script> //number var num1 = 1.0; var num2 = 4; var num3 = NaN; document.write(num1+":"+typeof(num1)+"<br>");//1.0 document.write(num2+ ":"+typeof(num2)+"<br>");//4 document.write(num3+":"+typeof(num3)+"<br>");//NaN //string var str1 = "a"; var str3 = "abc"; var str2 = 'd'; document.write(str1+":"+typeof(str1)+"<br>");//a document.write(str2+":"+typeof(str2)+ "<br>");//abc document.write(str3+":"+typeof(str3)+"<br>");//d //boolean var flag = true; document.write(flag+":"+typeof(flag)+"<br>");//true //null var nill = null; document.write(nill+":"+typeof(nill)+"<br>");//null //null var uf; document.write(uf+":"+typeof(uf)+"<br>"); //undefined </script>null
在 JavaScript 中，null 是 “nothing”。它被看做不存在的事物。不幸的是，在 JavaScript 中，null 的数据类型是对象。 您可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。 您可以通过设置值为 null 清空对象：问题：Undefined 与 null 的区别
Undefined 与 null 的值相等，但类型不相等：typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true -
引用数据类型：对象
-
-
变量
* 变量：<mark>一小块存储数据的内存空间</mark>-
Java语言是强类型语言，而JavaScript是弱类型语言。
- 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
- 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
-
语法：
- var 变量名 = 初始化值;
-
typeof运算符：获取变量的类型。
- 注：null运算后得到的是object
-
-
运算符
- 一元运算符
<script> /** * 自增和自减 * @type {number} */ var x = 3; var y = 5; var b = x--; //x先赋值给b,然后x再减一 var c = ++y; //y先加一赋值给c,然后y再加一 document.write(x +"----------"+y); //2--------6 document.write("<hr>"); /** * 其他数据类型转number */ //字面值是number的string直接转成number var str = +"123"; //+number的运算符 document.write("str==>" + typeof (str)+"："+str+"<br>"); //str==>number：123 //字面值是string直接转成NaN(不是number的数字类型) var str2 = +"ab123"; document.write("str2==>" + typeof (str2)+"："+str2); //str==>number：123 //布尔类型转number 1:true 0:false var flag = +true; var unflag = +false; document.write("flag==>" + typeof (flag)+"："+flag+"<br>"); //flag==>boolean：1 document.write("unflag==>" + typeof (unflag)+"："+unflag+"<br>"); //flag==>boolean：0 document.write("<hr>"); </script>- 算术运算符
+ - * / % ...- 赋值运算符
= += -+....- 比较运算符
比较运算符： > < >= <= == ===(全等于) document.write(4 > 3); document.write(+"123" >= 120);//true document.write(+"123" === 123);//true document.write(+"123" === "123");//true document.write(+"123" >= 125); //false document.write(+"123a" >= 125); //false- 逻辑运算符
/** * 逻辑运算符 && || !： && (短路：左边如果能判断出结果，就不会运行右边的) ||(短路：左边如果能判断出结果，就不会运行右边的) !： * 其他类型转boolean： 1. number：0或NaN为假，其他为真 2. string：除了空字符串("")，其他都是true 3. null&undefined:都是false 4. 对象：所有对象都为true */ //1. number ---> boolean var num1 = 0; var num2 = NaN; var num3 = 3; document.write(!num1 +"<br>"); //true document.write(!num2 +"<br>"); //true document.write(!num3 +"<br>"); //false //2. string--->boolean var s = ""; var s2 = "123"; document.write(!s +"<br>"); //true document.write(!s2 +"<br>"); //false //3. null&undefined:都是false --->boolean var n = null; var n2; document.write(!n +"<br>"); //true document.write(!n2 +"<br>"); //true //4. 对象：所有对象都为true--->boolean var obj = ""; var data = new Date(); document.write(!n +"<br>"); //true document.write(!data +"<br>"); //false document.write("<hr>");- 三目运算符：条件运算符
/** * 三元运算符 ? : 表达式 */ var t = 3, k =4; document.write( t >= k ? false : true); //true -
流程控制语句
1. if...else... 2. switch: * 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7) * switch(变量): case 值: * 在JS中,switch语句可以接受任意的原始数据类型 3. while 4. do...while 5. for -
Js特殊语法
1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议) 2. 变量的定义使用var关键字，也可以不使用 * 用： 定义的变量是局部变量 * 不用：定义的变量是全局变量(不建议)
2. 基本对象
-
function
- 方法的定义：形参的类型可以不用写，函数的返回值也可以不用写
- 方法本身是一个对象，如果方法名重复会进行覆盖
- 如果实参传入函数后，会被一个js的内置对象arguments（数组）接收
- js函数调用只与函数名有关，和函数参数无关
<script> //方法定义1 function fun1(a,b) { return a+b; } var rst1 = fun1(1,2); //alert(rst1); 3 //方法定义1 var fun2 = function(c,d) { return c+d; } var rst2 = fun2(3,4) //alert(rst2); 7 //alert(fun2(3,4,5)); //7 其中一个参数被内置对象arguments接收 /** * 传参 */ //alert(fun1(1,2,3)); function fun1(a,b,c) { return a + b + c; } //alert(fun1(4,5,2)); //11 ：同名函数会覆盖 //alert(fun1(1,23)); 1+23+NaN = NaN /** * 求任意几位数的和 */ function randonadd() { var sum = 0 for(var i = 0; i < arguments.length; i++){ sum += arguments[i]; } return sum; } alert(randonadd(1,2,3,4,5,6)); //21 </script> -
Array对象
<script> /** * Array对象 * 1.创建 * var arr1 = new array(数组列表); * var arr2 = new array(默认数组长度); * var arr3 = [数组列表]; * 2.方法 * join:分割符 * push :向数组尾部添加数据 * 3.属性 * length:数组的长度 * 4.特点: * 1.jS中数组的类型是可变的 * 2.数组长度是可变的(自动增长) */ //1.创建 var arr1 = new Array(1,2,3); var arr2 = new Array(5); var arr3 = [4,5,6]; document.write(arr1 + "<br>") //1,2,3 document.write(arr2 + "<br>")//,,,, document.write(arr3 + "<br>")//4,5,6 //4.jS中数组的类型是可变的 var arr4 = [1,4,"haha",4.0,true]; document.write(arr4 +"<br>") //1,4,"haha",4.0,true document.write(arr4[10] +"<br>") //undefined arr4[10] = "haha"; document.write(arr4 +"<br>") //1,4,haha,4,true,,,,,,haha //2.方法 join ，push document.write(arr4.join("*")+"<br>");//以*分割：1*4*haha*4*true******haha document.write(arr4.join()+"<br>");//默认以，分割：1,4,haha,4,true,,,,,,haha arr4.push(4444); document.write(arr4.join()+"<br>");//默认以，分割：1,4,haha,4,true,,,,,,haha,4444 //3.属性 document.write(arr4.length+"<br>"); //12 </script> -
Date对象
<script> /** * Date对象 * 1.创建 * var date = new Date(); * 2.方法 * 3.属性 * 1.getLocalString:获取本地系统的时间格式 * 2.getTime():获取1970-1-1年至今的毫秒值 * 4.特点:与Java的Date很类似 */ var date = new Date(); document.write(date+"<br>"); var time = date.toLocaleDateString(); //2020/3/30 document.write(time); document.write(date.toLocaleTimeString()); //2020/3/30下午8:20:01 document.write(date.getTime()); </script> -
Math
<script> /** * Math对象 * 1.创建(直接使用Math.方法名()) * 2.方法 * * 3.属性：PI * 4.特点:与Java的Date很类似 */ document.write(Math.PI+"<br>"); //获取PI的值 //获取[0,9)之家的随机数 document.write(Math.random()+"<br>"); //需求：获取1-100之间的随机数[1，100) var number = (Math.random() * 100 ); var floor = Math.floor(number); //向上取整，向下取整Math.cell() document.write(floor); </script> -
Number
-
String
查看w3cshool的官方文档 -
RegExp
<script> /** * RegExp对象 * 正则表达式对象：定义字符串的组成规则 * 1.单个字符 * [a] [ab] [a-zA-Z0-9] * a a或b a-z或A-Z或0-9 * 特殊符号代表特殊字符的单个字符： * 1.\w：表示单个单词字符[a-zA-Z0-9] * 2.\d：表示单个数字[0-9] * 2.量词符号 * ?:一次或多次 * *：0次或多次 * +：至少出现一次 * {m,n}：出现>=m次，<=n次 * {m,}：至少出现m次 * {,n}：至多出现n次 * 3.开始结束符号 * ^:开始符号 * $:结束符号 * 3.创建正则对象 * var reg = new RegExp("正则表达式") * var reg = /正则表达式/；（常用） * * 方法：test(测试) * */ /** * 需求1：字符至少出现6-12次 * */ var reg = /^\w{6,12}$/; //以字母开头，以字母结尾。出现6-12次 var username = "zhangsan"; var flag = reg.test(username); //true alert(flag); username = "zhangsan32423"; flag = reg.test(username); //false alert(flag); </script> -
Global
<script> /** * Global对象 * 1.特点：全局对象，封装的方法不需要对象就可以直接调用 * 2.方法： * encodeURI():uri编码 * decodeURI():uri解码 * * encodeURIComponent():uri编码:字符更多 * decodeURIComponent():uri解码 * * parseInt():将字符串转为数字 * 逐一匹配，如果遇到非数字即停止，截取前面的数字转为number * * isNaN():判断一个类型是否是NaN * 有这个方法是因为，如果一个对象是NaN，他是无法通过if(obj == NaN)来判断的 * 任何对象和NaN比较结果都是false * eval():将js字符串转换为js脚本执行 * * * 3. URL编码 传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2 * * * */ //encodeURI():uri编码 var decode = decodeURI("%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2"); //传智播客 document.write(decode +"<br>"); //decodeURI():uri解码 var encode = encodeURI(decode); document.write(encode +"<br>"); //%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2 //decodeURIComponent():uri解码 var decode1 = decodeURIComponent("http://localhost?wd=%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2"); http://localhost?wd=传智播客 document.write(decode1 +"<br>"); //encodeURIComponent():uri编码:字符更多 var encode1 = encodeURIComponent(decode1); document.write(encode1 +"<br>"); // http://localhost?wd=%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2 //parseInt():将字符串转为数字 var num = "asd123"; //alert(parseInt(num)+1); //NaN num = "123asd"; //alert(parseInt(num)+1); //124 //isNaN() var isN = NaN; //alert(isN == NaN); //alert(isNaN(isN)); //eval() var dd = "alert(123)"; //alert(dd); //alert(123) eval(dd); //123 </script>
三. Dom
-
绑定Dom事件的一个小案例（灯泡开关）
<body> <img id="light" src="img/off.gif"> <!--//绑定事件方式1: 添加属性：onclick="on()"--> <script> var light = document.getElementById("light"); var flag = false; light.onclick =function on() { //绑定事件方式2 if(flag){ light.src="img/off.gif"; flag = false; }else{ light.src="img/on.gif"; flag = true; } } //light.onclick =on; //绑定事件方式3 </script> </body>
四. Bom
-
概念：浏览器对象模型，将浏览器的各个对象封装成对象
-
组成：
Window：窗口对象
Location：地址栏对象
History：浏览器i历史记录（不可见），后退返回键会调用
Screen：屏幕对象
Navigator：浏览器对象 -
详解对象
- window
<script> /**windows窗口对象 * 1.创建 * 2.方法 * 1.与弹出框有关的方法 * window.alert("xxx"); //alert() * window.confirm("你开心吗？") //点击确定返回true,否则返回false * window.prompt("你输入了啊")//返回用户输入内容 * * 2.与打开关闭有关的方法： * window.close(); //谁调用我我就执行谁;关闭窗口 * window.open("http://www.baidu.com")//打开新的标签页然后打开IP地址 * * 3.与定时器有关的方法 * 一次性定时器： * setTimeout() 执行毫秒数后调用函数 * 1.参数1：js代码或方法对象 * 2.参数2：毫秒值 * clearTimeout:取消setTimeout的定时器效果，用到setTimeout的返回值来标志这个定时器 * * 循环定时器 * setInterval()按照周期，以毫秒值来执行函数，也会返回一个唯一标志定时器的id * clearInterval:取消setInterval的定时器效果，用到setInterval的返回值来标志这个定时器 * * 3.属性 1. 获取其他BOM对象： history location Navigator Screen: 2. 获取DOM对象 document 4. 特点 * Window对象不需要创建可以直接使用 window使用。 window.方法名(); * window引用可以省略。 方法名(); * */ //1.与弹出框有关的方法 //window.alert("哈哈哈哈"); //window.confirm("你开心吗？"); //document.write(window.confirm("你开心吗？")); //document.write(window.prompt("你输入了啊")); //2.与打开关闭有关的方法： //window.close(); //打开 //window.open("http://www.baidu.com"); //3.与定时器有关的方式 function time() { alert("123"); } // var timeout = window.setTimeout(time(),4000); // clearTimeout(timeout); var interval = window.setInterval(time,2000); clearInterval(interval); //取消 </script>小案例：轮播图
<body> <div> <img id="img" src="img/banner_1.jpg" alt=""> </div> <script> var num = 1; function change() { if(num == 4){ num = 1; } var iamge = document.getElementById("img"); iamge.src="img/banner_"+num+".jpg" num ++; } var interval = setInterval(change,3000); </script> </body>- Location对象
<body> <input type="button" value="刷新界面" onclick="reflash()"> <input type="button" value="去百度" onclick="baidu()"> <script> //location.reload(); 刷新界面 function reflash() { location.reload(); } //location.href; 链接到其它网址 function baidu() { location.href="http://www.baidu.com"; } </script> </body>定时器自动跳转小案例
<body> <p> <span id="second">5</span>秒后自动跳转... </p> <script> var time = 5; function div() { var s = document.getElementById("second"); s.innerHTML = --time; if(time == 0){ location.href="http://www.baidu.com"; } } function href() { setInterval(div,1000); } href(); </script>- History对象
<body> <input type="button" value="前进" onclick="forward()"> <a href="5.%20页面自动跳转.html" onclick="back()">页面自动跳转</a> <input type="button" value="后退"> <script> document.write(history.length); //表示从当前页面开始的访问历史记录 //相当于浏览器的 ——> 按钮 function forward() { history.forward(); } //相当于浏览器的 <—— 按钮 function back() { history.back(); } </script>
美团公司氛围 2107人发布