當前位置：首頁 > news >正文

微信上發(fā)的鏈接網站怎么做的新聞頭條今日新聞

news 2025/7/7 9:48:35

微信上發(fā)的鏈接網站怎么做的,新聞頭條今日新聞,教育微網站建設,蒙城做網站的公司一、js組成 JavaScript的組成 ECMAScript: 規(guī)定了js基礎語法核心知識。比如：變量、分支語句、循環(huán)語句、對象等等 Web APIs : DOM 文檔對象模型， 定義了一套操作HTML文檔的APIBOM 瀏覽器對象模型，定義了一套操作瀏覽器窗口的API 二、windo…

一、js組成

JavaScript的組成

ECMAScript:
- 規(guī)定了js基礎語法核心知識。
- 比如：變量、分支語句、循環(huán)語句、對象等等
Web APIs :
- DOM 文檔對象模型，定義了一套操作HTML文檔的API
- BOM 瀏覽器對象模型，定義了一套操作瀏覽器窗口的API

在這里插入圖片描述

二、window對象

BOM (Browser Object Model ) 是瀏覽器對象模型

window對象是一個全局對象，也可以說是JavaScript中的頂級對象
像document、alert()、console.log()這些都是window的屬性，基本BOM的屬性和方法都是window的
所有通過var定義在全局作用域中的變量、函數都會變成window對象的屬性和方法
window對象下的屬性和方法調用的時候可以省略window

在這里插入圖片描述

三、定時器-延遲函數

JavaScript 內置的一個用來讓代碼延遲執(zhí)行的函數，叫 setTimeout

語法：

setTimeout(回調函數, 延遲時間)

setTimeout 僅僅只執(zhí)行一次，所以可以理解為就是把一段代碼延遲執(zhí)行, 平時省略window

間歇函數 setInterval : 每隔一段時間就執(zhí)行一次， , 平時省略window

清除延時函數：

clearTimeout(timerId)

注意點

延時函數需要等待,所以后面的代碼先執(zhí)行
返回值是一個正整數，表示定時器的編號

<body><script>// 定時器之延遲函數// 1. 開啟延遲函數let timerId = setTimeout(function () {console.log('我只執(zhí)行一次')}, 3000)// 1.1 延遲函數返回的還是一個正整數數字，表示延遲函數的編號console.log(timerId)// 1.2 延遲函數需要等待時間，所以下面的代碼優(yōu)先執(zhí)行// 2. 關閉延遲函數clearTimeout(timerId)</script>
</body>

四、location對象

location (地址) 它拆分并保存了 URL 地址的各個組成部分，它是一個對象

屬性/方法	說明
href	屬性，獲取完整的 URL 地址，賦值時用于地址的跳轉
search	屬性，獲取地址中攜帶的參數，符號？后面部分
hash	屬性，獲取地址中的啥希值，符號 # 后面部分
reload()	方法，用來刷新當前頁面，傳入參數 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屬性 （重點） 得到完整地址，賦值則是跳轉到新地址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是對象，該對象下記錄了瀏覽器自身的相關信息

常用屬性和方法：

通過 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，則跳轉至移動站點if (android || iphone) {location.href = 'http://m.itcast.cn'}})();

六、histroy對象

history (歷史)是對象，主要管理歷史記錄，該對象與瀏覽器地址欄的操作相對應，如前進、后退等

使用場景

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>

七、本地存儲（今日重點）

本地存儲：將數據存儲在本地瀏覽器中

常見的使用場景：

https://todomvc.com/examples/vanilla-es6/ 頁面刷新數據不丟失

好處：

1、頁面刷新或者關閉不丟失數據，實現(xiàn)數據持久化

2、容量較大，sessionStorage和 localStorage 約 5M 左右

1.localStorage（重點）

作用: 數據可以長期保留在本地瀏覽器中，刷新頁面和關閉頁面，數據也不會丟失

**特性：**以鍵值對的形式存儲，并且存儲的是字符串，省略了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ū)別是：當頁面瀏覽器被關閉時，存儲在 sessionStorage 的數據會被清除

存儲：sessionStorage.setItem(key,value)

獲取：sessionStorage.getItem(key)

刪除：sessionStorage.removeItem(key)

3.localStorage 存儲復雜數據類型

**問題：**本地只能存儲字符串,無法存儲復雜數據類型.

**解決：**需要將復雜數據類型轉換成 JSON字符串,在存儲到本地

**語法：**JSON.stringify(復雜數據類型)

JSON字符串：

首先是1個字符串
屬性名使用雙引號引起來，不能單引號
屬性值如果是字符串型也必須雙引號

<body><script>// 本地存儲復雜數據類型const goods = {name: '小米',price: 1999}// localStorage.setItem('goods', goods)// console.log(localStorage.getItem('goods'))// 1. 把對象轉換為JSON字符串  JSON.stringifylocalStorage.setItem('goods', JSON.stringify(goods))// console.log(typeof localStorage.getItem('goods'))</script>
</body>

**問題：**因為本地存儲里面取出來的是字符串，不是對象，無法直接使用

**解決： **把取出來的字符串轉換為對象

**語法：**JSON.parse(JSON字符串)

<body><script>// 本地存儲復雜數據類型const goods = {name: '小米',price: 1999}// localStorage.setItem('goods', goods)// console.log(localStorage.getItem('goods'))// 1. 把對象轉換為JSON字符串  JSON.stringifylocalStorage.setItem('goods', JSON.stringify(goods))// console.log(typeof localStorage.getItem('goods'))// 2. 把JSON字符串轉換為對象  JSON.parseconsole.log(JSON.parse(localStorage.getItem('goods')))</script>
</body>

八、綜合案例

1.數組map 方法

使用場景：

map 可以遍歷數組處理數據，并且返回新的數組

語法：

<body><script>const arr = ['red', 'blue', 'pink']// 1. 數組 map方法 處理數據并且 返回一個數組const newArr = arr.map(function (ele, index) {// console.log(ele)  // 數組元素// console.log(index) // 索引號return ele + '顏色'})
console.log(newArr)
</script>
</body>

map 也稱為映射。映射是個術語，指兩個元素的集之間元素相互“對應”的關系。

map重點在于有返回值，forEach沒有返回值（undefined）

2.數組join方法

**作用：**join() 方法用于把數組中的所有元素轉換一個字符串

語法：

<body><script>const arr = ['red', 'blue', 'pink']// 1. 數組 map方法 處理數據并且 返回一個數組const newArr = arr.map(function (ele, index) {// console.log(ele)  // 數組元素// console.log(index) // 索引號return ele + '顏色'})console.log(newArr)// 2. 數組join方法  把數組轉換為字符串// 小括號為空則逗號分割console.log(newArr.join())  // red顏色,blue顏色,pink顏色// 小括號是空字符串，則元素之間沒有分隔符console.log(newArr.join(''))  //red顏色blue顏色pink顏色console.log(newArr.join('|'))  //red顏色|blue顏色|pink顏色</script>
</body>