HTML5 基础知识，第 4 部分 JavaScript面向对象设计之一_介绍JavaScript与DOM、事件与处理程序、JavaScript函数与对象以及对象继承

最新推荐文章于 2023-04-05 21:25:41 发布

47461068

最新推荐文章于 2023-04-05 21:25:41 发布

阅读量595

点赞数 1

分类专栏：前端框架及其前言HTML5基础语言文章标签： html5 javascript

本文链接：https://blog.csdn.net/weixin_47461068/article/details/105877525

版权

一、JavaScript与DOM

JavaScript将带您进入新天地。在已经了解了HTML5标记的有关内容（也称为结构），并且了解了CSS样式（另称为外观）。只不过所缺少的就是对JavaScript（否则称为行为）的进一步了解。如果所知道的是结构和表现，当然，也可以创建一些美观的页面，但它们仍然仅仅是静态页面。若使用JavaScript添加行为时，就可以创建一个交互式的体验；甚至更好的是，可以创建功能完善的Web应用程序。

现在准备在Web工具箱中添加最有趣和最通用的技能：JavaScript编程！

1.1. JavaScript的工作方式：

目标是编写在加载网页时，在浏览器中运行的JavaScript代码可能响应用户的操作、更新或更改页面、与Web服务进行通信，并且通常使页面更像是一个应用程序，而不是一个文档。让我们看看所有这些是如何工作的：

① 编写：

创建HTML标记和JavaScript代码，并将它们放入文件中，例如index.html和index.js（或者它们都可以放入HTML文件中）。

清单 1. 我的第一个JavaScript

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>我的第一个JavaScript</title>
    <script>
        var zcj = 69;
    </script>
</head>
<body>
    <h1>我的第一个JavaScript</h1>
    <p></p>
    <script>
        zcj = zcj + 8;
    </script>
</body>
</html>

② 加载：

浏览器检索并加载您的页面，从上到下解析其内容。当浏览器遇到JavaScript时，浏览器会解析代码并检查其正确性，然后执行代码。浏览器还构建HTML页面的内部模型，称为DOM。其结构如图1所示：

图 1. DOM结构

③ 运行：

JavaScript继续执行，使用DOM来检查页面，更改页面，从页面接收事件或要求浏览器从Web服务器检索其他数据。

1.2. 使用JavaScript能做什么？

在页面上包含<script>元素（或对另一个JavaScript文件的引用）后，就可以开始编码了。 JavaScript是一种成熟的编程语言，您可以使用它来完成其他语言的几乎所有工作，甚至更多，因为我们在网页内进行编程！它能够进行顺序语句、条件语句和循环语句的编写执行。

① 顺序语句：

创建变量并赋值，通过表达式运算将其整合在一起，也有使用JavaScript库中的内置功能。

var temp = 68.6;
var beanCounter = 5;
var reallyCool = true;
var motto = "我说了算";
temp = (temp - 20) * 6 /7;
motto = motto + " 你也是!";
var pos = Math.random();

② 循环语句：

一遍又一遍地执行语句。

while (beanCounter > 0) {
    proces();
    beanCounter = beanCounter - 1;
}

③ 条件语句：

编写有条件的代码，具体取决于应用程序的状态。

if (isReallyCool) {
    invite = "你被邀请了！";
} else {
    invite = "抱歉，我们已满员。";
}

1.3. 声明一个变量

变量保存事物。使用JavaScript变量可以容纳许多不同的数据。让我们声明一些可容纳数据的变量：

var winners = 8;            # 整数数值。
var boilingPt = 20.6;       # 浮点数值。
var name = "张三";           # 字符串
var isEligible = false;     # 布尔值，为true或false。

创建变量的三个步骤：

① 声明变量：

请注意，与某些语言不同，JavaScript不需要变量的类型，它只是创建一个可以容纳许多东西的通用容器。

var sco;

② 取值：

接下来，需要一个值来放入变量。可以通过几种方式指定值：

var sco = 30;                  # 这个值可以是文字值，例如数字或字符串。
var sco = totalSco / pe;       # 值可以是表达式的结果。
var sco = Math.random() * 10;  # 使用JavaScript的内部库函数来创建值。

③ 赋值：

最后，有一个变量，并且有一个值。我们要做的就是将值赋给变量。变量sco不再是undefined，现在有了自己的值。当然，一旦创建了变量，就可以随时更改其值，甚至可以将其更改为具有不同类型的值。

例如：

sco = 8;                       # 可以将sco重置为另一个整数值。
sco = sco * 5;                 # 甚至在更改其值的表达式中使用变量自身。
sco = "厌倦了成为整数";          # 更改sco的值和类型(在此时更改为字符串)。
sco = null;                    # JavaScript中甚至有一个值表示“空值”，它被称为null。

1.4. 如何命名变量

规则1：变量可以字母、下划线或美元符号开头。
规则2：然后您可以使用任意数量的字母，数字，下划线或美元符号。变量中间不能有空格、+、-符号。
规则3：请确保避免使用JavaScript的所有保留字。

1.5. 获取表达式

看到的JavaScript语句如下：

sco = sco + 1;

让我们仔细看一下表达式，其在JavaScript中无处不在，因此了解可以表达式的内容很重要。

数值表达式：您可以编写得出数字的表达式...

sco = (9 / 5) * tempC + 32;
sco = x - 1;
sco = Math.random() * 10;
sco = 2.123 + 3.2;

字符串表达式：并且您可以编写产生字符串的表达式...

sco = "hello" + "world";
sco = p.innerHTML;
sco = phone.substring(0, 3);

布尔表达式：您可以编写导致布尔值true或false的表达式...

sco = 6 > 8;
sco = temp < 95;
sco = status == 4;
sco = name == "张三";

其他表达式：可以是函数，也可以是对象...

sco = function () {...};
sco = document.getElementById("name");
sco = new Array(15);

JavaScript使编程更容易上手吗？它的一种方法是通过根据需要将类型转换为其他类型来使表达式有意义。

1.6. JavaScript编程举例

一遍又一遍地做事...

如果我们在JavaScript程序中一次完成所有操作，那可能会是一个很无聊的程序。您做一些事情需要执行很多次，重复操作，直到满足某个条件为止。为了处理这些情况，JavaScript为您提供了几种遍历代码块的方法。

可以使用JavaScript的while循环执行某些操作，直到满足条件为止：

var sco = 10;                  # 假定有一桶冰淇淋，里面还剩十勺。这里是变量声明，并初始化为10。
# 当使用布尔表达式得出的结果为true或false。如果为true，则执行之后的代码，直到其为false为止。
while (sco > 0) {             
    alert("有冰淇淋!");
    sco = sco - 1;             # 每次通过一次循环时，通过从冰淇淋勺数中减去一个。
}
# 当条件（sco> 0）为false时，循环完成，并且无论程序的下一行是什么，代码都将在此处继续执行。
alert("没有冰淇淋的生活是不一样的");

使用JavaScript做出决策

我们一直在for和while语句中使用布尔表达式作为条件测试来决定是否继续循环。当然也可以使用它们在JavaScript中进行决策。

if (sco < 2) {                # 这是布尔表达式，进行测试以查看还剩下多少勺。
    alert("冰淇淋快用完了！");   # 如果还剩不到2勺，则发出告警！
}

做出更多决策...

if (scoops == 3) {
    alert("冰淇淋快用完了!");
} else if (scoops > 9) {
    alert("快点吃，冰淇淋将融化！");
} else if (scoops == 2) {      # 添加了附加条件，倒数到零。
    alert("走一个! 1");
} else if (scoops == 1) {
    alert("走一个! 2");
} else if (scoops == 0) {
    alert("已完!");
} else {
    alert("还有很多冰淇淋，快点来拿。");
}

1.7. 如何以及在何处向页面添加JavaScript

要使用JavaScript，必须将其添加到网页上，但是在何处以及如何进行操作？我们已经知道有一个<script>元素，可以在哪里使用它，以及如何影响JavaScript在页面中的执行方式，可以通过以下三种不同的方式向页面添加代码：

① 将脚本内联放置在<head>元素中：

向页面添加代码的最常见方法是在页面的顶部放置<script>元素。<head>元素中的JavaScript，它在浏览器解析了head（首先执行！）之前就执行了，然后才解析了页面的其余部分。

将<script>元素放在HTML的<head>中，以便在页面加载之前执行它们。

清单 2. <script>元素放在<head>中

<!doctype html>
<html lang="en">
<head>
    <title>在浏览器上</title>
    <meta charset="utf-8">
    <script>
        // 答案1
        var count = 0;
        for(var i = 0; i < 5; i++) {
            count = count + i;
        }
        alert("count 是 " + count);
        // 10

        // 答案2
        var tops = 5;
        while(tops > 0) {
            for(var spins = 0; spins < 3; spins++) {
                alert("Top " + tops + " 在旋转!");
            }
            tops = tops - 1;
        }
        alert("Tops 旋转: " + count);
        // 15

        // 答案3
        for(var berries = 5; berries > 0; berries--) {
            alert("吃浆果");
        }
        alert("吃浆果: " + count);
        // 5

        //答案4
        for(var scoops = 0; scoops < 10; scoops++) {
            alert("还有更多的冰淇淋!");
        }
        alert("没有冰淇淋的生活是不一样的:

最低0.47元/天解锁文章

47461068

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 基础知识，第 4 部分 JavaScript面向对象设计之一_介绍JavaScript与DOM、事件与处理程序、JavaScript函数与对象以及对象继承

一、JavaScript与DOMJavaScript将带您进入新天地。在已经了解了HTML5标记的有关内容（也称为结构），并且了解了CSS样式（另称为外观）。只不过所缺少的就是对JavaScript（否则称为行为）的进一步了解。如果所知道的是结构和表现，当然，也可以创建一些美观的页面，但它们仍然仅仅是静态页面。若使用JavaScript添加行为时，就可以创建一个交互式的体验；甚至更好的是，...
复制链接

扫一扫

专栏目录