Web开发基础：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的流程控制

大部分和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));

事件处理

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

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

常用事件：

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

	
	
	
	


	

		点我试试
	

DOM编程

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

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

表单验证

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

表单验证步骤：

1. 编写函数，判断表单元素的值格式是否正确，
   如果不正确给用户一些提示并返回false
2. 如果全部验证成功，返回true
3. 函数在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位数

案例：
手机号（1开头第二位数是3、5、7、8、9任意一个，后面九位数字）：

/^1[35789]\d{9}$/

密码（6位字母数字和下划线组成）

/^\w{6}$/

验证码（4位字母和数字组成）

/^[a-zA-Z0-9]{4}$/

综合案例：表单验证

	
	
	


	

		账号:

		密码:

		电话:

		邮箱:

		
	

结束

---

大家如果需要学习其他Java知识点，戳这里 超详细的Java知识点汇总