当前位置：首页 > article >正文

JavaScript 基础语法

article 2025/3/10 6:30:18

JavaScript 基础语法

课程介绍

课程主题

JavaScript 基础语法

课程目标

深入理解 JavaScript 的基本概念与广泛用途
熟练掌握 JavaScript 基础语法知识
能够运用所学语法解决简单的实际编程问题

JavaScript 简介

什么是 JavaScript

JavaScript 是一种轻量级、解释型且面向对象的脚本语言，在网页开发领域占据重要地位，能够为网页赋予丰富的交互性。

JavaScript 的用途

表单验证：确保用户输入信息的准确性与合法性，例如验证邮箱格式、密码强度等。
动态效果：实现网页元素的动画效果，如图片轮播、菜单展开收起等，提升用户体验。
数据交互：与服务器进行数据通信，实现数据的实时获取与更新，例如加载最新的新闻资讯。
游戏开发：创建简单的网页游戏，如 2048、贪吃蛇等。

JavaScript 的引入方式

内联脚本

<!DOCTYPE html>
<html lang="en">
<body>
  <!-- 在HTML标签的事件属性中直接嵌入JavaScript代码 -->
  <button onclick="alert('Hello, World!')">点击我</button>
  <!-- 这里的onclick是点击事件，当按钮被点击时，立即执行alert('Hello, World!')这段JavaScript代码，弹出提示框 -->
</body>
</html>

内部脚本

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内部脚本示例</title>
  <!-- 在HTML文件的<script>标签内编写JavaScript代码 -->
  <script>
    // 定义变量message并赋值为'Hello, World!'
    let message = 'Hello, World!';
    // 将message的值输出到浏览器控制台，方便开发者调试查看
    console.log(message);
  </script>
</head>
<body>
</body>
</html>

外部脚本

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>外部脚本示例</title>
  <!-- 通过src属性引入外部独立的JavaScript文件，便于代码的模块化管理 -->
  <script src="script.js"></script>
</head>
<body>
</body>
</html>

script.js文件内容：

// 定义变量greeting并赋值为'Welcome to JavaScript!'
let greeting = 'Welcome to JavaScript!';
// 将greeting的值输出到浏览器控制台
console.log(greeting);

变量和数据类型

变量声明

// 使用let关键字声明变量name并赋值为'John'，let声明的变量具有块级作用域
let name = 'John';
// 使用const关键字声明常量PI并赋值为3.14，常量一旦赋值不可更改，用于存储固定不变的值
const PI = 3.14;
// 在ES6之前，使用var关键字声明变量，var存在变量提升问题，即变量可以在声明之前使用，其作用域为函数作用域
var age = 25;

// 分别输出各个变量的值，在控制台查看结果
console.log(name); 
console.log(PI); 
console.log(age);

数据类型

基本数据类型

// 数字类型，可表示整数与小数
let num = 10; 
// 字符串类型，用于存储文本数据，需用引号包裹
let str = 'Hello'; 
// 布尔类型，只有true和false两个值，常用于逻辑判断
let isStudent = true; 
// 空值类型，表示一个空对象指针，通常用于主动释放对象引用
let empty = null; 
// 未定义类型，当变量声明但未赋值时，其类型为undefined
let undefinedVar; 

// 输出各个变量及其对应的数据类型，typeof操作符用于检测变量的数据类型
console.log(typeof num); 
console.log(typeof str); 
console.log(typeof isStudent); 
console.log(typeof empty); 
console.log(typeof undefinedVar);

引用数据类型

// 对象类型，用于存储多个键值对，方便组织和管理相关数据
let person = {
  name: 'John',
  age: 25
};
// 数组类型，用于存储一组有序的数据，通过索引访问元素
let numbers = [1, 2, 3, 4, 5];

// 输出对象和数组，在控制台查看其结构和内容
console.log(person); 
console.log(numbers);

运算符

算术运算符

let a = 10;
let b = 5;

// 加法运算，将a和b的值相加
let sum = a + b; 
// 减法运算，用a的值减去b的值
let difference = a - b; 
// 乘法运算，a与b相乘
let product = a * b; 
// 除法运算，a除以b
let quotient = a / b; 
// 取模运算，返回a除以b的余数
let remainder = a % b; 

// 输出各个算术运算的结果，在控制台查看计算值
console.log(sum); 
console.log(difference); 
console.log(product); 
console.log(quotient); 
console.log(remainder);

比较运算符

let x = 10;
let y = 20;

// 等于比较，判断x和y的值是否相等，返回布尔值
let isEqual = x == y; 
// 严格等于比较，不仅判断值相等，还要求数据类型相同，返回布尔值
let isStrictEqual = x === y; 
// 不等于比较，判断x和y的值是否不相等，返回布尔值
let isNotEqual = x != y; 
// 严格不等于比较，判断值和数据类型是否不全相同，返回布尔值
let isStrictNotEqual = x !== y; 
// 大于比较，判断x是否大于y，返回布尔值
let isGreater = x > y; 
// 小于比较，判断x是否小于y，返回布尔值
let isLess = x < y; 

// 输出各个比较运算的结果，在控制台查看布尔值
console.log(isEqual); 
console.log(isStrictEqual); 
console.log(isNotEqual); 
console.log(isStrictNotEqual); 
console.log(isGreater); 
console.log(isLess);

逻辑运算符

let condition1 = true;
let condition2 = false;

// 逻辑与运算，只有当condition1和condition2都为true时，结果才为true
let andResult = condition1 && condition2; 
// 逻辑或运算，只要condition1或condition2有一个为true，结果就为true
let orResult = condition1 || condition2; 
// 逻辑非运算，对condition1取反，true变为false，false变为true
let notResult = !condition1; 

// 输出各个逻辑运算的结果，在控制台查看布尔值
console.log(andResult); 
console.log(orResult); 
console.log(notResult);

控制语句

if…else 语句

// 假设用户输入的年龄为18，实际应用中该值可能从表单获取
let userAge = 18;

// 判断用户是否成年，根据年龄大小输出不同信息
if (userAge >= 18) {
  // 如果年龄大于等于18岁，输出成年信息
  console.log('你已经成年了');
} else {
  // 否则输出未成年信息
  console.log('你还未成年');
}

switch 语句

// 假设今天是星期一，用数字1表示，实际可能从系统获取日期数字
let day = 1;

// 根据不同的数字输出对应的星期信息
switch (day) {
  case 1:
    console.log('星期一');
    break;
  case 2:
    console.log('星期二');
    break;
  case 3:
    console.log('星期三');
    break;
  case 4:
    console.log('星期四');
    break;
  case 5:
    console.log('星期五');
    break;
  case 6:
    console.log('星期六');
    break;
  case 7:
    console.log('星期日');
    break;
  default:
    console.log('无效的日期');
}

for 循环

// 计算1到10的整数之和
let sum = 0;
for (let i = 1; i <= 10; i++) {
  // 将当前循环的i值累加到sum中
  sum += i;
}
// 输出1到10的整数总和，在控制台查看结果
console.log('1到10的整数之和为：' + sum);

while 循环

// 初始化计数器为0
let count = 0;
// 当计数器小于5时，持续执行循环体
while (count < 5) {
  console.log('当前计数：' + count);
  // 计数器每次循环增加1
  count++;
}

函数

函数定义和调用

// 定义函数greet，用于向用户打招呼，函数接收一个参数name
function greet(name) {
  // 返回打招呼的信息，信息中包含传入的name参数
  return 'Hello, ' + name + '!';
}

// 调用greet函数，传入'John'作为参数，并将返回值存储在message变量中
let message = greet('John');
// 输出打招呼的信息，在控制台查看结果
console.log(message);

匿名函数和箭头函数

// 匿名函数，将其赋值给变量add，函数接收两个参数a和b，返回a与b的和
let add = function (a, b) {
  return a + b;
};
// 调用匿名函数add，传入3和5作为参数，并将返回值存储在result变量中
let result = add(3, 5);
// 输出匿名函数的计算结果，在控制台查看
console.log(result);

// 箭头函数，功能与上述匿名函数相同，接收两个参数a和b，返回a与b的乘积
let multiply = (a, b) => a * b;
// 调用箭头函数multiply，传入4和6作为参数，并将返回值存储在product变量中
let product = multiply(4, 6);
// 输出箭头函数的计算结果，在控制台查看
console.log(product);

对象和数组

对象

// 创建一个学生对象，包含name、age、major属性以及introduce方法
let student = {
  name: 'John',
  age: 20,
  major: 'Computer Science',
  // 定义introduce方法，用于输出学生信息，方法内通过this关键字访问对象自身属性
  introduce: function () {
    console.log('我叫' + this.name + '，今年' + this.age + '岁，专业是' + this.major);
  }
};

// 访问学生对象的name属性，在控制台查看属性值
console.log(student.name); 
// 调用学生对象的introduce方法，在控制台输出学生信息
student.introduce();

数组

// 创建一个数组，存储一些水果名称
let fruits = ['apple', 'banana', 'orange'];

// 访问数组的第一个元素，在控制台查看
console.log(fruits[0]); 

// 遍历数组，通过索引依次输出每个元素
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// 使用for...of循环遍历数组，直接输出每个元素
for (let fruit of fruits) {
  console.log(fruit);
}