技术标签: 学习 基础详细 JavaScript 前端 ecmascript
在此之前我以及发布过关于JavaScript基础知识点大家也可以参考
大家有关于JavaScript知识点不知道可以去
博客主页:阿猫的故乡
系列专栏:JavaScript专题栏
欢迎关注:点赞收藏️留言
以下我总结关于ecm重要知识点!
目录
ECMAScript简介:了解ECMAScript的起源、发展历程和版本:
JavaScript基础语法:学习变量、数据类型、运算符、条件语句、循环语句等基本语法。
函数和对象:掌握函数的定义与调用、作用域、闭包等概念;学习对象的创建、属性与方法的使用。
DOM操作:理解DOM的概念,学习如何通过JavaScript操作HTML元素。
事件处理:学习如何使用事件监听器和事件处理函数来实现交互功能。
异步编程:掌握异步编程的概念,学习使用回调函数、Promise和async/await处理异步任务。
错误处理和调试:了解常见的JavaScript错误类型和调试技巧。
ECMAScript(简称ES)是一种由ECMA国际(European Computer Manufacturers Association)制定的脚本语言标准,最初于1997年发布。ECMAScript是JavaScript的规范化版本,JavaScript是ECMAScript在Web浏览器中的实现。
起源:ECMAScript起源于Netscape公司推出的一种名为LiveScript的脚本语言,后来与Sun公司合作进行标准化,并更名为JavaScript。为了确保JavaScript的规范性和跨平台性,ECMA国际成立了TC39委员会,负责制定和更新ECMAScript标准。
发展历程:ECMAScript标准经历了多个版本的发展。最早的版本是ECMAScript 1,随后是ECMAScript 2、ECMAScript 3、ECMAScript 4(未通过)和ECMAScript 5。ECMAScript 5在2009年发布,成为JavaScript的主流版本。之后,ECMAScript进入了一种按年份命名的更新模式,例如ECMAScript 2015、ECMAScript 2016和ECMAScript 2017等。从ECMAScript 2015开始,标准每年发布一个新版本,引入了许多新的语言特性和功能。
版本:每个ECMAScript版本都有其特定的特性和升级内容。例如,ECMAScript 5引入了严格模式、JSON对象和数组的新方法等。ECMAScript 2015引入了let和const关键字、箭头函数、模板字符串等新特性。而ECMAScript 2016和ECMAScript 2017则引入了更多的功能,如可选链操作符(Optional Chaining)、空值合并操作符(Nullish Coalescing Operator)、异步函数等。
通过了解ECMAScript的起源、发展历程和不同版本的特性,我们可以更好地理解和应用JavaScript。同时,了解ECMAScript的最新特性和更新内容也有助于我们保持对JavaScript语言的学习和技术的更新。
JavaScript基础语法是学习和理解JavaScript编程的重要一步。以下是一些常见的基础语法内容:
变量:学习如何声明和使用变量,了解变量的作用域和命名规则。
// 声明和初始化变量
var name = "John";
let age = 25;
const PI = 3.14;
// 输出变量的值
console.log(name);
数据类型:了解JavaScript的基本数据类型,如字符串、数字、布尔值和特殊值(null和undefined)。
let name = "John";
let age = 25;
let isStudent = true;
let address = null;
let phoneNumber; // undefined
console.log(typeof name); // 输出 "string"
运算符:学习JavaScript的算术运算符、比较运算符、逻辑运算符以及赋值运算符等。
let num1 = 10;
let num2 = 5;
let sum = num1 + num2; // 加法运算
let difference = num1 - num2; // 减法运算
let product = num1 * num2; // 乘法运算
let quotient = num1 / num2; // 除法运算
let remainder = num1 % num2; // 取余运算
console.log(sum); // 输出 15
条件语句:学习使用if语句、switch语句等进行条件判断。
let age = 18;
if (age >= 18) {
console.log("成年人");
} else {
console.log("未成年人");
}
循环语句:学习使用for循环、while循环等进行重复执行一段代码。
for (let i = 0; i < 5; i++) {
console.log(i);
}
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
通过以上的基础语法的学习,你可以理解JavaScript的基本语法结构,为后续的JavaScript编程打下坚实的基础。你可以运用上述的代码举例和案例演示,加深对每个基础语法的理解和记忆。
案例演示:
好的,以下是对应每个部分的案例:
// 示例1:声明和初始化变量
var name = "John";
let age = 25;
const PI = 3.14;
// 示例2:输出变量的值
console.log(name); // 输出 "John"
let name = "John";
let age = 25;
let isStudent = true;
let address = null;
let phoneNumber; // undefined
console.log(typeof name); // 输出 "string"
let num1 = 10;
let num2 = 5;
let sum = num1 + num2; // 加法运算
let difference = num1 - num2; // 减法运算
let product = num1 * num2; // 乘法运算
let quotient = num1 / num2; // 除法运算
let remainder = num1 % num2; // 取余运算
console.log(sum); // 输出 15
let age = 18;
if (age >= 18) {
console.log("成年人");
} else {
console.log("未成年人");
}
// for循环
for (let i = 0; i < 5; i++) {
console.log(i);
}
// while循环
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
你可以运行这些代码示例,观察控制台输出并理解每个基础语法的运行结果。
// 函数的定义
function sayHello() {
console.log("Hello!");
}
// 函数的调用
sayHello(); // 输出 "Hello!"
// 全局变量
let globalVariable = "I'm global";
function outerFunction() {
let outerVariable = "I'm outer";
function innerFunction() {
let innerVariable = "I'm inner";
console.log(globalVariable); // 访问全局变量
console.log(outerVariable); // 访问外部函数变量
console.log(innerVariable); // 访问当前函数变量
}
innerFunction();
}
outerFunction();
// 对象的创建
let person = {
name: "John",
age: 25,
isStudent: true,
address: {
street: "123 Main St",
city: "New York"
}
};
// 访问对象属性
console.log(person.name); // 输出 "John"
console.log(person.age); // 输出 25
console.log(person.address.city); // 输出 "New York"
// 对象的方法
let calculator = {
num1: 5,
num2: 3,
// 加法方法
add: function() {
return this.num1 + this.num2;
},
// 减法方法
subtract: function() {
return this.num1 - this.num2;
}
};
console.log(calculator.add()); // 输出 8
console.log(calculator.subtract()); // 输出 2
通过运行以上代码示例,你可以深入理解函数和对象的相关概念,并掌握它们的使用方法和特性。
案例演示:
// 函数的定义
function sayHello() {
console.log("Hello!");
}
// 函数的调用
sayHello(); // 输出 "Hello!"
// 全局变量
let globalVariable = "I'm global";
function outerFunction() {
let outerVariable = "I'm outer";
function innerFunction() {
let innerVariable = "I'm inner";
console.log(globalVariable); // 访问全局变量
console.log(outerVariable); // 访问外部函数变量
console.log(innerVariable); // 访问当前函数变量
}
innerFunction();
}
outerFunction();
// 对象的创建
let person = {
name: "John",
age: 25,
isStudent: true,
address: {
street: "123 Main St",
city: "New York"
}
};
// 访问对象属性
console.log(person.name); // 输出 "John"
console.log(person.age); // 输出 25
console.log(person.address.city); // 输出 "New York"
// 对象的方法
let calculator = {
num1: 5,
num2: 3,
// 加法方法
add: function() {
return this.num1 + this.num2;
},
// 减法方法
subtract: function() {
return this.num1 - this.num2;
}
};
console.log(calculator.add()); // 输出 8
console.log(calculator.subtract()); // 输出 2
通过运行以上代码示例,你可以深入理解函数和对象的相关概念,并掌握它们的使用方法和特性。
// 数组的创建
let fruits = ["apple", "banana", "orange"];
// 访问数组元素
console.log(fruits[0]); // 输出 "apple"
console.log(fruits[1]); // 输出 "banana"
// 添加元素到数组末尾
fruits.push("grape");
console.log(fruits); // 输出 ["apple", "banana", "orange", "grape"]
// 删除数组末尾的元素
fruits.pop();
console.log(fruits); // 输出 ["apple", "banana", "orange"]
// 数组遍历
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// 数组排序
fruits.sort();
console.log(fruits); // 输出 ["apple", "banana", "orange"]
let str = "Hello, world!";
// 计算字符串长度
console.log(str.length); // 输出 13
// 字符串转换为大写
console.log(str.toUpperCase()); // 输出 "HELLO, WORLD!"
// 字符串转换为小写
console.log(str.toLowerCase()); // 输出 "hello, world!"
// 字符串查找子串
console.log(str.indexOf("world")); // 输出 7
// 字符串替换子串
console.log(str.replace("world", "JavaScript")); // 输出 "Hello, JavaScript!"
以上代码演示了数组的基本操作和遍历,以及字符串的常用方法。通过运行这些例子,你可以更好地理解和应用数组和字符串的相关操作。
案例演示:
函数的定义与调用、作用域、闭包等概念:
// 函数的定义与调用
function sayHello(name) {
console.log("Hello, " + name + "!");
}
sayHello("John"); // 输出 "Hello, John!"
// 作用域
let x = 10; // 全局作用域
function foo() {
let x = 20; // 局部作用域
console.log(x); // 输出 20
}
foo();
console.log(x); // 输出 10
// 闭包
function counter() {
let count = 0;
function increment() {
count++;
console.log(count);
}
return increment;
}
let c = counter();
c(); // 输出 1
c(); // 输出 2
对象的创建、属性与方法的使用:
// 对象的创建和访问属性
let person = {
name: "John",
age: 30,
city: "New York"
};
console.log(person.name); // 输出 "John"
console.log(person.age); // 输出 30
// 对象的方法
let person = {
name: "John",
age: 30,
city: "New York",
sayHello: function() {
console.log("Hello, my name is " + this.name + ".");
}
};
person.sayHello(); // 输出 "Hello, my name is John."
以上代码演示了函数的定义与调用、作用域、闭包以及对象的创建、属性与方法的使用。通过运行这些例子,你可以更好地理解和应用这些概念。
DOM操作是指通过JavaScript来操纵HTML文档中的元素。DOM(文档对象模型)是一种表示和操作HTML文档的标准,它将HTML文档中的每个元素都视为对象,并提供了一组方法和属性来操作这些对象。以下是一些常见的DOM操作示例,使用了最新的JavaScript语法:
// 通过id获取元素
const elementById = document.getElementById("myElement");
// 通过类名获取元素(返回数组)
const elementsByClass = document.getElementsByClassName("myClass");
// 通过标签名获取元素(返回数组)
const elementsByTag = document.getElementsByTagName("div");
// 通过选择器获取元素
const elementBySelector = document.querySelector("#myElement .myClass");
// 通过选择器获取多个元素(返回数组)
const elementsBySelectorAll = document.querySelectorAll(".myClass");
const newElement = document.createElement("div");
newElement.textContent = "This is a new element";
document.body.appendChild(newElement);
// 修改元素的属性
element.setAttribute("class", "newClass");
// 修改元素的样式
element.style.backgroundColor = "red";
element.style.fontSize = "20px";
// 添加点击事件处理程序
element.addEventListener("click", () => {
console.log("Element clicked");
});
// 添加事件委托处理程序
document.addEventListener("click", event => {
if (event.target.matches(".myClass")) {
console.log("Element with class 'myClass' clicked");
}
});
// 修改元素的文本内容
element.textContent = "New text content";
// 修改元素的HTML内容
element.innerHTML = "<strong>New HTML content</strong>";
以上示例演示了如何使用最新的JavaScript语法进行DOM操作。请注意,这些示例只是最基本的操作,DOM还提供了更多的方法和属性,可以根据需求进行深入学习和探索。
案例说明:
好的,以下是对以上每个部分案例的具体说明:
document.getElementById("myElement")
方法来获取id为"myElement"的元素。document.getElementsByClassName("myClass")
方法来获取类名为"myClass"的所有元素。document.getElementsByTagName("div")
方法来获取所有的div元素。document.querySelector("#myElement .myClass")
方法来获取选择器为"#myElement .myClass"的元素。document.querySelectorAll(".myClass")
方法来获取所有选择器为".myClass"的元素。创建元素并添加到文档中:首先使用document.createElement("div")
方法创建一个新的div元素,然后使用newElement.textContent
属性设置元素的内容,最后使用document.body.appendChild(newElement)
将新元素添加到文档的body中。
修改元素的属性和样式:
element.setAttribute("class", "newClass")
方法将元素的class属性修改为"newClass"。element.style.property = value
的方式修改元素的样式,例如element.style.backgroundColor = "red"
将元素的背景颜色修改为红色,element.style.fontSize = "20px"
将元素的字体大小修改为20像素。element.addEventListener("click", () => {...})
方法为元素添加一个点击事件处理程序。document.addEventListener("click", event => {...})
方法来监听整个文档的点击事件,并通过event.target
来判断具体点击的元素是否符合条件。element.textContent = "New text content"
将元素的纯文本内容修改为"New text content"。element.innerHTML = "<strong>New HTML content</strong>"
将元素的HTML内容修改为"<strong>New HTML content</strong>"。以上案例说明了如何使用最新的JavaScript语法进行DOM操作,具体展示了如何获取元素、创建元素、修改属性和样式、添加事件处理程序以及修改元素的内容。这些操作是在实际开发中常见的DOM操纵操作。
好的,以下是一个使用事件监听器和事件处理函数的示例代码,并加上详细的注释说明:
// 获取按钮元素
const button = document.getElementById("myButton");
// 定义点击事件处理函数
function handleClick(event) {
// 阻止按钮默认的点击行为
event.preventDefault();
// 在控制台打印点击事件信息
console.log("Button clicked");
// 修改按钮的文本内容
button.textContent = "Clicked!";
// 修改按钮的样式
button.style.backgroundColor = "red";
}
// 添加点击事件监听器,当按钮被点击时调用 handleClick 函数
button.addEventListener("click", handleClick);
在上述代码中:
document.getElementById()
方法获取id为"myButton"的按钮元素。handleClick
的函数,它接受一个事件对象作为参数,用于处理点击事件。handleClick
函数中,使用event.preventDefault()
方法阻止按钮的默认点击行为,以避免页面刷新。addEventListener()
方法为按钮添加了一个点击事件监听器,当按钮被点击时,将调用handleClick
函数。这个示例展示了如何使用事件监听器和事件处理函数来实现交互功能。当按钮被点击时,会执行指定的函数,我们可以在函数中编写自己的逻辑代码,实现各种交互效果。
异步编程是一种处理可能发生延迟或需要等待结果的操作的编程方式。在JavaScript中,常见的异步编程模式包括回调函数、Promise和async/await。
// 异步函数示例
function fetchData(url, callback) {
// 模拟异步操作
setTimeout(() => {
const data = "Some data";
// 将结果传递给回调函数
callback(data);
}, 2000);
}
// 调用异步函数,并传入回调函数处理结果
fetchData("https://example.com/api/data", (data) => {
console.log(data);
});
// 异步函数示例
function fetchData(url) {
return new Promise((resolve, reject) => {
// 模拟异步操作
setTimeout(() => {
const data = "Some data";
// 成功时调用 resolve,并传递结果
resolve(data);
// 或者失败时调用 reject,并传递错误信息
// reject(new Error("Failed to fetch data"));
}, 2000);
});
}
// 调用异步函数,并处理结果
fetchData("https://example.com/api/data")
.then((data) => {
console.log(data);
})
.catch((error) => {
console.log(error);
});
// 异步函数示例
async function fetchData(url) {
return new Promise((resolve, reject) => {
// 模拟异步操作
setTimeout(() => {
const data = "Some data";
// 成功时调用 resolve,并传递结果
resolve(data);
// 或者失败时调用 reject,并传递错误信息
// reject(new Error("Failed to fetch data"));
}, 2000);
});
}
// 使用 async/await 语法调用异步函数,并处理结果
async function handleData() {
try {
const data = await fetchData("https://example.com/api/data");
console.log(data);
} catch (error) {
console.log(error);
}
}
// 调用处理函数
handleData();
这些是在ES6中使用最新语法处理异步编程的示例。它们提供了不同的方式来处理异步操作,使代码更具可读性和可维护性。您可以根据具体的应用场景选择适合的异步编程模式。
在JavaScript中,常见的错误类型包括语法错误、运行时错误和逻辑错误。了解这些错误类型以及如何调试可以帮助我们更好地处理错误。
语法错误:这是由于代码中存在语法错误而导致的错误。例如,拼写错误、缺少括号或分号等。
// 示例:语法错误
if (true {
console.log("Hello, World!");
}
// SyntaxError: Unexpected token '{'
调试提示:在开发者工具的"控制台"中可以看到具体的语法错误信息,可以检查代码并修复错误。
运行时错误:这是在代码执行期间发生的错误。它可以是由于类型错误、变量未定义、越界访问等引起的。
// 示例:运行时错误
const num = 10;
console.log(num.toUpperCase());
// TypeError: num.toUpperCase is not a function
调试提示:可以使用console.log()
语句在代码的不同位置输出变量的值,以便确定错误发生的位置。还可以使用try-catch
语句来捕获错误并采取适当的处理措施。
逻辑错误:这是由于代码的逻辑错误而导致的错误。代码可能按照逻辑执行,但结果不符合预期。
// 示例:逻辑错误
function calculateTotal(num1, num2) {
return num1 + num2;
}
const total = calculateTotal(10, 20);
console.log(total); // 1020,而不是30
调试提示:可以使用console.log()
语句来输出变量的值,以确保代码按照预期执行。还可以使用断点调试工具,如浏览器的开发者工具,在代码的特定位置设置断点以逐行调试代码。
除了调试技巧之外,还可以使用一些工具来帮助捕获和处理错误,例如:
try-catch
语句来捕获错误并采取适当的处理措施。console.log()
语句在代码的不同位置输出变量的值以进行调试。通过了解常见的JavaScript错误类型和调试技巧,我们可以更好地处理错误并改进代码的质量。
文章浏览阅读1.2k次,点赞3次,收藏3次。1. 引言对于Curve25519,其Field域内的module Fp = 2255-19。若采用常规的Montgomery reduce算法,其运算性能并不是最优的。如要求某整数 u mod (2^255-19),可将m整数用多项式做如下表示:u=∑iuixi,其中,ui=n∗2⌈25.5i⌉,n∈Nu=\sum_{i}^{}u_ix^i,其中,u_i=n*2^{\left \lce..._curve25519标量乘
文章浏览阅读6.8k次,点赞3次,收藏68次。https://blog.51cto.com/u_15102959/2637222_goland面试题
文章浏览阅读8.4w次,点赞67次,收藏608次。不知不觉肝阴阳师也快一年了,对这游戏真是又爱又恨,最近刚刚发布了PC版,突然很想尝试着写个脚本挂机,话不多说进入正题。简单的鼠标操作游戏挂机脚本,无非就是自动移动鼠标,自动点击,进行重复操作,所以,第一步就是如何控制鼠标_我是农场主自动挂机脚本
文章浏览阅读135次。时间复杂度O(n)java代码import java.util.*;class Main{static int n = 0, N = 1000010;static int[] phi = new int[N];//存储数字n的质数的个数static int[] primes = new int[N];//存储质数的下标对应的质数static int cnt = 0;//存储质数的下标static ..._java 欧拉筛
文章浏览阅读1.1w次,点赞2次,收藏19次。就目前市场来看,时间管理类应用,大致分为划分为:行程管理、任务管理和备忘管理三种类型。市场上,这三种类型的产品百花齐放,做细分市场的,做垂直人群的不断在增加。今天,我们来看看“日历”,这个可以囊括行程管理、任务管理和备忘管理的工具。数据显示,从07年到15年的,人们对PC日历的需求越来越大,为了方便用户,日历APP在此基础上开始衍生。 APP因手机、平板等电子化设备携带方便,在各使用场景中占有优势_时间管理类app用户调研
文章浏览阅读371次。1、初识MySQLjavaEE:企业级java开发 Webweb分为 :前端(页面:展示(数据库里的数据))后台 (连接点:链接数据库JDBC,链接前端(做控制,控制试图跳转,和给前端传递数据))数据库 (存数据,txt,Excel,world)只会写代码的码农是基本的,学好数据库; 基本混饭吃学习操作系统,学习数据结构与算法! 当一个不错的程序员离散数学,数字电路,网站体系结构,编译原理。+实战经验 = 优秀的程序员1.1、为什么学习数据库岗位需求现在的世界,大数据时代,
文章浏览阅读2.7k次。转载地址:https://blog.csdn.net/sc_lilei/article/details/79545524?utm_source=blogxgwz4 装完系统后, $sudo apt-get upgrade系统版本内核变为:jxl@lenovo:~$ uname -aLinux lenovo 4.4.0-138-generic #164~14.04.1-Ubun..._昭阳e42-80网卡驱动
文章浏览阅读3.4k次,点赞8次,收藏51次。《C和C++安全编码》(原书第2版)这本书是2013年出版的。这里是基于之前所有笔记的简单总结,笔记列表如下:字符串:https://blog.csdn.net/fengbingchun/article/details/105325508指针诡计:https://blog.csdn.net/fengbingchun/article/details/105458861动态内存管理:https://blog.csdn.net/fengbingchun/article/details/105921_c与c++安全编码 试题
文章浏览阅读9.4k次。对于word中存在合并单元格的表格: 下图是对Cells遍历的结果,True表示该行该列的单元格存在,False表示不存在。_vc++ ole 判断word表格单元格是否合并
文章浏览阅读55次。将一个类定义在另一个类里面,里面的那个类称为内部类,与属性、方法等一样视作外部类的成员。内部类提供了更好的封装,不允许同包中的其他类访问该内部类。内部类作为外部类的成员,同样可以被4个访问限定符修饰。如果外部类需要访问非静态内部类的成员,必须创建非静态内部类对象来访问。内部类成员可以直接访问外部类的数据。如果存在一个非静态内部类对象,则一定存在一个被它寄存的外部类对象,也就是说在拥有外...
文章浏览阅读1.3k次。一. FlatBuffers 是什么?FlatBuffers 是一个序列化开源库,实现了与 Protocol Buffers,Thrift,Apache Avro,SBE 和 Cap'n Proto 类似的序列化格式,主要由 Wouter van Oortmerssen 编写,并由 Google 开源。Oortmerssen 最初为 Android 游戏和注重性能的应用而开发了FlatBuffe..._flatbuffers64位
文章浏览阅读626次。自己的IT发展方向。1.做T型进化,横向做语言(java、python)的扩展,纵向主要是算法、模式、计算机原理。2.多系统的学习,WINDOW和LINUX的基本操作及维护。3.尽量做产品,少做项目,提高自己的竞争力。4.外语学习,日语是工作方面,英语是学习方面。坚持做自己喜欢的事。_it以后的几个方向