微信上發(fā)的鏈接網(wǎng)站怎么做的新聞頭條今日新聞
一、js組成
JavaScript的組成
-
ECMAScript:
- 規(guī)定了js基礎(chǔ)語法核心知識。
- 比如：變量、分支語句、循環(huán)語句、對象等等
-
Web APIs :
- DOM 文檔對象模型， 定義了一套操作HTML文檔的API
- BOM 瀏覽器對象模型，定義了一套操作瀏覽器窗口的API
二、window對象
BOM (Browser Object Model ) 是瀏覽器對象模型
- window對象是一個全局對象，也可以說是JavaScript中的頂級對象
- 像document、alert()、console.log()這些都是window的屬性，基本BOM的屬性和方法都是window的
- 所有通過var定義在全局作用域中的變量、函數(shù)都會變成window對象的屬性和方法
- window對象下的屬性和方法調(diào)用的時候可以省略window
三、定時器-延遲函數(shù)
JavaScript 內(nèi)置的一個用來讓代碼延遲執(zhí)行的函數(shù)，叫 setTimeout
語法：
setTimeout(回調(diào)函數(shù), 延遲時間)
setTimeout 僅僅只執(zhí)行一次，所以可以理解為就是把一段代碼延遲執(zhí)行, 平時省略window
間歇函數(shù) setInterval : 每隔一段時間就執(zhí)行一次， , 平時省略window
清除延時函數(shù)：
clearTimeout(timerId)
注意點
- 延時函數(shù)需要等待,所以后面的代碼先執(zhí)行
- 返回值是一個正整數(shù)，表示定時器的編號
<body><script>// 定時器之延遲函數(shù)// 1. 開啟延遲函數(shù)let timerId = setTimeout(function () {console.log('我只執(zhí)行一次')}, 3000)// 1.1 延遲函數(shù)返回的還是一個正整數(shù)數(shù)字，表示延遲函數(shù)的編號console.log(timerId)// 1.2 延遲函數(shù)需要等待時間，所以下面的代碼優(yōu)先執(zhí)行// 2. 關(guān)閉延遲函數(shù)clearTimeout(timerId)</script>
</body>
四、location對象
location (地址) 它拆分并保存了 URL 地址的各個組成部分， 它是一個對象
| 屬性/方法 | 說明 |
|---|---|
| href | 屬性，獲取完整的 URL 地址，賦值時用于地址的跳轉(zhuǎn) |
| search | 屬性，獲取地址中攜帶的參數(shù)，符號 ？后面部分 |
| hash | 屬性，獲取地址中的啥希值，符號 # 后面部分 |
| reload() | 方法，用來刷新當前頁面，傳入?yún)?shù) true 時表示強制刷新 |
<body><form><input type="text" name="search"> <button>搜索</button></form><a href="#/music">音樂</a><a href="#/download">下載</a><button class="reload">刷新頁面</button><script>// location 對象 // 1. href屬性 （重點） 得到完整地址，賦值則是跳轉(zhuǎn)到新地址console.log(location.href)// location.href = 'http://www.itcast.cn'// 2. search屬性 得到 ? 后面的地址 console.log(location.search) // ?search=筆記本// 3. hash屬性 得到 # 后面的地址console.log(location.hash)// 4. reload 方法 刷新頁面const btn = document.querySelector('.reload')btn.addEventListener('click', function () {// location.reload() // 頁面刷新location.reload(true) // 強制頁面刷新 ctrl+f5})</script>
</body>
五、navigator對象
navigator是對象，該對象下記錄了瀏覽器自身的相關(guān)信息
常用屬性和方法：
- 通過 userAgent 檢測瀏覽器的版本及平臺
// 檢測 userAgent（瀏覽器信息）
(function () {const userAgent = navigator.userAgent// 驗證是否為Android或iPhoneconst android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)// 如果是Android或iPhone，則跳轉(zhuǎn)至移動站點if (android || iphone) {location.href = 'http://m.itcast.cn'}})();
六、histroy對象
history (歷史)是對象，主要管理歷史記錄， 該對象與瀏覽器地址欄的操作相對應(yīng)，如前進、后退等
使用場景
history對象一般在實際開發(fā)中比較少用，但是會在一些OA 辦公系統(tǒng)中見到。
常見方法：
<body><button class="back">←后退</button><button class="forward">前進→</button><script>// histroy對象// 1.前進const forward = document.querySelector('.forward')forward.addEventListener('click', function () {// history.forward() history.go(1)})// 2.后退const back = document.querySelector('.back')back.addEventListener('click', function () {// history.back()history.go(-1)})</script>
</body>七、本地存儲（今日重點）
本地存儲：將數(shù)據(jù)存儲在本地瀏覽器中
常見的使用場景：
https://todomvc.com/examples/vanilla-es6/ 頁面刷新數(shù)據(jù)不丟失
好處：
1、頁面刷新或者關(guān)閉不丟失數(shù)據(jù)，實現(xiàn)數(shù)據(jù)持久化
2、容量較大，sessionStorage和 localStorage 約 5M 左右
1.localStorage（重點）
作用: 數(shù)據(jù)可以長期保留在本地瀏覽器中，刷新頁面和關(guān)閉頁面，數(shù)據(jù)也不會丟失
**特性：**以鍵值對的形式存儲，并且存儲的是字符串， 省略了window
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>本地存儲-localstorage</title>
</head><body><script>// 本地存儲 - localstorage 存儲的是字符串 // 1. 存儲localStorage.setItem('age', 18)// 2. 獲取console.log(typeof localStorage.getItem('age'))// 3. 刪除localStorage.removeItem('age')</script>
</body></html>
2.sessionStorage（了解）
特性：
- 用法跟localStorage基本相同
- 區(qū)別是：當頁面瀏覽器被關(guān)閉時，存儲在 sessionStorage 的數(shù)據(jù)會被清除
存儲：sessionStorage.setItem(key,value)
獲取：sessionStorage.getItem(key)
刪除：sessionStorage.removeItem(key)
3.localStorage 存儲復(fù)雜數(shù)據(jù)類型
**問題：**本地只能存儲字符串,無法存儲復(fù)雜數(shù)據(jù)類型.
**解決：**需要將復(fù)雜數(shù)據(jù)類型轉(zhuǎn)換成 JSON字符串,在存儲到本地
**語法：**JSON.stringify(復(fù)雜數(shù)據(jù)類型)
JSON字符串：
- 首先是1個字符串
- 屬性名使用雙引號引起來，不能單引號
- 屬性值如果是字符串型也必須雙引號
<body><script>// 本地存儲復(fù)雜數(shù)據(jù)類型const goods = {name: '小米',price: 1999}// localStorage.setItem('goods', goods)// console.log(localStorage.getItem('goods'))// 1. 把對象轉(zhuǎn)換為JSON字符串 JSON.stringifylocalStorage.setItem('goods', JSON.stringify(goods))// console.log(typeof localStorage.getItem('goods'))</script>
</body>
**問題：**因為本地存儲里面取出來的是字符串，不是對象，無法直接使用
**解決： **把取出來的字符串轉(zhuǎn)換為對象
**語法：**JSON.parse(JSON字符串)
<body><script>// 本地存儲復(fù)雜數(shù)據(jù)類型const goods = {name: '小米',price: 1999}// localStorage.setItem('goods', goods)// console.log(localStorage.getItem('goods'))// 1. 把對象轉(zhuǎn)換為JSON字符串 JSON.stringifylocalStorage.setItem('goods', JSON.stringify(goods))// console.log(typeof localStorage.getItem('goods'))// 2. 把JSON字符串轉(zhuǎn)換為對象 JSON.parseconsole.log(JSON.parse(localStorage.getItem('goods')))</script>
</body>
八、綜合案例
1.數(shù)組map 方法
使用場景：
map 可以遍歷數(shù)組處理數(shù)據(jù)，并且返回新的數(shù)組
語法：
<body><script>const arr = ['red', 'blue', 'pink']// 1. 數(shù)組 map方法 處理數(shù)據(jù)并且 返回一個數(shù)組const newArr = arr.map(function (ele, index) {// console.log(ele) // 數(shù)組元素// console.log(index) // 索引號return ele + '顏色'})
console.log(newArr)
</script>
</body>
map 也稱為映射。映射是個術(shù)語，指兩個元素的集之間元素相互“對應(yīng)”的關(guān)系。
map重點在于有返回值，forEach沒有返回值（undefined）
2.數(shù)組join方法
**作用：**join() 方法用于把數(shù)組中的所有元素轉(zhuǎn)換一個字符串
語法：
<body><script>const arr = ['red', 'blue', 'pink']// 1. 數(shù)組 map方法 處理數(shù)據(jù)并且 返回一個數(shù)組const newArr = arr.map(function (ele, index) {// console.log(ele) // 數(shù)組元素// console.log(index) // 索引號return ele + '顏色'})console.log(newArr)// 2. 數(shù)組join方法 把數(shù)組轉(zhuǎn)換為字符串// 小括號為空則逗號分割console.log(newArr.join()) // red顏色,blue顏色,pink顏色// 小括號是空字符串，則元素之間沒有分隔符console.log(newArr.join('')) //red顏色blue顏色pink顏色console.log(newArr.join('|')) //red顏色|blue顏色|pink顏色</script>
</body>