1. JavaScript语言概述
JavaScript是一种脚本语言，主要用于Web前端开发，也可用于服务器端开发（如Node.js）。它是Web开发的三大核心技术之一（HTML、CSS、JavaScript），用于实现网页的交互功能。更多学习教程www.fgedu.net.cn
2. JavaScript基础语法
JavaScript基础语法包括变量、数据类型、运算符、控制语句等基本元素。
console.log(“Hello, World!”);
// 变量声明
var x = 10;
let y = 20;
const z = 30;
// 数据类型
let stringVar = “Hello”;
let numberVar = 42;
let booleanVar = true;
let nullVar = null;
let undefinedVar = undefined;
let objectVar = { name: “John”, age: 30 };
let arrayVar = [1, 2, 3, 4, 5];
// 控制语句
if (x > 5) {
console.log(“x is greater than 5”);
} else {
console.log(“x is less than or equal to 5”);
}
// 循环
for (let i = 0; i < 5; i++) {
console.log(i);
}
// 函数
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("Alice"));
3. JavaScript DOM操作
DOM（Document Object Model）是HTML和XML文档的编程接口，JavaScript可以通过DOM操作网页元素。学习交流加群风哥微信: itpux-com
Hello World
This is a paragraph.
- Item 1
- Item 2
4. JavaScript事件处理
JavaScript可以处理各种事件，如点击、鼠标移动、键盘输入等。
5. JavaScript对象
JavaScript是一种面向对象的语言，对象是JavaScript的核心概念。学习交流加群风哥QQ113257174
const person = {
name: “John”,
age: 30,
greet: function() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.name);
console.log(person.greet());
// 构造函数
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
return `Hello, my name is ${this.name}`;
};
}
const person1 = new Person(“Alice”, 20);
console.log(person1.name);
console.log(person1.greet());
// 原型
Person.prototype.sayAge = function() {
return `I am ${this.age} years old`;
};
console.log(person1.sayAge());
// ES6类
class PersonClass {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
return `Hello, my name is ${this.name}`;
}
sayAge() {
return `I am ${this.age} years old`;
}
}
const person2 = new PersonClass(“Bob”, 25);
console.log(person2.greet());
6. JavaScript函数
JavaScript函数是一等公民，可以作为变量、参数和返回值。更多学习教程公众号风哥教程itpux_com
function add(a, b) {
return a + b;
}
// 函数表达式
const subtract = function(a, b) {
return a – b;
};
// 箭头函数
const multiply = (a, b) => a * b;
// 回调函数
function processArray(arr, callback) {
return arr.map(callback);
}
const numbers = [1, 2, 3, 4, 5];
const squared = processArray(numbers, x => x * x);
console.log(squared);
// 闭包
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
7. JavaScript异步编程
JavaScript是单线程的，使用异步编程处理耗时操作，如网络请求、文件操作等。
function fetchData(callback) {
setTimeout(() => {
callback(“Data received”);
}, 1000);
}
fetchData(data => {
console.log(data);
});
// Promise
function fetchDataPromise() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(“Data received”);
// reject(“Error”);
}, 1000);
});
}
fetchDataPromise()
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
// async/await
async function fetchDataAsync() {
try {
const data = await fetchDataPromise();
console.log(data);
} catch (error) {
console.error(error);
}
}
fetchDataAsync();
8. JavaScript ES6+特性
ES6（ECMAScript 2015）及以后版本引入了许多新特性，如箭头函数、解构赋值、模板字符串等。
const person = { name: “John”, age: 30 };
const { name, age } = person;
console.log(name, age);
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c);
// 模板字符串
const greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting);
// 展开运算符
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = […arr1, …arr2];
console.log(combined);
// 剩余参数
function sum(…args) {
return args.reduce((total, current) => total + current, 0);
}
console.log(sum(1, 2, 3, 4, 5));
// 默认参数
function greet(name = “World”) {
return `Hello, ${name}!`;
}
console.log(greet());
console.log(greet(“Alice”));
9. JavaScript开发工具
JavaScript开发工具可以提高开发效率，常用的工具包括包管理器、构建工具、代码编辑器等。author:www.itpux.com
# 初始化项目
# npm init -y
# 安装依赖
# npm install express
# 安装开发依赖
# npm install –save-dev webpack
// 构建工具
# 安装webpack
# npm install –save-dev webpack webpack-cli
# 配置webpack.config.js
const path = require(‘path’);
module.exports = {
entry: ‘./src/index.js’,
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘bundle.js’
}
};
// 运行构建
# npx webpack
// 代码编辑器
// VS Code、Sublime Text、Atom等
10. JavaScript开发最佳实践
JavaScript开发的最佳实践包括代码风格、性能优化、错误处理等方面。
// 使用ESLint检查代码风格
# npm install –save-dev eslint
// 配置.eslintrc.json
{
“extends”: “eslint:recommended”,
“rules”: {
“semi”: [“error”, “always”],
“quotes”: [“error”, “single”]
}
}
// 性能优化
// 避免频繁DOM操作
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const div = document.createElement('div');
div.textContent = i;
fragment.appendChild(div);
}
document.body.appendChild(fragment);
// 使用事件委托
document.getElementById('list').addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
console.log('List item clicked:', e.target.textContent);
}
});
// 错误处理
try {
// 可能抛出错误的代码
const result = 10 / 0;
} catch (error) {
console.error('Error:', error);
} finally {
// 无论是否发生错误都会执行的代码
console.log('Execution completed');
}
本文由风哥教程整理发布,仅用于学习测试使用,转载注明出处:http://www.fgedu.net.cn/10327.html
