【JavaLearn】（21）JavaScript入门、基本语法、函数、基本对象、数组、事件、DOM和BOM_主要学习 javascript 语言基础、数组、函数、对象、bom、dom、事件正则表达式、aj-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44022996/article/details/124202204

1. JavaScript入门

静态网页技术

HTML：超文本标记语言显示内容
CSS：层叠样式表美化页面
JavaScript：页面动态交互和特效

DHTML = HTML + CSS + JavaScript，动态HTML，只是动态效果，不是动态数据
jQuery：对 JavaScript 的封装
EasyUI：在 jQuery 基础上对 HTML 和 CSS 的封装

对于一个网页，HTML定义网页的结构，CSS描述网页的样子，JavaScript设置页面交互和特效。

1.1 JavaScript 定义和特点

JavaScript 是一种基于对象 (object-based) 和事件驱动 (Event Driven)的简单的并具有安全性能的脚本语言

ECMAScript：JavaScript的核心
DOM：文档对象模型，是 HTML 和 XML 的应用程序接口（API）。把整个页面规划成由节点层级构成的文档
BOM：浏览器对象模型，对浏览器窗口进行访问和操作

JavaScript特点：

脚本语言：不需要事先编译，只要有一个与其相适应的解释器就可以执行
基于对象的语言：只是使用对象，相当于只有封装，没有继承和多态
事件驱动：事件（Event）发生后（按下鼠标、移动窗口等），可能会引起相应的事件响应
简单性：变量类型为弱类型
安全性：只能通过浏览器实现信息浏览或动态交互
跨平台性：依赖于浏览器本身，与操作平台无关
缺点：各种浏览器对JavaScript的支持可能不同，显示效果可能不同

1.2 JavaScript的初步使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>认识JavaScript</title>
    <script type="text/javascript">
        //在浏览器写入内容  
        document.write("这就是JavaScript1<br>")
        document.write("这就是JavaScript2<br>")
    </script>
</head>

<body>
    这就是HTML;
</body>

</html>
<script>
    alert("你好呀")
</script>

1.3 数据类型

常量是存在数据类型的，变量直接用 var 声明即可

数值型：整数（85）和浮点数（3.14）统称为数值
字符串型：用 ‘’ 或者 “” 括起来的内容
布尔型：true 或 false
空值：null，表示没有值，用于定义空的或不存在的引用
未定义值：undefined，表示变量虽然已经声明，但是还没有赋值
复合数据类型：对象、数组

2. 基本语法

2.1 变量

JavaScript 中的变量是没有类型（弱类型）的

var int = 3;

2.2 运算符

类型	运算符
算术运算符	`+ - * / % ++ --`
赋值运算符	`=`
比较运算符	`> < >= <= == === !=`
逻辑运算符	`&& \|\| !`

注意： == 和 === 的区别

== 等值判断：先判断类型，类型一致则比较内容，如果类型不一致，则先用 Number 转换为一致的类型后再比较内容
=== 等同判断：先判断类型，类型不一致则直接 false，类型一致则再比较内容

2.3 流程控制

分支语句：if、switch
循环语句：while循环、do-while循环、for循环、for-each循环
跳转语句：break、continue、return

需要注意 for-each 循环，使用 in

2.4 引入外部文件

<script type="text/javascript" src="外部文件路径"></script>

2.5 综合代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript基本语法</title>

    <!--  引入外部的JS文件  -->
    <script type="text/javascript" src="js/myJs.js"></script>

    <script type="text/javascript">
        document.write("<h3>认识数据类型和变量</h3>")
        var x;
        document.write("x = " + x + "   " + typeof (x) + "<br>");    // 没有赋值，就是undefined
        x = null;
        document.write("x = " + x + "   " + typeof (x) + "<br>");
        x = 123;
        document.write("x = " + x + "   " + typeof (x) + "<br>");
        x = "lwclick";     // 单引号双引号都可以
        document.write("x = " + x + "   " + typeof (x) + "<br>");
        x = true;         // 区分大小写， TRUE 则是变量名
        // x = TRUE; // 此时TRUE被理解成一个变量
        document.write("x = " + x + "   " + typeof (x) + "<br>");

        document.write("<h3>区分==和===</h3>");
        var a = '5';
        var b = 5;
        var c = 5;
        document.write((b == c) + "<br>");
        document.write((a == b) + "<br>"); // 自动类型转换
        document.write((b === c) + "<br>"); //
        document.write((a === b) + "<br>"); // 先判断类型，不一致则false

        console.info("for-each循环");
        var fruits = ["apple", 'banana', 'orange', 'pear', 'peach'];
        /**
             for ( var i = 0; i < fruits.length; i++ ) {
                console.log(fruits[i]);
             }
         */
        // for-each 循环数组
        for (var index in fruits) {//!!!!
            console.warn(index + "   " + fruits[index]);
        }

        // for-each 循环对象
        // for (var elem in window) {
        //   console.info(elem);
        //}
    </script>
</head>
<body>
</body>
</html>

3. 函数

类似Java中的方法，是完成特定任务的代码语句块
不用定义属于某个类，直接使用

JavaScript的函数分为系统函数和自定义函数

系统函数

parseInt()：字符串值转换为数字

parseFloat()：字符串值转换成浮点数

isNaN()：判断是否是数字，不是数字返回 true

eval()：字符串表达式转为数字（运算字符串内的表达式）

自定义函数

// 没有参数，没有返回值
function func1() {
}

// 有参数，没有返回值
function func2(num1) {
    alert(num1) 
}

 // 有参数，有返回值
 function func3(num1, num2) {  // 返回值也为 var，则直接不写
     return num1 + num2;
 }

 // 类似于 Java 的匿名函数式定义
 var func4 = function() {
     alert('world！');
 };

 // 调用时
 func2();  // 实参个数 < 形参个数                  num1 为 undefined
 func2(123);  // 实参个数 = 形参个数               正常使用
 func2(123, 'lwclick');  // 实参个数 > 形参个数    只用第一个参数

 var res = func3(123, 456);

注意：如果有重名的函数，会调用最近的那一个

实例：计算器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>计算器</title>
    </head>

    <script>
        function calc() {
            var num1 = document.getElementById("num1").value;
            var num2 = document.getElementById("num2").value;
            if (isNaN(num1) || isNaN(num2)) {
                alert("请输入数字");
                // innerHTML：往元素的【中间】写内容
                document.getElementById("res").innerHTML = "结果：";
                return;
            }
            var oper = document.getElementById("oper").value;
            if (num2 == 0 && oper == '/') {
                document.getElementById("res").innerHTML = "<span style='color: red'>除数不能为0</span>";
                return;
            }
            var result;
            switch (oper) {
                case '+' : result = parseInt(num1) + parseInt(num2); break;
                case '-' : result = num1 - num2; break;
                case '*' : result = num1 * num2; break;
                case '/' : result = num1 / num2; break;
            }
            document.getElementById("res").innerHTML = result;
        }
    </script>

    <body>
        <form action="">
            第一个数：<input type="text" id="num1" name="num1" value="123"><br>
            第二个数：<input type="text" id="num2" name="num2"><br>
            运算符：<select id="oper" name="oper">
                        <option value="+">加</option>
                        <option value="-">减</option>
                        <option value="*">乘</option>
                        <option value="/">除</option>
                    </select><br>
            <input type="button" value="计算" onclick="calc()">
        </form>

        <div id="res">结果：</div>
    </body>
</html>

4. 对象

JavaScript 提供了很多对象，比如 String、Math、Date 等，和Java中的使用基本相同，后续还有 BOM对象和 DOM对象

<script>
    document.write("------------String--------------<br>")
    var str = new String("lwclick");
    document.write(str.length + "<br>")
    document.write(str.charAt(2) + "<br>")
    document.write(str.indexOf('s') + "<br>")
    document.write(str.substr(2, 3) + "<br>")    // 从索引为2的开始截，截3位
    document.write(str.substring(2, 3) + "<br>") // 截取2 到 3中间的

    document.write("------------Date--------------<br>")
    var now = new Date();
    document.write(now.toLocaleString()+"<br>")
    document.write(now.getFullYear()+"<br>")
    document.write((now.getMonth() + 1) + "<br>")   // 0 - 11！！！！！！！
    document.write(now.getDate()+"<br>")
    var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    document.write(arr[now.getDay()] + "<br>")

    document.write("------------Math--------------<br>")
    document.write('' + Math.random())
</script>

5. 时钟效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>时钟效果</title>
        <script>
            function showTime() {
                // 获取当前时间
                var now = new Date();

                // 写到指定位置
                document.getElementById("time").innerHTML = now.toLocaleString();

                // 第一种方式：放在自身函数里面，就会自己调用自己，需要结合 window.onload
                // window.setTimeout(showTime, 1000)  // setTimeout：多长时间后调用指定的函数【一次】
            }

            window.onload = showTime; // 不能写 ()

            // 第二种方式：在自身函数外面设置 setInterval(showTime, 1000)  【每隔】多长时间调用一次函数
            var myClock = setInterval(showTime, 1000);

            function pauseClock() {
                window.clearInterval(myClock); // 清除计时
            }

            function continueClock() {
                myClock = setInterval(showTime, 1000);
            }
        </script>
    </head>
    <body>
        <div id="time"></div>
        <input type="button" value="暂停" onclick="pauseClock()" />
        <input type="button" value="继续" onclick="continueClock()" />
    </body>
</html>

6. 数组

JavaScript 中也有一维数组和二维数组的概念

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>数组 array</title>
        <script>
            document.write("<h3>一维数组，第一种声明方式</h3>");
            var arr = ["apple", "banana", "orange", "pear", "peach"];

            document.write("<h3>一维数组，第二种声明方式</h3>");
            var arr = new Array("apple", "banana", "orange", "pear", "peach")

            document.write("<h3>一维数组，第三种声明方式</h3>");
            var arr = new Array(5);
            arr[0] = "apple";
            arr[1] = "banana";
            arr[2] = "orange";
            arr.length = 2;    // 只要前两个

            document.write("<h3>一维数组，第四种声明方式</h3>");
            var arr = new Array(5);
            arr["苹果"] = "apple";
            arr["香蕉"] = "banana";
            arr["橘子"] = "orange";

            document.write("<h3>二维数组，第一种声明方式</h3>");
            var arr = new Array(3);
            arr[0] = ["昌平区", "海淀区", "东城区", "西城区", "丰台区"];
            arr[1] = ["石家庄","邯郸","保定","承德","张家口","沧州"];
            arr[2] = ["郑州","开封","洛阳","信阳","南阳","安阳"];

            document.write("<h3>二维数组，第二种声明方式</h3>");
            var arr = new Array(3);
            arr["北京市"] = ["昌平区", "海淀区", "东城区", "西城区", "丰台区"];
            arr["河北市"] = ["石家庄","邯郸","保定","承德","张家口","沧州"];
            arr["河南市"] = ["郑州","开封","洛阳","信阳","南阳","安阳"];

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

7. 事件

事件是可以被 JavaScript 侦测到的行为，比如可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行

<input type="button" value="计算" onclick="calc()"/>

属性	当以下情况发生时，出现此事件
onabort	图像加载被中断
`onblur`	元素失去焦点
`onchange`	用户改变域的内容
`onclick`	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onerror	当加载文档或图像时发生某个错误
`onfocus`	元素获得焦点
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
`onload`	某个页面或图像被完成加载
onmousedown	某个鼠标按键被按下
`onmousemove`	鼠标被移动
`onmouseout`	鼠标从某元素移开
`onmouseover`	鼠标被移到某元素之上
onmouseup	某个鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被调整尺寸
onselect	文本被选定
onsubmit	提交按钮被点击
onunload	用户退出页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>事件</title>
        <script>
            function changeNum() {
                var showDiv = document.getElementById("showDiv");
                var value = parseInt(showDiv.innerHTML) + 1;
                showDiv.innerHTML = value;
            }
        </script>
    </head>
    <body>
        <div id="showDiv" style="width: 400px; height: 300px; background-color: greenyellow"
            onmouseover="this.style.backgroundColor='yellow'"
            onmouseout="this.style.backgroundColor='greenyellow'"
            onmousemove="changeNum()">
            0
        </div>
    </body>
</html>

8. DOM 和 BOM

什么是 BOM？

BOM是Browser Object Model的简写，即浏览器对象模型
由一系列对象组成，是访问、控制、修改浏览器的属性的方法
BOM没有统一的标准(每种客户端都可以自定标准)
BOM的顶层是window对象

什么是DOM？

DOM是Document Object Model的简写，即文档对象模型
DOM用于XHTML、XML文档的应用程序接口(API)
DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示
DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法
DOM标准是由w3c制定与维护，DOM是跨平台与跨语言的
DOM的顶层是document对象

在这里插入图片描述

BOM 是为了操作浏览器出现的 API，window 是其根对象。
DOM 是为了操作文档出现的 API，document 是其根对象

BOM 是为了操作浏览器出现的 API，window 是其根对象。
DOM 是为了操作文档出现的 API，document 是其根对象

8.1 BOM—window对象

window对象是BOM的根对象，代表整个浏览器窗口

window的常用属性：

属性	描述
closed	返回窗口是否已被关闭。
`document`	文档对象，DOM中
history	客户访问过的URL的信息
location	当前 URL 的信息
navigator	管理浏览器基本信息
opener	返回对创建此窗口的窗口的引用。
screen	客户端的屏幕和显示性能的信息
self	返回对当前窗口的引用。等价于 Window 属性。
status	设置窗口状态栏的文本。
top	返回最顶层的先辈窗口。

window的常用方法：

函数	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()	显示可提示用户输入的对话框。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
close()	关闭浏览器窗口。
setInterval()	按照指定周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>window窗口对象</title>
        <script>
            function testAlert() {
                window.alert("我是警告窗口")
            }

            function testConfirm() {
                var flag = window.confirm("我是确认窗口");
                if (flag) {
                    alert("点击了确定按钮")
                }
            }

            function testPrompt() {
                window.prompt("我是输入框，请输入内容", "默认内容")
            }

            function openWin() {
                window.open("要打开的地址")
            }

            function openWin2() {
                window.open("新文件.html", "", "left=200, top=100, height=200, width=400, status=1,toolbar=no")
            }

            function closeWin() {
                window.close();
            }
        </script>
    </head>
    <body>
        <input type="button" value="警告窗口" onclick="testAlert()" /> <br><br>
        <input type="button" value="确认窗口" onclick="testConfirm()" /> <br><br>
        <input type="button" value="提示输入窗口" onclick="testPrompt()" /> <br><br>
        <input type="button" value="弹出窗口" onclick="openWin()" /> <br><br>
        <input type="button" value="弹出定制窗口" onclick="openWin2()" /> <br><br>
        <input type="button" value="关闭窗口" onclick="closeWin()" />
    </body>
</html>

location、history、navigator对象

window的子对象

location对象：代表当前打开窗口的URL
- 主机名：location.hostname;
- 端口名：location.port;
- 主机名+端口名：location.host;
- 当前文档URL：location.href; （http://localhost:8080/demo/index.html）
- 刷新页面：location.reload();
history对象：有关客户访问过的URL的信息
- back() 后退到前一个页面 go(-1)
- forward() 前进到后一个页面 go(1)
- go(n) 直接前进到第n个页面
- go(-n) 直接后退到第n个页面
navigator对象：管理浏览器基本信息
- 浏览器名称：navigator.appName
- 浏览器版本：navigator.appVersion
- 浏览器类型：navigator.userAgent

 <!--  超链接当作按钮使用 -->
<a href="javascript:void(0)" onclick="history.forward()">前进</a>

8.2 DOM

整个的 HTML 结构可以抽象为一棵树，最顶层元素为 document，属于window对象的子对象

注释也算为一个节点

DOM节点分类：

元素节点：element node： <a href="链接地址">我的链接</a>
属性节点：attribute node：href="链接地址"
文本节点：text node：我的链接

DMO节点关系：

父子关系（parent-child）
- html 元素作为父级，body 和 head 元素作为子级
兄弟关系（Sibling）
- a 和 h1 元素就是兄弟关系

查询元素

直接查询：

getElementById( )：通过 id 找对象，返回一个节点对象
getElementsByName( )：通过 name 找对象，返回多个节点（数组）
getElementsByTagName( )：通过标签名找对象，返回多个节点（数组）

间接查询（通过节点层次查找，先通过 getElementById() 获得一个元素）：

父节点：parentNode
孩子节点：
- childNodes 数组对象，表示该节点的所有子节点
- firstChild：第一个孩子节点
兄弟节点：nextSibling， previousSibling

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            // ============ 直接获取 =============
            function getElemByIdDemo() {
                var elem = document.getElementById("username");
                console.info(elem)
                console.info(elem.type + '   ' + elem.value)
            }

            function getElemByNameDemo() {
                var hobbyArr = document.getElementsByName("hobby");
                for (var i = 0; i < hobbyArr.length; i++) {
                    console.info(hobbyArr[i])
                }
            }

            function getElemByTagNameDemo() {
                var tagArr = document.getElementsByTagName("input");
                for (var i = 0; i < tagArr.length; i++) {
                    console.info(tagArr[i])
                }
            }

            // ============ 间接获取 =============
            function parentNodeDemo() {
                var elem = document.getElementById("username");
                console.info(elem)
                var parentNode = elem.parentNode;
                console.info(parentNode)
            }

            function childNodesDemo() {
                var elem = document.getElementById("professional");
                var childNodes = elem.childNodes;
                for (var i = 0; i < childNodes.length; i++) {
                    // 通过节点的层次来判断  1元素节点  2属性节点  3文本节点
                    if (childNodes[i].nodeType == 1) {
                        console.info(childNodes[i])
                    }
                }
            }

            function siblingsDemo() {
                var elem = document.getElementById("p2");
                var nextSibling = elem.nextElementSibling;  // elem.nextSibling.nextSibling
                console.info(nextSibling)
            }

            window.onload = siblingsDemo;
        </script>
    </head>
    <body>
        <form action="" id="form1">
            用户名：<input type="text" name="username" id="username" value="请输入姓名"> <br>
            密码：<input type="password" name="pwd" id="pwd"> <br>
            爱好：<input type="checkbox" name="hobby" value="music" checked> 音乐
            <input type="checkbox" name="hobby" value="sports"> 体育
            <input type="checkbox" name="hobby" value="art"> 美术 <br>
            职业：<select name="professional" id="professional">
                    <option value="1">工人</option>
                    <option value="2" id="p2">农民</option>
                    <option value="3" selected="selected">解放军</option>
                    <option value="4">知识分子</option>
                </select><br>
            <input type="button" value="提交" onclick="submitForm()">
        </form>
    </body>
</html>