第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>