wap是什么东西,株洲sem优化哪家好,国际新闻大事,2022网页游戏概要
前端的组成
层次作用HTML(结构层)利用语义化标签搭建网页CSS(样式层)利用样式进行美化网页、进行网页布局JavaScript(行为层)可以给网页添加动态效果 JavaScript 是一种高级、解释型的编程语言#xff0c;由网景公司#xff08;Netscape#xff09;在1995年开发…概要
前端的组成
层次作用HTML(结构层)利用语义化标签搭建网页CSS(样式层)利用样式进行美化网页、进行网页布局JavaScript(行为层)可以给网页添加动态效果 JavaScript 是一种高级、解释型的编程语言由网景公司Netscape在1995年开发现由ECMA国际通过ECMAScript标准规范进行标准化。它是互联网上最广泛使用的客户端脚本语言主要用于增强网页和用户交互、构建动态功能及创建网络应用。JavaScript 最初设计用于嵌入到HTML文档中并能在用户的浏览器端直接执行无需编译成可执行文件。随着技术发展JavaScript 也扩展到了服务器端Node.js、移动端应用开发如React Native以及跨平台桌面应用开发Electron等领域。JavaScript 在Web开发中的核心作用包括表单验证、动画效果、用户界面互动、数据处理以及构建复杂的单页应用程序SPA等。此外它还支持大量的开源库和框架如jQuery、React、Vue.js等极大地丰富了其功能和使用场景。 JavaScript的组成 ECMAScript核心这是JavaScript语言的核心标准定义了语言的基本语法、数据类型、控制结构、内置对象和函数等。例如变量声明、函数定义、字符串操作、数组方法、流程控制语句等都是ECMAScript规范的一部分。DOM文档对象模型DOMDocument Object Model是文档对象模型的缩写它是一种接口标准用于表示和操作HTML、XML等文档的标准格式。DOM是浏览器提供的一套API用于访问和操作HTML或XML文档的接口。通过DOMJavaScript可以动态地改变网页的内容、结构和样式比如获取页面元素、修改内容、添加或删除节点等。BOM浏览器对象模型BOM则是与浏览器交互的对象模型它提供了独立于内容的、可以与浏览器窗口进行互动的对象比如window对象、navigator对象、location对象、history对象等这些对象提供了有关浏览器环境本身的信息并允许脚本与浏览器进行交互如弹出对话框、控制浏览器历史记录、处理定时器等。 另外在现代Web开发中还有其他一些重要组成部分如 Web API浏览器提供的各种接口包括但不限于AJAX、Fetch、WebSocket、Geolocation、IndexedDB等使得JavaScript能更好地实现异步通信、地理位置定位、离线存储等功能。库和框架如jQuery、React、Vue、Angular等它们为开发者提供了更高层次的抽象和工具简化开发过程提高开发效率。但请注意这些并不是JavaScript语言本身的组成部分而是基于JavaScript构建的额外工具。 JavaScript 的主要特点包括 轻量级易于学习和编写语法简洁。解释性代码不需要预编译可在支持JavaScript的环境中即时执行。基于对象采用面向对象编程机制同时具有原型继承的特点。事件驱动支持事件处理模型可以对用户的操作或特定事件做出响应。弱类型变量的数据类型可以在运行时自动确定或改变。跨平台能够在多种操作系统环境下运行在所有现代浏览器中均得到支持。DOM操作与HTML和CSS紧密结合能够动态修改和访问网页内容、样式和结构。AJAX支持允许无刷新页面更新实现异步数据交换。
基本内容 JavaScript输出数据的方式 使用 window.alert()弹出警告框。使用 document.write() 方法将内容写到 HTML 文档中。使用 innerHTML写入到 HTML 元素。使用console.log()写入到浏览器的控制台。prompt() 是一个内置的浏览器窗口对象方法用于与用户进行交互。它会弹出一个对话框显示一段提示信息并允许用户输入文本数据。 数据类型 基本数据类型包括number数字、string字符串、boolean布尔值、null、undefined以及ES6新增的symbol。引用数据类型包括object对象和function函数其中数组(array)和正则表达式(RegExp)也是对象类型的子类。 变量声明 var在ES5及更早版本中使用具有变量提升特性在同一个作用域内可以重新声明。let 和 constES6引入提供了块级作用域并且const用于声明常量一旦赋值后不可更改其引用。 操作符 算术运算符如、-、*、/、%等。关系与相等运算符比较两个值的关系如、、、、、!、严格相等、!严格不等。逻辑运算符逻辑与、||逻辑或、!逻辑非。赋值运算符, , -等。位运算符对二进制数进行操作如、|、^、~、、、。条件运算符三元运算符condition ? exprIfTrue : exprIfFalse。 控制结构 条件语句if...else、switch。循环for、while、do...while、for...in遍历对象属性、for...of遍历可迭代对象如数组。跳转语句break、continue。 函数 函数定义通过function关键字创建函数。匿名函数没有名称的函数可以直接赋值给变量或者作为参数传递。箭头函数ES6简洁的函数定义语法如(param1, param2) expression 或 { statements }。返回值使用return语句从函数内部返回结果。 对象 对象字面量通过键值对形式创建对象如{ key: value }。属性访问通过.或[ ]来访问和修改对象属性。构造函数使用new关键字实例化对象。原型链和继承JavaScript基于原型实现继承机制。 数组 数组定义通过方括号[]初始化数组。内置方法如.push()、.pop()、.shift()、.unshift()、.slice()、.map()、.filter()等。 字符串 字符串是不可变的可以通过字符串方法进行操作如.length获取长度、.charAt()访问单个字符、.split()分割字符串、.concat()拼接字符串等。 内置对象包括Math、Date、Array、Object、Function、RegExp等。 Object:所有JavaScript对象的基类提供了一些通用的方法 Object.create(prototype[, propertiesObject])创建一个新对象其[[Prototype]]链接到指定的对象。Object.defineProperty(obj, prop, descriptor)直接在一个对象上定义或修改一个属性及其特性。Object.keys(obj)、Object.values(obj)和Object.entries(obj)分别返回一个对象的所有自身可枚举属性名数组、值数组和键值对数组。 Array:数组对象的构造函数包含大量处理数组的方法 push(): 向数组末尾添加元素。pop(): 删除并返回数组最后一个元素。shift(): 删除并返回数组的第一个元素。unshift(): 在数组开头添加元素。slice(): 返回一个子数组原数组不变。map(): 创建一个新数组其结果是调用提供的函数处理原数组每个元素的结果。filter(): 创建一个新数组其中包含通过测试函数的所有元素。 Function 函数对象的构造函数但通常使用函数声明或箭头函数语法创建函数。每个函数都是Function的实例拥有自己的方法如call()、apply()和bind()用于改变函数上下文this并执行函数。 String:字符串对象的相关方法 length: 属性返回字符串的长度。charAt(index): 返回指定位置的字符。substring(start, end?): 提取字符串的一部分。split(separator[, limit]): 根据分隔符将字符串分割成数组。concat(string2, ...[, stringN]): 连接两个或更多的字符串并返回一个新的字符串。 Number:提供与数字相关的属性和方法例如 isNaN(value): 判断给定参数是否为NaN。isFinite(number): 判断给定数是否为有限数值。toFixed(digits): 把数字转换为指定位数的小数。 Math:包含数学常数和函数如 Math.PI: 圆周率。Math.random(): 返回0到1之间的随机浮点数。Math.floor(x): 对数进行下舍入。Math.ceil(x): 对数进行上舍入。Math.pow(base, exponent): 计算基数的指数次幂。 Date:表示日期和时间的JavaScript对象可以获取当前日期、设置日期以及进行日期操作。 创建Date对象 构造函数 var date new Date();不传入参数时创建的是当前时间的一个新实例。 或者可以通过以下方式指定特定时间 // 直接输入年、月、日等参数月份从0开始计数因此1代表2月
var date1 new Date(2024, 0, 18); // 创建一个2024年1月18日的新实例// 使用特定格式的字符串创建
var date2 new Date(January 18, 2024 00:00:00);
var date3 new Date(2024-01-18T00:00:00); // ISO 8601格式// 指定自1970年1月1日以来的毫秒数
var date4 new Date(1685055600000); // 2023年8月2日12:00:00 UTC获取和设置日期/时间值 实例方法 getDate(), getDay(), getFullYear(), getHours(), getMilliseconds(), getMinutes(), getMonth(), getSeconds(), getTime(), getTimezoneOffset() 等用于获取相应的时间部分。对应地有 setDate(), setFullYear(), setHours(), setMilliseconds(), setMinutes(), setMonth(), setSeconds() 等方法来设置具体的时间值。 示例 var today new Date();
console.log(today.getDate()); // 获取当前日期1-31
today.setFullYear(2025); // 设置年份为2025其他常用方法 toLocaleDateString() 和 toLocaleTimeString() 方法将日期和时间转换为本地化格式的字符串。toDateString() 返回日期部分的字符串形式。toTimeString() 返回时间部分的字符串形式。toISOString() 返回ISO 8601格式的字符串如“2024-01-18T00:00:00.000Z”。 静态方法 Date.now() 返回当前时间距离1970年1月1日0点0分0秒UTC的毫秒数。Date.parse(dateString) 解析给定的日期字符串并返回该时间点与1970年1月1日之间的毫秒数。此方法对于不同格式的日期字符串解析规则可能因浏览器而异建议使用new Date(dateString)并检查返回值是否有效来确保兼容性。 示例操作 var d new Date();
console.log(d.toLocaleString()); // 显示当前日期和时间的本地格式d.setDate(d.getDate() 7); // 将日期增加7天
console.log(d.toDateString()); // 显示修改后日期console.log(Date.now()); // 输出当前时间戳毫秒RegExp:正则表达式Regular Expression简称 RegExp,是 JavaScript 中用于处理文本字符串的强大工具。它定义了一种模式可以用来搜索、匹配、替换文本中的特定子串。 在JavaScript中创建正则表达式有两种方式 字面量语法 var regex /pattern/flags;其中 pattern 是一个代表所需匹配模式的字符串而 flags 可选包含标志字符如 g、i、m分别表示全局搜索global、不区分大小写ignore case和多行模式multiline。 构造函数语法 var regex new RegExp(pattern, flags);正则表达式的常用方法 .test(string): 测试给定字符串是否满足正则表达式所定义的模式。.exec(string): 在字符串中执行查找并返回第一个匹配项的信息如果没有找到匹配项则返回null。当使用全局标志g时连续调用.exec()会逐个查找所有匹配项。 与字符串对象结合的方法 string.match(regexp): 在字符串中查找正则表达式的匹配项返回匹配结果数组或null。string.replace(regexp|substr, newSubstr|function)根据正则表达式或子串进行查找并替换如果第一个参数是正则表达式还可以利用分组(())捕获的内容进行动态替换。string.search(regexp)返回字符串中第一次出现正则表达式匹配项的索引位置如果没有找到返回-1。 全局函数如isNaN()检查是否为NaN、parseInt()和parseFloat()转换字符串为数字、prompt()、alert()、confirm()与用户交互。 isNaN(value): 这不是一个正则表达式相关函数而是用来检查传递的值是否为NaN非数字。返回值是一个布尔值如果是NaN则返回true否则返回false。parseInt(string, radix): 该函数解析一个字符串并返回一个整数。第二个可选参数指定进制默认是10进制。如果字符串不能被解析成有效的整数或者基数无效则返回NaN。parseFloat(string): 类似于parseInt但此函数尝试将字符串解析为浮点数。prompt(message[, defaultText]): 此全局浏览器函数弹出一个对话框提示用户输入信息。返回用户输入的字符串或在用户取消时返回null。alert(message): 显示一个警告对话框包含指定的消息内容并在用户点击确定后关闭。confirm(question): 显示一个确认对话框包含指定的问题文本以及“确定”和“取消”按钮。用户点击确定时返回true点击取消时返回false。 全局函数部分在JavaScript中指的是可以直接调用而无需特定对象的函数这些函数在浏览器环境中提供了一些基本的用户交互和数据处理能力。以下是几个常用的全局函数详细介绍 isNaN(value) 该函数接收一个参数并检查其是否为NaN非数字。 var num Hello;
console.log(isNaN(num)); // 输出true因为Hello不是数字注意isNaN会首先尝试将传入值转换为数字因此某些非数字字符串也可能返回false例如空字符串会被转换为0所以isNaN()会返回false。 parseInt(string, radix) 此函数用于解析一个字符串并返回其中包含的整数值。第二个可选参数指定进制默认是10进制。 var str 123;
console.log(parseInt(str)); // 输出123
console.log(parseInt(1101, 2)); // 输出13二进制数1101转换为十进制数parseFloat(string) 类似于parseInt但此函数尝试将字符串解析为浮点数。 var floatStr 3.14;
console.log(parseFloat(floatStr)); // 输出3.14prompt(message[, defaultText]) 这是一个浏览器环境下的全局函数它弹出一个对话框提示用户输入信息用户可以在这个对话框内输入文本然后点击确认或取消按钮。函数返回用户输入的字符串如果用户点击取消则返回null。 var userInput prompt(请输入您的姓名:, John Doe);
if (userInput ! null) {console.log(userInput);
}alert(message) 显示一个警告对话框包含给定的消息内容。这个对话框通常只包含一个“确定”按钮当用户点击确定后对话框消失。 alert(这是一条消息提醒);confirm(question) 显示一个确认对话框包含一个问句以及“确定”和“取消”两个按钮。用户点击“确定”时函数返回true点击“取消”时函数返回false。 var isAgreed confirm(你是否同意条款和条件);
if (isAgreed) {console.log(用户已同意条款和条件);
} else {console.log(用户不同意条款和条件);
}这些全局函数主要用于简单的用户交互和数据类型转换在现代Web应用开发中为了更好的用户体验推荐使用更复杂的UI组件和API进行交互操作。对于验证数据格式等任务正则表达式也经常与这些函数结合使用。 异步编程在JavaScript中由于其单线程执行模型处理网络请求、文件读写等耗时操作时需要采用异步编程方式以避免阻塞主线程。以下是关于异步编程的三种主要技术手段的详细解释 回调函数 回调函数是最早的异步编程模式之一在JavaScript中广泛应用。当一个异步任务完成后通过调用预先定义好的函数即回调函数来处理结果或错误。 function getData(callback) {// 假设这是一个异步操作setTimeout(() {const data Async Data;callback(data); // 异步操作完成后调用回调函数}, 2000);
}function processData(data) {console.log(Processed data:, data);
}// 使用回调函数处理异步结果
getData(processData);缺点随着异步逻辑复杂度增加多个回调嵌套导致代码难以阅读和维护这通常被称为“回调地狱”。 Promise Promise 是ES6引入的一种标准机制用于处理异步操作并解决回调地狱问题。它代表了一个异步操作的最终完成或失败及其结果值。Promise有三种状态pending进行中、fulfilled已成功或rejected已失败。一旦状态改变就不可再变。 function getData() {return new Promise((resolve, reject) {setTimeout(() {const data Async Data;if (data) { // 模拟异步操作的成功情况resolve(data);} else {reject(new Error(Failed to fetch data));}}, 2000);});
}getData().then(data {console.log(Processed data:, data);
}).catch(error {console.error(Error:, error.message);
});async/await async/await 是基于Promise的更简洁的异步编程语法糖。async 关键字用来声明一个异步函数该函数会隐式地返回一个Promise对象await 关键字则用于等待Promise的结果并可以放在async函数内部。 async function getData() {return new Promise((resolve, reject) {setTimeout(() {resolve(Async Data);}, 2000);});
}async function main() {try {const data await getData();console.log(Processed data:, data);} catch (error) {console.error(Error:, error.message);}
}main(); // 启动异步操作使用async/await可以使异步代码看起来更加同步化更易于理解和调试。然而本质上它们仍然是基于Promise的异步编程机制只是提供了一种更接近传统顺序流程控制的语法形式。 模块化是编程中的一种设计思想它将程序分割成多个独立、可复用的部分即模块每个模块有自己明确的职责和接口。在JavaScript中ES6引入了原生的模块系统通过import和export关键字支持模块导入导出功能使得代码结构更加清晰同时方便代码复用和管理。 export 关键字:export用于对外暴露模块的功能变量、函数、类等。一个模块可以有多个export语句也可以通过default export来指定一个默认输出项。 命名导出为模块内的每个需要导出的成员分别指定名称 // math.js
function add(x, y) {return x y;
}function subtract(x, y) {return x - y;
}export { add, subtract };默认导出模块内只能有一个default export代表这个模块的默认出口。 // person.js
class Person {constructor(name, age) {this.name name;this.age age;}
}export default Person;import 关键字:import用于从其他模块导入已经导出的功能。 导入默认导出 // 导入person.js中的默认导出Person类
import Person from ./person;const alice new Person(Alice, 30);导入命名导出 // 导入math.js中的命名导出
import { add, subtract } from ./math;console.log(add(5, 3)); // 输出8
console.log(subtract(5, 3)); // 输出2重命名导入导入时可以给导入的变量或函数重新命名以避免命名冲突 import { add as sum, subtract as difference } from ./math;整体导入使用*一次性导入模块的所有导出项目并将其作为一个对象来访问 // 导入math.js的所有导出内容
import * as math from ./math;console.log(math.add(5, 3)); // 输出8
console.log(math.subtract(5, 3)); // 输出2通过这种方式JavaScript开发者可以在不同的文件中编写模块化的代码然后通过import和export相互连接形成一个复杂的、分层次的应用程序结构。
