【JavaScript】案例1:使用JS完成注册页面校验(一)

简介: 本期主要介绍案例1:使用JS完成注册页面校验

1. 需求说明


image.png

image.png

用户在提交注册表单时,需要对用户的填写的数据进行校验。

本案例只对用户名、密码、确认密码进行校验。

其中用户名、密码、确认密码不能为空;

密码和确认密码必须保持一致

2. 知识讲解-JavaScript(一)


2.1 JavaScript 概述


2.1.1 JavaScript 是什么?有什么作用?


JavaScript 常用来为网页添加各式各样的动态功能。例如:点击隐藏、点击显示。

HTML:就是用来写网页的。

人的身体

CSS: 就是用来美化页面的。 人的衣服

JavaScript:前端大脑、灵魂。 人的大脑、灵魂

JavaScript WEB 上强大的脚本语言

image.png

脚本语言:

无法独立执行。必须嵌入到其他语言中,结合使用。

直接被浏览器解析执行。

Java 编程语言:

独立写程序,独立运行。 编译 --- 执行

作用:控制页面特效展示。

例如:

JS 可以对 HTML 元素进行动态控制

JS 可以对表单项进行校验

JS 可以控制 CSS 的样式

2.1.2 JavaScript 入门案例


image.png

image.png

2.1.3 JavaScript 的语言特征及编程注意事项


特征:

JavaScript 无需编译,直接被浏览器解释并执行

JavaScript 无法单独运行,必须嵌入到 HTML 代码中运行

JavaScript 的执行过程由上到下依次执行

注意:

JavaScript 没有访问系统文件的权限(安全)

由于 JavaScript 无需编译,是由上到下依次解释执行,所以在保证可读性的情况下,允许使用链

式编程

JavaScript 和 java 没有任何直接关系

2.1.4 JavaScript 的组成


image.png

ECMAScript (核心):规定了 JS 的语法和基本对象。

DOM

文档对象模型: 处理网页内容 的方法和接口

标记型文档。 HTML

BOM

浏览器对象模型: 与浏览器交互 的方法和接口

2.1.4 JavaScript 的引入方式


2.1.4.1 内部脚本


在当前页面内部写 script 标签, script 内部即可书写 JavaScript 代码

格式:

</div><div>JavaScript 的代码</div><div>

示例:

image.png

2.1.4.2 外部引入


在 HTML 文档中,通过  标签引入 .js 文件</div><div>格式:</div><div><script type=”text/javascript” src =”javascript 文件路径 ” >

示例 1 :

image.png

image.png

2.2 JavaScript 基本语法


2.2.1 注释


单行注释

//

Hbuilder 快捷键 ctrl+/

多行注释

/* */

Hbuilder 快捷键 ctrl+shift+/

示例:

image.png

2.2.2 变量


2.2.2.1 变量简述


变量:标示内存中的一块空间,用于存储数据,且数据是可变的。

image.png

变量的声明:

var 变量名; //变量赋予默认值,默认值为 undefined

(未定义的)

变量的声明和赋值:

var 变量名=;

//变量赋予对应的值

在声明 JavaScript 变量时,需要遵循以下命名规范:

必须以字母或下划线开头,中间可以是数字、字符或下划线

变量名不能包含空格等符号

不能使用 JavaScript 关键字作为变量名,如:functionthisclass

JavaScript 严格区分大小写

2.2.2.2 基本数据类型


类似于 java 中的基本数据类型。

image.png

image.png

JavaScript 区别于 java,是弱类型语言,变量的使用不用严格遵循规范,所以一个变量声明好之后,是可以赋予任意类型的值。

image.png

这在强类型语言 Java 中是无法想象的

image.png

通过 typeof 运算符可以分辨变量值属于哪种基本数据类型 

image.png

ECMAScript 实现之初的一个 bugnull 属于基本数据类型,typeof(null)--object 

2.2.2.3 引用数据类型


引用类型通常叫做类(

class ),但在 JavaScript 中,因为不存在编译过程,所以没有类的概念。

所以 JavaScript 的引用数据类型都是 对象 。

JavaScript 对象类型的默认值是 null.

标准创建方式:

var str = new String();// 和 java 相同

var str = new String; //js 独有的方式


相关文章
|
10月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
585 24
|
12月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
12月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
12月前
|
监控 JavaScript 前端开发
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
354 2
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
281 1
JavaScript中的原型 保姆级文章一文搞懂
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
173 0