JavaSpcript初識

時間 2019-11-18

標籤 javaspcript 简体版

原文原文鏈接

---恢復內容開始---javascript

1-語法標準（Ecmascript）css

DOMhtml

BOMjava

2=特色以及適用範圍編程

簡單易用：封裝好了一些方法，屬性數組

基於對象瀏覽器

面向對象：屬於編程思惟（思想）dom

C#,C++,Java,PHP.....異步

基於對象：async

3-解釋執行

編譯執行：（C#）

C#（源代碼===）》編譯（.dll文件）===》計算機執行dll文件

解釋執行：JS特色（代碼直接執行）

4-寫法

內嵌式寫法寫在head標籤裏

外聯式寫法

後綴名.js

引用<spript type="text/javascript src="""><spript>

5-補充屬性

async：異步

注意：該屬性指的是瀏覽器將外部JS文件下載完成後，立馬執行。

defer：延時執行

注意：該屬性值值得是瀏覽器將外部JS文件下載完成後按順序執行。

行內（不經常使用）

<!DOCTYPE html>
<html lang="en">
          <head>
          <meta charset="utf-8">
          <script type="css/javascript" src="1.js" async></script>
          <script type="text/javascript">
                     alert(1)(括號裏若是寫漢字或者字母 須要帶引號)
                     alert(1)
                     alert(1)
</head>

<!DOCTYPE html>
<html lang="en">
          <head>
          <meta charset="utf-8">
<script>alert(1)</script>
<script>alert(2)</script>
<script>alert(3)</script>
          <script type="css/javascript" src="1.js" defer></script>
          <script type="text/javascript">
                     alert(4)
                     alert(5)
                    
</head>

---恢復內容結束---

1-語法標準（Ecmascript）

DOM

BOM

2=特色以及適用範圍

簡單易用：封裝好了一些方法，屬性

基於對象

面向對象：屬於編程思惟（思想）

C#,C++,Java,PHP.....

基於對象：

3-解釋執行

編譯執行：（C#）

C#（源代碼===）》編譯（.dll文件）===》計算機執行dll文件

解釋執行：JS特色（代碼直接執行）

4-寫法

內嵌式寫法寫在head標籤裏

外聯式寫法

後綴名.js

引用<spript type="text/javascript src="""><spript>

5-補充屬性

async：異步

注意：該屬性指的是瀏覽器將外部JS文件下載完成後，立馬執行。

defer：延時執行

注意：該屬性值值得是瀏覽器將外部JS文件下載完成後按順序執行。

行內（不經常使用）

<!DOCTYPE html>
<html lang="en">
          <head>
          <meta charset="utf-8">
          <script type="css/javascript" src="1.js" async></script>
          <script type="text/javascript">
                     alert(1)(括號裏若是寫漢字或者字母 須要帶引號)
                     alert(1)
                     alert(1)
</head>

<!DOCTYPE html>
<html lang="en">
          <head>
          <meta charset="utf-8">
<script>alert(1)</script>
<script>alert(2)</script>
<script>alert(3)</script>
          <script type="css/javascript" src="1.js" defer></script>
          <script type="text/javascript">
                     alert(4)
                     alert(5)
                    
</head>

6-JS中經常使用的輸出消息的方式

經過alert（123）或者（「」字母「」或者「」漢字「」）

經過document.write(「」你好")；

注意：該方法中還能夠設置html標籤

document.write（「」<h1>你好</h1>「」）；

在控制檯中輸出消息

console.log(123);

console.log("你好");

接受用戶輸入信息

prompt（「」請輸入您的姓名「」）；

肯定取消方法

confirm（「」肯定退出麼？「」）

7-變量（重點）

變量：會變化的量（數據）用來存儲數據的容器

變量定義：var 變量名 = 值；

注意1 首先定義變量必須使用var 關鍵字

2 「」=「」賦值運算符

3 一個變量只能保存一個值（只能保存最後一個賦值結果）

變量命名規範

不推薦使用漢字定義變量

不能使用特殊字符或者特殊字符開頭

不能使用數字或者以數字開頭定義變量

變量中間不能出現空格

不能使用關鍵字定義變量

不推薦使用保留字定義變量

注意：1一行完整的代碼結束後必須以；結束

2 JS中區分字母大小寫

8-數據類型介紹

數據類型是用來肯定變量的存儲位置

常見的數據類型：

1.數字類型（number）

若是一個變量的值是純數字，那麼該變量的數據類型就是數字類型

數字類型的表示方式有

十進制、十六進制（0X開頭 0-f）、八進制（以0開頭 0-7）

2.字符串類型（string）

若是一個變量的值使用雙引號或者單引號，那麼該變量的數據類型就是字符串類型。

字符串特性：不可變性。（在內存中的不可變，不是值不可變）（注意不要大量拼接字符串）

屬性：變量.lengh 獲取字符串長度

轉義字符（瞭解）

\" 轉雙引號 \'轉單引號成對出現例：alert（「今天學習了\「 js \」」）；

\r回車符

\n換行符

3.布爾類型（boolean）

若是一個變量的值是true或者false 那麼該變量的數據類型就是布爾類型

對象（object）

看獲得，摸得着，特徵具體事物

//封裝//繼承//多態

1屬性（特徵）

2方法（功能）

建立對象

var 變量 = new Object（）

var xw=new Object（）；

xw.name="小王"；

xw.age=18；

xw.shengao=180；

//功能函數（方法）

xw.say=function() {

alert("你好")；}

console.log(xw.name+xw.age+xw.shengao);

經過字面量建立對象

var xw={

name:"小王"，

age：18，

shengao：180}；

數組（array）

undefined類型

若是一個變量的值是unddefined或者定義了一個變量沒有給該變量賦值。那麼該變量的數據類型就是undefined。

例子：變量在沒有賦值的狀況下，那麼該變量的默認值就是undefined，對應的數據類型undefined類型。

例子var = 1

var n2

alert（n2）；

比較運算符

大於 >

小於 <

等於 ==或者=== 一個=屬於賦值運算符

不等於！==

大於等於 =>

小於等於 <=

注意：1經過比較運算符獲得的是一個布爾類型的結果

2通常狀況下true表明正確的（條件成立），false表明錯誤的（條件不成立）

算數運算符

加 +

（1若是是數字類型的變量相加，最後結果也是數字類型

2若是是非數字類型的變量相加，最後的結果是字符串【加號起到的做用是鏈接做用】）

減 -

（1若是是數字類型變量相減，最後的結果是數字類型

2若是是數字的字符串相減，最後的結果是數字【因爲：隱式數據類型轉化】

3若是是非數字的字符串相減，最後獲得的結果是NaN【NaN：not a number】）

乘 *

除 /

（1若是是數字類型的變量相除，最後的結果是數字類型

2若是除數是0，獲得的結果是無窮大的值infinite）

取餘 %

（）優先級

數據類型判斷

typeof（變量）===>用alert（typeof（X））；來肯定結果是什麼數據類型

注意：1若是一個變量的值是NaN，那麼該變量的數據類型就是number類型。

2若是一個變量的值是infinity，那麼該變量的數據類型是number類型。

3若是一個變量的值是undefined，那麼該變量的數據類型是undefined類型。

isNaN（）判斷是否是一個數字

新內容學習

1-Maht對象

Math.ceil(x) 對數字進行向上舍入（天花板函數）

注意：1該方法返回的是一個大於當前數字，而且與它接近的一個整數。

2若是當前數字是一個整數，那麼返回的就是當前數字自己

Math.floor(x) 對數字進行向下舍入（地板函數）同天花板函數

Math.abs(x) 返回數字的絕對值

Math.radom() 返回0-1之間的隨機數

注意：該方法不能取到0和1

Math.max(x,y) 返回X和Y之間的最大值

min（x，y）返回最小值

Math.round(x) 返回X的四捨五入值

注意：該方法返回的是一個整數

Math.pow(x,y) 返回X的Y次方

2-數據類型轉換

1隱式轉換

程序在參與運算的過程當中，發生的數據轉換

2 顯式轉換（強制轉換）

工程師指定的具體數據類型

將數字類型轉化爲字符串類型

1經過變量 .toString()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript">
 
               var n1=123;
               alert(typeof(n1));

               //數據類型轉化
               n1=n1.toString();

               alert(n1);
               alert(trpeof(n1));
</script></head>

2經過String（）轉化爲字符串類型

將toSting行代碼轉化爲 n1=String（n1）

字符串類型轉成數字類型

1Number()

特色：轉化爲數字類型，保留原來值的內容

<script type="text/javascript">

var n1="123";

      n1=Number(n1);
 
      alert(n1);
      alert(typeof(n1));

2pasrInt(x) 特色：轉化爲整數，但只能保留整數部分。

3parseFloat(x) 特色：經過該方法能夠轉換爲數字類型，可是要保留原來的內容。

2若是是非數字的字符串，直接保留數字部分

轉化爲布爾類型

Boolean(x) 注意1 數字0，空字符串，NaN，undefined，null轉化爲false

2除以上特殊值，轉布爾類型都是true ture是1 0是false是規定

3-邏輯運算符

或運算 ||

注意：經過邏輯運算符要連接布爾類型的結果。

與（且）運算 &&

非！

4-等於逗號運算符

= 賦值 == 相等：只判斷值不判斷數據類型 === 相等：同時判斷值和數據類型！=不相等

,運算符 var n1=123,n2=123;

5-分支結構（條件判斷）

語法 if（條件表達式）{邏輯代碼；}

else{邏輯代碼；}

執行順序：首先進行條件判斷，若是條件成立（true），那麼程序執行if語句中的代碼，反之else

6-斷點調試

做用：獲取程序中的執行過程，排查錯誤。

使用：首先運行程序》點擊審查元素》點sources 在瀏覽器中打開代碼點擊html頁面》設置斷點》再次運行程序或者F5

》點擊下一步或者F10

監視變量：1鼠標直接懸停變量 2 右鍵變量添加監視變量。ADD~~WATCH

7-條件結構嵌套

語法：if（條件表達式）{}else if （條件表達式）{}else if{} else{}

執行順序：首先進行表達式判斷，若是條件爲true那麼就當即執行，若是條件爲false那麼執行else中的代碼

8-三元運算

語法：條件表達式？代碼1：代碼2；

執行順序：若是條件成立執行代碼1，若是條件不成立執行代碼2

注意：1三元表達式能夠嵌套，通常不推薦使用。

var n1=prompt("請輸入一個數字」)；

//若是用if else寫
       if(n1%2==0){
       alert("偶數")；}
       else{
       alert（「奇數」）；}//
//用三元運算//
      n1%2==0?alert("偶數")：alert("奇數")；

9-Switch（變量）{

case 值1：

代碼例如alert(n1)

break；

case 值2：

代碼

break；}

注意1在Switch語句中，Switch中的變量數據類型必須與case後面的值的數據類型保持一致。

2通常狀況下，若是變量表示的不是一個範圍，而是一些具體值，能夠考慮使用Switch結構

簡寫方式

switch(fname){ case"2": case"4": case"6"; alert("偶數")； break；

變量自增自減

var i =7；

變量自增：i++或者++i 例如J=i++的結果是J=i 若是是J=++i 就是 j==i+1

變量自減

循環

while循環

語法：初始化變量 var a=1；

while（條件表達式）{

循環體代碼；}

執行過程：1變量初始化 2開始判斷條件 3 若是條件爲true，那麼程序會進入循環體代碼 4若是條件爲false，那麼程序不會進入循環體中循環代碼

do while循環

語法：初始化變量

do{

循環體；}

while（條件表達式）

執行順序：1首先執行do中的代碼 2而後判斷條件是否成立 3若是條件成立，則繼續成立do中的代碼 4若是條件不成立，那麼程序結束。

與while循環的區別:在條件不知足的狀況下，do while要比while循環多執行一次。

for循環

語法： for（變量初始化；表達式；變量自增或自減）{

循環體代碼；}

執行過程：1變量初始化 2進行表達式判斷 3 若是表達式成立，執行循環體中代碼，而後進行變量自增或自減繼續判斷表達式成立，若是成立則繼續 4 若是表達式不成立，則程序結束

例子：打印直角三角形

for（var i=1;i<=9;i++）{

        for(var j=1;j<=i;j++){
              document.write("*");}
        document.write("<br>")；
}

建立表格

<style type="text/css">
table{width:400px;height:300px;border=collapse;}

table,td{border:1px solid red;}

<script type="text/javascript">
document.write("<table>");
//建立行tr
for(var i=1;i<=4;i++){
          document.write("<tr>")
     for(var j=1;j<=i;j++)
          document.write("<td></td>")

document.write("</tr>")
document.write("</table>")

break和continue語句

break：在循環中使用break語句，程序會跳出當前循環

例子：找出1-10中第一個是2的倍數

for(var i=1;i<=10;i++){
      for(i%2==0){
           alert(i);
           break; } }

continue

結束本次循環，進入下次循環，continue後面的代碼不會執行

例子：輸出1-10全部數字不包括6

for(var i=1;i<=10;i++){
         if(i==6){
            continue;
}
             alert(i);
}

數組

數組能夠一次保存多個值

定義數組：

*經過對象方式建立數組

var ary=new Array（）；

直接建立一個數組

var ary=[ ]；’

數組賦值：

經過索引（下標）賦值注意：數組中索引號（編號）從0開始

var ary=[]；

ary[0]=1;

console.log(ary);

數組遍歷：

<script type="text/javascripe">

           var ary=[1,2,3,4,5,6,7,8];
 
           alert(ary.length);//獲取數組長度

           for(var i=0;i<ary.length;i++){

           alert(ary[i]);}
</script>

數組中的方法補充

1 合併兩個數組經過concat,經過該方法返回的是一個新數組，數據類型object

var ary1=[xxxx] ~~~2=[~~~] var ary3=ary1.concat(ary2);

alert(ary3);

2 join 更改數組顯示方式，經過該方法的獲得的是一個字符串類型

var ary=[1,2,3];

ary=ary.join("|");

alert(typeof(ary));