一、JavaScript介绍
作用：如果把HTML比做一个人，那么CSS就是衣服，那JS就是指人的动作和行为；
书写：JS代码可以直接写在script标签里面，或者写在其他的.js后缀文件中，并通过script标签引入。
要求：1. 一般把script标签写在head或者body里；2. 要注意的是是否需要加上window.onload；3. 如果没有特殊要求，一般script标签放在body结束之前。
1. 在body之前书写；2. 在head中书写；3. 在js文件中书写。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS的使用方式</title> <!-- 2. 写在head标签里面,需要以window.onload引入--> <script> /*加载完当前页面的HTML元素后再加载这个方法里面的代码*/ window.onload = function () { alert(456) console.log(456) console.log(456); } </script> </head> <body> <!-- 1. 写在body标签里面 ！！！推荐使用！！！--> <script> alert(123) console.log(123) </script> <!-- 3. 写在外部js文件里面，用script标签引入--> <script src="js/demo_js.js"></script> </body> </html>
二、JS获取元素
意义：在js中想要操作元素，或者说执行一些行为，首先需要获取到对应的元素。才能进行下一步的操作，所以要首先学会如何获取元素。
JS获取独有标签：
document.title 获取标题
document.head 获取头部信息
document.body 获取body内容
其他标签的获取：
1. 通过id获取元素：document.getElementById("idname");
2. 通过class获取元素：document.getElemnetByClassName("classname");
3. 通过标签名获取元素：document.getElementByTagName("tagname");
4. 表单中的name：document.getElementsByName("name");
5. selector选择器（不兼容IE7及以下）：
①. document.querySelector(" "); 通过CSS选择器获取一个
②. documnet.querySelectorAll(" "); 通过CSS选择器获取所有
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p id="p1">山有木兮木有枝，心悦君兮君不知</p> <p class="p2">人生若只如初见，何事秋风悲画扇</p> <p>只愿君心似我心，定不负相思意。</p> <p class="p2">入我相思门，知我相思苦。</p> <p>玲珑骰子安红豆，入骨相思知不知。</p> <p class="p2">愿得一心人，白头不相离。</p> <p>玲珑骰子安红豆，入骨相思知不知。</p> <label for="username">用户名</label> <input type="text" name="username" id="username" placeholder="请输入用户名" value="lili"> 性别：<input type="radio" name="sex" value="1">男 <input type="radio" name="sex" value="0">女 <input type="radio" name="sex" value="-1">保密 <ul> <li id="li1">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> /*通过id获取元素，只有id不需要加下标*/ var p_id = document.getElementById("p1") /*通过var定义一个变量接受获取到的元素*/ console.log(p_id) p_id.innerText='十年生死两茫茫，不思量，自难忘' /*通过class获取元素*/ var p_class=document.getElementsByClassName("p2")[2] console.log(p_class) //通过标签名获取元素 var p_tag=document.getElementsByTagName("p")[4] console.log(p_tag) //通过name属性获取元素 var ipt_name=document.getElementsByName('username')[0] console.log(ipt_name) //获取元素的值（ipt_name.value） var ipt_value=ipt_name.value console.log(ipt_value) /*通过css选择器获取元素（只能获取选择器的第一个元素，且只能获取第一个元素，加下标没有作用）*/ var p_123=document.querySelector('.p2') console.log(p_123) //通过CSS选择器获取所有元素 var p_234=document.querySelectorAll('.p2') console.log(p_234[0]) /*了解即可*/ var uli=document.getElementsByTagName('ul') // var li2=uli[0].getElementsByTagName('li')[0] // console.log(li2) // var li1=document.getElementById('li1') var li1=uli[0].getElementById('li1') console.log(li1) </script> </body> </html>
三、JS基础事件
含义：所谓事件，是指Javascript捕获到用户的操作，并做出正确的响应
使用：在事件函数里，有一个关键字this，代表当前事件的这个元素
鼠标事件：
1. 左键单击 onclick
2. 左键双击 ondbclick
3. 鼠标移入 onmouseover/onmouseenter
4. 鼠标移出 onmouseout/onmouseleave
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js事件</title> </head> <body> <p id="p1">山有木兮木有枝，心悦君兮君不知</p> <p class="p2">人生若只如初见，何事秋风悲画扇</p> <p>只愿君心似我心，定不负相思意。</p> </body> <script> var p_id = document.getElementById('p1') <!-- 鼠标点击事件--> p_id.onclick = function () { p_id.innerText = "玲珑骰子安红豆，入骨相思知不知" } /*鼠标双击事件*/ p_id.ondblclick = function () { /*this代表事件发生的当前元素*/ /*style. 修改单个css样式*/ /*样式中存在用-连接的。例：background-color需要用中括号或者用驼峰命名法。改-为大写backgroundColor*/ this.style.backgroundColor = "blue" } var p_class=document.getElementsByClassName('p2')[0] /*鼠标移入事件*/ p_class.onmouseenter=function (){ this.style["color"]="red" p_class.style["font-size"]="24px" } /*鼠标移出事件*/ p_class.onmouseout=function (){ console.log(555) //修改多个css样式 分号结束 属性跟属性值直接用冒号隔开 p_class.style.cssText='color:blue;font-size:16px;' } </script> </html>
四、JS修改样式
解释：js可以修改规范和不规范的标签样式，也可以配合点击事件等一起使用
规范标签：
1. 规范标签属性：符号直接操作（可读可写）
2. 不规范（自定义）标签属性：
① 获取：.getAttribute()
② 设置：.setAttribute()
③ 移除：.removeAttribute()
注意项：
1. 所有的路径、颜色获取的结果不一定是你写的内容
2. 通过id获取的元素赋值给变量后，假设修改了id，这个变量还是表示这个元素
3. 自定义标签属性的操作方式，同样可以操作符合规范的标签属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS修改式样</title> <style> .p1{ background-color: cornflowerblue; font-size: 24px; } </style> </head> <body> <p class="p1">山有木兮木有枝，心悦君兮君不知</p> <ul> <li class="li1">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> var p_id=document.getElementsByClassName('p1')[0] /*获取属性值*/ console.log(p_id.getAttribute("class")); var uli=document.getElementsByTagName("li")[0] /*有则改 无则增*/ //设置属性 uli.setAttribute('class','p1') //移出属性 p_id.removeAttribute("class") var uli2 = document.getElementsByTagName("li")[1] uli2.setAttribute('class', 'p2') //增，增加class属性 uli2.setAttribute('class', 'p2-2') //改，修改class属性 console.log(uli2.hasAttribute('class')) //查是否有class属性 uli2.removeAttribute('class', 'p2-2') //删，删除class属性 // 增、改、删依次进行后仍然没有，即代码依次执行 var a=10 /*js的基本数据类型*/ console.log(typeof 123) console.log(typeof 12.3) console.log(typeof 'lili') console.log(typeof true) console.log(typeof [1,2,3,4]) console.log(typeof null) console.log(typeof a) </script> </body> </html>
通过变更元素属性名，调用不同属性设置，从而达到变更表示样式，或者直接变更对应属性设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width:200px; height:200px; background: cadetblue; } .box1{ width:100px; height:100px; background: red; } </style> </head> <body> <div class="box"></div> // 方式1修改 <script> var OBox = document.querySelector("div"); OBox.onclick = function (){ OBox.style.width = "100px";
// OBox.style["width"] = "100px"; //效果一样，但该种用法可接受来自form的属性信息 OBox.style.height = "100px"; OBox.style.background = "red"; }; </script> // 方式2修改 <script> var OBox = document.querySelector("div"); OBox.onclick = function (){ OBox.className = 'box1'; // OBox.setAttribute('class', 'box1'); }; </script> </body> </html>
五、JS基本数据类型
number：数字，在js里面的小数和整数统一都是数字，-2^53~2^53超出范围之后精度就会不精确
boolean：布尔值（True、False）
undefined：未定义，一个变量声明之后没有赋值就是undefined
string：字符串
null：空值，在js里面null属于对象类型，但是它不具有很多对象的共性，所以很多资料将它归为单一类的数据类型null
object：对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS数据类型</title> </head> <body> <script> // number 数字 var a =123; console.log(typeof a); // string 字符串 var b ='123'; console.log(typeof b); // boolean 布尔型 var c = true; console.log(typeof c); //undefined 未定义 var d; console.log(typeof d); // null 空 var e = null; console.log(typeof e); // object 对象 var f = [1,2,3,4] console.log(typeof f); </script> </body> </html>
六、JS操作符
1. 算数运算符：+、 -、 * 、 / 、 % 、 加减乘除求余
① 当不是数字之间的运算的时候，+号两边一旦有字符串（引号引起的部分），那么+号就不在是数学运算了，而是拼接，最终结果是字符串
② - / * % 尽量将字符串转换成数字（隐式类型转换，会自行进行强制转换）
③ NaN： Not a Number number、
2. 赋值运算符：+=、 -=、 *=、 /=、 = 、++、--、**、//
z这些是基本的赋值运算符，除此之外还有++、 --，这两个都存在隐式类型转换，会全部转成数字
3. 逻辑运算符：&&（and）、||（or）、！（not） 来表示。
&& 和|| 不会进行类型转换，！则会进行类型转换，将后面的数据线转换为布尔型在取反
4. 比较运算符：>、<、 !=、 >=、 <=、 ==、 ===
① 如果等号两边是boolean、string、number三者中任意两者进行比较时，优先转换为数字进行比较
② 如果等号两边出现了null或undefined，null和undefined除了和自己相等，就彼此相等
③ NaN==NaN 返回False，Nan和所有值包括自己都不相等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS运算符</title> </head> <body> <script> // document.write() 直接在页面上显示最终结果 // 算术运算符 document.write(1+'2'+ "<br>"); // 按数字与字符串拼接 document.write(1-'2'+ "<br>"); // 将’2‘隐式转换为数字后在相减 document.write(1+true+ "<br>"); // true为1 document.write(1+null+ "<br>"); // null为空 document.write(1+undefined+ "<br>"); // undefined为定义，无法相加 document.write(1+NaN+ "<br>"); // NaN 无法相加 // /、*、% 同 - // 赋值运算符 var a = 1; var b = null; document.write(a++ +"<br>"); // 结果为1，先执行a打印，再执行a++ document.write(a +"<br>"); // 结果为2，上一步计算完成的a值进行打印 document.write(++a +"<br>"); //结果为3，先执行++a，在执行a值打印 document.write(++b +"<br>"); //结果为1，先执行++b，在执行b值打印 // 其他同样用法 // 比较运算符 document.write((2 == '2') +"<br>"); //等于，不全等（只判断值是否相等） document.write((2 === '2') +"<br>"); //全等（先判断类型是否一致，再判断值是否相等） </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> // js运算符 // 转字符串 // var a = 19 // console.log(typeof toString(a)); // console.log(typeof String(a)); // // 字符串转 number // var b = "20" // console.log(typeof parseInt(b)); // console.log(typeof parseFloat(b)); // // // 字符串拼接 + // age = "19岁" // console.log(`北斗帅帅今年${age}`) // 反引号 // // // js运算符 减法 乘法 除 取余 隐式转换 // console.log(b + a); // 比较运算符 == === != !== // var aa = "2" // var bb = 2 // console.log(aa == bb); //== 只比较值 // console.log(aa === bb); //== 比较值 比较类型 // 赋值运算符 ++ 加一 -- // ++ 在前 先相加 后输出 // ++ 在后 先输出 后相加 // var cc = 2 // // console.log(cc++); // 先输出值2 在进行加一 // // console.log(cc + 2); //5 = 3+2 // console.log(++cc); //先相加 3 在输出值 3 // console.log(cc); // // && 与 || ! console.log(5 > 3 && 5 < 10); console.log(5 > 3 && 5 > 10); console.log(5 > 3 || 5 > 10); console.log(!(true)); </script> </body> </html>
七、JS流程控制
JS中流程控制是if判断和switch选择。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流程控制语句</title> </head> <body> <script> var weather = 'cloudy' if (weather == 'sunny') { console.log('照常上班') } else if (weather == 'cloudy') { console.log('去湖南省植物公园') } else { console.log('在家休息') } switch (weather) { case "cloudy": console.log('去湖南省植物公园'); break; case "sunny": console.log('照常上班'); break; case "rain": console.log('在家休息'); break; case "thunder": console.log("在家睡觉"); break; case "snow": console.log("出去看雪景"); break default: console.log("捉迷藏") } var a=1 //判断条件 问号 为真的结果 冒号 为假的结果 console.log(a > 4 ? 2 : 3); </script> </body> </html>
八、JS循环
1. for循环，JS中的for循环相当于while的简写，更加方便。for(initialize；test；increment){statment}
2. while循环，while是一个基本的循环语句，expression、为真的时候，就会执行循环体。while(expression){statement}
3. for in循环，JS中的for也支持类似于python中的用法，可以遍历对象所有的属性
4. do/while循环，do/while和while类似，只是会先执行一个循环。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js循环</title> </head> <body> <script> //for循环 /*多行注释快捷键 Ctrl+shift+/*/ //单行注释快捷键 Ctrl+/ for (var i=0;i<10;i++){ if(i==6){ continue; // 跳出本次循环，继续下次循环 } document.write(i + '<br>') } //while循环 var i=5 while (i<10){ i++ document.write(i + '<br>') } //for循环跟while循环都是先判断再执行 //已知循环次数用for 未知循环次数用while for (var i=0;i<3;i++){ var age=prompt("你今年多大了","请在这里输入年龄") document.write(age + '<br>') } var age=prompt("你今年多大了","请在这里输入年龄") while (age<0 || age>100){ age=prompt("你今年多大了","请在这里输入年龄") document.write(age + '<br>') } //do/while循环 var i=5 do { i++ document.write(i + '<br>') }while (i<3) //先执行再判断 不管对错 至少先执行一次 //for in循环 var arry=[1,2,3,4,5,6,7] for (var i in arry){ document.write(i,arry[i] + '<br>')//跟python不一样 得到的是下标值 不是数组里面的内容 } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> <body> <script> var OL = document.querySelectorAll("ul li"); // console.log(OL) // var没有块级作用域的概念，let具备，故按alert(i)时，var一直显示OL.lenght，let才会依次显示下标 /* for(let i=0;i<OL.length;i++){ OL[i].onclick = function (){ alert(this.innerText); alert(i); } }*/ // 另一种解决方式,提前存储下标值 for(var i=0;i<OL.length;i++){ OL[i].index_num = i // 提前存储下标值 OL[i].onclick = function (){ alert(this.index_num); } } </script> </body> </html>
九、JS字符串方法
length：长度
slice：切片
indexOf：索引
split：分割
substr：截取
replace：替换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字符串常用方法</title> </head> <body> <script> var str='qwertyuiop123451678190' document.write(str.length + '<br>')//获取字符串的长度 document.write(str[19] + '<br>')//通过下标获取值 document.write(str.substring(1,7) + '<br>')//左闭右开 下标为7的字符获取不到 document.write(str.slice(1,7) + '<br>') document.write(str.slice(-7,-1) + '<br>') document.write(str.substr(1,9) + '<br>')//第一个参数为下标，第二个参数为数值 document.write(str.split('t') + '<br>')//分割 document.write(str.indexOf('i') + '<br>')//通过字符串里面的字符获取到对应的下标值 document.write(str.replace('1',"****") + '<br>')//默认替换第一个 document.write(str.replaceAll("1","###") + '<br>')//替换所有 document.write(Object.keys(str) + '<br>')//获取所有的键 也就是下标 document.write(Object.values(str) + '<br>')//获取所有的值 var num=123 document.write(typeof toString(num) + '<br>')//数字转换成字符串 var str1='123' document.write(typeof parseInt(str1) + '<br>')//字符串转数字 </script> </body> </html>
十、数组方法
length：长度
push：追加
unshift：添加
pop/shift：删除
indexOf：查找
slice/join/sort/reverse：改
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用的数组方法</title> </head> <body> <script> var arry=["葡萄","西瓜","桃子","草莓","芒果"] console.log(arry.length) arry.push("橘子","火龙果")//在后头添加 console.log(arry) arry.unshift("香蕉","车厘子")//在前面添加 console.log(arry) arry.shift()//删除前面的 console.log(arry) arry.pop()//删除后面的 console.log(arry) console.log(arry[2])//通过下标查找内容 console.log(arry.indexOf("草莓")) // console.log(arry.slice(1,5))//切片 // console.log(arry.splice(4))//删除到数组只剩下四个内容 // console.log(arry) // console.log(arry.splice(1,2))//第一个参数为下标，第二个为删除的个数 // console.log(arry) console.log(arry.splice(1,0,"枇杷"))//不改变原有的数组的组成 插入一个值 console.log(arry) var li=[8,2,6,3,5] console.log(li.sort())//排序 console.log(li.reverse())//反向 单纯的反方向排列 console.log(li.join("**"))//拼接 </script> </body> </html>
十一、JS的内置对象
JS内置对象：JS内部已经内置了不少对象，类似于Python中的内置模块，可以直接使用，并且对象一般不需要导入，可以直接使用
Math对象：Math对象是一个处理数学相关的对象，可以用来执行在数学相关的内容
Math.pow(2, 4) 2的4次方
Math.round(5.5) 四舍五入
Math.ceil(1.5) 向上取整
Math.floor(1.5) 向下取整
Math.max() 取参数中的最大值
Math.min() 取参数中的最小值
Math.random() 0-1的随机数[0,1)
Math.random()*m+n 生成n~ （m+n）
Math.PI π
Math.abs() 求绝对值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Math对象</title> </head> <body> <script> console.log(Math.sqrt(9))//开平方 console.log(Math.pow(4,2))//幂运算 x的y次方 console.log(Math.abs(-5))//绝对值 负数的绝对值为正数 正数的绝对值为正数 console.log(Math.PI)//数学中的π console.log(Math.round(3.9))//四舍五入 console.log(Math.ceil(3.2))//向上取整 console.log(Math.floor(3.9))//向下取整 console.log(Math.random()*10)//随机数 默认生成0~1 console.log(Math.round(Math.random()*10))//0~10的随机整数 console.log(Math.random()*40+30)//30~70的随机数 生成n~m+n //0*40=0+30=30 1*40=40+30=70 console.log(Math.max(1,5,6,9,2))//最大值 console.log(Math.min(1,5,6,9,2))//最小值 </script> </body> </html>
日期对象：日期也是常用对象之一，基本和常用的方法都是需要了解和熟悉
var data = new Data();
var strap = data.getTime();
var year = data.getFullYear();
var month = data.getMonth();
var date = data.getDate();
var hour = data.getHours();
var min = data.getMinutes();
var sec = data.getSeconds();
var day = data.getDay();
document.body.innerHTML = year + "年" + month + "月" + date + "日" + hour + "时" + min + "分" + sec + "秒‘ + “星期” + day；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Date对象</title> </head> <body> <script> var time=new Date() console.log(time.getFullYear())//年 console.log(time.getMonth()+1)//月 console.log(time.getDate())//日 console.log(time.getDay())//星期 console.log(time.getHours())//时钟 console.log(time.getMinutes())//分钟 console.log(time.getSeconds())//秒钟 console.log(time.getTime())//时间戳 </script> </body> </html>
十二、JS的Window对象
Window对象：即所有客户端JS特性和API的主要接入点。它表示Web浏览器的一个窗口或者窗体，并且可以用标识符window来引用它
Window属性和方法：Window对象定义了一些属性和方法，比如：alert()方法、非常重要的document属性等
计时器：就是Window中的一个方法，可以用来实现计时的一些操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>window对象（定时器）</title> </head> <body> <span class="text">我在</span> <span id="num">5</span> <span class="text">秒之后就要去其他网页了</span> <script> //settimeout在指定的时间之后执行一次，且只执行一次 var timer1=setTimeout(function (){ console.log(666) },5000) //setInterval以指定的时间为周期，一个周期就执行一次 var timer2=setInterval(function (){ console.log(111) },1000) //清除定时器 clearTimeout(timer1) clearInterval(timer2) // var text=document.getElementsByClassName("text") var numer=document.getElementById("num") var num=5 var timer3=setInterval(function (){ num-- numer.innerText=num if (num==0){ clearInterval(timer3) // window.location.href="https://www.veer.com/"//传统方式在当前窗口进行页面跳转 window.open("https://www.veer.com/")//会新建一个窗口打开 } },1000) </script> </body> </html>
十三、JS的函数
JS函数介绍：JS的函数包裹在花括号当中，使用关键词function来定义。函数可以挂载在一个对象上，作为一个对象的属性，称为对象的方法
JS函数特性：在JS中，函数即对象，程序可以随意操控它们。比如，JS可以把函数赋值变量，或者作为参数传递给其他的函数，甚至可以设置属性，调用它们的方法
JS有名函数和匿名函数：
有名函数：有名字的函数，使用时是：函数名加上括号执行，充当时间函数执行
匿名函数：没有名字的函数，匿名函数不能单独出现，一般充当事件函数，比如点击事件调用的函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--有名函数充当事件函数写在标签里面需要加上（）--> <div onclick="func()" id="box" style="width: 200px;height: 200px;background-color: cornflowerblue"></div> <script> //有名函数 小括号前面 function后面就是函数的名字 function func(){ console.log(666) } //有名函数的调用 函数名加括号 func() //匿名函数的调用 触发事件就会调用 document.onclick=function (){ console.log(555) } var box=document.getElementById("box") box.onclick=function (){ console.log(444) } //有名函数充当事件函数的时候 不能加上（） 加上会立即执行 box.onclick=func </script> </body> </html>
函数的传参
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数的传参</title> </head> <body> <script> /*参数匹配事从左项右进行匹配，如果实参个数少于形参，后面的参数对应赋值undefined*/ function fun1(x){//形参就是声明函数时的变量 console.log(x) } fun1(2)//实参就是我们调用函数传入改函数的具体的值 function fun2(x,y){//数量没有限制可以写多个,用逗号隔开 console.log(x+y) console.log(arguments)//不定参 } fun2(5,6) fun2(1,2,3,4,5,6) var s=0 function add(){ console.log(arguments) for (var i=0;i<arguments.length;i++){ console.log(arguments[i]) s+=arguments[i] } console.log(s) } add(5,6,8,9) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>456</button> <script> //函数的返回值 默认为undefined //了解即可 /* //功能性函数是没有返回值的，所以得到结果是undefined var a=alert(1) console.log(a) var b=console.log(2) console.log(b) //返回性函数 会返回结果 var btn=document.getElementsByTagName('button')[0] console.log(btn) */ function ret(){ console.log(6) return "ok" //返回值 会直接结束这个函数，后面的代码不会执行 console.log(888) } var a=ret() console.log(a) function add(x,y){ console.log(x+y) return x+y//return 后的值将会作为函数执行结果返回，结果返回，我们可以定义变量接收 } var z=add(5,6) add(z,8) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数的作用域</title> </head> <body> <script> /* * 局部作用域：在 JavaScript 函数中声明的变量，会成为函数的局部变量。局部变量的作用域是局部的：只能在函数内部访问它们。 * 全局作用域：函数之外声明的变量，会成为全局变量。全局变量的作用域是全局的：网页的所有脚本和函数都能够访问它。 * 自动全局：如果给没有未声明的变量赋值，这个变量会自动成为全局变量。 * */ var a=10 //全局变量 function fun1(){ var a=20 //在函数里面定义的是局部变量 如果没有写var则自动成为全局变量 function fun2(){ // 子作用域只会改变父作用域的值 var a=30 } fun2() alert(a) } /*alert(a) //10 去掉var的结果10 10 fun1() //20 去掉var的结果30 20 alert(a)//10 去掉var的结果20 10*/ { var i=10//全局变量的作用域是全局的：网页的所有脚本跟函数都可以访问它 } console.log(i) { let j=20//局部变量的作用域是局部的：只能在这个函数里面或者{}里面访问它 console.log(j) } //函数的表达式 了解即可 函数的自调用 ~function (){ console.log(1); }(); //自定义函数，“~” 波浪号表示，直接在自定义函数后方加上（即可实现自调用） (function (){ console.log(2); })() (function (){ console.log(3); }()); </script> </body> </html>
十四、JS异常
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS异常</title> </head> <body> <script> // function fun(){ // // var a=10 // try{//写可能会出现错误的代码 // alert(a) // }catch (e) {//如果try里面的代码出现错误，则执行catch里面的代码 // alert("错误类型"+e.name+"错误信息"+e.message) // }finally {//不管try/catch结果如何，都会执行 // alert("执行结束") // } // } function fun() { var a = 5; try {//写可能会出现错误的代码 if (a < 10) throw "a太小了";//throw自定义异常信息 可以抛出异常 if (a > 10) throw "a太大了"; if (a == 10) throw "a刚刚好"; } catch (e) {//如果try里面的代码出现错误，则执行catch里面的代码 // alert("错误类型" + e.name + "错误信息" + e.message) alert(e) } finally {//不管try/catch结果如何，都会执行 alert("执行结束") } } fun() </script> </body> </html>
作业1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> form { margin-top: 50px; margin-left: 50px; } #div { width: 200px; background-color: lightskyblue; text-align: center; padding-top: 80px; padding-bottom: 80px; color: red; margin-left: 50px; } #div:after { display: block; clear: both; content: ""; } .sx1,.sx2,.sx3 { height: 50px; border-radius: 5px; margin-bottom: 10px; } .sx3:hover { cursor: pointer; } </style> </head> <body> <form action="#" method="post" > <label for="sx">属 性:</label> <input type="text" class="sx1" id="sx" placeholder="请输入属性"><br> <label for="sxz">属性值:</label> <input type="text" class="sx2" id="sxz" placeholder="请输入属性值"><br> <input type="button" value="设置属性" class="sx3"> </form> <div id="div">JavaScript有点意思！</div> <script> var sx1 = document.getElementsByClassName("sx1")[0] /* console.log(sx1);*/ var sx2 = document.getElementsByClassName("sx2")[0] /* console.log(sx2);*/ var sx3 = document.getElementsByClassName("sx3")[0] /* console.log(sx3);*/ var S = document.getElementById("div") /* console.log(S);*/ sx3.onclick = function (){ S.style[sx1.value] = sx2.value sx1.value = "" sx2.value = "" } </script> </body> </html>
作业2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <style> /*父级盒子*/ #box { width: 530px; height: 300px; border: 1px solid black; margin: 0 auto; position: relative; /*相对定位*/ } /*图片样式*/ .limg { width: 530px; height: 300px; } /*清除浏览器样式*/ * { margin: 0; padding: 0; } ul > li { list-style: none; /*清除小黑点*/ } .pic { position: absolute; /*绝对定位*/ } .pic li { /*隐藏所有图片*/ display: none; } .pic li.show { /*提前定义好一个show的class样式*/ display: block; } /*左右箭头的ul */ .btn > li { position: absolute; /*绝对定位*/ width: 50px; height: 50px; /*background-color: red;*/ /*top: 125px;*/ top: 50%; line-height: 50px; text-align: center; transform: translateY(-25px); font-size: 36px; color: white; } .btn .left { left: 0; } .btn .right { right: 0; } .btn > li:hover { background-color: #888888; } /*小圆点ul*/ .tab { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } /*小圆点li浮动*/ .tab li { float: left; width: 10px; height: 10px; background-color: red; border-radius: 50%; margin-left: 5px; } /*小圆点鼠标悬浮式*/ .tab li:hover { background-color: skyblue; } .tab li.on { /*小圆点*/ background-color: orange; } </style> </head> <body> <div id="box"> <!-- 图片--> <ul class="pic"> <li class="show"><img src="./img/01.jpg" class="limg"></li> <li><img src="./img/02.jpg" class="limg"></li> <li><img src="./img/03.jpg" class="limg"></li> <li><img src="./img/04.jpg" class="limg"></li> </ul> <!-- 左右箭头--> <ul class="btn"> <li class="left"><</li> <li class="right">></li> </ul> <ul class="tab"> <li class="on"></li> <li></li> <li></li> <li></li> </ul> </div> <script> // 点击小圆点 展示对应图片 // 获取元素 图片li的元素 var apic = document.querySelectorAll(".pic li") // 获取元素 小圆点li的元素 var atab = document.querySelectorAll(".tab li") // 给小圆点加点击事件 for (let i = 0; i < apic.length; i++) { // 循环4次 0-1-2-3 //最后一个值 atab[i].onmouseenter= function () { console.log(i); // 清除未点击到的图片的class 清除全部的图片 li的class for (let j = 0; j < apic.length; j++) { apic[j].removeAttribute("class") // 删除图片class atab[j].removeAttribute("class") // 删除小圆点class } // 加class apic[i].className = "show" // 加class 展示图片 atab[i].className = "on" // 加class 展示图片 } } // console.log(i) // if for {} 块级作用域 // js循环中 var 全局作用域 只拿最后一个结果 // js 循环中 let 每次执行的时候都是一个全新的块级作用域 每次重新拿结果 //ctrl alt l </script> </body> </html>
作业3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 500px; height: 300px; border: 1px solid red; margin: 100px auto; font:30px 宋体; } .box2 { color: red; } </style> </head> <body> <div> <div class="box" align="center"> <span class="box1">距离上课还有</span> <span id="num" class="box2" >10</span> <span class="box1">秒！</span><br> <span class="time"></span> </div> <script> var time=new Date() var year=time.getFullYear() var month=time.getMonth() var date=time.getDate() var hour=time.getHours() var min=time.getMinutes() var sec=time.getSeconds() var Time=document.getElementsByClassName("time")[0] Time.innerText=("北京时间："+year+"年"+month+"月"+date+"日"+hour+":"+min+":"+sec) var Text1 = document.getElementsByClassName("box1")[0] var Text2 = document.getElementsByClassName("box1")[1] var Num = document.getElementById("num") var Num1 = 10 var timer1=setInterval(function(){ Num1-- Num.innerText=Num1 var time=new Date() var year=time.getFullYear() var month=time.getMonth() var date=time.getDate() var hour=time.getHours() var min=time.getMinutes() var sec=time.getSeconds() Time.innerText=("北京时间："+year+"年"+month+"月"+date+"日"+hour+":"+min+":"+sec) if(Num1==0){ clearInterval(timer1) Text1.innerText='上课，起立！' Text1.style["color"]="red" Num.innerText='' Text2.innerText='' } },1000) </script> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .word { font-size: 36px; } .time { font-size: 36px; color: red; } .hour { font-size: 14px; color: #888888; } </style> </head> <body> <p> <span class="word"></span> <span class="time"></span> <span class="word"></span> </p> <p> <span class="word"></span> <span class="hour"></span> </p> <script> var aspan = document.getElementsByTagName("span") var ap = document.getElementsByTagName("p") // 定义初始时间 var time = 10 //通过定时器 每隔1s time 减一 // 吧time 通过 文本修改 span的内容 // 修改时间的功能函数 function cndown() { if (time > 0) { time-- //time自减一 aspan[0].innerText = "距离上课还有" // 修改html文本 aspan[1].innerText = time // 修改html文本 aspan[2].innerText = "秒！" // 修改html文本 } else { ap[0].innerText = "上课！起立！" ap[0].className = "time" clearInterval(time2) // 清除定时器 // aspan[0].innerText = "上课！起立！" // aspan[0].className = "time" // aspan[1].innerText = "" // 修改html文本 // aspan[2].innerText = "" // 修改html文本 // } } cndown() // 控制年月日的功能函数 function tdown() { var today = new Date() var year = today.getFullYear() var month = today.getMonth() + 1 var date = today.getDate() var hour = today.getHours() var min = today.getMinutes() var sec = today.getSeconds() if(sec<10){ sec = "0"+sec } aspan[3].innerText = `北京时间${year}年${month}月${date}日` aspan[4].innerText = `${hour}:${min}:${sec}` } // 通过定时器控制时间 window.setInterval(cndown, 1000) tdown() time2 = window.setInterval(tdown, 1000) </script> </body> </html>
