JavaWeb - JavaScript [ECMAScript]语法、对象
JavaScript 参考手册：https://www.w3school.com.cn/jsref/index.asp
JavaWeb 学习笔记
- JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
- ECMAScript : 客戶端脚本语言的标准
基本语法 - 使用与注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的使用</title>
<!--放的位置影响执行的顺序,放在前面先执行,放在后面后执行-->
<!--如果放在前面不点击确定是不会加载下面的内容-->
<!--内部js:定义script,写js-->
<!--如果放在下面让input先加载就可以获取到input的内容-->
<!--script可以定义很多个-->
<script>
// alert("hello world!");
// alert("hello world!");
// alert("hello world!");
/**
* 多汗注释
*/
alert("hello world!")
</script>
<!--外部js:定义script,src引入js文件-->
<script src="../js/xxx.js"></script>
</head>
<body>
<input>
<!--<script>-->
<!-- alert("hello world!")-->
<!--</script>-->
</body>
</html>
alert("外部文件")
基本语法 - 基本类型与变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量</title>
<script>
// var a = "aa";
// alert(a);
// a = "123";
// alert(a)
// number类型
var num = 1;
var num1 = 1.2;
var num2 = NaN;
// 内容输出到页面上
document.write(num + " typeof: " + typeof(num) + "<br><br>");
document.write(num1 + " typeof: " + typeof(num1) + "<br><br>");
document.write(num2 + " typeof: " + typeof(num2) + "<br><br>");
//string类型
var str = "aaa";
var str1 = 'bbb';
document.write(str + " typeof: " + typeof(str) + "<br><br>");
document.write(str1 + " typeof: " + typeof(str1) + "<br><br>");
// boolean类型
var flag = true;
document.write(flag + " typeof: " + typeof(flag) + "<br><br>");
// null
//https://www.w3school.com.cn/js/index.asp JavaScrip
//出处:https://www.w3school.com.cn/js/index_pro.asp JavaScrip高级教程
//这个网站中的注释有说道
var obj = null;
var obj1 = undefined;
var obj2;
document.write(obj + " typeof: " + typeof(obj) + "<br><br>");
document.write(obj1 + " typeof: " + typeof(obj1) + "<br><br>");
document.write(obj2 + " typeof: " + typeof(obj2) + "<br><br>");
// 判断变量类型
</script>
</head>
<body>
</body>
</html>
基本语法 - 运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运算符</title>
<script>
// 一元运算符
var num = 1;
var num1 = num ++;
document.write(num + "<br><br>");//2
document.write(num1 + "<br><br>");//1
//+:正号
var num2 = +1;
document.write(num2 + "<br><br>");
var num3 = -1;
document.write(num3 + "<br><br>");
//如果给定的类型不是number类型就会转成这个类型(前提是有正号)
//string转number,如果字符串不是数字类型还是要转换成number型,转为NaN
var num4 = +"11bc";
document.write(num4 + " " + typeof (num4)+ "<br><br>");
document.write(num4 + 1 + "<br><br>");//112
//boolean
var flag = +true;
var flag1 = +false;
document.write(flag + " " + typeof (flag)+ "<br><br>");//1
document.write(flag1 + " " + typeof (flag1)+ "<br><br>");//0
// 其余的转换出来就是NaN
// 算数运算符
var a = 3;
var b = 4;
document.write(a + b + "<br><br>");
document.write(a - b + "<br><br>");
document.write(a * b + "<br><br>");
document.write(a / b + "<br><br>");//0.75
document.write(a % b + "<br><br>");
// 赋值运算符 = += -+....
// 比较运算符 > < >= <= == ===(全等于)
// 类型相同时直接比较,不同时先进行类型转换在进行比较
document.write((3 > 4) + "<br><br>");
document.write((3 < 4) + "<br><br>");
// 字符串按照每一个字符进行比较
document.write(("abc" > "ab") + "<br><br>");
document.write(("abc" < "ab") + "<br><br>");
// 类型不同
document.write(("123" > 100) + "<br><br>");//true
document.write(("abc" < 100) + "<br><br>");//false
document.write(("abc" > 100) + "<br><br>");//false
document.write(("123" == 123) + "<br><br>");//true 先进行类型转换再比较
// 类型不同直接返回false
document.write(("123" === 123) + "<br><br>");//false
document.write("<hr>");
// 逻辑运算符 && || !
// 其他类型转boolean
// number：0或NaN为假，其他为真
document.write(!!0 + "<br><br>");
document.write(!!NaN + "<br><br>");
document.write(!!3 + "<br><br>");
// string：除了空字符串("")，其他都是true
document.write(!!"" + "<br><br>");
document.write(!!"123" + "<br><br>");
// null&undefined:都是false
document.write(!!null + "<br><br>");
document.write(!!undefined + "<br><br>");
// 对象：所有对象都为true
var date = new Date();
document.write(!!date + " " + typeof (date)+ "<br><br>");
// if (date != null) { // 防止空指针异常
//
// }
if (date) { // 防止空指针异常
// 对象为 null 直接转成 false
}
// 三元运算符
var c = a < b ? 1 : 0;
document.write(c + "<br><br>")
</script>
</head>
<body>
</body>
</html>
基本语法 - 流程控制语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流程控制语句</title>
<script>
// if...else...
// switch可以接收任意的原始数据类型,number,string,boolean,null,undefined
var a = 1;
switch (a) {
case 1:
document.write("1" + "<br><br>");
break;
case "abc":
document.write("abc" + "<br><br>");
break;
case true:
document.write("true" + "<br><br>");
break;
case null:
document.write("null" + "<br><br>");
break;
case undefined:
document.write("undefined" + "<br><br>");
break;
}
// where
var sum = 0;
var num = 1;
while (num <= 100) {
sum += num;
num ++;
}
document.write(sum + "<br><br>");
//for
sum = 0;
for (var i = 1; i <= 100; ++ i) {
sum += i;
}
document.write(sum + "<br><br>");
//do...while
</script>
</head>
<body>
</body>
</html>
基本语法 - 特殊语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特殊语法</title>
<script>
// 一行只有一个语句时分分号可以省略
// var a = 3
// alert(a)
// 可以用var,也可以不使用,使用就是局部变量,不用就是全局变量
a = 3;
var b = 4;
</script>
</head>
<body>
</body>
</html>
基本对象 - function 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Function对象</title>
<!--JavaScript对象参考手册:https://www.w3school.com.cn/jsref/index.asp-->
<!--JavaScript高级教程:https://www.w3school.com.cn/js/index_pro.asp-->
<script>
// Function对象
// 创建
// 方式1
// var a = 1;
// var fun = new Function("a", "b", "document.write(a + \"<br><br>\");");
// fun(3, 4);
// 方式2
function fun1(a, b) {
document.write(b + "<br><br>");
}
document.write(fun1.length + "<br><br>");//形参个数
// fun(3, 4);
// 方式3
var fun = function (a, b) {
// document.write(a + "<br><br>");
alert(b);
alert(a);
};
// js方法的调用只和方法名有关,和参数列表无关
// fun(1, 2);
// 这里传一个参数就可以
// fun(1);//b是undefined
// 不传参数也可以
// fun();//a b都是undefined
// fun(1, 2, 2);
// 这里有一个隐藏的内置对象(数组),arguments,封装所有的实际参数
/**
* 求两个数的和
* @param a
* @param b
* @returns {*}
*/
function add(a, b) {
return a + b;
}
// alert(add(1, 2));
/**
* 任意个数的和
* 返回值可以不写
*/
function add1() {
// document.write(arguments[0] + "<br>");
// document.write(arguments[1] + "<br>");
var sum = 0;
for (var i = 0; i < arguments.length; ++ i) {
sum += arguments[i];
}
return sum;
}
;document.write(add1(1, 2, 3, 4, 5) + "<br>");
// 方法覆盖 方法就是一个对象
// fun = function (a, b) {
// document.write(b + "<br><br>");
// };
// fun(3, 4);
</script>
</head>
<body>
</body>
</html>
基本对象 - Array 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array对象</title>
<script>
// 创建
// 方式1
var arr1 = new Array(1, 2, 3); // 元素列表
// 方式2
var arr2 = new Array(5); // 默认长度
var arr4 = new Array();
// 方式3
var arr3 = [1, 2, 3, 4, "aaa", true]; // 元素列表
document.write(arr1 + "<br>");// 1,2,3
document.write(arr2 + "<br>");// ,,,,
document.write(arr3 + "<br>");// 1,2,3,4
// JavaScript 参考手册:https://www.w3school.com.cn/jsref/index.asp
// 方法
// 将数组中的元素按照指定的分隔符拼接为字符串
document.write("拼接:" + arr3.join() + "<br>"); // 默认,分割
document.write("拼接:" + arr3.join(" ") + "<br>"); // 默认,分割
//向数组中添加元素
arr3[10] = 6;
arr3.push("zut");
document.write("拼接:" + arr3.join(" ") + "<br>"); // 默认,分割
// 属性
//数组长度
document.write(arr1.length + "<br>");
// 特点
// 数组元素类型可变
var array = [1, "abc", true];
document.write(array + "<br>");
document.write(array[0] + "<br>");
document.write(array[1] + "<br>");
document.write(array[2] + "<br>");
// 数组长度可变
document.write(array[3] + "<br>"); // 扩容,默认undefined
array[10] = "aa";
document.write(array + "<br>");//1,abc,true,,,,,,,,aa
</script>
</head>
<body>
</body>
</html>
基本对象 - Date 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date对象</title>
<script>
// 日期对象:https://www.w3school.com.cn/jsref/jsref_obj_date.asp
// 创建
var date = new Date();
document.write(date + "<br>");
// 方法
// 格式化时间:语言跟随系统
document.write(date.toLocaleString() + "<br>");
// 获取毫秒值
document.write(date.getTime() + "<br>");
</script>
</head>
<body>
</body>
</html>
基本对象 - Math 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math对象</title>
<script>
// Math对象:https://www.w3school.com.cn/jsref/jsref_obj_math.asp
// 不用创建直接使用,Math.方法名()
// PI是属性
document.write(Math.PI + "<br>");
// 返回0-1之间的随机数字(包含0,不包含1)
document.write(Math.random() + "<br>");
// 四舍五入
document.write(Math.round(3.1) + "<br>");
// 向上取整
document.write(Math.ceil(3.1) + "<br>");
// 向下取整
document.write(Math.floor(3.1) + "<br>");
/**
* 1-100之间的随机整数
*/
document.write(Math.floor(Math.random() * 100) + 1 + "<br>");
</script>
</head>
<body>
</body>
</html>
基本对象 - RegExp 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RegExp对象</title>
<script>
// 正则表达式对象:https://www.w3school.com.cn/jsref/jsref_obj_regexp.asp
// 用户名要求,号码组成,用户名长度范围
// []:单个字符 [a] [a,b,c] [a-zA-Z0-9_]
// \d:单个数字字符[0-9]
// \w:单个单词字符[a-zA-Z0-9_]
// 量词符号:* ? +
// *:出现0次或者多次
// ?:出现0次或者1次
// +:出现1次或者多次
// \w*:单个字符组成,出现0次或者多次
// {m,n} m<=数量<=n {,n}:m缺省,最多n次 {m,}:n缺省,最少m次
// \w{6,12}:单个字符组成,长度为[6,12]
//上面是正则表达式的通用规则
//开始结束符号:^:开始,$:结束
//正则对象
//创建
var regExp = new RegExp("^\\w{8,18}$");//转义字符
var regExp1 = /^\w{8,18}$/;
document.write(regExp + "<br>");
document.write(regExp1 + "<br>");
//方法:验证指定的字符串是否符合正则定义的规范
//表单校验需要使用到正则表达式
var username = "1111111111111111111111111111";
var username1 = "11111111";
var flag = regExp.test(username);
var flag1 = regExp1.test(username1);
document.write(flag + "<br>");
document.write(flag1 + "<br>");
</script>
</head>
<body>
</body>
</html>
基本对象 - Global 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Global对象</title>
<script>
// 全局对象,其中的方法不需要对象就可以直接调用.方法名();
// 全局对象:https://www.w3school.com.cn/jsref/jsref_obj_global.asp
// url编码,做数据传输的时候,传输的时候通过了一些协议,比如http协议,协议不支持中文数据,
// 如果要把中文数据发送到服务器,就需要进行转码,http默认的也是url编码
var str = "中原工学院";// %E4%B8%AD%E5%8E%9F%E5%B7%A5%E5%AD%A6%E9%99%A2
var encode = encodeURI(str);
document.write(encode + "<br>");
// url解码
var s = decodeURI(encode);
document.write(s + "<br>");
// url编码,编码的字符更多(有一些字符上面的那种是不进行编码的)
var str1 = "中原工学院";// %E4%B8%AD%E5%8E%9F%E5%B7%A5%E5%AD%A6%E9%99%A2
var encode1 = encodeURIComponent(str1);
document.write(encode1 + "<br>");
// url解码
var s1 = decodeURIComponent(encode1);
document.write(s1 + "<br>");
// 将字符串装换成数字:逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
var str = "123abc";
document.write(parseInt(str) + " typeof:" + typeof (parseInt(str)) + "<br>");//123
//所有的值都不等于NaN,NaN和NaN比较也不相等
var str1 = NaN;
document.write(isNaN(str1) + "<br>");
//把js的字符串转换成脚本来执行,可以解析字符串
var jscode = "document.write(\"123\");";
document.write(jscode + "<br>");//document.write("123");
eval(jscode);//123
</script>
</head>
<body>
</body>
</html>
