目录
第2章 JavaScript基础语法(掌握)
11-JS代码调试
12-JS函数
第3章 JS事件
14-事件的绑定方式
常用事件(了解)
15-常用事件
第4章 JS内置对象(掌握)
16-数组
17-日期
18-数学运算
19-数字
20-全局函数
第2章 JavaScript基础语法(掌握)
11-JS代码调试
12-JS函数
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>12-JS函数</title>
</head>
<body>
<!--
JS函数
1. 普通函数 格式 function 函数名(参数){return}
2. 匿名函数 格式 function(参数){return}
注意
a.普通函数和匿名函数中都有一个参数数组对象 arguments
b. JS函数的调用只以函数名区分,与参数无关
-->
<script >
//1. 普通函数 格式 function 函数名(参数){return}
function myf1(name){
console.log(name);
console.log(arguments);//当前方法接收的参数数组
return name+",您好";
}
//调用普通函数
let str = myf1("李苏");
console.log(str);
//2. 匿名函数 格式 function(参数){return}
let myf2 = function (name){
console.log(name);
console.log(arguments);//当前方法接收的参数数组
return name+",您好";
}
//调用匿名函数
console.log(typeof myf2);//function
let str2 = myf2("郝哲");
console.log(str2);
//a,b JS函数的调用只以函数名区分,与参数无关
let str3 = myf1("李苏1","李苏2","李苏3");
console.log(str3);
let str4 = myf2("李苏11","李苏22","李苏33");
console.log(str4);
</script>
</body>
</html>
第3章 JS事件
14-事件的绑定方式
Js可以监听用户的行为,并结合函数来完成用户交互功能.
1.命名函数 2.匿名函数
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>14-事件的两种绑定方式</title>
</head>
<body>
<!--
事件的绑定方式
1. 命名函数 格式 onEvent=函数 this指的是window对象,使用自己需要传递
2. 匿名函数 格式 onEvent=函数 this指的是当前对象自己
-->
<p onclick="myf1(this)" title="我是命名">1. 命名函数</p>
<p id="myp" title="我是匿名">2. 匿名函数</p>
<script >
//1. 命名函数 格式 onEvent=函数
function myf1(ele) {
console.log(this);//widow
console.log(this.title);//undefined
console.log(ele);//<p onclick="myf1(this)" title="我是命名">1. 命名函数</p>
console.log(ele.title);
console.log("命名函数执行");
}
//2. 匿名函数 格式 onEvent=函数
document.querySelector("#myp").onclick = function () {
console.log(this);//<p id="myp" title="我是匿名">2. 匿名函数</p>
console.log(this.title);
console.log("匿名函数执行");
}
</script>
</body>
</html>
常用事件(了解)
15-常用事件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>15-常用事件</title>
</head>
<body>
<!--
常用事件
1. onload 页面加载完成
2. onfocus 获取焦点
3. onblur 失去焦点
4. onchange 表单控件的值改变时
5. onclick 鼠标单击
-->
姓名 <input type="text" onfocus="myfocus()"><br/>
学历
<select name="edu" id="edu" >
<option value="0">请选择</option>
<option value="1">本科</option>
<option value="2">大专</option>
</select>
<br/>
<button type="button" id="btn" onclick="myclick()">按钮</button>
<script >
//1. onload 页面加载完成
window.onload = function () {
console.log("页面加载完成");
}
//2. onfocus 获取焦点
function myfocus() {
console.log("输入框获取焦点");
}
//3. onblur 失去焦点
document.querySelector('input[type="text"]').onblur = function () {
console.log("输入框失去焦点");
console.log(this.value);//输入框中的输入字符
}
//4. onchange 表单控件的值改变时
document.querySelector("#edu").onchange = function () {
console.log("下拉列表值改变");
console.log(this.value);
}
//5. onclick 鼠标单击
function myclick() {
//把输入框的值赋值给下拉列表
document.querySelector("#edu").value = document.querySelector('input[type="text"]').value;
}
</script>
</body>
</html>
第4章 JS内置对象(掌握)
16-数组
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>16-数组</title>
</head>
<body>
<!--
JS数组的特点:
1.JS是弱类型,数组元素类型任意
2. JS的数组类似于Java的集合,长度可变,所以有时又把js数组叫做数组或集合
数组
要求能够查询w3c手册完成如下功能
1. 创建数组 []
2. 数组合并 concat
3. 添加元素
数组头添加 unshift
数组尾添加 push
4. 删除元素
数组头删除 shift
数组尾删除 pop
5. 数组元素拼接为字符串 join(分隔符)
6. 排序数组元素 sort
-->
<script >
//1. 创建数组
let arr1 = ["中国",666,true,null,undefined];
let arr2 = new Array("您好",123,false,null);
let arr3 = [5,3,1,4,7];
//2. 数组合并
console.log(arr1.concat(arr2));
//3. 添加元素
arr1.unshift("头元素");//从头添加
arr1.push("尾巴元素");//尾巴添加
console.log(arr1);
//4. 删除元素
arr1.shift();//删除头元素
arr1.pop();//删除尾元素
console.log(arr1);
//5. 数组元素拼接为字符串
console.log(arr3.join("-"));//用-拼接数组元素为字符串
//6. 排序数组元素
console.log(arr3.sort());//默认升序
arr3.sort(function (a,b) {
return a-b;//升序
});
console.log(arr3);
arr3.sort(function (a,b) {
return b-a;//降序
});
console.log(arr3);
</script>
</body>
</html>
17-日期
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>17-日期</title>
</head>
<body>
<!--
日期
查询手册完成:
1. 创建日期对象
2. 获取当前时间 转为字符串 格式 yyyy-MM-dd HH:mm:ss.SSS
小扩展:
字符串补位方法 padStart(位数,填充值) 例如要把7补齐为07 "7".padStart(2,"0")
(了解)字符串模板 `字符串` 内部可以使用${变量名称} 取变量值. 注意${}与jsp中的${}冲突.
-->
<script >
function getDateStr() {
//1. 创建日期对象
let d = new Date();//获取当前日期对象
//2. 获取当前时间 转为字符串 格式 yyyy-MM-dd HH:mm:ss.SSS
let fullYear = d.getFullYear();//年
let month = new String(d.getMonth()+1).padStart(2,"0");//月
let date = new String(d.getDate()).padStart(2,"0");//日
let hours = new String(d.getHours()).padStart(2,"0");//时
let minutes = new String(d.getMinutes()).padStart(2,"0");//分
let seconds = new String(d.getSeconds()).padStart(2,"0");//秒
let milliseconds = new String(d.getMilliseconds()).padStart(3,"0");//毫秒
let dateStr = `${fullYear}-${month}-${date} ${hours}:${minutes}:${seconds}.${milliseconds}`;
console.log(dateStr);
return dateStr;
}
getDateStr();//调用方法
</script>
</body>
</html>
18-数学运算
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>18-数学运算</title>
</head>
<body>
<!--
数学运算
查询手册完成
1. 四舍五入 round(x) 把数四舍五入为最接近的整数
2. 向下取整 floor(x) 对数进行下舍入。 地板
3. 向上取整 ceil(x) 对数进行上舍入。
4. 产生随机数 random() 返回 0 ~ 1 之间的随机数。
5. 产生 [1,10]的随机整数
小扩展:
parseInt(x) 对x转为整数,有小数部分直接舍去. 功能类似 floor(x)
random() 返回 [0,1) 之间的随机数。 [0,1) 左闭右开区间,包含0不包含1
在任何语言的随机数中都是左闭右开.
-->
<script >
let n = 1234.567
//1. 四舍五入
console.log(Math.round(n));//1235
//2. 向下取整
console.log(Math.floor(n));;//1234
//3. 向上取整
console.log(Math.ceil(1234.0001));//1235
//4. 产生随机数
console.log(Math.random());//随机产生[0,1)小数
//5. 产生 [1,10]的随机整数
//[0,1) *10 --> [0,10) +1 --> [1,11) floor--> [1,10]
console.log(Math.floor(Math.random() * 10 + 1));
</script>
</body>
</html>
19-数字
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>19-数字</title>
</head>
<body style="width: 100vw;height: 100vh;" bgcolor="#f5f5dc" onclick="changeColor()">
<!--
数字
1. 会使用二进制,八进制,十六进制
js中使用 0b,0o,0x 前缀分别表示二进制,八进制,十六进制
2. 会把数字格式为人民币格式 如9.85
toFixed(小数位数) 把数字四舍五入转换为字符串，保留小数点后指定位数。
3. 把数字转为16进制字符
toString(进制) 把数字转换为字符串，使用指定的进制。
4. 会产生随机颜色
5. 点击页面,背景切换随机颜色
小扩展:
vw 屏幕宽度百分比
vh 屏幕高度百分比
document.querySelector(css选择器) 根据css选择器获取匹配到的一个标签
小作业:
每隔五秒页面自动切换一个随机颜色
setInterval(函数,间隔时间) 每隔固定间隔时间(毫秒)执行一次函数
-->
<script >
//1. 会使用二进制,八进制,十六进制
let n2 = 0b11;
console.log(n2);//3
let n8 = 0o11;
console.log(n8);//9
let n16 = 0x11;
console.log(n16);//17
//2. 会把数字格式为人民币格式 如9.85
let price = 128.9867;
console.log(price.toFixed(2));//128.99
//3. 把数字转为16进制字符
n16 = 255;
console.log(n16.toString(16));//ff
//4. 会产生随机颜色 #ff00ff
//[0,1) *0xffffff --> [0x000000,0xffffff) round--> [0x000000,0xffffff]
let colorStr = "#"+Math.round(Math.random() * 0xffffff).toString(16);//产生随机颜色
console.log(colorStr);
//5. 点击页面,背景切换随机颜色
function changeColor(){
let colorStr = "#"+Math.round(Math.random() * 0xffffff).toString(16);
document.querySelector("body").bgColor = colorStr;//改变body的背景颜色
}
</script>
</body>
</html>
20-全局函数
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>20-全局函数</title>
</head>
<body>
<!--
全局函数
1. 对数据进行加密
encodeURI() 把字符串编码为 URI。
2. 对加密数据进行解密
decodeURI() 解码某个编码的 URI。
3. 把字符串当做js表达式来执行
eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行
-->
<script >
//1. 对数据进行编码
let str = "今天下午两点偷袭珍珠";
let enstr = encodeURI(str);//urI编码
console.log(enstr);
//2. 对数据进行解码
let res = decodeURI(enstr);//urI解码
console.log(res);
//3. 把字符串当做js表达式来执行
let s = "1+2*3-4/2";
let result = eval(s);//把字符串当做js代码执行
console.log(result);//5
</script>
</body>
</html>
更多内容敬候 JavaScript高级Ⅰ
欢迎大家指点评论~ 点赞+关注⭐⭐⭐
