【JavaScript】入门基础

于 2025-04-08 04:00:00 发布
阅读量1k 收藏 16
点赞数 35
CC 4.0 BY-SA版权
分类专栏： HTML CSS JavaScript 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Go_ahead1025/article/details/147055431

在这里插入图片描述

个人主页：Guiat
归属专栏：HTML CSS JavaScript

在这里插入图片描述

文章目录

正文

1. JavaScript 简介

JavaScript 是一种轻量级的、解释型的、面向对象的编程语言，主要用于网页开发。它可以使静态的HTML页面变得更加动态和交互。

1.1 JavaScript 的历史

JavaScript 由 Brendan Eich 在1995年创建，最初称为 LiveScript，后来为了迎合当时 Java 的热潮改名为 JavaScript。尽管名称相似，但 JavaScript 与 Java 是完全不同的编程语言。

1.2 JavaScript 的应用领域

  1. 网页交互
  2. 前端框架（React, Vue, Angular等）
  3. 服务器端开发（Node.js）
  4. 移动应用开发（React Native, Ionic）
  5. 桌面应用开发（Electron）

2. 开始使用 JavaScript

2.1 在HTML中嵌入JavaScript

JavaScript 可以通过三种方式嵌入HTML：

  1. 内联脚本：直接在HTML元素的事件属性中编写JavaScript代码
  2. 内部脚本：在HTML文档中使用<script>标签
  3. 外部脚本：将JavaScript代码保存在外部文件中并引用

2.1.1 内联脚本示例

<button onclick="alert('你好，世界!')">点击我</button>

2.1.2 内部脚本示例

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 示例</title>
    <script>
        function sayHello() {
            alert('你好，世界!');
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">点击我</button>
</body>
</html>

2.1.3 外部脚本示例

HTML文件:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 示例</title>
    <script src="script.js"></script>
</head>
<body>
    <button onclick="sayHello()">点击我</button>
</body>
</html>

script.js文件:

function sayHello() {
    alert('你好，世界!');
}

3. JavaScript 基础语法

3.1 变量和数据类型

JavaScript 中的变量可以使用 var、let 或 const 关键字声明。

// 使用 var (旧语法，作用域为函数)
var name = "张三";

// 使用 let (推荐，块级作用域)
let age = 25;

// 使用 const (常量，一旦赋值不能改变)
const PI = 3.14159;

3.1.1 基本数据类型

JavaScript 有七种基本数据类型：

  1. String（字符串）
  2. Number（数字）
  3. Boolean（布尔值）
  4. Undefined（未定义）
  5. Null（空值）
  6. Symbol（符号，ES6新增）
  7. BigInt（大整数，ES2020新增）
// String
let name = "李四";

// Number
let age = 30;
let price = 99.99;

// Boolean
let isActive = true;

// Undefined
let job;

// Null
let car = null;

// Symbol
let id = Symbol("id");

// BigInt
let bigNumber = 1234567890123456789012345n;

3.2 运算符

3.2.1 算术运算符

let a = 10;
let b = 3;

// 加法
let sum = a + b;  // 13

// 减法
let difference = a - b;  // 7

// 乘法
let product = a * b;  // 30

// 除法
let quotient = a / b;  // 3.3333...

// 取余
let remainder = a % b;  // 1

// 幂运算
let power = a ** b;  // 1000

// 自增
a++;  // a 现在是 11

// 自减
b--;  // b 现在是 2

3.2.2 比较运算符

let x = 5;
let y = "5";

// 相等 (值相等)
console.log(x == y);  // true

// 严格相等 (值和类型都相等)
console.log(x === y);  // false

// 不相等
console.log(x != y);  // false

// 严格不相等
console.log(x !== y);  // true

// 大于
console.log(x > 3);  // true

// 小于
console.log(x < 10);  // true

// 大于等于
console.log(x >= 5);  // true

// 小于等于
console.log(x <= 4);  // false

3.3 条件语句

3.3.1 if-else 语句

let hour = 14;
let greeting;

if (hour < 12) {
    greeting = "早上好";
} else if (hour < 18) {
    greeting = "下午好";
} else {
    greeting = "晚上好";
}

console.log(greeting);  // "下午好"

3.3.2 switch 语句

let day = 3;
let dayName;

switch (day) {
    case 1:
        dayName = "星期一";
        break;
    case 2:
        dayName = "星期二";
        break;
    case 3:
        dayName = "星期三";
        break;
    case 4:
        dayName = "星期四";
        break;
    case 5:
        dayName = "星期五";
        break;
    case 6:
        dayName = "星期六";
        break;
    case 7:
        dayName = "星期日";
        break;
    default:
        dayName = "无效的日期";
}

console.log(dayName);  // "星期三"

3.4 循环语句

3.4.1 for 循环

// 打印1到5的数字
for (let i = 1; i <= 5; i++) {
    console.log(i);
}

3.4.2 while 循环

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

3.4.3 do-while 循环

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

3.4.4 for…of 循环 (ES6)

let colors = ["红", "绿", "蓝"];

for (let color of colors) {
    console.log(color);
}

4. 函数

4.1 函数声明

// 函数声明
function greet(name) {
    return "你好，" + name + "！";
}

// 调用函数
let message = greet("王五");
console.log(message);  // "你好，王五！"

4.2 函数表达式

// 函数表达式
const square = function(number) {
    return number * number;
};

console.log(square(4));  // 16

4.3 箭头函数 (ES6)

// 箭头函数
const add = (a, b) => a + b;

console.log(add(5, 3));  // 8

// 多行箭头函数
const multiply = (a, b) => {
    let result = a * b;
    return result;
};

console.log(multiply(4, 2));  // 8

5. 数组

5.1 创建数组

// 使用数组字面量
let fruits = ["苹果", "香蕉", "橙子"];

// 使用 Array 构造函数
let numbers = new Array(1, 2, 3, 4, 5);

5.2 访问数组元素

let fruits = ["苹果", "香蕉", "橙子"];

// 通过索引访问元素（索引从0开始）
console.log(fruits[0]);  // "苹果"
console.log(fruits[1]);  // "香蕉"
console.log(fruits[2]);  // "橙子"

// 获取数组长度
console.log(fruits.length);  // 3

5.3 常用数组方法

let fruits = ["苹果", "香蕉", "橙子"];

// 添加元素到数组末尾
fruits.push("葡萄");
console.log(fruits);  // ["苹果", "香蕉", "橙子", "葡萄"]

// 从数组末尾删除元素
let lastFruit = fruits.pop();
console.log(lastFruit);  // "葡萄"
console.log(fruits);  // ["苹果", "香蕉", "橙子"]

// 添加元素到数组开头
fruits.unshift("草莓");
console.log(fruits);  // ["草莓", "苹果", "香蕉", "橙子"]

// 从数组开头删除元素
let firstFruit = fruits.shift();
console.log(firstFruit);  // "草莓"
console.log(fruits);  // ["苹果", "香蕉", "橙子"]

// 查找元素在数组中的位置
console.log(fruits.indexOf("香蕉"));  // 1

// 数组切片
let citrus = fruits.slice(1, 3);
console.log(citrus);  // ["香蕉", "橙子"]

// 数组连接
let moreFruits = ["葡萄", "芒果"];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits);  // ["苹果", "香蕉", "橙子", "葡萄", "芒果"]

6. 对象

6.1 创建对象

// 使用对象字面量
let person = {
    firstName: "张",
    lastName: "三",
    age: 30,
    isEmployed: true,
    fullName: function() {
        return this.lastName + this.firstName;
    }
};

// 使用 Object 构造函数
let car = new Object();
car.brand = "丰田";
car.model = "卡罗拉";
car.year = 2020;

6.2 访问对象属性

let person = {
    firstName: "张",
    lastName: "三",
    age: 30
};

// 使用点表示法
console.log(person.firstName);  // "张"

// 使用方括号表示法
console.log(person["lastName"]);  // "三"

6.3 对象方法

let person = {
    firstName: "张",
    lastName: "三",
    fullName: function() {
        return this.lastName + this.firstName;
    }
};

// 调用对象方法
console.log(person.fullName());  // "张三"

7. DOM 操作

DOM (Document Object Model，文档对象模型) 是HTML和XML文档的编程接口。

7.1 选择DOM元素

// 通过ID选择元素
let element = document.getElementById("myElement");

// 通过类名选择元素
let elements = document.getElementsByClassName("myClass");

// 通过标签名选择元素
let paragraphs = document.getElementsByTagName("p");

// 使用CSS选择器选择元素（单个元素）
let container = document.querySelector(".container");

// 使用CSS选择器选择元素（多个元素）
let items = document.querySelectorAll(".item");

7.2 修改DOM元素

// 修改元素内容
document.getElementById("demo").innerHTML = "你好，世界！";

// 修改元素属性
document.getElementById("myImage").src = "image.jpg";

// 修改元素样式
document.getElementById("myText").style.color = "red";
document.getElementById("myText").style.fontSize = "20px";

// 添加CSS类
document.getElementById("myElement").classList.add("highlight");

// 移除CSS类
document.getElementById("myElement").classList.remove("active");

// 切换CSS类
document.getElementById("myElement").classList.toggle("visible");

7.3 添加和删除元素

// 创建新元素
let newParagraph = document.createElement("p");
let textNode = document.createTextNode("这是一个新段落");
newParagraph.appendChild(textNode);

// 将新元素添加到DOM中
document.getElementById("container").appendChild(newParagraph);

// 删除元素
let element = document.getElementById("oldElement");
element.parentNode.removeChild(element);

8. 事件处理

8.1 添加事件监听器

// 使用 addEventListener 方法
document.getElementById("myButton").addEventListener("click", function() {
    alert("按钮被点击了！");
});

// 使用命名函数
function handleClick() {
    alert("按钮被点击了！");
}

document.getElementById("myButton").addEventListener("click", handleClick);

8.2 常见事件类型

  1. 鼠标事件：click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout
  2. 键盘事件：keydown, keyup, keypress
  3. 表单事件：submit, change, focus, blur
  4. 窗口事件：load, resize, scroll, unload
// 鼠标事件示例
document.getElementById("myElement").addEventListener("mouseover", function() {
    this.style.backgroundColor = "yellow";
});

document.getElementById("myElement").addEventListener("mouseout", function() {
    this.style.backgroundColor = "";
});

// 键盘事件示例
document.addEventListener("keydown", function(event) {
    console.log("按键代码: " + event.keyCode);
});

// 表单事件示例
document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault();  // 阻止表单默认提交行为
    console.log("表单提交");
});

// 窗口事件示例
window.addEventListener("resize", function() {
    console.log("窗口大小改变了");
});

9. AJAX 和 Fetch API

9.1 使用 XMLHttpRequest

// 创建 XMLHttpRequest 对象
let xhr = new XMLHttpRequest();

// 配置请求
xhr.open("GET", "https://api.example.com/data", true);

// 设置回调函数
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        let response = JSON.parse(xhr.responseText);
        console.log(response);
    }
};

// 发送请求
xhr.send();

9.2 使用 Fetch API (现代方法)

// 基本用法
fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("发生错误:", error));

// 配置请求选项
fetch("https://api.example.com/data", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        name: "张三",
        age: 30
    })
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("发生错误:", error));

10. JavaScript 语言特性使用统计

10.1 JavaScript 特性使用频率分析

pie
title JavaScript 特性使用频率统计 (2024)
“变量声明” : 20
“函数” : 25
“对象” : 18
“数组” : 15
“DOM操作” : 12
“事件处理” : 8
“异步处理” : 2

10.2 前端开发中 JavaScript 框架使用统计

40% 20% 12% 8% 15% 5% 前端框架使用统计 (2024) React Vue Angular Svelte jQuery 其他

11. JavaScript 发展历程

timeline
    title JavaScript 发展历程
    1995 : 作为Netscape浏览器脚本语言诞生
         : 最初名为LiveScript
    1996 : 被标准化为ECMA-262
    1997 : ECMAScript 1.0标准发布
    1999 : ECMAScript 3.0发布
         : 增加正则表达式和异常处理
    2009 : ECMAScript 5发布
         : 增加严格模式和JSON支持
    2015 : ECMAScript 6 (ES2015)发布
         : 增加let/const、箭头函数、模块等
    2016 : ECMAScript 2016发布
    2017 : ECMAScript 2017发布
         : 增加async/await
    2018 : ECMAScript 2018发布
    2019 : ECMAScript 2019发布
    2020 : ECMAScript 2020发布
    2021 : ECMAScript 2021发布
    2022 : ECMAScript 2022发布
    2023 : ECMAScript 2023发布
    2024 : ECMAScript 2024发布

结语
感谢您的阅读！期待您的一键三连！欢迎指正！

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Guiat

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值