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

javascript

JavaScript基础总结

發布時間：2024/9/19 javascript 49 豆豆

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

JavaScript學習

1.什么是JavaScript

JavaScript是運行在瀏覽器上的腳本語言，簡稱JS。最初叫做LiveScript。JavaScript讓瀏覽器更加生動，不再是單純的靜態頁面。JavaScript是網景公司的布蘭登艾奇開發的。

JavaScript運行在瀏覽器的內存當中。JavaScript不用程序員手動編譯，直接通過瀏覽器打開并解釋執行，JavaScript的目標程序以普通文本形式保存，這種語言都叫做“腳本語言”。

JSP和JS的區別

JSP:JavaServer Pages（隸屬于Java語言，運行在JVM中） JS：JavaScript（運行在瀏覽器上，腳本語言）

JavaScript事件和事件句柄

JavaScript是依靠事情去驅動的，然后執行對應程序。事件句柄是以HTML標簽的屬性存在的。當觸發某個事件時（如：鼠標點擊）運行JS代碼，這時運行的代碼就是注冊到對應句柄上的JS代碼。

2.JavaScript嵌入到HTML中的三種方式

嵌入方式一：

<body><input type="bottom" value="按鈕 οnclick="window.alert('hello')"/> </body>

嵌入方式二：

<body><script >/*這是注釋*//*暴露在腳本塊的代碼在頁面打開時執行。HTML中的代碼執行遵循至上而下執行。JavaScript的腳本塊能放在HTML的任何地方，甚至能放在<html></html>外面*/window.alert("hello"); //alert會阻塞頁面加載的作用</script></body>

第三種方式：

<body><script src="jscode.js">/*不能寫代碼*/</script> </body>

3.JavaScript的變量

強類型語句和弱類型語言對比

<body><script>/*java是一種強類型語言，Java存在編譯階段，編譯階段在編譯階段已確定了變量類型。一旦一個變量被指定了某個數據類型，如果不經過強制轉換（底層數據空間還是原來那個），那么它就永遠是這個數據類型了。如python也是強類型語言。JavaScript是弱類型語言，沒有編譯階段。數據類型可以被忽略的語言，一個變量可以賦不同數據類型的值。(類型不安全的語言)*/</script> </body>

JavaScript定義變量

javascript變量又分局部變量和全局變量。

全局變量定義在函數外部，全局變量的生命周期是：瀏覽器打開時聲明創建，瀏覽器關閉時銷毀。作用域是在任何位置都可以訪問

局部變量定義在函數內部，局部變量的生命周期是：函數調用時創建，函數結束時銷毀。作用域是函數內部。

javascript總是在不知不覺中就出人意料地創建了全局變量，其原因在于javascript的兩個特性。第一特性是javascript可直接使用變量，甚至無需聲明。第二特性是javascript有個暗示全局變量的概念，即任何變量，如果未經聲明，就為全局對象所有（也就像正確聲明過的全局變量一樣可以訪問）。

<body><script>//全局變量（函數體外變量）var i; //沒賦值是默認是undefinedalert("i="+i);//弱類型，值能隨意什么數據類型i=1;i=1.2;i=false;i="abc";myfunction=function(){//這里定義局部變量var j;}</script> </body>

4.JavaScript函數定義

<body> <script>/*語法格式：function 函數名(形參){函數體} 或者函數名 = function(形參){函數體}*/function sum(a,b){alert(a+b);} //定義函數sum(1,2); //調用函數</script><input type="button" value="求和" onclick="sum(1,2)"/> </body>

JavaScript函數

<body> <script>function sum(a,b){return a+b} /*JavaScript函數傳參無類型限制，傳入參數個數能隨意，不限制個數并且JavaScript函數不能重名，后聲明函數會覆蓋前聲明函數。（不能重載）*/var number;number=sum(1,2); alert(number); //3number=sum("hello");alert(number); //helloundefinednumber=sum();alert(number); //發現是NaNnumber=sum(1,2,3);alert(number); //3</script><input type="button" value="求和" onclick="sum(1,2)"/> </body>

5.JavaScript數據類型

js中有數據類型有：原始類型（基本類型），引用類型。

原始類型：Undefind，Number，String,Boolean,Null.
引用類型：Object以及Object的子類。
ES6后的新類型：symbol類型

<body><script>/*js中存在運算符typeof來動態獲取數據的類型。返回結果包含："undefind"，"number"， "string","boolean","object","function"*/function sum(a,b){if(typeof a=="number"&&typeof b=="number"){return a+b}}</script> </body>

Undefind類型：當一個變量沒有手動賦值，系統默認賦值undefind

Number類型：包含一般數字，NaN(不是數字),Infinity（無窮）。isNaN(數據)函數能判斷是不是數字，返回真假。還有函數parseInt(),parseFloat(),Math.ceil()等，Math.ceil()為向上取整。

Boolean類型：只有真和假。

String類型：就是字符串，有支持類（類比Java的構造器），String的父類是Object。var a ="123"為String類型，var b=new String(“123”);是Object類型。String類型也可以當成Object類型使用，通過‘.’來調用方法。

Object類型

<body><script>/*Object類有屬性：prototype，constructor函數：toString(),valueof(),toLocaleString()*//*JS中類的定義和函數一樣語法格式：function 類名(形參){類體} 或者類名 = function(形參){類體}當使用new來創建時當成類來處理。*/function myobject(){}var obj =new myobject(); //當成類在堆中創建對象。/*在Js中類的定義和構造函數的定義是放在一起來完成*/function myobj(a,b,c){this.a=a; this.b=b;this.c=c;//函數this.sum=function(){return this.a+this.b+this.c;}}var obj2 = new myobj(1,2,3);var s=obj2.sum();</script> </body>

object類型中通過prototype屬性動態擴展函數

擴展String類型的函數

6.js中的等同運算符和全等運算符

7.js中的事件句柄

將函數注冊到事件句柄中。使用方法一將函數注冊到事件句柄中：

<body><script>hello = function(){alert("hello");}</script> <input type="button" value="hello" onclick="hello()"/></body>

使用方法二進行函數注冊：

<body><input type="button" value="jack" id="bt"/><script>//在script中把函數注冊到事件句柄上jack = function(){alert("jack");}//通過document獲取標簽對象（document代表當前已經加載的HTML頁面）//注：頁面從上至下加載頁面，所以必須放在按鈕后面注冊var bt = document.getElementById("bt");bt.onclick=jack; //將jack函數注冊到onclick事件句柄上//將匿名函數注冊到onclick上bt.onclick=function(){alert("hello jack");}</script><script>/*注冊巧用，通過使用window.onload等頁面加載完成后再注冊在按鈕事件句柄上注冊函數不用考慮按鈕的位置。（window代表瀏覽器窗口） */window.onload=function(){document.getElementById("bt").onclick=function(){alert("hello js"); }}</script> </body>

標簽對象

這里解釋一下標簽對象，我們可以通過document來獲取標簽對象，通過對象我們可以修改標簽中的屬性。

<body><input type="button" id="bt"/><script>//標簽對象var bt = document.getElementById("bt");bt.onclick=function(){bt.type="text"; //按鈕變文本條}</script> </body>

8.js的事件

事件就是一個操作或情況，如用戶點擊按鈕這就是一個事件。js中有很多事件，常見的事件如下：

/*load 頁面加載事件click 點擊事件doubleclick 雙擊事件blur 焦點失去事件focus 獲得焦點事件keydown 鍵盤按下keyup 鍵盤彈起mousedown 鼠標按下事件mousemove 鼠標移動mouseup 鼠標鍵彈起...... */

對事件的處理

對事件處理是利用到注冊到事件句柄的函數。這里必須說明一下事件發生和事件處理和事件句柄的關系。這里通俗的解釋一下：

事件：一系列操作和情況（如：點擊鼠標，按鍵盤，頁面加載完畢）。
事件句柄：一種事件對應一個事件句柄，當事件發生時瀏覽器調用對應事件的事件句柄上的函數進行處理。
事件處理：對發生事件進行處理，通過回調函數（可以理解成程序員編寫瀏覽器調用的函數）進行處理。

<body><script>/*事件：頁面加載完畢對應的事件句柄：onloadevent瀏覽器傳入的事件參數*/window.onload = function(event){//在事件句柄上注冊的匿名函數（也是回調函數）alert(event+"頁面加載完畢");//頁面加載過程中不斷提醒}</script> </body>

通過js代碼觸發事件

出來使用者操作觸發事件，我們還可以通過js代碼人為的觸發事件。可以通過節點對象的click()等方法觸發事件，例子如下：

<body><script>window.onload=function(){//獲取節點對象(標簽對象)var form=document.getElementById("formuser");var subm=document.getElementById("submit");var username=document.getElementById("username");var password=document.getElementById("password");var reset=document.getElementById("reset");//處理提交按鈕的點擊事件subm.onclick=function(){form.submit(); //表單提交方法reset.click(); //觸發點擊事件(重置表單)}//處理焦點失去事件username.onblur=function(){//var regExp=/正則表達式/;if(regExp.test(username.value)){//提醒通過span.InnerText="通過";//或者給張小勾圖片(通過樣式修改)span.class="樣式";}else{span.InnerText="名字不合規格"}}password.onblur=function(){//var regExp=/正則表達式/;if(regExp.test(password.value)){//提醒通過span.InnerText="通過"; }else{span.InnerText="密碼不合規格"}}}</script><form action="http://localtion/" name="formuser" method="post">用戶名<input type="text" name=username id="username"/><span id=span1></span><br>密碼<input type="password" name=password id="password"/><span id=span1></span><br><input type="botton" value="提交" id="submit"/><input type="reset" value="重置" id="reset"></form></body>

9.js中的void(0)

這個void是真正意義的空路徑。當我們點擊一個超鏈接時不進行任何跳轉時，就用到void。

超鏈接標簽上的屬性href="javascript:void(0)"代表完全空路徑，不進行跳轉。其中的javascript表示后面聲明后面代碼為js代碼。

如果href="",代表跳轉到當前路徑，就是當前頁面頭部。

<a href="javascript:void(0)">超鏈接</a> <a href="">超鏈接</a> <a href="路徑">超鏈接</a>

10.js中的數組

因為js是弱類型語音，所有js中的數組能存儲任何類型的數據。并且會不出現越界問題，超出界限的下標的數據值為undefined。沒有賦值的數據也是undefined。

通過Array()內置類創建數組

js中的for in和with控制語句

for in 語句用法如下：

with用法如下：

11.什么是DOM？

以下內容來自：https://www.w3school.com.cn/htmldom/dom_intro.asp（W3school）

DOM 是 W3C（萬維網聯盟）的標準。

DOM 定義了訪問 HTML 和 XML 文檔的標準：

“W3C 文檔對象模型（DOM）是中立于平臺和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。”

W3C DOM 標準被分為 3 個不同的部分：

核心 DOM - 針對任何結構化文檔的標準模型
XML DOM - 針對 XML 文檔的標準模型
HTML DOM - 針對 HTML 文檔的標準模型

這個是比較官方的解釋，其實可以認為DOM就是js中的document對象,我們可以通過document對象動態地獲取到網頁上的HTML標簽對象。通過對其進行相應的操作（如獲取屬性值，修改屬性值等等）

12.正則表達式

很多語音的支持正則表達式，大部分編譯語音都支持正則表達式。正則表達式常常用于字符串匹配。如：檢測郵箱格式，手機號碼格式等等

創建正則表達式

常見的正則表達式

這里給個原文地址，以下內容均來自https://c.runoob.com/front-end/854

正則表達式這東西真的不好學，只能拿來主義了，這么多字符匹配規則，哪記得住。用時上網找。這東西有人專門研究的，大可不必過多深入。

13.js獲取時間

有時需要獲取系統時間。

當然這個時間是不會跳動的，如果你希望能動態得看到時間的跳轉。請參考下面的代碼：

<body><script>function disptime(){var t = new Date();document.getElementById("span1").innerHTML=t.toLocaleString();}window.onload=function(){var timeinterval=window.setInterval("disptime()",1000);//window.clearInterval(timeinterval); //清除訂時用的方法}</script><span id="span1"></span> </body>

14.什么是BOM

我們可以認為BOM就window對象。如果你想查看window對象相關屬性和方法請去查看：https://www.w3school.com.cn/js/js_window.asp，window相對簡單很多，看一下文檔基本都會。

總結

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

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

上一篇：微软承认部分网页版 Outlook 用户
下一篇： JavaScript中的箭头函数