javascript基本語法

1.怎麼使用JavaScript：在body標籤存放：<script type=”text/javascript”></script>標籤對兒

<script type="text/javascript">
       alert("小馬哥");
</script>

alert（英文翻譯為“警報”）的用途：彈出“警告框”

 

2.語法規則：

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

      備註：每一條語句末尾要加上分號，雖然分號不是必須加的，但是為了程式今後要壓縮，如果不加分號，壓縮之後將不能執行。

（2）所有的符號，都是英語的。比如括號、引號、分號。

（3）JavaScript的註釋：   //單行註釋：　　/*   */：多行註釋   sublime中，單行註釋的快捷鍵是ctrl+/，多行註釋的快捷鍵是ctrl+shift+/。

3.JavaScript在網頁中輸出資訊的寫法：

（1）彈出警告框：alert()     直接使用，不需要變數

（2）控制檯輸出：console.log()   console表示“控制檯”，log表示“輸出”。     必須使用有個變數，來接受使用者輸入的值

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

 

4.使用者輸入：prompt();　　prompt()語句中，使用者不管輸入什麼內容，都是字串。

5.直接量：即常量：

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

6.變數的定義和賦值：

• 定義變數：var就是一個關鍵字，用來定義變數。所謂關鍵字，就是有特殊功能的小詞語。關鍵字後面一定要有空格隔開。

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

• 變數名：我們可以給變數任意的取名字。

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

 

7.變數的命名規範：

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

二 :變數的型別：

1.數值型： number

如果一個變數中，存放了數字，那麼這個變數就是數值型的。　　

typeof()：表示“獲取變數的型別”　　語法：typeof 變數

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

 

在JavaScript中，只要是數，就是數值型(number)的。無論整浮、浮點數（即小數）、無論大小、無論正負，都是number型別的

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);

 

3.連字元和加號的區別：

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

 

總結：如果加號兩邊都是數值，此時是加。否則，就是連字元（用來連線字串）。

4.變數值得傳遞（賦值）

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

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

舉例：

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

 

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

5.變數格式轉換：

　　使用者輸入的內容不管是什麼都是字串：prompt()

parseInt()：字串轉數字.　　parse表示“轉換”，Int表示“整數”

字串轉數字的方法：parseInt('5')

parseInt()還具有以下特性：

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

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

 

（2）自動帶有截斷小數的功能：取整，不四捨五入。

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

 

三   資料型別：

資料型別包括：基本資料型別和引用資料型別

基本資料型別指的是簡單的資料段，引用資料型別指的是有多個值構成的物件。

當我們把變數賦值給一個變數時，解析器首先要確認的就是這個值是基本型別值還是引用型別值

1.基本資料型別：

　　（1）number:

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

　　（2）string（字串的拼接使用+）

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

　　（3）boolean（布林值）

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

　　（4）null

var c1 = null;//空物件. object
console.log(c1)

 

　　（5）undefind

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

 

2.引用資料型別：

• Function
• Object
• Arrray
• String
• Date

 四　　運算子：

1.賦值運算子：

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

 2.算數運算子

 var a = 5,b=2

 

3.比較運算子

 var x = 5;

 

 4.特殊情況:

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))

 

 五：資料型別轉換：

 1.將數值型別轉換成字串型別：

　　（1）隱式轉換：

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

 

 　　（2）強制型別轉換：

// 強制型別轉換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)    NaN


// parseInt()可以解析一個字串 並且返回一個整數
console.log(parseInt(stringNum)) ;  789
console.log(parseFloat(stringNum));    789.123

 

 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))

 

 六  流程控制：

 1.if     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.邏輯與&&，邏輯||或

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

 

 

//2.模擬 如果總分>400 或者你英語大於85 被複旦大學錄入
//邏輯或  只有有一個條件成立的時候 才成立
if(sum>500 || english>85){
    alert('被複旦大學錄入')
}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.初始化迴圈變數

　　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)
 }

for(var i = 1;i<=100;i++){
    if(i%2==0){
        //是偶數
        console.log(i)
    }
}

1-100之間所有數之和
var sum = 0;
for(var j = 1;j<=100;j++){
    sum = sum+j
}
console.log(sum)

 

 7.雙重迴圈：

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

 

 小作業

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

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>')

}

 

 七、常用內建函式；

所謂內建物件就是ECMAScript提供出來的一些物件，我們知道物件都是有相應的屬性和方法

 陣列：Array

 1.陣列的建立方式：

　　字面量方式建立：

var colors['red','color','yellow']

　　使用建構函式的方式建立，使用new關鍵詞對建構函式進行建立物件

var colors2 = new Array();

2.陣列的賦值：

var arr = [];
//通過下標進行一一賦值
arr[0] = 123;
arr[1] = '哈哈哈';
arr[2] = '嘿嘿嘿'

 

 3.陣列的常用方法

 

 3.1 陣列的合併 concat()

var north = ['北京','山東','天津'];
var south = ['東莞','深圳','上海'];
        
var newCity = north.concat(south);
console.log(newCity)

 

 3.2 join() 將陣列中的元素使用指定的字串連線起來，它會形成一個新的字串

var score = [98,78,76,100,0];
var str = score.join('|');
console.log(str);//98|78|76|100|0

 

 3.3 將陣列轉換成字串 toString()

var score = [98,78,76,100,0];
//toString() 直接轉換為字串  每個元素之間使用逗號隔開
           
var str = score.toString();
console.log(str);//98,78,76,100,0

 

 3.4 slice(start,end); 返回陣列的一段，左閉右開

var arr = ['張三','李四','王文','趙六'];
var newArr  = arr.slice(1,3);
console.log(newArr);//["李四", "王文"]

 

 3.5 pop 移除陣列的最後一個元素

var arr = ['張三','李四','王文','趙六'];
var newArr  = arr.pop();
console.log(newArr);//["張三", "李四"，"王文"]

 

 3.6 push() 向陣列最後新增一個元素

var arr = ['張三','李四','王文','趙六'];
var newArr  = arr.push('小馬哥');
console.log(newArr);//["張三", "李四"，"王文"，"趙六"，"小馬哥"]

 

 3.7 reverse() 翻轉陣列

var names = ['alex','xiaoma','tanhuang','angle'];
       
//4.反轉陣列
names.reverse();
console.log(names);

 

 3.8 sort對陣列排序

var names = ['alex','xiaoma','tanhuang','abngel'];
names.sort();
console.log(names)；// ["alex", "angle", "tanhuang", "xiaoma"]

 

 3.9 判斷是否為陣列：isArray()

 布林型別值 = Array.isArray(被檢測的值) ;

 4.字串string

 

4.1 chartAt() 返回指定索引的位置的字元

var str = 'alex';
var charset = str.charAt(1);
console.log(charset);//l

4.2 concat 返回字串值，表示兩個或多個字串的拼接

var str1 = 'al';
var str2  = 'ex';
console.log(str1.concat(str2,str2));//alexex

4.3 replace(a,b) 將字串a替換成字串b

var a = '1234567755';
var newStr = a.replace("4567","****");
console.log(newStr);//123****755

4.4 indexof() 查詢字元的下標，如果找到返回字串的下標，找不到則返回-1 。跟seach()方法用法一樣

var str = 'alex';
console.log(str.indexOf('e'));//2
console.log(str.indexOf('p'));//-1

4.5 slice(start，end) 左閉右開 分割字串

var str = '小馬哥';
console.log(str.slice(1,2));//馬

4.6 split('a',1) 以字串a分割字串，並返回新的陣列。如果第二個引數沒寫，表示返回整個陣列，如果定義了個數，則返回陣列的最大長度

var  str =  '我的天呢,a是嘛,你在說什麼呢?a哈哈哈';
console.log(str.split('a'));//["我的天呢,", "是嘛,你在說什麼呢?", "哈哈哈"]

4.7 substr(statr,end) 左閉右開

var  str =  '我的天呢,a是嘛,你在說什麼呢?a哈哈哈';
console.log(str.substr(0,4));//我的天呢

4.8 toLowerCase()轉小寫

var str = 'XIAOMAGE';
console.log(str.toLowerCase())；//xiaomage

4.9 toUpperCase()轉大寫

var str = 'xiaomage';
console.log(str.toUpperCase());

特別：

//1.將number型別轉換成字串型別
var num = 132.32522;
var numStr = num.toString()
console.log(typeof numStr)

//四捨五入
var newNum = num.toFixed(2)
console.log(newNum)

5.Date日期物件

建立日期物件只有建構函式一種方式,使用new關鍵字

//建立了一個date物件
var myDate = new Date();

//建立日期物件
var myDate=new Date();
        
//獲取一個月中的某一天
console.log(myDate.getDate());

//返回本地時間
console.log(myDate().toLocalString());//2018/5/27 下午10:36:23

 

 

6.Math 內建物件

常用內建物件

 6.1 Math.ceil() 向上取整，'天花板函式'

var x = 1.234;
//天花板函式  表示大於等於 x，並且與它最接近的整數是2
var a = Math.ceil(x);
console.log(a);//2

6.2 Math.floor 向下取整，'地板函式'

var x = 1.234;
// 小於等於 x，並且與它最接近的整數 1
var b = Math.floor(x);
console.log(b);//1

6.3 求兩個數的最大值和最小值

//求 兩個數的最大值 最小值
console.log(Math.max(2,5));//5
console.log(Math.min(2,5));//2

6.4 隨機數 Math.random()

var ran = Math.random();
console.log(ran);[0,1)

如果讓你取100-200之間的隨機數，怎麼做？

背過公式：min - max之間的隨機數： min+Math.random()*(max-min)

 八、函式

 

函式：就是將一些語句進行封裝，然後通過呼叫的形式，執行這些語句。

函式的作用：

• 將大量重複的語句寫在函式裡，以後需要這些語句的時候，可以直接呼叫函式，避免重複勞動。

• 簡化程式設計，讓程式設計模組化。

 1.函式的定義：

function 函式名字(){

    }

 

 解釋如下：

• function：是一個關鍵字。中文是“函式”、“功能”。

• 函式名字：命名規定和變數的命名規定一樣。只能是字母、數字、下劃線、美元符號，不能以數字開頭。

• 引數：後面有一對小括號，裡面是放引數用的。

• 大括號裡面，是這個函式的語句。

 2.函式的呼叫：函式名()

 3.函式的引數：形參和實參：

 注意：實際引數和形式引數的個數，要相同

sum(3,4);
        sum("3",4);
        sum("Hello","World");

        //函式：求和
        function sum(a, b) {
            console.log(a + b);
        }

 

4.函式的返回值：

console.log(sum(3, 4));

        //函式：求和
        function sum(a, b) {
            return a + b;
        }

 

 九 偽陣列：arguments

arguments代表的是實參。有個講究的地方是：arguments只在函式中使用。

1.（1）返回函式實參的個數：arguments.length

 

fn(2,4);
    fn(2,4,6);
    fn(2,4,6,8);

    function fn(a,b,c) {
        console.log(arguments);
        console.log(fn.length);         //獲取形參的個數
        console.log(arguments.length);  //獲取實參的個數

        console.log("----------------");
    }

 

（2）之所以說arguments是偽陣列，是因為：arguments可以修改元素，但不能改變陣列的長短。舉例：

 

 

fn(2,4);
    fn(2,4,6);
    fn(2,4,6,8);

    function fn(a,b) {
        arguments[0] = 99;  //將實參的第一個數改為99
        arguments.push(8);  //此方法不通過，因為無法增加元素
    }

 

清空陣列的幾種方式：

 

 

   var array = [1,2,3,4,5,6];

    array.splice(0);      //方式1：刪除陣列中所有專案
    array.length = 0;     //方式1：length屬性可以賦值，在其它語言中length是隻讀
    array = [];           //方式3：推薦