第1章 JavaScripts简介
1.1什么是JS？
1. JS是web的编程语言，所有现代在html中都是用JS
2. JS是一种轻量级的编程语言，是可插入HTML的编程代码
3. JS插入HTML页面后，可由所有浏览器执行
1.2为什么要用JS？
1. HTML定义了网页的内容
2. CSS描述了网页的布局
3. JS则是网页的行为，或者说与用户进行交互
第2章 JS如何引入及基本书写规范
2.1JS一般在head和body后面都可以写，但是建议写在body后面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
Js文件体
<script>
alert('弹出警告')
</script>
</body>
</html>
2.2JS的注释方式：
<script>
//alert('弹出警告')
/**
* 注视内容
*/
</script>
2.3如何引入第三方JS文件？
<script src="js/test.js"></script>
第3章 JS语法
3.1变量声明
<script>
varnum=123;
console.log(num,typeof (num));
var s='jiang';
console.log(s,typeof s);
var b=true;
console.log(b,typeof b);
</script>
3.2JS的类型转换
<script>
console.log('10'==10); //值比较
console.log('10'===10); //值与类型的比较
var res='100' -5;
console.log(res);
</script>
3.3数字转换为字符串
<script>
var res =111 +''; //数字转换为字符串
res=111..toString()
console.log(typeof res)
</script>
3.4字符串转换为数字：
<script>
var res='111';
res='111' - 0;
console.log(typeof res)
</script>
3.5parse方法
<script>
res=parseFloat('3.1.3ab')
console.log(res)
res=parseInt('3.2.2')
console.log(res)
</script>
第4章 JS类型的使用
4.1如何表示多个数据的值以及数组的增删改查操作
<script>
var arr=[1,2,3];
console.log(arr)
console.log(arr[0]);
delete arr[0]; //删除
console.log(arr)
arr[0]=7; //修改
console.log(arr)
arr.unshift('111') //头增
console.log(arr)
arr.shift('111') //头删
console.log(arr)
arr.push('111') //末尾增
console.log(arr)
arr.pop('234') //末尾删
console.log(arr)
</script>
4.2splice方法：
<script>
var arr=[1,2,3];
console.log(arr)
//splice 从什么索引开始，操作多少位，操作成什么
arr.splice(0,1,8)
console.log(arr)
arr.splice(0,2) //如果第三个参数省略，表示为删除
console.log(arr)
</script>
4.3slice方法：
<script>
var arr=[1,2,3];
console.log(arr)
//slice（n，m）从索引n开始到m之前
newarr=arr.slice(0,2);
console.log(newarr)
</script>
4.4组合字符串以及字符串的逆运算
<script>
var arr=[1,2,3];
console.log(arr)
var str=arr.join('@')
console.log(str, typeof str)
var r=str.split('@')
console.log(r)
</script>
4.5JS中没有字典，但是可以用对象来完全取代字典：
<script>
var dic ={
name:'jiang',
age:'20',
}
console.log(dic.name)
//字典的增删改查
dic.sex='nihao';
console.log(dic)
dic.age='77'
console.log(dic)
delete dic.age
console.log(dic)
</script>
第5章 JS的函数
5.1函数的定义：
正常定义方式
<script>
function f1() {
console.log('函数1')
}
f1()
</script>
匿名函数的定义方式
<script>
var f2=function () {
console.log('函数2')
}
f2()
</script>
立即调用函数的方式
<script>
(function () {
console.log('函数3')
})();
</script>
5.2函数的返回值：JS函数有且只有一个返回值
1. 没有明确返回值将返回undefined
2. 空返回将返回undefined
3. return
4. 正常返回一个值
5. 如果返回多个值，取最后一个值
6. 如果返回多个值，需要借助字典或者数组
<script>
function f1() {
// console.log('函数1')
return [10,20];
}
var res=f1()
console.log(res)
</script>
5.3函数的参数
1. 形参与实参个数不需要统一，但一定按照位置传参
2. 形参不足就会显示形参违背赋值，实参多传就会被丢弃
<script>
function f1(a,b,c=4,d=2) {
console.log(a,b,c,d)
}
f1(1,2)
</script>
3. …args为不定长形参
<script>
function f1(a,...b) {
console.log(a,b)
}
f1(1,2,3,4)
</script>
5.4常见模块和常用方法：
日期类Date
<script>
var d=new Date()
console.log(d.getDate())//从date对象中返回一个月中的某一天
console.log(d.getFullYear())//从date对象中以四位数字返回年份
console.log(d.getMonth())//从date对象返回月份
console.log(d.getDate())//从date对象返回一个月中的某一天
console.log(d.getDay())//从date对象中返回一周中的某一天
console.log(d.getHours())/返回date对象的小时
console.log(d.getMinutes())//分钟
console.log(d.getSeconds())//秒数
</script>
Json的序列化和反序列化
<script>
var str1='{"name":"jiang","age":20}';
var str2={"name":"jiang","age":20}
console.log(str1,str2)
var obj=JSON.parse(str1)//序列化
console.log(obj)
var str=JSON.stringify(obj)//反序列化
console.log(str)
</script>
url转义
decodeURI() 解码URI
decodeURIComponent() 解码URI中的组件部分
encodeURI() 编码URI
encodeURIComponent() 编码URI中的组件部分
escape() 对字符串进行转义
unescape() 对字符串进行解码
第6章 JS页面交互
6.1通过JS选择器获取页面标签对象
<body>
<div class="test">hello</div>
</body>
<script>
var res=document.querySelector('body .test');
var box=document.querySelectorAll('.test');
console.log(res)
console.log(box)
</script>
6.2为该目标标签对象绑定交互的方式
<body>
<div class="test">hello</div>
<div class="test">hello</div>
</body>
<script>
var res=document.querySelector('body .test');
var box=document.querySelectorAll('.test');
console.log(res)
console.log(box)
res.onclick=function () {
console.log('test被点击')
}
box[1].onmouseover=function () {
console.log('box被悬浮')
}
</script>
6.3在事件内部完成具体交互的业务逻辑
<style>
.test{
font-size:50px;
}
</style>
</head>
<body>
<div class="test">hello</div>
<div class="test">hello</div>
</body>
<script>
var res=document.querySelector('body .test');
var box=document.querySelectorAll('.test');
console.log(res)
console.log(box)
res.onclick=function () {
console.log('test被点击',this)
//获取内容
var msg=this.innerText;
//修改内容
console.log(msg)
this.innerHTML="<p>你好</p>"
//获取样式
var fontSize=getComputedStyle(this,null),fontSize;
console.log(fontSize);
//设置样式
this.style.backgroundColor="red"
//获取类名
var className=this.className;
console.log(className)
//设置类名
this.className=+"big";
}
box[1].onmouseover=function () {
console.log('box被悬浮')
}
</script>
第7章 JS流程控制
7.1If判断
<body>
<input class="inp" type="text">
<button class="btn">判断字符串是否为数字</button>
</body>
<script>
varinp=document.querySelector('.inp')
varbtn=document.querySelector('.btn')
btn.onclick=function () {
v=inp.value;
num=+v;
if (!isNaN(num)) {
alert('是数字')
} else{
alert('不是数字')
}
inp.value=""
}
</script>
7.2while循环：不知道循环次数的情况
<script>
num=0
while(num < 5){
console.log("nihao");
num=num+1;
}
</script>
7.3for 循环：明确知道循环的次数
<script>
for(vari=0; i < 5;i=i+1){
console.log(i);
}
</script>
7.4do while循环：在条件判断之前就需要执行一次循环体
<script>
count=0
do{
console.log(count);
count=count+1;
}while (count < 5)
</script>