JavaScript 基礎

時間 2019-11-29

標籤 javascript 基礎欄目 JavaScript 简体版

原文原文鏈接

1、JavaScript簡介

　　web前端有三層：javascript

　　　　HTML:從語義的角度，描述頁面結構前端

　　　　CSS：從審美的角度，描述樣式（美化頁面）java

　　　　JavaScript：從交互的角度，描述行爲（用戶體驗提高）python

　　1.1JavaScript歷史背景介紹

　　布蘭登 • 艾奇（Brendan Eich，1961年～），1995年在網景公司，發明的JavaScript。程序員

　　一開始JavaScript叫作LiveScript，可是因爲當時Java這個語言特別火，因此爲了傍大牌，就更名爲JavaScript。如同「北大」和「北大青鳥」的關係。「北大青鳥」就是傍「北大」大牌。web

同時期還有其餘的網頁語言，好比VBScript、JScript等等，可是後來都被JavaScript戰勝了，因此如今的瀏覽器中，只運行一種腳本語言就是JavaScript數據庫

　　1.2JavaScript和ECMAscript的關係

　　　　ECMAscript是一種有Ecma國際（前生爲歐洲計算機制造上協會，全稱European Computer Manufacturers Association）指定的標準。瀏覽器

　　　　JavaScript是有公司開發而成的，問題是不便於其餘公司的拓展和使用，因此歐洲的這哥ECMA的組織，牽頭制定JavaScript的標準，取名爲ECMAscript。服務器

　　　　簡單來講，ECMAScript不是一門語言，而是一個標準。符合這個標準的比較常見的有：JavaScript、 Action Script（Flash中用的語言）。就是說，你JavaScript學完了，Flash中的程序也就垂手可得了。函數

　　　　ECMAScript在2015年6月，發佈了ECMAScript 6版本，語言的能力更強（也包含了不少新特性）。但是，瀏覽器的廠商不能那麼快去追上這個標準。

　　1.3JavaScript入門易學性

　　　　JavaScript對初學者比較友好

　　　　JavaScript是有界面效果的（好比C語言只有黑底白字）

　　　　JavaScript是若變量類型的語言，變量只須要用var來聲明，要根據變量的類型來定義

　　好比 java 中定義變量須要：　

    int a;
    float a;
    double a;
    String a;
    boolean a;

　　而JavaScript中，只用定義一個變量：

var a;

　　　　JavaScript不用關心其餘的一些事情（好比內存的釋放，指針等），更關心本身的業務。

　　1.4JavaScript是前臺語言

　　　　JavaScript是前臺語言，而不是後臺語言。

　　　　JavaScript運行在用戶的終端網頁上，而不是服務器上，因此咱們稱爲「前臺語言」，JavaScript就是一個簡單的製做網頁效果的語言，久是服務於頁面交互效果，美化，絢麗，不能操做數據庫。

　　　　後臺語言是運行在服務器上的，好比PHP，ASP,JSP等等。這些語言都可以操做數據庫，都可以對數據庫進行「增刪改查」操做。Node.js除外。

　　1.5JavaScript的組成

　　　　JavaScript基礎分爲三個部分

　　　　ECMAScript：JavaScript的語法標準。包括變量，表達式，運算符，函數，if語句，for語句等。

　　　　DOM：操做網頁上的元素的API，好比讓盒子移動，變色，輪播圖等。

　　　　BOM：操做瀏覽器部分功能API,好比讓瀏覽器自動滾動。

　　　　ps：js機械重複性的勞動幾乎爲0，基本就是創造性的勞動。而不像HTML,CSS,中margin，padding　都是機械重複勞動

　　1.6JavaScript的特色

　　　　（1）簡單易用：可使用任何文本編輯工具編寫，只須要用瀏覽器就能夠執行程序。

　　　　（2）解釋執行（解釋語言）：實線不編譯。逐行執行，無需進行嚴格的變量聲明。

　　　　（3）基於對象：內置大量現成對象，編寫少許程序能夠完成目標

2、JavaScript基礎語法

　　2.1JavaScript的第一個代碼

　　　　在頁面中，咱們能夠在body標籤中放入<script tyoe="text/javascript"></javascript>標籤對兒

<script type="text/javascript">

</script>

　　　　alert語句

<script type="text/javascript">
    alert("世界 你好！")
</script>

　　alert（英文翻譯爲「警報」）的用途：彈出「警告框」

　　2.2語法規則

　　　　學習程序是有規律可循的，就是程序有相同的部分，這些部分就是一種規定，不能更改。咱們稱爲：語法

　　　　（1）JavaScript對換行、縮進、空格不敏感。

　　　　　　備註：每一條語句末尾都要加上分號，雖然分號不是必須加的，可是爲了程序從此要壓縮，若是不加分號，壓縮以後不能運行。

　　　　（2）全部的符號，都是英語的。好比括號，引號，分號。

　　　　（3）JavaScript的註釋

　　　　單行註釋：

// 我是註釋

　　　　多行註釋

/*
    多行註釋1
    多行註釋2
*/

　　備註：sublime中，單行註釋的快捷鍵是ctrl+/，多行註釋的快捷鍵是ctrl+shift+//

　　2.3控制檯輸出

　　　　console.log(" ")表示在控制檯中輸出，console表示「控制檯」，log表示「輸出」。

　　2.4用戶出入

　　　　prompt（）救贖專門用來彈出可以讓用戶輸入的對話框

　　代碼以下

<script type="text/javascript">
        var a = prompt('今天是什麼天氣？');
        console.log(a);
</script>

　　上方代碼中，用戶輸入的內容，將被傳遞到變量a裏面。

　　prompt（）語句中，用戶無論輸入什麼內容，都是字符串。

　　alert和prompt的區別：

alert（「從前有座山」）。 //直接使用，不須要變量
var a = prompt（」請輸入一個數字「）；//必須用一個變量，來收取用戶輸入的值

　　2.5直接量：數字和字符串

　　「直接量」即常量，也成爲字面量。看見什麼他就是什麼。

　　簡單的直接量有2種：數字，字符串。

　　（1）數值的直接量的表達很是簡單，寫上去就行，不須要任何符號。例如：

alert(886);  //886是數字，因此不須要加引號。

　　（2）字符串也很簡單，但必定要加上引號。能夠是單詞。句子等。

　　2.6變量

　　2.6.1 變量的定義和賦值

   var a = 100;

　　var是英語「variant」變量的縮寫，後面要加上一個空格，空格後面的東西就是「變量名」

　　定義變量：var 就是一個關鍵字，用來定義變量，所謂關鍵字，就是有特殊功能的小詞語，關鍵字後面必定要

　　有空格隔開。

　　變量的賦值：等號表示賦值，將等號右邊的值，賦值給左邊的值。

　　變量名：咱們能夠給變量任意的取名字；

　　ps：在JavaScript中，永遠都是用var來定義變量，這和c，java等語言不一樣，變量要先定義，才能使用。好比，咱們不設置變量，直接輸出

 <script type="text/javascript">
        console.log(a);
  </script>

　　　　控制檯會報錯！！！

　　正確寫法：

  var a;   // 定義
    a = 100;  //賦值
    console.log(a);  //輸出100

　　有經驗的程序員會把第一和賦值寫在一塊兒

var a = 100;    //定義，而且賦值100
console.log(a);  //輸出100

　　2.6.2變量的命名規範

　　變量名有命名規範：只能由英語字母、數字、下劃線、美圓符號$構成，且不能以數字開頭，而且不能是JavaScript保留字。

　　保留字：

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

　　大寫字母是可使用的，而且大小寫敏感，也就是說A和a是兩個變量。

 var A = 250;    //變量1
 var a = 888;    //變量2

　　2.6.3變量的類型

　　變量可以存儲數字，字符串等。變量會自動的根據存儲內容的類型不一樣，來決定本身的類型。

　　2.6.3.1數值類型：number

　　　　若是一個變量中存放了數字，那麼這個變量就是數值型的

var a = 100;            //定義了一個變量a，而且賦值100
console.log(typeof a);  //輸出a變量的類型

　　typeof（）表示「獲取變量的類型」，語法爲

typeof 變量

　　在JavaScript中是要是數，就是數值型（number）的。不管整浮、浮點數、不管大小、不管正負，都是number類型的。

　　2.6.3.2字符串類型：string

    var a = "abcde";
    var b = "路飛";
    var c = "123123";
    var d = "哈哈哈哈哈";
    var e = "";     //空字符串

    console.log(typeof a);
    console.log(typeof b);
    console.log(typeof c);
    console.log(typeof d);
    console.log(typeof e);

　　連字符和加號的區別

　　鍵盤上的+多是連字符，也多是數字的加號

　　 console.log("我" + "愛" + "你");   //連字符，把三個獨立的漢字，鏈接在一塊兒了
    console.log("我+愛+你");           //原樣輸出
    console.log(1+2+3);             //輸出6

　　總結：若是加號兩邊都是數值，此時是加。不然就是連字符（用來鏈接字符串）；

　　2.6.4 變量值的傳遞（賦值）

　　語句

 a = b;

　　把b的值賦給a，b不變。

　　將等號右邊的值賦值給等號左邊的變量，等號右邊的變量，值不變。

　　例如

        var a = "3";
        var b = 2;
        console.log(a-b);

　　效果：（注意：字符串 - 數值 = 數值）

　　2.6.5變量格式轉換

　　用戶的輸入

　　　　咱們在上面的內容中講過，prompt（）就是專門用來彈出可以讓用戶輸入的對話框。重要的是：用戶無論輸入什麼，都是字符串。

　　parseInt（）：字符串轉數字；

　　字符串轉數字方法：

 parseInt(「5」);

　　parseInt（）還具備如下特性

　　（1）帶喲自動淨化的功能；只能保留字符串最開頭的數字，後面的中文自動消失。例如

console.log(parseInt("2018你真帥！！");

　　（2）自動帶有階段小鼠的功能：取整，不四射五入。

var a = parseInt(5.8) + parseInt(4.7);
console.log(a);

 var a = parseInt(5.8 + 4.7);
 console.log(a);

3、JavaScript數據類型

　　3.1基本數據類型

　　number

var a = 123;
//typeof 檢查當前變量是什麼數據類型
console.log(typeof a)
//特殊狀況
var a1 = 5/0;
console.log(typeof e1) //Infinity 無限大. number類型

　　string

var str  = '123'
console.log(typeof str)

　　boolean

var b1 = false;
console.log(typeof b1)

　　null

var c1 = null;//空對象. object
console.log(c1)

　　undefined

var d1;
//表示變量未定義
console.log(typeof d1)

　　3.2引用數據類型

　　　　function

　　　　object

　　　　array

　　　　string

　　　　date

4、JavaScript運算符

　　js中的運算符跟python中的運算符有點相似，但也有不一樣，所謂運算，在數學上，是一種行爲，經過已知量的可能的組合，得到新的量。

　　1.賦值運算符

以var x = 12,y=5來演示示例|

　　2.算術運算符

var a = 5,b=2

　　3.比較運算符

var x = 5;

　　4.特殊狀況

　　字符串拼接+字符串運算特殊請狀況。python中有拼接字符串中更簡便的辦法，其中js中也有

var  firstName  = '小';
var lastName = '馬哥';
var name = '伊拉克';
var am = '美軍';
// 字符串拼接
var str = "2003年3月20日,"+name+"戰爭爆發，以美軍爲主的聯合部隊僅用20多天就擊潰了薩達姆的軍隊。這是繼十多年前的海灣戰爭後，"+am+"又一次取得的大規模壓倒性軍事勝利。"
var fullStr = str;
console.log(fullStr)

var fullName = firstName +" "+ lastName;
console.log(fullName)

// 不能對字符串進行+運算 只能拼接
var a1 = '1';
var a2 = '2';
console.log(a1-a2) //12

var b1 = 'one';
var b2  = 'two';

// NaN. ==== not a number 是number類型
console.log(typeof(b1*b2))

5、JavaScript數據類型轉換

　　語言中咱們的數據有不少，在某個頁面中展現的數據類型也不一樣，好比說電話好嗎我就要求number類型的，而輸入姓名的時候就要求string類型的，那麼在適當的狀況下咱們能夠將數類型進行轉換。

　　1.將數值類型轉換成字符串類型

　　隱式轉換

var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
// 隱式轉換
console.log(typeof n3);

　　強制類型轉換

// 強制類型轉換String(),toString()
var str1 = String(n1);
console.log(typeof str1);

var num = 234;
console.log(num.toString())

　　2.將字符串類型轉換成數值類型

var  stringNum = '789.123wadjhkd';
var num2 =  Number(stringNum);
console.log(num2)

// parseInt()能夠解析一個字符串 而且返回一個整數
console.log(parseInt(stringNum))
console.log(parseFloat(stringNum));

　　3.任何數據類型均可以轉換成Boolean類型

var b1 = '123';
var b2 = 0;
var b3 = -123

var b4 = Infinity; 
var b5 = NaN;

var b6; //undefined
var b7 = null;

// 非0既真
console.log(Boolean(b7)

6、JavaScript流程控制

　　1.if 、if-else、if-else if-else

var ji  = 20;
if(ji >= 20){
    console.log('恭喜你，吃雞成功，大吉大利')
}
alert('alex');//下面的代碼還會執行

var ji  = 20;
if(ji>=20){
    console.log('恭喜你，吃雞成功，大吉大利')
}else{
    console.log('很遺憾 下次繼續努力')

}

if (true) {
   //執行操做
}else if(true){
    //知足條件執行            
}else if(true){
   //知足條件執行        
}else{
  //知足條件執行
}

　　注意：瀏覽器解析代碼的順序，是從上往下執行，從左往右

　　2.邏輯與&&、邏輯或||

//2.模擬 若是總分>400 或者你英語大於85 被複旦大學錄入
//邏輯或  只有有一個條件成立的時候 才成立
if(sum>500 || english>85){
    alert('被複旦大學錄入')
}else{
    alert('高考又失利了')
}

//1.模擬  若是總分 >400 而且數學成績 >89分 被清華大學錄入
//邏輯與&& 兩個條件都成立的時候 才成立
if(sum>400 && math>90){
    console.log('清華大學錄入成功')
}else{
    alert('高考失利')
}

　　3.switch

var gameScore = 'better';

switch(gameScore){

//case表示一個條件 知足這個條件就會走進來 遇到break跳出。break終止循環。若是某個條件中不寫 break，那麼直到該程序遇到下一個break中止
    case 'good':
    console.log('玩的很好')
    //break表示退出
    break;
    case  'better':
    console.log('玩的老牛逼了')
    break;
    case 'best':
    console.log('恭喜你 吃雞成功')
    break;

    default:
    console.log('很遺憾')

}

　　4.while循環

　　循環三步走：

　　　　（1）初始化循環bianliang

　　　　（2）判斷循環條件

　　　　（3）更新循環變量

var i = 1; //初始化循環變量

while(i<=9){ //判斷循環條件
    console.log(i);
    i = i+1; //更新循環條件
}

　　5.do-while循環

//無論有沒有知足while中的條件do裏面的代碼都會走一次
var i = 3;//初始化循環變量
do{

    console.log(i)
    i++;//更新循環條件

}while (i<10) //判斷循環條件

　　6.for循環

for(var i = 1;i<=10;i++){
     console.log(i)
 }

　　例子：

var sum = 0;
for(var j = 1;j<=100;j++){
    sum = sum+j
}
console.log(sum)

　　1-100之間全部數之和

　　雙重for循環

for(var i=1;i<=3;i++){
            
 　　for(var j=0;j<6;j++){
        document.write('*')
    }
            
   document.write('<br>')
 }

小做業：

1.在瀏覽器中輸出直角三角形

代碼：

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

2.在瀏覽器中輸出

          *  
         ***  
        ***** 
       ******* 
      ********* 
     ***********

代碼：

          for(var i=1;i<=6;i++){ //行數
                
                //控制咱們的空格數
                for(var s=i;s<6;s++){
                    document.write('&nbsp;')
                }
            

                for(var j=1;j<=2*i-1;j++){
                    document.write('*')
                }
                document.write('<br>')
                
            }

相關標籤/搜索

每日一句

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