2 年之前 · f20768bdb9
--- a/day07/web/1.png
+++ b/day07/web/1.png
--- a/day07/web/array.html
+++ b/day07/web/array.html
@@ -0,0 +1,48 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+<script>
			
 
				+
			
 
				+    /**
			
 
				+     * 数组分为两种声明防范
			
 
				+     */
			
 
				+    var arr = new Array(1,2,3,4,5)
			
 
				+    /**
			
 
				+     * [] 字面声明方式 比较推崇
			
 
				+     */
			
 
				+    var arr = [1,2,3,4,5,6]
			
 
				+    arr[6] = 7
			
 
				+    arr[7] = 8
			
 
				+    for (let i = 0; i < arr.length; i++) {
			
 
				+        var htmlDivElement = document.createElement("div");
			
 
				+        htmlDivElement.innerText = arr[i]
			
 
				+        document.querySelector("body").appendChild(htmlDivElement)
			
 
				+    }
			
 
				+
			
 
				+    /**
			
 
				+     * 原型链
			
 
				+     *  我们可以在原型链上 拓展自己的新方法
			
 
				+     *  这样我们在后面的 代码中可以方便的 使用自己定义的方法
			
 
				+     *  "".tram("*")
			
 
				+     *  "".rtram("&")
			
 
				+     *  js 我们就可以自己定义一个方法 放到原型上 就方便使用了
			
 
				+     */
			
 
				+    Array.prototype.test = function(){
			
 
				+        console.log("test")
			
 
				+    }
			
 
				+
			
 
				+    var arr3 = [];
			
 
				+    arr3.push(1,3,4)
			
 
				+    arr3.pop()
			
 
				+    console.log(arr3)
			
 
				+
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/day07/web/beijing.jpg
+++ b/day07/web/beijing.jpg
--- a/day07/web/document.html
+++ b/day07/web/document.html
@@ -0,0 +1,60 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+<div id="box">
			
 
				+    <span class="text">text1</span>
			
 
				+    <span class="text">text2</span>
			
 
				+    <span class="text">text3</span>
			
 
				+    <span class="text">text4</span>
			
 
				+    <span class="text">text5</span>
			
 
				+    <span class="text">text6</span>
			
 
				+</div>
			
 
				+
			
 
				+<script>
			
 
				+
			
 
				+    /**
			
 
				+     * JS 可以通过 标签名字查找ELE元素 返回一个数组
			
 
				+     */
			
 
				+    // var elementsByName = document.getElementsByTagName("span");
			
 
				+    // console.log( elementsByName )
			
 
				+    // console.log( elementsByName[ elementsByName.length -1 ]  )
			
 
				+    /**
			
 
				+     * JS 可以通过 CLASS名字查找ELE元素 返回一个数组
			
 
				+     */
			
 
				+    // var elementsByName = document.getElementsByClassName("text")
			
 
				+    // console.log( elementsByName )
			
 
				+    // console.log( elementsByName[ elementsByName.length -1 ]  )
			
 
				+    /**
			
 
				+     * JS 可以通过 ID 查找ELE元素 返回元素或者空
			
 
				+     */
			
 
				+    // var elementById = document.getElementById("box");
			
 
				+    // console.log( elementById )
			
 
				+    /**
			
 
				+     * JS 可以通过 querySelector 返回元素或者列表
			
 
				+     */
			
 
				+    // console.log(
			
 
				+    //     document.querySelectorAll("span"),
			
 
				+    //     document.querySelector("span"),
			
 
				+    //     document.querySelector("#box"),
			
 
				+    //     document.querySelector(".text"),
			
 
				+    // )
			
 
				+
			
 
				+    var nodeList = document.querySelectorAll("span")
			
 
				+    for (let i = 0; i < nodeList.length; i++) {
			
 
				+        var htmlDivElement = document.createElement("div")
			
 
				+        htmlDivElement.innerText = "查找到 span 元素 第" + ( i + 1 ) + "个"
			
 
				+        document.querySelector("#box").appendChild(htmlDivElement)
			
 
				+    }
			
 
				+
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/day07/web/event.html
+++ b/day07/web/event.html
@@ -0,0 +1,33 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div style="width: 600px; height: 300px; margin: 0 auto; margin-top: 100px">
			
 
				+    <p>
			
 
				+        <img src="off.png" />
			
 
				+    </p>
			
 
				+
			
 
				+</div>
			
 
				+<button id="on" onclick="on()" >开灯</button>
			
 
				+<button id="off" onclick="off()" >关灯</button>
			
 
				+    <script>
			
 
				+        function on() {
			
 
				+            document.querySelector("img").src = "on.png"
			
 
				+        }
			
 
				+        function off() {
			
 
				+            document.querySelector("img").src = "off.png"
			
 
				+        }
			
 
				+        // document.querySelector("#on").addEventListener("click", function(){
			
 
				+        //     on();
			
 
				+        // })
			
 
				+        // document.querySelector("#off").addEventListener("click", function(){
			
 
				+        //     off();
			
 
				+        // })
			
 
				+        document.querySelector("#on").onclick = on;
			
 
				+        document.querySelector("#off").onclick = off;
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/day07/web/form.html
+++ b/day07/web/form.html
@@ -0,0 +1,36 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+<form id="register" action="#" >
			
 
				+    <input type="text" onblur="onblurfunc" name="username" />
			
 
				+    <input type="submit" value="提交">
			
 
				+</form>
			
 
				+
			
 
				+
			
 
				+<script>
			
 
				+    const usernameInput = document.getElementsByName("username")[0]
			
 
				+    usernameInput.onblur = function(){
			
 
				+        if ( this.value.length < 6 ) {
			
 
				+            alert("长度不允许小于6位")
			
 
				+            this.value = ""
			
 
				+        }
			
 
				+    }
			
 
				+    function submit(){
			
 
				+        const username = usernameInput.value
			
 
				+        if ( username ) {
			
 
				+            return true
			
 
				+        }
			
 
				+        alert("用户名必须输入")
			
 
				+        return false
			
 
				+    }
			
 
				+    document.querySelector("#register").onsubmit = submit
			
 
				+</script>
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/day07/web/function.html
+++ b/day07/web/function.html
@@ -9,24 +9,48 @@
 
				 
			
 
				 
			
 
				     <script>
			
 
				-
			
 
				         /**
			
 
				          * Java 语言有两种声明函数的方案
			
 
				          * 第一种  函数式声明
			
 
				-         * 第二种 变量声明
			
 
				+         * 第二种  变量式声明
			
 
				          * JS 参数没有类型限制, 也没有 强制传参限制, 可以在声明参数的时候 指定默认值
			
 
				          * JS 返回值也没有强制限制, 同样没有类型限制
			
 
				          */
			
 
				         function f(arg1, arg2, arg3 = [1,2,3]) {
			
 
				             console.log( arg1, arg2, arg3 )
			
 
				         }
			
 
				-        //如此声明函数, 会在解析代码的时候 检查代码结果
			
 
				+        //函数式声明, 会在解析代码的时候 检查代码
			
 
				         var fun = function(){
			
 
				             console.log("Hello World fun")
			
 
				         }
			
 
				-        //如此声明函数, 解析器不会对函数进行检查
			
 
				-        f( 1, "" )
			
 
				-        fun()
			
 
				+        //变量式声明, 解析器不会对函数进行检查
			
 
				+        // f( 1, "" )
			
 
				+        // fun()
			
 
				+
			
 
				+
			
 
				+        /**
			
 
				+         * 验证 函数式声明 和 变量式声明区别
			
 
				+         * @param arg
			
 
				+         */
			
 
				+        function f1(arg){
			
 
				+            console.log(arg)
			
 
				+            function arg(){}
			
 
				+            console.log(arg)
			
 
				+        }
			
 
				+        function f2(arg){
			
 
				+            console.log(arg)
			
 
				+            var arg = function(){}
			
 
				+            console.log(arg)
			
 
				+        }
			
 
				+
			
 
				+        f1("hello F1")
			
 
				+        console.log("--------------------------------------------")
			
 
				+        f2("hello F2")
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				 
			
 
				 
			
 
				 
			
--- a/day07/web/mouse.html
+++ b/day07/web/mouse.html
@@ -0,0 +1,23 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <img src="beijing.jpg" width="400" >
			
 
				+    <script>
			
 
				+        /**
			
 
				+         * setAttribute 可以修改 元素属性
			
 
				+         * 但是不能修改 style , 除非 把整个 style 全部重新赋值
			
 
				+         * @param arg
			
 
				+         */
			
 
				+        document.querySelector("img").onmouseout = function(arg){
			
 
				+            this.setAttribute("width", 400)
			
 
				+        }
			
 
				+        document.querySelector("img").onmouseover = function(){
			
 
				+            this.setAttribute("width", 1400)
			
 
				+        }
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/day07/web/object.html
+++ b/day07/web/object.html
@@ -0,0 +1,43 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <script>
			
 
				+
			
 
				+        /**
			
 
				+         * 在js里面 对象就是一个大括号创建的对象
			
 
				+         * 对象里可以包含js 所有可用的元素
			
 
				+         */
			
 
				+        var o = {
			
 
				+            "string":"Hello World",
			
 
				+            "num" : 1234565677,
			
 
				+            "bool" : true,
			
 
				+            "func" : function(){  console.log(" func 被调用了 ")  },
			
 
				+            "arr" : [],
			
 
				+            "undefined" : undefined,
			
 
				+            "null" : null,
			
 
				+            "obj" : {
			
 
				+                fun : function(){
			
 
				+                    console.log(" o 的 obj 的 fun 被调用")
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        console.log( typeof  o )
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/day07/web/off.png
+++ b/day07/web/off.png
--- a/day07/web/on.png
+++ b/day07/web/on.png