网站制作的要点和步骤详解,校园网站建设目标,电子商务网站开发毕业设计,outlook企业邮箱官网JavaScript知识速查 文章目录 JavaScript知识速查[toc]JavaScript 简介在网页开发中的用途和意义#xff1a;示例#xff1a; JavaScript 语法JavaScript 变量定义变量命名规则#xff1a;变量的类型#xff1a;变量的作用域#xff1a;示例代码#xff1a; JavaScript 数…JavaScript知识速查 文章目录 JavaScript知识速查[toc]JavaScript 简介在网页开发中的用途和意义示例 JavaScript 语法JavaScript 变量定义变量命名规则变量的类型变量的作用域示例代码 JavaScript 数据类型数据类型 JavaScript 运算符运算符 JavaScript 语句与语法控制流语句 JavaScript函数函数 JavaScript数组数组 JavaScript对象对象 JavaScript DOM (Document Object Model) JavaScript DOM (Document Object Model)DOM结点操作JavaScript 定时器
JavaScript 简介
JavaScript 是一种高级、解释型的编程语言主要用于构建交互式的网站和应用。它是 Web 开发的三大核心技术之一与 HTML 和 CSS 共同为开发者提供创建高效、动态、用户友好的网页和应用的能力。
在网页开发中的用途和意义 交互性: JavaScript 使网页具有交互性允许用户与网页进行交互例如点击按钮、提交表单、动画效果等。 动态内容: 通过 JavaScript开发者可以动态地修改 HTML 和 CSS例如动态添加/删除元素、改变样式等。 表单验证: JavaScript 可以在用户提交表单之前在客户端进行表单验证提高用户体验和系统效率。 实时更新: JavaScript 可以实现网页的实时更新例如显示实时时间、动态加载新内容等无需刷新页面。 Ajax 通信: JavaScript 支持 Ajax允许开发者实现与服务器的异步通信实时获取或发送数据。 客户端存储: 通过 JavaScript开发者可以在用户的浏览器上存储数据例如使用 localStorage 和 sessionStorage。 动画效果: JavaScript 可以创建动画效果如轮播图、页面滑动效果、过渡效果等。 框架和库: 存在大量 JavaScript 库如 jQuery和框架如 Angular、React、Vue.js使得开发更为高效和强大。
示例
下面是一个简单的 JavaScript 例子展示了如何通过点击按钮来改变文本内容
HTML:
!DOCTYPE html
html
headtitleJavaScript Example/title
/head
bodyp iddemoHello World!/pbutton typebutton onclickchangeText()Click me/buttonscript typetext/javascriptfunction changeText() {document.getElementById(demo).innerHTML Hello JavaScript!;}
/script/body
/html在上述示例中
我们首先创建了一个段落和一个按钮。然后我们编写了一个 JavaScript 函数 changeText当用户点击按钮时这个函数会被调用。函数 changeText 会找到 id 为 “demo” 的段落并将其文本内容改为 “Hello JavaScript!”。
通过这个简单的例子你可以看到 JavaScript 是如何使网页具有交互性的。用户点击按钮网页的内容随之改变而无需刷新页面。只有网页配上了JavaScript才能够称之为真正意义上的网页。现在让我们开始JavaScript吧
JavaScript 语法
JavaScript 变量定义
在 JavaScript 中变量是用于存储数据值的容器。你可以使用变量来保存和操作数据。以下是JavaScript中变量定义的基本信息 var 关键字 (逐渐被淘汰) 在 ES6 之前var 是定义变量的唯一关键字。var 定义的变量具有函数作用域如果在函数外部定义则具有全局作用域。 var x 10; // 定义一个名为 x 的变量并赋值为 10let 关键字 从 ES6 开始let 是定义变量的新关键字。let 定义的变量具有块作用域只在定义它的块如 if 语句或循环中有效。 let y 20; // 定义一个名为 y 的变量并赋值为 20const 关键字 const 也是从 ES6 开始引入的用于定义常量。const 定义的变量也具有块作用域但不能重新赋值。const 必须在声明时初始化。 const z 30; // 定义一个名为 z 的常量并赋值为 30变量命名规则
变量名必须以字母、美元符号$或下划线_开头。变量名可以包含字母、数字、美元符号$和下划线_。变量名是大小写敏感的。
变量的类型
JavaScript 是一种动态类型语言意味着不需要预先声明变量的类型。变量的类型将根据赋给它的值而自动更改。
let variable hello; // string 类型
variable 42; // number 类型变量的作用域
全局作用域在代码的任何地方都可以访问的变量。函数作用域只在函数内部可以访问的变量。块作用域只在某个代码块如 if 语句或循环内部可以访问的变量。
示例代码
// 使用 var 定义变量
var a 10;// 使用 let 定义变量
let b 20;// 使用 const 定义常量
const c 30;// 动态类型
let variable string; // string 类型
variable 40; // number 类型// 函数作用域
function testScope() {var insideFunction accessible inside function;
}// 块作用域
if (true) {let insideBlock accessible inside block;
}JavaScript 数据类型
数据类型
JavaScript 中有几种基本的数据类型包括
Number数字: 用于表示整数和浮点数。
// 旧标准
var num1 42; // 整数
var num2 3.14; // 浮点数// 新标准 (ES6)
let num3 42; // 整数
const num4 3.14; // 浮点数String字符串: 用于表示文本。
// 旧标准
var str1 Hello, world!;
var str2 Hello, world!;// 新标准 (ES6)
let str3 Hello, world!;
const str4 Hello, world!;Boolean布尔值: 表示真或假。
// 旧标准
var bool1 true;
var bool2 false;// 新标准 (ES6)
let bool3 true;
const bool4 false;Null空值: 表示没有值或无值。
// 旧标准
var nothing null;// 新标准 (ES6)
let nothing2 null;Undefined未定义: 表示变量未被初始化。
// 旧标准
var und;
console.log(und); // undefined// 新标准 (ES6)
let und2;
console.log(und2); // undefinedObject对象: 用于存储键值对集合。
// 旧标准
var obj1 {name: John,age: 25
};// 新标准 (ES6)
const obj2 {name: John,age: 25
};Array数组: 用于存储值的有序集合。
// 旧标准
var arr1 [1, 2, 3, 4, 5];// 新标准 (ES6)
const arr2 [1, 2, 3, 4, 5];Symbol符号 (ES6): 创建唯一的值主要用于对象属性的键。
// 新标准 (ES6)
const sym1 Symbol(description);
const sym2 Symbol(description);
console.log(sym1 sym2); // false以上就是 JavaScript 中的主要数据类型和它们的示例代码。在新标准 ES6 中推荐使用 let 和 const 关键字来声明变量而非旧标准中的 var。
JavaScript 运算符
运算符
JavaScript 中有多种运算符它们可以进行不同类型的操作。下面列举了一些常见的运算符及其用法
赋值运算符Assignment Operators: 用于将值赋给变量。
let x 10;
const y 20;算术运算符Arithmetic Operators: 用于执行数学运算。
let a 10 5; // 加法
let b 10 - 5; // 减法
let c 10 * 5; // 乘法
let d 10 / 5; // 除法
let e 10 % 3; // 模余数
let f 10 ** 2; // 指数比较运算符Comparison Operators: 用于比较两个值。
console.log(10 10); // 相等非严格比较仅比较值
console.log(10 10); // 全等严格比较比较值和类型
console.log(10 ! 10); // 不相等非严格比较
console.log(10 ! 10); // 不全等严格比较
console.log(10 5); // 大于
console.log(10 5); // 小于
console.log(10 10); // 大于或等于
console.log(10 10); // 小于或等于逻辑运算符Logical Operators: 用于基于一个或多个条件执行逻辑运算。
let g true false; // 逻辑与
let h true || false; // 逻辑或
let i !true; // 逻辑非条件三元运算符Conditional (Ternary) Operator: 根据条件返回一个值。
let j (10 5) ? Yes : No; // 如果10大于5则返回Yes否则返回No递增和递减运算符Increment and Decrement Operators: 用于递增或递减变量的值。
let k 10;
k; // 递增
console.log(k); // 11let l 10;
l--; // 递减
console.log(l); // 9位运算符Bitwise Operators: 用于执行二进制位运算。
let m 5 3; // 位与
let n 5 | 3; // 位或
let o ~5; // 位非
let p 5 ^ 3; // 位异或
let q 5 1; // 左移
let r 5 1; // 右移字符串运算符: 用于连接字符串。
let s Hello, world!;
console.log(s); // Hello, world!类型运算符Type Operators: 用于确定值的类型。
console.log(typeof Hello); // string
console.log(typeof 10); // number以上就是 JavaScript 中常见的一些运算符及其用法的示例。通过这些运算符你可以执行各种不同类型的操作和计算。
JavaScript 语句与语法
控制流语句
控制流语句用于控制程序的执行流程根据特定条件执行不同的代码块。以下是一些常见的控制流语句及其用法
If 语句If Statement: 根据条件执行代码。
let age 18;
if (age 18) {console.log(You are an adult.);
}Else 语句Else Statement: 如果 if 语句的条件不成立时执行代码。
let age 16;
if (age 18) {console.log(You are an adult.);
} else {console.log(You are a minor.);
}Else If 语句Else If Statement: 如果 if 语句的条件不成立时可以提供一个或多个额外的条件。
let age 16;
if (age 18) {console.log(You are an adult.);
} else if (age 16) {console.log(You are almost an adult.);
} else {console.log(You are a minor.);
}Switch 语句Switch Statement: 根据表达式的值执行不同的代码块。
let fruit apple;
switch (fruit) {case banana:console.log(You chose a banana.);break;case apple:console.log(You chose an apple.);break;default:console.log(You did not choose a banana or an apple.);
}For 循环For Loop: 重复执行代码块直到条件不再满足。
for (let i 0; i 5; i) {console.log(i);
}While 循环While Loop: 当条件为真时重复执行代码块。
let i 0;
while (i 5) {console.log(i);i;
}Do While 循环Do While Loop: 至少执行一次代码块然后在条件为真时继续执行。
let i 0;
do {console.log(i);i;
} while (i 5);Break 语句Break Statement: 用于退出循环或 switch 语句。
for (let i 0; i 5; i) {if (i 3) {break;}console.log(i);
}Continue 语句Continue Statement: 用于跳过循环的当前迭代进入下一迭代。
for (let i 0; i 5; i) {if (i 3) {continue;}console.log(i);
}以上是 JavaScript 中常见的控制流语句及其用法的示例。通过这些语句你可以控制代码的执行流程执行不同的操作和计算。
JavaScript函数
函数
函数是一种封装代码的方式它允许你定义代码块并通过名称来调用它。函数可以有参数和返回值。
函数声明Function Declaration: 使用 function 关键字来声明函数。
function greet(name) {console.log(Hello, name !);
}greet(Alice); // Output: Hello, Alice!函数表达式Function Expression: 把一个函数赋值给一个变量。
const greet function(name) {console.log(Hello, name !);
};greet(Bob); // Output: Hello, Bob!箭头函数Arrow Function: 使用箭头符号 () 的简洁语法来创建函数。
const greet (name) {console.log(Hello, name !);
};greet(Charlie); // Output: Hello, Charlie!默认参数Default Parameters: 为函数参数提供默认值。
function greet(name User) {console.log(Hello, name !);
}greet(); // Output: Hello, User!剩余参数Rest Parameters: 允许你将不确定数量的参数表示为一个数组。
function sum(...numbers) {return numbers.reduce((total, num) total num, 0);
}console.log(sum(1, 2, 3, 4)); // Output: 10立即执行函数表达式Immediately Invoked Function Expression, IIFE: 创建一个立即执行的函数。
(function() {console.log(This function runs immediately!);
})();闭包Closures: 闭包是有权访问其作用域链上层的函数即使该函数在其上层作用域执行完毕后仍然能够访问上层作用域的变量。
function createCounter() {let count 0;return function() {count;console.log(count);};
}const counter createCounter();
counter(); // Output: 1
counter(); // Output: 2回调函数Callback Functions: 函数可以作为参数传递给其他函数并在那些函数内部被调用。
function doSomething(callback) {console.log(Doing something...);callback();
}doSomething(function() {console.log(Callback function executed!);
});异步函数Async Functions: 使用 async 关键字声明的函数可以包含 await 表达式以暂停和恢复函数的执行。
async function fetchData(url) {const response await fetch(url);const data await response.json();console.log(data);
}fetchData(https://api.example.com/data);以上是 JavaScript 中与函数相关的一些基本和高级概念。通过理解和应用这些概念你可以更有效地组织和管理代码处理各种程序设计任务。
JavaScript数组
数组
数组是一个可以包含多个值的特殊变量。每个值都有一个位置索引从0开始。
创建数组: 可以使用数组字面量创建数组。
let fruits [Apple, Banana, Cherry];
console.log(fruits); // Output: [Apple, Banana, Cherry]访问数组元素: 通过索引来访问数组的元素。
console.log(fruits[0]); // Output: Apple修改数组元素: 通过索引来修改数组的元素。
fruits[1] Blueberry;
console.log(fruits); // Output: [Apple, Blueberry, Cherry]数组长度: 使用 length 属性获取数组的长度。
console.log(fruits.length); // Output: 3添加元素: 使用 push 方法在数组末尾添加元素。
fruits.push(Durian);
console.log(fruits); // Output: [Apple, Blueberry, Cherry, Durian]删除元素: 使用 pop 方法删除数组末尾的元素。
fruits.pop();
console.log(fruits); // Output: [Apple, Blueberry, Cherry]添加元素到数组的开头: 使用 unshift 方法在数组的开头添加元素。
fruits.unshift(Avocado);
console.log(fruits); // Output: [Avocado, Apple, Blueberry, Cherry]删除数组的第一个元素: 使用 shift 方法删除数组的第一个元素。
fruits.shift();
console.log(fruits); // Output: [Apple, Blueberry, Cherry]查找元素: 使用 indexOf 方法查找元素的索引。
console.log(fruits.indexOf(Blueberry)); // Output: 1遍历数组: 使用 forEach 方法遍历数组。
fruits.forEach(function(item, index, array) {console.log(item, index);
});数组切片: 使用 slice 方法创建一个新的数组它包含原数组的指定部分。
let citrusFruits fruits.slice(1, 3);
console.log(citrusFruits); // Output: [Blueberry, Cherry]数组拼接: 使用 concat 方法将两个或多个数组连接在一起。
let vegetables [Carrot, Potato];
let food fruits.concat(vegetables);
console.log(food); // Output: [Apple, Blueberry, Cherry, Carrot, Potato]数组排序: 使用 sort 方法对数组的元素进行排序。
fruits.sort();
console.log(fruits); // Output: [Apple, Blueberry, Cherry]通过以上的描述和示例代码可以了解到JavaScript数组的基本操作和常用方法这些方法提供了对数组元素的增、删、查、改等操作。同时也能理解数组在编程中的重要性和其在数据管理方面的应用。
JavaScript对象
对象
JavaScript对象是键值对的集合它是一种复杂的数据结构可以包含多个属性和方法。
创建对象: 使用对象字面量创建对象。
let person {firstName: John,lastName: Doe,age: 25
};
console.log(person); // Output: {firstName: John, lastName: Doe, age: 25}访问对象属性: 使用点标记法或方括号标记法访问对象的属性。
console.log(person.firstName); // Output: John
console.log(person[lastName]); // Output: Doe修改对象属性: 直接赋值来修改对象的属性。
person.age 26;
console.log(person.age); // Output: 26添加新属性: 直接赋值来添加新的属性。
person.gender male;
console.log(person.gender); // Output: male删除属性: 使用 delete 操作符删除对象的属性。
delete person.gender;
console.log(person.gender); // Output: undefined检查属性是否存在: 使用 in 操作符检查对象是否包含某个属性。
console.log(firstName in person); // Output: true
console.log(gender in person); // Output: false遍历对象: 使用 for...in 循环遍历对象的属性。
for (let key in person) {console.log(key, person[key]);
}方法: 对象可以包含方法函数。
let person {firstName: John,lastName: Doe,getFullName: function() {return this.firstName this.lastName;}
};console.log(person.getFullName()); // Output: John Doe对象构造函数: 使用构造函数创建对象。
function Person(firstName, lastName, age) {this.firstName firstName;this.lastName lastName;this.age age;
}let person1 new Person(John, Doe, 25);
console.log(person1); // Output: Person {firstName: John, lastName: Doe, age: 25}通过以上的描述和示例代码可以了解到JavaScript对象的基本操作和常用方法以及如何对对象的属性和方法进行增、删、查、改等操作。同时也能理解对象在编程中的重要性和其在数据管理及功能封装方面的应用。
JavaScript DOM (Document Object Model)
JavaScript DOM 是一个编程接口它为Web文档提供了结构化的表示并使程序能够访问和修改文档的结构、样式和内容。当网页被加载时浏览器会创建页面的文档对象模型DOM它将网页文档作为节点树来组织使得JavaScript可以通过选择和操作这些节点来影响网页的显示和行为。
获取元素: 通过ID获取元素
let element document.getElementById(myElement);通过类名获取元素
let elements document.getElementsByClassName(myClass);通过标签名获取元素
let elements document.getElementsByTagName(div);通过CSS选择器获取元素
let element document.querySelector(#myElement);
let elements document.querySelectorAll(.myClass);修改元素内容: 修改元素的文本内容
element.textContent New text content;修改元素的HTML内容
element.innerHTML strongNew HTML content/strong;修改元素属性: 获取、设置、删除属性
element.getAttribute(title); // 获取title属性
element.setAttribute(title, New Title); // 设置title属性
element.removeAttribute(title); // 删除title属性修改元素样式:
element.style.color blue;
element.style.fontSize 20px;元素的类操作: 添加、删除、切换类
element.classList.add(newClass); // 添加类
element.classList.remove(oldClass); // 删除类
element.classList.toggle(toggleClass); // 切换类创建和插入元素:
let newElement document.createElement(div); // 创建新元素
element.appendChild(newElement); // 将新元素插入到现有元素的末尾删除元素:
element.removeChild(newElement); // 从现有元素中删除子元素事件监听:
element.addEventListener(click, function() {alert(Element was clicked!);
});通过上述的示例和解释你可以了解到JavaScript DOM的基本操作以及如何通过JavaScript来获取、修改、添加或删除DOM元素和属性以及如何为DOM元素添加事件监听器。DOM是JavaScript在网页开发中非常核心的概念它使得JavaScript能够与网页交互为网页提供动态功能。
JavaScript DOM (Document Object Model)
JavaScript DOM (Document Object Model) 是为 HTML 和 XML 文档提供了结构化的表示。它是一个用于文档的编程接口API可以让开发者通过 JavaScript 来访问和更新文档的内容、结构和样式。JavaScript 的 DOM 操作是前端开发中非常核心和基础的知识点对于理解和掌握前端开发有着至关重要的意义。
DOM 将文档解析为一个由节点和对象包括元素如 p 和 div组成的结构体系这使得编程语言能够交互并对文档结构、样式和内容进行操作。
DOM结点操作
以下是 JavaScript DOM 的主要特点和操作
元素选择: 通过 ID 选择元素每个元素都可以有一个 ID 属性它在文档中是唯一的。
let elementById document.getElementById(myElement);通过类名选择元素可以选择具有特定类名的元素它返回一个 NodeList。
let elementsByClassName document.getElementsByClassName(myClass);通过标签名选择元素它返回一个包含所有给定标签名的元素的 NodeList。
let elementsByTagName document.getElementsByTagName(div);通过 CSS 选择器选择元素可以使用 CSS 选择器来选择元素。
let singleElement document.querySelector(.myClass); // 返回第一个匹配的元素
let allElements document.querySelectorAll(.myClass); // 返回所有匹配的元素元素内容和属性的操作: 修改元素内容可以通过 textContent 或 innerHTML 属性来修改元素的内容。
element.textContent New text content;
element.innerHTML strongNew HTML content/strong;获取和设置元素属性可以通过 getAttribute() 和 setAttribute() 方法来获取和设置元素的属性。
let title element.getAttribute(title);
element.setAttribute(title, New Title);移除元素属性可以使用 removeAttribute() 方法来移除元素的属性。
element.removeAttribute(title);样式操作: 设置元素样式可以通过 style 属性来直接设置元素的样式。
element.style.color blue;
element.style.fontSize 20px;操作类可以使用 classList 属性来添加、删除或切换元素的类。
element.classList.add(newClass);
element.classList.remove(oldClass);
element.classList.toggle(toggleClass);元素的创建、插入和删除: 创建新元素可以使用 document.createElement() 方法来创建新元素。
let newElement document.createElement(div);插入新元素可以使用 appendChild() 或 insertBefore() 方法来插入新元素。
element.appendChild(newElement); // 在末尾插入新元素
element.insertBefore(newElement, element.firstChild); // 在开始处插入新元素删除元素可以使用 removeChild() 方法来删除子元素。
element.removeChild(newElement);事件监听:
添加事件监听器可以使用 addEventListener() 方法来为元素添加事件监听器。
element.addEventListener(click, function() {alert(Element was clicked!);
});移除事件监听器可以使用 removeEventListener() 方法来移除事件监听器。
function handleClick() {alert(Element was clicked!);
}element.addEventListener(click, handleClick);
element.removeEventListener(click, handleClick);遍历 DOM:
子元素和父元素可以通过 childNodes, children, parentNode 和 parentElement 属性来访问元素的子元素和父元素。
let childNodes element.childNodes;
let children element.children;
let parentNode element.parentNode;
let parentElement element.parentElement;兄弟元素可以通过 nextSibling, nextElementSibling, previousSibling 和 previousElementSibling 属性来访问元素的兄弟元素。
let nextSibling element.nextSibling;
let nextElementSibling element.nextElementSibling;
let previousSibling element.previousSibling;
let previousElementSibling element.previousElementSibling;JavaScript 定时器
JavaScript 提供了一些内置的定时器函数允许开发者在特定的时间间隔后执行代码或者在一段时间延迟后执行代码。这为创建动画、游戏或其他时间敏感的应用程序提供了基础。
主要有两种类型的定时器 setTimeout: setTimeout 用于在指定的毫秒数后执行一段代码。语法 var timeoutID setTimeout(function, delay, arg1, arg2, ...);示例 var timeoutID setTimeout(function() {alert(This message will appear after 2 seconds);
}, 2000);setInterval: setInterval 用于每隔指定的毫秒数重复执行一段代码。语法 var intervalID setInterval(function, delay, arg1, arg2, ...);示例 var counter 0;
var intervalID setInterval(function() {counter;console.log(This message will appear every 2 seconds. Counter: counter);if (counter 5) {clearInterval(intervalID); // 在 counter 达到 5 时停止定时器}
}, 2000);清除定时器: 使用 clearTimeout 和 clearInterval 函数来取消之前通过 setTimeout 和 setInterval 设置的定时器。语法 clearTimeout(timeoutID);
clearInterval(intervalID);示例 var timeoutID setTimeout(function() {alert(This message will never appear due to clearTimeout);
}, 2000);clearTimeout(timeoutID); // 取消定时器requestAnimationFrame: 对于动画来说requestAnimationFrame 是一个更现代、更高效的替代方案它允许浏览器在下一个重绘之前调用你的函数以此来更新动画。语法 var animationID requestAnimationFrame(callback);示例 function animate() {// Update your animation here...requestAnimationFrame(animate);
}animate(); // 开始动画通过定时器和 requestAnimationFrame你可以在 JavaScript 中实现时间控制和动画效果从而为用户提供丰富的交互体验。
