JavaScript基础知识

最新推荐文章于 2021-07-28 08:33:09 发布

Mr_fengzi

最新推荐文章于 2021-07-28 08:33:09 发布

阅读量409

点赞数

分类专栏： Web前端文章标签： JavaScript DOM BOM JavaScript实际案例

本文链接：https://blog.csdn.net/Mr_fengzi/article/details/98194207

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript 简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JavaScript 是 脚本语言：

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入HTML 页面后，可由所有的现代浏览器执行。

为什么学习 JavaScript？
JavaScript 是web 开发人员必须学习的 3 门语言中的一门：

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为

JavaScript 使用

HTML 中的脚本必须位于 < script> 与 < /script> 标签之间。
你可以在 HTML 文档中放入不限数量的脚本。脚本可位于 HTML 的 < body> 或 < head> 部分中，或者同时存在于两个部分中。通常的做法是把函数放入部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，需要在 < script> 标签的 “src” 属性中设置该 .js 文件。

< script > 标签
如需在 HTML 页面中插入 JavaScript，请使用 < script> 标签，< script> 和 < /script> 会告诉 JavaScript 在何处开始和结束。< script> 和 < /script> 之间的代码行包含了 JavaScript。
注：那些老旧的实例可能会在 < script> 标签中使用 type=“text/javascript”。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

HTML DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。
HTML DOM 模型被结构化为对象树：
在这里插入图片描述
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML：

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

在 DOM 中，所有 HTML 元素都被定义为对象。编程界面是每个对象的属性和方法。属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。方法是您能够完成的动作（比如添加或删除 HTML 元素）。

HTML DOM Document 对象
文档对象代表你的网页。如果你希望访问 HTML 页面中的任何元素，那么你总是从访问 document 对象开始。下面是一些如何使用 document 对象来访问和操作 HTML 的实例。
查找 HTML 元素：

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素

改变 HTML 元素：

方法	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

添加和删除元素：

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

添加事件处理程序：

方法	描述
document.getElementById(id).onclick = function(){code}	向 onclick 事件添加事件处理程序

浏览器对象模型（Browser Object Model (BOM)）

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器“对话”。
BOM尚无正式标准。由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。
Window 对象
所有浏览器都支持 window 对象。它代表浏览器的窗口。
所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至（HTML DOM 的）document 对象也是 window 对象属性。

JavaScript 语句

在 HTML 中，JavaScript 语句是由 web 浏览器“执行”的“指令”。
JavaScript 语句由以下构成：
值、运算符、表达式、关键词和注释。
大多数 JavaScript 程序都包含许多 JavaScript 语句，这些语句会按照它们被编写的顺序逐一执行。

分号 ;
分号分隔 JavaScript 语句，请在每条可执行的语句之后添加分号。

JavaScript 代码块：
JavaScript 语句可以用花括号（{…}）组合在代码块中。代码块的作用是定义一同执行的语句。

JavaScript 输出

JavaScript 能够以不同方式“显示”数据：

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML写入 HTML 元素
使用 console.log() 写入浏览器控制台

JavaScript 变量

在编程语言中，变量用于存储数据值。 JavaScript 使用 var 关键词来声明变量。= 号用于为变量赋值。

JavaScript 数据类型

JavaScript 变量可存放数值，比如 100，以及文本值，比如 “Bill Gates”。
在编程中，文本值被称为字符串。JavaScript 可处理多种数据类型，但是现在，我们只关注数值和字符串值。字符串被包围在双引号或单引号中。数值不用引号。如果把数值放在引号中，会被视作文本字符串。
JavaScript数据类型有字符串值，数值，布尔值，数组，对象。

JavaScript 函数

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。函数名可包含字母、数字、下划线和$符号（规则与变量名相同）。

圆括号可包括由逗号分隔的参数：(参数 1, 参数 2, …)
由函数执行的代码被放置在花括号中：{}

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

函数调用
函数中的代码将在其他代码调用该函数时执行：

当事件发生时（当用户点击按钮时）
当 JavaScript 代码调用时
自动的（自调用）

函数返回
当 JavaScript 到达 return 语句，函数将停止执行。如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。函数通常会计算出返回值，这个返回值会返回给调用者。

JavaScript 事件

事件是发生在 HTML 元素上的“事情”，当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。
HTML 事件可以是浏览器或用户做的某些事情。通常，当事件发生时，用户会希望做某件事。JavaScript 允许您在事件被侦测到时执行代码。通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序。
下面是一些常见的 HTML 事件：

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

下面通过几个案例的编写，具体了解一下JavaScript的使用。

用户登录校验

对用户登录界面加入JavaScript语句，可以对用户进行校验：当用户输入的用户名为空时，会弹出警告；并且判断用户输入密码是否满足某些要求，若不满足则弹出警告。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkForm() {
            //获取当前用户提交的用户名,默认情况下getElementsByName返回列表对象, .value获取对象里面的值
            var username = document.getElementsByName('username')[0].value;
            // 判断用户名是否为空， 如果为空， 报错
            if (username === '') {
                // ==： ‘5’== 5 true    只比较值是否相等
                // ===   '5'===5 false    比较值和类型是否相等
                alert("用户名为空");
            }
            // 判断密码长度是否大于6， 如果不大于6， 直接报错;
            var password = document.getElementById('pwd').value;
            var pwd_length = password.length;
            if (pwd_length < 6) {
                alert("密码长度小于6位");
            }
        }
    </script>
</head>
<body>
<div class="login">
    <h1>用户登录</h1>
    <!--
    当提交登录信息的时候， 执行函数checkForm实现用户的校验
    第一个事件类型: onsubmit
    -->
    <form action="#" method="get" onsubmit="return checkForm()">
        <input type="text" name="username" placeholder="用户名"><br/>
        <input type="password" name="password" placeholder="密码" id="pwd"><br/>
        <input type="submit" value="登录">
    </form>

</div>
</body>
</html>

实现界面如下：
在这里插入图片描述
当用户输入的用户名为空时，弹出警告：

当用户输入密码小于6位时，弹出警告：

代码中用到了onsubmit 事件，onsubmit 事件在表单提交时触发。
getElementsByName() 方法可返回带有指定名称的对象的集合。
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

聚焦和离焦事件

onfocus 事件：当 input 输入框获取焦点时执行一段 Javascript代码

onfocus 事件在对象获得焦点时发生。onfocus 通常用于 < input>, < select>, 和< a>。

onblur 事件：当用户离开input输入框时执行一段Javascript代码
onblur 事件会在对象失去焦点时发生。Onblur 经常用于Javascript验证代码，一般用于表单输入框。

还是利用上面案例的用户登录界面，当用户鼠标点击输入框时后面会给出提示，当鼠标离开时，会检验用户输入是否满足要求，并分别做出提示。
具体代码如下：

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

    <script>
        function showUserTips() {
            var usertipsObj = document.getElementById('usertips');
            var info ='<span style="color: gray">用户名长度大于2</span>';
            // alert(usertipsObj.innerHTML);
            usertipsObj.innerHTML = info;
        }
        function checkUser() {
             //获取当前用户提交的用户名,默认情况下getElementsByName返回列表对象, .value获取对象里面的值
            var username = document.getElementsByName('username')[0].value;
            // 判断用户名是否为空， 如果为空， 报错
             var usertipsObj = document.getElementById('usertips');
            if (username.length <= 2) {

                usertipsObj.innerHTML = '<span style="color: red">用户名长度不大于2</span>'
            }else{
                usertipsObj.innerHTML = '<span style="color: green;">正确</span>'
            }
        }
    </script>
</head>
<body>
<div class="login">
    <h1>用户登录</h1>
    <form action="#" method="get">
        <!--onfocus聚焦事件， 如果聚焦， 执行函数showUserTips()-->
        <input type="text" name="username" placeholder="用户名" id='user' onfocus="showUserTips()" onblur="checkUser()">
        <span id="usertips"></span><br/>
        <input type="password" name="password" placeholder="密码" id="pwd"><br/>
        <input type="submit" value="登录">
    </form>

</div>

</body>
</html>

当用户点击输入框时，后方会出现提示：
在这里插入图片描述
当用户输入不满足要求时：

当用户输入满足要求时：

图片的轮播

点击网页中的相应按钮，会转换图片，对图片实现轮播。

这里会用到onclick事件，onclick 事件会在元素被点击时发生。
具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var count = 1;
        function changeImg() {
            count += 1;
            //    通过for循环实现图片的切换
            //     获取图片对象
            var imgObj = document.getElementById('img');
            imgObj.src = './img/img' + count + '.jpg';

            //如果轮播图片结束， 从头开始轮播显示图片;
            if(count === 5){
                count = 0;
            }
        }
    </script>
</head>
<body>
<div class="box">
    <img src="./img/img1.jpg" id="img"><br/>
    <!--当用户点击按钮时， 切换图片到下一个-->
    <input type="button" value="下一页" onclick="changeImg()">

</div>

</body>
</html>

效果如下：
在这里插入图片描述
点击下一页按钮时，会循环转换图片：

表格全选与全不选

实现当选中一个框时，其余的框都会被选，当不选该框时，其余的框也都将不会被选择。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkAll() {
            //    1. 获取全选框对象
            var checkAllEle = document.getElementById('checkAll');

            //    获取当前的状态, 如果返回true， 则代表选中， 否则未选中;
            // alert(checkAllEle.checked);
            var checkOnes = document.getElementsByName('checkOne');
            if (checkAllEle.checked) {
                for (var i = 0; i < checkOnes.length; i++) {
                    checkOnes[i].checked = true;
                }
            } else {
                for (var i = 0; i < checkOnes.length; i++) {
                    checkOnes[i].checked = false;
                }
            }
        }
    </script>
</head>
<body>

<table style="width: 600px;margin: 0 auto;margin-top: 50px;text-align: center;" border="1px">
    <th style="text-align: center;" colspan="5">
        <input type="button" value="添加">
        <input type="button" value="删除">
    </th>
    <tr>

        <th><input type="checkbox" id="checkAll" onclick="checkAll()"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
    </tr>
</table>
</body>
</html>

效果如下：
在这里插入图片描述
当点击第一个框时，其余的也都会被选中：

动态添加城市

在初始城市列表中会有几个城市，然后可以在输入框中填写城市名，再点击按钮进行添加。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function addCity() {
        //    1. 获取要添加的城市内容
            var city = document.getElementById('city').value;

        //    2. 判断城市是否有值， 如果有， 则添加到列表里面
            if(city){
            //    创建一个关于城市的文本节点
                var textnode = document.createTextNode(city); //广州

            //    创建一个li元素节点
                var liEleNode = document.createElement('li');

            //    将城市信息添加到li标签里面<li>城市名称</li>
                liEleNode.appendChild(textnode);
            //    将城市列表标签添加到ul标签里面去;
                var ulEleNode = document.getElementById('city_ul');
                ulEleNode.appendChild(liEleNode)

            }else{
                alert("城市为空");
            }
        }
    </script>
</head>
<body>

<div class="content">
    <form>
        <input type="text" name="city" id="city" placeholder="请输入城市">
        <input type="button" value="添加城市" onclick="addCity()">
    </form>

    <ul id="city_ul">
        <li>西安</li>
        <li>成都</li>
        <li>上海</li>
    </ul>
</div>

</body>
</html>

效果如下：
在这里插入图片描述
然后可以输入城市并且添加到列表中去：

createTextNode() 方法：HTML元素通常是由元素节点和文本节点组成，createTextNode() 可创建文本节点。
createElement() 方法通过指定名称创建一个元素。
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

省市信息二级联动

创建两个下拉列表，第一个为省份，当选择某一个省份时，在第二个下拉列表就会出现对应的城市名称，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市二级联动</title>
    <script>
        function changeCity() {
            var provinces = new Array(3);
            provinces[0] = new Array('西安', '渭南', '宝鸡', '延安', '榆林');
            provinces[1] = new Array('太原', '大同', '运城', '临汾', '忻州', '长治', '晋中', '朔州', '吕梁', '晋城');
            provinces[2] = new Array('石家庄', '保定', '邯郸', '廊坊', '秦皇岛', '邢台', '唐山', '张家口', '承德', '衡水');

            var choiceProvince = document.getElementById('province').value;
            var citys = provinces[choiceProvince];

            var selectCityObj = document.getElementById('city');
            selectCityObj.length = 0;
            for(var i=0; i<citys.length; i++){
                var textnode = document.createTextNode(citys[i]);
                var optEleObj = document.createElement('option');
                optEleObj.appendChild(textnode);

                selectCityObj.appendChild(optEleObj);
            }
        }
    </script>
</head>
<body>
<div class="content">
    <form action="#" method="get">
        <span>籍贯</span>
        <select id="province" onchange="changeCity()">
            <option>---选择省份---</option>
            <option name="province" value="0">陕西</option>
            <option name="province" value="1">山西</option>
            <option name="province" value="2">河北</option>
        </select>
        <select id="city">
            <option>---选择城市---</option>
        </select>
    </form>
</div>
</body>
</html>