2022-08-25 第二组刘禹彤学习笔记

打卡40天

###学习内容

Javascript

自定义属性

获取属性

所有的html元素，我们可以根据具体需求，自定义添加属性
元素.属性名的方式只适用于元素原生的属性

自定义属性

div getAttribute("属性")

设置属性(键值对)

div.setAttribute("属性"，“属性名‘)

删除属性

div.removeAttribute("属性")

拿到元素所有属性

返回的结果是一个属性节点的映射的集合

console.log(div.Attributes)

拿到其中某一个节点的子节点

console.log(div.Attributes[index].xxx)

BOM(Browser Object Model)

BoM核心对象-window

navigator
history
screen
location

回调函数

回调函数：一个函数的参数是另一个函数

let calllback = function(a{
console.log(a)
}
//传数字
console.log(1)
//传字符串
console.log("hello")
//传对象
console.log({name:"zhangsan"})
//传数组
console.log([1,2,3])

test函数中，入参可以是一个函数

  let test = function(fun){
                console.log("before");
                // 调用了传进来的函数
                fun(1000);
                console.log("after");
            }
            let callback = function(data) {
                console.log("I am callback，" + data);
            }
            // test(1)
            test(callback);

传入的参数是一个函数类型时，只需要写函数名，不需要写（）

定时函数

定义计时函数

参数1：函数

参数2：延迟时间

  let timer = setTimeout(function(){
                document.write("<h1>5秒钟后可以见到我</h1>")
            },5000);

清除计时函数

 clearTimeout(timer);

周期性定时器

 let timer = setInterval(function() {
                console.log("123");
            },2000);
            clearInterval(timer);

浏览器

浏览器自带了一个小型的数据库

浏览器自带的一个map集合，永久保存

向Storage中设置键值对

  window.localStorage.setItem("name","lucy");
            window.localStorage.setItem("age",25);

从Storage中根据键获取值

 console.log(localStorage.getItem("name"));

从Storage中删除对应的键值对

localStorage.removeItem("name");

从控制台删除此键值对

清空Storage中所有的键值对

 localStorage.clear();

弹窗

警告弹窗

alert(1);

带有确认和取消的弹窗

点击确定，返回true，点击取消，返回false

let flag = confirm("你是好人吗？"); 
 alert(flag);

带有文本框的弹窗

文本框输入的内容就是返回值

 let name = prompt("请输入你的名字：","例如：张三");
   alert(name);

这三个弹窗开发中基本不用！！！

不好看
不同浏览器长得不一样
弹窗位置无法修改

history

历史记录

  function fun() {
                // history.forward();
                // 退 退 退
                 history.back();
                // 既可以前进，又可以后退
                // 传入的参数为正，则前进
                // 传入的参数为负，则后退
                // 参数就是步数，走几步
                history.go(2);
            }

location

获取页面路径

  function fun() {
                // 值是要跳转页面的路径
                // 可以是相对路径，也可以是绝对路径，还可以是http地址
            location.href = "demo02.html";
            location.href = "http://www.baidu.com";
                // 取值
                 alert(location.href);
                // 刷新页面
                location.reload();
           }

screen

           console.log(screen.width);
           console.log(screen.height);
           console.log(screen.availHeight);
           console.log(screen.availWidth);

navigater

获取一些浏览器的参数

            console.log(navigator.platform);
            console.log(navigator.appVersion);
            console.log(navigator.appName);

window

    <body>
        <button onclick="fun()">关闭</button>
        <script>
            function fun() {
                // window.close();
                // window.open("demo01.html");
                window.print();
            }
        </script>
    </body>

事件

添加事件

方式一

/ 获取指定的元素
           let div = document.querySelector("div");
           /*
                参数1：要添加的事件类型
                参数2：添加的事件要触发的函数


                传说中，这种添加事件的方式有兼容性问题。
           */
           div.addEventListener("click",function(){
                alert("click");
           });

方式二

            //操作元素的属性
             div.onclick = function() {
             alert("onclick");
         }

删除事件

方式一

            div.onclick = null;
            div.onclick = false;
            div.onclick = "";

方式二

            let callback = function() {
                console.log("callback");
            }
            div.addEventListener("click",callback);
            // 删除事件
            div.removeEventListener("click",callback);

分类

onsubmit

<form action="aaa" onsubmit="return fun()">


            <input type="text" required>


            <input type="submit" value="提交">


        </form>
        <script>
            function fun() {
                return true;
            }
        </scri

onsubmit事件注意：

1、onsubmit是加在form表单上

2、onsubmit要有return

3、函数也要返回boolea

事件冒泡

子容器还会显示父容器的内容

阻止事件冒泡： 1.在子元素的事件触发函数中阻止

2.借助event对象

3.调用一个方法

 <ul onclick="fun()">
            <li>哈哈哈</li>
        </ul>


        <script>
            function fun() {
                alert("111");
            }
            let li = document.querySelector("li");
            li.addEventListener("click",function(event){
                alert("222");
                // 阻止事件冒泡
                event.stopPropagation();
            })

event对象必须通过addEventListener方式添加事件才可以使用

ES6语法

let；const
模板字符串---------着重符``

箭头函数：setInterval(()=> },2000)

Symbol
Promise函数，处理回调地狱

###学习心得

今天将JS的基本内容全部学习完毕，感觉掌握情况还可以，基本语句都理解了，还要通过练习巩固

###掌握情况：一般

###课上练习

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                width: 400px;
                height: 400px;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>

        <a href="demo01.html">再倒计时</a>

        <button onclick="daojishi()">倒计时</button>

        <div></div>

        <script>
            function daojishi() {
                let div = document.querySelector("div");            
                let i = 5;
                let timer = setInterval(function() {
                    div.innerHTML = `<h1>${i}</h1>`;
                    i--;
                    if(i < 0){
                        // clearInterval(timer);
                        
                        div.innerHTML = "<h1>GO！！！</h1>"
                        return;
                    }
                },900);
                // if(i == 0){
                //     clearInterval(timer);
                // }
                console.log(i);
            }
        </script>
    </body>
</html>

###运行结果

Javascript

自定义属性

获取属性

所有的html元素，我们可以根据具体需求，自定义添加属性
元素.属性名的方式只适用于元素原生的属性

自定义属性

div getAttribute("属性")

设置属性(键值对)

div.setAttribute("属性"，“属性名‘)

删除属性

div.removeAttribute("属性")

拿到元素所有属性

返回的结果是一个属性节点的映射的集合

console.log(div.Attributes)

拿到其中某一个节点的子节点

console.log(div.Attributes[index].xxx)

BOM(Browser Object Model)

BoM核心对象-window

navigator
history
screen
location

回调函数

回调函数：一个函数的参数是另一个函数

let calllback = function(a{
console.log(a)
}
//传数字
console.log(1)
//传字符串
console.log("hello")
//传对象
console.log({name:"zhangsan"})
//传数组
console.log([1,2,3])

test函数中，入参可以是一个函数

  let test = function(fun){
                console.log("before");
                // 调用了传进来的函数
                fun(1000);
                console.log("after");
            }
            let callback = function(data) {
                console.log("I am callback，" + data);
            }
            // test(1)
            test(callback);

传入的参数是一个函数类型时，只需要写函数名，不需要写（）

定时函数

定义计时函数

参数1：函数

参数2：延迟时间

  let timer = setTimeout(function(){
                document.write("<h1>5秒钟后可以见到我</h1>")
            },5000);

清除计时函数

 clearTimeout(timer);

周期性定时器

 let timer = setInterval(function() {
                console.log("123");
            },2000);
            clearInterval(timer);

浏览器

浏览器自带了一个小型的数据库

浏览器自带的一个map集合，永久保存

向Storage中设置键值对

  window.localStorage.setItem("name","lucy");
            window.localStorage.setItem("age",25);

从Storage中根据键获取值

 console.log(localStorage.getItem("name"));

从Storage中删除对应的键值对

localStorage.removeItem("name");

从控制台删除此键值对

清空Storage中所有的键值对

 localStorage.clear();

弹窗

警告弹窗

alert(1);

带有确认和取消的弹窗

点击确定，返回true，点击取消，返回false

let flag = confirm("你是好人吗？"); 
 alert(flag);

带有文本框的弹窗

文本框输入的内容就是返回值

 let name = prompt("请输入你的名字：","例如：张三");
   alert(name);

这三个弹窗开发中基本不用！！！

不好看
不同浏览器长得不一样
弹窗位置无法修改

history

历史记录

  function fun() {
                // history.forward();
                // 退 退 退
                 history.back();
                // 既可以前进，又可以后退
                // 传入的参数为正，则前进
                // 传入的参数为负，则后退
                // 参数就是步数，走几步
                history.go(2);
            }

location

获取页面路径

  function fun() {
                // 值是要跳转页面的路径
                // 可以是相对路径，也可以是绝对路径，还可以是http地址
            location.href = "demo02.html";
            location.href = "http://www.baidu.com";
                // 取值
                 alert(location.href);
                // 刷新页面
                location.reload();
           }

screen

           console.log(screen.width);
           console.log(screen.height);
           console.log(screen.availHeight);
           console.log(screen.availWidth);

navigater

获取一些浏览器的参数

            console.log(navigator.platform);
            console.log(navigator.appVersion);
            console.log(navigator.appName);

window

    <body>
        <button onclick="fun()">关闭</button>
        <script>
            function fun() {
                // window.close();
                // window.open("demo01.html");
                window.print();
            }
        </script>
    </body>

事件

添加事件

方式一

/ 获取指定的元素
           let div = document.querySelector("div");
           /*
                参数1：要添加的事件类型
                参数2：添加的事件要触发的函数


                传说中，这种添加事件的方式有兼容性问题。
           */
           div.addEventListener("click",function(){
                alert("click");
           });

方式二

            //操作元素的属性
             div.onclick = function() {
             alert("onclick");
         }

删除事件

方式一

            div.onclick = null;
            div.onclick = false;
            div.onclick = "";

方式二

            let callback = function() {
                console.log("callback");
            }
            div.addEventListener("click",callback);
            // 删除事件
            div.removeEventListener("click",callback);

分类

onsubmit

<form action="aaa" onsubmit="return fun()">


            <input type="text" required>


            <input type="submit" value="提交">


        </form>
        <script>
            function fun() {
                return true;
            }
        </scri

onsubmit事件注意：

1、onsubmit是加在form表单上

2、onsubmit要有return

3、函数也要返回boolea

事件冒泡

子容器还会显示父容器的内容

阻止事件冒泡： 1.在子元素的事件触发函数中阻止

2.借助event对象

3.调用一个方法

 <ul onclick="fun()">
            <li>哈哈哈</li>
        </ul>


        <script>
            function fun() {
                alert("111");
            }
            let li = document.querySelector("li");
            li.addEventListener("click",function(event){
                alert("222");
                // 阻止事件冒泡
                event.stopPropagation();
            })

event对象必须通过addEventListener方式添加事件才可以使用

ES6语法

let；const
模板字符串---------着重符``

箭头函数：setInterval(()=> },2000)

Symbol
Promise函数，处理回调地狱

posted on 2022-08-25 18:31 小仙女吖～阅读(34) 评论(0) 编辑收藏举报

刷新页面返回顶部

lyt0612

导航

公告

2022-08-25 第二组刘禹彤 学习笔记

Javascript

自定义属性

获取属性

BOM(Browser Object Model)

BoM核心对象-window

回调函数

定时函数

浏览器

弹窗

history

location

screen

navigater

window

事件

添加事件

删除事件

分类

ES6语法

Javascript

自定义属性

获取属性

BOM(Browser Object Model)

BoM核心对象-window

回调函数

定时函数

浏览器

弹窗

history

location

screen

navigater

window

事件

添加事件

删除事件

分类

ES6语法

2022-08-25 第二组刘禹彤学习笔记