JavaScript的组成

ECMAScript:JavaScript的语法

DOM：页面文档对象模型，DOM API 是浏览器给js提供的操作页面元素的API。

BOM：浏览器对象模型，BOM API是浏览器给js提供的操作浏览器窗口的API。

三种引入方式：

1.内部js

2.外部js,将js写成一个单独的文件，引入

3.行内js,直接写到html元素内部

在控制台打印日志：

console.log('hello world');

语法

js变量：

let 变量名 = 值；

js动态类型：

一个变量在程序运行过程中，类型可以改变称为动态类型，否则称为静态类型。

js中变量的内置类型：

隐类型转换：

js数组：

定义数组及数组的几种遍历方式：

给数组添加元素：尾插，使用arr.push()方法；

插入，修改，删除数组元素：splice()

函数：

运行结果：

NaN：not a number;

实参和形参个数不匹配时：

1.实参个数小于形参：

未传入的实参相当于是undefined。

2.实参个数多于形参，多出来的实参抛弃不用；

3.arguments数组中存放所有传入的实参，利用该数组实现不同参数的相加

函数表达式：

对象：

            name:'蔡徐坤',
            age:25,
            height:180,
            sing:function(){
                console.log('鸡你太美！');
            },
            dance:function(){
                console.log('铁山靠！');
            }
        }

        console.log(student.age);
        console.log(student.name);
        console.log(student.height);
        student.sing();
        student.dance();

DOM api

1.选中页面元素

querySelector(CSS选择器)

示例代码：

    <div class="one">abc</div>
    <div id="two">def</div>
    <div>
        <span>
            <input type="text">aaa
        </span>
    </div>

    <script>
        let elem1 = document.querySelector('.one');
        console.log(elem1);

        let elem2 = document.querySelector('#two');
        console.log(elem2);

        let elem3 = document.querySelector('div>span>input');
        console.log(elem3);
    </script>
</body>

有同名元素时，默认选中第一个，使用querySelectorALL()选中同名的所有元素。

2.修改获取元素内容：

使用innerHTML就能拿到元素中的内容，然后对其进行修改。

对元素属性进行修改：

获取修改表单元素的内容：

显示和隐藏密码示例：

3.获取修改样式属性

1）修改内联样式，直接修改style的值

2）修改元素应用的CSS类名

4.新增元素

a)创建一个元素 createElement

b)把这个元素加入到dom树中，appendChild（尾插），insertBefore(头插)

5.删除元素

表白墙示例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            width: 600px;
            margin: 0 auto;
        }
        h1{
            margin-top: 10px;
            text-align: center;
        }
        p{
            margin: 10px 0;
            color: #666;
            text-align: center;
        }
        .row{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 40px;
        }
        .row span{
            align-items: center;
            width: 80px;
            
        }
        .row input{
            width: 200px;
            height: 30px;
        }
        button{
            color: white;
            background-color: orange;
            width: 280px;
            height: 34px;
            border: none;
            border-radius: 5px;
        }
        button:active{
            background-color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入内容后点击提交按钮，内容将显示在网页中</p>
        <div class="row">
            <span>谁：</span>
            <input type="text" class="input1">
        </div>
        <div class="row">
            <span>对谁：</span>
            <input type="text" class="input2">
        </div>
        <div class="row">
            <span>说什么：</span>
            <input type="text" class="input3">
        </div>
        <div class="row">
            <button id="submit">提交</button>
        </div>
        <div class="row">
            <button id="reverse">撤销</button>
        </div>
        
    </div>

    <script>
        let containerDiv = document.querySelector('.container');
        let button = document.querySelector('#submit');
        button.onclick = function(){
            //获取输入框的内容
            let inputs = document.querySelectorAll('input');
            let from = inputs[0].value;
            let to = inputs[1].value;
            let message = inputs[2].value;
            //输入框有一个为空直接结束
            if(from == '' || to == '' || message == ''){
                return;
            }
            //构造新输出
            let resultDiv = document.createElement('div');
            resultDiv.className = 'row message';
            resultDiv.innerHTML = from + ' 对 ' +  to + ' 说：' + message;
            containerDiv.appendChild(resultDiv);
            //清空输入框
            for(let elem of inputs){
                elem.value = '';
            }
        }

        //撤销
        let reverse = document.querySelector('#reverse');
        reverse.onclick = function(){
            let outputs = document.querySelectorAll('.message');
            containerDiv.removeChild(outputs[outputs.length - 1]);
        }
         
        
    </script>
</body>
</html>

JavaScript入门