一.JavaScript的基础语法
1.Demo1.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript基础语法</title><script>function firstMethod(){var d=new Date()d.setDate(d.getDate()-3)alert(d.toString())}</script><script src="javascript.js"></script>
</head>
<body><input type="button" value="按钮1" onclick="alert('Hello World')"><br><input type="button" value="按钮2" onclick="firstMethod()"><br><input type="button" value="按钮3" onclick="method1()"><br>基础<br>常量和变量<br>声明变量的语法结构:var 变量名=初始值;变量名(标识符):由字母，数字，下划线，$符号组成，不能以数字开头，不能是系统的关键字，常量名大写<br>注释：//和/**/<br>Javascript大小写敏感数据类型<br><pre>数据类型: 基本类型:string number boolean特殊类型:null undefined复杂类型:Date Math Array Object </pre><br>数组的操作<input type="text" id="txtArray" value="123,2,5,96,8,56"><input type="button" value="翻转" onclick="method2(1)"><input type="button" value="排序(按字母排序)" onclick="method2(2)"><input type="button" value="翻转(按数字排序)" onclick="method2(3)"><br>随机数1-30<input type="button" value="1-30随机数" onclick="randomNumber()"><br>数据类型转换:隐式转换--转换函数<br><input type="button" value="隐式转换" onclick="converDate()"><br>显示转换:parseInt\parseFloat\toString\isNaN(是否是数字)<br><input type="text" id="txtDate"><input type="button" value="计算平方" onclick="getSquare()"><br>运算符<br>== ===严格相等(包括类型)三元运算符 表达式?value1:value2<br><input type="text" id="txtNumber" onblur="guess()"><br>流程控制语句:条件(if/else--switch/case) 循环(for while)<br><input type="button" value="累加1到50的和" onclick="getSum()"><br>用户名(3-5位字母和数字的组合)<input type="text" id="txtName" onblur="judgeName()"><br><input type="button" value="方法重载" onclick="tryArguments(10,10)"><br><input type="button" value="函数的定义方式" onclick="testFunction()"><br><input type="button" value="1" onclick="cal(this.value)"><input type="button" value="2" onclick="cal(this.value)"><input type="button" value="3" onclick="cal(this.value)"><input type="button" value="4" onclick="cal(this.value)"><input type="button" value="+" onclick="cal(this.value)"><input type="button" value="-" onclick="cal(this.value)"><input type="button" value="=" onclick="cal(this.value)"><input type="text" id="txtData1"></body>
</html>二.BOM对象:浏览器对象模型
2.Demo2.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>BOM对象</title><script>//删除提示框function deleteDate(){var r=window.confirm("你是否真的要删除")alert(r)}//打开窗口function openWin(){window.open("http://www.baidu.com","baidu","width=200,height=300,toolbar=yes")}//显示时间function showTime(){var now=new Date()document.getElementById("txtTime").value=now.toLocaleTimeString()}//启动时间var timer;function startTime(){timer=window.setInterval("showTime()",1000)}//停止函数function stopTime(){window.clearInterval(timer)}//定时操作function wait(){window.setTimeout("alert('hello')",3000)}</script>
</head>
<body>删除提示框<input type="button" value="删除文本" onclick="deleteDate()"><br>打开窗口<input type="button" value="打开窗口" onclick="openWin()"><br>有关时间的操作<input type="text" id="txtTime"><input type="button" value="显示时间"onclick="showTime()"><input type="button" value="启动时间"onclick="startTime()"><input type="button" value="停止时间"onclick="stopTime()"><input type="button" value="定时操作"onclick="wait()">
</body>
</html>三.DOM对象:文档对象模型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM对象操作</title><script>function testDOM(){//页面中由多少个input元素var n=document.getElementsByTagName("input").length//修改图形var imgObj=document.getElementById("img1")imgObj.src="2.png"//修改链接var linkObj=document.getElementById("link1")linkObj.innerHTML="AAAAA"linkObj.href="http://www.baidu.com"//修改段落var pObj=document.getElementById("p1")pObj.innerHTML="后天也休息"pObj.style.color="red"pObj.style.backgroundColor="green"pObj.style.fontSize="30px"//修改标题样式var h3Obj=document.getElementById("h31")h3Obj.className="mystyle"//列表个数var ulObj=document.getElementById("ul1")var count=0for(var i=0;i<ulObj.childNodes.length;i++){if(ulObj.childNodes[i].nodeName=="LI"){count++}}alert(count)}</script><style rel="stylesheet">.mystyle{border:1px solid #000;}</style>
</head>
<body><input type="button" value="开始" onclick="testDOM()"><br><img src="1.png" id="img1"><a href="#" id="link1">click me</a><p id="p1">明天休息了</p><h3 id="h31">可以利用休息的时间来武装自己</h3><ul id="ul1"><li>1</li><li>2</li><li>3</li></ul>
</body>
</html>四.综合练习---购物车
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript5综合练习</title><script>//增加的函数function add(btnObj){//得到传入对象的父对象的所有子对象var nodes=btnObj.parentNode.childNodes;//循环所有的子节点找到文本框对象for(var i=0;i<nodes.length;i++){var child=nodes[i]if(child.nodeName=="INPUT"&&child.type=="text"){var n=parseInt(child.value)n++child.value=n}}//计算小计及总计calSum()}//减少函数function sub(btnObj){//得到传入对象的父对象的所有子对象var nodes=btnObj.parentNode.childNodes;//循环所有的子节点找到文本框对象for(var i=0;i<nodes.length;i++){var child=nodes[i]if(child.nodeName=="INPUT"&&child.type=="text"){var n=parseInt(child.value)n--child.value=n}} //计算小计及总计calSum()}//对表格进行操作function calSum(){//找到表格中所有的trvar tableObj=document.getElementById("table1")//获得表格中的所有行var rows=tableObj.getElementsByTagName("tr")//循环获得每一行var total=0//存放总计的值for(var i=1;i<rows.length;i++){//得到当前行var row=rows[i]//找到价格var price=parseFloat(row.getElementsByTagName("td")[1].innerHTML)//找到数量var num= parseInt(row.getElementsByTagName("td")[2].getElementsByTagName("INPUT")[1].value)//计算小计var sum=price*num//将计算的小计结果给到小计单元格中row.getElementsByTagName("td")[3].innerHTML=sum.toFixed(2)//累加总计total+=sum}//将总计的值赋值给总计元素document.getElementById("totalPrice").innerHTML=total.toFixed(2)}</script>
</head>
<body onload="calSum()"><table border="1" id="table1"><tr><td>名称</td><td>价格</td><td>数量</td><td>小计</td></tr><tr><td>红烧肉</td><td>35</td><td><input type="button" value="-" onclick="sub(this)"><input type="text" value="1" readonly><input type="button" value="+" onclick="add(this)"></td><td></td></tr><tr><td>锅包肉</td><td>45</td><td><input type="button" value="-" onclick="sub(this)"><input type="text" value="2" readonly><input type="button" value="+" onclick="add(this)"></td><td></td></tr><tr><td>回锅肉</td><td>25</td><td><input type="button" value="-" onclick="sub(this)"><input type="text" value="1" readonly><input type="button" value="+" onclick="add(this)"></td><td></td></tr></table>总计:<span id="totalPrice"></span>
</body>
</html>五.级联操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript5综合练习</title>
</head>
<body>级联操作:通过一个元素控制另外一个元素中的内容，如省市的选择<br>省:<select id="sel1" onchange="createCities()"><option>---请选择---</option><option>北京</option><option>河南</option><option>辽宁</option><option>河北</option></select>城市:<select id="selCity"><option>---请选择---</option></select><script>//创建数组用于存放城市信息var array=new Array()array[0]=["请选择"]array[1]=["海淀","朝阳"]array[2]=["郑州","开封"]array[3]=["沈阳","大连","鞍山"]array[4]=["石家庄","邯郸"]//创建用于选择城市的函数function createCities(){//获得省份下拉列表中对应的下标值var index=document.getElementById("sel1").selectedIndex//获得对应省份的城市var data=array[index]//清除城市中所包含的原选项var selCity=document.getElementById("selCity")//设置城市子选项的长度为0selCity.options.length=0//加入新选项for(var i=0;i<data.length;i++){var obj=new Option(data[i])selCity.add(obj)}}</script>
</body>
</html>六.节点操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>节点的操作</title>
</head>
<body><form id="form1"><input type="button" value="添加节点" onclick="addNewNode()"></form><script>function addNewNode(){//找到表单元素var formObj=document.getElementById("form1")//添加文本框var inputTextObj=document.createElement("input")inputTextObj.type="text"inputTextObj.value="doudou"formObj.appendChild(inputTextObj)//添加段落var pObj=document.createElement("p")pObj.innerHTML="孙桂月"formObj.insertBefore(pObj,formObj.firstChild)//添加按钮var btnObj=document.createElement("input")btnObj.type="button"btnObj.value="提交"//为按钮定义事件btnObj.onclick=function(){alert("click me")}formObj.appendChild(btnObj)}</script>
</body>
</html>七.表格操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格操作</title>
</head>
<body>ID:<input type="text" id="txtID">Name:<input type="text" id="txtName"><input type="button" value="添加" onclick="addRow()"><table id="t1" border="1"><tr><td>ID</td><td>Name</td></tr><tr><td>1</td><td>doudou</td></tr></table><script>function addRow(){//获得表格对象var t=document.getElementById("t1")//获得表格的行数var v=t.rows.length//在表格中新增一行var row=t.insertRow(v)//为新增行添加单元格var cell1=row.insertCell(0)cell1.innerHTML=document.getElementById("txtID").valuevar cell2=row.insertCell(1)cell2.innerHTML=document.getElementById("txtName").value}</script>
</body>
</html>八.练习----随机点名
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>随机点名</title><script>var interFunc;//存放姓名的数组var arr=new Array()arr[0]="张三"arr[1]="李四"arr[2]="王五"arr[3]="赵六"arr[4]="马七"arr[5]="侯八"//根据下标数获取姓名的函数function displayName(index){//将获取的姓名赋值给文本框document.getElementById("name").value=arr[index]}//获得随机数的函数function getRandom(small,big){return small+Math.floor(Math.random()*(big-small+1))}//整合随机数获取姓名function dealFunc(){displayName(getRandom(0,(arr.length-1)))}//运行function run(val){if(val=="开始"){document.getElementById("btn").value="停止"//文本框中滚动出现姓名,回调函数，每隔30毫秒调用一次整合函数interFunc=setInterval("dealFunc()",30)}else{document.getElementById("btn").value="开始"clearInterval(interFunc)}}</script>
</head>
<body><div align="center"><input type="text" id="name" style="width:4em; height:1.2em; font-size: 72px; vertical-align: middle; text-align: center;" readonly><input type="button" id="btn" value="开始" style="width:5em; height:1.2em; font-size: 42px;" onclick="run(this.value)"></div>
</body>
</html>九.变量的声明及特性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>变量的声明及特性</title><style>.item{width:100px;height:50px;border:1px solid #000;margin-left:20px;float:left;}</style>
</head><body><script>//声明变量let a;let d,b,c;let e=100let f=120,g='ilovescript',h=[]//注意//1.变量不能重复声明let star='刘德华'//let star='华仔'//2.块级作用域 if else while for {}{let name='周杰伦'}console.log(name)//3.不能在声明前使用//console.log(age)//let age=20// console.log(age)// var age=20//4.不影响作用域链// {// let goods='显示器'// function fn(){// console.log(goods)// }// fn()// }</script><div><h2>点击切换颜色</h2><div class="item"></div><div class="item"></div><div class="item"></div></div><script>//获得div元素let items=document.getElementsByClassName('item')//遍历item数组,获得每一个元素，并为元素添加单击事件for(let i=0;i<items.length;i++){items[i].onclick =function(){//设置背景颜色items[i].style.backgroundColor='pink'}}</script>
</body>
</html>十.常量声明及特点
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>常量声明及特点</title>
</head>
<body><script>//常量:在程序执行的过程中不会发生改变的值称为常量//1.声明常量const SCHOOL='东北大学'//2.常量的特点//2.1.一定要付初始值const CORDID=1;//2.2常量的名字要大写(潜规则)const A=1//2.3常量值不能修改//A=2//2.4可以对数组和对象的元素进行修改const team=['A','B','C']team.push('D')//向数组中追加数据</script>
</body>
</html>十一.解构赋值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>解构赋值</title>
</head>
<body><script>//解构赋值:将复杂结构数据拆解开，与简单结构进行数据交互//数组:const F4=['小沈阳','赵四','刘能','宋小宝']let[f1,f2,f3,f4]=F4console.log(f1)console.log(f2)console.log(f3)console.log(f4)const zhaobenshan={name:'赵本山',age:76,sex:'男',sayHi:function(){console.log("我的特长是演小品")}}let {name,age,sex,sayHi}=zhaobenshanconsole.log(name)console.log(age)console.log(sex)sayHi()</script>
</body>
</html>十二.模板字符串
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模板字符串</title>
</head>
<body><script>//模板字符串:ES6引入新的字符串的方式"",'',``//1.声明let str=`我是ES6中增加的定义字符串的方式`console.log(str,typeof str)//2.特点//2.1在字符串中可以出现换行let str1=`<ul></ul>`//2.2.变量拼接let name1='鹊刀门2'let out =`${name1}是一部具备东北特色喜剧`console.log(out)</script>
</body>
</html>十三.函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>函数</title>
</head>
<body><script>//函数：JavaScript函数用于执行特定任务或计算功能的代码块。可以重复使用的代码块//语法结构:function 函数名(参数列表){执行过程}//特点:函数可以接收输入的参数,并可以通过return关键字返回数据//优势:函数的优势在于提高代码的可重用性和模块化编程//声明一个函数let fn=function(a,b){console.log(a,b,a+b)return a+b}let sum=fn(1,2)console.log(sum)//ES6允许使用箭头函数let fn1 =(a,b)=>{return a+b}let sum1=fn1(1,2)console.log(sum1)/*注意:关于this的使用在箭头函数中，this是在定义函数的时候绑定的，而不是在执行函数的时候绑定的。this指向的固定化，是因为箭头函数根本没有自己的this，所以不能用作构造函数*/// var x=1;// var obj={// x:2,// sayHi:()=>{// console.log(this.x)// }// }// obj.sayHi()// //对比普通函数// var obj={// x:2,// sayHi:function(){// console.log(this.x)// }// }// obj.sayHi()//注意：箭头函数不能构造实例化对象// let Person=(name,age)=>{// this.name=name;// this.age=age;// }// let me=new Person('小沈阳',30)// console.log(me)// let Person=function(name,age){// this.name=name;// this.age=age;// }// let me=new Person('小沈阳',30)// console.log(me)//注意:箭头函数不能使用arguments//arguments解释:不用形参(函数的参数列表)，通过arguments可以记录传入的实参。// function showArguments(){// console.log(arguments[0],arguments[1])// }// showArguments(1,2)// //注意：箭头函数可以简写// let pow=(n)=>n*n// console.log(pow(9))</script><div id="box" style="width: 200px;height: 200px;background-color: aquamarine;"></div><script>//箭头函数的应用案例//需求1：单击div 2s后颜色变换//获得页面中id值为div的元素let box =document.getElementById("box")//为box元素添加单击事件// box.addEventListener("click",function(){// let _this=this// //定时函数// setTimeout(function(){// _this.style.background='pink'// },2000)// })//ES6箭头函数实现，箭头函数可以找到事件源box.addEventListener("click",function(){//定时函数setTimeout(()=>{this.style.background='pink'},2000)})//需求2：从数组中获取偶数的元素const arr=[1,6,9,10,100,21]//filter()过滤器，用于遍历数组的每一个元素// const result=arr.filter(function(item){// if(item%2==0){// return true;// }else{// return false;// }// })// console.log(result)//使用箭头函数完成需求// const result=arr.filter((item)=>{// if(item%2==0){// return true;// }else{// return false;// }// })//简易写法const result=arr.filter(item=>item%2==0)console.log(result)</script>
</body>
</html>十四.函数参数的设置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>函数参数的设置</title>
</head>
<body><script>//在ES6中允许参数赋初值function add(a,b,c=3){}add(1,2)//ES6中支持参数解构function connection({host='127.0.0.1',username,password,prot}){// let host=options.host// let username=options.username}connection({host:'192.168.1.1',username:'root',password:'123123',port:3306})//ES6引入了rest参数,用于替换arguments,注意...args写在最后function date(a,b,...args){console.log(a)console.log(b)console.log(args)}date('小沈阳','赵四','刘能','宋小宝')</script>
</body>
</html>十五.数组的相关操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数组的相关操作</title>
</head>
<body><div></div><div></div><div></div><script>//数组的合并const fenghuang = ['曾毅','玲花']const kaixin = ['沈腾','马丽','艾伦']const kuajie = fenghuang.concat(kaixin)const kuajie1 = [...fenghuang,...kaixin]console.log(kuajie1)//数组的克隆const fh = [...fenghuang]//将伪数组转换成真正的数组数据const divs = document.querySelectorAll('div')//页面中所有的div元素const divArr = [...divs]console.log(divArr)</script>
</body>
</html>十六.数据类型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数据类型</title>
</head>
<body><script>//数据类型：在程序执行的过程中可以操作哪些数据种类//在JavaScript中共提供了7种基本数据类型/*USONBu---undefined 空(什么都没有)s---string 字符串 symbol 唯一(ES6中新增的)o---object 对象n---number 数字 null 空值b---boolean 布尔Symbol特点:1.值是唯一的2.不能与其他的数据进行运算3.定义的对象属性不能使用for......in循环遍历*///创建let a=Symbol()console.log(a,typeof a)let b=Symbol('wahaha')let b1=Symbol('wahaha')console.log(b===b1)let c=Symbol.for('wahaha')let c1=Symbol.for('wahaha')console.log(c===c1)//let result=a+100//let result1=b>'gaga'//使用场景var age=Symbol()var person={[Symbol('name')]:'zs',[age]:12}console.log(person.name)console.log(person.age)//symbol内部提供了哪些内置函数</script>
</body>
</html>十七.Promise
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Promise</title>
</head>
<body><script>//Promise是ES6引入的异步编程工具。// 语法上Promise是一个构造函数,用于封装异步操作并可以获取操作成功或失败的结果//Promise构造函数:Promise(excutor){}//Promise的常用函数:then,catch//实例化Promise对象(创建Promise工具)// let data="请求数据"//该数据为服务器的数据// reject(data)// })// //调用Promise的then方法// p.then(function(value){// //编写响应值// })</script>
</body>
</html>十八.ECMA的相关操作
#一·ECMA的相关介绍
##1.什么是ECMA，欧洲计算机制造商协会(谷歌，微软，IBM)，这个组织的目标是评价，开发和认可电信和计算机的相关标准。1994年更名为ECMA
##2.官网
https://ecma-international.org/
#二.ECMAScript相关介绍
##1.什么是ECMAScript
由ECMA国际通过ECMA-262标准化的脚本程序设计语言,ECMA国际制定了许多标准,而ECMA-262是其中之一
#三.ECMAScript262的发展历史
##1.官网
1.https://ecma-international.org/publications-and-standards/standards/ecma-262/
##2.各版本特点
-第1版本 1997年 制定了语言的基本语法
-第2版本 1998年 略
-第3版本 1999年 引入了正则表达式，异常处理，格式化输出，IE开始支持。
-第4版本 2007年 略
-第5版本 2009年 引入严格模式，JSON，扩展对象，数组，原型，字符串，日期等函数
-第6版本 2015年 模块化，面向对象语法，Promise,箭头函数，let,const,数组解构赋值等
-第7版本 2016年 幂运算符，数组拓展，async/await关键字
-第8版本 2017年 async/await关键字，字符串扩展
-第9版本 2018年 对象解构赋值，正则扩展
-第10版本 2019年 扩展对象，数组方法
十九.使用Promise封装Ajax
//创建可以读取外部文件的工具
const fs=require('fs') // fs.readFile('为学.md',(err,data)=>{// if(err) throw err;//如果读取文件失败则输出错误信息// console.log(data.toString())// })
//将读取文件的过程封装到Promise中
const p=new Promise(function(resolve,reject){fs.readFile('为学.md',(err,data)=>{//判断是否读取失败if(err) reject(err);//如果读取成功resolve(data)})
})
//配合promise展示数据
p.then(function(value){console.log(value.toString())
},function(reason){console.log("读取失败!!")
})
//使用Promise封装Ajax
//Ajax是ES5中提供的用于异步提交的工具，可以通过该工具实现客户端与服务器端进行数据交互
//Ajax也称为局部提交或局部刷新
//1.创建Ajax对象
const xhr=new XMLHttpRequest()
//2.配置访问地址及访问方式
xhr.open("GET","http://www.baidu.com")
//3.发送数据
xhr.send('向服务端发送的数据')
//4.处理响应结果
xhr.onreadystatechange=function(){//判断响应协议值if(xhr.readyState===4){//4有返回值if(xhr.status >=200 &&xhr.status<300){//表示成功console.log(xhr.response)//打印数据}else{//表示失败console.error(xhr.status)}}
}
//使用Promise封装Ajax
const p1=new Promise((resolve,reject)=>{//1.创建Ajax对象const xhr=new XMLHttpRequest()//2.配置访问地址及访问方式xhr.open("GET","http://www.baidu.com")//3.发送数据xhr.send('向服务端发送的数据')//4.处理响应结果xhr.onreadystatechange=function(){//判断响应协议值if(xhr.readyState===4){//4有返回值if(xhr.status >=200 &&xhr.status<300){//表示成功resolve(xhr.response)//打印数据}else{//表示失败reject(xhr.status)}}}
})
//指定回调
p1.then(function(value){console.log(value)
},function(reason){console.log(reason)
})
