初識javascript

時間 2019-12-11

標籤 javascript 欄目 JavaScript 简体版

原文原文鏈接

如何插入JSjavascript

你只需一步操做，使用<script>標籤在html網頁中插入javascript代碼。注意，<script>標籤要成對出現，並把javascript代碼寫在<script></script>之間。css

引用js外部文件java

JS在頁面中的位置es6

放在<head>部分正則表達式

最經常使用的方式是在頁面中head部分放置<script>元素，瀏覽器解析head部分就會執行這個代碼，而後才解析頁面的其他部分。數組

放在<body>部分瀏覽器

Javascript代碼在網頁讀取到該語句的時候就會執行。框架

注意：JavaScript做爲一種腳本語言能夠放在html頁面中任何位置，可是瀏覽器解釋html時是按前後順序的，因此前面的script就先被執行。好比進行頁面顯示初始化的js必須放在head裏面，由於初始化都要求提早進行（如給頁面body設置css等）；而若是是經過事件調用執行的function那麼對位置沒什麼要求的

Javascript 認識語句和符號

JavaScript語句是發給瀏覽器的命令。這些命令的做用是告訴瀏覽器須要作的事情

例：<script type=」text/javascript」>

,alert(「hello」)

</script>

例子中aliert（「hello」）；就是一個javascript語句

一行的結束就被認定爲語句的結束，一般在結尾加上一個分號；來表示語句的結束。

Javascript註釋很重要

單行註釋「//」多行註釋「/*」開始以*/結束

Javascript –什麼是變量

定義變量使用關鍵字var ，語法以下

Var 變量名

變量名能夠任意取名，但必定要遵循命名規則；

1，變量必須使用字母、下劃線或者$開始。

2，而後可使用任意多個英文字母，數字，下劃線或者美圓符組成

3，不能使用JavaScript關鍵詞與JavaScript保留字

變量要先聲明再賦值

var mychar；

mychar = 「javascript」；

var mynum=6；

變量能夠重複賦值，以下：

var mychar；

mychar=「javascript」；

mychar=「hello」；

注意：

在JS中區分大小寫，如變量mychar與myChar是不同的，表示的是兩個變量。

Javascript—判斷語句（if …else）

語法：

if （條件）

{條件成立時執行的代碼}

else

{條件不成立時執行的代碼}

var myage=18;

if(myage>=18)

{document.write(「你是成年人。」);}

else

{cocumen.write(「未滿18歲，你不是成年人。」);}

</script>

Javascript—什麼是函數

語法：

function 函數名（）

{

函數代碼；

}

說明：

1， function定義函數的關鍵字。

2，「函數名」你爲函數取的名字。

3，「函數代碼」替換爲完成特定功能的代碼

例：

function add2（）{

var sum = 3+2；

alert（sum）

}

add2（）

javascript—輸出內容

document.write()可用於直接向html輸出流寫內容

第一種：輸出內容用「」括起，直接輸出「」號內的內容。

Document.write(「I love JavaScript!」);

</script>

第二種經過變量，輸出內容

var mystr=」hello world!」;

document.write(mystr);

</script>

第三種：輸出多項內容，內容之間用+號鏈接。

var mystr = 「hello」；

document.write(mystr+」I love javascript」);

</script>

第四種：輸出html標籤，並起做用，標籤使用「」括起來

var mystr=「hello」；

document.write(mystr+」<br>」);

document.write(「javascript」);

</script>

Javascript—警告（alert消息對話框）

語法：

alert（字符串或變量）;

javascript—確認（confirm消息對話框）

confirm消息對話框一般用於容許用戶作選擇的動做，如：「你對嗎？」。彈出對話框（包括一個肯定按鈕和一個取消按鈕）。

語法：

Confirm（str）；

參數說明

str：在消息對話框種要顯示的文本

返回值：boolean值

返回值：

當用戶點擊「肯定」按鈕時，返回true

當用戶點擊「取消」按鈕時，返回false

注：經過返回值能夠判斷用戶點擊了什麼按鈕

Javascript—提問

Prompt 彈出消息對話框，一般用於詢問一些須要與用戶交互的信息。彈出消息對話框（包含一個肯定按鈕、取消按鈕與一個文本輸入框）。

語法：

Prompt（str1，str2）；

參數說明：

Str1：要顯示在消息對話框種的文本，不可修改

Str2：文本框中的內容，能夠修改

返回值：

1，點擊確認按鈕，文本框中的內容將做爲函數返回值

2，點擊取消按鈕，將返回null

Javascript 打開新窗口

Open（）方法能夠查找一個已經存在或者新建的瀏覽窗口

語法：

Window.open([URL],[窗口],[參數字符串])

參數說明：

URL：可選參數，在窗口中要顯示網頁的網址或路徑

窗口名稱：可選參數，被打開窗口的名稱

1，該名稱由字母，數字和下劃線字符組成。

2，「_top」、「_blank」、「_self」具備特殊意義的名稱

_blank 在新窗口顯示目標網頁

_self 在當前窗口顯示目標網頁

_top 框架網頁中在上部窗口中顯示目標網頁

3相同name的窗口只能建立一個，要想建立多個窗口，則name不能相同

4 name不能包含空格

JavaScript關閉窗口

語法;

Window.close();

ECMAScript和JavaScript的關係

1996年11月，javascript的創造者NETscape公司，決定將javascript提交給國際標準化組織ECMA，但願這門語言可以成爲國際標準。次年，ECMA發佈262號標準文件（ECMA-262）的初版，規定了瀏覽器腳本語言的標準，並將這種語言稱爲ECMAScript，這個版本就是1.0版。

該標準一開始就是針對JAVASCRIPT語言制定的，可是沒有稱其爲javascript，有兩個方面的緣由。一是商標，javascript自己已被netscape註冊爲商標。二是想體現這門語言的制定者是ECMA，而不是netscape，這樣有利於保證這門語言的開發性和中立性。

所以ECMAScript和JavaScript的關係是，前者是後者的規格，後者是前者的一種實現。

ECMAscript的歷史

1997	ECMAScript 1	第一個版本
1998	ECMAScript 2	版本變動
1999	ECMAScript 3/4	添加正則表達式，添加try/catch
2009	ECMAScript 5	添加strict mode嚴格模式，加Jason
2011	ECMAScript 5.1	版本更新
2015	ECMAScript 6	添加類和模塊
2016	ECMAScript 7	增長指數運算符，array includes

注：ES6就是指ACMAScript6

核心（ECMAScript）

文檔對象模型（DOM）Document object model（整合js css html）

瀏覽器對象模型（BOM）broswer object model（整合js和瀏覽器）

保留字列表：

Abstract Boolean byte char class const debugger double enum export extends final float

Goto implements import int interface long native package protected public short static super

Aynchrnized throws transient volatile

Javascript數據類型

數值（number）

JavaScript不區分整型和浮點型，就只有一種數字類型

Var a =12.34

ParseInt（‘123’）

字符串（string）

經常使用方法

方法	說明
.length #不加括號的是屬性	返回長度
.trim() #獲得一個新值	移除空白
.trimLeft()	移除左邊的空白
.trimRight()	移除右邊的空白
.charAt(n) #n相似索引，從0開始，超過最大值返回''空字符串	返回第n個字符
.concat(value, ...) #s1='hello';s.concat('xx');獲得helloxx	拼接
.indexOf(substring, start) #這個start是從索引幾開始找，沒有返回-1	子序列位置
.substring(from, to) #不支持複數，因此通常都不用它，瞭解一下就好了	根據索引獲取序列
.slice(start, end) #var s1='helloworld';s1.slice(0,-5)看結果，就用它	切片
.toLowerCase() #所有變小寫	小寫
.toUpperCase() #所有變大寫	大寫
.split(delimiter, limit)#分隔,s1.splite(' '),後面還能夠加參數s1.split(' '，2),返回切割後的元素個數	分割

String.slice(start,stop)和string.substring(string,stop):

二者的相同點：

若是start等於end，返回空字符串

若是stop參數省略，則取到字符串末

若是某個參數超過string的長度，這個參數會被替換爲string的長度

Substring（）的特色：

若是 start > stop ,start 和stop 將被交換

若是參數是負數或者不是數字，將會被0替換

Slice（）的特色：

若是start>stop 不會交換二者

若是start小於0，則切割從字符串末尾往前數的第abs（start）個字符開始

若是stop小於0，則切割在從字符串末尾往前數的第abs（stop）個字符結束

補充：ES6中引入了模板字符串。Chorme 支持es6

布爾值（Boolean）

區別於python，true 和false都是小寫

Var a = true；

Var b = false；

Null 和nudefined

null 表示值是空，通常在須要指定或清空一個變量時纔會使用

undefined 表四聲明一個變量但未初始化時，該變量的默認值時undefined。還有就是函數無明確的返回值時，返回的也是undefined

null表示變量的值時空，undefined則表示只聲明瞭變量，但尚未賦值

對象object

JavaScript中的全部事物都是對象：字符串、數值、數組、函數。。。此外，JavaScript容許自定義對象

JavaScript提供多個內建對象，好比string、date array等等

對象只是帶有屬性和方法的特殊數據類型

數組

數組對象的做用是：使用單獨的變量名來儲存一系列的值。

Var a = [123,」ABC」]

Console.log(a[1]) 輸出ABC

方法	說明
.length	數組的大小
.push(ele)	尾部追加元素
.pop()	獲取尾部的元素
.unshift(ele)	頭部插入元素
.shift()	頭部移除元素
.slice(start, end)	切片
.reverse() #在原數組上改的	反轉
.join(seq)#a1.join('+')，seq是鏈接符	將數組元素鏈接成字符串
.concat(val, ...) #連個數組合並	鏈接數組
.sort()	排序
.forEach()	將數組的每一個元素傳遞給回調函數
.splice()	刪除元素，並向數組添加新元素。
.map()	返回一個數組元素調用函數處理後的值的新數組

關於sort（）須要注意：

若是調用該方法沒有使用參數，將按照字母順序對數組中的元素進行排序

改進方法：

Function sortNumber（a，b）{

Return a-b

}

Var arr1 = {11，100，22，55，33，44}

Arr1.sort（sortNumber）

Splice（）

語法

Splice（index ，howmany，item）

Index 必需，規定從何處添加/刪除元素，該參數是開始插入和刪除的數組元素的下標，必須是數字

Howmany：必需。規定應該刪除多少元素。必須是數字，可是能夠是「0」.

若是未規定此參數，則刪除從index 開始到原數組結尾的全部元素

Item1.。。itemx 可選，要添加到數組的新元素

自定義對象

Var ol = {‘name’：‘哇嘎’，‘age’：‘18’}

類型查詢

Typeof

運算符

算數運算符

+ - * % ++ -- i++ 是i自動加1，i—是i自減1

比較運算符

>= <= != == === !=

邏輯運算符

&& || ！ and or 非

賦值運算符

= += -= *= /= #n += 1其實就是n = n + 1

if-else

var a = 10;

if (a
> 5){ console.log("yes"); }

else { console.log("no"); }

if-else if-else #多條件

var a = 10;

if (a
> 5){ console.log("a > 5"); }

else if (a
< 5)

{ console.log("a
< 5"); }

else { console.log("a = 5"); }

switch 切換

var day = new Date().getDay(); //示例化一個今天的日期對象，getDay()是獲取天數的編號，0表示星期日 switch (day) { //這裏day這個參數必須是一個值或者是一個可以獲得一個值的算式才行，這個值和後面寫的case後面的值逐個比較，知足其中一個就執行case對應的下面的語句，而後break，若是沒有加break，還會繼續往下判斷 case 0: //若是day是0 console.log("Sunday"); //執行它 break; //而後break跳出 case 1: console.log("Monday"); break; default: //若是沒有任何知足條件的，就執行它 console.log("...") }

　for

for (var
i=0;i<10;i++) { //就這麼個寫法，聲明一個變量，變量小於10，變量每次循環自增1，for(;;){console.log(i)}；這種寫法就是個死循環，會一直循環，直到你的瀏覽器崩了，就不工做了，回頭能夠拿別人的電腦試試~~
console.log(i); }

while

var i = 0;

while (i
< 10)

{ console.log(i); i++; }

三元運算

a = x if x>y else y