JavaScript是什么

JavaScript是一种运行在客户端(浏览器)的编程语言，用来给网页添加动态功能。

JavaScript的作用

最初目的

为了处理表单的验证操作

现在广泛的应用场景

网页特效
服务段开发(Node.js)
命令行工具(Node.js)
桌面程序(Electorn)
APP(Cordova)
游戏开发

JavaScript和Html、CSS的区别

HTML：提供网页的结构和内容

CSS：修饰和美化内容

JavaScript：控制页面内容，增加页面动态效果

JavaScript的书写位置

JavaScript书写位置和CSS类似(行内样式，嵌入式样式，外部样式)

1、写在行内：

<input type="button" value="按钮" onclick="alert('Hello World')" />

2、写在script标签中

<head>
    <script>
        alter('Hello Wolrd!');
    </script>
</head>

3、写在js文件中，在页面引用

<script src="main.js"></script>

注意：引入外部js文件的script标签中，不可以写javascript代码，在</body>标签之前，css在head引入，js文件在底部引入。

综合示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--行内js-->
    <button onclick="alert('别点我')">这是一个按钮</button><br />
    <hr />
    <button id="mybn2">这是第二个按钮</button>
    <hr />
    <button id="mybn3">这是第3个按钮</button>

    <script>
        //内部标签写法
        document.getElementById("mybn2").onclick=function(){
            alert('111111111111111111111111111111');
        };
    </script>
    <!-- 外部js文件引入 -->
    <script src="main.js"></script>
</body>
</html>

注意：

上面的代码要在同一级目录创建main.js文件内容如下：

document.getElementById('mybn3').onclick=function(){
    alert('3333333333333333333333333')
}

JavaScript基本语法

1、变量的定义

在js中使用var关键字定义变量

1.1变量的语法

var age = 18
var userName = lili

1.2 同时声明多个变量

var age,name,sex;
age = 18;

1.3 同时声明多个变量并赋值

var age = 23,name='shell';

DOM

学习DOM就可以使用JavaScript进行控制页面(样式，元素属性，隐藏显示等)

1、什么是DOM

DOM是浏览器对象模型，这是由浏览器生成的一个树形结构，使编程语言可以很容易的访问html结构。

在DOM中可以通过document获取整个页面。

2、获取页面元素

getElementById() 根据id获取元素
getElementsByTagName() 根据标签名称，获取元素(集合)
querySelector() 使用选择器获取元素，只返回第一个匹配的元素
querySelectorAll() 使用选择器获取元素，返回所有匹配的元素(集合)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div>

        <p id="p1"><span>这是1段文字</span> Lorem ipsum dolor sit

    consectetur adipisicing elit. Vero ducimus eveniet pariatur incidunt dolorem rem minima quo nemo quasi beatae similique maiores aliquam culpa quas,

    reprehenderit iusto doloremque error cum.

    </p>

    <p><span>这是2段文字</span> Lorem ipsum dolor sit

    consectetur adipisicing elit. Vero ducimus eveniet pariatur incidunt dolorem rem minima quo nemo quasi beatae similique maiores aliquam culpa quas,

    reprehenderit iusto doloremque error cum.

    </p>

    <p><span>这是3段文字</span> Lorem ipsum dolor sit

    consectetur adipisicing elit. Vero ducimus eveniet pariatur incidunt dolorem rem minima quo nemo quasi beatae similique maiores aliquam culpa quas,

    reprehenderit iusto doloremque error cum.

    </p>

    </div>

    <script>

        // 通过id获取元素

        var mytag = document.getElementById('p1');

        console.log(mytag);

        // 通过标签名称获取标签名称

        console.log(document.getElementsByTagName('span'));

        // 使用选择器获取元素

        console.log(document.querySelector('div'));

    </script>

</body>

</html>

3、设置元素属性

获取到元素，可以设置元素对应的树形，改变页面的效果。

HTML 中标签的属性一般对应 DOM 中元素的属性，DOM 中元素的属性，例如：

title、src、id 等

通过元素的 innerHTML 属性可以设置标签之间的内容

通过 innerHTML 动态生成列表

表单元素的属性

value、checked、selected、disabled
遍历文本框给所有文本框赋值
获取下拉框中的选项，设置下拉框中显示的项
禁用按钮

案例：

1、使用js动态生成列表

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    .list {

        list-style-type: none;

    }

    </style>

</head>

<body>

    <script>

        var mylist = '<ul class="list"><li>1111111111111111111111</li><li>2222222222222222222222</li><li>3333333333333333333333</li><li>4444444444444444444444</li><li>5555555555555555555555</li></ul>'

    //  获取动态数据

    var data = ['linux','centos','readhat','devops','haha','hahaha','hahahahaha'];

    // 组合模版

    var dataList = '<ul class="list">';

    // 循环遍历数组生成li标签

    for (index = 0; index < data.length; index++) {

       dataList += '<li>'+ data[index] +'</li>';

    }

    dataList += '</ul>';

    console.log(dataList);

    // 通过js插入数据

    // document.write(mylist);

    // 带标签

    document.querySelector('body').innerHTML = dataList;

    // 便签当做文本输出

    // document.querySelector('body').innerText = dataList;

    </script>

</body>

</html>

2、操作表单，获取表单相关值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <form action="" method="GET">

        <!-- 表单控件-->

        <table>

            <tr>

                <td>姓名：<input type="text" name="usename" value="devops"></td>

            </tr>

            <tr>

                <td>

                    <!--下拉菜单实现-->

                    学历：

                    <select name="education">

                        <!-- <option value="">==请选择==</option>-->

                        <option value="1">初中</option>

                        <option value="2">高中</option>

                        <option value="3" selected="selected">专科</option>

                        <option value="4">本科</option>

                        <option value="5">研究生</option>

                        <option value="6">博士生</option>

                    </select>

                </td>

            </tr>

            <tr>

                <td>

                    <!-- <label for="male">Male</label>

<input type="radio" name="sex" id="male" value="male">-->

                    性别：

                    <input type="radio" name="sex" id="male"><label for="male">男</label>

                    <input type="radio" name="sex"id="male1"><label for="male1">女</label>

                    <input type="radio" name="sex"id="male2"><label for="male2">保密</label>

                </td>

            </tr>

            <tr>

                <td>

                    年薪：

                    <input type="password">

                </td>

            </tr>

            <tr>

                <td>给自己打个标签

                    <input type="checkbox" name="mytag" id="tag1"><label for="tag1">社会精英</label>

                    <input type="checkbox"name="mytag" id="tag2"><label for="tag2">一般青年</label>

                    <input type="checkbox"name="mytag" id="tag3"><label for="tag3">年薪百万</label>

                </td>

            </tr>

             <tr>

                 <td><input type="submit"value="注册"></td>

                 <td><input type="reset"value="重置"></td>

             </tr> 

             <tr>

                 <td>

                     <textarea cols="30" rows="10">

                         文本内容

                     </textarea>

                 </td>

             </tr>

        </table>

    </form>

    <script>

    // 表单赋值

        console.log(document.querySelector('input').value='sa');

    // 单选按钮选中

        console.log(document.querySelector('#male').checked='checked');

    // 下拉菜单选中

        console.log(document.querySelector('option').selected='selected');

    // 禁用按钮

        console.log(document.querySelector('#submit').disabled='disabled');

    </script>

</body>

</html>

4、注册事件

DOM中的事件机制，可以实现一些常规操作。比如：点击按钮，按下键盘等的响应。

语法：

element.onclick = function () {

  alert('hello world');

};

常用事件：

Html事件的例子：

当用户点击鼠标时
当完孤儿已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交HTML表单时
当用户触发按键时

案例：实现按钮的点击事件，取消a标签调转。

//按钮的点击事件

document.querySelector('button').onclick = function(){

           alert('绑定并执行了点击事件');

    }

//取消a标签的默认跳转

document.querySelector('a').onclick = function(){

           return false;

    }

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <button id='bt1'>这是button1</button>

    <script>

    document.querySelector('#bt1').onclick=function() {

        alert(this.innerHTML);

    }

    document.querySelector('#bt1').onclick=function() {

        console.log('你碰到我了')

    }

    </script>

</body>

</html>

5、改变元素的样式

5.1 改变行内样式

element.style.color = 'red';

5.2 改变类样式

element.className = 'active';

巴特西

Django_JavaScript