JavaWeb：JavaScript
概述
什么是JavaScript?
一、引入方式
JS引入方式
小结
二、基础语法
书写规范
输出语句
变量
常量
数据类型
运算符
类型转换
流程控制
小结
三、函数-类似Java中方法
函数
匿名函数
小结
四、对象
内置对象
Array
//1. 定义数组// 方式1let arr = [1, 2, 3, 4, 5];console.log(arr);// 方式2let arr2 = new Array(1, 2, 3, 4, 5);// 长度为5console.log(arr2);arr2[10]="hello";console.log(arr2);//2. 数组属性 - lengthconsole.log("长度：" + arr2.length);for(let i=0;i<arr2.length;i++){console.log(arr2[i]);}// 快捷方式// for loop//3. 数组方法 - forEach , map, push , pop , unshift , shift , splice// 只会变量有值元素arr2.forEach(item=>{console.log(item);})// maplet arr3 = arr2.map(item=>{return e+10;})// push尾部添加 pop 尾部移除 栈：先进后出let arr4 = ['a'];arr4.push('b', 'b', 'c');console.log(arr4);arr4.pop();console.log(arr4);// shift 头部移除 队列：先进先出// slice 删除元素let arr5 = [1,2,3,4,5,6,7,8,9];let newArr = arr5.slice(2,3);// 起始位置，删除几个console.log(newArr);
小结
String
//1. 创建字符串let str = 'Hello JS ';let str2 = new String('Hello JS');alert(str);alert(str2);//2. 字符串属性 - lengthalert(str.length);alert(str2.length);//3. 字符串方法 - charAt , indexOf , trim , substringalert(str.charAt(0));// Halert(str.indexOf('llo'));// 2alert(str.trim());alert(str.substring(2,5));// llo 包左不包右
小结
JSON
JS自定义对象
//1. 自定义JS对象let obj = {name: '张三',age: 20,gender: '男',sing() {alert('I can sing')}}// 调用对象属性和方法alert(obj.name);obj.sing();
JSON对象
// 调用对象属性和方法alert(obj.name);obj.sing();//2. JSON对象let jsonStr = '{"name":"张三","age":20,"gender":"男"}';// alert(jsonStr.name);// 错误undefined// JSON.parse() - 将JSON字符串转为对象let js = JSON.parse(jsonStr);alert(js.name);// JSON.stringify() - 将对象转为JSON字符串let jsStr = JSON.stringify(js);alert(jsStr);// 字符串形式// let objStr = JSON.stringify(obj);
小结
BOM
概念
Window
//1. 窗口对象window.alert('Hello JS');let flag = window.confirm('是否继续');// 确定 true console.log(flag);// window.prompt('请输入你的名字');// 定时器let i = 0;setInterval(() =>{i++;console.log(i);alert('定时器执行 ' + i + '次');}, 1000);// 延迟时间setTimeout(() => {alert('定时器执行完毕');}, 3000);
Location
//2. Location对象alert(location.href);location.href = 'https://www.baidu.com';// 页面跳转
小结
DOM
DOM对象
DOM对象操作
// 通过document获取元素对象// 1.通过css获取单个元素对象,返回第一个let s1 = document.querySelector('#sid');s1.innerHTML = 'DOM元素1修改';// 将内容修改 alert(s1.innerHTML);// 2.通过css获取多个元素对象,返回数组let s2 = document.querySelectorAll('.txt');alert(s2);s2.forEach(item => {item.innerHTML = 'DOM元素2修改';})
小结
DOM对象案例
// 需求: 倒计时跳转到官网// 分析：Dom操作，周期性定时任务setInterval() location.href// 步骤：// 1.获取元素 let span = document.querySelector("#time");let timeVal = span.innerHTML;// alert(timeVal);// 每过1秒减1000；setInterval(function () {timeVal--;span.innerHTML = timeVal;// 3.判断时间是否到0if (timeVal <= 0) {// 4.跳转location.href = "https://www.jd.com";// // 5.清除定时器// clearInterval(timer);}span.innerHTML = timeVal;}, 1000);
五、事件监听
什么是事件？
事件监听
<input type="button" id="btn1" value="点我一下试试1"><input type="button" id="btn2" value="点我一下试试2"><script>// 事件监听，可绑定多次事件document.querySelector("#btn1").addEventListener("click", ()=>{alert("试试就试试");});// 早版本 onclick没提示， 会覆盖，只能有最后一次事件document.querySelector("#btn2").onclick = function(){alert("试试就试试2");}// addEventListener 没绑定一次 都有效</script>
常见事件
案例：表格隔行换色
// 需求：表格隔行换色// 分析：事件--鼠标移入移出事件 DOM操作添加样式// 1.获取Dom元素let trs = document.querySelectorAll(".data")for (let i = 0; i < trs.length; i++) {const tr = trs[i];// 2.操作元素属性：奇数行 #FBFBD4 偶数行 #D9D9FA// 移入tr.addEventListener('mouseenter', ()=>{if(i % 2 == 0) {tr.style = "background-color:#FBFBD4;"} else {tr.style = "background-color:#D9D9FA;"}})// 移除tr.addEventListener("mouseleave", ()=>{tr.style = "background-color:none";})}
案例：表单校验效果实现
// 需求：表单校验，用户名4-16位，手机号11位// 分析：JS事件-- 鼠标离焦blur,表单提交let input = document.querySelector("#username");let checkUsername = function(){let flag = true;// 点出来，赋值let usernameValue = input.value;if(usernameValue.length < 4 || usernameValue.length > 16){document.querySelector("#name_msg").innerHTML = "用户名长度在4-16位";flag = false;} else {document.querySelector("#name_msg").innerHTML = "";}return flag;}input.addEventListener("blur",checkUsername)let input2 = document.querySelector("#phone");let checkPhone = function(){let flag = true;// 点出来，赋值let phoneValue = input2.value;if(phoneValue.length != 11){document.querySelector("#phone_msg").innerHTML = "手机号长度为11位";flag = false;} else {document.querySelector("#phone_msg").innerHTML = "";}return flag;}input2.addEventListener("blur", checkPhone)// 表单提交let form = document.querySelector("form");form.addEventListener("submit", function(event){// 校验if(!checkUsername() || !checkPhone()){alert("请输入正确的用户名和手机号");// 阻止表单提交event.preventDefault();}})
案例：表单校验效果实现-正则表达式
let reg1 = /abc/let reg2 = new RegExp('123')console.log(reg1.test('abc'))console.log(reg1.test('abb'))// falseconsole.log(reg1.test('aabc'))// true 包含// 需求：用户名4-16位，且只能包含字母、数字、下划线// let reg3 = /\w[4,16]/let reg3 = /^[a-zA-Z0-9_]{4,16}$/// 需求：校验手机号let reg4 = /^1[3456789]\d{9}$/
六、模块化
