當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

java学习——JavaScript入门

發(fā)布時間：2023/12/10 javascript 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 java学习——JavaScript入门小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

文章目錄

- - ECMAScript
  - - 基礎(chǔ)數(shù)據(jù)類型
    - 函數(shù)
    - 對象
  - BOM
  - - window對象（BOM的默認對象）
    - Location/History
    - Navigator/Screen
  - DOM
  - - 初識DOM
    - 訪問DOM
    - DOM屬性
    - DOM操作
    - DOM事件`addEventListener(eventName, callback)`
  - 網(wǎng)絡(luò)請求
  - 網(wǎng)絡(luò)請求

使用<script></script>標簽引入，放在 body底部

模板字符串

let firstName = "胡"; let lastName = "雪巖";let say = `大家好，我姓${firstName}，名${lastName}`;console.log(say);

ECMAScript

基礎(chǔ)數(shù)據(jù)類型

變量

let:可賦值變量聲明
const：不可改變的常量聲明，需要初始化

數(shù)值類型

? 整數(shù)，浮點數(shù)，非數(shù)值類型：NaN

類型轉(zhuǎn)換/字符串拼接

隱式轉(zhuǎn)換
- 數(shù)字字符串加數(shù)字，數(shù)字隱式轉(zhuǎn)換為字符串
- 數(shù)字字符串與數(shù)字非加法運算，字符串轉(zhuǎn)換為數(shù)字
- 數(shù)字字符串與數(shù)字字符串非加法運算，字符串隱式轉(zhuǎn)換為數(shù)字
強制類型轉(zhuǎn)換
- parseInt：將小數(shù)，整數(shù)，小數(shù)轉(zhuǎn)換為整數(shù)
- parseFloat：將小數(shù)字符串轉(zhuǎn)換為小數(shù)

運算符

== ：判斷值相同

=== ：后者在==基礎(chǔ)上判斷類型

數(shù)組

聲明定義
- let arr2 = new Array(1,2,'arr');
- [1,2,'arr']
操作
- 增push（從尾加），unshift（從頭加）
- 刪pop（從尾刪），shift（從頭刪）
- 改splice
  //一個參數(shù)刪除從開始到結(jié)束位置的所有元素，并返回刪除元素 //兩個參數(shù)從第一個參數(shù)往后刪除第二個參數(shù)的個數(shù) //第三個參數(shù)為替換元素
- 第一個值,整數(shù)類型,表示起始位置
- 第二個值,整數(shù)類型,表示步長(往后選幾個元素,1 代表往后選 1 個元素)
- 第三個參數(shù),要替換的數(shù)組的值
- 查indexOf
  
  第一個參數(shù)：查詢數(shù)組中參數(shù)的索引沒有返回-1
  
  第二個參數(shù)：規(guī)定開始查找位置

函數(shù)

自定義函數(shù)

用function命令聲明
function 函數(shù)名稱() {函數(shù)體； }
函數(shù)表達式聲明（匿名函數(shù)）
let 變量名 = function() {函數(shù)體； } let print = () => {console.log("JavaScript 真有趣"); };
函數(shù)聲明提升：采用function命令聲明可提升函數(shù)聲明到頂部
以上兩種聲明方式區(qū)別
結(jié)尾的大括號后是否需要加“;”：

function 命令聲明：結(jié)尾的大括號后不需要加“;”
函數(shù)表達式：結(jié)尾的大括號后需要加“;”

有無聲明提升：

function 命令聲明：有提升；
函數(shù)表達式：沒有提升；

立即執(zhí)行函數(shù)（IIFE）
(function() {console.log("這個函數(shù)只執(zhí)行一次"); })();

內(nèi)置函數(shù)——計時器

延時執(zhí)行 setTimeout():用來指定某個函數(shù)或某段代碼，在多少毫秒后執(zhí)行，返回一個表示定時器編號的整數(shù)

let timerId = setTimeout(fun|code, delay); console.log(1);/*** 第一個參數(shù)是代碼，注意代碼需用引號包裹，否則會立即執(zhí)行代碼* 第二個參數(shù)是 1000，即 1000ms 后執(zhí)行 console.log(2)*/ setTimeout('console.log(2)', 1000);/*** 第一個參數(shù)是匿名函數(shù)* 第二個參數(shù)是 2000，即 2s 后執(zhí)行 console.log(3)*/ setTimeout(function () {console.log(3); }, 2000);// 第一個參數(shù)是函數(shù)名，注意函數(shù)名后不要加小括號“()”，否則會立即執(zhí)行 print4 setTimeout(print4, 3000);console.log(5);function print4() {console.log(4); } 1; 5; 2; 3; 4;

倒計時實現(xiàn)（遞歸）

// 首先定義計時總秒數(shù)，單位 s let i = 60;// 定義變量用來儲存定時器的編號 let timerId;// 寫一個函數(shù)，這個函數(shù)即每次要執(zhí)行的代碼，能夠完成上述的 1、2、3 function count() {console.log(i);i--;if (i > 0) {timerId = setTimeout(count, 1000);} else {// 清除計時器clearTimeout(timerId);} }// 首次調(diào)用該函數(shù)，開始第一次計時 count();

無限調(diào)用setInterval

let timerId = setInterval(func|code, delay);

對象

js的對象就是一組“鍵值對”集合，創(chuàng)建對象可以通過字面量方法和構(gòu)造函數(shù)法

// 第一步：創(chuàng)建構(gòu)造函數(shù) function People(name, age) {this.name = name;this.age = age; }// 第二步：通過 new 創(chuàng)建對象實例 let person = new People('henry', 18); console.log(person);

自定義對象的屬性操作

讀取屬性：點運算符和方括號運算符

屬性的賦值：同上；

屬性查看Object.keys(對象名):返回一個屬性名數(shù)組

屬性刪除：delete 對象.對象屬性,增加同賦值

遍歷對象屬性

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]]); }

對象的繼承：通過構(gòu)造函數(shù)Object（）或者“繼承創(chuàng)建對象”

// 字面量 let o1 = {name: 'alice', };// 構(gòu)造函數(shù) 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"}]}';// 轉(zhuǎn)成 JavaScript 對象 const obj = JSON.parse(jsonStr);
JavaScript=》JSON
const jsonStr2 = JSON.stringify(obj)；

內(nèi)置對象

Math

Math.E // 常數(shù)e。 Math.LN2 // 2 的自然對數(shù)。 Math.LN10 // 10 的自然對數(shù)。 Math.LOG2E // 以 2 為底的e的對數(shù)。 Math.LOG10E // 以 10 為底的e的對數(shù)。 Math.PI // 常數(shù)π。 Math.SQRT1_2 // 0.5 的平方根。 Math.SQRT2 // 2 的平方根。 Math.abs() // 絕對值 Math.ceil() // 向上取整 Math.floor() // 向下取整 Math.round() // 四舍五入取整 Math.max() // 最大值 Math.min() // 最小值 Math.pow() // 指數(shù)運算 Math.sqrt() // 平方根 Math.log() // 自然對數(shù) Math.exp() // e的指數(shù) Math.random() // 隨機數(shù)

Storage

sessionStrorage：保存一次會話數(shù)據(jù)

localStorage：保存數(shù)據(jù)長期存在

數(shù)據(jù)存入setItem
window.localStorage.setItem('key', 'value)
讀數(shù)據(jù)getItem
window.localStorage.getItem('key');
清楚緩存
window.localStorage.clear();

3.String

let len = 'here is an apple'.length; let str = 'here is an apple'; const index = str.indexOf('an'); console.log(index); // 'here' 之前有一個空格，'apple' 之后有三個空格 let str = ' here is an apple '; const trimedStr = str.trim();//str不變 console.log(str.length); console.log(trimedStr.length);

substring(start, end)： start —— 要截取的字符串的開始下標 end —— 要截取的字符串的結(jié)束下標。
substr(start, len)： start —— 要截取的字符串的開始下標 len —— 要截取的字符串的長度。

const splitedStr = 'a|b|c'.split('|'); console.log(splitedStr); 屬性/方法作用

str.length	返回字符串長度
str.indexOf(sub)	返回子字符串 sub 的開始下標，不存在則返回 -1 注意：這里的參數(shù) sub 是個字符串變量
str.trim()	字符串前后去空格
str.substring(s, e)	截取下標從 s 到 e 的子字符串注意：這里的參數(shù) s 和 e 是個數(shù)字變量
str.substr(s, len)	截取下標從 s 開始，長度為 len 的子字符串注意：這里的參數(shù) s 和 len 是個數(shù)字變量
str.split(pattern)	按規(guī)格 pattern 分割字符串注意：這里的參數(shù) pattern 是個字符串變量

Array

連接數(shù)組：join()

let arr = [1, 2, 3, 4];arr.join(" "); // '1 2 3 4' arr.join(" | "); // "1 | 2 | 3 | 4" arr.join(); // "1,2,3,4"

reverse()

let arr = ["a", "b", "c"];arr.reverse(); // ["c", "b", "a"] arr; // ["c", "b", "a"]

sort()

let arr = [{ name: "jenny", age: 18 },{ name: "tom", age: 10 },{ name: "mary", age: 40 }, ];arr.sort(function (a, b) {return a.age - b.age; });console.log(arr);

遍歷map/forEach

const handledArr = arr.forEach(function (elem, index, a) {elem.age += 1;console.log(elem, index, a);return elem.name; });console.log(handledArr);

屬性/方法作用

arr.join(pattern)	按規(guī)則 pattern 連接數(shù)組，返回字符串
arr.reverse()	將原數(shù)組倒序排列
arr.sort(func)	自定義排序，根據(jù)傳入的參數(shù)函數(shù) func 將數(shù)組成員排序
arr.map(func)	根據(jù)傳入的參數(shù)函數(shù) func 對數(shù)組進行遍歷操作，返回操作后的數(shù)組函數(shù)有三個參數(shù)，依次為：數(shù)組成員、對應(yīng)下標、整個數(shù)組
arr.forEach(func)	根據(jù)傳入的參數(shù)函數(shù) func 對數(shù)組進行遍歷操作，無返回值函數(shù)有三個參數(shù)，依次為：數(shù)組成員、對應(yīng)下標、整個數(shù)組

Date

new Date()不加參數(shù)，返回當前時間

// 傳入表示“年月日時分秒”的數(shù)字 let dt1 = new Date(2020, 0, 6, 0, 0, 0); console.log(dt1);// 傳入日期字符串 let dt2 = new Date("2020-1-6"); console.log(dt2);// 傳入距離國際標準時間的毫秒數(shù) 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

時間對象轉(zhuǎn)時間字符串：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的毫秒數(shù)。 dt.getDate(); // 返回實例對象對應(yīng)每個月的幾號（從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）。

設(shè)置時間對象的年/月/日：set方法

let dt = new Date(); dt.setTime(ms); // 設(shè)置實例距離1970年1月1日00:00:00的毫秒數(shù)。 dt.setDate(date); // 設(shè)置實例對象對應(yīng)每個月的幾號（從1開始）。 dt.setFullYear(year); // 設(shè)置四位的年份。 dt.setMonth(month); // 設(shè)置月份（0表示1月，11表示12月）。 dt.setHours(hour); // 設(shè)置小時（0-23）。 dt.setMilliseconds(ms); // 設(shè)置毫秒（0-999）。 dt.setMinutes(min); // 設(shè)置分鐘（0-59）。 dt.setSeconds(sec); // 設(shè)置秒（0-59）。

BOM

screen 是整個電腦唯一的

navigator 是整個瀏覽器唯一的，如果有多個瀏覽器就會有多個 navigator

window 是每個網(wǎng)頁唯一的，每個網(wǎng)頁都有一個獨立的 window

history，location 是每個網(wǎng)頁的信息，當然也是網(wǎng)頁唯一的

window對象（BOM的默認對象）

Location/History

屬性值解釋

href	https://resource.youkeda.com/wss_test/5dc54e230f101ed7c2256d0d/5e33d104680dca7ebc7a223b/index.html?time=1580454161498	href 是整個網(wǎng)頁地址
hostname	resource.youkeda.com	hostname 是網(wǎng)頁域名
host	resource.youkeda.com	host 是網(wǎng)頁域名 + 端口信息，在這里端口默認 80 省略了，所有和 hostname 一樣
protocol	https	protocol 代表協(xié)議信息
origin	https://resource.youkeda.com	origin 頁面來源的域名的標準形式
pathname	/5dc54e230f101ed7c2256d0d/5e33d104680dca7ebc7a223b/index.html	pathname 包含 url 路徑部分
search	?time=1580454161498	search 表示 URL 參數(shù)

Location方法：reload()

setTimeout(function () {window.location.reload(); }, 3000);

跳轉(zhuǎn)到新的地址

window.location = 'https://www.youkeda.com';

History：將原始網(wǎng)頁存到一個棧中，back(),forward();

Navigator/Screen

Navigator屬性usesrAgent

DOM

初識DOM

樹根是 DOCUMENT，也可以稱為整個頁面文檔

每個 HTML 標簽我們稱之為 DOM 節(jié)點，英文為Node或者ELement

每個 HTML 標簽包裹的子標簽，在樹上體現(xiàn)為分支，稱為兒子節(jié)點。比如上圖，P和H1都是DIV的兒子節(jié)點。DIV同樣也是BODY的兒子節(jié)點。

兒子節(jié)點類推可以得知P,H1是BODY的孫子節(jié)點。

所有P, H1的長輩，我們稱為P和H1的祖先節(jié)點。

P, H1是親兄弟，我們稱為兄弟節(jié)點。

訪問DOM

獲取DOCUMENTwindow.document

querySelector(‘css選擇器’)

可以利用已經(jīng)得到的對象進行迭代查詢

let subtitle = document.querySelector('main .core .subtitle'); console.log(subtitle.querySelector('a'));

選擇器全量查詢querySelectorAll()//返回一個類數(shù)組

DOM屬性

DOM類別
- 元素節(jié)點
- 特性節(jié)點
- 文本節(jié)點
- 。。。。
<!DOCTYPE html> <head><meta charset="UTF-8" /><title>優(yōu)課達</title> </head> <body><div id="test">優(yōu)課達</div><script src="./index.js"></script> </body> let divDom = document.querySelector('div#test'); console.log(divDom.nodeType, divDom.nodeName, divDom.nodeValue);// 獲取DIV節(jié)點的第一個兒子節(jié)點，代表 '優(yōu)課達' 這個字符串 let txtDom = divDom.firstChild; console.log(txtDom.nodeType, txtDom.nodeName, txtDom.nodeValue);// 獲取DIV節(jié)點的id屬性 let attDom = divDom.attributes.id; console.log(attDom.nodeType, attDom.nodeName, attDom.nodeValue); 節(jié)點nodeTypenodeNamenodeValue類型
divDom 1 DIV null 元素節(jié)點
txtDom 3 #text 優(yōu)課達 文本節(jié)點
attDom 2 id test 特性節(jié)點

DOM內(nèi)容

<!DOCTYPE html> <head><meta charset="UTF-8" /><title>優(yōu)課達</title> </head> <body><div id="test">優(yōu)課達<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); 屬性值總結(jié)

outerHTML	<div id="test">優(yōu)課達<p>youkeda</p><p>學的比別人好一點</p></div>	整個 DOM 的 HTML 代碼
innerHTML	優(yōu)課達<p>youkeda</p><p>學的比別人好一點</p>	DOM 內(nèi)部 HTML 代碼
innerText	優(yōu)課達	DOM 內(nèi)部純文本內(nèi)容

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); 屬性值總結(jié)

firstChild	優(yōu)課達	指定節(jié)點的第一個子節(jié)點
lastChild	<p>學的比別人好一點</p>	指定節(jié)點的最后一個子節(jié)點
childNodes	優(yōu)課達<p>youkeda</p><p>學的比別人好一點</p>	指定節(jié)點的子節(jié)點的集合
parentNode	<body><div id="test">優(yōu)課達<p>youkeda</p><p>學的比別人好一點</p></div><script src="./index.js"></script></body>	指定節(jié)點在 DOM 樹中的父節(jié)點

DOM樣式

<!DOCTYPE html> <head><meta charset="UTF-8" /><title>優(yōu)課達</title> </head> <body><h1 class="test youkeda" style="color: #FF3300; font-size: 24px;">優(yōu)課達</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) 屬性類型值總結(jié)

classList	DOMTokenList類數(shù)組	['test', 'youkeda']	classList 數(shù)組方式存儲所有的 class 名稱
style	CSSStyleDeclaration	color屬性為rgb(255, 51, 0)	對象或字典的方法存儲 CSSStyle

DOM數(shù)據(jù)屬性
<!DOCTYPE html> <head><meta charset="UTF-8" /><title>優(yōu)課達</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操作

創(chuàng)建標簽節(jié)點document.createElement(tagName)、創(chuàng)建文本內(nèi)容document.createTextNode(string)
添加新節(jié)點appendChild(newNode):在所有兒子節(jié)點后添加、indertBefore(newNode, referenceNode)：在目標兒子節(jié)點之前添加
設(shè)置樣式、屬性setAttribute('style', 'width: 100%; height: 100%;');:全量設(shè)置屬性，dom.style.color = 'xxxx';單獨設(shè)置屬性
innerHTML = ‘***’將內(nèi)部元素全部換成***

DOM事件addEventListener(eventName, callback)

點擊事件

addEventListener("click", function (event) {函數(shù)體 });

event屬性

屬性值解釋

target	<h1>優(yōu)課達-學的比別人好一點</h1>	點擊事件觸發(fā)的 DOM 節(jié)點，真實響應(yīng)事件的節(jié)點
type	click	事件名稱
pageX/pageY	92/47	鼠標事件觸發(fā)的頁面坐標

冒泡、捕獲、委托

冒泡：因為兒子節(jié)點的事件，找到父節(jié)點并觸發(fā)知道html根元素。阻止冒泡
// ......省略 likeBtn.addEventListener('click', function(e) {// 點擊事件e.stopPropagation()// ......省略
捕獲：事件從根結(jié)點開始移動到當前元素被捕獲
dom.addEventListener('click', function() {}, true);
委托：用event.target來響應(yīng)

移動事件

鼠標移動事件

在上一章中，我們在完成京東圖片切換的時候，已經(jīng)接觸到鼠標移動事件了，本節(jié)課我們詳細介紹一下這塊知識。

在第一小節(jié)中，我們知道這些鼠標移動事件一共有 5 個如下：

mouseenter: 指針移到有事件監(jiān)聽的元素內(nèi)。 mouseleave: 指針移出元素范圍外（不冒泡）。 mousemove: 指針在元素內(nèi)移動時持續(xù)觸發(fā)。 mouseover: 指針移到有事件監(jiān)聽的元素或者它的子元素內(nèi)。 mouseout: 指針移出元素，或者移到它的子元素上。

看這個內(nèi)容還是很混亂，我們把它分類一下

1. mousemove

這個是鼠標移動事件，比較簡單

2. mouseenter/mouseleave

這個是鼠標進入和離開事件，但是僅僅只作用于當前 DOM 節(jié)點，不會作用于其后代節(jié)點

3. mouseover/mouseout

這個也是鼠標進入和離開事件，但和enter/leave不同的是：此事件除了作用于當前 DOM 節(jié)點，也會同時作用于其后代節(jié)點

在平時使用中，90%我們都只會使用mouseover/mouseout，這個事件。

表單元素事件

獲取焦點focus，失去焦點blur

事件介紹案例

change	當用戶提交對元素值的更改時觸發(fā)； change 事件不一定會對元素值的每次更改觸發(fā)	1. checkbox 值修改以后 2. select 選擇后 3. input 內(nèi)容修改并失去焦點
input	只要 value 值修改就會觸發(fā)

滾動事件

window.addEventListener('scroll', function () {console.log(window.scrollY); });

網(wǎng)絡(luò)請求

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數(shù)據(jù)序列化成字符串 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 內(nèi)容修改并失去焦點

input
只要 value 值修改就會觸發(fā)