day19复习
Java-day20学习笔记
一、JavaScript
JavaScript是一个轻量级的、动态的或者即时解释性的语言，一般是依附在HTML上进行使用，对HTML上相关的元素进行获取、修改等操作，其广泛的应用在web开发领域。JavaScript也像其它语言一样有自己的语法结构、基本数据类型、分支、循环等。
1.1 作用
1. 可以获取并修改页面上的元素或者提交页面的数据、校验验证码等操作
2. 可以对浏览器进行前进、后退、获取浏览器历史记录、浏览器基本信息等操作
3. 可以让页面更加美观，用户和网页的交互更加流畅
1.2 组成
ECMA Script：包含js的基本语句、结构、函数等，是JavaScript的核心
BOM（Browser Object Module）：浏览器对象模型，包含了浏览器的相关信息
DOM（Document Object Module）：文档对象模型，包含了网页中所有的内容，可以通过js对这些内容进行获取、修改等操作
1.3 引入方式
内部引入 【了解】
<input type="button" value="普通按钮" onclick="javascript:alert('hello js')">;
内部引入 【掌握】
声明在网页上的任何地方都可以，但是一般声明在head标签中
<script>
alert("hello js！");
</script>
外部引入 【掌握】
在外部写一个js文件，然后通过script的src属性引入到html文件中
注意：外部引入和内部引入不能同时放在一个script中使用。这种情况只有外部引入才会生效
<script src="../js/myjs.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-js引入</title>
<!--第二种：内部引入-->
<script>
alert("hello js！");
</script>
<!--第三种：外部引入-->
<script src="../js/myjs.js"></script>
</head>
<body>
<!--第一种：行内引入-->
<!--<input type="button" value="普通按钮" onclick="javascript:alert('hello js')">;-->
</body>
</html>
1.4 打印语句
在网页弹框中打印
alert("浏览器弹框打印！");
在控制台上打印
console.log("控制台正常打印");
console.warn("控制台警告打印");
console.error("控制台错误打印");
在网页上打印
document.write("在网页上打印");
document.writeln("在网页上打印");
注意：
writeln是在源码中进行换行，网页上显示的效果和write是一样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-打印语句</title>
<script>
alert("浏览器弹框打印！");
console.log("控制台正常打印");
console.warn("控制台警告打印");
console.error("控制台错误打印");
document.write("在网页上打印");
document.write("在网页上打印");
document.write("在网页上打印<br>");
document.write("<font color='red'>在网页上打印</font>");
</script>
</head>
<body>
</body>
</html>
1.5 注释
单行注释： // 注释的内容
多行注释： /* 注释的内容 */
1.6 基本语法
变量
方式一：
变量名 = 变量值;
方式二：
通过var或者let进行声明
var 变量名 = 变量值;
方式三：
一次进行多个声明
var 变量名1 = 变量值1, 变量名2 = 变量值2, 变量名3 = 变量值3;
注意：
1. JavaScript是严格区分大小写的
2. 变量名一般是以字母或者_开头的
3. 每个语句的后面是可以不加分号的，但是建议加上
4. 变量命名的时候不要和JavaScript中已有的关键字重复如class、var、function、this等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-变量</title>
<script>
i = 6;
var a = 3;
let b = 5;
var _x = 0, y= 1, z = 2;
alert(i);
// alert(a);
// alert(b);
console.log(_x);
console.log(y);
console.log(z);
</script>
</head>
<body>
</body>
</html>
数据类型
JavaScript是一门弱类型语言，不像Java一样。JavaScript在声明的时候不需要明确指定元素的数据类型，而只需要通过var来进行即可。
number 包含了整数和小数
string 包含了字符和字符串，单引号和双引号都可以
boolean 包含了true和false两个值
object 对象类型
undefined 变量没有给值的时候
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-数据类型</title>
<script>
var a = 13;
var b = 13.15;
var c = "hello js";
var d = 'hello world';
var e = true;
var f;
var g = new Array();
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);
console.log(g);
console.log("------------------")
console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
console.log(typeof d);
console.log(typeof e);
console.log(typeof f);
console.log(typeof g);
</script>
</head>
<body>
</body>
</html>
字符串的拼接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-字符串拼接</title>
<script>
var a = "hello";
var b = "world";
var c = 666;
var d = 333;
var e = "666js";
console.log(a + b);
console.log(a + b + c);
console.log(c + d);
console.log(d + e);
</script>
</head>
<body>
</body>
</html>
将字符串转为数字
parseInt(内容)
parseFloat(内容)
isNaN(内容)
注意：
1. 以上方法是可以全局使用的
2. parseInt和parseFloat会分别获取数字直到一个不为数字的字符结束
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-将字符串转为数字</title>
<script>
var a = "666.123js333";
var b = "666";
console.log(isNaN(b));
console.log(parseInt(a));
console.log(parseFloat(a));
</script>
</head>
<body>
</body>
</html>
1.7 运算符
算术运算符
+ - * / %
+的作用：
1. 表示正数
2. 表示数相加
3. 字符串拼接
-的作用：
1. 表示负数
2. 表示数相减
/的作用：
1. 两个数相除（能取得小数结果）
%的作用：
1. 求余数
比较运算符
> < >= <= == === !=
==：比较两个数是否相同，而不考虑它们各自的类型
===：比较两个数是否相同，同时也比较它们的类型是否相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-比较运算符</title>
<script>
var a = 3;
var b = 5;
console.log(a > b); //false
console.log(a < b); //true
console.log(a >= b); //false
console.log(a <= b); //true
console.log(a == b); //false
console.log(a === b); //false
console.log(a != b); //true
console.log("------------------");
var c = 6;
var d = "6";
console.log(c == d); //true
console.log(c === d); //false
console.log("------------------");
var e = 10;
var f = 10;
console.log(e == f); //true
console.log(e === f); //true
console.log("------------------");
var e = 10;
var f = 10.0;
console.log(e == f); //true
console.log(e === f); //true
</script>
</head>
<body>
</body>
</html>
逻辑运算符
&& || !
&&: 两个都为true的时候才为true，其中有一个为false那么结果就为false
||: 两个都为false的时候才为false，其中有一个为true的话那么结果就为true
!：如果为true，那么结果为false，如果为false，那么结果为true
1.8 分支结构
if语句
switch语句
if语句
第一种格式
if(关系表达式) {
}
第二种格式
if(关系表达式){
}else {
}
第三种格式
if(关系表达式){
}else if(关系表达式2){
}else if(关系表达式3){
}
...
else {
}
switch语句
switch(表达式) {
case 值1:
语句体1;
break;
case 值2:
语句体2;
break;
case 值3:
语句体3;
break;
...
default:
语句体n;
break;
}
注意：
1. 表达式可以为number类型和string类型
1.9循环结构
for循环
while循环
for循环
for(初始化语句; 条件表达式; 初始化语句的改变){
循环体语句;
}
while循环
初始化语句;
while(条件表达式){
循环体语句;
初始化语句的改变;
}
for循环的嵌套
for循环的嵌套就是在一个for循环中再嵌套其它的for循环。（可以认为是for循环中的循环语句体被其它for循环替代）
//外层for
for(初始化语句; 条件表达式; 初始化语句的改变){
//内层for
for(初始化语句; 条件表达式; 初始化语句的改变){
}
}
注意：
1. 外层for每执行一次，内层for都会全部执行完毕
练习：九九乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-九九乘法表</title>
<script>
// document.write("中国          北京");
for(var i = 1; i <= 9; i++){
for(var j = 1; j <= i; j++){
document.write(j + "*" + i + "=" + (j*i) + "        ");
}
document.write("<br>");
}
</script>
</head>
<body>
</body>
</html>
1.10 数组
声明
1. 在创建的同时就赋好数据
var 数组名 = [元素1, 元素2, 元素3,...];
2. 先创建一个数组，然后赋数据
var 数组名 = new Array(个数);
数组名[索引] = 数据;
注意：数组中可以同时存放任何数据类型的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-数组</title>
<script>
//方式一：
var arr = [1, 2, 3];
console.log(arr[0]); //1
console.log(arr[1]); //2
console.log(arr[2]); //3
console.log(arr[3]); //undefined
console.log("-------------");
var arr2 = ["中国", false, 666, 3.15];
console.log(arr2[0]);
console.log(arr2[1]);
console.log(arr2[2]);
console.log(arr2[3]);
console.log("-------------");
//方式二：
var arr3 = new Array();
arr3[0] = 11;
arr3[1] = 22;
arr3[2] = 33;
arr3[3] = 44;
console.log(arr3[0]);
console.log(arr3[1]);
console.log(arr3[2]);
console.log(arr3[3]);
</script>
</head>
<body>
</body>
</html>
遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-数组的遍历</title>
<script>
var arr = [11, 22, 33, "apple", "orange"];
for(var i = 0; i < arr.length; i++){
console.log(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
数组的常见方法
var 新数组 = 数组名.concat(另一个数组) 将一个数组和另一个数组拼接并得到一个新数组
var 新数组 = 数组名.join(分隔符) 将一个数组转为字符串，并在每一个数据的中间加上指定的分隔符后返回一个新数组
二维数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-二维数组</title>
<script>
var arr = [["banana", "peach", "watermelon"], [11, 22], [false]];
// console.log(arr[1][1]);
for(var i = 0; i < arr.length; i++){
for(var j = 0; j < arr[i].length; j++){
console.log(arr[i][j]);
}
}
</script>
</head>
<body>
</body>
</html>
