如鵬網靜態Web開發第三章：Javascript

時間 2019-11-21

標籤靜態 web 開發第三 javascript 欄目網站開發简体版

原文原文鏈接

本章主幹知識點：javascript

一、定義js的三種方式：寫到html標籤中；寫到html的script標籤中；寫到單獨的js文件中；html

二、JavaScript中類型的轉換java

三、function、匿名functionsql

四、js中字符串常見用法；編程

五、js中的萬能集合Array：是數組「['aa','bbb']」、又是字典{name:'rupeng',age":8}json

--------------------------------------------------------------------------------------數組

什麼是JavaScript(簡稱js)？

JavaScript是一種腳本語言。

常見的腳本:cmd,t-sql,vbscript等等都屬於腳本語言

Javascript的做用

HTML只是描述網頁長相的標記語言，沒有計算、判斷能力，若是全部計算、判斷（好比判斷文本框是否爲空、判斷兩次密碼是否輸入一致）都放到服務器端執行的話網頁的話頁面會很是慢、用起來也很難用，對服務器的壓力也很大，所以要求能在瀏覽器中執行一些簡單的運算、判斷。JavaScript就是一種在瀏覽器端執行的腳本語言。

能夠直接嵌入HTML頁面，但寫成單獨的 js文件有利於結構和行爲的分離。

跨平臺特性，在絕大多數瀏覽器的支持下，能夠在多種平臺下運行（如 Windows、 Linux、Mac、Android、iOS等）。

--------------------------------------------------------------------------------------

JS的開發環境及動態語言

WebStorm,: Ctrl+/ 註釋快捷鍵

Editplus,

Nodpad++,

Dreamweaver MyEclipse,

Visual Studio201*;

JS是很是靈活的動態語言，開發工具中的JS完成功能只是一個輔助、建議。

「.」出來的成員調用可能不能用，

「.」不出來的成員也許也能調用，所以不要由於「點兒不出來」而擔憂代碼有問題。

編寫js時，本身應該清楚當前對象有些什麼成員，不能依賴智能提示。

動態語言：在運行時肯定數據類型。

JavaScript基本組成

Dom(文檔對象模型)由著名的w3c制定

(封裝好的一些函數庫在html於xml中都是用dom)

DOM：Document Object Model

--------------------------------------------------------------------------------------

JavaScript語法及注意事項

大小寫敏感 :JavaScript嚴格區分大小寫。(n與N是兩個不一樣的變量。)

弱類型語言,聲明變量用var:var num=10;num=true;能夠

字符串能夠用單引號:var msg=‘堅持不泄’

每句話後面分號:

雖然若是語句結束後能夠不加分號,建議有個好的代碼風格,手動加「分號」的好處：1>能夠放心的作js壓縮（壓縮多餘空白）2>提升代碼可讀性.

Js的註釋，與C#、Java的相同（//單行註釋(推薦)、/* 多行註釋 */

不少語法與Java語言或C#語言相似。有Java語言或C#語言編程基礎的同窗學習JavaScript語法會很容易上手。

--------------------------------------------------------------------------------------

JavaScript初級

編寫第一個JavaScript程序：個人年齡是18歲

編寫第二個JavaScript程序:顯示當前時間

網頁中的JavaScript代碼應該放到<script></script>標籤中，<script>標籤能夠放到<head>、<body>等任意位置，而且一個頁面能夠有不止一對<script></script>標籤。放到<head>中的<script>在body加載以前就已經運行了。寫在body中的<script>是隨着頁面的加載而一個個執行的。

alert()函數是彈出一個消息窗口。new Date()建立一個Date對象， 默認時間是當前時間。

Javascript若是遇到錯誤， 有錯誤的<script></script>中的代碼不會執行，可是不會影響後面的而其餘<script></script>代碼和html的顯示。（演示）

--------------------------------------------------------------------------------------

JavaScript導入和錯誤

外部導入 :

導入外部JavaScript文件：除了能夠在頁面中聲明JavaScript之外，還能夠將JavaScript寫到單獨的js文件中，而後在頁面中引入：<script src=「test.js」type=「text/javascript」></script>。

聲明到單獨的js文件的好處是多頁面也能夠共享、減少網絡流量。

能夠將導入外部文件的<script>標籤寫在文檔最後，提升用戶體驗。

注意：

在<script></script>標籤中不要出現’</script>’元素。

錯誤 :

--------------------------------------------------------------------------------------

JavaScript的事件

JavaScript中也有「事件」的概念。

案例1:

單擊一個按鈕顯示當前時間。就觸發了一個事件

案例2:

單擊一個超連接顯示當前時間。

超連接爲「死鏈」時，使用#與javascript:void(0);的區別。void(0)沒有用的值,不會去任何地方,就沒有意義了

--------------------------------------------------------------------------------------

JavaScript變量聲明

變量命名規則:以字母、下劃線或$開頭，中間能夠包括字母、數字、下劃線或$。（變量命名中多了一個$）,通常不要用$開頭。

JavaScript中便可以使用雙引號聲明字符串，也可使用單引號聲明字符串。主要是爲了方便和html集成，避免轉義符的麻煩。

JavaScript是動態類型，所以

var i=10;i=‘test’是合法的。

var m,n,x,y=10;是否合法

-------------------------------------------------------------------------------------

JavaScript數據類型

Boolean（布爾）、 Number（數字）、 String（字符串）、 Undefined（未定義）、 Null（空對象）、 Object（對象類型）、Function

引用類型：對象、數組、函數。

原始數據類型： 數值、布爾值、null 、字符串

值類型的變量不能動態添加成員。

引用類型的對象能夠動態添加成員。(演示) new出來的和funcation。

變量是否是對象就看後面有沒有new。

undefined與其餘值計算獲得的結果不是咱們想要的。

一個變量聲明瞭，沒有初值那麼結果就是 undefined.屬於未知狀態

一個變量賦值爲 null。空對象。表示的是還沒有存在的對象.已知狀態

typeof能夠作什麼

Instanceof能夠作什麼

-------------------------------------------------------------------------------------

JavaScript中的「==」與「===」

var n1=‘1’,n2=1;

alert(n1==n2);

alert(n1===n2);

上面的結果是什麼 ?

var n1=‘1’;

var n2=new Number(1);

alert(n1==n2);

alert(n1===n2);

特殊狀況

alert(undefined==null);

alert(undefined===null);

-------------------------------------------------------------------------------------

JavaScript中判斷變量是否可用

JavaScript中判斷已聲明變量、參數是否初始化(可用)的方法：

假設已有變量x：

if (typeof(x) !=‘undefined’ && x!=null) { alert("可用"); }

if(x) { alert(‘變量可用！’); } else { alert(‘變量不可用！’); } //null、undefined、’’、0都認爲是false

當x聲明但沒有賦值，或x爲null，或x爲0時，都表示不可用！// if(x),返回false

推薦用最後一種方法。但若是x有可能沒有聲明，則只能用typeof判斷（不然會報錯）。

常常會遇到的一個場景：if語句的小括號中直接寫一個變量。各類值與Boolean之間的關係。

若是肯定x存在使用：if(x){}

若是不肯定X是否存在使用：if(typeof(x)!='undefined' && x!=null){}

-------------------------------------------------------------------------------------

JavaScript轉義

JavaScript中字符串一樣須要轉義符。

想在頁面輸出：

C:\Users\Administrator\Desktop\代碼\logo.png如何作?

常見轉義符：

\t、\n、\’、\」、\\

if-else、for、while、do-while、switch、continue、break的用法都很是的簡單

for循環稍有差別：for(var i=0;i<10;i++){ … }

注：switch判斷時，是「全等於」，===

案例 :經過switch判斷變量n=10是數字仍是字符串顯示給與用戶

-------------------------------------------------------------------------------------

類型轉換

parseInt(arg)將指定的字符串，轉換成整數 NaN

parseFloat(arg)將指定的字符串，轉換成浮點數

Number(arg)把給定的值(任意類型)轉換成數字（能夠是整數或浮點數）；轉換的是整個值，而不是部分值。若是該字符串不能徹底轉換爲整型，則返回NaN。 （Not a Number）

isNaN(arg)，判斷arg是否爲一個非數字（NaN）,NaN與NaN也不相等。

String(arg)把給定的值(任意類型)轉換成字符串；

Boolean(arg)把給定的值(任意類型)轉換成 Boolean 型；

-------------------------------------------------------------------------------------

函數聲明

JavaScript中聲明函數的方式：

不須要聲明返回值類型、參數類型。 函數定義以function開頭。

JavaScript中不像C#和java那樣要求全部路徑都有返回值 沒有返回值就是 undefined。

undefined:沒有定義；沒有返回值。

無參數無返回值的方法,無參數有返回值的方法,有參數有返回值的方法。（ 演示）

代碼演示，結論:JavaScript中沒有方法重載。

易錯：自定義函數名不要和js內置、dom內置方法重名，好比selectAll、focus等函數名不要用。//不要與系統函數重名。(在單擊事件中調用本身定義的focus方法，有問題。與系統的focus()方法重名了)

通常在js中編寫大括號都是直接跟在後面。

演示return的例子

-------------------------------------------------------------------------------------

arguments 對象

代碼演示

結論:JavaScript中沒有方法重載。

方法中寫參數叫命名參數

用戶調用計算多個數的和的方法，如何獲取方法中有多少個參數?

-------------------------------------------------------------------------------------

匿名函數

var f1=function(p1,p2){ return p1+p2; };//將函數賦值給一個變量

匿名函數無法調用,只能賦值給一個變量,因爲是賦值語句,後面要加分號

(function(p1,p2){alert(p1+p2);})(20,30);

這種匿名函數的用法在jQuery中的很是多。

-------------------------------------------------------------------------------------

看看執行結果

var x=1;

var y=0;

var z=0;

var add=function (n){n=n+1;return n}

y=add(x);

add=function(n){n=n+3;return n;}

z=add(x);

alert(y+’,’+z);//執行結果？

-------------------------------------------------------------------------------------

匿名函數測試練習

function aa()

{

alert("aaa");

return function(){alert("bbb");};

}

alert(aa);

alert(aa());

alert(aa()());

-------------------------------------------------------------------------------------

JavaScript變量的做用域

默認若是直接在script標籤中定義變量，則屬於「全局做用域範圍」(全局執行環境)，即屬於window對象。

全局做用域範圍的變量直到網頁關閉或瀏覽器關閉時才釋放資源

一個頁面中的多個<script>標籤中的變量能夠互相訪問。

JS有垃圾回收機制，會定時對可釋放資源的變量回收。將變量設置爲null則表示能夠被回收了。

注意：在函數內部的for或者while或者if等塊中聲明的變量，做用域範圍也是整個函數以內，因此爲了不混淆，不如直接在函數內一開始的時候就聲明這些變量。var n=10;function ff(){n++;}; ff();alert(n);

變量使用前能夠不用var聲明，這樣的變量會變認爲是「全局變量」（不推薦）

結論：JS中沒有塊級做用域範圍。

-------------------------------------------------------------------------------------

String的經常使用方法

length屬性：獲取字符串的字符個數。

charAt(index)方法:獲取指定索引位置的字符,索引從0開始

indexOf(‘e’,index)方法：獲取指定字符串第一次出現的位置。startIndex表示從第幾個開始搜索。

split(‘分隔符’,limit);根據分隔符將一個字符串返回爲一個數組。limit表示要返回的數組的最大長度（可自定義）。

substr(startIndex,len)從startIndex開始，截取len個字符。

substring(startIndex,stopIndex)從startIndex開始，截取到stopIndex位置,不包括stopIndex所在的字符。

toUpperCase()轉換大寫、toLowerCase();轉換小寫

-------------------------------------------------------------------------------------

Array聲明方式

JavaScript中的Array對象就是數組，首先是一個動態數組，並且是一個像C#、Java中「數組、List、HashMap/Dictionary」等的超強綜合體。

數組的使用方式：

var names = new Array();//無需初始化長度，動態

names[0] = 「樂樂";

names[1] = 「老楊老溼";

names[2] = 「杜教授";

-------------------------------------------------------------------------------------

Array對象使用

循環遍歷數組（forin循環）

使用forin循環能夠遍歷對象的全部屬性。 forin循環其實遍歷的仍是key.

數組的其餘幾種聲明方式 ：

new Array();

new Array( 5 );表示該數組長度是5

new Array(10,20,30);

var arr = [90,true,100];(推薦。)

JS中的Array是數組仍是鍵值對

字典風格的簡化建立方式：

var arr = {「帥」:」shuai」,「哥」:」ge」};//json格式。

Dictionary風格數組的length爲0。因此不能用for遍歷。

鍵值對中能夠有function,鍵值對作參數,能夠體現一個參數多個值

鍵值對是能夠做爲參數進行傳遞

-------------------------------------------------------------------------------------

Array小案例

本身定義通用的max方法進行比較-比較器

Array系統中的排序和反轉-自

調用系統的sort方法

如鵬網：http://www.rupeng.com瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

如鵬網 靜態Web開發 第三章：Javascript

如鵬網靜態Web開發第三章：Javascript