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

javascript

JavaScript快速入门

發布時間：2023/12/10 javascript 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript快速入门小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

JavaScript快速入門

1.快速入門

1.1引入JavaScript

1.內部標簽

2.外部引入

qj.js

alert('hello,world');

引入

測試

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> <script src="js/qj.js"></script> </head> <body></body> </html>

2.基本語法入門

<script>//1.定義變量 var 變量名 =變量值var score=88;var name='張三';console.log(name);//控制臺輸出//2.條件控制if(score>60 && score<70){alert("60~70");}else if(score>70 && score<80){alert("70~80");}else {alert("other");}/*** 多行注釋*/ </script>

3.數據類型

數值，文本，圖形，音頻，視頻。。。

變量

var _$ =值

number

js不區分小數和整數,Number

123//整數 123.1//浮點數 1.123e3//科學計數法 -99//負數 NaN//not a number Infinity//無限大

字符串

‘abc’ “abc”

‘\n’

布爾值

true , false

邏輯運算

&& 兩個都為真結果為真

|| 一個為真結果為真

！取反

比較運算符

=賦值

==等于（類型不一樣，值一樣，，會判斷為true）

===絕對等于（類型一樣值一樣，結果為true）

注意：NaN===NaN，這個與所有的數值都不相等，包括自己，只能通過isNaN判斷

浮點數問題

盡量避免使用浮點數進行運算，存在精度問題

console.log(Math.abs(1/3-(1-2/3))<0.000000000001);

null和undefined

null空
undefined未定義

數組

Java的數組必須是相同類型的對象，js不需要

//保證代碼的可讀性，盡量使用[] var arr=[1,,2,3,4,5,'hello',null,true]; new Array(1,2,3,4,5,'hello',null,true);

取數組下標越界，就會報undefine

對象

數組是中括號，對象是大括號

每個屬性需要逗號隔開，最后一個不需要

var person={name: "qinjiang",age: 3,tags: ['js','java','web','...'] }

取對象的值

person.name

4.嚴格檢查模式

'use strict';//嚴格檢查模式，預防JavaScript的隨意性導致產生的一些問題 //局部變量建議使用let定義 //全局變量 var i=1; //ES6 let let a=2;

'use strict’必須寫在JavaScript的第一行

5.數據類型

5.1字符串

1.正常字符串使用單引號，或者雙引號包裹

2.注意轉義字符\

\' \n \r \u4e2d Unicode字符 "\x41" Ascll

3.多行字符串

var msg=` hello world `

4.模板字符串

let name="zhangsan"; let age=3; let msg=`你好啊，${name}`;

5.字符串長度

console.log(str.length)

6.字符串的可變性，不可變

7.大小寫轉換

msg.toLocaleUpperCase(); msg.toLocaleLowerCase();

8.msg.indexOf();獲取指定下標

9.msg.substring(1);從到一個截取到最后

msg.substring(1,2);//[1,2)

5.2數組

Array可以包含任意的數據類型

var arr=[1,2,3,4,5,6];

1.長度

arr.length;

注意：假如給arr.length賦值，數組大小就會發生變化，如果賦值過小，元素就會丟失

2.indexof

arr.indexOf();

字符串的“1”和數字1是不同的

3.slice（）截取Array的一部分，返回一個新數組

arr.slice(1,3);[1,3)

4.push(),pop()

push壓入到尾部pop彈出尾部的一個元素

5.unshift(),shift()頭部

unshift：壓入頭部 shift：彈出頭部的一個元素

6.排序

arr.sort()

7.元素反轉

arr.reverse()

8.concat()數組拼接

arr.concat(1,2,3)//并沒有修改數組，只是返回一個新數組

9.連接符join()

打印拼接數組，使用特定字符串連接

arr.join('-');

10.多維數組

arr[[12],[3]]; arr[1,1];

數組：存儲數據（如何存，如何取，方法可以自己實現）

5.3對象

若干個鍵值對

let 對象名={屬性名: 屬性值,屬性名: 屬性值,屬性名: 屬性值 };let person={name: "wushuang",age: 3,sex: 1,score: 99 };

Js中對象，{…}表示一個對象。鍵值對描述屬性xxx: xxx,多個屬性之間使用逗號隔開，最后一個屬性不加逗號

JavaScript中所有的鍵都是字符串，值是任意對象

1.對象賦值

person.name="wushaung" 'wushaung'

2.使用一個不存在的對象屬性，不會報錯

undefined

3.動態的刪減屬性，通過delete刪除對象的屬性

delete person.name true person {age: 3, sex: 1, score: 99}

4.動態的添加，直接給新的屬性添加值即可

person.a="aa"

5.判斷屬性值是否在這個對象中 xxx in xxx

'age' in person true 'toString' in person true

繼承的父類的方法也可以找到

6.判斷一個屬性是否是這個對象自身的

person.hasOwnProperty('age') true person.hasOwnProperty('toString') false

5.4流程控制

if判斷

var age=3; if(age>3){alert("hh"); }else {alert("ww"); }

while循環，避免死循環

var age=3;while (age<100){age +=1;console.log(age); }do{age +=1;console.log(age); }while(age<100)

for循環

var age=3;for (let i = 0; i < 100; i++) {console.log(i); }

forEach循環 5.1

var age=[1,2,3,4,5,6,7,8]; //函數 age.forEach(function (value) {console.log(value) })

for in

var age=[1,2,3,4,5,6,7,8]; for(var num in age){console.log(age[num]) }

出的是索引

5.5Map和Set

Map:

//學生的成績，學生的名字 var map=new Map([['tom',100],['jack',90],['haha',80]]); var name=map.get('tom'); //通過key獲取value map.set('admin',123456);//新增或者修改 console.log(name); map.delete //刪除一個元素

Set:無序不重復

var set=new Set([3,1,1,1,1,1]);//set可以去重 set.add(2); //添加 set.delete(1);//刪除 console.log(set.has(3));//是否包含某個元素

5.6iterator es6

通過for…of獲取值

for…in獲取下標

var arr=[3,4,5]; for (var x of arr){console.log(x); }

遍歷map

var map=new Map([['tom',100],['jack',90],['haha',80]]); for(let x of map){console.log(x) }

遍歷set

var set=new Set([1,2,3,4,5,6,7]); for(let x of set){console.log(x) }

6.函數

6.1，定義函數

定義方式一

絕對值函數

function abs(x){if(x>=0){return x;}else{return -x;} }

一旦執行到return，代表函數結束，返回結果

如果沒有執行return，函數執行完也會返回結果，結果就是undefined

定義方式二

var abs=function(x){if(x>=0){return x;}else{return -x;} }

調用函數

abs(10) abs(-10)

參數問題：JavaScript可以傳任意個參數，也可以不傳遞參數

參數進來是否存在的問題：假設不存在參數，先判斷

function abs(x){if(typeof x!='number'){throw 'not a number';//手動拋出異常來判斷}if(x>=0){return x;}else{return -x;} }

arguments

arguments是一個JS免費贈送的關鍵字

多個參數時，可以通過arguments遍歷出來

代表傳遞進來的所有參數，是一個數組，可以拿到隱藏的參數

function abs(x){if(arguments.length>1){console.log(arguments[1]);}if(typeof x!='number'){throw 'not a number';}if(x>=0){return x;}else{return -x;} }

問題：arguments會包含所有的參數，有時候只想使用除當前參數來進行操作，需要排除當前已有的參數。

rest

獲取除了已經定義的參數之外的所有參數…

以前：

function aaa(a, b) {console.log("a=>"+a);console.log("b=>"+b);if(arguments.length>2){for (let i=2;i<arguments.length;i++){console.log(arguments[i]);}} }

現在：

function aaa(a, b,...rest) {console.log("a=>"+a);console.log("b=>"+b);console.log(rest); }

rest參數只能寫在最后，必須用…標識

6.2，變量的作用域

JavaScript中，var定義變量實際是有作用域的

假設在函數體中聲明，則在函數體外不可使用~（閉包）

function qj() {var x=1;x=x+1; } x=x+1;//Uncaught ReferenceError: x is not defined

如果兩個函數使用相同的變量名，只要在函數內部，就不影響

function qj() {var x=1;x=x+1;} function qj2() {var x=1;x=x+1; }

內部函數可以訪問外部函數的成員，外部不能訪問內部

function qj() {var x=1;x=x+1;function qj2() {var y=x+1; //2}var z=y+1; //Uncaught ReferenceError: y is not defined }

內外函數變量同名，由內向外查找，假設外部存在，同名的函數變量，內部函數會屏蔽外部函數的變量

function qj() {var x=1;x=x+1;function qj2() {var x='a'; //2console.log('inner'+x);}qj2();console.log('outer'+x); }

提升變量的作用域

// 'use strict'function qj() {var x='x'+y;console.log(x);var y='y'; }

結果：xundefined

說明：Js執行引擎，自動提升y的聲明，但是不會提升變量y的賦值

定義變量先聲明再賦值,所有的變量都放在頭部，不用亂放，便于維護

var x,y,z,h;

全局函數

'user strict' //全局變量 var x=4; function f() {console.log(x); } f(); console.log(x);

全局對象windows

var x='xxx'; alert(x); alert(window.x);//默認所有的全局變量，都會自動綁定在window對象中

alter()這個函數，本身也是window的一個變量

// 'user strict' var x='xxx'; alert(x); alert(window.x);//默認所有的全局變量，都會自動綁定在window對象中 var old_alter= window.alert; //old_alter(x); window.alert=function () {}; //發現alter（）失效 window.alert(123);//恢復 window.alert=old_alter; window.alert(456);

JavaScript實際上只有一個全局作用域，任何變量（函數也可以視為變量），假設沒有在函數范圍內找到，就會向外查找，如果沒有在全局作用域中找到，就會報錯ReferenceError

規范：

由于所有的全局變量都會綁定到window上，如果不同的js文件，使用了相同的全局變量，減少沖突

//唯一全局變量 var WuShuang={}; //定義全局變量 WuShuang.name='無雙'; WuShuang.add=function (a,b) {return a+b; }

把自己的代碼全部放到自己定義的唯一空間命名中，降低全局命名沖突的問題

局部作用域

function aaa() {for (var i = 0; i < 100; i++) {console.log(i);}console.log(i+1);//i 出了作用域還能用 }

使用let關鍵字，解決局部作用域沖突

function aaa() {for (let i = 0; i < 100; i++) {console.log(i);}console.log(i+1);//i 出了作用域還能用 }

建議使用let

常量const

在ES6，只有用全部大寫命名的就是常量，建議不要修改

var PI='3.14'; console.log(PI); PI='222'; console.log(PI);

發現可以改變這個值

const PI='3.14';//只讀變量 console.log(PI); PI='222';//直接報錯

6.3，方法

定義方法：方法就是把函數放到對象的里邊，對象只有兩個東西，屬性和方法

var wushuang={name: '無雙',birth: 2001,age: function () {//今年-出生var now=new Date().getFullYear();return now-this.birth;} } //屬性 wushuang.name //方法，一定帶() wushuang.age()

this.始終指向調用它的人

拆開上代碼

function getAge() {//今年-出生var now=new Date().getFullYear();return now-this.birth; } var wushuang={name: '無雙',birth: 2001,age: getAge() }

this是無法指向的，默認指向調用它的對象

apply

在js中控制this指向的對象

function getAge() {//今年-出生var now=new Date().getFullYear();return now-this.birth; } var wushuang={name: '無雙',birth: 2001,age: getAge }; getAge.apply(wushuang,[]);//this指向了wushuang，參數為空

7.內部對象

標準對象

typeof 123 'number' typeof true 'boolean' typeof NaN 'number' typeof [] 'object' typeof {} 'object' typeof Math.abs 'function' typeof aa 'undefined'

7.1,Date

基本使用

var now =new Date(); //Wed Jun 22 2022 14:18:38 GMT+0800 (中國標準時間) now.getFullYear();//年 now.getMonth();//月 now.getDate();//日 now.getDay();//星期幾 now.getHours();//時 now.getMinutes();//分 now.getMinutes();//秒now.getTime();//時間戳 1970 1.1 0：00：：

轉換

new Date(1655878718669);//時間戳轉換為時間now.toLocaleString()//獲取本地時間，注意調用的是方法，不是屬性 '2022/6/22 14:18:38'

7.2，Json

在JavaScript一切皆為對象，任何js支持的類型都可以用JSON來表示：

格式：

對象都用{}
數字都用[]
所有的鍵值對都是用key：value

JSON字符串和JS對象的轉化

var user={name: "無雙",age: 3,sex: '男' } //對象轉換為JSON字符串 var jso_user=JSON.stringify(user); //json字符串轉換為對象 var obj=JSON.parse('{"name":"無雙","age":3,"sex":"男"}');

JSON和JS對象區別

var obj={a : 'b',b : 'hellob'}; var json='{"a":"hello","b":"hellob"}'

7.3,Ajax

原生的js xhr異步請求
JQuery $(#nname).ajax(“”)
axios請求

8.面向對象編程

原型：父類

class繼承

繼承

// 定義一個學生的類 class Student{constructor(name){this.name=name;}hello(){alert('hello');} } class pupil extends Student{constructor(name,grade){super(name);this.grade=grade;}myGrade(){alert('我是一名小學生');} } var xiaoming=new Student("小明"); var xiaohong=new pupil("張三",2);

本質還是原型

原型鏈

__ proto __

9.操作BOM對象

JavaScript和瀏覽器的關系

JavaScript誕生就是未來讓他在瀏覽器中運行

BOM：瀏覽器對象模型

window

window代表瀏覽器窗口

window.alert(1) undefined window.innerHeight 406 window.innerWidth 1396 window.outerWidth 1536 window.outerHeight 816

navigator

navigator封裝了瀏覽器信息

navigator.appName 'Netscape' navigator.appVersion '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36' navigator.platform 'Win32'

大多時候，不使用navigator對象，因為會被人為修改

不建議使用這些屬性來判斷和編寫代碼

screen

代表屏幕的尺寸

screen.width 1536px screen.height 864px

location

location代表當前的URL信息

host: "localhost:63342" hostname: "localhost" href: "http://localhost:63342/JavaScript/lesson02/class%E7%BB%A7%E6%89%BF.html?_ijt=4hdtbo9kftmj9u5hg2l3t8lrki" port: "63342" protocol: "http:"location.reload()//刷新網頁 location.assign('https://www.bilibili.com/')//設置新地址

document

document代表當前頁面,HTML DOM文檔樹

獲取具體的文檔樹節點

<dl id="app"><dt>Java</dt><dd>JavaSE</dd><dd>JavaEE</dd> </dl><script>var dl=document.getElementById('app'); </script>

可以獲取客服端的cookie

document.cookie

劫持cookie

服務端可以設置cookie為httpOnly

history

代表瀏覽器的歷史記錄

history.back()//后退 history.forward()//前進

10.操作DOM對象

DOM：文檔對象模型

核心

瀏覽器網頁就是一個Dom樹形結構

更新：更新Dom節點
遍歷dom節點：得到dom節點
刪除一個節點
添加一個新的節點

要操作一個Dom節點，就必須要先獲得這個Dom節點

//對應css選擇器 var h1=document.getElementsByTagName('h1');//標簽選擇器 var p1=document.getElementById('p1'); var p2=document.getElementsByClassName('p2'); var father=document.getElementById('father'); var children=father.children//獲取父節點下的所有節點 // father.firstChild; // father.lastChild;

原生代碼，之后盡量使用jquery

更新節點

id1.innerText=‘123’ 修改文本值
id1.innerHTML=‘123’ 可以解析html標簽

操作css

id1.style.color=‘red’ 操作css樣式使用駝峰命名

刪除節點

刪除節點步驟，先獲取父節點，再刪除自己

father.removeChild(p1) //刪除是一個動態的過程 father.removeChild(father.children[0])

可以直接通過父節點刪除子節點，也可以通過子節點得到父節點，刪除多個節點的時候，children是在時刻變化的

插入節點

我們獲得某個Dom節點，假設這個dom節點是空的，我們通過innerHTML就可以增加一個元素了，但是這個DOM節點已經存在元素了就不能使用了，因為會發生覆蓋

追加

<p id="js">JavaScrpt</p> <div id="list"><p id="JavaEE">JavaEE</p><p id="JavaSE">JavaSE</p><p id="JavaME">JavaME</p> </div> <script>let js = document.getElementById('js');let list = document.getElementById('list');list.append(js);//追加到最后 </script>

創建新節點

插入一個節點

insert

11.操作表單

獲取表單信息

MD5加密

<form action="#" method="post" onsubmit="return aaa()"><table><tr><td>用戶名:</td><td><input type="text" id="username" name="username"></td></tr><tr><td>密碼:</td><td><input type="password" id="password" ></td></tr><tr><td><input type="hidden" id="md5_password" name="password"></td></tr><tr><td><button type="submit" >登錄</button></td></tr></table><script>function aaa() {let uname = document.getElementById('username');let pwd = document.getElementById('password');let md5pwd = document.getElementById('md5_password');md5pwd.value=md5(pwd.value);return true;}</script> </form>

使用隱藏域，不會出現顯示密碼變長

12.jQuery

jQuer庫，里面有大量的javascript

獲取jQuery

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> </head> <body></body> </html>

使用

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="lib/jquery-3.6.0.js"></script> </head> <body> <a href="" id="test-jquery">點我</a><script>//css選擇器$('#test-jquery').click(function () {alert('hello,jQuery');}) </script> </body> </html>

選擇器

//原生js，選擇器少 //標簽選擇器 document.getElementsByTagName(); //id document.getElementById(); //類 document.getElementsByClassName();//jQuery css 中的選擇器它全部能用 $('p').click()//標簽 $('#id1').click()//id $('.class2').click()//class

文檔工具站：https://jquery.cuishifeng.cn/

事件

鼠標事件，鍵盤事件，其他事件

鼠標事件：

mousedown事件：鼠標按下觸發
mouseup事件：松開鼠標時觸發
mouseover事件：點擊結束觸發
mousemove事件：鼠標移動觸發
mouseenter事件：光標進入元素上時觸發。
mouseleaver事件：用戶的光標離開元素時觸發。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="lib/jquery-3.6.0.js"></script><style>#divMove{width: 450px;height: 450px;border: 2px solid aquamarine;}</style> </head> <body>  mouse: <span id="mouseMove"></span> <div id="divMove">在這里移動鼠標試試 </div><script>//當網頁元素加載元素之后響應事件$(function () {$('#divMove').mousemove(function (e) {$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);})}); </script> </body> </html>

鍵盤事件

1.keydown()事件
當按鈕被按下時，發生 keydown 事件。

2.keypress()事件
keypress 當按鈕被按下時，會發生該事件，我們可以理解為按下并抬起同一個按鍵。

3.keyup事件
keyup 事件會在按鍵釋放時觸發，也就是你按下鍵盤起來后的事件

操作DOM

$('#test-ul li[name="python"]').text();//獲取值 $('#test-ul li[name="python"]').text('sss');//設置值$('#test-ul').html();//獲得值$('#test-ul').html('<strong>123</strong>');//操作值

css的操作

3.6版本是：

如果低版本是,隔開

$('#test-ul li[name="python"]').css({"color":"red"});

元素顯示和隱藏

$('#test-ul li[name="python"]').hide();//show()顯示 hide()隱藏 $('#test-ul li[name="python"]').toggle();//顯示與隱藏交換

總結

以上是生活随笔為你收集整理的JavaScript快速入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：怀化学院计算机科学专业排名,2019怀化
下一篇： Spring Boot缓存注解@Cach