JavaScript基础语法详解-EW帮帮网

文章目录

JavaScript基础语法详解

JavaScript基础语法详解

在这里插入图片描述

一、引言

JavaScript 是一种高级的、解释型的编程语言。它是一种基于原型、多范式的动态脚本语言，广泛应用于网页开发中，用于增强网页的交互性、动态性，实现客户端的页面行为。本文将详细介绍JavaScript的基础语法，包括变量、数据类型、运算符、条件语句、循环语句和函数等核心概念。

二、JavaScript的基本结构

1、JavaScript的插入方式

JavaScript 可以通过三种方式插入到 HTML 中：

1.1 内嵌式

直接在 HTML 文件中使用 <script> 标签包裹 JavaScript 代码。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
    alert("快启动第五人格！");
</script>
</body>
</html>

这种方式的代码在页面加载时执行。

1.2 内联式

将 JavaScript 代码直接写到 HTML 标签的事件属性中。例如：

<button onclick="alert('警示框')">点击按钮弹出提示框</button>

这种方式适用于简单的交互。

1.3 外部式

通过新建一个以 .js 为后缀的文件，再通过 script 标签引入到 HTML 文件中。例如：

<script src="./my.js"></script>

这种方式便于代码的复用和维护。

三、JavaScript的输入输出

2、输入输出语法

2.1 输入语法

使用 prompt 函数可以接收用户输入：

<script>
    let name = prompt("请输入您的姓名");
</script>

2.2 输出语法

JavaScript 提供了多种输出方式，包括 document.write、alert 和 console.log：

<script>
    document.write("要输出的内容");
    alert('要输出的内容');
    console.log('控制台打印');
</script>

document.write 将内容写入到 HTML 文档中，alert 弹出警告框显示内容，而 console.log 则在浏览器的控制台打印内容。

四、变量和数据类型

3、变量

3.1 变量概念

变量是存储数据的容器。在 JavaScript 中，使用 let 或 var 声明变量：

let age = 18;

推荐使用 let，因为它具有块级作用域。

3.2 变量的使用

变量可以在交互中使用，例如：

<script>
    let name = prompt("输入姓名");
    let age = prompt("输入年龄");
    console.log(name);
    console.log(age);
</script>

这样，变量 name 和 age 就会存储用户输入的姓名和年龄。

4、数据类型

4.1 基本数据类型

JavaScript 支持多种基本数据类型，包括字符串、数字、布尔值、null、undefined 和数组。例如：

let str = "JavaScript"; // 字符串
let num = 123; // 数字
let bool = true; // 布尔值
let nu = null; // null
let un = undefined; // undefined
let arr = [1, 2, 3]; // 数组

数组可以通过索引访问元素，也支持 length 属性和其他数组方法。

五、运算符和条件语句

5、运算符

JavaScript 支持多种运算符，包括算术运算符、赋值运算符、比较运算符和逻辑运算符。例如：

let a = 5;
let b = 3;
let sum = a + b; // 算术运算
let isEqual = a === b; // 比较运算
let isTrue = a > b; // 逻辑运算

运算符用于执行数学计算、比较值和逻辑判断。

6、条件语句

6.1 if…else

用于基于条件执行不同的代码块：

if (a > b) {
    console.log("a 大于 b");
} else {
    console.log("a 小于或等于 b");
}

6.2 switch

用于多条件的分支：

let fruit = "apple";
switch (fruit) {
    case "apple":
        console.log("Apples are red.");
        break;
    case "banana":
        console.log("Bananas are yellow.");
        break;
    default:
        console.log("Unknown fruit.");
}

switch 语句提供了一种更简洁的方式来处理多个条件。

六、循环语句

7、循环

7.1 while

重复执行代码块，直到条件不再满足：

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

7.2 for

用于在特定次数内执行代码块：

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

循环语句允许代码的重复执行，for 循环是最常见的循环形式。

七、函数

8、函数

8.1 函数定义

函数是一段可以重复使用的代码块。在 JavaScript 中，可以使用 function 关键字定义函数：

function greet(name) {
    console.log("Hello, " + name);
}

8.2 调用函数

定义函数后，可以通过函数名调用它：

greet("Ning");

函数允许代码的模块化和重用。

八、总结

JavaScript 是一种功能强大的语言，它通过基础语法提供了丰富的功能，使得网页能够实现动态交互和复杂的逻辑处理。掌握这些基础语法是学习 JavaScript 的第一步，也是成为一名优秀前端开发者的基础。

参考文章：

JavaScript语法基础（超详细，看这一篇就够了）-CSDN博客
清华大学出版社-图书详情-《JavaScript 基础语法详解》

JavaScript基础语法详解

文章目录