javascript
java学习——JavaScript入门
文章目錄
- ECMAScript
- 基礎數據類型
- 函數
- 對象
- BOM
- window對象(BOM的默認對象)
- Location/History
- Navigator/Screen
- DOM
- 初識DOM
- 訪問DOM
- DOM屬性
- DOM操作
- DOM事件`addEventListener(eventName, callback)`
- 網絡請求
- 網絡請求
使用<script></script>標簽引入,放在 body底部 <script src='index.js'></script>
模板字符串
let firstName = "胡"; let lastName = "雪巖";let say = `大家好,我姓${firstName},名${lastName}`;console.log(say);ECMAScript
基礎數據類型
變量
-
let:可賦值變量聲明
-
const:不可改變的常量聲明,需要初始化
數值類型
? 整數,浮點數,非數值類型:NaN
類型轉換/字符串拼接
- 隱式轉換
- 數字字符串加數字,數字隱式轉換為字符串
- 數字字符串與數字非加法運算,字符串轉換為數字
- 數字字符串與數字字符串非加法運算,字符串隱式轉換為數字
- 強制類型轉換
- parseInt:將小數,整數,小數轉換為整數
- parseFloat:將小數字符串轉換為小數
運算符
== : 判斷值相同
=== :后者在==基礎上判斷類型
數組
-
聲明定義
- let arr2 = new Array(1,2,'arr');
- [1,2,'arr']
-
操作
-
增push(從尾加),unshift(從頭加)
-
刪pop(從尾刪),shift(從頭刪)
-
改splice
//一個參數刪除從開始到結束位置的所有元素,并返回刪除元素 //兩個參數從第一個參數往后刪除第二個參數的個數 //第三個參數為替換元素 - 第一個值,整數類型,表示起始位置
- 第二個值,整數類型,表示步長(往后選幾個元素,1 代表往后選 1 個元素)
- 第三個參數,要替換的數組的值
-
-
查indexOf
第一個參數:查詢數組中參數的索引沒有返回-1
第二個參數:規定開始查找位置
函數
自定義函數
-
用function命令聲明
function 函數名稱() {函數體; } -
函數表達式聲明(匿名函數)
let 變量名 = function() {函數體; } let print = () => {console.log("JavaScript 真有趣"); }; -
函數聲明提升:采用function命令聲明可提升函數聲明到頂部
-
以上兩種聲明方式區別
- 結尾的大括號后是否需要加“;”:
- function 命令聲明:結尾的大括號后不需要加“;”
- 函數表達式:結尾的大括號后需要加“;”
- 有無聲明提升:
- function 命令聲明:有提升;
- 函數表達式:沒有提升;
立即執行函數(IIFE)
(function() {console.log("這個函數只執行一次"); })();內置函數——計時器
延時執行 setTimeout():用來指定某個函數或某段代碼,在多少毫秒后執行,返回一個表示定時器編號的整數
let timerId = setTimeout(fun|code, delay); console.log(1);/*** 第一個參數是代碼,注意代碼需用引號包裹,否則會立即執行代碼* 第二個參數是 1000,即 1000ms 后執行 console.log(2)*/ setTimeout('console.log(2)', 1000);/*** 第一個參數是匿名函數* 第二個參數是 2000,即 2s 后執行 console.log(3)*/ setTimeout(function () {console.log(3); }, 2000);// 第一個參數是函數名,注意函數名后不要加小括號“()”,否則會立即執行 print4 setTimeout(print4, 3000);console.log(5);function print4() {console.log(4); } 1; 5; 2; 3; 4;倒計時實現(遞歸)
// 首先定義計時總秒數,單位 s let i = 60;// 定義變量用來儲存定時器的編號 let timerId;// 寫一個函數,這個函數即每次要執行的代碼,能夠完成上述的 1、2、3 function count() {console.log(i);i--;if (i > 0) {timerId = setTimeout(count, 1000);} else {// 清除計時器clearTimeout(timerId);} }// 首次調用該函數,開始第一次計時 count();無限調用setInterval
let timerId = setInterval(func|code, delay);對象
js的對象就是一組“鍵值對”集合,創建對象可以通過字面量方法和構造函數法
// 第一步:創建構造函數 function People(name, age) {this.name = name;this.age = age; }// 第二步:通過 new 創建對象實例 let person = new People('henry', 18); console.log(person);自定義對象的屬性操作
遍歷對象屬性
for… in
let person = {name: 'henry',age: 18, }for (let key in person) {console.log('鍵名:' + key + ';鍵值:' + person[key]); }Object.keys
let person = {name: 'henry',age: 18, }let keys = Object.keys(person);for (let i = 0; i < keys.length; i++) {console.log('鍵名:' + keys[i] + ';鍵值:' + person[keys[i]]); }對象的繼承:通過構造函數Object()或者“繼承創建對象”
// 字面量 let o1 = {name: 'alice', };// 構造函數 let o2 = new Object(); let o3 = new Object();// 繼承 funtion O4() { }; O4.prototype = o1; let o4 = new O4();原型:繼承的上一級對象
屬性是否存在:in
let person = {name: 'henry',age: 18, };'name' in person; 'gender' in person; 'toString' in person自身屬性是否存在:hasOwnProperty
let person = {name: 'henry',age: 18, };person.hasOwnProperty('name'); person.hasOwnProperty('gender'); person.hasOwnProperty('toString');Object、JSON、Map
-
JOSN=》JavaScript
// 一個 JSON 字符串 const jsonStr ='{"sites":[{"name":"Runoob", "url":"www.runoob.com"},{"name":"Google", "url":"www.google.com"},{"name":"Taobao", "url":"www.taobao.com"}]}';// 轉成 JavaScript 對象 const obj = JSON.parse(jsonStr); -
JavaScript=》JSON
const jsonStr2 = JSON.stringify(obj);
內置對象
Math
Math.E // 常數e。 Math.LN2 // 2 的自然對數。 Math.LN10 // 10 的自然對數。 Math.LOG2E // 以 2 為底的e的對數。 Math.LOG10E // 以 10 為底的e的對數。 Math.PI // 常數π。 Math.SQRT1_2 // 0.5 的平方根。 Math.SQRT2 // 2 的平方根。 Math.abs() // 絕對值 Math.ceil() // 向上取整 Math.floor() // 向下取整 Math.round() // 四舍五入取整 Math.max() // 最大值 Math.min() // 最小值 Math.pow() // 指數運算 Math.sqrt() // 平方根 Math.log() // 自然對數 Math.exp() // e的指數 Math.random() // 隨機數Storage
sessionStrorage:保存一次會話數據
localStorage:保存數據長期存在
-
數據存入setItem
window.localStorage.setItem('key', 'value) -
讀數據getItem
window.localStorage.getItem('key'); -
清楚緩存
window.localStorage.clear();
3.String
- substring(start, end): start —— 要截取的字符串的開始下標 end —— 要截取的字符串的結束下標。
- substr(start, len): start —— 要截取的字符串的開始下標 len —— 要截取的字符串的長度。
| str.length | 返回字符串長度 |
| str.indexOf(sub) | 返回子字符串 sub 的開始下標,不存在則返回 -1 注意:這里的參數 sub 是個字符串變量 |
| str.trim() | 字符串前后去空格 |
| str.substring(s, e) | 截取下標從 s 到 e 的子字符串 注意:這里的參數 s 和 e 是個數字變量 |
| str.substr(s, len) | 截取下標從 s 開始,長度為 len 的子字符串 注意:這里的參數 s 和 len 是個數字變量 |
| str.split(pattern) | 按規格 pattern 分割字符串 注意:這里的參數 pattern 是個字符串變量 |
Array
遍歷map/forEach
| arr.join(pattern) | 按規則 pattern 連接數組,返回字符串 |
| arr.reverse() | 將原數組倒序排列 |
| arr.sort(func) | 自定義排序,根據傳入的參數函數 func 將數組成員排序 |
| arr.map(func) | 根據傳入的參數函數 func 對數組進行遍歷操作,返回操作后的數組 函數有三個參數,依次為:數組成員、對應下標、整個數組 |
| arr.forEach(func) | 根據傳入的參數函數 func 對數組進行遍歷操作,無返回值 函數有三個參數,依次為:數組成員、對應下標、整個數組 |
Date
new Date()不加參數,返回當前時間
// 傳入表示“年月日時分秒”的數字 let dt1 = new Date(2020, 0, 6, 0, 0, 0); console.log(dt1);// 傳入日期字符串 let dt2 = new Date("2020-1-6"); console.log(dt2);// 傳入距離國際標準時間的毫秒數 let dt3 = new Date(1578240000000); console.log(dt3);日期運算
時間差:毫秒
// 傳入表示“年月日時分秒”的數字 let dt1 = new Date(2020, 0, 6, 0, 0, 0); console.log(dt1);// 傳入日期字符串 let dt2 = new Date("2020-1-6"); console.log(dt2);// 傳入距離國際標準時間的毫秒數 let dt3 = new Date(1578240000000); console.log(dt3);早晚比較:大小于符號
let dt1 = new Date(2020, 2, 1); let dt2 = new Date(2020, 3, 1);console.log(dt1 > dt2); // false console.log(dt1 < dt2); // true解析日期字符串:Date.parse()
let dt = Date.parse("2020-1-6"); console.log(dt); // 1578240000000時間對象轉時間字符串:to方法
let dt = new Date(); let dtStr = dt.toJSON();console.log(dtStr); // 2020-01-03T09:44:18.220Z獲取時間對象的年/月/日:get方法
let dt = new Date(); dt.getTime(); // 返回實例距離1970年1月1日00:00:00的毫秒數。 dt.getDate(); // 返回實例對象對應每個月的幾號(從1開始)。 dt.getDay(); // 返回星期幾,星期日為0,星期一為1,以此類推。 dt.getFullYear(); // 返回四位的年份。 dt.getMonth(); // 返回月份(0表示1月,11表示12月)。 dt.getHours(); // 返回小時(0-23)。 dt.getMilliseconds(); // 返回毫秒(0-999)。 dt.getMinutes(); // 返回分鐘(0-59)。 dt.getSeconds(); // 返回秒(0-59)。設置時間對象的年/月/日:set方法
let dt = new Date(); dt.setTime(ms); // 設置實例距離1970年1月1日00:00:00的毫秒數。 dt.setDate(date); // 設置實例對象對應每個月的幾號(從1開始)。 dt.setFullYear(year); // 設置四位的年份。 dt.setMonth(month); // 設置月份(0表示1月,11表示12月)。 dt.setHours(hour); // 設置小時(0-23)。 dt.setMilliseconds(ms); // 設置毫秒(0-999)。 dt.setMinutes(min); // 設置分鐘(0-59)。 dt.setSeconds(sec); // 設置秒(0-59)。BOM
window對象(BOM的默認對象)
Location/History
| href | https://resource.youkeda.com/wss_test/5dc54e230f101ed7c2256d0d/5e33d104680dca7ebc7a223b/index.html?time=1580454161498 | href 是整個網頁地址 |
| hostname | resource.youkeda.com | hostname 是網頁域名 |
| host | resource.youkeda.com | host 是網頁域名 + 端口信息,在這里端口默認 80 省略了,所有和 hostname 一樣 |
| protocol | https | protocol 代表協議信息 |
| origin | https://resource.youkeda.com | origin 頁面來源的域名的標準形式 |
| pathname | /5dc54e230f101ed7c2256d0d/5e33d104680dca7ebc7a223b/index.html | pathname 包含 url 路徑部分 |
| search | ?time=1580454161498 | search 表示 URL 參數 |
Location方法:reload()
setTimeout(function () {window.location.reload(); }, 3000);跳轉到新的地址
window.location = 'https://www.youkeda.com';History:將原始網頁存到一個棧中,back(),forward();
Navigator/Screen
DOM
初識DOM
訪問DOM
獲取DOCUMENTwindow.document
querySelector(‘css選擇器’)
可以利用已經得到的對象進行迭代查詢
let subtitle = document.querySelector('main .core .subtitle'); console.log(subtitle.querySelector('a'));選擇器全量查詢querySelectorAll()//返回一個類數組
DOM屬性
-
DOM類別
- 元素節點
- 特性節點
- 文本節點
- 。。。。
節點nodeTypenodeNamenodeValue類型 divDom 1 DIV null 元素節點 txtDom 3 #text 優課達 文本節點 attDom 2 id test 特性節點 -
DOM內容
<!DOCTYPE html> <head><meta charset="UTF-8" /><title>優課達</title> </head> <body><div id="test">優課達<p>youkeda</p><p>學的比別人好一點</p></div><script src="./index.js"></script> </body> let divDom = document.querySelector('div#test'); console.log(divDom.outerHTML, divDom.innerHTML, divDom.innerText);屬性值總結 outerHTML <div id="test">優課達<p>youkeda</p><p>學的比別人好一點</p></div> 整個 DOM 的 HTML 代碼 innerHTML 優課達<p>youkeda</p><p>學的比別人好一點</p> DOM 內部 HTML 代碼 innerText 優課達 DOM 內部純文本內容 -
DOM親屬
let divDom = document.querySelector('div#test'); console.log(divDom.firstChild, divDom.lastChild); console.log('-----'); console.log(divDom.childNodes); console.log('-----'); console.log(divDom.parentNode);屬性值總結 firstChild 優課達 指定節點的第一個子節點 lastChild <p>學的比別人好一點</p> 指定節點的最后一個子節點 childNodes 優課達<p>youkeda</p><p>學的比別人好一點</p> 指定節點的子節點的集合 parentNode <body><div id="test">優課達<p>youkeda</p><p>學的比別人好一點</p></div><script src="./index.js"></script></body> 指定節點在 DOM 樹中的父節點 -
DOM樣式
<!DOCTYPE html> <head><meta charset="UTF-8" /><title>優課達</title> </head> <body><h1 class="test youkeda" style="color: #FF3300; font-size: 24px;">優課達</h1><script src="./index.js"></script> </body> const h1Dom = document.querySelector('h1'); console.log(h1Dom.classList); console.log(h1Dom.style); console.log(h1Dom.style.color)屬性類型值總結 classList DOMTokenList類數組 ['test', 'youkeda'] classList 數組方式存儲所有的 class 名稱 style CSSStyleDeclaration color屬性為rgb(255, 51, 0) 對象或字典的方法存儲 CSSStyle -
DOM數據屬性
<!DOCTYPE html> <head><meta charset="UTF-8" /><title>優課達</title> </head> <body><article data-parts="3" data-words="1314" data-category="python">...</article><script src="./index.js"></script> </body> const article = document.querySelector('article'); console.log(article.dataset);//返回Map
DOM操作
- 創建標簽節點document.createElement(tagName)、創建文本內容document.createTextNode(string)
- 添加新節點appendChild(newNode):在所有兒子節點后添加、indertBefore(newNode, referenceNode):在目標兒子節點之前添加
- 設置樣式、屬性setAttribute('style', 'width: 100%; height: 100%;');:全量設置屬性,dom.style.color = 'xxxx';單獨設置屬性
- innerHTML = ‘***’將內部元素全部換成***
DOM事件addEventListener(eventName, callback)
event屬性
| target | <h1>優課達-學的比別人好一點</h1> | 點擊事件觸發的 DOM 節點,真實響應事件的節點 |
| type | click | 事件名稱 |
| pageX/pageY | 92/47 | 鼠標事件觸發的頁面坐標 |
冒泡、捕獲、委托
-
冒泡:因為兒子節點的事件,找到父節點并觸發知道html根元素。阻止冒泡
// ......省略 likeBtn.addEventListener('click', function(e) {// 點擊事件e.stopPropagation()// ......省略 -
捕獲:事件從根結點開始移動到當前元素被捕獲
dom.addEventListener('click', function() {}, true); -
委托:用event.target來響應
移動事件
鼠標移動事件
在上一章中,我們在完成京東圖片切換的時候,已經接觸到鼠標移動事件了,本節課我們詳細介紹一下這塊知識。
在第一小節中,我們知道這些鼠標移動事件一共有 5 個如下:
mouseenter: 指針移到有事件監聽的元素內。 mouseleave: 指針移出元素范圍外(不冒泡)。 mousemove: 指針在元素內移動時持續觸發。 mouseover: 指針移到有事件監聽的元素或者它的子元素內。 mouseout: 指針移出元素,或者移到它的子元素上。
看這個內容還是很混亂,我們把它分類一下
1. mousemove
這個是鼠標移動事件,比較簡單
2. mouseenter/mouseleave
這個是鼠標進入和離開事件,但是僅僅只作用于當前 DOM 節點,不會作用于其后代節點
3. mouseover/mouseout
這個也是鼠標進入和離開事件,但和enter/leave不同的是:此事件除了作用于當前 DOM 節點,也會同時作用于其后代節點
在平時使用中,90%我們都只會使用mouseover/mouseout,這個事件。
表單元素事件
獲取焦點focus,失去焦點blur
| change | 當用戶提交對元素值的更改時觸發; change 事件不一定會對元素值的每次更改觸發 | 1. checkbox 值修改以后 2. select 選擇后 3. input 內容修改并失去焦點 |
| input | 只要 value 值修改就會觸發 |
滾動事件
window.addEventListener('scroll', function () {console.log(window.scrollY); });網絡請求
GET請求
fetch('https://www.fastmock.site/mock/b73a1b9229212a9a3749e046b1e70285/f4/f4-11-1-1' ).then(function (response) {return response.json();}).then(function (myJson) {console.log(myJson);});POST請求
// 把JSON數據序列化成字符串 const data = JSON.stringify({username: 'admin',password: '123456' });fetch('https://www.fastmock.site/mock/b73a1b9229212a9a3749e046b1e70285/f4/f4-11-4-1',{method: 'POST',body: data,headers: {'content-type': 'application/json'}} ).then(function(response) {return response.json();}).then(function(myJson) {console.log(myJson);});值修改以后
2. select 選擇后
3. input 內容修改并失去焦點
input
只要 value 值修改就會觸發
滾動事件
window.addEventListener('scroll', function () {console.log(window.scrollY); });網絡請求
GET請求
fetch('https://www.fastmock.site/mock/b73a1b9229212a9a3749e046b1e70285/f4/f4-11-1-1' ).then(function (response) {return response.json();}).then(function (myJson) {console.log(myJson);});POST請求
// 把JSON數據序列化成字符串 const data = JSON.stringify({username: 'admin',password: '123456' });fetch('https://www.fastmock.site/mock/b73a1b9229212a9a3749e046b1e70285/f4/f4-11-4-1',{method: 'POST',body: data,headers: {'content-type': 'application/json'}} ).then(function(response) {return response.json();}).then(function(myJson) {console.log(myJson);});總結
以上是生活随笔為你收集整理的java学习——JavaScript入门的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 分布式理论CAP定理
- 下一篇: Jenkins二 安装gitlab及其使