[Python自学] day-16 (JS、作用域、DOM、事件)
一、JS中的三种函数
1.普通函数
function func(){ console.log("Hello World"); }
func()
2.匿名函数
setInterval(function(){ console.log(123) },5000)
中间的function()就是匿名函数。
3.自运行函数
(function(arg){ console.log(arg) })(1)
(1)是传递给arg的参数，该函数会在导入JS时自动执行。（可以用来作为容器，包含第三方库，避免命名冲突）
二、序列化
将一个对象转化为字符串形式：
var li = [1,2,3,4,5]; JSON.stringify(li); //"[1,2,3,4,5]"
将一个字符串转换为对象：
var str = "[1,2,3,4,5]"; JSON.parse(str); //[1,2,3,4,5]
三、URL转义
当URL中出现特殊字符（包含中文、空格等），在存入cookie或写入磁盘时，需要将其转义。如下代码：
url = "https://search.jd.com/Search?keyword=手机" newurl = encodeURI(url) // "https://search.jd.com/Search?keyword=%E6%89%8B%E6%9C%BA"
反转义：
url = "https://search.jd.com/Search?keyword=%E6%89%8B%E6%9C%BA"; newurl = decodeURI(url); // "https://search.jd.com/Search?keyword=手机"
encodeURLComponent和decodeURLComponent：
url = "https://search.jd.com/Search?keyword=手机"; newurl = encodeURIComponent(url); // "https%3A%2F%2Fsearch.jd.com%2FSearch%3Fkeyword%3D%E6%89%8B%E6%9C%BA" url = "https%3A%2F%2Fsearch.jd.com%2FSearch%3Fkeyword%3D%E6%89%8B%E6%9C%BA"; newurl = decodeURIComponent(url); // "https://search.jd.com/Search?keyword=手机"
和encodeURL不同的是encodeURLComponent会将所有的其他符号，例如":" "/" "?"等转换为%n的形式。
除了encodeURL 、encodeURLComponent意外，还有escape、unescape：
url = "https://search.jd.com/Search?keyword=手机"; escape(url); //"https%3A//search.jd.com/Search%3Fkeyword%3D%u624B%u673A"
url = "https%3A//search.jd.com/Search%3Fkeyword%3D%u624B%u673A"; unescape(url); //"https://search.jd.com/Search?keyword=手机"
一样可以达到差不多的效果。
四、JS中的eval
在Python中我们学过两个可以通过字符串执行程序的函数，eval()和exec()：
Python中的eval，只能执行表达式，eval(表达式)：
val = eval("1+2") print(val)
exec(执行代码)：
li = [1, 2, 3, 4, 5] loop = """ for i in li: print(i) """ exec(loop)
在JS中，eval()是Python中eval和exec的合体：
val = eval("1+10")
console.log(val)
li = [1,2,3,4,5]
eval("for(var i = 0;i<li.length;i++){console.log(li[i]);}")
五、JS中的时间
d = new Date() //Fri Dec 06 2019 12:59:38 GMT+0800 (中国标准时间)
获取年份、月份、日、时、分、秒：
d.getFullYear(); // 2019年 d.getYear(); // 119，返回的是2019-1900的值 d.getMonth(); //注意月份总是少1，也就是12月获取到的是11 d.getDate(); // 6 （12月6日） d.getDay(); // 5 (星期五) d.getHours(); // 13 （下午1点） d.getMinutes(); // 39 （39分） d.getSeconds(); // 50 (50s)
修改时间属性：
d.setFullYear(2022); // 设置为2022年 d.setMonth(3); // 设置为4月 d.setDate(23); // 设置为23日 ......
六、JS的作用域（重要）
1.首先看一下其他变成语言的作用域，例如C++、JAVA：
void Func(){ if(1 == 1){ int age = 22; } cout<<age<<endl; }
Func(); //报错
上述C++代码中，age实在if的作用域里面的，所以无法在if之外使用。
总结：C++、C#、JAVA等变成语言的作用域是以大括号决定的。
2.Python的作用域
def func(): if 1 == 1: age = 12 print(age) func() //正常执行
Python的作用域是以函数为范围的，if判断是在func函数内部，所以与print是在一个作用域，只要在执行print时，age存在，则不会报错。
3.JS的作用域
JS的作用域与Python比较相似，也是以函数作为作用域的。
function func() { if (1 == 1) { var name = "alex" } console.log(name); } func(); //正常运行
4.JS中的作用域链
当函数中定义函数时：
// 全局变量 myname = "jone"; function func() { // func函数作用域中的局部变量 var myname = "Tony"; function inner() { // inner函数作用域中的局部变量 var myname = "alex"; console.log(myname); } inner(); } func();
inner函数执行时，首先会从自己函数内部查询是否存在myname变量，如果存在则直接打印。所以上述代码打印alex。
如果inner函数内部不存在myname，则会查找上一层函数作用域中的myname，打印Tony。
如果inner和func的作用域都没有myname，则会打印全局变量myname，打印jone。
5.考虑下面特殊情况
// 全局变量 myname = "jone"; function func() { // func函数作用域中的局部变量 var myname = "Tony"; function inner() { console.log(myname); } return inner; } ret = func(); ret();
如上述代码所示，我们在执行func()的时候，inner函数实际上是没有被执行的，func函数返回了inner函数对象，用ret接收。
此时，我们运行ret()，相当于运行inner()，那么此时，inner中打印的myname是打印jone还是Tony？？？
实验结果，打印Tony，为什么呢？？
答案是：在JS中，函数的作用域和作用域链都是在函数执行之前就已经建立了（也就是函数定义后，解释器解释到这个函数定义，并对其进行编译的时候）。所以，虽然这里的ret指向inner函数，看似处于func函数外部，但实际上作用域已经在之前就确定了，所以调用ret的时候，找myname还是在func函数内部找。
6.变量覆盖的情况
function func() { // func函数作用域中的局部变量 var myname = "Tony"; function inner() { console.log(myname); } var myname = "Leo"; return inner; } ret = func(); ret();
我们可以看到在inner函数后面，我们重新定义了myname，这里的myname实际上覆盖了前面的Tony（这个过程是在确定作用域的时候就覆盖了）。多以当我们执行ret的时候，func作用域中的myname就是Leo，所以ret会输出Leo。
7.变量的提前声明
在JS中如果直接调用未定义的变量会报错：
function func(){ console.log(myage); }
但是如果在func函数中存在myage的定义（可能在console.log之后）：
function func(){ console.log(myage); // 这里打印undefined var myage = 22; }
console.log(myage)打印undefined。
这是因为当解释器在生成作用域时，会检查一个函数作用域中所有的变量，然后在前面自动声明一下该变量，类似于：
function func(){ var myage; console.log(myage); var myage = 22; }
代码中，var myage;就是声明了变量myage，但没有赋值，此时打印该变量就是undefined。这就叫做变量的提前声明。
七、JS的面向对象
// 定义一个JS类 function Foo(){ this.name = "Leo"; this.printName = function(){ console.log(this.name); } } //创建一个Foo实例对象 f = new Foo(); f.printName();
从上述代码中可以看到，JS中类的定义和函数定义很相似，不同的是变量使用this，这里的this就相当于Python中的self，他指向对象本身（Foo创建出的对象）。
在上述代码中，如果我们创建多个实例对象，每个对象除了有自己的this.name属性以外，在内存空间中各自还有一份this.printName代码。所以这是不合理的。我们改写一下：
// 定义一个JS类 function Foo(arg) { this.name = arg; } // 定义Foo的原型（原型只会定义一次） Foo.prototype = { 'printName': function () { console.log(this.name); } } //创建两个Foo实例对象 f1 = new Foo("Alex"); f2 = new Foo("Leo"); f1.printName(); f2.printName();
使用定义Foo的原型，来将成员方法定义成一份（存放于类的一个单独空间，而不是每个对象中）。
总结：JS的面向对象中，我们只要看到方法中的变量用this.来开头，就表示这个函数定义的是一个类，并且这个函数可以认为是该类的构造函数。然后所有的成员方法都定义到类的原型中。
八、DOM
DOM中对标签的查找，参照 https://www.cnblogs.com/leokale-zz/p/10314031.html。
innerText和innerHTML：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test1</title> </head> <body> <div id = 'd1'> <a id = "a1">Hello</a> <a id = 'a2'>World</a> </div> <script> d1 = document.getElementById("d1"); console.log(d1.innerText); console.log(d1.innerHTML); </script> </body> </html>
得到的输出结果：
Hello World <a id="a1">Hello</a> <a id="a2">World</a>
可以看出innerText会将所有的HTML标签全部屏蔽掉，只打印div中的所有文本信息。而innerHTML就打印div下的所有标签和内容。
修改innerText内容：
a1 = document.getElementById("a1");
a1.innerText = "Hi";
页面上显示"Hi World"
修改innerHTML内容：
d1 = document.getElementById("d1");
d1.innerHTML = "<a href='http://www.baidu.com'>BAIDU</a>";
页面显示BAIDU超链接。
用value来获取Input类控件的值：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test1</title> </head> <body> <div> <input id='in1' type="text" value = 'Leo'/> </div> <script> in1 = document.getElementById('in1'); in1.value = 'Kale'; </script> </body> </html>
这样，就将文本框中的值从'Leo'修改为了'Kale'。
使用value来取select控件的值：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test1</title> </head> <body> <select id = "sele1"> <option value="11">成都</option> <option value="12">简阳</option> <option value="13" selected="selected">青白江</option> <option value="14">新都</option> </select> <script> sele1 = document.getElementById('sele1'); console.log(sele1.value); </script> </body> </html>
"青白江"是默认被选中的，所以在console中打印13。我们就可以通过该取到的值来判断控件选中的是哪个选项。
select标签还有一个特殊的selectedIndex值，表示当前选中的选项的index：
sele1 = document.getElementById('sele1');
console.log(sele1.selectedIndex);
默认是"青白江"，对应的index为2（从0开始），也就是第三个。
value获取textarea控件的值：
<textarea id = 'ta1'>my name is leo</textarea> <script> ta1 = document.getElementById('ta1'); console.log(ta1.value); </script>
对于textarea来说，他的value的值是写在标间之间的。
九、DOM样式操作
我们在JS中通过DOM可以操作标签的样式。
1.通过className操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test1</title> <style> .c1{ color: red; } .c2{ background-color: gray; } </style> </head> <body> <textarea id = 'ta1'>my name is leo</textarea> <script> obj = document.getElementById('ta1'); obj.className = "c1"; </script> </body> </html>
通过obj.className = 'c1'将textarea中文本的样色设置为红色。
效果如下：
2.通过classList设置多个style：
obj = document.getElementById('ta1');
obj.classList.add("c1");
obj.classList.add("c2");
效果：
剔除classList中的样式：
obj.classList.remove("c2");
3.通过style直接操作样式细节
obj = document.getElementById('ta1');
obj.style.backgroundColor = 'pink';
obj.style.color = 'blue';
效果如下：
注意，在html和css中，background-color是用"-"隔开的，而在JS中，我们要将其变为backgroundColor，这是个规律。
十、DOM属性操作
DOM对标签的属性进行操作：
obj = document.getElementById('ta1');
obj.setAttribute('myname', 'Leo'); //<textarea id = 'ta1' myname = 'Leo'>my name is leo</textarea>
obj.removeAttribute('myname'); // <textarea id="ta1">my name is leo</textarea>
obj.attributes; // NamedNodeMap {0: id, 1: myname, id: id, myname: myname, length: 2}
十一、JS动态添加标签
在标签内部动态添加其他标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test1</title> </head> <body> <!-- "+"按钮，点一下，添加一个input框 --> <input type="button" value="+" onclick="addTag();"/> <div id='d1'> <p><input type="text"/></p> <!-- 点击"+"按钮，就在这里添加一个 <p><input type="text"/></p> --> </div> <script> function addTag() { var obj = document.getElementById('d1'); var tag = "<p><input type=\"text\" /></p>"; obj.insertAdjacentHTML("beforeEnd", tag); } </script> </body> </html>
效果：
注意，obj.insertAdjacentHTML("beforeEnd",tag)，这里的参数有4种：
beforeBegin、beforeEnd、afterBegin、afterEnd。
分别表示：该标签的前面（外部）、该标签的最后（内部）、该标签的最前面（内部）、该标签的后面（外部）。
在上面代码中，我们向div中动态添加的tag是用字符串形式给出的。我们也可以使用DOM来生成标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test1</title> </head> <body> <!-- "+"按钮，点一下，添加一个input框 --> <input type="button" value="+" onclick="createAndAddTag();"/> <div id='d1'> <p><input type="text"/></p> <!-- 点击"+"按钮，就在这里添加一个 <p><input type="text"/></p> --> </div> <script> function createAndAddTag(){ var ptag = document.createElement("p"); var tag = document.createElement("input"); tag.setAttribute('type','text'); ptag.appendChild(tag) var obj = document.getElementById('d1'); obj.appendChild(ptag); } </script> </body> </html>
效果和使用字符串是一样的，但要注意这种方式添加标签要使用obj.appendChild()，因为在这里tag是对象。
十二、利用DOM提交表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test1</title> </head> <body> <form id="form1" action="http://www.baidu.com"> <input type = "text" /> <input type="submit" value="提交"/> <a onclick="submitForm();">提交</a> </form> <script> // 点击a标签，出发该函数 function submitForm(){ obj = document.getElementById('form1'); obj.submit(); } </script> </body> </html>
上述代码通过<a>标签实现了表单的提交，功能和点击提交按钮是一样的，除了<a>标签，任何标签都可以通过JS来实现submit功能。
十三、信息提示
console.log()：打印在浏览器F12的console中。
<body> <input type="button" value="输出" onclick="printMsg();"/> <script> function printMsg(){ console.log("print on console") } </script> </body>
alert()：在页面中弹出警告框。
<body> <input type="button" value="输出" onclick="printMsg();"/> <script> function printMsg(){ alert("This is a alert window!") } </script> </body>
confirm()：弹出一个确认框。
<body> <input type="button" value="输出" onclick="printMsg();"/> <script> function printMsg(){ var ret = confirm("Are you sure?"); console.log(ret); } </script> </body>
当我们选择确定时，返回值ret为true，点击取消时，返回值是false。
十四、JS获取当前URL并实现跳转
<body> <input type="button" value="打印当前URL" onclick="printURL();"/> <input type="button" value="跳转到百度" onclick="jumpBaidu();"/> <script> // 打印当前URL到console中 function printURL(){ var url = location.href; console.log(url); } // 修改当前URL，即跳转到指定的URL function jumpBaidu(){ location.href = "http://www.baidu.com"; } </script> </body>
如果点击"跳转到百度"，浏览器则会直接跳转到baidu首页：
页面刷新：
<body> <input type="button" value="页面刷新" onclick="refreshPage();"/> <script> function refreshPage(){ location.reload(); // 相当于 location.href = location.href; } </script> </body>
十五、定时器
使用setInterval()设置定时循环执行：
<body> <input type="button" value="开始执行" onclick="startLoop();"/> <input type="button" value="结束" onclick="endLoop();"/> <script> function startLoop(){ // 开始1s打印一个Hello obj = setInterval(function(){ console.log("Hello"); },1000) } function endLoop(){ clearInterval(obj); } </script> </body>
点击开始执行按钮，则开始循环在console中打印Hello。点击停止按钮，则停止循环打印。
使用clearInterval来清楚定时器。
只执行一次的定时器：
setTimeout(function(){ console.log("timeout"); },5000);
打开页面后（出发这个函数），等待5s，会在console中打印timeout字符串。
该函数主要用于一些需要延迟处理的效果，例如QQ邮箱删除邮件后，会给你5秒钟的时间来撤销，5秒之后，撤销提示就会消失，就是使用这种方式来实现的。
同样的，使用setTimeout来设置定时器，也可以使用clearTimeout来清除定时器（在等待时间完之前，否则就没意义了）。
十六、事件
事件就是我们为一个控件加上的行为，例如点击、光标、鼠标悬停等。
具体的事件，可以参照 HTML事件属性。
我们在写前段代码的时候，尽量将代码写成 行为 样式 结构 相分离的形式。
什么叫行为、样式、结构相分离？？
就是在html标签中，我们不要使用style属性设置样式（css样式），不要使用onclick等属性设置事件（行为）。这样就将css、JS、HTML分离了。
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test1</title> </head> <body> <div style="background-color: red;" onclick="f1();">Hello</div> <script> function f1(){ console.log("This is function f1()."); } </script> </body> </html>
上述代码就是行为、样式、结构没有分离的形式，在业界被称为DOM0，是比较low的形式。
我们将其修改为行为、样式、结构相分离的形式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test1</title> <style> #div1{ background-color: red; } </style> </head> <body> <div id="div1">Hello</div> <script> var d1 = document.getElementById('div1'); d1.onclick = function(){ console.log("This is onclick function."); } </script> </body> </html>
这样的好处是什么？
当HTML中有大量的标签需要添加事件，我们无需在每个标签中添加事件属性。例如表格，表格中有大量的标签，而且可以规律的获取（循环index），如果表格中每一个格子td都需要一个事件，那么我们就可以采用这种方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test1</title> <style> #tb,td{ border: 1px solid black; } #tb td{ width: 100px; } </style> </head> <body> <table id="tb"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> <script> var trs = document.getElementsByTagName('tr'); for(var i = 0;i<trs.length;i++){ var tds = trs[i].children; console.log(tds); for(var k = 0;k<tds.length;k++){ var td = tds[k]; td.onmouseover = function () { this.style.backgroundColor = "red"; } td.onmouseout = function () { this.style.backgroundColor = ""; } } } </script> </body> </html>
上述代码事件了，为每一个td添加一个onmouseover和onmouseout事件。
特别注意：在事件函数中，我们使用this.style.backgroundColor来设置样式，这里this代表调用这个事件函数的对象，当我们的鼠标移到某个td上时，就是这个td调用的这个函数。
这里一定注意，this不能替换为td，因为在循环绑定事件的时候，这个匿名函数是没被执行的，当循环到最后一个td时，这个function就变成了 最后的td.style.backgroundColor = "red"。那么在以后触发事件，调用该函数的时候，一直都是最后一个td发生样式的变化，和初衷违背。
记住：谁调用事件，this就是谁。。。
十七、事件的三种绑定方式
这里聊一下三种绑定方式中的this。
第一种（DOM0不推荐）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test2</title> </head> <body> <input type="button" value="点击" onclick="clickOn(this);" /> <script> function clickOn(ths){ //这是的参数ths,就是通过onClick传递过来的this，this代表当前被点击的按钮 ths.style.backgroundColor = "green"; } </script> </body> </html>
第二种（DOM1推荐）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test2</title> </head> <body> <input id="ipt1" type="button" value="点击" /> <script> var ipt1 = document.getElementById("ipt1"); ipt1.onclick = function(){ this.style.backgroundColor='red'; } </script> </body> </html>
这种通过DOM来给标签绑定事件的方式，匿名函数中的this就直接代表当前动作标签。
第三种（DOM2比较高级）：
这种绑定方式可以为一个标签同时绑定多个事件（事件可以相同）。
<body> <input id="ipt1" type="button" value="点击" /> <script> var ipt1 = document.getElementById("ipt1"); ipt1.addEventListener("click",function(){console.log("aaa")},false); ipt1.addEventListener("click",function(){console.log("bbb")},false); </script> </body>
可以看到，我们为按钮绑定了2个click事件，也就是说，我们在点击按钮时，console中会同时打印aaa和bbb。
在addEventListener函数中，第一个参数是事件的类型，第二个参数是绑定的函数，第三个参数是模式（分为捕捉型true和冒泡型false）。
捕捉型和冒泡型：
捕捉型就是从最上层先触发事件，然后依次往下。冒泡型就是从底层标签开始触发事件，依次往上。例如：
<head> <meta charset="UTF-8"> <title>test2</title> <style> #d1{ background-color: red; width: 300px; height: 400px; } #d2{ background-color: pink; width: 150px; height: 200px; } </style> </head> <body> <div id="d1"> <div id="d2"></div> </div> <script> var div1 = document.getElementById("d1"); var div2 = document.getElementById("d2"); div1.addEventListener("click",function(){console.log("div1")},false); div2.addEventListener("click",function(){console.log("div2")},false); </script> </body>
上述代码中，div1中有div2，div2属于底层标签，div1是上层标签。如下图，粉色为div2，红色为div1。
当我们第三个参数使用false时，我们点击粉色部分（粉色部分是重叠的），这里先打印div2，后打印div1。
当我们第三个参数使用true时，我们点击粉色部分（粉色部分是重叠的），这里先打印div1，后打印div2。
十八、JS的词法分析（重要理论）
函数在定义的时候解释器会对其进行词法分析，分析的时候会由一个active object（AO）来记录函数中有哪些变量，例如形参、实参、局部变量、函数声明表达式等。
例如：
<script> function func1(age){ console.log(age); var age = 27; console.log(age); function age(){} console.log(age); } func1(3); </script>
我们来看看func1的词法分析过程：
1.AO分析形参，发现有一个形参age，所以AO.age == undefined
2.AO分析实参，发现实参为3，所以AO.age == 3
3.AO分析局部变量，发现有一个age，但是函数未运行，无法赋值27，所以AO.age == undefined （这里覆盖了前面的AO.age==3）
4.AO分析函数声明表达式，发现有一个age()，所以AO.age==function age()
5.分析完毕后，函数开始执行
6.执行时遇到第一个console.log(age)，所以打印f age(){}
7.然后遇到age赋值27，所以AO.age ==27
8.再遇到第二个console.log(age)，所以打印27
9.跳过函数声明
10.遇到第三个console.log(age)，所以还是打印27
最终在console的打印结果为：
我们再用此理论分析之前的一个简单例子：
function func2(){ console.log(name); var name='alex'; } func2();
分析过程：
1.AO发现没有形参，也没有实参。
2.AO发现局部变量name，但这个阶段是布管值的，所以AO.name == undefined
3.函数执行
4.遇到console.log(name)，所以打印undefined
5.遇到局部变量赋值，AO.name == "alex"
