🔎这里是【JavaScript】，关注我学习前端不迷路
👍如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️
👀专栏介绍
【JavaScript】 目前主要更新JavaScript，一起学习一起进步。
👀本期介绍
本期主要介绍案例1：使用JS完成注册页面校验
文章目录
1. 需求说明
用户在提交注册表单时，需要对用户的填写的数据进行校验。
本案例只对用户名、密码、确认密码进行校验。
其中用户名、密码、确认密码不能为空；
密码和确认密码必须保持一致
2. 知识讲解-JavaScript（一）
**2.1 ****JavaScript **概述
**2.1.1 ****JavaScript ****是什么？有什么作用？ **
JavaScript 常用来为网页添加各式各样的动态功能。例如：点击隐藏、点击显示。
HTML：就是用来写网页的。
人的身体
CSS： 就是用来美化页面的。 人的衣服
JavaScript：前端大脑、灵魂。 人的大脑、灵魂
JavaScript 是 WEB 上强大的脚本语言。
脚本语言：
无法独立执行。必须嵌入到其他语言中，结合使用。
直接被浏览器解析执行。
Java 编程语言：
独立写程序，独立运行。 编译---执行
作用：控制页面特效展示。
例如：
JS 可以对 HTML 元素进行动态控制
JS 可以对表单项进行校验
JS 可以控制 CSS 的样式
**2.1.2 ****JavaScript ****入门案例 **
**2.1.3 ****JavaScript **的语言特征及编程注意事项
特征：
JavaScript 无需编译，直接被浏览器解释并执行
JavaScript 无法单独运行，必须嵌入到 HTML 代码中运行
JavaScript 的执行过程由上到下依次执行
注意：
JavaScript 没有访问系统文件的权限（安全）
由于 JavaScript 无需编译，是由上到下依次解释执行，所以在保证可读性的情况下，允许使用链
式编程
JavaScript 和 java 没有任何直接关系
**2.1.4 ****JavaScript **的组成
ECMAScript (核心)：规定了 JS 的语法和基本对象。
DOM
文档对象模型：处理网页内容的方法和接口
标记型文档。HTML
BOM
浏览器对象模型：与浏览器交互的方法和接口
**2.1.4 ****JavaScript **的引入方式
**2.1.4.1 ****内部脚本 **
在当前页面内部写 script 标签，script 内部即可书写 JavaScript 代码
格式：
<script type=”text/javascript”> JavaScript 的代码 </script>示例：
注：script 标签理论上可以书写在 HTML 文件的任意位置
**2.1.4.2 **外部引入
在 HTML 文档中，通过<script src=””>标签引入.js 文件
格式：
<script type=”text/javascript” src=”javascript 文件路径” ></script>示例 1：
注：外部引用时 script 标签内不能有 script 代码，即使写了也不会执行。
示例 2：
**2.2 ****JavaScript **基本语法
**2.2.1 **注释
单行注释
//
Hbuilder 快捷键 ctrl+/
多行注释
/* */
Hbuilder 快捷键 ctrl+shift+/
示例：
**2.2.2 ****变量 **
2.2.2.**1 ****变量简述 **
变量：标示内存中的一块空间，用于存储数据，且数据是可变的。
变量的声明：
var 变量名; //变量赋予默认值，默认值为 undefined
（未定义的）
变量的声明和赋值：
var 变量名=值;
//变量赋予对应的值
在声明 JavaScript 变量时，需要遵循以下命名规范：
必须以字母或下划线开头，中间可以是数字、字符或下划线
变量名不能包含空格等符号
不能使用 JavaScript 关键字作为变量名，如：function、this、class
JavaScript 严格区分大小写。
**2.2.2.2 ****基本数据类型 **
类似于 java 中的基本数据类型。
JavaScript 区别于 java，是弱类型语言，变量的使用不用严格遵循规范，所以一个变量声明好之
后，是可以
赋予任意类型的值。
这在强类型语言 Java 中是无法想象的
通过 typeof 运算符可以分辨变量值属于哪种基本数据类型
ECMAScript 实现之初的一个 bug，null 属于基本数据类型，typeof(null)--object
**2.2.2.3 ****引用数据类型 **
引用类型通常叫做类（
class），但在 JavaScript 中，因为不存在编译过程，所以没有类的概念。
所以 JavaScript 的引用数据类型都是对象。
JavaScript 对象类型的默认值是 null.
标准创建方式：
var str = new String();//和 java 相同
var str = new String; //js 独有的方式
**2.2.3 ****运算符 **
**2.2.3.1 ****比较运算符 **
==
逻辑等。仅仅对比 数据值。
**=== **
全等。 对比数据值并且对比类型。
如果值和类型都相同，则为 true；值和类型有一个不同，则为 false
**2.2.3.2 ****常见的 ****JS **运算符附录
注：JavaScript 逻辑运算符没有 & |
**2.2.3.3 参考附录-if 条件中的特殊格式（扩展-****了解） **
JavaScript 中的 if 和 Java 中的 if 用法一样，都有表达式。
遇到特殊情况，请查阅下面两个表格即可。（无需记忆）
**2.3 ****JavaScript 函数/**方法
**2.3.1 ****函数简述及作用 **
如果一段代码需要被重复编写使用，那么我们为了方便统一编写使用，可以将其封装进一个函数
（方法）中。作用：增强代码的复用性
**2.3.2 **函数格式
JavaScript 函数定义必须用小写的 function；
JavaScript 函数无需定义返回值类型，直接在 function 后面书写 方法名；
参数的定义无需使用 var 关键字，否则报错；
JavaScript 函数体中，return 可以不写，也可以 return 具体值，或者仅仅写 return；
JavaScript 函数调用执行完毕必定有返回值，值及类型根据 return 决定：
如果未 return 具体值，返回值为 undefined；
**2.3.3 ****函数使用的注意事项（和 ****Java ****不同） **
JavaScript 函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定
义；
因为 JavaScript 不存在函数重载，所以 JavaScript 仅根据方法名来调用函数，即使实参与函数的
形参不匹配，也不会影响正常调用；
如果形参未赋值，就使用默认值 undefined
**2.4 **正则对象
**2.4.1 ****RegExp **对象的创建方式
var reg = new RegExp("表达式");
（开发中基本不用）
var reg = /^**表达式$/; **
**直接量（开发中常用） **
直接量中存在边界，即^代表开始，$代表结束
直接量方式的正则是对象，不是字符串，别用引号
**2.4.2 ****test **方法
RegExp 方法
随堂练习
**2.4.3 **常用正则（附录）
**2.5 ****JS **事件
**2.5.1 ****JS **事件是什么？有什么作用？
通常鼠标或热键的动作我们称之为事件(Event)
事件包括：点击、表单提交、值发生改变、鼠标移入、鼠标移出等等
通过 JS 事件，我们可以完成页面的指定特效。
**2.5.2 **onclick
点击事件：由鼠标或热键点击元素组件时触发
示例：
效果：
**2.5.3 **onsubmit
表单提交事件：表单的提交按钮被点击时触发
注意：该事件需要返回 boolean 类型的值来执行 提交/阻止 表单数据的操作。
事件得到 true，提交表单数据
事件得到 false，阻止表单数据提交
示例 1：
效果 1：
示例 2：
效果 2：
3. 需求分析
提示：
1、通过 document.getElementById()获取要操作的元素
2、元素.value 获取元素的值
4. 案例代码实现
版权归原作者 陶然同学 所有， 如有侵权，请联系我们删除。