Java后端程序员有必要学习JavaScript！
JavaScript语言只要是为了完成页面的数据验证，因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。 ——JS是弱类型，Java是强类型。 （弱类型就是类型可变；强类型就是定义变量的时候，类型已确定，而且不可变） eg:var i; i =12; i = “abc”
①交互性（可以做的就是信息的动态交互） ②安全性（不允许直接访问本地硬盘） ③跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关——通过浏览器实现，跟OS无关）
（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!")数值类型：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
【验证】：
<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：还会比较变量数据类型
（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>① 第一种定义方式 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>——即便传参不对，也会显示最后出现的一个方法，会将原方法覆盖掉，不会因为传参不同而重载。
——在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>① 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>——输入设备与页面进行交互的响应，称之为事件。
onload：页面加载完成事件——常用于做页面JS代码初始化操作 onclick：单击事件 onblur：失去焦点事件——常用于输入框失去焦点后，验证其输入内容是否合法 onchange：内容发生改变事件——下拉列表和输入框发生改变后操作 onsubmit：表单提交事件——常用于表单提交前，验证所有表单项是否合法
——就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册（或绑定） ① 静态注册 ——通过HTML标签的事件属性直接赋予事件响应后的代码，这种方式我们叫做静态注册。 ② 动态注册 ——先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function()这种形式，赋予事件响应后的代码，叫动态注册。
动态注册事件基本步骤： 1、获取标签对象； 2、标签对象.事件名 = function(){ }
① 静态注册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>——用于输入框
<!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>① 静态注册失去焦点事件
当鼠标从点击用户名文本框到离开该文本框，控制台对象就会打印一次：“静态注册失去焦点事件”。 ② 动态失去焦点事件
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>
n*——表示匹配任何包含0个或多个n的字符串
/a?/——表示匹配包含0个或1个a字符串
/a{3,5}/——表示匹配包含3到5个a的字符串
/a$/——表示匹配以a结尾的字符串
/^a/——表示匹配以a开头的字符串
/^a{3,5}$/——表示匹配只包含3-5个a的字符串
