Java后端程序员有必要学习JavaScript!
一、介绍
JavaScript语言只要是为了完成页面的数据验证,因此它运行在客户端,需要运行浏览器来解析执行JavaScript代码。
——JS是弱类型,Java是强类型。
(弱类型就是类型可变;强类型就是定义变量的时候,类型已确定,而且不可变)
eg:var i; i =12; i = “abc”
特点
①交互性(可以做的就是信息的动态交互)
②安全性(不允许直接访问本地硬盘)
③跨平台性(只要是可以解释JS的浏览器都可以执行,和平台无关——通过浏览器实现,跟OS无关)
二、JS与HTML结合
(1)第一种方式
只需在head标签中,或者body标签中,使用script标签来书写JavaScript代码。
(2)第二种方式
通过在标签内使用src来引入js文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--方式一:使用script标签来书写JavaScript代码-->
<script type="text/javascript">
alert("hello!");
</script>
<!--方式二:使用script标签导入外部js文件来执行:src属性专门用来引入路径。
script标签可以用来定义js代码,也可以用来引入js文件,
但是,两个功能二选一使用,不能在同一标签内同时使用两个功能。
-->
<script type="text/javascript" src="1.js"></script>
</head>
<body>
</body>
</html>
在模块下另外再创建一个JS文件,用于src引入:
alert("hello too!")
三、JavaScript基本知识
(1)数据类型
-
数值类型:number
-
字符串类型:string
-
对象类型:object
-
布尔类型:boolean
-
函数类型:function
-
JS里特殊的值:
–undefined 未定义,所以JS变量未赋初始值时,默认值都是undefined
–null 空值
–NAN 全称是:Not a Number。非数字,非数值
验证数据类型:
① number
<script type="text/javascript">
var i;
i = 12;
alert(typeof(i));//typeof函数可以取变量的数据类型返回
</script>
② NaN
<script type="text/javascript">
var i = 12;
var j = "abc";
alert(i * j);//NaN是非数字,非数值
</script>
——此类结果虽在语法上允许,但是结果为NaN
(2)JS关系(比较)运算
- 等于:== 简单地做字面数值的比较
- 全等于: = = = 除了做字面值的比较之外,还会比较两个变量的数据类型
【验证】:
<script type="text/javascript">
var a = 12;
var b = "12";
alert(a == b)
</script>
——true:仅做字面值的比较
<script type="text/javascript">
var a = 12;
var b = "12";
alert(a === b)
</script>
——false:还会比较变量数据类型
(3)JS逻辑运算&&,||,
- 0,null,undefined 和""空字符串,均为false,其他均为真
- &&运算:当表达式全为真时,返回最后一个表达式的值;当有一个为假时,返回第一个为假的表达式的值;
- ||运算:当表达式全为假时,返回最后一个表达式的值;当只要有一个表达式为真,返回第一个为真的表达式的值。
(4)数组
var arr = [];空数组
var arr = [1,“abc”,];
<script type="text/javascript">
var arr = [];
arr[0] = 12;
arr[2]="adf";
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
</script>
(4)函数
① 第一种定义方式
function关键字:
function 函数名(形参列表){
}
<script type="text/javascript">
function sum(a,b) {
var res = a + b;
return res;
}
alert(sum(12,8))
</script>
② 第二种定义方式
<script type="text/javascript">
<!--函数的第一种定义方式-->
function sum(a,b) {
var res = a + b;
return res;
}
alert(sum(12,8))
<!--函数的第二中定义方式 -->
var sum = function (n,m) {
res = n + m;
return res;
}
alert(sum(12,9));
</script>
(5)JS不允许函数方法的重载
<script type="text/javascript">
function fun() {
alert("无参函数。")
}
function fun(a,b) {
alert("有参函数。")
}
fun();
</script>
——即便传参不对,也会显示最后出现的一个方法,会将原方法覆盖掉,不会因为传参不同而重载。
(6)隐形参数arguments
——在function函数中不需要定义,但却可以直接用来获取所有参数的变量。
类似于Java可变长参数:public void fun(Object … args);
<script type="text/javascript">
function fun() {
alert(arguments[0]);
alert(arguments[1]);
alert(arguments[2]);
}
fun(1,'a',"fg");
</script>
——弹出警告框,依次显示:1,a,fg
【使用案例】编写一个函数用于计算所以参数相加的和,并返回
<script type="text/javascript">
<!--使用案例:编写一个函数用于计算所以参数相加的和,并返回 -->
function fun() {
var sum = 0;
for(var i=0;i<arguments.length;i++){
sum = sum + arguments[i];
}
alert(sum);
}
fun(1,2,4,5);
</script>
(7)JS中的自定义对象
① Object形式的自定义对象
var 变量名 = newObject();
变量名.属性名 = 值;
变量名.函数名 = function();
对象的访问:
变量名。属性/函数名();
<script type="text/javascript">
var obj = new Object();
obj.name = "二狗子";
obj.age = 18;
obj.fun = function () {
alert("姓名:"+this.name+",年龄:"+this.age);
}
obj.fun();
</script>
(8)花括号形式的自定义对象
<script type="text/javascript">
var obj = {
name:"二狗子",
age:18,
fun:function () {
alert("姓名:"+this.name+",年龄:"+this.age)
}
};
obj.fun();
</script>
四、JS的事件
——输入设备与页面进行交互的响应,称之为事件。
(1)常用事件
onload:页面加载完成事件——常用于做页面JS代码初始化操作
onclick:单击事件
onblur:失去焦点事件——常用于输入框失去焦点后,验证其输入内容是否合法
onchange:内容发生改变事件——下拉列表和输入框发生改变后操作
onsubmit:表单提交事件——常用于表单提交前,验证所有表单项是否合法
(2)事件的注册(绑定)
——就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册(或绑定)
① 静态注册
——通过HTML标签的事件属性直接赋予事件响应后的代码,这种方式我们叫做静态注册。
② 动态注册
——先通过js代码得到标签的dom对象,然后再通过dom对象.事件名 = function()这种形式,赋予事件响应后的代码,叫动态注册。
动态注册事件基本步骤:
1、获取标签对象;
2、标签对象.事件名 = function(){ }
(3)onload事件(加载完成事件)
① 静态注册onload事件:
——onload是浏览器解析完页面之后就会自动触发的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onloadFun() {
alert("静态注册onload事件");
alert(12);
}
</script>
</head>
<!--静态注册onload事件:是浏览器解析完页面之后就会自动触发的事件 -->
<body onload="onloadFun();">
</body>
</html>
② 动态注册onload事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//动态注册,是固定写法
window.onload = function () {
alert("动态注册onload事件");
}
</script>
</head>
<body>
</body>
</html>
(4)onclick事件(单击事件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//1、静态注册onclick事件
function onclickFun1() {
alert("静态注册onclick事件");
}
//2、动态注册onclick事件
window.onload = function(){
/*
*document是JavaScript语言提供的一个对象(文档)
* getElementById():根据id获取元素
*/
var btnObj = document.getElementById("btn01");
btnObj.onclick = function () {
alert("动态注册onclick事件");
}
}
</script>
</head>
<body>
<!--1、静态注册onclick事件-->
<button onclick="onclickFun1();">按钮1</button>
<!--2、动态注册onclick事件-->
<button id="btn01">按钮2</button>
</body>
</html>
(5)onblur事件(失去焦点事件)
——用于输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//1、静态失去焦点事件
function onblurFun() {
//console是控制台对象,是由JS语言提供,专门用于向浏览器的控制台的控制器打印输出,用于测试使用
//log()是打印的方法
console.log("静态注册失去焦点事件");
}
//2、动态失去焦点事件
window.onload = function () {
var passwordObj = document.getElementById("password");
passwordObj.onblur = function () {
console.log("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
<!--1、静态失去焦点事件-->
用户名:<input type="text" onblur="onblurFun();"><br/>
<!--1、动态失去焦点事件-->
密码:<input type="password" id="password"><br/>
</body>
</html>
① 静态注册失去焦点事件
当鼠标从点击用户名文本框到离开该文本框,控制台对象就会打印一次:“静态注册失去焦点事件”。
② 动态失去焦点事件
(6)onchange事件(内容发生改变)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//1、静态注册onchange事件
function onchangeFun() {
alert("老婆换了");
}
//2、动态注册onchange事件
window.onload = function () {
var selObj = document.getElementById("sel01");
selObj.onchange = function () {
alert("老公换了");
}
}
</script>
</head>
<body>
你未来的老婆:
<!--静态注册onchange事件-->
<select onchange="onchangeFun();">
<option>--选择你想要的老婆--</option>
<option>林志玲</option>
<option>范冰冰</option>
<option>刘亦菲</option>
<option>热巴</option>
</select>
你未来的老公:
<!--动态注册onchange事件-->
<select id="sel01">
<option>--选择你想要的老公--</option>
<option>鹿晗</option>
<option>蔡徐坤</option>
<option>郭德纲</option>
<option>吴彦祖</option>
</select>
</body>
</html>
(7)onsubmit事件(表单提交事件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onsubmitFun() {
//验证所有表单项是否合法,如果有一个不合法,就阻止表单提交
alert("静态注册表单提交事件,发现不合法");
return false;//此处改为true即可提交表单
}
window.onload = function () {
var formObj = document.getElementById("form01");
formObj.onsubmit = function () {
alert("动态注册表单提交事件");
return true;//此处改为true即可提交表单,false不提交
}
}
</script>
</head>
<body>
<!--onsubmit()方法如果返回false,则onsubmit提交的为false,可以阻止提交表单 -->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册"/>
</form>
<!--态注册表单提交事件-->
<form action="http://localhost:8080" id = "form01">
<input type="submit" value="动态注册"/>
</form>
</body>
</html>
【案例】验证用户名是否有效
DOM全称Document Object Model文档对象模型
document的dom对象,是用来记录标签信息的对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*当用户点击校验按钮,要获取输出框中的内容,然后验证其是否合法
*需要验证的规则:必须由字母、数字、下划线组成,并且长度是5-12位
*/
function onclickFun() {
//当要操作一个标签的时候,一定要先获取这个标签对象
var usernameObj = document.getElementById("username");
var usernameText = usernameObj.value;
//使用正则表达式来验证字符串是否符合某个规则
var patt = /\w{5,12}/;//由字母、数字、下划线组成,并且长度是5-12位
/*
*test()方法用于测试某个字符串,是不是匹配上了规则,匹配就返回true,否则false
*/
if(patt.test(usernameText)){
alert("用户名合法");
}else{
alert("用户名不合法");
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username" value="输入用户名"/>
<button onclick="onclickFun()">校验</button>
</body>
</html>
五、正则表达式对象
- /[a-z]/;
- /[abc]/;
- /\w/;——\w表示单字字符匹配,包括:字母、数字、下划线
- \W——非单字字符匹配
- /a+/——至少一个a的字符串
<script type="text/javascript">
var patt = /a+/;
var str = "Abda123";
alert(patt.test(str));
</script>
-
n*——表示匹配任何包含0个或多个n的字符串
-
/a?/——表示匹配包含0个或1个a字符串
-
/a{3,5}/——表示匹配包含3到5个a的字符串
-
/a$/——表示匹配以a结尾的字符串
-
/^a/——表示匹配以a开头的字符串
-
/^a{3,5}$/——表示匹配只包含3-5个a的字符串
【用户名验证提示】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*当用户点击校验按钮,要获取输出框中的内容,然后验证其是否合法
*需要验证的规则:必须由字母、数字、下划线组成,并且长度是5-12位
*/
function onclickFun() {
//当要操作一个标签的时候,一定要先获取这个标签对象
var usernameObj = document.getElementById("username");
var usernameText = usernameObj.value;
var patt = /\w{5,12}/;//由字母、数字、下划线组成,并且长度是5-12位
var usernameSpanObj = document.getElementById("usernameSpan");//dom对象
if(patt.test(usernameText)){
usernameSpanObj.innerHTML = "用户名合法";
}else{
usernameSpanObj.innerHTML = "用户名不合法";
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username" value="输入用户名"/>
<span id="usernameSpan" style="color: red;"></span>
<button onclick="onclickFun()">校验</button>
</body>
</html>