JavaScript 基礎1

1.JavaScript 認識

上個世紀的1995年,當時的網(wǎng)景公司正憑借其Navigator瀏覽器成為Web時代開啟時最著名的第一代互聯(lián)網(wǎng)公司熏纯。

由于網(wǎng)景公司希望能在靜態(tài)HTML頁面上添加一些動態(tài)效果记劝,于是叫Brendan Eich這哥們在兩周之內(nèi)設計出了JavaScript語言。你沒看錯,這哥們只用了10天時間油猫。

為什么起名叫JavaScript?原因是當時Java語言非常紅火柠偶,所以網(wǎng)景公司希望借Java的名氣來推廣情妖,但事實上JavaScript除了語法上有點像Java,其他部分基本上沒啥關系诱担。

2.使用

  JavaScritp的基本元素是語句毡证。一條語句代表著一條命令。通常以分號(;)結(jié)尾蔫仙。
  實際上分號用不用都行料睛,只是為了增加閱讀性。

  <!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>標題</title>
  </head>
  <body>    
        <script type="text/javascript">
              document.writeln("hello world");
        </script>
  </body>
  </html>

  document.writeln("hello"); 僅僅是在文檔中添加了一些文字,并沒有什么明顯的效果摇邦,
  我們這么演示其實是告訴大家恤煞,js的作用就是這樣通過代碼去控制界面的呈現(xiàn)效果。

3.數(shù)據(jù)類型

  我們學習編程語言大多數(shù)都是概述 → 數(shù)據(jù)類型 → 語法 → 類
  JavaScript也是一樣的,定義變量要使用到var關鍵字施籍,在定義的同時可以為其初始化賦值居扒。
  • 局部變量:定義在函數(shù)中的變量稱為局部變量,只能在該函數(shù)范圍內(nèi)使用丑慎。

  • 全局變量:直接在script元素中定義的變量稱為全局變量喜喂,可在任意地方使用。

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>標題</title>
    </head>
    <body>    
        <script type="text/javascript">
            <!-- 定義字符串  -->
            var str = "abc";
            <!-- 定義數(shù)值  -->
            var num = 1;
            <!-- 定義布爾  -->
            var status = false;
        </script> 
    </body>
    </html>
    
  • 注意:
    JavaScript是一種弱類型的語言竿裂,所謂弱類型,指的是他不需要明確的聲明變量的類型玉吁,可以隨意的賦值自己想聲明類型的變量,還可以根據(jù)場景在類型間自由轉(zhuǎn)換腻异。

  • 字符類型:string類型就是java中的字符串进副,var str = "abc";

  • 布爾類型:boolean類型由兩個值,true和false悔常。

  • 數(shù)值類型:整數(shù)和浮點數(shù)都用number類型便是影斑。
    var num = 5;
    var pi = 3.14;
    var color = 0x123456;

4.定義函數(shù)

  定義函數(shù)其實就是我們需要用到的一些API封裝起來给赞,這樣的話我們就不用每次使用都重新寫一遍,只需要調(diào)用函數(shù)即可鸥昏。

  例:定義有參函數(shù)塞俱,無參函數(shù),有返回值函數(shù)

  <!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>標題</title>
  </head>
  <body>    
      <script type="text/javascript">
           <!-- 定義無參函數(shù) -->
            function hello(){
                document.writeln("hello");
            }
            hello();

            <!-- 定義有參函數(shù) -->
            function add(num1,num2){
                document.writeln(num1+num2);
            }
            var num1 = 2;
            var num2 = 3;
            add(num1,num2);

            <!-- 定義有返回值函數(shù) -->
            function getSum(num1,num2){
                return (num1+num2);
            }
            document.writeln(getSum(num1,num2));

      </script>
      <hr/>
      <script type="text/javascript">
            hello();
      </script>
  </body>
  </html>

5.創(chuàng)建對象

  • 創(chuàng)建對象:通過new Object的方式來創(chuàng)建對象吏垮。
    <body>
    <script type="text/javascript">
    var persion = new Object();
    persion.name = "xioaming";
    persion.age = 12;

            document.writeln(persion.name);       
            document.writeln(persion.age);        
        </script>
    </body>
    
  • 對象字面量:用這個可以直接定義對象及其屬性障涯。
    <body>
    <script type="text/javascript">
    var persion = {
    name : "xiaoli",
    age : 1
    };
    document.writeln(persion.name);
    document.writeln(persion.age);

        </script>
    </body>
    
    <!-- 注意:
        屬性的名稱和值時間用冒號分隔(:)
        多個屬性之間用逗號分隔(,)
        大括號之后必須用分號結(jié)尾(;) -->
    
  • 對象函數(shù):使用上面的方式可以為對象添加變量,也可以為對象添加函數(shù)膳汪。

    <body>    
        <script type="text/javascript">
            var persion = {
                name : "xiaoli",
                age : 1,
                getSum : function(){
                    return 1+2;
                }
            };
            document.writeln(persion.name);       
            document.writeln(persion.age);        
            document.writeln(persion.getSum());       
      
        </script>
    </body>
    
    <!-- 注意:方法內(nèi)部使用對象屬性時唯蝶,要使用this關鍵字 -->
    

6.使用對象

  • 讀取和修改對象屬性值:一種是直接對象.屬性名稱,一種是對象["屬性名稱"]

    <body>    
        <script type="text/javascript">
            var persion = {
                name : "xiaoli",
                age : 1,
                getSum : function(){
                    return 1+2;
                }
            };
            persion.name= "haha";
            persion["name"] = "hehe";
      
            document.writeln(persion.name);       
            document.writeln(persion["name"]);        
        </script>
    </body>
    
  • 枚舉對象屬性:使用for ...in 語句遗嗽。

     <body>  
       <script type="text/javascript">
           var persion = {
               name : "xiaoli",
               age : 1,
               getSum : function(){
                   return 1+2;
               }
           };
     
           persion.name= "haha";
           persion["name"] = "hehe";
     
           document.writeln(persion.name);       
           document.writeln(persion["name"]);
           for(var prop in persion){    
                document.writeln("name="+prop+",value="+persion[prop]+"<br>");                           
           }
       </script>
     </body>
    
     <!-- 注意:對象.[變量名]  中括號里面的變量名不需要加雙引號 -->
    
  • 增刪對象的屬性和方法

    注意:
         判斷對象中是否存在某屬性用:
         var hasName = "name" in persion;
    
    <body>    
        <script type="text/javascript">
            var persion = {
                name : "xiaoli",
             };
      
            <!--增加屬性和函數(shù)-->
            persion.age = 12;
            persion.getSum = function(){
                return 1+2;
            };
      
            for(var prop in persion){
            document.writeln("name="+prop+",value="+persion[prop]+"<br>");
            }
      
            <!-- 刪除屬性和函數(shù)-->
      
            delete persion.name;
            delete persion["age"];
            delete persion.getSum;
      
            for(var prop in persion){
                    document.writeln("name="+prop+",value="+persion[prop]+"<br>");
            }
        </script>
    </body>
    

7.運算符

運算符 說明
++粘我、-- 前置或后置自增或自減
+、-痹换、*征字、/、% 加娇豫、減匙姜、乘、除冯痢、求余
<氮昧、<=、>浦楣、>= 小于袖肥、小于等于、大于振劳、大于等于
==椎组、!= 相等澎迎、不相等
===庐杨、!== 等同夹供、不等同
&&、II 邏輯與仁堪、邏輯或
= 賦值
+ 字符串連接
?: 三元運算符
  注意:
  a:== 和 != 比較若類型不同哮洽,先償試轉(zhuǎn)換類型,再作值比較弦聂,最后返回值比較結(jié)果 鸟辅。

  b:而 === 和 !== 只有在相同類型下,才會比較其值氛什。

8.顯示類型轉(zhuǎn)換

  • 數(shù)值轉(zhuǎn)換為字符串:可以使用toString方法
    var str = (123).toString();
方法 說明 返回
toString() 以十進制形式表示數(shù)值 字符串
toString(2)
toString(8)
toString(16)
以二、八匪凉、十六進制表示數(shù)值 字符串
toFixedn() 以小數(shù)點后有n為數(shù)字的形式表示實數(shù) 字符串
toExponential(n) 以指數(shù)表示法表示數(shù)值枪眉,
尾數(shù)的小數(shù)點前后分別有1位數(shù)字和n位數(shù)字
字符串
toPrecision(n) 用n個有效數(shù)字表示數(shù)值 字符串
  • 將字符串轉(zhuǎn)換為數(shù)值:使用Number函數(shù)。

    var num = Number("123");
    
函數(shù) 說明
Number(str)
parseFloat(str)
生成一個整數(shù)或?qū)崝?shù)值
parseInt(str) 生成一個整數(shù)值

9.使用數(shù)組

  • 注意:
    a:創(chuàng)建數(shù)組的時候不需要聲明數(shù)組中元素的個數(shù)再层,JS數(shù)組會自動調(diào)整大小以便容納所有的元素贸铜。
    b:不必聲明數(shù)組所含數(shù)據(jù)的類型,JS中的素組可以混合包含各種類型的數(shù)據(jù)聂受。

  • 使用New創(chuàng)建數(shù)組

    <body>    
        <script type="text/javascript">
            var array = new Array();
            array[0] = "a";
            array[1] = 12;
            array[2] = false;
        </script>
    </body>
    
  • 使用數(shù)組字面量

    <body>    
        <script type="text/javascript">
            var array = ["a",12,false];
        </script>
    </body>
    
  • 枚舉數(shù)組內(nèi)容

    <body>    
        <script type="text/javascript">
            var array = new Array();
            array[0] = "a";
            array[1] = 12;
            array[2] = false;
    
            for(var i = 0;i<array.length;i++){
                document.writeln("array["+i+"]="+array[i])
            }
        </script>
    </body>
    
  • 內(nèi)置的數(shù)組方法:這些方法是js對Array對象封裝好的直接調(diào)用就可以了蒿秦。

方法 說明 返回
concat(<otherArray>) 將數(shù)組和參數(shù)所致數(shù)組的內(nèi)容合并成一個新數(shù)組 數(shù)組
jion(<separator>) 將所有數(shù)組的元素連接成一個字符串 字符串
pop() 將數(shù)組當做棧使用,刪除并返回最后一個元素 對象
push(<item>) 將數(shù)組當做棧使用蛋济,將制定的數(shù)據(jù)添加到數(shù)組中 void
reverse() 就地反轉(zhuǎn)數(shù)組元素的次序 數(shù)組
shift() 類似pop棍鳖,但是操作的是第一個元素 對象
skuce(<start>,<end>) 返回一個子數(shù)組 數(shù)組
sort() 對數(shù)組進行排序 數(shù)組
unshift(<item>) 類似樸樹,但是新元素插到數(shù)組的開頭位置 void

10.異常處理

  JS中用trry....catch語句處理錯誤碗旅。
  <body>    
      <script type="text/javascript">
          try{
              var array;
              document.writeln("num="+array[4]);
          }catch(e){
              document.writeln("Error:"+e);
          }finally{
              document.writeln("請檢查你的代碼");
          }
      </script>
  </body>

11.比較undefined和null值

  JS中有兩個特殊的值:undefined和null渡处,在視圖讀取未賦值的變量或?qū)ο鬀]有屬性時就是undefined值。

  <body>
      <script type="text/javascript">
           var array = [1,2,3];
           var persion = {
               name:"xiaoming",
           };
           document.writeln("age=" + persion.age);
           document.writeln("num=" + array[4]);
      </script>
  </body>

輸出結(jié)果:age=undefined num=undefined


  null與undefined略有不同祟辟,undefined是在未定義的情況下得到的值医瘫。
  null是用于表示已經(jīng)賦值了一個值但是該值不是一個有效的object、string川尖、number或boolean登下。
  如果想檢查某個屬性是否為null或undefined,時需要用叮喳!非運算符就可以被芳。
  Undefined類型只有一個值,即undefined馍悟。當聲明的變量還未被初始化時畔濒,變量的默認值為undefined。
  Null類型也只有一個值锣咒,即null侵状。null用來表示尚未存在的對象,常用來表示函數(shù)企圖返回一個不存在的對象毅整。

Web筆記首頁目錄

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末趣兄,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子悼嫉,更是在濱河造成了極大的恐慌艇潭,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,997評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異蹋凝,居然都是意外死亡鲁纠,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,603評論 3 392
  • 文/潘曉璐 我一進店門鳍寂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來改含,“玉大人,你說我怎么就攤上這事迄汛『慈溃” “怎么了?”我有些...
    開封第一講書人閱讀 163,359評論 0 353
  • 文/不壞的土叔 我叫張陵隔心,是天一觀的道長白群。 經(jīng)常有香客問我,道長硬霍,這世上最難降的妖魔是什么帜慢? 我笑而不...
    開封第一講書人閱讀 58,309評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮唯卖,結(jié)果婚禮上粱玲,老公的妹妹穿的比我還像新娘。我一直安慰自己拜轨,他們只是感情好抽减,可當我...
    茶點故事閱讀 67,346評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著橄碾,像睡著了一般卵沉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上法牲,一...
    開封第一講書人閱讀 51,258評論 1 300
  • 那天史汗,我揣著相機與錄音,去河邊找鬼拒垃。 笑死停撞,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的悼瓮。 我是一名探鬼主播戈毒,決...
    沈念sama閱讀 40,122評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼横堡!你這毒婦竟也來了埋市?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,970評論 0 275
  • 序言:老撾萬榮一對情侶失蹤命贴,失蹤者是張志新(化名)和其女友劉穎恐疲,沒想到半個月后腊满,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體套么,經(jīng)...
    沈念sama閱讀 45,403評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡培己,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,596評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了胚泌。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片省咨。...
    茶點故事閱讀 39,769評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖玷室,靈堂內(nèi)的尸體忽然破棺而出零蓉,到底是詐尸還是另有隱情,我是刑警寧澤穷缤,帶...
    沈念sama閱讀 35,464評論 5 344
  • 正文 年R本政府宣布敌蜂,位于F島的核電站,受9級特大地震影響津肛,放射性物質(zhì)發(fā)生泄漏章喉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,075評論 3 327
  • 文/蒙蒙 一身坐、第九天 我趴在偏房一處隱蔽的房頂上張望秸脱。 院中可真熱鬧,春花似錦部蛇、人聲如沸摊唇。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,705評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽巷查。三九已至,卻和暖如春抹腿,著一層夾襖步出監(jiān)牢的瞬間岛请,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,848評論 1 269
  • 我被黑心中介騙來泰國打工幢踏, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留髓需,地道東北人。 一個月前我還...
    沈念sama閱讀 47,831評論 2 370
  • 正文 我出身青樓房蝉,卻偏偏與公主長得像僚匆,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子搭幻,可洞房花燭夜當晚...
    茶點故事閱讀 44,678評論 2 354

推薦閱讀更多精彩內(nèi)容