首頁 > web前端 > js教程 > javascript入門學習指南新手篇

javascript入門學習指南新手篇

伊谢尔伦
發布: 2017-06-16 10:05:51
原創
2303 人瀏覽過

javascript對於前端開發來說,是一門必學的課程,以下是入門的前3節課程,一起看看吧。

第一課
1:javascript的主要特點
解釋型:不需要編譯,瀏覽器直接解釋執行
基於物件:我們可以直接使用JS已經建立的物件
事件驅動:可以對以事件驅動的方式對應客戶端的輸入,無須經過伺服器端程式
安全性:不允許存取本機硬碟,不能將資料寫入伺服器上
跨平台:js依賴瀏覽器本身,與作業系統無關

第二課
如何在網頁中寫Javascript
1:在頁面中直接嵌入Javascript
    
javascript可以插入在標籤中間,
也可以放在標籤中間    
最常用放在標籤之間    

##案例如下,將javascript程式碼插入標籤中間。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>初学javascript</title>
    <script language="javascript">        var now=new Date();//获取Date对象的一个实例
        var hour=now.getHours();//获取小时数
        var min=now.getMinutes();//获取分钟数
        alert("当前时间"+hour+":"+min+"\n欢迎访问柠檬学院http://www.bjlemon.com/");    </script>
</head>
<body>
</body>
</html>
登入後複製

案例2程式碼如下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的年月日</title>
    <script language="javascript">        var now=new Date();//获取日期对象
        var year=now.getYear()+1900;//获得年,在js中年份需要加1900才可以显示此时此刻的年份
        var month=now.getMonth()+1;//获得月份,月份是0-11,所以在js中需要加1
        var date=now.getDate();//获得日
        var day=now.getDay();//获得星期几
        var day_week=new Array("礼拜日","礼拜一","礼拜二","礼拜三","礼拜四","礼拜五","礼拜六");        var week=day_week[day];        var time="当前时间:"+year+"年"+month+"月"+date+"日"+week;
        alert(time);    </script>
</head>
<body></body>
</html>
登入後複製

2:引用外部的Javascript

如果腳本比較複雜或是同一段程式碼被很多頁面所使用,則可以將這些腳本程式碼放置在一個單獨的檔案中,該檔案的副檔名是.js,然後再需要使用該程式碼的web頁面中連結該javascript檔即可



(建議)以上程式碼一般寫在中間比較好

在.js後綴的文件中,不需要使用<script></script>標籤對括起來

表示的是載入頁面時呼叫getDate()方法getdate()是定義在.js後綴的檔案中的方法

此案例後綴是.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>引用外部的js</title>
    <script language="javascript" src="js1.js">
    </script>
</head>
<body onload="getdate()">
</body>
</html>
登入後複製

此案例後綴是.js

function getdate(){    var now=new Date();//获取日期对象
        var year=now.getYear()+1900;//获得年,在js中年份需要加1900才可以显示此时此刻的年份
        var month=now.getMonth()+1;//获得月份,月份是0-11,所以在js中需要加1
        var date=now.getDate();//获得日
        var day=now.getDay();//获得星期几
        var day_week=new Array("礼拜日","礼拜一","礼拜二","礼拜三","礼拜四","礼拜五","礼拜六");        
        var week=day_week[day];        
        var time="当前时间:"+year+"年"+month+"月"+date+"日"+week;
        alert(time);
    
}
登入後複製

第三課

javascript的語法
1:javascript的語法
  1.1:js的變數區分大小寫
        usename,useName這是兩個不同的變數
  1.2:每行結尾的分號可有可無,如果語句的結尾都沒有分號,那麼js
  會自動將這一行程式碼的結尾當作語句的結尾
        alert("hello world");
        alert("helloworldworld")#. :變數是弱型別
        定義變數時只使用var運算子
        例如:var usename="biexiansheng";
       #  {  //程式碼}封裝在大括號內的語句依照順序執行
  1.5:註解
        1.5.1:單行註解  //
        //"後面的文字即為註解內容
            註解的內容在程式碼執行過程中無法運作。
            var now=new Date();//取得日期物件
        1.5.2:多行註解/**/
            多行註解以/*開頭,以*/結尾,兩者之間的內容為註釋內容為註解內容為註程式碼執行過程中不起任何作用。
            /*
            *功能:以目前日期為
                  function getClock(){
                //內容物
         

第四課
javascript的資料型態(不管javascript有多少種資料型,宣告的時候只可以用var來宣告)
1:數值類型
    整形:123   //十進位
          0123  //八進制,以0開頭
          0x123 //十六進位,以0x開頭(是零不是o)     # 使用科學記數法
          3.1415926   //標準形式的浮點數
          3.14E9   
2:字符型
    字元型資​​料是使用單引號或多引號括起來的一個或多個字元
    例如:'a'    'hello world'
          "a"   char資料類型
    如果要表示單一字符,必須要使用長度為1的字串
    
    單引號包含雙引號'"hello"'
    雙引號包含單引號"'world'"
3:布林型
    布林型資料只有true或false,在js中也可以使用整數0代表false,使用非0的整數代表true

4:轉義字元
以反斜線開頭的不可顯示的特殊字符通常稱為控製字符,也被稱為轉義字符
    \b退格   \n換行   \f換頁   \tTab符  \'單引號   \" 雙引號   \tTab符  \'單引號   \" 雙引號   \tTab符  \'單引號   \" 雙引號   \tTab符  \'單引號   \" 雙引號   \tTab符  \'單引號   \" 雙引號   \tTab符  \'單引號   \" 雙引號   \tTab符  \'單引號   \" 雙引號   \ \反斜線 

5:空白值
    null,用於定義空的或不存在的引用
    例如var a=null;
#    
6:未定義值
    已經宣告但是沒有賦值的變數
    var a;
    alert(a);
    彈出undefined是關鍵字,用來代表未定義值   
# 型
    數組類型,數組是包含基本和組合資料的序列,在javascript腳本語言中
    每種資料型別對應一種對象,本質上即為Array對象。 45,56,45,78,78,65];

    由於數組本質上為Array對象,則可用運算符new來創建新的數組,如

    var score=new Array(45,65,78 ,8,45);
    存取陣列中特定元素可透過此元素的索引位置index來實現,如下列語句宣告
    變數傳回陣列score中第4個元素
    var m=score[3 ];

第五課
變數的定義與使用
1:變數的命名規則
    變數名稱由字母,數字,底線組成,但不能以數字開頭
    不能使用javascript中的關鍵字

    嚴格區分大小寫

    例如  username  username
2:變數的宣告
    var variable
     ,year,month,date;
    可以在宣告變數的同時對它賦值,也就是初始化
         var now="2016-8-11",year="2016",month="8",="2016-8-11",year="2016",month="8",=" date="11";
    如果只是宣告了變量,沒有賦值,那麼變數的預設值就是undefined 
    
    javascript是弱型,宣告的時候不需要指定變數的類型,變數的類型將根據變數的值來確定
    
    全域變數的宣告:1:在函數體外的宣告為全域變數,無論是否有var宣告
                             局部變量,不使用var宣告的變數是全域變數
   
#

//如果給予尚未宣告的變數類型賦值時,javascript會自動使用該變數建立一個佈局變數
例如:a="hello world";    
       funcation test(){
          c="局部變數";//這個c是局部變量,也是唯一的定義局部變數
            b="全部變數";//這個b也是全部變數
       } #   #       function test2(){
            alert(b);
       }
   
3:變量的作用     全部變數:定義在所有函數之外,作用於整個程式碼的變數
        局部變數:定義在函數體內,只作用於函數體內的變數

第六課
運算子的應用
1:賦值運算子

    簡單賦值運算子

        例如var useName='tom';//簡單賦值運算子
   =a+b;
        a-=b;//相當於a=a-b;
        a*=b;//相當於a=a*b;
   於a=a/b;
        a%=b;//相當於a=a%b;
        a&b=b;///////b; ;//相當於a=a|b;邏輯或運算
        a^=b;//相當於a=a^b;邏輯非運算子
2:算術運算子
+ - * / %
++ 前++先加後用   後++先用後加
-- 前--先減後用   後--先用後減
注意:在進行除法運算時,0不能作為除數,如果0作為除數,那麼將會回傳這個關鍵字infinity

3:比較運算子
>大於  <小於  >=大於等於  <=小於等於 
==等於         只是依照表面值判斷,且不涉及資料類型,alert("11"==11);回傳true。
===絕對等於    不只判斷表面值,還要判斷資料型態是否相同。
! = 不等於     只是根據表面值來判斷,且不涉及資料型態。
! ==不絕對等於 不僅判斷表面值,還要判斷資料型態是否一樣。 

4:邏輯運算子
    !邏輯非
    &&邏輯與。只有當兩個運算元的值都為true的時候,結果才會true
    ||邏輯或。只有兩個運算元有一個為true,則結果為true
5:條件運算子
    條件運算子是javascript支援的一種特殊的三元運算子
    語法格式:操作數?結果1:結果2;
          若操作數的值為true,則整個表達式的結果為結果1
          若操作數的值為false,則整個表達式的結果為結果2










#######################11 :字串運算子###    連接字串的兩種方式###    +。 var a="hello"+"world";###    +=。 var a+="hello world!!!";   #######

第七課
流程控制if,switch語句
1:if條件判斷語句
    1:if(expression){
        //expression為true的時候執行裡面的語句
    }
    2:if(expression){
        //expression為true的時間執行裡面的語句
    }else
    3:if(expression){
        //expression為true的時候執行裡面的語句
##        //expression為true的時候執行裡面的語句
##        //expression為true的時候執行裡面的語句
    }else if(expression1){
       }else if(expression1){
       }else if(expression1){
 #    }else if(expression2){
        //expression2為true的時候執行裡面的語句
    }else{
   #        //都不滿足的時候指定else
    }
2:switch語句
優點:可讀性好,易讀
#    語法格式
    switch(表達式){##itch(表達式){##itch(表達式){## case 條件1:語句1;
                break;
        case 條件上2:語句 2;#  條件3:語句3;
                break;
        case 條件4:語句4;
                break;
        case 條件5:語句5;
     執行此語句;        
#    }
的第八課
流程控制之for,while,do-while語句
1:for循環語句
    語法格式
    for(1初始條件;2迴圈條件;4成長步幅){
        3語句體;
    }
    //先執行初始條件,然後判斷循環條件是否回傳true,
    //如果回傳false,終止條件,若為true,執行語句體,
   //然後執行成長步幅
    //1->2true->3->4->2true->3->4
    //1->2false->3-> 4->2false  for迴圈結束
    實例
    var sum=0;
    for(var i=0;i<10;. #    alert(sum);
2:while循環語句
    語法格式
        while(表達式1){
            1true->2-> ;1true->2.....
        實例
        var sum=0;
        var i=1;#> sum+=i;
            i++;
        }
        alert(i);
3:do-while循環語句#    alert(i);
3:do-while循環語句# 
    語法格式
    do{
        1執行循環本體
    }while(2判斷條件);
    1->2true-while(2判斷條件);
    1->2true->#> ##    
    注意:while循環是先判斷條件是夠成立,然後再根據判斷的結果
    是否執行循環體
    do-while循環是先執行一次循環體,然後再判斷條件是否為#    do-while循環是先執行一次循環體,然後再判斷條件是否為#    do-while循環是先執行一次循環體,然後再判斷條件是否為#  true.
    所以do-while循環能夠保證至少執行一次。
    
    實例
    var sum=0;
    var i=1;
    do{
     alert(sum);

以上是javascript入門學習指南新手篇的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板