JavaScript初识及基本语法详解

Dasher jensen

已于 2024-03-27 09:46:36 修改

阅读量376

点赞数 6

文章标签： javascript 职场和发展 visual studio code

于 2024-03-26 20:38:10 首次发布

本文链接：https://blog.csdn.net/unstoppableyi/article/details/137041380

版权

本文详细介绍了JavaScript的基本语法，包括如何初始化、变量、数据类型（包括原始类型和对象类型）、运算符、控制结构、对象和数组以及注释和函数的使用。此外，还探讨了JavaScript的事件处理能力，展示了如何在Web页面中实现用户交互。

摘要由CSDN通过智能技术生成

一、JavaScript简介

JavaScript是一种动态的、弱类型的、解释型的编程语言，广泛用于前端开发，特别是在Web页面中增加交互性方面。它与HTML和CSS一起构成了前端开发的三大基石。

二、基本语法

初始化JavaScript

通常情况下，JavaScript代码可以直接写在HTML文件中，使用<script>标签包裹起来。例如:

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个JavaScript页面</title>
</head>
<body>
    <h1>欢迎来到我的网页！</h1>
    <script>
        // 在这里写入JavaScript代码
        alert('这是一个JavaScript弹窗！');
    </script>
</body>
</html>

另外，JavaScript代码也可以放在单独的.js文件中，然后通过HTML中的<script>标签引入。例如:

<script src="scripts/myScript.js"></script>

变量

在JavaScript中，变量是用来存储数据值的容器。声明变量使用关键字var、let或const，后面跟着变量名。例如:

// 使用var声明变量
var greeting = '你好，世界！';

// 使用let声明变量
let age = 30;

// 使用const声明常量
const pi = 3.14159;

注意：var声明的变量作用域包括函数作用域或全局作用域，let和const声明的变量有块级作用域（使用花括号{}包围的代码块）。

数据类型

JavaScript有多种数据类型，包括：

原始类型:
- String：字符串
- Number：数字
- Boolean：布尔值
- undefined：未定义
- null：空值
- Symbol（ES6新增）：唯一标识符
对象类型:
- Object：普通对象
- Array：数组
- Date：日期
- RegExp：正则表达式
- Function：函数

var str = 'Hello World'; // 字符串类型
var num = 123; // 数字类型
var bool = true; // 布尔类型
var arr = [1, 2, 3]; // 数组类型
var obj = {name: 'Alice', age: 25}; // 对象类型

运算符

JavaScript提供了多种运算符，包括算术运算符、比较运算符、逻辑运算符、赋值运算符等。例如:

算术运算符: +, -, *, /, %（取余）
比较运算符: ==, !=, ===, !==（严格相等）
逻辑运算符: &&（逻辑与）, ||（逻辑或）, !（逻辑非）
赋值运算符: =, +=, -=, *=, /=

var a = 5;
var b = 10;
console.log(a + b); // 输出结果为15
console.log(a > b); // 输出结果为false
console.log(a && b); // 输出结果为true

控制结构

JavaScript中的控制结构允许程序根据不同的条件执行不同的操作。主要的控制结构包括：

条件语句: if, else if, else
循环语句: for, while, do...while
跳转语句: break, continue, return

if (condition) {
    // 条件为真时执行的代码块
} else {
    // 条件为假时执行的代码块
}

for (var i = 0; i < 5; i++) {
    // 循环五次，每次输出i的值
    console.log(i);
}

对象和数组

JavaScript中的对象是键值对的集合，数组是有序的元素集合。

var person = {name: 'Alice', age: 25}; // 创建一个对象
var fruits = ['apple', 'banana', 'cherry']; // 创建一个数组

console.log(person.name); // 访问对象的属性name并输出结果为'Alice'
console.log(fruits[1]); // 访问数组的第二个元素并输出结果为'banana'

注释

单行注释使用//，多行注释使用/* ... */。

// 这是单行注释
/* 这是多行注释
    可以跨越多行 */

函数

函数是一段可重复使用的代码块，它可以接受参数并返回结果。声明函数使用function关键字。例如:

function add(a, b) {
    return a + b;
}

// 调用函数
var result = add(2, 3); // result的值为5

事件处理

JavaScript的强大之处在于其能够响应用户事件，如点击、鼠标移动、键盘输入等。事件处理通常涉及到事件监听器和事件处理函数。例如:

<button id="myButton">点击我！</button>

<script>
    document.getElementById('myButton').addEventListener('click', function() {
        alert('按钮被点击了！');
    });
</script>