网页设计基础第三十一讲：解锁网页魔法：JavaScript基础学起来主要介绍了 JavaScript 的基础知识。包括

了解了JavaScript的强大功能和广泛应用后，接下来我们将从零开始，逐步学习JavaScript的基础知识。本系列教程都将为你提供系统、全面的指导，助你在JavaScript的道路上稳步前行。

任务描述

本节课的任务是学习如何在网页中引入JavaScript，并掌握JavaScript的基础语法。具体目标包括：

了解JavaScript的引入方式：学会在HTML中引入JavaScript的两种常见方法。
掌握JavaScript基础语法：熟悉变量、数据类型、运算符、条件语句和循环语句等基本概念。
完成实验实训：通过实际操作，加深对所学知识的理解和应用。

任务实施

页面引入JavaScript的方法

JavaScript可以通过两种方式引入到HTML页面中：

内联脚本：直接在HTML标签中使用
外部脚本：将JavaScript代码写在一个单独的.js文件中，然后通过

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内联脚本示例</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <script>
        alert("这是一个内联脚本！");
    </script>
</body>
</html>

外部脚本示例首先，创建一个名为script.js的文件，内容如下：

function sayHello(){
alert("这是一个外部脚本！");
  }

然后，在HTML文件中引入这个外部脚本：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部脚本示例</title>
   <script src="script.js"></script>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
  <input type="button" onclick="sayHello();" value="点击"/>
</body>
</html>

JavaScript基础语法

命名规范

必须以英文字母、下划线和$开头。
必须由英文字母、数字、下划线组成，不能出现空格或制表符。
不能使用Javascript关键字与保留字。
不能使用Javascript语言内部的单词，例如：undefined、NaN、Infinity。
大小写敏感，例如name和Name是两个不同的标识符。
关键字在 JavaScript 中具有特殊的含义，不能用作变量名、函数名或属性名。使用保留字会导致语法错误，因此在编写代码时应避免使用它们。
1. 控制语句
- break
- case
- catch
- class
- const
- continue
- debugger
- default
- delete
- do
- else
- export
- extends
- finally
- for
- function
- if
- import
- in
- instanceof
- new
- return
- switch
- this
- throw
- try
- typeof
- var
- void
- while
- with

数据类型
- null
- true
- false
- undefined
保留词
- enum
- implements
- interface
- let
- package
- private
- protected
- public
- static
- yield
其他
- await
- async
- from
- as

变量

在JavaScript中，可以使用var、let和const关键字声明变量。

var x = 10; // 使用var声明变量
let y = 20; // 使用let声明变量
const z = 30; // 使用const声明常量

数据类型

JavaScript中有几种常见的数据类型，包括：

Number数值型：可分为整数、浮点型、内部常量以及特殊值。如10、3.14、-3500、0、ox或0X开头的十六进制整数、使用0开头的整数是八进制整数，例如：017、-035
String字符型：如"Hello, World!"
Boolean布尔型：如true、false
数组：如[1, 2, 3]
Object对象：如{name: "Alice", age: 25}
null空类型：表示空值，表示对变量赋值，只不过赋的值是“无值”。除了表示null的数据外，也可用在表示其他类型的数据中，例如对象、数组和字符串等。当变量不再使用时，将它赋值为null，以释放存储空间。
undefined：表示未定义，表示变量不存在或者没有赋值。如何使用未定义的变更也会显示undefined,但通常使用未定义的变量会造成程序错误。

数据转换函数(常用系统函数)

1. `parseFloat()`

用途：将字符串转换为浮点数。
语法：parseFloat(string)
参数：string（要解析的字符串）。
返回值：返回转换后的浮点数。如果无法解析，则返回 NaN（Not-a-Number）。

示例：

console.log(parseFloat("3.14"));     // 3.14
console.log(parseFloat("10.5px"));    // 10.5
console.log(parseFloat("abc"));        // NaN
console.log(parseFloat("   42.0"));    // 42

2. `parseInt()`

用途：将字符串解析为整数。
语法：parseInt(string, [radix])
参数：
- string（要解析的字符串）。
- radix（可选，表示基数，范围从2到36），用于指定解析的数字系统。
返回值：返回转换后的整数。如果无法解析，则返回 NaN。

示例：

console.log(parseInt("10"));          // 10
console.log(parseInt("10.5"));        // 10
console.log(parseInt("10px"));        // 10
console.log(parseInt("abc"));         // NaN
console.log(parseInt("1010", 2));     // 10 (二进制转换)

3. `Number()`

用途：尝试将对象或字符串转换为数字，包括整数和浮点数。
语法：Number(value)
参数：value（要转换的值）。
返回值：返回转换后的数字。如果无法转换，则返回 NaN。

示例：

console.log(Number("123"));           // 123
console.log(Number("123.45"));        // 123.45
console.log(Number("abc"));            // NaN
console.log(Number(true));             // 1
console.log(Number(false));            // 0

4. `+` 运算符（一元加号）

用途：能将字符串解析为数字，等同于 Number()。

示例：

console.log(+"123");                  // 123
console.log(+"123.45");               // 123.45
console.log(+"abc");                   // NaN

5. `toString()`

用途：将数字转换为字符串。
语法：number.toString([radix])
参数：radix（可选，用于表示数字字符串的基数）。
返回值：返回数字的字符串表示。

示例：

console.log((123).toString());        // "123"
console.log((255).toString(16));      // "ff" (十六进制)

`innerHTML`

innerHTML 是一个非常常用的JavaScript属性，用于获取或设置HTML元素的内容。以下是关于innerHTML的一些要点和使用示例：

用途

获取内容：可以读取某个HTML元素中的HTML内容。
设置内容：可以将一个字符串（可以包含HTML标记）设置为该元素的内容，从而更新页面显示。

示例

获取内容：

const content = document.getElementById("results").innerHTML;
console.log(content); // 输出results元素内的HTML内容

设置内容：

const resultDiv = document.getElementById("results");
resultDiv.innerHTML = "<p>这是新的内容。</p>"; // 设置新内容，包含HTML标记

`console.log()`

是JavaScript中一个非常重要和常用的函数，用于向控制台输出信息。它通常用于调试代码、检查变量的值或输出任何需要在开发过程中查看的内容。以下是关于 `console.log()` 的一些关键点和用法示例：

用途

调试：查看程序执行到某一步时的状态，输出变量的值或者调试信息。
输出信息：可以用于显示字符串、数字、对象以及数组等值，以便更好地理解代码的执行过程。

语法

console.log([object], [...]);

object 是要输出的值，可以是字符串、数字、数组、对象等。
可以传入多个值，使用逗号隔开。

示例

输出基本类型的值：

console.log("Hello, World!"); // 输出字符串
console.log(42);                // 输出数字

输出数组和对象：

const arr = [1, 2, 3, 4, 5];
console.log(arr);              // 输出数组

const obj = { name: "Alice", age: 25 };
console.log(obj);              // 输出对象

多值输出：

const a = 10;
const b = 20;
console.log("a:", a, "b:", b); // 输出多个值

调试变量：

function add(x, y) {
    console.log("x:", x, "y:", y); // 输出参数值
    return x + y;
}
add(5, 3); // 调用函数并查看参数

运算符

JavaScript支持多种运算符，包括：

算术运算符：+、-、*、/、%、++、--
比较运算符：==、!=、===、!==、>、<、>=、<=
逻辑运算符：&&、||、!
赋值运算符：=、+=、-=、*=、/=、%=

条件语句

使用if、else if和else语句来执行不同的代码块。

let age = 20;

if (age < 18) {
    console.log("未成年人");
} else if (age >= 18 && age < 60) {
    console.log("成年人");
} else {
    console.log("老年人");
}

练习：根据输入的课程成绩，判断学生成绩是否及格.

循环语句

使用for、while和do...while循环来重复执行代码块。

// for循环
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// while循环
let j = 0;
while (j < 5) {
    console.log(j);
    j++;
}

// do...while循环
let k = 0;
do {
    console.log(k);
    k++;
} while (k < 5);

使用循环语句打印1到10的平方。

实验实训

实验一：内联脚本和外部脚本

要求如下：

创建一个HTML文件，使用内联脚本显示一条欢迎消息。例如：“欢迎来到我的网页”
创建一个外部JavaScript文件，编写一个函数来改变页面上的某个元素的文本内容。

实验二：基础语法练习

编写一个JavaScript程序，计算两个数的和、差、积和商，并输出结果。

使用条件语句判断一个数是否为正数、负数或零。

实验三：猜数字游戏

游戏目标：
- 用户需要猜测计算机随机生成的一个1到100之间的数字。
```
 const randomNumber = Math.floor(Math.random() * 100) + 1;
```
用户输入：
- 提供一个输入框让用户输入他们的猜测。
- 用户可以通过点击“提交猜测”按钮来提交他们的猜测。
创建script.js文件并自定义函数 submitGuess()：

要求使用外部脚本引入的方式

消息反馈机制：
- 对用户的猜测提供即时反馈：
  - 如果猜的数字太高，提示“太高了！再试一次。”
  - 如果猜的数字太低，提示“太低了！再试一次。”
  - 如果猜对了，提示“恭喜！你猜对了数字 X！你总共猜了 Y 次。”
尝试次数计数：
- 记录用户进行猜测的次数，以便在猜对时显示。

通过这些需求的实现，猜数字游戏能够为用户提供一个有趣的互动体验，同时也能帮助学习和掌握基本的编程概念。

结语

通过本节课的学习，你已经掌握了如何在网页中引入JavaScript，以及JavaScript的基础语法。希望这些内容能帮助你打下坚实的基础，为后续的学习做好准备。如果你有任何疑问或需要进一步的帮助，请随时留言。让我们继续探索JavaScript的无限魅力吧！

网页设计基础第三十一讲： 解锁网页魔法：JavaScript基础学起来

任务描述

任务实施

页面引入JavaScript的方法

JavaScript基础语法

命名规范

变量

数据类型

数据转换函数(常用系统函数)

1. parseFloat()

2. parseInt()

3. Number()

4. + 运算符（一元加号）

5. toString()

innerHTML

用途

示例

console.log()

用途

语法

示例

运算符