一：變量的作用域
<!--
1.全局變量：
聲明在函數(shù)外部的變量（從聲明開始到文件結(jié)束）
注意：當(dāng)前文件的其他script標(biāo)簽也可以使用。
直接聲明在函數(shù)內(nèi)的變量（不加var ,也是全局變量）
-->
<script type="text/javascript">
a10 = 10
var a20 = 20
function func1(){
console.log(a10)
console.log(a20)
}
func1()
//2.局部變量
// 通過var關(guān)鍵字聲明在函數(shù)里面的變量是局部變量（聲明開始到函數(shù)結(jié)束可以使用）
function func2(){
//b10是全局變量
b10 = 20
var b20 = 200
}
func2()
console.log(b10)
//console.log(b20) 這個是局部變量，只能在函數(shù)里用
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
二：字符串
<script type="text/javascript">
//1.字符串運(yùn)算
//a。加法運(yùn)算（不支持乘法）:做字符串拼接操作
//注意：js支持字符串和其他數(shù)據(jù)相加
str1 = "asd"
str2 = 'qwe'
console.log(str1+str2) // asdqwe
console.log(str1 + 100) //asd100
console.log(str1 + [1,2,3]) //asd1,2,3
//b.比較運(yùn)算：> , < , >= ,<= , == , === ,!== , !===
//比較相等：
100 == '100' //true
100 === '100' //false 要比較數(shù)據(jù)類型是否一樣
//比較大?。汉蚿ython字符串比較大小的方式一樣
//從第一個字符開始比,比的是編碼值.
//字符串長度
//字符串.length
console.log(str1.length)
console.log()
//2.相關(guān)方法
//創(chuàng)建字符串對象
str3 = new String('asd') //構(gòu)造方法
console.log(str3)
newstr = str3.big() //產(chǎn)生一個big標(biāo)簽，標(biāo)簽內(nèi)容是字符串的值
console.log(str3, newstr)
// 字符串.charAt（下標(biāo)）
//獲取指定下標(biāo)對應(yīng)的字符，相當(dāng)于：字符串[下標(biāo)]
//下標(biāo)越界返回undefined
console.log(str3.charAt(1)) //s
// 字符串.charCodeAt(下標(biāo))
//獲取指定下標(biāo)對應(yīng)的字符的編碼（js中的字符采用的也是unicode編碼）
//字符串.concat(數(shù)據(jù)1，數(shù)據(jù)2，……)
//將字符串和多個數(shù)據(jù)依次連接，產(chǎn)生一個新的字符串。（相當(dāng)于+的功能）
str4 = 'asd'
console.log(str4.concat(123,'asd')) //asd123asd
//字符串1.endsWith(字符串2)
//判斷字符串1是否以字符串2結(jié)尾
//字符串1.indexOf(字符串2) 字符串2可以有多個字符
//獲取字符串2在字符串1中第一次出現(xiàn)的下標(biāo)
// lastIndexOf()
//獲取字符串2在字符串1中最后一次出現(xiàn)的下標(biāo)
//字符串1.match (正則表達(dá)式)
//相當(dāng)于python中re模塊中的match，匹配成功返回的
//注意：js中正則寫在兩個//之間
re = /\d{3}$/ //
console.log('123'.match(re))
//字符串.repeat(數(shù)字)：相當(dāng)于python中的乘法
//指定的字符串重復(fù)出現(xiàn)指定的次數(shù)，產(chǎn)生一個新的字符串
//字符串1.replace(正則表達(dá)式，字符串2)
//在字符串1中查找第一個滿足正則表達(dá)式的子串，替換成字符串2
console.log('asdfasdf12asfqwe23asdfw'.replace(/\d+/, 'A'))
//字符串.slice（開始下標(biāo)，結(jié)束下標(biāo)）
//從開始下標(biāo)獲取到結(jié)束下標(biāo)前為止，步長是1
//注意：這兒的下標(biāo)可以是負(fù)數(shù)，代表倒數(shù)第幾個
str5 = 'hello'
console.log('hello'. slice(0,2)) //he
console.log(str5. slice(1,-2)) //el
//字符串1.split(字符串2)
//將字符串1按照字符2進(jìn)行切割，返回一個數(shù)組
console.log('hello'.split('e'))
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
三：數(shù)組
<script type="text/javascript">
//1.加法運(yùn)算：兩個數(shù)組相加，實質(zhì)是將數(shù)組轉(zhuǎn)換成字符串然后拼接
console.log([12,3,'123']+[23,54]) //12,3,12323,54
console.log(String[1,2,3])
//2.比較運(yùn)算:
//== ， === 判斷相等是判斷地址是否相等。相當(dāng)于python中的is
console.log([1,2]==[1,2]) //false
//3.數(shù)組長度:length
console.log('qwe'.length)
//二：元素的增刪改查
//1.查：獲取元素
//獲取單個元素 數(shù)組[下標(biāo)]
//注意：負(fù)數(shù)下標(biāo)沒有意義。下標(biāo)可以越界，返回undefined
arr1 = [12,34,54,65]
console.log(arr1[1])
// 切片
//數(shù)組.slice(開始下標(biāo)，結(jié)束下標(biāo))
//注意：結(jié)束下標(biāo)取不到，下標(biāo)可以是負(fù)數(shù)，開始下標(biāo)要在結(jié)束下標(biāo)的前面
console.log(arr1.slice(1,3))
console.log(arr1.slice(3,0)) //[]
console.log(arr1.slice(1,-2))
//遍歷
for(index in arr1){
console.log(arr1[index])
}
//增：添加元素
//數(shù)組.push(元素) - 在指定的數(shù)組的最后，添加一個元素。
arr1.push('hehe')
console.log(arr1)
//刪：刪除元素
//數(shù)組.pop() - 刪除最后一個元素（只能刪除最后一個元素）
arr1.pop()
console.log(arr1)
//數(shù)組.splice(下標(biāo)，個數(shù)) - 從指定下標(biāo)開始，刪除指定個數(shù)的元素
arr1.splice(2,1) //第一個數(shù)字是下標(biāo)，第二個數(shù)字是刪除的個數(shù)。
//改：修改元素
//數(shù)組[下標(biāo)] = 新值 - 修改指定下標(biāo)對應(yīng)的值
arr1[0]='花好月圓'
console.log(arr1)
//三.相關(guān)方法：
//數(shù)組..reverse() 倒序
arr1 = [12,34,54,65]
arr1.reverse()
console.log(arr1)
//sort() 從小到大排序
arr1.sort()
console.log(arr1)
//數(shù)組.sort(函數(shù)) - 按指定規(guī)則對數(shù)組中的元素進(jìn)行排序
//函數(shù)的要求： 兩個參數(shù)（代表的是數(shù)組中的兩個元素），一個返回值（兩個元素屬性的差）；
students = [
{'name':'小明','score':90,'age':24},
{'name':'小fg ','score':55,'age':15},
{'name':'小trt','score':66,'age':22},
]
//按年齡從小到大排序
function ageCom(item1,item2){
return item1['age'] - item2['age']
}
students.sort(ageCom)
console.log(students)
//年齡從大到小排序
students.sort(function(a,b){
return b['score'] - a['score']
})
console.log(students)
//return后面 寫 點key ,和 ['key'] 是一樣的
//數(shù)組.join(字符串)
//將指定的字符串插入到數(shù)組的第個元素之間，產(chǎn)生一個新的字符串
nums = [12,14,5,77]
newData = nums.join('asd')
console.log(newData)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
四：對象
<script type="text/javascript">
//1.對象字面量
//用大括號括起來，里面是多個屬性，屬性名和屬性值用冒號連接，多個屬性之間用逗號隔開
//注意：1.對象字面量需要保存， 2.屬性名可以加引號或不加引號（沒有區(qū)別）
obj1 = {
'name':'楚留香',
'age':23,
sex:'男'
}
console.log(obj1)
//2.獲取對象屬性對應(yīng)的值
//對象[屬性名] 屬性名要有引號
obj1['sex']
//對象.屬性 屬性不能有引號
obj1.name
//3.增/改：添加/修改屬性（屬性存在修改，不存在添加）
//對象.屬性 = 值
//對象[屬性名] = 值
//屬性存在就是修改，不存在即為添加
obj1.height = 111
console.log(obj1)
//4.構(gòu)造方法 - 創(chuàng)建對象的方法
/* 語法：
* function 類名（參數(shù)列表）｛
* this.屬性名 = 屬性值
* 對象屬性和對象方法
* ｝
* 說明：
* 對象屬性 ： this.屬性名 = 屬性值
* 對象方法 ： this.方法名 = 匿名函數(shù)
* 類名首字母大寫
*
*/
function Person(name='張三',age=14,sex='男'){
//這兒的this相當(dāng)于python中的self
//對象屬性
this.name = name
this.age = age
this.sex = sex
//對象方法
this.eat = function(food){
console.log(this.name + '吃' + food)
}
}
//5.創(chuàng)建對象
// 對象 = new 構(gòu)造方法（）
//創(chuàng)建對象
p1 = new Person()
console.log(p1)
//獲取對象屬性
console.log(p1.name)
//調(diào)用對象方法
p1.eat('包子')
p2 = new Person('香香',18,'女')
console.log(p2)
//注意：所有js中聲明全局變量實質(zhì)都是添加給window對象的屬性
a = 10
console.log(window.a)
//6.添加類的全局的屬性
//類名.prototype.屬性名 = 屬性值 - 給指定的類的所有對象添加屬性
Person.prototype.height = 175 //添加全局的屬性
Person.prototype.run = function(){
console.log(this.name + '跑步')
}
p3 = new Person('花紅',16,'女')
p3.height = 155
console.log(p3.height)
p3.run()
//練習(xí)：給數(shù)組添加方法，統(tǒng)計數(shù)組中指定元素的個數(shù)
Array.prototype.ytCount =function(item){
num = 0
for(i in this){
if (this[i] = item){
num++
}
}
return num
}
console.log([1,2,3,4,5,2,2,4,5].ytCount(1))
//練習(xí)1.聲明一個創(chuàng)建學(xué)生的構(gòu)造方法，有屬性姓名、年齡、成績、學(xué)號，
//要求創(chuàng)建學(xué)生對象的姓名必須賦值，年齡可以賦值也可以不賦值，成績學(xué)號不能賦值。
function Students(name,age=16){
this.name = name
this.age = age
this.cji = 66
this.stunum =0012
}
p1 = new Students('花無缺')
console.log(p1)
//練習(xí)2：給String添加方法，統(tǒng)計字符串中字母字符的個數(shù)
String.prototype.letternNum = function(){
num1 = 0
while(num1<this.length){
if('a'<=this[num1] && this[num1]<='z' || 'A'<=this[num1] && this[num1]<='Z'){
num1++
}
}
return num1
}
console.log('asd'.letternNum())
//7.系統(tǒng)的對象和類
//document對象
//window對象
//Elenent類型的對象
//Date類型的對象 (時間)
date1 = new Date()
console.log(date1)
//年 月 日 時 分 秒 星期
year = date1.getFullYear()
month = date1.getMonth() //月份成0開始，要加1
day = date1.getDate()
hours = date1.getHours()
min = date1.getMinutes()
seconds = date1.getSeconds()
week = date1.getDay()
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
五：DOM操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1">我是段落</p>
<a href="" class="c1">我是a標(biāo)簽</a>
<h1 class="c1">我是標(biāo)題1</h1>
<input type="" name="userName" id="userName" value="" />
<div id="div1">
<p>我是段落2</p>
<a href="">新浪</a>
<h2>我是標(biāo)題2</h2>
</div>
<script type="text/javascript">
//按鈕點擊后會做的事情
function action(){
console.log('點擊!')
}
</script>
<button onclick="action()"></button>
</body>
</html>
<script type="text/javascript">
//1.DOM(文檔對象模型: document object mode)
//1)document對象: 指的是指向整個網(wǎng)頁內(nèi)容的一個對象
//2)節(jié)點: Element類型對象,指向的是網(wǎng)頁中的標(biāo)簽
//2.獲取節(jié)點
//1)通過id獲取節(jié)點: getElementById(id值) - 返回節(jié)點對象(實質(zhì)就是指向指定標(biāo)簽的對象)
p1Node = document.getElementById('p1')
console.log(p1Node)
//innerText是標(biāo)簽文本內(nèi)容
p1Node.innerText = 'hello js'
//2)通過class獲取節(jié)點: getElementsByClassName(class值) - 返回節(jié)點數(shù)組
c1Nodes = document.getElementsByClassName('c1')
c1Nodes[0].innerText = '百度一下'
console.log(c1Nodes)
//注意: 遍歷的時候不要用for in
for(i=0;i<c1Nodes.length;i++){
c1Node = c1Nodes[i]
//修改樣式中的文字顏色
c1Node.style.color = 'red'
}
//3) 通過標(biāo)簽名獲取節(jié)點: getElementsByTagName(標(biāo)簽名)
h1Nodes = document.getElementsByTagName('h1')
console.log(h1Nodes)
//4) 通過name屬性值獲取節(jié)點:getElementsByName(name值) （了解）
nameNodes = document.getElementsByName('userName')
console.log(nameNodes)
//5）獲取子節(jié)點
//節(jié)點對象.children - 獲取指定節(jié)點中所有的子節(jié)點
div1Node = document.getElementById('div1')
div1Children = div1Node.children
console.log(div1Children)
//獲取第一個子節(jié)點
//節(jié)點對象.firstElementChild
firstNode = div1Node.firstElementChild
console.log(firstNode)
//獲取最后一個子節(jié)點
//節(jié)點對象.lastElementChild
lastNode = div1Node.lastElementChild
console.log(lastNode)
//6)獲取父節(jié)點
bodyNode = div1Node.parentElement
console.log(bodyNode)
//3.創(chuàng)建和添加節(jié)點
//1)創(chuàng)建節(jié)點
//document.createElement(標(biāo)簽名)
//創(chuàng)建一個img標(biāo)簽
imgNode = document.createElement('img')
imgNode.src = 'img/luffy.jpg'
//2)添加節(jié)點
//節(jié)點1.appendChild(節(jié)點2) - 在節(jié)點1的最后添加子標(biāo)簽節(jié)點2
bodyNode.appendChild(imgNode)
//節(jié)點1.insertBefore(新的節(jié)點, 節(jié)點2) - 在節(jié)點1中的節(jié)點2的前面添加一個新的節(jié)點
bodyNode.insertBefore(imgNode, bodyNode.firstElementChild)
bodyNode.insertBefore(imgNode, c1Nodes[0])
//注意：一個節(jié)點不管添加幾次，只有最后一次添加有效(因為節(jié)點只有一個)
//4.拷貝/復(fù)制節(jié)點
//節(jié)點.cloneNode()
newImgNode = imgNode.cloneNode()
newImgNode.src = 'img/aaa.ico'
div1Node.appendChild(newImgNode)
//5.刪除節(jié)點
p1Node = document.getElementById('p1')
//節(jié)點.remove() - 刪除指定的節(jié)點
p1Node.remove()
//節(jié)點1.removeChild(節(jié)點2) - 刪除節(jié)點1中的節(jié)點2
// div1Node.removeChild(div1Node.lastElementChild)
// div1Node.removeChild(div1Node.firstElementChild)
//6.替換節(jié)點
//節(jié)點1.replaceChild(新節(jié)點, 舊節(jié)點) - 用新節(jié)點替換節(jié)點1中的舊節(jié)點
bodyNode.replaceChild(imgNode.cloneNode(), c1Nodes[1])
</script>
