JavaScript学习笔记

JavaScript学习笔记

1.JavaScript基础

1.1 数据类型

<!--number 没有整数和浮点数区分
Nan not a number
Inf infinite
string
boolean
=== 类型一样，值一样
== 类型不一样，值一样 也会为true
坚持不要使用==
isNan来判断(Nan)
对象是大括号  数组是中括号
每个属性之间通过,隔开 最后一个不用-->

1.2 迭代器使用

    <script>
        'use strict'
        var arr=[3,4,5]
        // of 是数据 in是下标
        for (let x of arr){
            console.log(x)
        }
        var map=new Map([["tom",100],["jack",90],["haha",80]]);
        for (let x of map)
        {
            console.log(x)
        }
        var set =new Set([5,6,7]);
        for (let x of set)
        {
            console.log(x)
        }
    </script>

1.3 函数

方法的定义与使用

    <script>
        function get_age()
        {
            var now_year=new Date().getFullYear();
            return now_year-this.birth;
        }
        var young={
            name:"杨杨杨",
            birth:"2021",
            age:get_age
        }
        get_age.apply(young,[]);
    </script>

变量的作用域

<!--    在javascript中，var定义变量实际是有作用域的-->
<!--    假设在函数体中声明，则在函数体外不可以使用-->
    <script>
        // 全局对象window
        var x='xx';
        window.alert(x);
        var old_alert=window.alert;
        window.alert=function (){

        };
        window.alert(123);
        //可以使得系统对象失效
        // 唯一全局变量
        var SkyoungApp={};
        SkyoungApp.name='young';
        SkyoungApp.add=function (a,b){
            return a+b;
        }
        //把自己写得全局变量写入自己的命名空间
        // jQuery=$
        function fun3()
        {
            for (let i=0;i<100;i++)
                console.log(i);
            console.log(i+1);//i出了作用域还可以使用
            // 为了解决局部作用域冲突的问题，使用了let关键字
            // 建议使用let来定义局部作用域的变量

        }
        function fun() {
            var x = 1;

            function fun() {
                var x = 'A';
                console.log("ww" + x);
            }

            console.log("qq" + x);
        }
        function fun2()
        {
            var y;
            var x='x'+y;
            console.log(x);
            y='y';
        }
        // 这个是在JavaScript建立之处就存在的特性，养成规范：所有变量的定义都放在头部，便于维护
    </script>

函数

    <script>
        // 绝对值函数
        // function abs(X)
        // {
        //     if(X>=0)
        //         return X;
        //     else
        //         return -X;
        //
        // }
     // 定义方式二
      var abs=function(x){

            console.log("x=>"+x);
            for(var i=0;i<arguments.length;i++)
                console.log(arguments[i]);

          if(arguments.length>1)
              x=arguments[1];


        if(typeof (x)!='number')
        throw "not a number";
        //手动抛出异常
          if(x>=0)
              return x;
          else
              return -x;
      }
      function fun(a,b,...rest)
       // rest 参数写在后面接收多余的参数
     {
          console.log(rest);
      }
// function (x)是一个匿名函数，但是可以把结果赋值给abs，通过abs调用函数
        // 可以传递任意个参数，也可以不传参数
    </script>

Date对象

    <script>
        var now=new Date();
now.getFullYear();
now.getMonth();
now.getDate();
now.getHours();
console.log(now.toJSON());
    </script>

Json

    <script>
        // 对象都用{}
        // 数组都用[]
        // 所有键值对都是 key:value
        var user={
            name:'young',
            age:123,
            sex:'男'
        }
        // 将对象转换为Json字符串
        var json=JSON.stringify(user);
        var nuser=JSON.parse('{"name":"young","age":123,"sex":"男"}');

   // Ajax
   //      原生的js写法 xhr 异步请求
   //      jQuery封装好的方法 $("#name")
   //      axios 请求
    </script>

1.4 面向对象编程

Class

    <script>

        function  Student(name)
        {
            this.name=name;

        }
        // 给Student 新增一个方法
        Student.prototype.hello=function ()
        {
            alert('hello');
        }
        class XiaoStudent extends Student  {
            constructor(name,grade) {
                super(name);
                this.grade=grade;
            }
            myGrade()
            {
                alert("I'm a XiaoStudent");
            }
        }
        var xiaoming=new Student("xiaoming");
        var xiaohong=new XiaoStudent("xiaohong",97);
    </script>

创建和插入DOM结点

<body>
<!--我们获得了某个Dom结点，假如这个dom结点是空的，我们通过innerHtml可以添加，但是这个Dom系欸但已经存在元素了，就会被覆盖-->
<p id="js">Javascript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ve">JavaVE</p>
    <p id="me">JaveME</p>
</div>
<script>
    var js=document.getElementById('js');
    var list=document.getElementById('list');
    list.appendChild(js);
    var newp=document.createElement('p')
    newp.id='newp';
    newp.innerText="hello,world";
    list.appendChild(newp);

    var myScript=document.createElement('script');
    myScript.setAttribute('type','text/javascript')
    var body=document.getElementsByTagNameNS('body');
    body.setAttribute('style','background-color:wheat');
</script>
</body>

删除DOM结点

<body>
<div id="father">
    <h1>
        标题一
    </h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    var self=document.getElementById('p1');
    var father=p1.parentElement;
    father.removeChild(self);
    //通过父亲来删除
</script>
</body>

获得DOM结点

<body>
<div id="father">
<h1>

    标题一
</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
    // 浏览器网页就是一个Dom树形结构
    // 更新：更新Dom结点
    // 遍历Dom结点：得到Dom结点
    // 删除：输出一个Dom结点
    // 添加：添加一个新的结点
    var h1=document.getElementsByTagName('h1')
    var h2=document.getElementById('p1')
    var f1=document.getElementById('father')
    var children=f1.children
</script>
</body>

操作表单(验证)

<body>
<form method="post">
    <p>
        <span >用户名:</span> <input type="text" id="username" name="username">

    </p>
    <p>
        <span>密码:</span> <input type="password" id="input-password" >
    </p>
    <p>
        <span>性别:</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="woman" id="girl">女

    </p>
    <input type="hidden" id="md5-password" name="password">


    <input type="submit" onclick="fun()">


</form>
<script>
    var input_text=document.getElementById("username");
    var boy_radio=document.getElementById('boy');
    var girl_radio=document.getElementById('girl');

    //对于单选框 ，多选框 固定的值 只能 取到当前的值
    boy_radio.checked;
    function fun()
    {
        alert("提交成功");
        var uname=document.getElementById("username");
        var upa=document.getElementById("password");
        var md5password=document.getElementById('md5-password');
        console.log(uname.value);


        //可以使用MD5算法加密
        upa.value=md5(upa.value);
        console.log(upa.value);

    }
</script>
</body>

1.5 Jquery

简单事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/1.js"></script>
    <style>
        #divmove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }

    </style>
</head>
<body>
mouse: <span id="mouseMove"></span>
<div id="divmove"></div>
<script>
    $(function (){

        $('#divmove').mousemove(function (e)
        {
            $('#mouseMove').text('x:'+e.pageX+'Y:'+e.pageY);
        })

    })
</script>
</body>
</html>

操作DOM元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/1.js"></script>
</head>
<body>
<ul id="test-ul">
    <li class="js">Javascript</li>
    <li name="python">Python</li>

</ul>
<script>
    $('#test-ul li[name=python]').text();
    $('#test-ul').html();
    $('#test-ul li[name=python]').css("color","red");
</script>
</body>
</html>

2.Web组件

• 使用Web组件
• 自定义元素
• HTML模板
• 影子DOM
• 实战:

2.1 DocumentFragment节点

• 可以临时充当一组同辈结点的父结点
• 向文档中插入DocumentFragment时，本身不会插入，插入的是其子节点

2.2 自定义元素

//创建自定义的类，扩展HTMLElement元素
class CardComponent extend HTMLElement{};
//创建自定义HTML标签，必须包含连字符
customElement.define("card-component",CardComponent);

2.3 HTML模板

const template=document.createElement("template");

template.innerHTML=`<div> <slot>Default Content</slot></div>`

2.4 影子DOM

//把一个影子根系欸但附加到元素上
//element称为影子宿主
element.attachShadow({mode:"open"});
//元素的shadowRoot属性引用影子根节点，也是一个DOcuentFragment
element.shadowRoot.append(template.content.cloneNode(true));

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="1.js" type="text/javascript"></script>
    <title>Web组件</title>
</head>
<body>
<card-component width="10em" img="https://i-1-lanrentuku.52tup.com/2020/7/11/e23bfa96-6f7c-4c05-b4e7-0ee93d656d9f.jpg?imageView2/2/w/1024/">
    <span>yes!</span>
</card-component>
<card-component width="10em" img="https://i-1-lanrentuku.52tup.com/2020/12/20/64625341-6d07-4f0f-8c57-1b31a8e4efc9.jpg?imageView2/2/w/1024/"></card-component>
</body>
</html>

const template=document.createElement('template')
template.innerHTML=`<div class="card" >
  <img class="card-img-top" alt="..." >
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <slot>more text</slot>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>`

class CardComponent extends HTMLElement{
    constructor()
    {
        super()
        this.attachShadow({ mode: 'open' })
        this.shadowRoot.append(template.content.cloneNode(true))

    }
    connectedCallback()
    {
        this.shadowRoot.querySelector('.card').style.width=this.getAttribute('width')
        this.shadowRoot.querySelector('img').setAttribute('src',this.getAttribute('img'))
    }
}
customElements.define("card-component",CardComponent)

class CustomTitle extends HTMLElement {
    constructor() {
        super()
        this.attachShadow({ mode: 'open' })
        this.shadowRoot.innerHTML = `
        <h1>My Custom Title!</h1>
      `
    }
}

window.customElements.define('custom-title', CustomTitle)

注意:这里</card-component>不能换行，否则就会失效！！试了两个小时的结果！！！！

学习网址:Web前端攻城狮 - 清华大学 - 学堂在线 (xuetangx.com)