Java后端需要掌握的JavaScript（一）
1.Java和JavaScript的区别以及js的特点
-
JS是弱类型，Java是强类型
-
两者之间的区别用一句话可以说出来：就想周杰和周杰伦的区别一样；没有什么关系。
-
JS的特点：
- 交互性(可以做到信息的动态交互)
- 安全性(不允许直接访问本地磁盘)
- 跨平台性(浏览器支持js就行，与平台无关)
2.Js如何与Html结合
-
第一种方式
直接用
<script></script>标签，可以放在head标签里面，也可以放在body里面，还可以放在body后面，放在越靠上面，越先被加载。 -
第二种方式
采用外部js文件方式，在外部单独创建一个js文件，然后用
<script src="../js/a.js"></script>引入外部的js文件，这也是当下最流行的方式，推荐使用这种方式。
3.Js中的变量
JS的变量类型：
数值类型：number
字符串类型：string
对象类型：object
布尔类型：boolean
函数类型：function
JS中特殊的值：
undefined:未定义，所有js变量未赋初始值时候，默认值都是undefined
null:空值
NaN:（Not a Number）非数字，非字符
定义变量：
var a;
var b=3;
例子：
<script>
var a=6;
console.log(typeof (a));//number
var b='wang';
console.log(typeof b);//string
var c=true;
console.log(typeof c);//boolean
var d;
console.log(typeof d);//undefined
var e=null;
console.log(typeof e);//object(null)这是js的bug
}
</script>
4.JS中的运算符
-
一元运算符
1. ++ -- +(正号) -(负号) 2. +可以将其它类型转为number类型看下面的例子：
<script> var a="121"; console.log(+a)//number类型 var b="abc"; console.log(+b)//非数字类型NaN var c = true; console.log(+c);//1 var d = false; console.log(+d);//0 </script> -
算术运算符
+ - * / %这个非常的容易，不举例说明，只需要自己演示一下即可。
-
比较运算符
> < >= <= != == ===(全等，比较内容和类型)这里
> < >= <= !=没什么好说的，和其他语言没什么区别，主要是== ===之间有区别，下面介绍二者的联系和区别：先看第一个demo：
<script> var m="123"; var n = 123; var x = (m==n);//true console.log(x); var y = (m===n); console.log(y);//false </script>上面的我们可以看到
==判断的是true，而===判断的是false,区别显而易见：等于： == 等于是简单的做字面值的比较
全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型
-
逻辑运算符
且运算： && 或运算： || 取反运算： ! 在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。 0 、null、 undefined、””(空串) 都认为是 false； 总结： && 且运算。 有两种情况： 第一种：当表达式全为真的时候。返回最后一个表达式的值。 第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值 || 或运算 第一种情况：当表达式全为假时，返回最后一个表达式的值 第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值 并且 && 与运算 和 ||或运算 有短路。 短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行 -
三元运算符
条件判断?表达式1:表达式2; -- 通常可以直接输出，或者给其它变量赋值这个和java中的三元运算符使用差不多。
5.JS中的流程控制语句2
1. if...else...
2. switch:
* 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
* switch(变量):
case 值:
* 在JS中,switch语句可以接受任意的原始数据类型
3. while
4. do...while
5. for 增强：for of for in
这里主要介绍for循环
<script>
var a=[1,5,6,4,8,9];
//普通for循环
// for (var i = 0; i < a.length; i++) {
// console.log(a[i]);
// }
//增强for循环
//打印数组内容
for (var m of a){
console.log(m);
}
//打印数组索引
for (var n in a){
console.log(n);
}
</script>
6.JS中的常见对象
-
Function对象
函数的三种定义方式及其调用：
<script> /** * 声明函数三种方法 */ //直接声明 function sum(x,y,z) { console.log(x+y+z); }; //匿名函数 var add = function (m,n) { console.log(m+n); }; //动态定制函数 参数 返回结果 var sub = new Function("a,b","console.log(a-b)") //调用函数 sum(1,2,3);//6 add(2,3);//5 sub(6,1);//5 </script>js中函数名可以相同，这就引发了下面的问题：
function fun(a) { console.log(a) } function fun(a,b) { console.log(a+b) } function fun(a, b, c) { console.log(a+b+c) } fun(1);//NaN fun(1,2);//NaN fun(1,2,3);//6会发现上面的只有最后一个起作用了，这好像和java里面方法重载不一样，其实js中不能进行函数重载，但是实际开发中我们也需要进行这种操作怎么办呢？，下面我们通过一个语法来模拟重载：
/** * 模拟重载 */ function add() { //这里有一种arguments，可以接受所有的实参，然后封装成数组 var sum = 0; for (var k of arguments){ sum = sum + k; } console.log(sum); } add(1,2);//3 add(5,9,4);//18下面说一下，js函数也可以有返回值
function sub(x, y) { return x - y; } console.log(sub(9,3));//6 -
Array对象
-
数组三中定义方式：
1. var arr=new Array(1,2,"abc"); -- (数组的元素) 2. var arr=new Array(5); -- (数组的长度) 3. var arr=[1,3,6,9,"a"]; -
数组的特点：
长度很随意，类型也随意。这个可以看出来：
var a = Array(2); a[0]=1; a[1]=2; a[2]=3; a[3]=4; for (m of a) { console.log(m); } var c=[1,2,'ff']; c[1]=6;//修改值，覆盖之前的值 c[3]=9;//扩充值 for (z of c) { console.log(z); }
-
-
Date对象
1.创建当前时间 var date=new Date(); 2.方法： *toLocalString(); 本地日期格式 *getTime();返回的是1970年1月1日零点到当前时间的毫秒数 -
Math对象
1.不需要创建对象，直接调用静态工具方法 2.方法： *random(); [0,1)之间的随机小数 *ceil();天花板 向上取整 ，如 Math.ceil(2.1);// 3 *floor();地板 向下取整 ，如 Math.floor(2.9);// 2 *round();四舍五入 ，如 Math.round(2.4);--> 2 ; Math.round(2.5);--> 3 3.属性：PI: 3.1415926... -
RegExp正则对象
- 什么是正则表达式呢？
正则表达式(regular expression)描述了一种字符串匹配的模式，可以用来检查一个字符串是否含有某种子串、将匹配的子串做替换或者从某个字符串中取出符合某个条件的子串等。-
元字符
-
特殊含义的元字符
\d : 0-9之间的任意一个数字 \d只占一个位置 \w : 数字，字母 ，下划线 0-9 a-z A-Z _ \s : 空格或者空白等 \D : 除了\d \W : 除了\w \S : 除了\s . : 除了\n之外的任意一个字符 \ : 转义字符 | : 或者 () : 分组 \n : 匹配换行符 \b : 匹配边界 字符串的开头和结尾 空格的两边都是边界 => 不占用字符串位数 ^ : 限定开始位置 => 本身不占位置 $ : 限定结束位置 => 本身不占位置 [a-z] : 任意字母 []中的表示任意一个都可以 [^a-z] : 非字母 []中^代表除了 [abc] : abc三个字母中的任何一个 [^abc]除了这三个字母中的任何一个字符 -
次数量词元字符
* : 0到多个 + : 1到多个 ? : 0次或1次 可有可无 {n} : 正好n次； {n,} : n到多次 {n,m} : n次到m次
-
例子：
<body> <form action="服务器.html" id="sb"> <!--限定长度为6-8，必须为中文--> 姓名：<input type="text" name="name" id="name"><br> <input type="submit" value="提交"> </form> </body> <script> document.getElementById("sb").onsubmit=function (ev) { var name = document.getElementById("name").value; var reg=/^[\u4e00-\u9fa5]{6,8}$/; return reg.test(name); } </script>