Java学习 day04_JS&DOM

2021/7/25 17:07:51

编程Tag： js value Dom var Java getElementById document str optionNode

本文主要是介绍Java学习 day04_JS&DOM，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1 JavaScript

Js: JavaScript
HTML
CSS

1.1 特点

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

轻量级: html css js
重量级: Java C++
区分轻量级和重量级主要看语言的生态

弱类型: 类型限制不严格(字面意思)

1.2 怎么在HTML中导入JS

1.2.1 直接写在HTML页面内部

写在html页面内部, 用script标签包裹js代码

1.2.2 引入外部的js文件

用Script导入外部文件
以前: 要求写在head标签的里面
现在: 不这么要求
在这里插入图片描述

1.3 Var

JavaScript在声明时统一使用无类型（untyped）的“var”关键字
var来声明一个变量,这是一个固定的写法，是js的语法。
JavaScript并没有避开数据类型，它的数据类型是根据所赋值的类型来确定的。 JavaScript 对大小写敏感变量名有命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字

ECMAScript 是 javascript的版本
ECMAScript 6 – > Es6
Es6: 2015 的js版本
Es6之前: 只有Var关键字
Es6之后: 新加了一些, let:用于局部作用域 const: 一旦定义不可修改

1.4 Js的类型

String var str=‘123s’;
 Number var x1=34.00; //使用小数点来写 
 var x2=34; //不使用小数点来写 在js中只要是个数，那么就是数值型的，无论整浮、无论大小、无论正负，都是number类型的 
 Boolean var x=true 
 var y=false 
 数组 var cars=new Array(); 
 cars[0]="Audi"; 
 var cars=new Array("Audi","BMW","Volvo"); 
 var cars=["Audi","BMW","Volvo"];
  对象 var person={    firstname:"Bill",     lastname:"Gates",    id:5566}; 
  获取参数 name=person.lastname; 
  name=person["lastname"]; 
  添加参数并赋值 person.aaa = 'aaaa’

// 注意: 
var person={firstname:"Bill", lastname:"Gates", id:5566}; 
var b = person 
b.lastname = 'b' 
console.log(b)      // 结果: lastname为b 
console.log(person) // 结果: lastname为b 
//说明引用也适用

1.5 函数和事件

HTML: 主要特点, 通过标签的嵌套来描述页面的层级结构
CSS: 通过样式, 描述HTML标签所具有的不同显示效果
Js: 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

1.6 运算符

运算符 +,-,*,/,%,++,-- =, +=, -=, *=, /=, %= 注意: 加法: 20+10+'20’ 减法 ‘30’-‘10’

!=, > , <, >=, <=, ? 三元 && , ||, !

注意: == 值相等 === 值相等并且类型相等 !== 值不相等或类型不相等

1.7 分支/循环语句

If:
// 有些值在分支语句中, 是表现为假: 0, 空串, 空对象, null, NaN, false

1.7.1 For

在js中, 一般我们使用普通的for循环 (fori) 遍历数组
在js中, 一般我们使用foreach循环遍历对象

2 Js的核心对象

2.1 Number

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
parseFloat() 方法。允许空格。
只返回首个数字：
parseFloat(“10.33”); // 返回 10.33

2.2 String

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(”|"); // 用竖线分隔如果分隔符是 “”，被返回的数组将是间隔单个字符的数组：

2.3 Array

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 中的元素进行排序 r
everse() 方法反转数组中的元素。返回值和原数组都变为经过反转数组 fruits. reverse(); // 对 fruits 中的元素进行排序

2.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) 返回最低值

我们讲了Js基础中的基础语法

Js高级语法
Es6语法

Js方向,

Js: 现在不要瞎搞
后端开发 --> node
前端 --> vue, react, Angular
手机app --> flutter week reactnative
Pc --> electron
小程序 --> 原生开发, uni-app多端开发

3 DOM

DOM: js一个分支

文档对象模型(document object model )。
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：DOM Tree

3.1 Dom的概念

dom树中的节点彼此拥有层级关系(由节点构成)
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点注释是注释节点
在节点树中，顶端节点被称为根（root）每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子节点父、子和同胞(兄弟或姐妹）节点。
同胞是拥有相同父节点的结点

3.2 DOM的解析顺序:

1, 一个页面是怎么获得的?
A, 浏览器根据url(超链接/ 手输/ form表单)发起请求, 域名–>ip
B, 根据这个ip找到对应服务器, (80 443)
C, 服务器接收请求, 分析请求, 获取数据(数据库), 找到对应的前端文件,
把数据整理, 把整理好的数据放到前端文件里面 --> 带数据的前端文件(html css js相关代码)
D, 服务器把带数据的页面, 返回给浏览器
E, 浏览器拿到页面代码 , 解析

如果浏览器拿到一份HTML代码, 解析过程如下
解析HTML结构(从上向下的过程)。开始构造HTML DOM模型
在解析的过程中(代码一句一句读取), 加载外部脚本和样式表文件。(因为这个html页面可能依赖于外部的js,css 文件, 异步发网络请求获取这个外部文件)
加载外部脚本成功, 解析并执行脚本代码。
构造HTML DOM模型—完成。 --> 只要dom模型构建完成, 页面就开始显示了

加载图片等外部文件。页面加载完毕。

3.3 获得Dom上的节点

getElementById()
getElementsByName()
getElementsByTagName() // 通过标签名来获得节点

3.4 给Dom添加结点:

appendChild

<body>
<ul id="ul1">
    <li>John</li>
    <li>Aray</li>
    <li>Sansa</li>
</ul>
    <input id="inputStr">
    <button onclick="addli()">点击</button>

    <script>
        function addli() {
            var inputNode = document.getElementById("inputStr");
            var ulNode = document.getElementById("ul1");
            var textNode = document.createTextNode(inputNode.value)

            var liNode = document.createElement("li")
            liNode.append(textNode)

            ulNode.append(liNode)

            inputNode.value = ""
        }
    </script>

</body>

3.5 删除结点

removeChild

<body>
<!-- 在html中 连续的空格和换行 都代表一个空格 -->
<ul id="ul1"><li>John</li><li>Aray</li><li>Sansa</li>
</ul>

<input id="inputStr">
<button onclick="deleteli()">点击</button>

<script>
    function deleteli() {
        var inputNode = document.getElementById("inputStr")
        var index = inputNode.value // 要删除节点的下标
        console.log(index)

        var ulNode = document.getElementById("ul1")

        // 获得所有的ulNode的孩子
        var childNode = ulNode.childNodes;

        ulNode.removeChild(childNode[index-1])
    }
</script>

</body>

3.6 替换节点

replaceChild

<body>
<ul id="ul1"><li>John</li><li>Aray</li><li>Sansa</li>
</ul>

<input id="inputTag">
<input id="inputStr">
<button onclick="changeNode()">点击</button>
<script>
    function changeNode() {
        var inputNode1 = document.getElementById("inputTag")
        var index = inputNode1.value
        var inputNode2 = document.getElementById("inputStr")
        var content = inputNode2.value

        if (!parseInt(index)){
            alert("非数字下标")
            return
        }

        var ulNode = document.getElementById("ul1")

        var childNodes = ulNode.childNodes;

        if (index >= childNodes.length){
            alert("下标错误")
            return
        }

        // 找到要替换的li结点
        var li = childNodes[index-1]

        // 文本节点
        var newNode = document.createTextNode(content)

        // 给li结点替换孩子
        // 第一个参数: 新结点
        // 第二个参数: 旧结点
        // li.replaceChild(newNode, li.childNodes[0])
        
        // 可以不用replace，直接改变文本内容也可以实现
        li.innerText = content

        inputNode1.value = ""
        inputNode2.value = ""

    }
</script>

</body>

3.7 Inner

innerText&innerHTML

作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sign in</title>
</head>
<body>
<!-- cellspacing : 单元格之间的空隙
cellpadding：到边框到空隙-->
<table cellspacing="10">
    <tr>
        <td>注册邮箱: </td>
        <td><input></td>
    </tr>

    <tr>
        <td></td>
        <td>你还可以手机注册</td>
    </tr>

    <tr>
        <td>创建密码: </td>
        <td><input type="password"></td>
    </tr>

    <tr>
        <td>真实姓名: </td>
        <td><input></td>
    </tr>

    <tr>
        <td align="right">性别: </td>
        <td>
            <input type="radio" name="gender">男
            <input type="radio" name="gender">女

        </td>
    </tr>

    <tr>
        <td align="right">生日: </td>
        <td>
            <select id="year" onchange="getdate()">
            </select>年

            <select id="month" onchange="getdate()">
            </select>月

            <select id="day" onchange="getdate()">
            </select>日

        </td>
    </tr>


    <tr>
        <td align="right">我正在: </td>
        <td>
            <select>
                <option>睡觉</option>
                <option>学习</option>
                <option>打游戏</option>
                <option>拯救世界</option>
                <option>变成光</option>
            </select>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <img id="img1" src="verycode.gif" width="150px" height="60px">
            &nbsp;
            <span onclick="changeImg()">看不清楚,换一张</span>
        </td>
    </tr>

    <tr>
        <td>验证码: </td>
        <td><input id = "input1"></td>
    </tr>

    <tr>
        <td></td>
        <td>
            <img src="btn_reg.gif" onclick="verify()" width="180px" height="40px">
        </td>
    </tr>

    <script>
        initdate()
        function initdate(){
            var yearNode = document.getElementById("year");
            for (var i = 2021; i >= 1900 ; i--) {
                //创建option标签
                var optionNode = document.createElement("option")
                optionNode.appendChild(document.createTextNode(i))
                yearNode.appendChild(optionNode)
            }

            var monthNode = document.getElementById("month")
            for (var i = 1; i <= 12; i++) {
                var  str = ""
                if (i < 10){
                    str = "0" + i
                }else {
                    str = i
                }
                // 创建一个option标签
                var optionNode = document.createElement("option")
                optionNode.appendChild(document.createTextNode(str))
                monthNode.appendChild(optionNode)
            }


            var dayNode = document.getElementById("day")
            for (var i = 1; i <= 31; i++) {
                var  str = ""
                if (i < 10){
                    str = "0" + i
                }else {
                    str = i
                }
                // 创建一个option标签
                var optionNode = document.createElement("option")
                optionNode.appendChild(document.createTextNode(str))
                dayNode.appendChild(optionNode)
            }
        }

        function getdate() {
            var year = document.getElementById("year").value
            var m = document.getElementById("month").value
            if (m == "01" || m == "03" || m == "05" || m == "07" || m == "08" || m == "10" || m == "12") {
                // 31天
                var dayNode = document.getElementById("day")
                //先清空
                dayNode.innerText = ""
                for (var i = 1; i <= 31; i++) {
                    var str = ""
                    if (i < 10) {
                        str = "0" + i
                    } else {
                        str = i
                    }
                    // 创建一个option标签
                    var optionNode = document.createElement("option")
                    optionNode.appendChild(document.createTextNode(str))
                    dayNode.appendChild(optionNode)
                }
            } else if (m == "04" || m == "06" || m == "09" || m == "11") {
                // 30天
                var dayNode = document.getElementById("day")
                dayNode.innerText = ""
                for (var i = 1; i <= 30; i++) {
                    var str = ""
                    if (i < 10) {
                        str = "0" + i
                    } else {
                        str = i
                    }
                    // 创建一个option标签
                    var optionNode = document.createElement("option")
                    optionNode.appendChild(document.createTextNode(str))
                    dayNode.appendChild(optionNode)
                }

            } else {
                //2月份的情况
                if (year % 4 == 0 && year % 100 != 0 || year % 400==0) {
                    var dayNode = document.getElementById("day")
                    dayNode.innerText = ""
                    for (var i = 1; i <= 29; i++) {
                        var str = ""
                        if (i < 10) {
                            str = "0" + i
                        } else {
                            str = i
                        }
                        // 创建一个option标签
                        var optionNode = document.createElement("option")
                        optionNode.appendChild(document.createTextNode(str))
                        dayNode.appendChild(optionNode)
                    }

                } else {
                    var dayNode = document.getElementById("day")
                    dayNode.innerText = ""
                    for (var i = 1; i <= 28; i++) {
                        var str = ""
                        if (i < 10) {
                            str = "0" + i
                        } else {
                            str = i
                        }
                        // 创建一个option标签
                        var optionNode = document.createElement("option")
                        optionNode.appendChild(document.createTextNode(str))
                        dayNode.appendChild(optionNode)
                    }
                }
            }

        }



        var imgs = ["1111.png", "1234.png", "2222.png", "3333.png", "4567.png"]

        var code = [ "1111", "1234", "2222", "3333", "4567"]

        var origin = -1;
        function changeImg() {
            var imgNode = document.getElementById("img1")

            while (true){

                var index = Math.floor(Math.random()*imgs.length);
                var getImg = imgs[index]

                if(origin != index) {
                    origin = index;
                    break;
                }

            }
            imgNode.src = getImg


        }

        function verify() {

            var inputCode = document.getElementById("input1")
        
            if(origin == -1){
                if (inputstr ==  "BnKsU"){
                    alert("验证码正确")
                }else {
                    alert("验证码错误")
                }
                return
            }

            if(inputCode.value == code[origin]){
                alert("验证成功！")

            }else {
                alert("验证失败")
            }

        }

    </script>

</table>

</body>
</html>

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

        .cell1{
            text-align: center;
        }

        .div1{
            margin-left: 300px;
            margin-bottom: 3px;
        }

        .div2{
            margin-left: 300px;
        }

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

        select, button{
            height: 30px;
        }




    </style>
</head>
<body>


<div class="div1">
    <select id="select1" onchange="display()">
        <option>美元</option>
        <option>欧元</option>
        <option>日元</option>
        <option>港元</option>
        <option>韩元</option>
        <option>比特币</option>
    </select>
    <button onclick="exchange()">互换</button>

    <select id="select2" onchange="display()">
        <option>美元</option>
        <option>欧元</option>
        <option>日元</option>
        <option>港元</option>
        <option>韩元</option>
        <option>比特币</option>
    </select>
    数额:
    <input width="170px" id="mount">
    <button onclick="calculate()">汇率转换</button>

</div>

<div  class="div2">
    <table class="table" border="1px">
        <tr>
            <td class="cell1"  bgcolor="red" colspan="3">
                按当前汇率兑换结果
            </td>
        </tr>
        <tr>
            <td id="currency1"></td>
            <td>汇率</td>
            <td id="currency2"></td>

        </tr>

        <tr>
            <td id="td1"></td>
            <td id="td2"></td>
            <td id="td3"></td>
        </tr>

    </table>
</div>

<script>
    var listRate = [1, 0.9, 100, 8, 1000, 0.000016]
    var listMoney = ['美元', '欧元', '日元', '港元', '韩元', '比特币']

    function exchange() {
        var currency1 = document.getElementById("select1")
        var tmp = currency1.value
        var currency2 = document.getElementById("select2")
        currency1.value = currency2.value
        currency2.value = tmp

    }


    function display() {
        var currency1 = document.getElementById("select1")
        var name1 = currency1.value
        var currency2 = document.getElementById("select2")
        var name2 = currency2.value
        document.getElementById("currency1").innerText = name1
        document.getElementById("currency2").innerText = name2
        var index1 = listMoney.indexOf(name1)
        var index2 = listMoney.indexOf(name2)
        var rate = listRate[index2] / listRate[index1]
        document.getElementById("td2").innerText = rate
    }




    function calculate() {
        var currency1 = document.getElementById("select1")
        var name1 = currency1.value
        var currency2 = document.getElementById("select2")
        var name2 = currency2.value

        var index1 = listMoney.indexOf(name1)
        var index2 = listMoney.indexOf(name2)

        document.getElementById("currency1").innerText = name1
        document.getElementById("currency2").innerText = name2

        var rate = listRate[index2] / listRate[index1]

        var mount1 = document.getElementById("mount").value

        document.getElementById("td1").innerText = mount1

        //document.getElementById("td2").innerText = rate

        document.getElementById("td3").innerText = rate * mount1


    }

</script>

</body>
</html>

这篇关于Java学习 day04_JS&DOM的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！