前端基礎之Javascript

時間 2019-11-17

標籤前端基礎 javascript 欄目 JavaScript 简体版

原文原文鏈接

一 . JavaScript概述

Web前端有三層 : javascript

　　　　HTML : 從語義角度,描述頁面結構css

　　　　CSS : 從審美角度,描述樣式(美化頁面)html

　　　　JavaScript : 從交互角度,描述行爲(提高用戶體驗)前端

JavaScript的歷史 java

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

一開始JavaScript叫作LiveScript，可是因爲當時Java這個語言特別火，因此爲了傍大牌，就更名爲JavaScript.數據庫

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

ECMAScript 瀏覽器

　　ECMAScript是一種由Ecma國際（前身爲歐洲計算機制造商協會,英文名稱是European Computer Manufacturers Association）制定的標準。服務器

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

　　儘管 ECMAScript 是一個重要的標準，但它並非 JavaScript 惟一的部分，固然，也不是惟一被標準化的部分。實際上，一個完整的 JavaScript 實現是由如下 3 個不一樣部分組成的：

核心（ECMAScript）
文檔對象模型（DOM） Document object model (整合js，css，html)
瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）
Javascript 在開發中絕大多數狀況是基於對象的.也是面向對象的.

　　簡單地說，ECMAScript 描述瞭如下內容：

語法
類型
語句
關鍵字
保留字
運算符
對象 (封裝繼承多態) 基於對象的語言.使用對象.

JavaScript的介紹

　　　　● JavaScript 是弱類型的語言 , 變量值須要用 var 來聲明

var a;

　　　　●JavaScript 是有界面效果的

　　　　●JavaScript 是前臺語言,運行在用戶的終端頁面上,而不是服務器上.就是一個簡單的製做頁面效果的語言,服務於頁面的交互效果,美化,絢麗,不能操做數據庫.

　　JavaScript 的特色 :

　　　　● 簡單易用 : 可使用任何文本編輯工具編寫,只須要瀏覽器就能夠執行.

　　　　● 解釋執行(解釋語言) : 事先不編譯,逐行執行 , 無需進行嚴格的變量聲明.

　　　　● 基於對象 : 內置大量現成對象,編寫少許程序能夠完成目標.

二 . 語法與書寫規範

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

<script type="text/javascript">

</script>

　　alert語句

alert(英文翻譯爲"警報")的用途 : 彈出"警告框"

　　語法規則

　　(1) . JavaScript 對縮進 , 換行 , 空格不感興趣.

　　　　備註 : 每一條語句末尾要加上分號 , 雖然分號不是必須加的,可是爲了程序從此要壓縮,若是不加,壓縮以後將沒法運行.

　　(2) . 因此的符號,都是英語的. 好比括號 . 引號 , 分號

　　(3) . JavaScript 的註釋 :

　　　　單行註釋 :

// 這是註釋

　　　　多行註釋 :

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

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

　　控制檯輸出 : console.log("")

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

　　控制檯在Chrome瀏覽器的F12中。控制檯是工程師、程序員調試程序的地方。程序員常用這條語句輸出一些東西，來測試程序是否正確。

　　用戶輸入 : prompt() 語句

prompt() 就是專門彈出可以讓用戶輸入的對話框.

上方代碼中 ,用戶輸入的內容,獎盃傳入的變量a 裏面 .w咱們能夠打開 f12 打開控制檯查看結果.

prompt() 語句中,用戶無論輸入什麼內容,都是字符串.

alert 和 prompt 的區別 :

alert("從前有座山");                //直接使用，不須要變量
var a = prompt("請輸入一個數字");   // 必須用一個變量，來接收用戶輸入的值

　　直接量 : 數字和字符串

"直接量" 即 "常量" ,也稱爲"字面量" . 看見什麼,他就是什麼.

　　簡單的直接量有兩種 : 數字字符串

　　(1) . 數值的直接量的表達很是簡單,寫上去就好了,不須要任何的符號.

alert(666);  // 666是數字,因此不須要加引導

(2) . 字符串也很簡單 , 但必定要加上引號,能夠是單詞,句子等.

　　變量

var a = 100;

var是英語"variant"變量的縮寫. 後面要加一個空格 , 空格後面的東西就是"變量名".

　　　　● 定義變量 : var 就是一個關鍵字 , 用來定義變量,所謂關鍵字 , 就是有特殊功能的小詞語. 關鍵字後面一點要有空格隔開.

　　　　● 變量的賦值 : 等號表示賦值 , 將等號右邊的值 , 賦值給左邊的變量.

　　　　● 變量名 : 咱們能夠給變量任意的取名字.

　　a 和 b 均可以, 只是b 方法將定義和賦值放到一塊兒.

變量的命名規範 : 只能由英語字母、數字、下劃線、美圓符號$構成，且不能以數字開頭，而且不能是JavaScript保留字。(同一個字母大寫和小寫是兩個變量)

　　變量的類型

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

　數值型

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

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

typeof() 表示 獲取變量的類型, 語法 : typrof 變量　　　

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

字符串類型 : 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

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

變量值的傳遞(賦值)

　　語句 :

a = b

　　把 b 的值賦值給 a , b 不變 .

　　將等號右邊的值,賦值給左邊的變量: 等號右邊的變量,值不變.

　　注意 :

<script type="text/javascript">
    var a = "3";
    var b = 2;
    console.log(a-b)

</script>

// 結果等於  1

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

變量格式的轉換

parseInt()能夠將字符串轉數字。parse表示「轉換」，Int表示「整數」（注意Int的拼寫）。例如：

字符串轉數字的方法：

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

三 . 數據類型

 /*       
        number     -----  數值
        boolean    -----  布爾值
        string     -----  字符串
        undefined  -----  undefined
        null       -----   null  
      
 *

　　3.1 基礎數據類型

　　　　3.1.1 數字類型(number)

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

　　　　3.1.2 字符串類型(string)

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

　　　　3.1.3 布爾值類型(boolean)

Boolean類型僅有兩個值：true和false，也表明1和0，實際運算中true=1,false=0
布爾值也能夠看做on/off、yes/no、1/0對應true/false
Boolean值主要用於JavaScript的控制語句，例如：

if (x==1){
      y=y+1;
}else{
      y=y-1;
      }

　　　　3.1.4 null 與 undefined

Undefined類型

Undefined 類型只有一個值，即 undefined。當聲明的變量未初始化時，該變量的默認值是 undefined。

當函數無明確返回值時，返回的也是值 "undefined";

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

Null類型

另外一種只有一個值的類型是 Null，它只有一個專用值 null，即它的字面量。值 undefined 其實是從值 null 派生來的，所以 ECMAScript 把它們定義爲相等的。

儘管這兩個值相等，但它們的含義不一樣。undefined 是聲明瞭變量但未對其初始化時賦予該變量的值，null 則用於表示還沒有存在的對象（在討論 typeof 運算符時，簡單地介紹過這一點）。若是函數或方法要返回的是對象，那麼找不到該對象時，返回的一般是 null。

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

　　3.2 運算符

　　　　(1) . 賦值運算符

以 var x = 12 , y = 5; 來演示 :

　　　　(2) . 算數運算符

以 var a = 5 , b = 2; 爲例 :

注意 : var x = a++; 先將a的值賦值給x , x輸出5 ; 在對a++,a就是6.(--同理)

　　　　(3) . 比較運算符

以 var a = 5;

　　　　(4) . 特殊狀況

// 不能對字符串進行+運算 只能拼接
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))

　　3.3 數據類型轉換

　　　　將數值類型-->字符串類型

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

　　　　將字符串類型-->數值類型

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

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

　　　　將任何數據類型-->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))

　　3.4 流程控制

　　　　(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) . 邏輯與&& , 邏輯或||

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

switch基本格式
switch (表達式) {
    case 值1:語句1;break;
    case 值2:語句2;break;
    case 值3:語句3;break;
    default:語句4;
}

示例 :

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

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

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

打印等邊三角形

　　3.5 異常處理

try {
    //這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
    // 若是try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
    //e是一個局部變量，用來指向Error對象或者其餘拋出的對象
}
finally {
     //不管try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。
}

四 . JavaScript 的對象

介紹 :

　　在JavaScript中除了null和undefined之外其餘的數據類型都被定義成了對象，也能夠用建立對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，在JavaScript程序大多數功能都是基於對象實現的。

<script language="javascript">
var aa=Number.MAX_VALUE; 
//利用數字對象獲取可表示最大數
var bb=new String("hello JavaScript"); 
//建立字符串對象
var cc=new Date();
//建立日期對象
var dd=new Array("星期一","星期二","星期三","星期四"); 
//數組對象
</script>

　　4.1 數組 Array

1 .數組建立的三種方式 :

建立方法一:
var arrname = [元素0,元素1,....,];       // var arr = [1,2,3];

建立方法二 : 
var arrname = new Array(元素0,元素1,....,);    //var arrname = new Array(100,"a",true);

建立方法三 : 
var arrname = new Array(長度)
                    // 初始化數組長度
                           var cnweek = new Array(7);
                                 cnweek[0] = "星期日";
                                 cnweek[1] = "星期一";
                                 ................
                                 cnweek[6] = "星期六";

2 . 數組的賦值

var arr = [];
//經過下標進行一一賦值
arr[0] = 132;
arr[1] = "嘿嘿嘿";
arr[2] = "哈哈哈";

3 . 數組的經常使用方法

數組的經常使用方法示例 : --> 點擊 ◆◆◆

　　4.2 字符串String

1 . 字符串對象的建立

　　(1) . 變量 = "字符串"

　　　(2) . 字符串對象名稱 = new String(字符串)

//1:
var str1 = "hello world";

//2:
var str1 = new String("hello world")

2 . 字符串的方法 :

字符串的經常使用方法示例 : --> 點擊 ★★★

　　4.3 Date 日期對象

1 . 建立日期對象只有構造函數一種方式,使用 new 關鍵字

//建立了一個date對象
var myDate = new Date();

2 . 經常使用方法 :

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

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

示例 :

function getCurrentDate(){
        //1. 建立Date對象
        var date = new Date(); //沒有填入任何參數那麼就是當前時間
        //2. 得到當前年份
        var year = date.getFullYear();
        //3. 得到當前月份 js中月份是從0到11.
        var month = date.getMonth()+1;
        //4. 得到當前日
        var day = date.getDate();
        //5. 得到當前小時
        var hour = date.getHours();
        //6. 得到當前分鐘
        var min = date.getMinutes();
        //7. 得到當前秒
        var sec = date.getSeconds();
        //8. 得到當前星期
        var week = date.getDay(); //沒有getWeek
        // 2014年06月18日 15:40:30 星期三
        return year+"年"+month+"月"+day+"日 "+hour+":"+min+":"+sec+" "+week;
    }

alert(getCurrentDate());

//解決 自動補齊成兩位數字的方法
    function changeNum(num){
    if(num < 10){
        return "0"+num;
    }else{
        return num;
    }

}
//將數字 0~6 轉換成 星期日到星期六
    function parseWeek(week){
    var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    //             0      1      2      3 .............
    return arr[week];
}

示例

3 . Date對象的方法--設置日期和時間

//設置日期和時間
//setDate(day_of_month)       設置日
//setMonth (month)                 設置月
//setFullYear (year)               設置年
//setHours (hour)         設置小時
//setMinutes (minute)     設置分鐘
//setSeconds (second)     設置秒
//setMillliseconds (ms)       設置毫秒(0-999)
//setTime (allms)     設置累計毫秒(從1970/1/1午夜)
    
var x=new Date();
x.setFullYear (1997);    //設置年1997
x.setMonth(7);        //設置月7
x.setDate(1);        //設置日1
x.setHours(5);        //設置小時5
x.setMinutes(12);    //設置分鐘12
x.setSeconds(54);    //設置秒54
x.setMilliseconds(230);        //設置毫秒230
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日5點12分54秒

x.setTime(870409430000); //設置累計毫秒數
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日12點23分50秒

View Code

　 4 . Date對象的方法--設置日期和時間

日期和時間的轉換:

getTimezoneOffset():8個時區×15度×4分/度=480;
返回本地時間與GMT的時間差，以分鐘爲單位
toUTCString()
返回國際標準時間字符串
toLocalString()
返回本地格式時間字符串
Date.parse(x)
返回累計毫秒數(從1970/1/1午夜到本地時間)
Date.UTC(x)
返回累計毫秒數(從1970/1/1午夜到國際時間)

View Code