JavaScript
javaScript:控制页面中的元素，让页面有动态的效果，用户可以和浏览器进行交互。
运行在客户端浏览器中的一门客户端脚本语言，每一个浏览器都有JavaScript的解析引擎。不需要编译，直接就可以被浏览器解析执行了
1.1 JS和HTML结合方式
1.1.1 内嵌脚本
<!--将js代码内嵌到html标签中-->
<input type="button" value="点击我吧" onclick="alert('儿童节快乐')">
1.1.2 内部脚本
定义script标签，标签中的内容就是js代码.
注意：script标签可以定义html文件中的任意位置。
在不影响功能的前提下，越晚出现越好。【一般写在最后】
在html文件中可以定义多个 script标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<!--内部脚本-->
<script>
alert("0.o");
</script>
1.1.3 外部脚本
定义script标签，通过src属性引入外部的js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<!--引入外部脚本-->
<script src="a.js"></script>
a.js文件:
alert("两个黄鹂鸣翠柳");
1.2 JavaScript基础语法
1.2.1 注释
1.单行注释： //注释的内容
2.多行注释： /* 注释的内容 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<script>
//alert是一个弹框的方法 包含了一个确认按钮
alert("锄禾日当午");
/*
用于向html页面中输出内容的，（）中的内容就是输出到页面中的内容
document其实是一个dom对象,是通过window对象来获取的,window对象这里省略了
*/
document.write("你好");
</script>
1.2.2 数据类型
1.原始数据类型
number:数值类型，整数 小数。 NaN(not a number)不是一个数字
string:字符串 "doyens" '德源' 双引号和单引号都可以。
boolean:布尔 true false
null:一个对象为null的占位符。
undefined:未定义。如果一个变量没有初始值，则默认赋值为undefined.
2.引用数据类型：对象
函数：Function
数组:Array
日期：Date
数学：Math
正则：RegExp
全局：Global
#java中的数据类型
1.基本数据类型
整型：byte short int long
浮点型：float double
字符型：char
布尔型：boolean
2.引用数据类型：对象
类 接口 数值。
1.2.3 变量
java是强类型的语言
强类型：在开辟变量存储空间时，定义了该空间存储的数据类型
js是弱类型的语言
弱类型：在开辟变量存储空间时，不定义空间存储的数据类型，可以存储任意类型
js定义格式
1.var 变量名 = 初始值; 局部变量
2.变量名 = 初始值; 全局变量
1.2.4 类型转换
1.2.4.1 其他的数据类型转成number
1.string--number
按照字符串的字面值转换。如果不是一个数字，则转换的结果是NaN.
var a = "5";
a++; ---->a = 6 ;ok
var a = "我"；
a++; "我"不是一个数字，那就转成NaN, NaN++就得到的结果还是一个NaN.
2.boolean---number
true--->1
false-->0
1.2.4.2 其他类型转成boolean类型
1.string转boolean:除了空字符串，其他的都转成true.
2.number转boolean:0和NaN转成false,其他的转成true.
3.null,undefined转boolean:都是转成false
4.对象转boolean。都是转成true
1.2.5 流程控制语句
1.2.5.1 if...else语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<script>
var a = -5;
if (a > 0){
alert("yes")
}else{
alert("no");
}
</script>
1.2.5.2 switch语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<script>
var a = 8;
switch (a) {
case 1:
alert("星期一");
break;
case 2:
alert("星期二");
break;
case 3:
alert("星期三");
break;
case 4:
alert("星期四");
break;
default:
alert("没有对应的数据")
}
</script>
1.2.5.3 循环语句
- while
- do...while
- for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<script>
/*while循环 输出1~10*/
var a = 1;
while(a <= 10){
document.write(a + "<br/>")
a++;
}
/*do...while循环输出1~10*/
var a = 1;
do {
document.write(a + "<br/>")
a++;
}while(a <= 10)
/*for循环输出1~10*/
for (var i = 1; i <=10 ; i++) {
document.write(i +"<br>")
}
</script>
1.2.6 引用数据类型
Function:函数对象【函数本身也是一个对象】
Array：数组对象
Boolean：boolean的包装对象
Date：日期对象
Math：数学对象
Number：number包装对象
String：string包装对象
如何学习js中的对象
1.如何创建对象
2.对象有哪些方法
3.对象有哪些属性
4.对象的特点
1.2.6.1 函数对象
1.2.6.1.1 创建Function函数对象
特点：定义函数时，参数不用声明数据类型，连var也不用
格式：function 方法名(形参列表){
方法体;
}
function add(a, b) {
var sum = a + b;
alert("sum =" +sum)
}
add(4,6);
add(2,6);
1.2.6.1.2 Function对象的属性
length:获取 方法种参数的个数
function add(a, b, c) {
var sum = a + b;
alert("sum =" +sum)
}
//length属性:获取add方法的参数的个数
alert(add.length); //3
1.2.6.2 数组对象
1.2.6.2.1 创建数组对象
1.var 数组名=new Array(元素列表);
例： var arr1 = new Array(1,8,6);
2.var 数组名=new Array(默认长度);
例：var arr2 = new Array(3); 数组中的元素默认都是undefined
3.var 数组名=[元素列表];
例：var arr3 = [5,"西瓜",true];
1.2.6.2.2数组中的方法
1.join(参数):将数组中的元素按照指定的符号拼接成字符串。
var arr1 = new Array(1,8,6);
var s = arr1.join("-");
s--->"1-8-6"
2.push();向数组的末尾添加一个或更多元素，并返回新的长度。
1.2.6.2.3 数组中的属性
length:数组中元素的个数
1.2.6.2.4 数组的特点
java中数组的特点
1.长度是固定的。
2.只能存储同一种数据类型。
js中数组的特点
1.长度是可变的。
2.可以存储不同的数据类型。
1.2.6.3 Date日期对象
1.2.6.3.1 如何创建对象
var d = new Date(); //当前日期和时间封装为日期对象
var d = new Date(milliseconds); //毫秒值转成日期对象
var d = new Date(dateString);//字符串转成日期对象
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds); //创建日期对象
1.2.6.3.2 Date对象的方法
1.toLocaleDateString:将日期对象转成字符串 格式：2022/5/23
2.toLocaleString(); 将日期对象转成字符串 格式：2022/5/23 15:47:25
3.getTime();获取日期对象的毫秒值
4.获取年:getFullYear()
5.获取月:getMonth(); 注意：对于中国来说 需要手动+1.
6.获取日:getDate()
1.2.6.4 Math对象
Math 对象用于执行数学任务。
1.2.6.4.1 创建Math对象
不需要创建对象，直接使用，使用：Math.方法名(参数)；
1.2.6.4.2 Math对象的方法
1.floor(a):向下取整
2.ceil(a):向上取整
3.round(a):四舍五入
4.random():产生[0,1）之间的随机数
总结出随机数的万能公式[min,max]
var sj = (Math.floor(Math.random() * (max - min + 1))) + min;
1.3 JavaScript存储方案
sessionStorage 是浏览器提供的本地存储机制，具有以下特点：
- 数据仅在当前会话（浏览器标签页 / 窗口）中有效
- 存储容量一般为 5MB 左右
- 数据以键值对形式存储，且仅在同源窗口中共享
1.3.1 sessionStorage 基础操作
sessionStorage 提供了简单的 API 用于数据存储和获取：
// 存储数据
sessionStorage.setItem('key', 'value'); // 存储字符串
sessionStorage.setItem('user', JSON.stringify({ name: 'John', age: 30 })); // 存储对象
// 获取数据
const value = sessionStorage.getItem('key');
const user = JSON.parse(sessionStorage.getItem('user') || '{}');
// 删除数据
sessionStorage.removeItem('key');
// 清除所有数据
sessionStorage.clear();
// 获取存储的键名
const key = sessionStorage.key(0); // 获取索引为0的键名
1.3.2 注意事项与限制
- 数据类型限制：
- sessionStorage 仅支持存储字符串，对象 / 数组需通过
JSON.stringify()转换 - 大数据存储可能导致性能问题（建议单个数据不超过 1MB）
- sessionStorage 仅支持存储字符串，对象 / 数组需通过
- 浏览器兼容性：
- 主流浏览器均支持，但 IE8 及以下版本不支持
- 可通过
window.sessionStorage !== undefined检测支持性
- 安全考虑：
- 存储的数据可被同一域名下的所有页面访问，敏感数据建议加密
- 不适合存储密码等高度敏感信息
- 隐私模式：
- 在浏览器隐私模式（如 Chrome 的 incognito 模式）下，sessionStorage 可能不可用
浙公网安备 33010602011771号