當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
java学习——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及其使