2018-08-21day-26

web方向：php、java、python，服務(wù)端的語言
客戶端===服務(wù)端
0、js引入方式和打印方式
四種引入方式
（1）<a href="javascript:alert('集合，準備團戰(zhàn)')">百度一下</a>
（2）<div style="width:200px; height:200px; background-color:red" onclick="alert('等等我，馬上到')"></div>
（3）在html頁面的任何位置加入 <script>js代碼</script>
（4）在html頁面的任何位置加入 <script src='js.js'></script>
三種打印方式
（1）alert彈窗打印
（2）console.log('打印的內(nèi)容') 結(jié)合瀏覽器控制臺查看
（3）document.write('打印的內(nèi)容') 往html文檔中寫內(nèi)容

1、函數(shù)

全局變量和局部變量
全局變量：直接定義的變量，全局有效
加var和不加var都一樣
局部變量：函數(shù)體內(nèi)定義的變量，只在函數(shù)體內(nèi)有效
如果局部前面有var，該變量真是一個局部變量
如果局部前面沒有var，該變量其實是一個全局變量，在函數(shù)調(diào)用之后，該變量即可隨便使用
上面知道即可，一般情況定義變量都加var
如果局部和全局同名，優(yōu)先使用局部變量
匿名函數(shù)
沒有函數(shù)名的函數(shù)，需要將其賦給一個變量，然后變量按照函數(shù)的形式進行調(diào)用即可
封閉空間
將匿名函數(shù)用小括號括起來，然后在后面再加一個小括號調(diào)用這個匿名函數(shù)，稱之為封閉空間

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
    // var a = '李白'
    // b = '杜甫'
    // // alert(b)
    // function demo() {
    //     c = '白居易'
    //     alert(c)
    //     // alert(b)
    // }
    // demo()
    // alert(c)

    var m = 100
    var n = 200

    function demo() {
        // var m
        // var n
        var m = 300
        var n = 400
        console.log(m, n)
    }

    demo()
    console.log(m, n)
</script>

2、數(shù)組

定義：array
遍歷:
數(shù)組定義通過索引進行訪問，索引從0開始
但是數(shù)組也可以通過屬性值追加屬性和值，但是一般不這么使用
遍歷的時候，通過for進行遍歷只能遍歷索引數(shù)組，通過forin進行遍歷，既可以遍歷索引，又可以遍歷屬性
字符串遍歷
通過索引進行遍歷，索引從0開始

<script>
var arr1 = [1, '周杰倫', 2, '王力宏']
arr1['name'] = '狗蛋'
arr1['height'] = 180
// var arr = []
// var arr2 = new Array()

// 通過下標進行訪問，下標從0開始
// alert(arr1[1])
// alert(arr1)
// alert(arr1['name'])
// console.log(arr1[4])
// 遍歷數(shù)組
// for (var i = 0; i < arr1.length; i++) {
//     console.log(arr1[i])
// }

// for (var i in arr1) {
//     console.log(arr1[i])
// }

string1 = '12345,上山打老虎'
for (var i = 0; i < string1.length; i++) {
    console.log(string1[i])
}
</script>

3、對象

三種方式：
（1）構(gòu)造方法
（2）通過官方創(chuàng)建
（3）直接寫一個對象即可
obj = {name: '王寶強', age: '36', wife: '馬蓉蓉'}
屬性的引號可以添加也可以不添加，一般就不加了
使用時候
obj['name'] 或者 obj.name
在js中json格式字符串和js對象相互轉(zhuǎn)化的函數(shù)
將js對象轉(zhuǎn)化為json字符串
string = JSON.stringify(obj)
json字符串轉(zhuǎn)化為js對象
obj = JSON.parse(string)
obj = eval('(' + string + ')')

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>


function Person(name, age, height, weight) {
    this.name = name
    this.age = age
    this.height = height
    this.weight = weight
    this.say = function () {
        console.log('我的名字叫做' + this.name + '==我的年齡為' + this.age + '==我的身高為' + this.height + '==我的體重為' + this.weight)
    }
}
obj = new Person('黃曉明', 40, 150, 200)
obj.say()


// 創(chuàng)建對象方式2
// obj = new Object()
// obj.name = '黃曉明'
// obj.age = 40
// obj.height = 150
// obj.say = function () {
//     alert('haha')
// }
// console.log(obj)

// 創(chuàng)建對象方式3
// json格式，前后端交互使用的格式，json格式在js里面原生支持
obj = {name: '王寶強', age: '36', wife: '馬蓉蓉'}

// 沒有這種寫一個class，然后里面寫屬性寫方法這種特點了
// console.log(obj.name)
// console.log(obj['name'])
// 將js里面的對象轉(zhuǎn)化為json格式字符串
string = JSON.stringify(obj)
// console.log(typeof(string))
// js如何將json格式字符串轉(zhuǎn)化為js對象
// ming = JSON.parse(string)
ming = eval('(' + string + ')')

console.log(ming)
</script>

4、常用對象和函數(shù)

parseInt
將字符串轉(zhuǎn)化為整型，必須以數(shù)字開頭，只要碰到非數(shù)字，轉(zhuǎn)化結(jié)束
如果以非數(shù)字開頭，轉(zhuǎn)化為NaN, 兩個NaN不能判斷是否相等，判斷是不是NaN可以使用 isNaN函數(shù) 判斷是不是NaN，是返回true，不是返回false
parseFloat
將字符串轉(zhuǎn)化為浮點,必須以數(shù)字開頭，碰到非數(shù)字立馬結(jié)束，小數(shù)點不算
如果以非數(shù)字開頭，轉(zhuǎn)為NaN
Math對象
abs ： 絕對值函數(shù)
ceil : 向上取整
floor : 向下取整
max : 取最大的值,傳遞過個參數(shù)，找到最大值
min : 傳遞多個參數(shù)，找到最小值
pow : 求冪
random : 隨機值 只能隨機0-1之間的小數(shù)，如果需要隨機5-10之間的數(shù)，自己實現(xiàn)
round ： 四舍五入函數(shù)
字符串常用函數(shù)
indexOf ： 字符串查找函數(shù)，返回查找到的字符串的第一個字母的下標，如果找不到，返回-1 類似于python里面的find
lastIndexOf ： 字符串查找函數(shù)，找最后一次出現(xiàn)的位置，找不到返回-1，類似于python里面的rfind
substr : 字符串的提取 substr(start, length) 從start開始提取length個字符
replace : 字符串替換,只能替換第一個 string.replace(old, new)
toLowerCase ： 全部轉(zhuǎn)化為小寫
toUpperCase : 全部轉(zhuǎn)化為大寫
fromCharCode : 所有的大寫 65-90 所有的小寫 97-122 數(shù)字 48-57
split : 按照特定的字符進行切割
數(shù)組常用函數(shù)
push : 給數(shù)組追加一個元素
pop : 彈出最后一個元素,只能這么做
shift : 彈出數(shù)組中第一個元素
unshift : 數(shù)組最前面添加一個元素
join : 字符串拼接 arr.join('*') 將列表里面所有的字符串按照 * 拼接
reverse : 將數(shù)組逆序
slice : slice(start, end) [start, end) 左閉右開
sort : 排序,如果都是數(shù)字，默認按照數(shù)字的ascii進行排序，如果想按照數(shù)字大小排序
arr.sort(function (a, b) {return a > b}) 從小到大排序
日期對象常用函數(shù)
getDate : 獲得日期
getDay ： 獲得星期幾 0-6 0表示周天
getMonth ： 0-11 當前月份減一
getFullYear : 得到年份
getHours : 得到小時 24小時進制
getMinutes : 得到分鐘數(shù)
getSeconds : 得到秒數(shù)
getTime : 時間戳，毫秒數(shù)

每一個都有對應(yīng)的設(shè)置方法，自己看看
創(chuàng)建日期對象的方式
// 創(chuàng)建當前時間的時間對象
d = new Date()
// 根據(jù)指定的時間戳創(chuàng)建時間對象
d = new Date(1534750144520)
// 根據(jù)時間字符串創(chuàng)建時間對象
d = new Date('2018/8/20 15:29:04')
// 根據(jù)年月日時分秒值創(chuàng)建對象
d = new Date(2018, 7, 20, 15, 29, 45）

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
// 將字符串轉(zhuǎn)化為整型

var string = 'a100px'
var string2 = 'b200'
var num1 = parseInt(string)
var num2 = parseInt(string2)
if (num1 == NaN) {
    console.log('相等')
} else {
    console.log('不相等')
} 
var num = parseInt(string) + 100
console.log(parseInt(string))
var num = parseInt(string) + 100
// var string = num + 'px'

// var string = '3..14.15lalala'
// console.log(parseFloat(string))
// console.log(parseInt(string))

// console.log(Math.abs(-200))
// console.log(Math.ceil(3.14))
// console.log(Math.floor(3.14))
// console.log(Math.max(1, 200, 900, 56))
// console.log(Math.pow(2, 3))
// console.log(Math.random())

// console.log(Math.round(3.54))

// string = 'i love you BABY, you love me'

// console.log(string.split(' '))

// console.log(string.charAt(0))
// console.log(string[0])

// console.log(string.indexOf('love'))
// console.log(string.lastIndexOf('love'))
// console.log(string.substr(2, 4))
// console.log(string.replace('love', 'hate'))

// console.log(string.toLowerCase())

// console.log(String.fromCharCode(97))

var arr = ['柳巖', '高圓圓', '韓紅', '趙麗穎', '楊冪']

console.log(arr.slice(1, 3))
console.log(arr.reverse())
console.log(arr.join('*'))
arr.shift()
arr.unshift('趙麗穎')


arr.push('李宇春')

console.log(arr)
console.log(arr.pop(2))
console.log(arr)

// var arr = ['baby', 'curry', 'anglebaby', 'love', 'taikongyi', 'anglebaby']

// var arr = [100, 15, 200, 29, 300, 56]

// console.log(arr.sort(function (a, b) {
//     return a > b
// }))

// 創(chuàng)建當前時間的時間對象
d = new Date()
// 根據(jù)指定的時間戳創(chuàng)建時間對象
d = new Date(1534750144520)
// 根據(jù)時間字符串創(chuàng)建時間對象
d = new Date('2018/8/20 15:29:04')
// 根據(jù)年月日時分秒值創(chuàng)建對象
d = new Date(2018, 7, 20, 15, 29, 4)
// console.log(d)
// console.log(d.getDate())
// console.log(d.getDay())
// console.log(d.getMonth())
// console.log(d.getFullYear())
// console.log(d.getHours())
// console.log(d.getMinutes())
// console.log(d.getSeconds())
// console.log(d.getTime())
</script>

<!-- lt = ['hello', 'baby']

string = '*'.join(lt) -->

5、js簡單演示

背景切換
核心：頁碼中有一個標簽，如果想給標簽添加點擊事件，只需要寫onclick，如果想添加其它的，添加對應(yīng)事件即可。在事件的后面就要寫代碼，通過js的DOM操作找到指定節(jié)點，將節(jié)點的屬性修改即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>測試</title>
    <link id="lk" rel="stylesheet" href="yellow.css">
</head>
<body>
    <button onclick="document.getElementById('lk').href = 'red.css'">點我變成紅色</button>
    <button onclick="document.getElementById('lk').href = 'yellow.css'">點我變成黃色</button>
</body>
</html>

6、獲取對象

DOM操作，document object mxxx, 文檔操作，document就是整個文檔對象
document.getElementById 得到指定對象
document.getElementsByClassName 得到對象集合，符合類名要求的都可以得到
document.getElementsByName
document.getElementsByTagName 得到對象集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>測試</title>
</head>
<body>
    <div id="libai">日照香爐生紫煙,遙看瀑布掛前川</div>
    <div class="dufu">會當凌絕頂,一覽眾山小</div>
    <div class="dufu">安得廣廈千萬間,大庇天下寒士俱歡顏</div>
</body>
</html>
<script>
    // div1 = document.getElementById('libai')
    // console.log(typeof(div1))
    // div2 = document.getElementsByClassName('dufu')
    div3 = document.getElementsByTagName('div')
    console.log(div3[2])
</script>

7、常用事件

onmouseover ：鼠標移動上去觸發(fā)
onmouseout : 鼠標離開的時候觸發(fā)
onmouseup : 鼠標按下松開的時候觸發(fā)
onmousedown : 鼠標按下的時候觸發(fā)
onmousemove : 鼠標移動的時候觸發(fā)
onclick : 點擊的時候觸發(fā)
ondblclick ： 雙擊的時候觸發(fā)
如下兩個用在input框中
onblur : 失去焦點
onfocus : 獲取焦點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div style="width:200px; height:200px; background-color:red" onmouseover="alert('明天我要嫁給你啦')"></div>
    <div style="width:200px; height:200px; background-color:green" onmouseout="alert('后天我們要結(jié)婚')"></div>
    <div style="width:200px; height:200px; background-color:blue" onmouseup="alert('后天我們要結(jié)婚')"></div>
    <div style="width:200px; height:200px; background-color:gray" onmousedown="alert('后天我們要結(jié)婚')"></div>
    <div style="width:200px; height:200px; background-color:pink" onmousemove="console.log('后天我們要結(jié)婚')"></div>
    <div style="width:200px; height:200px; background-color:purple" onclick="alert('后天我們要結(jié)婚')"></div>
    <div style="width:200px; height:200px; background-color:orange" ondblclick="alert('后天我們要結(jié)婚')"></div>
    <input type="text" onblur="console.log('我失去了焦點，生活沒有意義了')" onfocus="console.log('得到焦點，得到了全世界')"/>
</body>
</html>

8、獲取、設(shè)置屬性和內(nèi)容

獲取屬性
odiv.id
odiv.className
odiv.style.width
odiv.style.height
odiv.style.backgroundColor
【注】在css中帶杠的屬性，到j(luò)s中都修改為小駝峰即可
獲取內(nèi)容
odiv.innerHTML 獲取標簽里面的所有文本內(nèi)容，帶標簽
odiv.innerText 獲取標簽里面的純文本內(nèi)容
點和中括號區(qū)別
能使用點的地方肯定能使用中括號，能使用中括號的地方不一定能使用點
點后面只能跟屬性名
中括號里面可以寫屬性名字符串，也可以寫變量
顯示隱藏圖片
this使用
切換背景色
表單內(nèi)容控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="bai" class="li" name='wang' style="width:200px; height:200px; background-color:gold"><b>李白乘舟將欲行,忽聞岸上踏歌聲,桃花潭水深千尺,不及汪倫送我情</b></div>
    <a href="www.baidu.com" id="lala"></a>
</body>
</html>
<script>
var odiv = document.getElementById('bai')
var oa = document.getElementById('lala')
// console.log(odiv.style.height)
// console.log(odiv.style.backgroundColor)

// console.log(odiv.innerHTML)
// console.log(odiv.innerText)
// console.log(odiv.style.width)
// console.log(odiv.style['width'])
// console.log(odiv['style']['width'])

obj = {name: '王寶強', age: 30}
console.log(obj.name, obj['name'])
for (var i in obj) {
    console.log(obj[i])
}
</script>

9、onload函數(shù)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容