JavaScript入门
JS简介
JavaScript基础分为三个部分：
- ECMAScript：JavaScript的语法标准，包括变量、表达式、运算符、函数、控制语句等。
- DOM：Document Object Model，操作页面元素的API。
- BOM：Browser Object Model，操作浏览器功能的API。
JavaScript的特点：
- 解释型语言：边翻译边执行。
- 单线程执行。
- ECMAScript标准：ES6引入了许多新特性。
HelloWorld示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
alert("你好，HelloWorld ！");
document.write("向body中输出内容");
console.log("向控制台输出内容");
</script>
</head>
<body>
</body>
</html>
JS编写位置
-
在
<script>标签中：<script> // JS代码 </script> -
在标签的事件属性中，如
onclick：<button onclick="alert('别点击我！');">点击我一下！</button> -
在外部文件中，通过
<script src="..."></script>引入：<script src="./external-script.js"></script>
基本语法
-
注释：
- 单行注释：
// 这是注释 - 多行注释：
/* 这是注释 */
- 单行注释：
-
语句结束：使用分号
;。 -
空格和换行：JS会自动忽略，用于格式化代码。
快速入门
基本语法
JavaScript 是一种轻量级的编程语言，它允许您创建动态的网页内容。基本语法包括变量声明、数据类型、运算符等。
示例代码：
// 声明变量
var name = "Alice";
var age = 25;
// 输出到控制台
console.log("Hello, " + name + "! You are " + age + " years old.");
数据类型和变量
JavaScript 有多种数据类型，包括字符串、数字、布尔值、对象、数组等。变量是存储数据的容器。
示例代码：
// 字符串
var greeting = "Hello";
// 数字
var number = 42;
// 布尔值
var isTrue = true;
// 对象
var person = {
name: "Bob",
age: 30
};
// 数组
var colors = ["red", "green", "blue"];
字符串
字符串是 JavaScript 中的一种数据类型，用于存储文本。
示例代码：
// 创建字符串
var str = "Hello, World!";
// 字符串连接
var message = "Hello, " + str + "!";
数组
数组是一种数据结构，用于存储多个值。
示例代码：
// 创建数组
var fruits = ["apple", "banana", "cherry"];
// 访问数组元素
console.log(fruits[0]); // 输出: apple
对象
对象是键值对的集合，用于存储更复杂的数据。
示例代码：
// 创建对象
var car = {
brand: "Toyota",
model: "Corolla",
year: 2020
};
// 访问对象属性
console.log(car.brand); // 输出: Toyota
条件判断
条件判断用于基于不同的条件执行不同的代码块。
示例代码：
var score = 85;
if (score >= 90) {
console.log("Excellent");
} else if (score >= 80) {
console.log("Good");
} else {
console.log("Needs improvement");
}
循环
循环用于重复执行一段代码。
示例代码：
// for 循环
for (var i = 0; i < 5; i++) {
console.log(i);
}
// while 循环
var j = 0;
while (j < 5) {
console.log(j);
j++;
}
Map 和 Set
Map 和 Set 是 ES6 引入的新的集合类型。
示例代码：
// Map
var map = new Map();
map.set("key1", "value1");
map.set("key2", "value2");
// Set
var set = new Set();
set.add("value1");
set.add("value2");
iterable
可迭代对象是那些可以使用 for...of 循环进行迭代的对象。
示例代码：
// 数组是可迭代的
for (var value of [1, 2, 3]) {
console.log(value);
}
函数
函数定义和调用
函数是一段可以重复使用的代码块。
示例代码：
// 定义函数
function greet(name) {
console.log("Hello, " + name + "!");
}
// 调用函数
greet("Alice");
变量作用域与解构赋值
变量作用域决定了变量的可访问性。解构赋值允许你从数组或对象中提取数据并赋值给新的变量。
示例代码：
// 函数内部变量作用域
function getPerson() {
var name = "Bob";
return name;
}
// 解构赋值
var person = {
name: "Alice",
age: 25
};
var { name, age } = person;
方法
方法是一种特殊的函数，它是对象的属性。
示例代码：
// 对象方法
var car = {
brand: "Toyota",
model: "Corolla",
year: 2020,
displayInfo: function() {
console.log(this.brand + " " + this.model + " (" + this.year + ")");
}
};
// 调用方法
car.displayInfo();
闭包
闭包是能够访问其外部函数作用域的函数。
示例代码：
function createGreeting(name) {
return function() {
console.log("Hello, " + name + "!");
};
}
var greetAlice = createGreeting("Alice");
greetAlice();
箭头函数
箭头函数是 ES6 引入的一种新的函数写法，它更简洁。
示例代码：
// 箭头函数
const sum = (a, b) => a + b;
console.log(sum(5, 10)); // 输出: 15
标签函数
标签函数是一种可以被 break 或 continue 语句引用的函数。
示例代码：
// 标签函数
label: for (var i = 0; i < 5; i++) {
for (var j = 0; j < 5; j++) {
if (i === 2 && j === 2) {
break label;
}
console.log(i + ", " + j);
}
}
生成器
生成器是一种特殊的函数，它可以使用 yield 关键字返回一个值，并且可以暂停和恢复执行。
示例代码：
// 生成器函数
function* generateSequence() {
yield 1;
yield 2;
yield 3;
}
// 使用生成器
var generator = generateSequence();
console.log(generator.next().value); // 输出: 1
console.log(generator.next().value); // 输出: 2
console.log(generator.next().value); // 输出: 3
标准对象
Date
Date 对象用于处理日期和时间。
示例代码：
// 创建日期对象
var now = new Date();
// 获取当前年份
console.log(now.getFullYear());
JSON
JSON 是一种轻量级的数据交换格式，JSON 对象用于解析和字符串化 JSON 数据。
示例代码：
// 解析 JSON 字符串
var obj = JSON.parse('{"name": "Alice", "age": 25}');
// 字符串化对象
var jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出: '{"name":"Alice","age":25}'
面向对象编程
创建对象
在 JavaScript 中，可以通过字面量、构造函数或 Object.create() 方法来创建对象。
示例代码：
// 字面量方式
var obj = {
name: "Alice",
age: 25
};
// 构造函数方式
function Person(name, age) {
this.name = name;
this.age = age;
}
var person = new Person("Bob", 30);
// Object.create() 方法
var anotherPerson = Object.create(Person.prototype);
anotherPerson.name = "Charlie";
anotherPerson.age = 35;
class 继承
ES6 引入了 class 关键字，使得面向对象编程更加清晰和易于理解。
示例代码：
class Animal {
walk() {
console.log("Walking");
}
}
class Dog extends Animal {
bark() {
console.log("Barking");
}
}
var myDog = new Dog();
myDog.walk(); // 继承自 Animal
myDog.bark(); // Dog 自身的方法
浏览器
浏览器对象
浏览器提供了许多内置对象，如 window、document、console 等，用于与浏览器交互。
示例代码：
// 输出到控制台
console.log("Hello, World!");
// 操作 DOM
document.getElementById("myElement").style.color = "red";
操作 DOM
DOM（Document Object Model）是文档对象模型，它允许 JavaScript 访问和操作 HTML 文档。
示例代码：
// 获取元素
var element = document.getElementById("myElement");
// 修改内容
element.innerHTML = "New content";
// 添加事件监听器
element.addEventListener("click", function() {
console.log("Element clicked");
});
操作表单
JavaScript 可以操作 HTML 表单元素，获取用户输入的数据。
示例代码：
// 获取表单元素
var input = document.getElementById("myInput");
// 获取输入值
console.log(input.value);
// 设置输入值
input.value = "New value";
操作文件
JavaScript 可以读取用户选择的文件，并进行一些基本的操作。
示例代码：
// 文件输入元素
var fileInput = document.getElementById("myFileInput");
// 文件选择事件
fileInput.addEventListener("change", function() {
var file = this.files[0];
console.log(file.name);
});
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
