前端|Web开发基础（JavaScript入门）前端|表单验证|javascript

项目开发视频：
SpringCloud微服务开发入门
手把手开发基于SpringBoot的员工管理系统
亿度云盘~Java小白入门实战
前言 JavaScript是前端技术的核心，本文从基础的JavaScript语法开始，介绍如何实现基本的JS编程，最后实现一个简单的表单验证。
JavaScript简介 JavaScript简称JS，是一种脚本语言，可以嵌入网页中实现动态效果。
JavaScript原名是LiveScript，是网景公司开发的，后来更名JavaScript。
JavaScript的作用:

实现网页的动态效果
表单验证
游戏开发
随着NodeJS的推出，还可以进行服务器开发

JavaScript的组成

ECMAScript JS标准语法
DOM 文档对象模型
BOM 浏览器对象模型

第一个JavaScript代码 1、在HTML中添加
JavaScript的变量 JavaScript是一种弱类型的语言，定义变量时不用指定类型，使用var关键字就可以了，变量的数据类型由赋给变量的值决定的。

var num = 10; var name = ‘张三’;

JavaScript的数据类型 JS的数据类型有：

字符串如："hello"或’hello’
整数如：200
浮点数如：199.99
布尔如：true、false
对象如：{“name”:“老陈”,“age”:“20”}
undefined 变量未赋值

JavaScript的运算符大部分和Java相同

赋值： = 、+= 、-= 、*=、/=
算术：+、-、*、/、%、++、–
关系：==、!=、>、<、>=、<=
逻辑：&&、||、！
三元: ? :

JavaScript的流程控制 【前端|Web开发基础（JavaScript入门）】大部分和Java相同

分支：if、if-else、多重if、嵌套if、switch
switch所有类型都支持
循环：while、for、do-while
循环控制：break、continue

JavaScript的对话框和用户进行交互，给用户提示

警告对话框，给用户提示
alert(“提示内容”);
确认对话框，让用户对自己的操作进行确认
confirm(“提示文字”);
返回true代表用户确认
返回false代表用户取消
输入对话框，让用户进入输入
prompt(“提示文字”)
返回字符串

JavaScript的函数类似Java的方法，实现代码的封装和重复调用
定义：

function 函数名(参数名,参数名...){ 代码 return 值 }

示例：

// 求两个数的最大值 function max(n1,n2){ if(n1 > n2){ return n1; }else{ return n2; } } //调用 alert("最大值是："+max(898,99));

事件处理事件能响应用户对页面元素的某些操作，能实现代码和用户的交互效果。
编程过程：

编写函数
选择事件源（标签）
设置事件来调用函数

常用事件：

onclick 点击事件
onmousemove 鼠标移动事件
onmouseover 鼠标进入事件
onmouseout 鼠标离开事件
onfocus 获得焦点
onblur 失去焦点
onsubmit 表单提交

JS事件处理 #div1{ width: 100px; height: 30px; background: #cccccc; text-align: center; vertical-align: middle; } 点我试试

DOM编程 Document Object Model 文档对象模型，作用是通过JS获得和修改HTML标签的内容和样式。
常见操作：

获得网页中的元素
var element = document.getElementById(“元素ID”);
获得表单元素中的值
element .value
设置表单元素中的值
element .value = https://www.it610.com/article/值;
设置元素的样式
element.style.属性 = 值;
设置元素的内部HTML
element.innerHTML = 值;
创建标签
var element = document.createElement(“标签名称”);
添加子标签
标签.appendChild(子标签);

表单验证在前端验证表单内容的格式，减少服务器的压力.
表单验证步骤：

编写函数，判断表单元素的值格式是否正确，
如果不正确给用户一些提示并返回false
如果全部验证成功，返回true
函数在form标签的onsubmit事件中调用οnsubmit=“return 函数名()”
return的目的是将函数的返回值返回给表单，结果会影响表单是否提交

正则表达式对字符串进行操作或验证的工具
JS中的正则表达式
定义：

var regex = /正则表达式/;

用法：

regex.test(待验证的字符串) true验证通过，false失败

正则表达式的组成：

^ 匹配开头
$ 匹配结尾

/^正则表达式$/

常用通配符（元字符）

通配符	作用
[abc]	匹配a、b、c中任意一个
[0-9]	匹配范围0到9，还有如：[A-Z] 、[a-z]
\d	匹配单个数字
\w	匹配单个字母、数字或下划线

量词（字符出现的次数）

量词	作用
+	匹配一次或一次以上
*	匹配0次或无限次
？	匹配0次或1次
{n}	匹配n次，如：\d{5} 匹配五位数
{n,m}	匹配n到m次，如：\d{5,8} 匹配5到8位数
{n,}	匹配n次以上，如：\d{5,} 匹配5到n位数