week10_day04_JavaScript&&DOM

最新推荐文章于 2021-07-25 15:52:19 发布

-玫瑰少年-

最新推荐文章于 2021-07-25 15:52:19 发布

阅读量624

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/shihao1998/article/details/106698541

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1.JS
Js javascript es6 ECMAScript
前两个指的是语言，后两个指的是版本，就像说java和jdk一样

网页–人
Html -骨架
Css --皮肤和血肉
Js-思维逻辑

JavaScript : 和java没有关系

•JavaScript 是一种轻量级的编程语言。（java不是）
•JavaScript 是可插入 HTML 页面的编程代码。（css也可）
•JavaScript是一种弱类型语言。
•它的解释器被称为JavaScript引擎，为浏览器的一部分。有浏览器来解释JavaScript
•主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
•跨平台特性，在绝大多数浏览器的支持下。不是真正的跨平台，跨的是浏览器。
Java也不是真正的跨平台，跨的是虚拟机。

1.1怎么在html中引入js
1.1.1直接写在html页面中
并且我们习惯把js代码放在的尾部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

123

<script>
    alert("我太帅了")
</script>
</body>
</html>

1.1.2外部导入js文件
这样写的话一定要放在里面，而且一定要让标签闭合，

即 <script src="./js.js"></script>，
而不是 <script src="./js.js">
</script>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js.js"></script>
</head>

1.1.3打印和调试代码
•常用测试
•alert()
•console.log()

<script>
    var list = ['1','2','3']
    alert(list)
    // 打印日志
    console.log(list)  //或者console.info(list)
</script>

alert打印浏览器上方：
在这里插入图片描述
必须点击确定才能接着往下执行。
Console.log得按F12，在Console栏查看

而console.log不影响程序的主体运行的。
根据需要使用这两者。

•注释语句
•//
•/**/

注意:
如果你的页面,如果和显示的效果不一样, 一些代码运行不正常
要干什么
第一步就是打开浏览器的控制台, 看一下报了什么错误，哪怕你的js语句中没有console.log

1.2Js的类型
•声明一个变量
•JavaScript在声明时统一使用无类型（untyped）的“var”关键字
•var来声明一个变量,这是一个固定的写法，是js的语法。
•JavaScript并没有避开数据类型，它的数据类型是根据所赋值的类型来确定的。
•JavaScript 对大小写敏感
Html 不敏感
•变量名有命名规范：
•只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字
•如果重新声明 JavaScript 变量，该变量的值不会丢失
•在以下两条语句执行后，变量 carname 的值依然是 “Volvo”：
•var carname=“Volvo”;
•var carname;
•(let const)
•let 和 const 关键字是 ES6 的新语法，主要用来取代 var 来定义变量。ES6 出了这么一个简单的新语法其实足以说明JS有很多不好的地方，而其中之一就是变量声明。
•Let用于在代码块中声明一个变量
•Const表示只读，不可修改的，类似于java中的final

类型检测
typeof表示“某某的类型”
语法：
typeof 变量
instanceof表示"是某某类型”
Eg:
console.log(typeof b)

1.3事件和函数
我们可以通过事件和函数的对应关系
事件监听
函数执行
把html和js 关联起来

1.4核心对象
在讲页面是怎么产生的中，我们将从数据库中查出来的数据和已有的前端代码结合起来。
是怎么结合起来的呢？是通过js的dom操作结合起来的。用核心对象承载从数据库中查出来的数据。
1.4.1Number
•toString() 以字符串返回数值
•var ii = 123
•console.log(typeof ii)
•console.log(typeof ii.toString())
•toFixed() 返回字符串值，它包含了指定位数小数的数字(四舍五入)：
•var x = 9.6544;
•x.toFixed(2); // 返回 9.65
•toPrecision() 返回字符串值，它包含了指定长度的数字：
•var x = 9.656;
•x.toPrecision(); // 返回 9.656
•x.toPrecision(2); // 返回 9.7
•MAX_VALUE 返回 JavaScript 中的最大数字。
•var x = Number.MAX_VALUE;
•MIN_VALUE 返回 JavaScript 中的最小数字。
•var x = Number.MIN_VALUE;

•parseInt() 方法
•允许空格。只返回首个数字：
•parseInt(“10”); // 返回 10
•parseInt(“10.33”); // 返回 10
•parseInt(“10 20 30”); // 返回 10
•parseInt(“10 years”); // 返回 10
•parseInt(“years 10”); // 返回 NaN
• parseFloat() 方法。
•允许空格。只返回首个数字：
•parseFloat(“10”); // 返回 10
•parseFloat(“10.33”); // 返回 10.33
•parseFloat(“10 20 30”); // 返回 10
•parseFloat(“10 years”); // 返回 10
•parseFloat(“years 10”); // 返回 NaN

1.4.2string
•length 属性返回字符串的长度
•var txt = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
•var sln = txt.length;
•indexOf()方法返回字符串中指定文本首次出现的索引（位置）：
•var str = “The full name of China is the People’s Republic of China.”;
•var pos = str.indexOf(“China”);
•var pos = str.indexOf(“China”, 28);
•indexOf() 不存在返回 -1。
•slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
•var str = “Apple, Banana, Mango”;
•var res = str.slice(7,13);//裁剪字符串中位置 7 到位置 13 的片段
•split() 将字符串转换为数组
•var txt = “a,b,c,d,e”; // 字符串
•txt.split(","); // 用逗号分隔
•txt.split(" “); // 用空格分隔
•txt.split(”|"); // 用竖线分隔
•如果分隔符是 “”，被返回的数组将是间隔单个字符的数组：

1.4.3Array
•toString() 返回数组转换的数组值（逗号分隔）的字符串。
•var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
•alert(fruits.toString()); //Banana,Orange,Apple,Mango
•pop() 方法从数组中删除最后一个元素,返回删除的元素
•fruits.pop(); // 从 fruits 删除最后一个元素（“Mango”）
•var x = fruits.pop(); // x 的值是 “Mango”
•push() 方法（在数组结尾处）向数组添加一个新的元素,返回数组长度
•fruits.push(“Kiwi”); // 向 fruits 添加一个新元素
•splice() 方法可用于向数组添加新项, 返回([])
•fruits.splice(2, 0, “Lemon”, “Kiwi”);
•// 第一个参数:添加新元素的起始位置。第二个参数:定义应删除多少元素。
•// 其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
•sort() 方法以字母顺序对数组进行排序,返回值和原数组是经过排序的数组
•fruits.sort(); // 对 fruits 中的元素进行排序
•reverse() 方法反转数组中的元素。返回值和原数组都变为经过反转数组
•fruits. reverse(); // 对 fruits 中的元素进行排序

1.4.4数学对象Math
•Math.ceil(x)返回大于等于x的最小整数
•Math.floor(x)返回小于等于x的最大整数
•Math.random() 返回 0 ~ 1 之间的随机数
•Math.round(x) 把一个数四舍五入为最接近的整数。
•Math.max(x,y,z,…,n) 返回最高值
•Math.min(x,y,z,…,n) 返回最低值

作业： 1.实现一个随机点名,弹出名字页面(如图3) ![请添加图片描述](https://img-blog.csdnimg.cn/2020061122324824.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWhhbzE5OTg=,size_16,color_FFFFFF,t_70)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Homework1</title>
    <meta charset="UTF-8">
</head>
<body>

<button onclick="click1()">按钮</button>

<script>
    var list = ["宋江", "李逵", "吴用", "杨志", "武松", "鲁智深", "林冲", "王英", "关胜", "秦明", "呼延灼", "史进", "科比", "韦德", "詹姆斯", "罗斯", "浓眉", "JR", "哈斯勒姆", "斯波", "纳什"]

    function click1() {
        var num = Math.floor(Math.random() * list.length)
        if (list.length < 1) {
            alert("所有同学都中过奖了")
            return
        }
        alert("今天中奖的同学是：" + list[num])
        list.splice(num, 1)
    }
</script>

</body>
</html>

2.实现如图2所示的汇率换算页面(仅要求样子)

请添加图片描述
首先。大致应该分几块内容？
2块
上一块是行级元素
下一块是table

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Homework2</title>
    <meta charset="UTF-8">
    <style>
        select, button {
            height: 30px;
        }

        input {
            height: 20px;
        }

        .div1 {
            margin-bottom: 5px;
        }

        td {
            width: 200px;
            height: 30px;
            text-align: center;
        }

        /*属性选择器*/
        [colspan] {
            background: red;
        }

        .div2 {
            width: 600px;
            margin: 0 auto;
        }

        .div3 {
            width: 700px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="div2">
    <div clas="div1">
        <select>
            <option>123</option>
            <option>456</option>
        </select>

        <button>互换</button>

        <select>
            <option>123</option>
            <option>456</option>
        </select>

        数额:
        <input>

        <button>按汇率换算</button>
    </div>
</div>

<div class="div3">
    <table border="1px">
        <tr>
            <td colspan="3">按当前汇率兑换结果</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    </table>
</div>


</body>
</html>

工作中其实很少写css、html的，更多用到的是js，也就是怎么把“互换”和“数额”中的数据传送到前端，怎么把数据库中的数据传到前端。

2DOM
文档对象模型 (浏览器拿到一份html代码之后, 到最终显示的过程, 叫dom解析)

从代码中抽象出一种逻辑关系-- dom结构 (对象引用关系)

代码--------不是直接关联的--------显示

代码- dom结构(对象引用关系结构)(实际上是对象)---- 页面显示
代码是死的，对象是活的。

2.1Dom Tree
•文档对象模型(document object model )。
在这里插入图片描述
•HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：DOM Tree

2.2Dom的加载顺序
就是一个页面从代码开始,一直到最终显示的过程

我们什么时候拿到代码的? 请求服务器服务器返回的html页面

•解析HTML结构(从上向下的过程)。
•加载外部脚本和样式表文件。(加载外部文件)（如导入的js文件、css文件）
•解析并执行脚本代码。(解析外部文件)
•构造HTML DOM模型。 (dom模型结构-- 构建对象引用的关系)

当dom结构的对象关系构建完成, 那么就已经可以在页面上显示了
在这里插入图片描述
•加载图片等外部文件。
•页面加载完毕。

这些对象是实实在在存在的，有在内存中开辟空间的

假如body下还有个div，div中有内容。我们把body到div的关系剪断，就不显示这个div了。就像某网页的广告信息，点击x就不显示，就是这个原理。这样就可以动态的加载和显示不同的内容
2.3节点
•dom树中的节点彼此拥有层级关系
•父、子和同胞(兄弟或姐妹）专指元素节点。
•在节点树中，顶端节点被称为根（root）
•每个节点都有父节点、除了根（它没有父节点）
•一个节点可拥有任意数量的子节点
•同胞是拥有相同父节点的节点
•整个文档是一个文档节点
•每个 HTML 元素是元素节点。如div、title、a、meta
•HTML 元素内的文本是文本节点
•每个 HTML 属性是属性节点。如：lang、charset
•注释是注释节点

2.4操作引用关系
2.4.1第一步: 获得节点
•获得节点的常用方法
•getElementById(): 固定id对应的节点
•var div1 = document.getElementById(‘div1’)
•getElementsByName(): 获得节点数组, 根据name属性
•var div2 = document.getElementsByName(‘div2’)
•数组
•getElementsByTagName(): 获得节点数组, 根据标签名
•var div3 = document.getElementsByTagName(‘div’)
用身份证来类比的话，id表示身份证号，name表示姓名，标签表示性别、年龄等这些属性

获取结点的目的是改变这个结点的内容，即改变某块显示的页面

2.4.2添加一个节点
AppendChild(): 添加子节点

2.4.3删除一个节点
RemoveChild(): 删除一个子节点

2.4.4替换一个节点
ReplaceChild() : 替换一个节点

2.5Inner
•innerText&innerHTML
2.5.1innerText
改变一个节点的内部文本
var div1 = document.getElementById(‘div1’)
div1.innerText = ‘123’
2.5.2innerHTML
也是向一个节点中插入内容, 但是可以插入html代码(html代码在这个插入过程中是可以解析的)

3重点
3.1Js
整体作为了解()
核心就是核心对象

3.2Dom
3.2.1理解dom思想
为什么要产生dom这个东西
3.2.2会dom操作(增删改)

作业：

实现注册页面(看不清换一张和验证验证码)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Homework1</title>
</head>
<body>

<table cellspacing="10">
    <tr>
        <td>注册邮箱:</td>
        <td><input></td>
    </tr>
    <tr>
        <td></td>
        <td>你还可以使用手机号注册</td>
    </tr>
    <tr>
        <td>创建密码:</td>
        <td><input></td>
    </tr>
    <tr>
        <td>真实姓名:</td>
        <td><input></td>
    </tr>
    <tr>
        <td align="right">性别:</td>
        <td>
            <input type="radio" value="1" name="aaa">男
            <input type="radio" value="2" name="aaa">女
        </td>
    </tr>
    <tr>
        <td align="right">生日:</td>
        <td>
            <select>
                <option>2000</option>
                <option>2001</option>
                <option>2002</option>
            </select>年

            <select>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
            </select>月

            <select>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>13</option>
                <option>14</option>
                <option>15</option>
                <option>16</option>
                <option>17</option>
                <option>18</option>
                <option>19</option>
                <option>20</option>
                <option>21</option>
                <option>22</option>
                <option>23</option>
                <option>24</option>
                <option>25</option>
                <option>26</option>
                <option>27</option>
                <option>28</option>
                <option>29</option>
                <option>30</option>
            </select>日
        </td>
    </tr>
    <tr>
        <td align="right">我正在:</td>
        <td>
            <select>
                <option>学习</option>
                <option>打球</option>
                <option>跑步</option>
            </select>
        </td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <img id='img1' src="./verycode.gif"><span onclick="changeImg()">看不清换一张？</span>
        </td>
    </tr>
    <tr>
        <td align="right">验证码:</td>
        <td><input id="inputStr"></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <img id='img2' src="btn_reg.gif" onclick="onclick1()">
        </td>
    </tr>
</table>

<script>
    //js有二维数组，但不常用。在前端对数据的操作不要过于复杂
    //得有比较字符串，比较输入的和图片对应的字符串是否相等
    //用两个数组，一个存图片的路径，一个存图片对应的字符串
    var listUrl = ['1111.png', '1234.png', '2222.png', '3333.png', '4567.png']
    var listNum = [1111, 1234, 2222, 3333, 4567]

    //或者可以在一个数组中存储对象
    // var listObj = [
    //     {
    //         url: '1111.png',
    //         code: 1111
    //     }
    // ]

    //记录上一次的图片的下标
    var midTag = -1

    //更换图片
    function changeImg() {
        //应当操作结点，才能改变HTML中已有的内容
        //获取结点
        var img1 = document.getElementById('img1')

        //判断上一次的tag和这次随机生成的tag是否一致，一致的话就跳出循环
        while (true) {
            var tag = Math.floor(Math.random() * listUrl.length)
            if (tag != midTag) {
                midTag = tag
                break
            }
        }

        img1.src = listUrl[midTag]
    }

    function onclick1() {
        var inputStr = document.getElementById('inputStr')

        if (midTag == -1) {
            if (inputStr.value == 'bnksu') {
                alert("验证码正确！")
            } else {
                alert("验证码错误！")
            }
            return
        }

        var str = listNum[midTag]
        if (str == inputStr.value) {
            alert("验证码正确！")
        } else {
            alert("验证码错误！");
        }
    }


</script>
</body>
</html>

实现汇率换算页面(点击互换和汇率换算)

分析：应当存一个中间变量（美元），实现所有货币和美元之间的兑换关系。如人民币兑换欧元，先算出人民币兑换多少美元，再算出美元兑换多少欧元。

先写一个数组，存储所有货币和美元的兑换关系。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Homework2</title>
    <style>
        select, button {
            height: 30px;
        }

        input {
            height: 20px;
        }

        .div1 {
            margin-bottom: 5px;
        }

        td {
            width: 200px;
            height: 30px;
            text-align: center;
        }

        /*属性选择器*/
        [colspan] {
            background: red;
        }

        .div2 {
            width: 600px;
            margin: 0 auto;
        }

        .div3 {
            width: 700px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="div2">
    <div clas="div1">
        <select id="select1" onchange="onclick1()">
            <option value="1">美元</option>
            <option value="2">人民币</option>
            <option value="3">欧元</option>
            <option value="4">日元</option>
            <option value="5">韩元</option>
            <option value="6">港元</option>
        </select>

        <button onclick="change1()">互换</button>

        <select id="select2" onchange="onclick1()">
            <option value="1">美元</option>
            <option value="2">人民币</option>
            <option value="3">欧元</option>
            <option value="4">日元</option>
            <option value="5">韩元</option>
            <option value="6">港元</option>
        </select>

        数额:
        <input id="inputStr">

        <button onclick="onclick1()">按汇率换算</button>
    </div>
</div>

<div class="div3">
    <table border="1px">
        <tr>
            <td colspan="3">按当前汇率兑换结果</td>
        </tr>
        <tr>
            <td id="td11">美元</td>
            <td>汇率</td>
            <td id="td13">人民币</td>
        </tr>
        <tr>
            <td id="td21">null</td>
            <td id="td22">null</td>
            <td id="td23">null</td>
        </tr>
    </table>
</div>

<script>
    var listMoney = ['美元', '人民币', '欧元', '日元', '韩元', '港元']
    var ListRate = [1, 7, 0.9, 100, 1000, 8]

    function change1() {
        //可以通过交换两个DOM结点的value值实现互换
        var select1 = document.getElementById('select1')
        var select2 = document.getElementById('select2')
        console.log(select1.value)
        console.log(select2.value)

        var mid = select1.value
        select1.value = select2.value
        select2.value = mid
    }

    function onclick1() {
        var inputStr = document.getElementById('inputStr')
        if (isNaN(inputStr.value)){
            alert("请输入数字！")
            return
        }
        var select1 = document.getElementById('select1')
        var select2 = document.getElementById('select2')

        //求利率和兑换金额
        var rate = ListRate[select2.value - 1] / ListRate[select1.value - 1]
        var money = inputStr.value * rate

        //更新表中数据
        document.getElementById('td11').innerText = listMoney[select1.value - 1]
        document.getElementById('td13').innerText = listMoney[select2.value - 1]
        //如果输入的是空串，数值这一行置为空
        if (inputStr.value==''){
            document.getElementById('td21').innerText = null
            document.getElementById('td22').innerText = null
            document.getElementById('td23').innerText = null
        } else {
            //否则的话则表示是点击按汇率计算的button触发的本事件
            document.getElementById('td21').innerText = inputStr.value
            document.getElementById('td22').innerText = rate
            document.getElementById('td23').innerText = money
        }
    }

</script>

</body>
</html>