JavaScript是一種屬于網(wǎng)絡(luò)的腳本語言,已經(jīng)被廣泛用于Web應(yīng)用開發(fā),常用來為網(wǎng)頁添加各式各樣的動態(tài)功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現(xiàn)自身的功能的。

1.是一種解釋性腳本語言(代碼不進行預(yù)編譯)。

2.主要用來向HTML(標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用)頁面添加交互行為。

3.可以直接嵌入HTML頁面，但寫成單獨的js文件有利于結(jié)構(gòu)和行為的分離。

4.跨平臺特性，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺下運行(如Windows、Linux、Mac、Android、iOS等)。

Javascript腳本語言同其他語言一樣，有它自身的基本數(shù)據(jù)類型，表達式和算術(shù)運算符及程序的基本程序框架。Javascript提供了四種基本的數(shù)據(jù)類型和兩種特殊數(shù)據(jù)類型用來處理數(shù)據(jù)和文字。而變量提供存放信息的地方，表達式則可以完成較復(fù)雜的信息處理。

2.日常用途

嵌入動態(tài)文本于HTML頁面

對瀏覽器事件做出響應(yīng)

讀寫HTML元素

在數(shù)據(jù)被提交到服務(wù)器之前驗證數(shù)據(jù)

檢測訪客的瀏覽器信息

控制cookies，包括創(chuàng)建和修改等

基于Node.js技術(shù)進行服務(wù)器端編程

3.基本特點

(1)腳本語言 JavaScript是一種解釋型的腳本語言,C、C++等語言先編譯后執(zhí)行,而JavaScript是在程序的運行過程中逐行進行解釋。

(2)基于對象 JavaScript是一種基于對象的腳本語言,它不僅可以創(chuàng)建對象,也能使用現(xiàn)有的對象。

(3)簡單 JavaScript語言中采用的是弱類型的變量類型,對使用的數(shù)據(jù)類型未做出嚴格的要求,是基于Java基本語句和控制的腳本語言,其設(shè)計簡單緊湊。

(4)動態(tài)性 JavaScript是一種采用事件驅(qū)動的腳本語言,它不需要經(jīng)過Web服務(wù)器就可以對用戶的輸入做出響應(yīng)。在訪問一個網(wǎng)頁時,鼠標(biāo)在網(wǎng)頁中進行鼠標(biāo)點擊或上下移、窗口移動等操作JavaScript都可直接對這些事件給出相應(yīng)的響應(yīng)。

(5)跨平臺性 JavaScript腳本語言不依賴于操作系統(tǒng),僅需要瀏覽器的支持。因此一個JavaScript腳本在編寫后可以帶到任意機器上使用,前提上機器上的瀏覽器支 持JavaScript腳本語言,目前JavaScript已被大多數(shù)的瀏覽器所支持。

不同于服務(wù)器端腳本語言，例如PHP與ASP，JavaScript主要被作為客戶端腳本語言在用戶的瀏覽器上運行，不需要服務(wù)器的支持。所以在早期程序員比較青睞于JavaScript以減少對服務(wù)器的負擔(dān)，而與此同時也帶來另一個問題：安全性。

而隨著服務(wù)器的強壯，雖然程序員更喜歡運行于服務(wù)端的腳本以保證安全，但JavaScript仍然以其跨平臺、容易上手等優(yōu)勢大行其道。同時，有些特殊功能(如AJAX)必須依賴Javascript在客戶端進行支持。隨著引擎如V8和框架如Node.js的發(fā)展，及其事件驅(qū)動及異步IO等特性，JavaScript逐漸被用來編寫服務(wù)器端程序。

JavaScript的存在形式和存放位置

1.JavaScript的存在形式

js的兩種存在形式

var ab = 123;

alert(ab)

2.JavaScript的存放位置

HTML的head中

HTML的body代碼塊底部(推薦)

由于HTML代碼是從上向下執(zhí)行，如果head中的js代碼耗時嚴重，就會導(dǎo)致用戶長時間無法看到頁面，如果放置在body代碼塊底部，那么即使JS代碼耗時嚴重，也不會影響用戶看到頁面效果，只是js實現(xiàn)特效慢而已。

alert('123');

JavaScript變量

JavaScript中變量的聲明是一個非常容易出現(xiàn)錯誤的點，局部變量必須以var開頭，如果未使用var，則默認表示聲明的是全局變量。

js變量的定義

//全局變量

name = 'zhangsan'

function func(){

//局部變量

var age = 18;

}

//全局變量

gender = 'male'

JavaScript中代碼的注釋：

單行注釋：//

多行注釋：/* */

說明：此注釋僅在script中生效

數(shù)據(jù)類型

JavaScript 中的數(shù)據(jù)類型分為原始類型和對象類型：

原始類型

數(shù)字

字符串

布爾值

對象類型

數(shù)組

“字典”

...

特別的，數(shù)字、布爾值、null、undefined、字符串是不可變。

null是JavaScript語言的關(guān)鍵字，它表示一個特殊值，常用來描述“空值”。

undefined是一個特殊值，表示變量未定義

1、數(shù)字(Number)

JavaScript中不區(qū)分整數(shù)值和浮點數(shù)值，JavaScript中所有數(shù)字均用浮點數(shù)值表示。

轉(zhuǎn)換：

parseInt(..) ? ?將某值轉(zhuǎn)換成數(shù)字，不成功則NaN

parseFloat(..)?將某值轉(zhuǎn)換成浮點數(shù)，不成功則NaN

特殊值：

NaN，非數(shù)字?？墒褂?isNaN(num) 來判斷。

Infinity，無窮大?？墒褂?isFinite(num) 來判斷。

更多的數(shù)值運算

常量

Math.E

常量e，自然對數(shù)的底數(shù)。

Math.LN10

10的自然對數(shù)。

Math.LN2

2的自然對數(shù)。

Math.LOG10E

以10為底的e的對數(shù)。

Math.LOG2E

以2為底的e的對數(shù)。

Math.PI

常量figs/U03C0.gif。

Math.SQRT1_2

2的平方根除以1。

Math.SQRT2

2的平方根。

靜態(tài)函數(shù)

Math.abs( )

計算絕對值。

Math.acos( )

計算反余弦值。

Math.asin( )

計算反正弦值。

Math.atan( )

計算反正切值。

Math.atan2( )

計算從X軸到一個點的角度。

Math.ceil( )

對一個數(shù)上舍入。

Math.cos( )

計算余弦值。

Math.exp( )

計算e的指數(shù)。

Math.floor( )

對一個數(shù)下舍人。

Math.log( )

計算自然對數(shù)。

Math.max( )

返回兩個數(shù)中較大的一個。

Math.min( )

返回兩個數(shù)中較小的一個。

Math.pow( )

計算xy。

Math.random( )

計算一個隨機數(shù)。

Math.round( )

舍入為最接近的整數(shù)。

Math.sin( )

計算正弦值。

Math.sqrt( )

計算平方根。

Math.tan( )

計算正切值。

2、字符串(String)

字符串是由字符組成的數(shù)組，但在JavaScript中字符串是不可變的：可以訪問字符串任意位置的文本，但是JavaScript并未提供修改已知字符串內(nèi)容的方法。

常見功能：

obj.length 長度

obj.trim() 移除空白

obj.trimLeft()

obj.trimRight)

obj.charAt(n) 返回字符串中的第n個字符

obj.concat(value, ...) 拼接

obj.indexOf(substring,start) 子序列位置

obj.lastIndexOf(substring,start) 子序列位置

obj.substring(from, to) 根據(jù)索引獲取子序列

obj.slice(start, end) 切片

obj.toLowerCase() 大寫

obj.toUpperCase() 小寫

obj.split(delimiter, limit) 分割

obj.search(regexp) 從頭開始匹配，返回匹配成功的第一個位置(g無效)

obj.match(regexp) 全局搜索，如果正則中有g(shù)表示找到全部，否則只找到第一個。

obj.replace(regexp, replacement) 替換，正則中有g(shù)則替換所有，否則只替換第一個匹配項，

$數(shù)字：匹配的第n個組內(nèi)容；

$&：當(dāng)前匹配的內(nèi)容；

$`：位于匹配子串左側(cè)的文本；

$'：位于匹配子串右側(cè)的文本

$$：直接量$符號

3、布爾類型(Boolean)

布爾類型僅包含真假，與Python不同的是其首字母小寫。

== ? ? ?比較值相等

!= ? ? ? 不等于

=== ? 比較值和類型相等

!=== ?不等于

|| ? ? ? ?或

&& ? ? ?且

4、數(shù)組

JavaScript中的數(shù)組類似于Python中的列表

常見功能：

obj.length 數(shù)組的大小

obj.push(ele) 尾部追加元素

obj.pop() 尾部獲取一個元素

obj.unshift(ele) 頭部插入元素

obj.shift() 頭部移除元素

obj.splice(start, deleteCount, value, ...) 插入、刪除或替換數(shù)組的元素

obj.splice(n,0,val) 指定位置插入元素

obj.splice(n,1,val) 指定位置替換元素

obj.splice(n,1) 指定位置刪除元素

obj.slice( ) 切片

obj.reverse( ) 反轉(zhuǎn)

obj.join(sep) 將數(shù)組元素連接起來以構(gòu)建一個字符串

obj.concat(val,..) 連接數(shù)組

obj.sort( ) 對數(shù)組元素進行排序

其他

1、序列化

JSON.stringify(obj) ? 序列化

JSON.parse(str) ? ? ? ?反序列化

2、轉(zhuǎn)義

decodeURI( ) ? ? ? ? ? ? ? ? ? URl中未轉(zhuǎn)義的字符

decodeURIComponent( ) ? URI組件中的未轉(zhuǎn)義字符

encodeURI( ) ? ? ? ? ? ? ? ? ? URI中的轉(zhuǎn)義字符

encodeURIComponent( ) ? 轉(zhuǎn)義URI組件中的字符

escape( ) ? ? ? ? ? ? ? ? ? ? ? ? 對字符串轉(zhuǎn)義

unescape( ) ? ? ? ? ? ? ? ? ? ? 給轉(zhuǎn)義字符串解碼

URIError ? ? ? ? ? ? ? ? ? ? ? ? 由URl的編碼和解碼方法拋出

3、eval

JavaScript中的eval是Python中eval和exec的合集，既可以編譯代碼也可以獲取返回值。

eval()

EvalError ? 執(zhí)行字符串中的JavaScript代碼

4、正則表達式

JavaScript中支持正則表達式，其主要提供了兩個功能：

test(string) ? ? 用于檢測正則是否匹配

exec(string) ? ?用于獲取正則匹配的內(nèi)容

注：定義正則表達式時，“g”、“i”、“m”分別表示全局匹配，忽略大小寫、多行匹配。

5、時間處理

JavaScript中提供了時間相關(guān)的操作，時間操作中分為兩種時間：

時間統(tǒng)一時間

本地時間(東8區(qū))

更多操作參見：http://www.shouce.ren/api/javascript/main.html

語句和異常

JavaScript中支持兩個中條件語句，分別是：if 和 switch

if(條件){

}else if(條件){

}else{

}

switch(name){

case '1':

name = xiaoming;

break;

case '2':

name = xiaoxiang;

break;

default :

name = yuemei;

}

2、循環(huán)語句

JavaScript支持三種循環(huán)語句，分別是：

第一種：

var names = ["xiaoming", "xiaoxiang", "yuemei"];

for(var i=0;i

console.log(i);

console.log(names[i]);

}

第二種：

var names = ["xiaoming", "xiaoxiang", "yuemei"];

for(var index in names){

console.log(index);

console.log(names[index]);

}

第三種：

while(條件){

// break;

// continue;

}

3、異常處理

try {

//這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結(jié)束運行

}

catch (e) {

// 如果try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執(zhí)行。

//e是一個局部變量，用來指向Error對象或者其他拋出的對象

}

finally {

//無論try中代碼是否有異常拋出(甚至是try代碼塊中有return語句)，finally代碼塊中始終會被執(zhí)行。

}

注：主動跑出異常 throw Error('xxxx')

函數(shù)

1、基本函數(shù)

JavaScript中函數(shù)基本上可以分為一下三類：

// 普通函數(shù)

function func(arg){

return true;

}

// 匿名函數(shù)

var func = function(arg){

return "xiaoming";

}

// 自執(zhí)行函數(shù)

(function(arg){

console.log(arg);

})('123')

注意：對于JavaScript中函數(shù)參數(shù)，實際參數(shù)的個數(shù)可能小于形式參數(shù)的個數(shù)，函數(shù)內(nèi)的特殊值arguments中封裝了所有實際參數(shù)。

2.作用域

JavaScript的作用域一直以來是前端開發(fā)中比較難以理解的知識點，對于JavaScript的作用域主要記住5句話

“JavaScript中無塊級作用域”

在JAVA或C#中存在塊級作用域，即：大括號也是一個作用域

public static void main ()

{

if(1==1){

String name = "seven";

}

System.out.println(name);

}

// 報錯

public static void Main()

{

if(1==1){

string name = "seven";

}

Console.WriteLine(name);

}

// 報錯

在JavaScript語言中無塊級作用域

function fun1(){

if(1==1){

var name = 'xiaoming';

}

console.log(name);

}

// 輸出： xiaoming

補充：標(biāo)題之所以添加雙引號是因為JavaScript6中新引入了 let 關(guān)鍵字，用于指定變量屬于塊級作用域

JavaScript采用函數(shù)作用域

在JavaScript中每個函數(shù)作為一個作用域，在外部無法訪問內(nèi)部作用域中的變量

function fun1(){

var innerValue = 'xiaoliang';

}

fun1();

console.log(innerValue);

// 報錯：Uncaught ReferenceError: innerValue is not defined

JavaScript的作用域鏈

由于JavaScript中的每個函數(shù)作為一個作用域，如果出現(xiàn)函數(shù)嵌套函數(shù)，則就會出現(xiàn)作用域鏈。

xo = 'alex';

function Func(){

var xo = "seven";

function inner(){

var xo = 'alvin';

console.log(xo);

}

inner();

}

Func();

如上述代碼則出現(xiàn)三個作用域組成的作用域鏈，如果出現(xiàn)作用域鏈后，那么尋找變量時候就會出現(xiàn)順序，對于上述實例：

當(dāng)執(zhí)行console.log(xo)時，其尋找順序為根據(jù)作用域鏈從內(nèi)到外的優(yōu)先級尋找，如果內(nèi)層沒有就逐步向上找，直到?jīng)]找到拋出異常。

JavaScript的作用域鏈執(zhí)行前已創(chuàng)建

JavaScript的作用域在被執(zhí)行之前已經(jīng)創(chuàng)建，日后再去執(zhí)行時只需要按照作用域鏈去尋找即可。

示例一：

xo = 'alex';

function Func(){

var xo = "seven";

function inner(){

console.log(xo);

}

return inner;

}

var ret = Func();

ret();

// 輸出結(jié)果： seven

上述代碼，在函數(shù)被調(diào)用之前作用域鏈已經(jīng)存在：

全局作用域 -> Func函數(shù)作用域 -> inner函數(shù)作用域

當(dāng)執(zhí)行【ret();】時，由于其代指的是inner函數(shù)，此函數(shù)的作用域鏈在執(zhí)行之前已經(jīng)被定義為：全局作用域 -> Func函數(shù)作用域 -> inner函數(shù)作用域，所以，在執(zhí)行【ret();】時，會根據(jù)已經(jīng)存在的作用域鏈去尋找變量。

示例二：

xo = 'alex';

function Func(){

var xo = "eirc";

function inner(){

console.log(xo);

}

xo = 'seven';

return inner;

}

var ret = Func();

ret();

// 輸出結(jié)果： seven

上述代碼和示例一的目的相同，也是強調(diào)在函數(shù)被調(diào)用之前作用域鏈已經(jīng)存在：

全局作用域 -> Func函數(shù)作用域 -> inner函數(shù)作用域

不同的時，在執(zhí)行【var ret = Func();】時，Func作用域中的xo變量的值已經(jīng)由 “eric” 被重置為 “seven”，所以之后再執(zhí)行【ret();】時，就只能找到“seven”。

示例三：

xo = 'alex';

function Bar(){

console.log(xo);

}

function Func(){

var xo = "seven";

return Bar;

}

var ret = Func();

ret();

// 輸出結(jié)果： alex

上述代碼，在函數(shù)被執(zhí)行之前已經(jīng)創(chuàng)建了兩條作用域鏈：

全局作用域 -> Bar函數(shù)作用域

全局作用域 -> Func函數(shù)作用域

當(dāng)執(zhí)行【ret();】時，ret代指的Bar函數(shù)，而Bar函數(shù)的作用域鏈已經(jīng)存在：全局作用域 -> Bar函數(shù)作用域，所以，執(zhí)行時會根據(jù)已經(jīng)存在的作用域鏈去尋找。

聲明提前

在JavaScript中如果不創(chuàng)建變量，直接去使用，則報錯：

console.log(xxoo);

// 報錯：Uncaught ReferenceError: xxoo is not defined

JavaScript中如果創(chuàng)建值而不賦值，則該值為 undefined，如：

var xxoo;

console.log(xxoo);

// 輸出：undefined

在函數(shù)內(nèi)如果這么寫：

function Foo(){

console.log(xo);

var xo = 'seven';

}

Foo();

// 輸出：undefined

上述代碼，不報錯而是輸出 undefined，其原因是：JavaScript的函數(shù)在被執(zhí)行之前，會將其中的變量全部聲明，而不賦值。所以，相當(dāng)于上述實例中，函數(shù)在“預(yù)編譯”時，已經(jīng)執(zhí)行了var xo；所以上述代碼中輸出的是undefined。

參考文章：http://www.cnblogs.com/wupeiqi/p/5649402.html

總結(jié)

以上是生活随笔為你收集整理的python写前端代码_python学习之路前端-JavaScript的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。