JavaScript语言基础教程笔记

于 2024-10-02 13:53:30 发布
阅读量868 收藏 9
点赞数 7
分类专栏： 各类语言和技术总结笔记 文章标签： javascript 笔记 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ashyyyy/article/details/142680822
版权

JavaScript语言基础教程笔记

下面是一个全面的 JavaScript 教程，适合初学者和有一定编程经验的人士。JavaScript 是一种广泛用于网页开发的脚本语言，支持事件驱动、函数式以及基于原型的编程风格。

JavaScript 入门教程

1. 简介
  • 定义：JavaScript（简称 JS）是一种高级编程语言，主要用于网页浏览器中实现复杂的交互功能。
  • 用途：
    • 前端开发：网页上的动态内容和用户交互。
    • 后端开发：使用 Node.js 进行服务器端编程。
    • 移动应用开发：React Native、Ionic 等框架。
    • 游戏开发：使用 Phaser 等游戏引擎。
  • 特点：
    • 解释型语言，不需要编译。
    • 动态类型，变量类型在运行时确定。
    • 基于原型的继承。
    • 异步编程模型（回调、Promise、async/await）。
2. 开发环境设置
浏览器
  • 你可以在任何现代浏览器（如 Chrome、Firefox、Safari）中直接运行 JavaScript 代码。
  • 打开浏览器的开发者工具（通常按 F12 或 Ctrl+Shift+I），选择“Console”标签页，就可以输入和运行 JavaScript 代码。
本地开发
  • 文本编辑器：安装一个代码编辑器，如 Visual Studio Code (VSCode)、Sublime Text 或 Atom。
  • Node.js：如果你打算进行后端开发或使用 npm 包管理器，可以安装 Node.js。
    # 安装 Node.js 和 npm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
nvm install node
3. 基础语法
注释
  • 单行注释使用 //。
  • 多行注释使用 /* ... */。
// 这是单行注释
/*
这是多行注释
可以跨越多行
*/
变量
  • 使用 let 和 const 声明变量。
  • var 已经不推荐使用。
let name = "Alice";
const age = 30;
数据类型
  • 基本类型：number, string, boolean, null, undefined, symbol（ES6 新增）。
  • 引用类型：object, array, function。
let num = 42;         // number
let str = "Hello";    // string
let isTrue = true;    // boolean
let obj = {};         // object
let arr = [];         // array
let func = function() {}; // function
字符串
  • 使用单引号或双引号定义字符串。
  • 模板字符串使用反引号 `，支持内嵌表达式 ${expression}。
let name = "Alice";
let greeting = `Hello, ${name}!`; // 输出: Hello, Alice!
数组
  • 使用方括号 [] 定义数组。
  • 提供多种方法进行操作：push, pop, shift, unshift, slice, splice 等。
let fruits = ["apple", "banana", "cherry"];
fruits.push("date"); // 添加元素
console.log(fruits); // 输出: ["apple", "banana", "cherry", "date"]
对象
  • 使用花括号 {} 定义对象。
  • 属性访问方式：点操作符 . 或方括号 []。
let person = {
    name: "Alice",
    age: 30,
    sayHello: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

person.sayHello(); // 输出: Hello, my name is Alice
4. 控制结构
条件语句
  • if...else 语句
let age = 18;

if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are a minor.");
}
  • switch 语句
let day = "Monday";

switch (day) {
    case "Monday":
        console.log("It's Monday");
        break;
    case "Tuesday":
    case "Wednesday":
        console.log("It's midweek");
        break;
    default:
        console.log("It's the weekend");
}
循环
  • for 循环
for (let i = 0; i < 5; i++) {
    console.log(i); // 输出: 0, 1, 2, 3, 4
}
  • while 循环
let i = 0;
while (i < 5) {
    console.log(i); // 输出: 0, 1, 2, 3, 4
    i++;
}
  • do...while 循环
let j = 0;
do {
    console.log(j); // 输出: 0, 1, 2, 3, 4
    j++;
} while (j < 5);
  • for...of 循环（用于迭代可迭代对象）
let colors = ["red", "green", "blue"];
for (let color of colors) {
    console.log(color); // 输出: red, green, blue
}
  • for...in 循环（用于迭代对象的属性）
let person = { name: "Alice", age: 30 };
for (let key in person) {
    console.log(key, person[key]); // 输出: name Alice, age 30
}
5. 函数
定义函数
  • 使用 function 关键字定义函数。
  • 使用箭头函数简化函数定义。
// 普通函数
function greet(name) {
    return `Hello, ${name}!`;
}

// 箭头函数
const greetArrow = (name) => `Hello, ${name}!`;

console.log(greet("Alice")); // 输出: Hello, Alice!
console.log(greetArrow("Bob")); // 输出: Hello, Bob!
默认参数
  • ES6 引入了默认参数。
function greet(name = "Guest") {
    return `Hello, ${name}!`;
}

console.log(greet()); // 输出: Hello, Guest!
console.log(greet("Alice")); // 输出: Hello, Alice!
闭包
  • 内部函数可以访问外部函数的作用域。
function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2
6. 面向对象编程
对象创建
  • 使用对象字面量创建对象。
  • 使用构造函数创建对象。
  • 使用 class 语法（ES6 新增）。
// 对象字面量
let person = {
    name: "Alice",
    age: 30,
    sayHello: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

// 构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log(`Hello, my name is ${this.name}`);
    };
}

const alice = new Person("Alice", 30);
alice.sayHello(); // 输出: Hello, my name is Alice

// 类
class PersonClass {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

const bob = new PersonClass("Bob", 25);
bob.sayHello(); // 输出: Hello, my name is Bob
继承
  • 使用 extends 关键字实现类的继承。
class Animal {
    constructor(name) {
        this.name = name;
    }

    makeSound() {
        console.log("Some generic animal sound");
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name); // 调用父类构造函数
    }

    makeSound() {
        console.log("Woof!");
    }
}

const dog = new Dog("Buddy");
dog.makeSound(); // 输出: Woof!
7. 异步编程
回调函数
  • 回调函数用于处理异步操作的结果。
function fetchData(callback) {
    setTimeout(() => {
        callback("Data fetched successfully");
    }, 1000);
}

fetchData((result) => {
    console.log(result); // 输出: Data fetched successfully
});
Promise
  • Promise 用于处理异步操作，并提供更清晰的错误处理机制。
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched successfully");
        }, 1000);
    });
}

fetchData()
    .then((result) => {
        console.log(result); // 输出: Data fetched successfully
    })
    .catch((error) => {
        console.error(error);
    });
async/await
  • async/await 语法糖使异步代码看起来像同步代码。
async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched successfully");
        }, 1000);
    });
}

async function main() {
    try {
        const result = await fetchData();
        console.log(result); // 输出: Data fetched successfully
    } catch (error) {
        console.error(error);
    }
}

main();
8. DOM 操作
获取元素
  • 使用 document.querySelector 和 document.querySelectorAll 获取元素。
const element = document.querySelector("#myElement");
const elements = document.querySelectorAll(".myClass");
修改元素
  • 修改元素的内容和属性。
element.textContent = "New content";
element.style.color = "red";
element.classList.add("new-class");
事件处理
  • 为元素添加事件监听器。
element.addEventListener("click", () => {
    console.log("Element was clicked!");
});

// 移除事件监听器
element.removeEventListener("click", handlerFunction);
9. AJAX 和 Fetch API
XMLHttpRequest
  • 传统的 AJAX 请求方式。
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
    }
};
xhr.send();
Fetch API
  • 现代的 AJAX 请求方式，基于 Promise。
fetch("https://api.example.com/data")
    .then((response) => response.json())
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.error(error);
    });

// 使用 async/await
async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

fetchData();
10. 常见库和框架
  • jQuery：简化 DOM 操作和事件处理。
  • React：用于构建用户界面的 JavaScript 库。
  • Vue.js：渐进式 JavaScript 框架。
  • Angular：完整的前端框架。
  • Node.js：用于后端开发的 JavaScript 运行时环境。
  • Express：基于 Node.js 的 Web 应用框架。

总结

以上是一个全面的 JavaScript 入门教程，涵盖了从基础语法到高级特性的各个方面。通过这些基础知识，你可以开始编写简单的 JavaScript 程序，并进一步探索更复杂的功能和创意。如果你希望深入学习，可以参考官方文档、在线课程和社区资源，并通过实际项目来练习 JavaScript 技能。

梵心白莲
关注
专栏目录
JavaScript基础教程笔记（一）
sapphire7的博客
08-13 520
所有的主流浏览器都支持JavaScript，它可以让网页呈现各种动态效果。
JavaScript 基础语法笔记
weixin_54373148的博客
01-02 715
JavaScript 笔记（上）基础语法
Javascript入门学习笔记
weixin_61370021的博客
04-27 4664
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
JavaScript(基础、高级)笔记汇总表【尚硅谷JavaScript全套教程完整版】
热门推荐
upward
09-16 2万+
尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)
JavaScript 基础知识 学习笔记
m0_56387086的博客
07-17 469
JavaScript相关知识点的笔记
JavaScript基础 《JavaScript 语言入门教程》笔记
虾米的日常总结
09-12 706
本篇博客是根据《JavaScript 语言入门教程》做的一个简略版笔记，方便以后查阅。 非常感谢这个教程文档的贡献者，对我很有帮助。 文章目录JavaScript 的基本语法数据类型函数闭包数组运算符 JavaScript 的基本语法 JavaScript 是大小写敏感的。 如果变量只声明没有赋值，则变量的值为undefined（表示无定义）。声明变量时没有写var也是可以的（不建议）。变量没声明就使用会报错。 var a = 1;//变量的声明和赋值 var b; c // undefined
JavaScript基础笔记
小电车没有名字
04-03 596
JavaScript基础笔记
JavaScript 学习笔记 总结
Jay17的博客
06-06 1188
JavaScript 学习笔记 总结
学习笔记 JavaScript基础语法（全）
weixin_63676550的博客
01-15 8464
JavaScript基础语法学习笔记，视频教程链接放在末尾
JAVASCRIPT基础教程笔记.pdf
07-14
这份基础教程涵盖了JavaScript的核心概念，包括变量、数据类型、控制结构、面向对象编程、数组、日期对象以及全局对象的一些关键方法。 1. **控制结构**： - `break` 用于在循环中立即终止整个循环，跳到循环体...
JavaScript李立超基础篇笔记.docx
02-02
总的来说，李立超的JavaScript基础篇教程涵盖了语言的基础知识，包括其历史、特点、基本语法、数据类型、变量和标识符的使用，以及代码编写的位置和方式，是学习JavaScript入门的宝贵资料。通过深入理解和实践这些...
JavaScript基础教程笔记
02-15
### JavaScript基础教程笔记知识点 #### 一、JavaScript简介 - **定义**：JavaScript是一种轻量级的编程语言，主要用于Web浏览器中的网页交互控制。 - **发展历史**：1995年由Netscape公司的Brendan Eich设计并...
爬虫基础教程笔记.rar
11-12
【爬虫基础教程笔记】 爬虫，全称网络爬虫，是自动化地抓取互联网信息的一种程序或脚本。在Python编程语言中，爬虫技术因其简洁高效的语法特性而广泛应用。本教程笔记主要针对初学者，旨在帮助小白快速掌握Python...
如何搭建Vue脚手架
w6437286的博客
09-26 493
本文主要讲解如何搭建vue脚手架。
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 262
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
最新发布
2301_77012231的博客
10-01 275
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 477
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
深入理解 Nuxt.js 中的 app:data:refresh 钩子
09-29 1291
钩子在数据被刷新时触发，可以选择性地传入要刷新的键名（keys）。这为开发者提供了一个灵活的机制来响应数据变化，并进行必要的更新。Nuxt.js 中的钩子的用途及其实现方法。这个钩子为开发者提供了一种灵活的方式来处理数据的更新，从而优化应用的响应性和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值