HTML-JavaScript基础（非常详细）

么是JavaScript

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

JavaScript特点

是一种解释性脚本语言（代码不进行预编译）。

主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

JavaScript组成

JavaScript日常用途

1、嵌入动态文本于HTML页面。

2、对浏览器事件做出响应。

3、读写HTML元素。

4、在数据被提交到服务器之前验证数据。

5、检测访客的浏览器信息。

6、控制cookies，包括创建和修改等。

7、基于Node.js技术进行服务器端编程。

JavaScript的基本结构

<script type="text/javascript">
 <!—
 JavaScript 语句;
 —>
</script >

示例：

……
<title>初学JavaScript</title>
</head>
<body>
<script type="text/javascript">
 document.write("初学JavaScript");
 document.write("<h1>Hello，JavaScript</h1>");
</script>
</body>
</html>

<script>…</script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可

JavaScript的执行原理

网页中引用JavaScript的方式

1、使用<script>标签

2、外部JS文件

<script src="export.js" type="text/javascript"></script>

3.直接在HTML标签中

<input name="btn" type="button" value="弹出消息框" 
 onclick="javascript：alert('欢迎你');"/>

JavaScript核心语法：

1. 变量

①先声明变量再赋值

var width;
width = 5;
var － 用于声明变量的关键字
width － 变量名

②同时声明和赋值变量

var catName= "皮皮";
var x, y, z = 10;

③不声明直接赋值【一般不使用】

width=5;

变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用。

2. 数据类型

①undefined：示例：var width;

变量width没有初始值，将被赋予值undefined

②null：表示一个空值，与undefined值相等

③number：

var iNum=23; //整数

var iNum=23.0; //浮点数

④Boolean：true和false 但是JS会把他们解析成1；0

⑤String：一组被引号（单引号或双引号）括起来的文本 var string1="This is a string";

3. typeof运算符

typeof检测变量的返回值；typeof运算符返回值如下：

①undefined：变量被声明后，但未被赋值.

②string：用单引号或双引号来声明的字符串。

③boolean：true或false。

④number：整数或浮点数。

⑤object：javascript中的对象、数组和null。

、可维护性代码

通常说代码可维护就意味着它具备以下的特点：

容易理解，无须求助原始开发者，任何人一看代码就知道它是干什么的，以及它是怎么实现的；
符合常识，代码中的一切都显得顺理成章，无论操作多么复杂；
容易适配，即使数据发生变化也不用完全重写；
容易扩展，代码架构经过认真设计，支持未来扩展核心功能；
容易调试，出问题时，代码可以给出明确的信息，通过它能直接定位问题；

二、编码规范-可读性

要想让代码容易维护，首先必须使其可读。代码缩进是保证可读性的重要基础，如果所有人都是用相同的缩进，整个项目的代码就会更容易让人看懂。缩进通常使用空格数而不是tab键来定义，因为tab键在不同文本编译器中的显示不同，一般来说缩进是4个空格。

可读性的另一方面是代码注释。在大多数的编程语言中，广泛接受的做法是为每个方法都编写注释。

一般来说，以下地方应该写注释：

函数和方法，每个函数和方法都应该有注释来描述其用途，以及完成任务所用的算法。同时，也写清楚这个函数或方法的前提，每个参数的含义，以及函数是否返回值。
大型代码块，多行代码但用于完成单一任务的，应该在前面给出注释，把要完成的任务写清楚。
复杂的算法，如果使用了独特的方法解决问题，要通过注释解释明白。这样不仅可以帮助别人查看代码，也可以帮助自己今后查看代码。
使用黑科技，一些特殊的方法，特定的假设。

三、变量和函数命名

代码中变量和函数的适当命名对于其可读性和可维护性至关重要。

变量名应该是名称；
函数名应该以动词开始；
变量、函数、方法都以小写字母开头，使用驼峰大小写形式；
名称要尽量用描述性和直观的词汇，但不要过于冗长；

四、松散耦合

只要应用程序的某个部分对另一部分依赖的过于紧密，代码就会变得紧密耦合，因而难以维护。

典型的问题是在一个对象中直接引用另一个对象，这样，修改其中一个，可能必须还得修改另一个。紧密耦合的软件难以维护，肯定需要频繁的重写。

1、解耦HTML和JavaScript

web开发中最常见的耦合是HTML和JavaScript，在网页中，HTML和JavaScript分别代表不同层面的解决方案，HTML是数据，JavaScript是行为。这是因为它们之间要相互操作，需要通过不同的方式将这两种技术联系起来。可惜的是，其中一些方式会导致HTML与JavaScript紧密耦合。

把JavaScript直接嵌入在HTML中，要么使用包含嵌入代码的

document.write("hello 哪吒编程");

</script>

虽然技术上这样做没有问题，但实践中，这样会将表示数据的HTML与定义行为的JavaScript紧密耦合在一起，理想情况下，HTML和JavaScript应该完全分开，通过外部文件引入JavaScript，然后使用DOM添加行为。

一般来说，应该避免在JavaScript中创建大量的HTML。同样，这主要是为了做到数据层和行为层各司其职，在出错时更容易定位问题所在。

2、解耦CSS和JavaScript

web应用程序的另一层是CSS，负责页面样式显示、

JavaScript和CSS紧密相关，都构建咋HTML之上，因此经常一起使用。

CSS和JavaScript紧密相连的例子：

element.style.color = "red";

element.style.backgroundColor = "blue";

3、解耦应用程序逻辑和事件处理程序

每个web应用程序中都会有大量事件处理程序在监听各种事件。可是，其中很少能做到应用程序逻辑与事件处理程序分离。

以下是解耦应用程序逻辑和业务逻辑时应该注意的几点：

不要把event对象传给其他方法，而是只传递event对象中必要的数据；
应用程序中每个可能的操作都应该无须事件处理程序就可以执行；
事件处理程序应该处理事件，而把后续处理交给应用程序逻辑；

做到以上几点能够给任何代码的可维护性带来巨大的提升，同时也能为将来的测试和开发提供很多可能性。

五、编码惯例

1、尊重对象所有权

2、不声明全局变量

最多可以创建一个全局变量，作为其他对象和函数的命名空间。

3、不要比较null

4、使用常量

重复出现的值
用户界面字符串
URL
任何可能变化的值

六、作用域意识

随着作用域链中作用域数量的增加，访问当前作用域链外部变量所需要的时间也会增加，访问全局变量始终比访问局部变量要慢，因为必须遍历作用域链，任何可疑缩短遍历作用域链时间的举措都能提升代码性能。

1、避免全局查找

改进代码性能非常重要的一件事，可能就是要提防全局查找。全局变量和函数相比于局部变量始终是最费时间的，因为需要经历作用域链查找。

如果for循环中多次引用document，可以通过在局部作用域中保存document对象的引用，能够明显提升这个函数的性能，因为只需要作用域链查找。

2、不适用with语句

在性能很重要的代码中，应避免使用with语句，与函数类似，with语句会创建自己的作用域，因此也会加长其中代码的作用域链。在with语句中的diamagnetic一定比在它外部执行的代码慢，因为作用域链查找时多一步。

七、优化循环

循环时编程中常用的语法构造，因此在JavaScript中十分常见，优化这些循环时性能优化的重要内容，因为循环会重复多次运行相同的代码，所以运行时间会自动增加。

1、简化终止条件

因为每次循环都会计算终止条件，所以它应该尽可能地快。

2、简化循环体

循环体是最花时间的部分，因此要尽可能优化。要确保其中不包含可以轻松转移到循环外部的密集计算。

3、使用后测试循环

最常见的循环时for和while循环，这两种循环都属于先测试循环。do-while就是后测试循环，避免了对终止条件初始化评估，因此会更快。

4、展开循环

如果循环的次数是有限的，那么通常抛弃循环而直接多次调用函数会更快。

八、语句最少化

JavaScript代码语句的数量影响执行的速度。一条可以执行多个操作的语句，比多条语句中每个语句执行一个操作要快。那么优化的目标就是寻找可以合并的语句，以较少整个脚本的执行时间。

1、多个变量声明

2、插入迭代性值

任何时候只要使用迭代性值（递增或者递减），都要尽可能使用组合语句。

比如

let name = values[i++]

替代

let name = values[i];

i++;

3、使用数组和对象字面量

九、优化DOM交互

在所有JavaScript代码中，涉及DOM的部分无疑是非常慢的。DOM操作和交互需要占用大量时间，因为经常需要重新渲染整个或部分页面。此外，看起来简单的操作也可能花费很长时间，因为DOM中携带着大量信息。理解如何优化DOM交互可以极大地提升脚本的执行速度。

1、实时更新最小化

访问DOM时，只要访问的部分是显示页面的一部分，就是在执行实时更新操作。之所以称其为实时更新，是因为涉及立即更新页面的显示，让用户看到。每次这样的更新，无论是插入一个字符还是删除页面上的一个内容，都会导致性能损失。这是因为浏览器需要为此重新计算数千项指标，之后才能执行更新。实时更新的次数越多，执行代码所需的时间也越长。

2、使用innerHTML

在页面中创建新DOM节点的方式有两种，使用DOM方法如createElement()和appendChild()，以及使用innerHTML。对于少量DOM更新，两种技术区别不大，但对于大量DOM更新，使用innerHTML要比使用标准DOM方法创建同样的结构快得多。

在给innerHTML赋值时，后台会创建HTML解析器，然后使用原生DOM调用，而不是JavaScript的DOM方法来创建DOM结构，原生DOM方法速度更快，因为该方法时执行编译代码而非解释代码。

3、使用委托事件

大多数web应用程序会大量使用事件处理程序实现用户交互。一个页面中事件处理程序的数量与页面响应用户交互的速度有直接关系，为了减少对页面响应的影响，应该尽可能使用事件委托。

事件委托利用了事件的冒泡，任何冒泡的事件都可以不在事件目标上，而在目标的任何祖先元素上处理。基于这个认知，可以把事件处理程序添加到负责多个目标的高层元素上。只要可能，就应该在文档级添加事件处理程序，因为在文档级可以处理整个页面的的事件。

4、注意HTMLCollection

由于web应用程序存在很大的性能问题，只要访问HTMLCollection，无论是它的属性还是方法，就会触发查询文档，而这个查询相当耗时，减少访问HTMLCollection的次数可以极大地提升脚本的性能。

可以优化HTMLCollection访问最关键的地方就是循环。

十、JavaScript思维导图

[机智]点击获取资料

现代web开发中，表单是用户与网站互动的重要方式之一。HTML5为表单提交提供了强大的功能和丰富的输入类型，让收集和验证用户输入数据变得更加容易和安全。本文将详细介绍HTML5表单的各个方面，包括基本结构、输入类型、验证方法和提交过程。

基本结构

HTML表单由<form>标签定义，它可以包含输入字段、标签、按钮等元素。一个基本的表单结构如下所示：

<form action="/submit_form" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">电子邮箱：</label>
  <input type="email" id="email" name="email" required>
  
  <input type="submit" value="提交">
</form>

在这个例子中，表单有两个输入字段：姓名和电子邮箱。每个输入字段都有一个<label>标签，这不仅有助于用户理解输入的内容，也有助于屏幕阅读器等辅助技术。<form>标签的action属性定义了数据提交到服务器的URL，method属性定义了提交数据的HTTP方法（通常是post或get）。

输入类型

HTML5提供了多种输入类型，以支持不同的数据格式和设备。

文本输入

<!-- 单行文本 -->
<input type="text" name="username" placeholder="请输入用户名" required>

<!-- 密码 -->
<input type="password" name="password" required minlength="8">

<!-- 邮箱 -->
<input type="email" name="email" required placeholder="example@domain.com">

<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索...">

数值输入

<!-- 数值 -->
<input type="number" name="age" min="18" max="100" step="1" required>

<!-- 滑动条 -->
<input type="range" name="volume" min="0" max="100" step="1">

<!-- 电话号码 -->
<input type="tel" name="phone" pattern="^\+?\d{0,13}" placeholder="+8613800000000">

日期和时间输入

<!-- 日期 -->
<input type="date" name="birthdate" required>

<!-- 时间 -->
<input type="time" name="appointmenttime">

<!-- 日期和时间 -->
<input type="datetime-local" name="appointmentdatetime">

选择输入

<!-- 复选框 -->
<label><input type="checkbox" name="interest" value="coding"> 编程</label>
<label><input type="checkbox" name="interest" value="music"> 音乐</label>

<!-- 单选按钮 -->
<label><input type="radio" name="gender" value="male" required> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>

<!-- 下拉选择 -->
<select name="country" required>
  <option value="china">中国</option>
  <option value="usa">美国</option>
</select>

特殊输入

<!-- 颜色选择器 -->
<input type="color" name="favcolor" value="#ff0000">

<!-- 文件上传 -->
<input type="file" name="resume" accept=".pdf,.docx" multiple>

验证方法

HTML5表单提供了内置的验证功能，可以在数据提交到服务器之前进行检查。

必填字段

<input type="text" name="username" required>

正则表达式

<input type="text" name="zipcode" pattern="\d{5}(-\d{4})?" title="请输入5位数的邮政编码">

数值范围

<input type="number" name="age" min="18" max="99">

长度限制

<input type="text" name="username" minlength="4" maxlength="8">

表单提交

当用户填写完表单并点击提交按钮时，浏览器会自动检查所有输入字段的有效性。如果所有字段都满足要求，表单数据将被发送到服务器。否则，浏览器会显示错误信息，并阻止表单提交。

<input type="submit" value="提交">

可以使用JavaScript来自定义验证或处理提交事件：

document.querySelector('form').addEventListener('submit', function(event) {
  // 检查表单数据
  if (!this.checkValidity()) {
    event.preventDefault(); // 阻止表单提交
    // 自定义错误处理
  }
  // 可以在这里添加额外的逻辑，比如发送数据到服务器的Ajax请求
});

完整例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单提交并显示JSON</title>
</head>
<body>

<!-- 表单定义 -->
<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <br>

  <label for="email">电子邮件：</label>
  <input type="email" id="email" name="email">
  <br>

  <input type="button" value="提交" onclick="submitForm()">
</form>

<script>
// JavaScript函数，处理表单提交
function submitForm() {
  // 获取表单元素
  var form = document.getElementById('myForm');
  
  // 创建一个FormData对象
  var formData = new FormData(form);
  
  // 创建一个空对象来存储表单数据
  var formObject = {};
  
  // 将FormData转换为普通对象
  formData.forEach(function(value, key){
    formObject[key] = value;
  });
  
  // 将对象转换为JSON字符串
  var jsonString = JSON.stringify(formObject);
  
  // 弹出包含JSON字符串的对话框
  alert(jsonString);
  
  // 阻止表单的默认提交行为
  return false;
}
</script>

</body>
</html>

在这个例子中：

我们定义了一个包含姓名和电子邮件输入字段的表单，以及一个按钮，当点击按钮时会调用submitForm函数。
在submitForm函数中，我们首先获取表单元素并创建一个FormData对象。然后，我们遍历FormData对象，将表单数据复制到一个普通的JavaScript对象formObject中。
接着，我们使用JSON.stringify方法将formObject转换成JSON字符串。
最后，我们使用alert函数弹出一个包含JSON字符串的对话框。

注意，这个例子中我们使用了type="button"而不是type="submit"，因为我们不希望表单有默认的提交行为。我们的JavaScript函数submitForm会处理所有的逻辑，并且通过返回false来阻止默认的表单提交。如果你想要使用type="submit"，你需要在<form>标签上添加一个onsubmit="return submitForm()"属性来代替按钮上的onclick事件。

结论

HTML5的表单功能为开发者提供了强大的工具，以便创建功能丰富、用户友好且安全的网站。通过使用HTML5的输入类型和验证方法，可以确保用户输入的数据是有效的，同时提高用户体验。随着技术的不断进步，HTML5表单和相关API将继续发展，为前端工程师提供更多的可能性。

在线咨询

上一篇：利用IE法提取网页数据基础
下一篇：抖音上很火的3D立体动态相册实现代码！赶快学起来吧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商