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}$/

六、模块化