01 JavaScript学习 导读

什么是JavaScript？

在这里插入图片描述

JavaScript 是一种用于创建交互式网页和网络应用程序的脚本语言。它是一种高级、动态类型的语言，广泛用于客户端网页开发，可以用来增强网页的交互性并实现各种功能。

以下是 JavaScript 的一些重要特点和用途：

  1. 客户端脚本语言：JavaScript 在网页上运行在用户的浏览器中，允许开发者处理用户输入、改变页面内容、调用后台服务等，从而实现更加丰富和动态的用户界面。

  2. 动态类型：JavaScript 是一种动态类型语言，意味着变量不需要预先创建或指定类型，而是在运行时进行确定。这样使得 JavaScript 编码更加灵活。

  3. 事件驱动：JavaScript 常常用于处理用户的各种事件，比如鼠标点击、键盘输入等。通过添加事件监听器，开发者可以对这些事件作出相应。

  4. 与 HTML 和 CSS 配合使用：JavaScript 可与 HTML 和 CSS 一起使用，用于操作网页的结构和样式，使得网页更具交互性和动态性。

  5. 跨平台：JavaScript 能够在各种不同的浏览器上运行，支持多种操作系统和设备，因此是一个跨平台的脚本语言。

  6. Web 应用开发：JavaScript 不仅限于网站开发，还被广泛应用于开发 Web 应用，包括基于浏览器的应用、桌面应用和移动应用。

  7. 服务器端开发：除了在客户端使用，JavaScript 还可以作为服务器端语言（Node.js）使用，使得开发者可以使用单一语言同时处理前端和后端任务。

JavaScript 是一种功能强大、灵活多样的脚本语言，它使得网页和应用程序更加交互、动态和用户友好。随着技术的发展，JavaScript 在 Web 开发领域的地位越来越重要，成为了不可或缺的一部分。

JavaScript的历史

在这里插入图片描述

JavaScript 的历史可以追溯到上世纪90年代初，以下是 JavaScript 的主要历史和发展里程碑：

  1. 诞生（1995年）：JavaScript 最初由网景公司（Netscape）的布兰登·艾奇（Brendan Eich）在短短10天内开发而成，最初被称为 LiveScript。后来为了搭上当时 Java 语言的热度，更名为 JavaScript。1995年12月发布了 Netscape Navigator 2.0 浏览器，并与其一起发布了 JavaScript。

  2. 标准化（1997年）：由于不同浏览器实现的差异，欧洲计算机制造商协会（ECMA）开始制定 JavaScript 的标准，这一标准被命名为 ECMAScript。1997年，ECMAScript 1.0 正式发布，它定义了 JavaScript 的核心语法和特性。

  3. DOM 和 AJAX（2000年）：在 2000 年代初，W3C 开始发展 Document Object Model（DOM）标准，使 JavaScript 能够更好地操作网页的结构和内容。此外，也是在这个时期，Ajax 技术（Asynchronous JavaScript and XML）被广泛采用，使得 JavaScript 可以通过异步通信与服务器交换数据，提高了网页的交互性和用户体验。

  4. jQuery 和前端框架兴起（2006年）：2006年，jQuery 框架问世，它简化了 JavaScript 在网页开发中对 HTML 元素操作、事件处理、动画效果等方面的复杂性，大大降低了前端开发的门槛。同时，一系列新的前端框架如Angular和React也开始逐渐兴起。

  5. Node.js 的出现（2009年）：2009年，Ryan Dahl 发布了 Node.js，该技术在服务器端上执行 JavaScript 代码，使得 JavaScript 不仅可以在客户端上运行，还可以用于构建服务器端程序，从而实现了全栈 JavaScript 开发的可能。

  6. ECMAScript 的持续改进：自 ECMAScript 1.0 发布以来，JavaScript 的标准 ECMA-262 一直在不断更新。自 ES6（ECMAScript 2015）以来，新的功能和语法持续被加入，以满足日益增长的需求。

以上就是 JavaScript 的主要历史和发展过程。从最初的浏览器脚本语言，到如今的全栈开发和跨平台开发，JavaScript 经历了多次变革和演进，成为了当今 Web 开发领域中不可或缺的一部分。

JavaScript应用场景

在这里插入图片描述

JavaScript 作为一种通用的脚本语言，具有非常广泛的应用场景。以下是 JavaScript 常见的一些应用场景：

  1. 网页交互：JavaScript 最常见的用途是为网页添加交互性。例如，通过JavaScript可以实现表单验证、动态加载内容、页面元素的动画效果，以及响应用户的各种操作（点击、滚动、拖拽等）。

  2. AJAX：JavaScript 可以通过 AJAX 技术与服务器进行异步通信，实现无需刷新整个页面就可以更新部分内容的效果，使得网页变得更加动态和高效。

  3. 前端框架和库：JavaScript 有许多流行的前端框架和库，如React、Angular、Vue等，用于快速开发复杂的前端应用程序，构建用户界面、管理数据状态等。

  4. 浏览器扩展：JavaScript 可以用于开发浏览器扩展或插件，为浏览器增加新功能或改善用户体验。

  5. Web 应用程序：JavaScript 可以用于构建各种类型的 Web 应用程序，包括社交媒体平台、在线商城、博客、项目管理工具等，以实现丰富的用户交互和功能。

  6. 移动应用开发：使用框架如React Native、Ionic等，可以利用 JavaScript 开发跨平台的移动应用程序。

  7. 游戏开发：JavaScript 可以用于创建基于浏览器的游戏，通过HTML5 Canvas或WebGL实现图形渲染等技术，实现丰富的游戏体验。

  8. 服务器端开发：借助 Node.js，JavaScript 可以用于编写服务器端程序，处理HTTP请求、访问数据库、实现 RESTful API 等。

  9. 数据可视化：JavaScript 很适合用于创建各种数据可视化图表，如折线图、柱状图、地图等，有助于将复杂的数据以直观的方式展示给用户。

JavaScript 在 Web 开发和移动应用等领域有着广泛的应用，它不仅能够提供丰富的用户交互体验，还能够实现复杂的业务逻辑和数据处理，因此被广泛应用于各种类型的应用程序开发。

JavaScript之于网页

  1. JavaScript 是一种轻量级的编程语言。
  2. JavaScript 是可插入 HTML 页面的编程代码。
  3. JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
  4. JavaScript 很容易学习。

直接写入 HTML 输出流

在 JavaScript 中，可以通过使用 document.write() 方法向 HTML 输出流（即网页中的文档）中写入内容。这个方法会在页面加载的过程中直接将指定的内容输出到页面上。

例如，你可以在 HTML 文档中嵌入如下 JavaScript 代码来演示它的使用：

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 写入输出流</h2>

<p>点击按钮以输出 "Hello World"。</p>

<button onclick="writeToDocument()">点我</button>

<script>
function writeToDocument() {
  document.write("Hello World!");
}
</script>

</body>
</html>

在这个例子中，当用户点击按钮时，writeToDocument 函数会被调用，然后 document.write() 方法会把 “Hello World!” 直接输出到页面上。

需要注意的是，document.write() 方法的使用需要谨慎。由于它会改变整个文档的结构，因此在大多数情况下，使用它都会导致页面重新解析和重绘，对性能和用户体验可能会产生负面影响。通常情况下，推荐使用 DOM 操作方法来修改页面内容，而不是直接使用 document.write()。

对事件的反应

JavaScript 可以通过事件处理来对用户的操作做出反应。以下是 JavaScript 中常见的事件和相应的处理方式：

  1. 点击事件（click）：当用户点击页面上的元素时触发。可以使用 addEventListener 方法添加点击事件的监听器，然后在相应的处理函数中执行相应的操作。
document.getElementById("myButton").addEventListener("click", function() {
  // 执行点击事件的处理操作
});
  1. 鼠标移动事件（mousemove）：当用户在页面上移动鼠标时触发。可以使用 addEventListener 方法添加鼠标移动事件的监听器，然后在相应的处理函数中执行相应的操作。
document.addEventListener("mousemove", function(event) {
  // 获取鼠标的坐标位置
  var x = event.clientX;
  var y = event.clientY;
  // 执行鼠标移动事件的处理操作
});
  1. 键盘事件（keydown、keyup、keypress）：当用户按下或释放键盘上的键时触发。可以使用 addEventListener 方法添加键盘事件的监听器，然后在相应的处理函数中执行相应的操作。
document.addEventListener("keydown", function(event) {
  // 获取按下的键的键码
  var keyCode = event.keyCode;
  // 执行键盘按下事件的处理操作
});
  1. 表单事件（submit、change）：当用户提交表单或输入表单元素的值时触发。可以使用 addEventListener 方法添加表单事件的监听器，然后在相应的处理函数中执行相应的操作。
document.getElementById("myForm").addEventListener("submit", function(event) {
  // 阻止表单提交的默认行为
  event.preventDefault();
  // 执行表单提交事件的处理操作
});

通过监听这些事件并在相应的处理函数中执行相应的操作，JavaScript 可以对用户的行为做出实时的反应，从而实现丰富的交互效果。

改变 HTML 内容

要通过 JavaScript 改变 HTML 内容，通常可以通过以下几种方式实现：

  1. 使用 innerHTML 属性：可以通过修改元素的 innerHTML 属性来改变元素内部的 HTML 内容。这种方法常用于改变元素的文本内容或插入新的 HTML 结构。
// 获取需要修改的元素
var element = document.getElementById("myElement");
// 修改元素的内容
element.innerHTML = "<strong>新的内容</strong>";
  1. 使用 textContent 属性：如果只是需要修改元素的文本内容而不涉及 HTML 结构，可以使用 textContent 属性。
// 获取需要修改文本内容的元素
var element = document.getElementById("myElement");
// 修改元素的文本内容
element.textContent = "新的文本内容";
  1. 创建新元素并添加到文档中：可以通过 JavaScript 动态创建新的 HTML 元素，并将其添加到文档中。
// 创建一个新的段落元素
var newParagraph = document.createElement("p");
// 设置新段落的文本内容
newParagraph.textContent = "这是一个新段落。";
// 将新段落添加到页面中的某个元素中
document.getElementById("myContainer").appendChild(newParagraph);
  1. 使用事件处理程序：在事件处理函数中，可以通过 JavaScript 改变 HTML 内容以响应用户的操作。
document.getElementById("myButton").addEventListener("click", function() {
  // 在点击按钮时修改元素内容
  document.getElementById("myElement").textContent = "按钮被点击了！";
});

改变 HTML 图像

要改变 HTML 图像，你可以通过 JavaScript 动态修改图像的 src 属性来实现。以下是一个简单的例子：

// 获取需要修改的图像元素
var image = document.getElementById("myImage");
// 修改图像的 src 属性
image.src = "新的图片路径.jpg";

上述代码中，myImage 是你要修改的图像元素的 ID。通过获取该元素并修改其 src 属性，你就可以动态地改变图像的显示内容。

另外，你也可以在触发事件时改变图像，比如在按钮点击时切换图像：

document.getElementById("myButton").addEventListener("click", function() {
  // 在点击按钮时修改图像的 src 属性
  var image = document.getElementById("myImage");
  image.src = "新的图片路径.jpg";
});

通过上述方式，可以实现在网页上动态改变图像，并为用户提供更丰富的交互体验。

改变 HTML 样式

要通过 JavaScript 改变 HTML 元素的样式，你可以使用元素的 style 属性。下面是一些常见的方法：

  1. 直接修改样式属性：
// 获取需要修改样式的元素
var element = document.getElementById("myElement");
// 直接修改样式属性
element.style.backgroundColor = "yellow";
element.style.color = "red";
  1. 通过设置 CSS 类名：
// 获取需要修改样式的元素
var element = document.getElementById("myElement");
// 通过设置 CSS 类名来改变样式
element.className = "newClassName";
  1. 使用classList：
// 获取需要修改样式的元素
var element = document.getElementById("myElement");
// 使用 classList 属性添加或移除类
element.classList.add("newClass");
element.classList.remove("oldClass");
  1. 动态修改样式表：
// 创建一个新的样式表规则
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.newRule { color: blue; }';
document.getElementsByTagName('head')[0].appendChild(style);

无论使用哪种方法，通过 JavaScript 改变 HTML 元素的样式，都可以实现在网页上动态地改变外观和布局，以适应不同的交互和用户需求。

验证输入

要验证用户的输入，你可以使用 JavaScript 来检查表单输入是否符合特定的规则。以下是一些常见的验证方法示例：

  1. 检查文本框输入：
var inputValue = document.getElementById("myInput").value;
if (inputValue === "") {
  // 输入不能为空
  alert("请输入内容");
} else {
  // 输入有效，继续处理
}
  1. 检查密码输入：
var password = document.getElementById("passwordInput").value;
if (password.length < 8) {
  // 密码长度不能少于8位
  alert("密码长度不能少于8位");
} else {
  // 密码有效，继续处理
}
  1. 检查邮箱输入：
var email = document.getElementById("emailInput").value;
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(email)) {
  // 邮箱格式不正确
  alert("请输入有效的邮箱地址");
} else {
  // 邮箱格式有效，继续处理
}

以上示例只是简单的验证方法，还有许多其他类型的输入验证 (如数字、日期等) 可供选择。在真实的项目中，你可能需要结合不同的验证规则，以确保用户输入的有效性。记住，在客户端验证用户输入只是防止用户输入明显错误的一种手段，真正有效的数据验证应该在服务端进行。

关注我，不迷路，共学习，同进步

关注我，不迷路，共学习，同进步

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/552610.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Linux中进程和计划任务

Linux中进程和计划任务

一.程序 1.什么是程序 &#xff08;1&#xff09;是一组计算机能识别和执行的指令&#xff0c;运行于电子计算机上&#xff0c;满足人们某种需求的信息化工具 &#xff08;2&#xff09;用于描述进程要完成的功能&#xff0c;是控制进程执行的指令集 二.进程 1.什么是进程…
阅读更多...
ORAN C平面 Section Extension 23

ORAN C平面 Section Extension 23

ORAN C平面Section扩展23用于任意symbol模式的调制压缩参数。此section扩展允许为一个或多个“SymPrbPatterns”指定多组“mcScaleReMask、csf和mcScaleOffset”值。“SymPrbPattern”用于指定一组PRB&#xff0c;这些PRB可以跨越使用prbPattern指定的整个PRB范围&#xff08;频…
阅读更多...
20240329-1-SVM面试题

20240329-1-SVM面试题

SVM面试题 1. SVM直观解释 SVM&#xff0c;Support Vector Machine&#xff0c;它是一种二分类模型&#xff0c;其基本模型定义为特征空间上的间隔最大的线性分类器&#xff0c;间隔最大使它有别于感知机&#xff1b;其还包括核技巧&#xff0c;这使它成为实质上的非线性分类…
阅读更多...
ACID模型是什么

ACID模型是什么

ACID模型是什么 ACID模型是数据库管理系统中保证事务处理安全性的一组特性。ACID是原子性&#xff08;Atomicity&#xff09;、一致性&#xff08;Consistency&#xff09;、隔离性&#xff08;Isolation&#xff09;和持久性&#xff08;Durability&#xff09;四个英文单词的…
阅读更多...
使用 ECharts 绘制咖啡店各年订单的可视化分析

使用 ECharts 绘制咖啡店各年订单的可视化分析

使用 ECharts 绘制咖啡店各年订单的可视化分析 在这篇博客中&#xff0c;我将分享一段使用 ECharts 库创建可视化图表的代码。通过这段代码&#xff0c;我们可以直观地分析咖啡店各年订单的情况。 饼图 这段代码包含了两个 ECharts 图表&#xff0c;一个是饼图&#xff0c;用…
阅读更多...
lomobok源码编译学习笔记（1）

lomobok源码编译学习笔记（1）

lomobok学习笔记&#xff08;1&#xff09; 项目导入 lombok的github地址 GitHub - projectlombok/lombok: Very spicy additions to the Java programming language. 开发工具 idea不知道为啥&#xff0c;装上ant工具也不好用&#xff0c;eclipse默认自带有ant,不需要装。…
阅读更多...
matlab关于COE文件之读取操作

matlab关于COE文件之读取操作

平台&#xff1a;matlab2021b 场景&#xff1a;在使用fir滤波器后&#xff0c;我们使用matlab生成coe文件后。在xilinx新建IP的后&#xff0c;数据流经过FIR的IP核后数据位宽变宽。这时候我们需要对数据进行截位。这时候需要读取coe文件求和后&#xff0c;计算我们需要截位的位…
阅读更多...
Shell学习 - 2.27 Linux bc命令：一款数学计算器

Shell学习 - 2.27 Linux bc命令：一款数学计算器

Bash Shell 内置了对整数运算的支持&#xff0c;但是并不支持浮点运算&#xff0c;而 Linux bc 命令可以很方便的进行浮点运算&#xff0c;当然整数运算也不再话下。 bc是"Basic Calculator"的缩写。 bc 甚至可以称得上是一种编程语言了&#xff0c;它支持变量、数组…
阅读更多...
初识ansible核心模块

初识ansible核心模块

目录 1、ansible模块 1.1 ansible常用模块 1.2 ansible-doc -l 列出当前anisble服务所支持的所有模块信息&#xff0c;按q退出 1.3 ansible-doc 模块名称 随机查看一个模块信息 2、运行临时命令 2.1 ansible命令常用的语法格式 3、常用模块详解与配置实例 3.1命令与…
阅读更多...
RK3568驱动指南｜第二篇 字符设备基础-第16章 一个驱动兼容不同设备实验

RK3568驱动指南｜第二篇 字符设备基础-第16章 一个驱动兼容不同设备实验

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…
阅读更多...
PhotoShop2024安装包（亲测可用）

PhotoShop2024安装包（亲测可用）

目录 一、软件简介 二、软件下载 一、软件简介 Adobe Photoshop是一款由Adobe Systems开发的图像编辑软件。它被广泛用于图像处理和数字艺术创作&#xff0c;是设计师、摄影师和艺术家们的首选工具之一。 主要功能&#xff1a; 图像编辑&#xff1a; Photoshop提供了丰富的编辑…
阅读更多...
content-type对数据采集的影响,猿人学58题

content-type对数据采集的影响,猿人学58题

在拿猿人学网站 https://www.python-spider.com/api/challenge58 练习的时候发现请求头中少了 content-type之后结果全部不对了 当我设置headers如下时 headers {# accept: application/json, text/javascript, */*; q0.01,content-type: application/x-www-form-urlencode…
阅读更多...
【前端Vue】Vue从0基础完整教程第7篇：组件化开发,组件通信【附代码文档】

【前端Vue】Vue从0基础完整教程第7篇：组件化开发,组件通信【附代码文档】

Vue从0基础到大神学习完整教程完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;vue基本概念&#xff0c;vue-cli的使用&#xff0c;vue的插值表达式&#xff0c;{{ gaga }}&#xff0c;{{ if (obj.age > 18 ) { } }}&#xff0c;vue指令&#xff0c;综合…
阅读更多...
使用WebSocket实现答题积分排名实时更新的功能

使用WebSocket实现答题积分排名实时更新的功能

需求分析 接到一个需求&#xff0c;是一个答题积分小程序&#xff0c;其中有一个功能需求是需要实时更新答题积分排名的。之前通常比较常见的需求&#xff0c;都是指定某个时间点才更新答题排行榜的数据的。 经过技术调研&#xff0c;要实现答题积分排名实时更新的功能&#…
阅读更多...
基于SpringBoot+Vue的装饰工程管理系统（源码+文档+包运行）

基于SpringBoot+Vue的装饰工程管理系统（源码+文档+包运行）

一.系统概述 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统装饰工程项目信息管理难度大&#xff0c;容错率低&a…
阅读更多...
Word分节后，页码不连续、转PDF每节后多出空白页解决办法

Word分节后，页码不连续、转PDF每节后多出空白页解决办法

1. 问题图例 废话少说&#xff0c;先上图&#xff1a; 2. 问题分析 问题分析&#xff1a;出现以上问题的原因可能有&#xff0c; 未链接到上一节页面布局中节的起始位置设置为[奇数页] 3. 解决问题 若为【1. 未链接到上一节】导致该问题出现&#xff0c;则我们需要选中页脚…
阅读更多...
【Java开发指南 | 第十一篇】Java运算符

【Java开发指南 | 第十一篇】Java运算符

读者可订阅专栏&#xff1a;Java开发指南 |【CSDN秋说】 文章目录 算术运算符关系运算符位运算符逻辑运算符赋值运算符条件运算符&#xff08;?:&#xff09;instanceof 运算符Java运算符优先级 Java运算符包括&#xff1a;算术运算符、关系运算符、位运算符、逻辑运算符、赋值…
阅读更多...
Resilience中的RateLimiter

Resilience中的RateLimiter

Resilience中的RateLimiter 一、RateLimiter&#xff08;限流&#xff09;1.常见的限流算法漏桶算法&#xff08;Leaky Bucket&#xff09;令牌桶算法&#xff08;Token Bucket&#xff09;——Spring cloud 默认使用该算法滚动时间窗口&#xff08;tumbling time window&#…
阅读更多...
JVM之方法区的详细解析

JVM之方法区的详细解析

方法区 方法区&#xff1a;是各个线程共享的内存区域&#xff0c;用于存储已被虚拟机加载的类信息、常量、即时编译器编译后的代码等数据&#xff0c;虽然 Java 虚拟机规范把方法区描述为堆的一个逻辑部分&#xff0c;但是也叫 Non-Heap&#xff08;非堆&#xff09; 设置方法…
阅读更多...
就业班 第三阶段（nginx） 2401--4.17 day1 nginx1

就业班 第三阶段（nginx） 2401--4.17 day1 nginx1

负载均衡集群 1、集群是什么&#xff1f; 1 集群&#xff08;cluster&#xff09;技术是一种较新的技术&#xff0c;通过集群技术&#xff0c;可以在付出较低成本的情况下获得在性能、可靠性、灵活性方面的相对较高的收益&#xff0c;其任务调度则是集群系统中的核心技术。 …
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站