js基礎--1

js的歷史

在上個世紀的1995年,當時的網景公司正憑借其Navigator瀏覽器成為Web時代開啟時最著名的第一代互聯網公司。

由于網景公司希望能在靜態HTML頁面上添加一些動態效果,于是叫Brendan Eich這哥們在兩周之內設計出了JavaScript語言。你沒看錯,這哥們只用了10天時間。

為什么起名叫JavaScript?原因是當時Java語言非常紅火,所以網景公司希望借Java的名氣來推廣,但事實上JavaScript除了語法上有點像Java,其他部分基本上沒啥關系。

JavaScript版本兼容性

JavaScript語言是在10天時間內設計出來的,雖然語言的設計者水平非常NB,但誰也架不住“時間緊,任務重”,所以,JavaScript有很多設計缺陷,我們后面會慢慢講到。

此外,由于JavaScript的標準——ECMAScript在不斷發展,最新版ECMAScript 6標準(簡稱ES6)已經在2015年6月正式發布了,所以,講到JavaScript的版本,實際上就是說它實現了ECMAScript標準的哪個版本。

由于瀏覽器在發布時就確定了JavaScript的版本,加上很多用戶還在使用IE6這種古老的瀏覽器,這就導致你在寫JavaScript的時候,要照顧一下老用戶,不能一上來就用最新的ES6標準寫,否則,老用戶的瀏覽器是無法運行新版本的JavaScript代碼的。

js的組成

ECMAScript

ECMAScript是一個標準。

因為網景開發了JavaScript,一年后微軟又模仿JavaScript開發了JScript,為了讓JavaScript成為全球標準,幾個公司聯合ECMA(European Computer Manufacturers Association)組織定制了JavaScript語言的標準,被稱為ECMAScript標準。

所以簡單說來就是,ECMAScript是一種語言標準,而JavaScript是網景公司對ECMAScript標準的一種實現。

那為什么不直接把JavaScript定為標準呢?因為JavaScript是網景的注冊商標。

不過大多數時候,我們還是用JavaScript這個詞。如果你遇到ECMAScript這個詞,簡單把它替換為JavaScript就行了。

DOM

DOM:Document Object Model。文檔對象模型,后邊我們會有專門的課程來講解DOM操作

BOM

BOM:Browser Object Model。瀏覽器對象模型,后邊我們也會專門來講bom操作

JavaScript的特點

(1).一種解釋性執行的腳本語言。

同其他腳本語言一樣,JavaScript也是一種解釋性語言,其提供了一個非常方便的開發過程。JavaScript的語法基本結構形式與C、C++、Java十分類似。但在使用前,不像這些語言需要先編譯,而是在程序運行過程中被逐行地解釋。JavaScript與HTML標識結合在一起,從而方便用戶的使用操作。

(2).一種基于對象的腳本語言。

其也可以被看作是一種面向對象的語言,這意味著JavaScript能運用其已經創建的對象。因此,許多功能可以來自于腳本環境中對象的方法與腳本的相互作用。

(3).一種簡單弱類型腳本語言。

其簡單性主要體現在:首先,JavaScript是一種基于Java基本語句和控制流之上的簡單而緊湊的設計,從而對于使用者學習Java或其他C語系的編程語言是一種非常好的過渡,而對于具有C語系編程功底的程序員來說,JavaScript上手也非常容易;其次,其變量類型是采用弱類型,并未使用嚴格的數據類型。

(4).一種相對安全腳本語言。

JavaScript作為一種安全性語言,不被允許訪問本地的硬盤,且不能將數據存入服務器,不允許對網絡文檔進行修改和刪除,只能通過瀏覽器實現信息瀏覽或動態交互。從而有效地防止數據的丟失或對系統的非法訪問。

(5).一種事件驅動腳本語言。

JavaScript對用戶的響應,是以事件驅動的方式進行的。在網頁(Web Page)中執行了某種操作所產生的動作,被稱為“事件”(Event)。例如按下鼠標、移動窗口、選擇菜單等都可以被視為事件。當事件發生后,可能會引起相應的事件響應,執行某些對應的腳本,這種機制被稱為“事件驅動”。

(6).一種跨平臺性腳本語言。

JavaScript依賴于瀏覽器本身,與操作環境無關,只要計算機能運行瀏覽器,并支持JavaScript的瀏覽器,就可正確執行,從而實現了“編寫一次,走遍天下”的夢想。

因此,JavaScript是一種新的描述語言,其可以被嵌入到HTML文件中。JavaScript語言可以做到響應使用者的需求事件(例如表單的輸入),而不需要任何的網絡來回傳輸資料。所以當一位使用者輸入一項資料時,此資料數據不用經過傳給服務器(server)處理再傳回來的過程,而直接可以被客戶端(client)的應用程序所處理。

3.JavaScript的優缺點

(1).JavaScript的優點:

<1>.JavaScript減少網絡傳輸。

在JavaScript這樣的用戶端腳本語言出現之前,傳統的數據提交和驗證工作均由用戶端瀏覽器通過網絡傳輸到服務器上進行。如果數據量很大,這對于網絡和服務器的資源來說實在是一種無形的浪費。而使用JavaScript就可以在客戶端進行數據驗證。

<2>.JavaScript方便操縱HTML對象。

JavaScript可以方便地操縱各種頁面中的對象,用戶可以使用JavaScript來控制頁面中各個元素的外觀、狀態甚至運行方式,JavaScript可以根據用戶的需要“定制”瀏覽器,從而使網頁更加友好。

<3>.JavaScript支持分布式運算。

JavaScript可以使多種任務僅在用戶端就可以完成,而不需要網絡和服務器的參與,從而支持分布式的運算和處理。

(2).JavaScript的局限性:

<1>.各瀏覽器廠商對JavaScript支持程度不同。

目前在互聯網上有很多瀏覽器,如Firefox、Internet Explorer、Opera等,但每種瀏覽器支持JavaScript的程度是不一樣的,不同的瀏覽器在瀏覽一個帶有JavaScript腳本的主頁時,由于對JavaScript的支持稍有不同,其效果會有一定的差距,有時甚至會顯示不出來。

<2>.“Web安全性”對JavaScript一些功能犧牲。

當把JavaScript的一個設計目標設定為“Web安全性”時,就需要犧牲JavaScript的一些功能。因此,純粹的JavaScript將不能打開、讀寫和保存用戶計算機上的文件。其有權訪問的唯一信息就是該JavaScript所嵌入的那個Web主頁中的信息,簡言之,JavaScript將只存在于它自己的小小世界—Web主頁里。

js的引入方式

在一對script標簽中引入js代碼

通過這種方式引入,可以把js代碼和html代碼寫在同一個文件中,但是注意:最好把js代碼寫在body之后,文檔的加載順序是從上到下加載的,先把頁面內容渲染出來,再加入用戶交互,這樣用戶體驗會大大加強。

示例代碼:

? ? ? ? ? ? //警告框

? ? ? ? ? ? alert('網絡錯誤!');

用瀏覽器打開效果如下:

引入外部js代碼

我們可以把js代碼寫在一個后綴為.js的文件中,然后把這個js文件引入html文檔里

操作步驟:

創建一個目錄文件夾例如為js,然后再這個文件夾中創建一個一個后綴為.js的一個js文件,例如叫做index.js;

在script標簽中的src中寫入js文件的路徑。

示例代碼:

alert語句

我們注意到上邊我們使用到了一個語句:alert('網絡錯誤!');。這是一個alert語句,用來在瀏覽器中彈出一個提示框的。

js中的變量

什么是變量?

變量首先是一個容器,可以用來存放數據,而且存放在這個容器中的數據可以發生變化。舉個例子:我有一個盆子,這個盆子中既可以裝沙子、也可以裝水,還可以裝糧食。這個盆子就可以看做一個變量,里邊裝的水、沙子、糧食就是存放在變量中的值。

在生活中,我們使用紙張來記錄和保存信息,而在計算機中,我們使用變量來保存信息。變量的概念基本上和初中代數的方程變量是一致的,只是在計算機程序中,變量不僅可以是數字,還可以是任意數據類型。

如何定義變量?

使用關鍵字var+變量名 + =(賦值號) + 值 + ;就可以定義一個變量。

示例代碼:定義一個變量:

var a = 12;

以上代碼定義了一個變量a,變量里保存的值是數值12。

變量的命名規則

變量在JavaScript中就是用一個變量名表示,變量名是大小寫英文、數字、$和_的組合,且不能用數字開頭。變量名也不能是JavaScript的關鍵字,如if、while等。聲明一個變量用var語句,比如:

var a; // 申明了變量a,此時a的值為undefined

var $b = 1; // 申明了變量$b,同時給$b賦值,此時$b的值為1

var s_007 = '007'; // s_007是一個字符串

var Answer = true; // Answer是一個布爾值true

var t = null; // t的值是null

變量名也可以是中文,但是由于中文的兼容性不好,所以不要使用中文作為變量名。

變量命名規范:

類型前綴

首字母大寫

類型 前綴 類型 實例

數組 a Array aItems

布爾值 b Boolean bItsComplete

浮點數 f Float fPrice

函數 fn Function fnHandler

整數 i Integer iTtemCount

對象 o Object oDiv1

正則表達式 re ReExp reEmaolCheck

字符串 s String sUserName

變體變量 v Variant vAnything

js的基本數據類型

Number

number是數值類型,在生活中,我們把沒有小數位的數稱作整數,帶有小數位的數稱作小數(計算機中叫浮點數),JavaScript不區分整數和浮點數,統一用Number表示,以下都是合法的Number類型:

var a = 123; // 整數123

var a = 0.456; // 浮點數0.456

var a = 1.2345e3; // 科學計數法表示1.2345x1000,等同于1234.5

var a = -99; // 負數

NaN; // NaN表示Not a Number,當無法計算結果時用NaN表示

Infinity; // Infinity表示無限大,當數值超過了JavaScript的Number所能表示的最大值時,就表示為Infinity

Number類型的數可以進行加、減、乘、除、求余、自增、自減運算

字符串

字符串是以單引號'或雙引號"括起來的任意文本,比如'abc',"xyz"等等。請注意,''或""本身只是一種表示方式,不是字符串的一部分,因此,字符串'abc'只有a,b,c這3個字符。

如果'本身也是一個字符,那就可以用""括起來,比如"I'm OK"包含的字符是I,',m,空格,O,K這6個字符。

如果字符串內部既包含'又包含"怎么辦?可以用轉義字符\來標識,比如:

'I\'m \"OK\"!';

表示的字符串內容是:I'm "OK"!

轉義字符

`表示轉義字符,在計算機中,有些特殊的字符被系統賦予了特殊含義,如'表示括住字符串。但是想輸出一個'怎么辦?我們就可以像上邊一樣使用轉移字符`,在特殊字符前添加一個轉義字符,計算機就會把這個特殊字符當做普通的字符串來處理。

布爾值

在計算機中,我們用真表示條件成立,用假表示條件不成立。真和假就是布爾值(bollean)。

在js中,我們使用true來表示真,用false來表示假。布爾值只有真和假,沒有第三個值。布爾值經常用在條件判斷中。

var bo1 = true;//布爾類型 結果true和false

//typeof()獲取變量的數據類型,(在不知道變量類型的情況下,也可以通過ypeof()獲取)

alert(typeof(bo1));

null和undefined

null表示一個“空”的值,它和0以及空字符串''不同,0是一個數值,''表示長度為0的字符串,而null表示“空”。

在其他語言中,也有類似JavaScript的null的表示,例如Java也用null,Swift用nil,Python用None表示。但是,在JavaScript中,還有一個和null類似的undefined,它表示“未定義”。

JavaScript的設計者希望用null表示一個空的值,而undefined表示值未定義。事實證明,這并沒有什么卵用,區分兩者的意義不大。大多數情況下,我們都應該用null。undefined僅僅在判斷函數參數是否傳遞的情況下有用。

拓展 undefined類型

//如果我們不給某個變量設置值,則為undefined類型;

var color;

alert(typeof color);

js中的運算符

算數運算符

+加

-減

*乘

/除

%求余(取模)

賦值運算符

=賦值

+=加后賦值

-= 減后賦值

*= 乘后賦值

/=除后賦值

%=模后賦值

關系運算符

>大于

<小于

<=小于等于

>=大于等于

==等于(如果左右兩邊類型不一致,則隱式轉換為一致的類型后再比較)

===等于(如果左右兩邊類型不一致,則返回false)

!=不等于(如果左右兩邊類型不一致,則隱式轉換為一致的類型后再比較)

!==不等于(不轉換類型,直接比較)

邏輯運算符

&&與

||或

!非

js的邏輯運算符

邏輯運算產生的結果是一個布爾值,js中有三種邏輯運算符:

&&與

||或

!非

邏輯與&&

書寫方式:表達式一 && 表達式二。邏輯與表達式為真的條件是:左右兩邊的表達式同時成立時,整個邏輯與表達式才成立,只要有一個表達式不成立,整個邏輯表達式為假。

邏輯或||

書寫方式:表達式一 || 表達式二。邏輯或表達式為真的條件是:左右兩邊的表達式,這要其中一個為真,則整個表達式為真。只有在兩邊表達式同時為假時,整個表達式才為假。

邏輯非!

書寫方式為:!表達式。邏輯非是對原有的表達式結果進行取反操作。如原表達式為真,則進行邏輯非操作后,返回的值是假;元表達式為假,進行邏輯非運算后表達式為真。

? ? ?

? ?

? ?

? ?

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 近期開始接觸學習extjs框架。該框架是基于JavaScript的。為了更好地理解學習extjs,必然需要先對Ja...
    六尺帳篷閱讀 820評論 2 12
  • 《ijs》速成開發手冊3.0 官方用戶交流:iApp開發交流(1) 239547050iApp開發交流(2) 10...
    葉染柒丶閱讀 5,321評論 0 7
  • 點擊獲取課程視頻及實例資料 JS注釋 單行注釋:在注釋內容前加上// 多行注釋:與CSS相似使用/*和*/包裹 J...
    jdzhangxin閱讀 273評論 0 0
  • 樓臺醉酒千杯少 皓月空對相思人 人兒相隔萬萬里 何日才能共譜琴 青梅竹馬難忘卻 怎奈世事惹人休 待得功成與名就 歸...
    格勒閱讀 258評論 2 2
  • 這本就是一個不平凡的夜晚 月亮透明,星光閃閃,天空清澈 萬物安靜地...
    城顧閱讀 252評論 0 2