前言
JavaScript是前端技术的核心,本文从基础的JavaScript语法开始,介绍如何实现基本的JS编程,最后实现一个简单的表单验证。
JavaScript简介
JavaScript简称JS,是一种脚本语言,可以嵌入网页中实现动态效果。
JavaScript原名是LiveScript,是网景公司开发的,后来更名JavaScript。
JavaScript的作用:
- 实现网页的动态效果
- 表单验证
- 游戏开发
- 随着NodeJS的推出,还可以进行服务器开发
JavaScript的组成
- ECMAScript JS标准语法
- DOM 文档对象模型
- BOM 浏览器对象模型
第一个JavaScript代码
1、在HTML中添加<script>标签(一般写在head或body的最后)
2、编写JS代码
<script type="text/javascript">
//输出文字
document.write("<h1>Hello World</h1>");
</script>
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));
事件处理
事件能响应用户对页面元素的某些操作,能实现代码和用户的交互效果。
编程过程:
- 编写函数
- 选择事件源(标签)
- 设置事件来调用函数
常用事件:
- onclick 点击事件
- onmousemove 鼠标移动事件
- onmouseover 鼠标进入事件
- onmouseout 鼠标离开事件
- onfocus 获得焦点
- onblur 失去焦点
- onsubmit 表单提交
<!DOCTYPE html>
<html>
<head>
<title>JS事件处理</title>
<meta charset="utf-8">
<style type="text/css">
#div1{
width: 100px;
height: 30px;
background: #cccccc;
text-align: center;
vertical-align: middle;
}
</style>
<script type="text/javascript">
function testClick(){
//alert("试试就试试!");
//获得div1对象
var div1 = document.getElementById("div1");
//修改div1中的内容
div1.innerHTML = "<a href='http://www.baidu.com'>百度一下</a>";
//修改div1的样式
div1.style.background = "#ff0000";
}
</script>
</head>
<body>
<div id="div1" onclick="testClick()" >
点我试试
</div>
</body>
</html>
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(子标签);
表单验证
在前端验证表单内容的格式,减少服务器的压力.
表单验证步骤:
- 编写函数,判断表单元素的值格式是否正确,
如果不正确给用户一些提示并返回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位数 |
案例:
手机号(1开头第二位数是3、5、7、8、9任意一个,后面九位数字):
/^1[35789]\d{9}$/
密码(6位字母数字和下划线组成)
/^\w{6}$/
验证码(4位字母和数字组成)
/^[a-zA-Z0-9]{4}$/
综合案例:表单验证
<!DOCTYPE html>
<html>
<head>
<title>表单验证</title>
<meta charset="utf-8">
<script type="text/javascript">
function checkForm(){
return checkUsername() && checkPwd() && checkTelephone() && checkEmail();
}
//检查用户名
function checkUsername(){
//获得表单元素的值
var username = document.getElementById("username").value;
//获得span对象
var uname = document.getElementById("uname");
//判断值是否为空
if(username == ""){
uname.style.color = "#ff0000";
uname.innerHTML = "用户名不能为空";
return false;
}else{
uname.style.color = "#00ff00";
uname.innerHTML = "ok";
return true;
}
}
//检查密码
function checkPwd(){
//获得表单元素的值
var password = document.getElementById("password").value;
//获得span对象
var pwd = document.getElementById("pwd");
//判断值是否为空
if(password == ""){
pwd.style.color = "#ff0000";
pwd.innerHTML = "密码不能为空";
return false;
}else{
pwd.style.color = "#00ff00";
pwd.innerHTML = "ok";
return true;
}
}
//检查手机号
function checkTelephone(){
//定义手机号的正则表达式
var regTel = /1\d{10}/;
var telephone = document.getElementById("telephone").value;
var tel = document.getElementById("tel");
if(telephone == ""){
tel.style.color = "#ff0000";
tel.innerHTML = "手机不能为空";
return false;
}else if(!regTel.test(telephone)){
tel.style.color = "#ff0000";
tel.innerHTML = "手机号格式错误";
return false;
}else{
tel.style.color = "#00ff00";
tel.innerHTML = "ok";
return true;
}
}
//邮箱检查
function checkEmail(){
//定义邮箱的正则
var regEmail = /[A-z0-9_]+@[A-z0-9_]+.[A-z0-9_]+/;
var email = document.getElementById("email").value;
var em = document.getElementById("em");
if(email == ""){
em.style.color = "#ff0000";
em.innerHTML = "邮箱不能为空";
return false;
}else if(!regEmail.test(email)){
em.style.color = "#ff0000";
em.innerHTML = "邮箱格式错误";
return false;
}else{
em.style.color = "#00ff00";
em.innerHTML = "ok";
return true;
}
}
</script>
</head>
<body>
<form action="" method="post" onsubmit="return checkForm()">
账号:<input type="text" name="username" id="username" placeholder="请输入账号" onblur="checkUsername()"><span id="uname"></span><br>
密码:<input type="password" name="password" id="password" placeholder="请输入密码" onblur="checkPwd()"><span id="pwd"></span><br>
电话:<input type="text" name="telephone" id="telephone" placeholder="请输入手机号" onblur="checkTelephone()"><span id="tel"></span><br>
邮箱:<input type="text" name="email" id="email" placeholder="请输入邮箱" onblur="checkEmail()"><span id="em"></span><br>
<input type="submit" name="submit" value="注册">
</form>
</body>
</html>
结束
大家如果需要学习其他Java知识点,戳这里 超详细的Java知识点汇总