JavaScript筆記1

一.概述
JavaScript一種直譯式腳本語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來為HTML網頁增加動態功能。
JavaScript程式設計師通常簡稱js;
特點:
     1:一種腳本語言,需要依賴html才能運行;
     2:不需要編譯,由瀏覽器直接解釋運行;
     3:弱型別語言,定義變項的時候,不需要指定明確的資料型態,變數的資料型別完全由值決定;
     4:javaScript是基於物件的,內建了許多的物件;

　 5.JavaScript嚴格區分大小寫，如果弄錯了大小寫，程式將報錯或運行不正常

二.構成
主要有3部分組成:ECMAScript/DOM/BOM
     1.ECMAScript描述了該語言的語法和基本物件。
     2.文件物件模式（DOM）,描述處理網頁內容的方法和介面。
     3.瀏覽器物件模型（BOM）,描述與瀏覽器互動的方法與介面。
 
三.資料型別
     基本資料型別:
         Undefined:代表的為不存在的變數;
            Boolean :true或false;
     引用資料型別:
         Null:代表的為預設資料類型的預設值;
         Object

四.支援的運算子

算術運算子:

# 賦值運算子:

# 比較運算子:

# 邏輯運算子:

#五.基本文法

寫:

     1:單獨寫js檔案;
     2:在html頁面中任意位置使用<script></script>標籤,在標籤內寫javascript代碼;
     3:在開始標籤中,也可以直接寫一行javascript程式碼;
註解:單行註解(//)與多行註解(/*  */)的格式與java一致;
函數:
     使用關鍵字function:
    格式:
         function 方法名稱(參數清單){
    形式僅只有變數名,沒有資料型別;
     2.呼叫的時候;無論方法定義的時候使用了幾個參數,都可以傳遞任意多個參數;如果參數多於定義的參數,後面的值會丟失;
定義變數:
     var 變數名 = 資料值;(var固定!!)
基本語句:
     alert(變數或資料值);  彈出式顯示值
     Typeof(變數或資料值);  判斷變數或資料值的資料類型;

六.資料型別轉換
其它資料型態---->boolean:
     1.非0為真,0為假;

     2.字串長度為0為假,大於0為真;

     3.物件存在即為真,不存在為假;
     4.Null/undefined皆為假;
字串--->number:
     parseInt方法;
等性比較的特殊情況:
     1.NaN == NaN,回傳false.
     2.2== true,回傳fasle.會將其他資料型別轉向number型別,再比較;

七.Js取得html中的標籤物件
document.getElementById(“id屬性值”);(document即為目前的html頁面).
面向該標籤物件,可以使用標籤的屬性名稱,取得對應的屬性值;常用的屬性有:

     value:取得輸入方塊中的值

     innerHTML:取得標籤的元素體;
範例:(以下html的body部分,三張圖片輪播效果)

<span style="color: #008080">  1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">  2</span>      <span style="color: #0000ff"><span style="color: #800000">img</span> <span style="color: #ff0000">src</span>=<span style="color: #0000ff">"img/1.jpg"</span> <span style="color: #ff0000">id</span>=<span style="color: #0000ff">"img"</span> <span style="color: #ff0000">width</span>=<span style="color: #0000ff">"100%"</span> <span style="color: #ff0000">height</span>=<span style="color: #0000ff">"100%"</span><span style="color: #0000ff">></span>
<span style="color: #008080">  3</span>      <span style="color: #0000ff"><span style="color: #800000">script</span> <span style="color: #ff0000">type</span>=<span style="color: #0000ff">"text/javascript"</span><span style="color: #0000ff">></span>
<span style="color: #008080">  4</span>      //设置定时器 JSwindow方法
<span style="color: #008080">  5</span>     setInterval(
<span style="color: #008080">  6</span>          switch1, 500);
<span style="color: #008080">  7</span>      //定义switch函数
<span style="color: #008080">  8</span>     var i = 1;
<span style="color: #008080">  9</span>      function switch1() { //switch为关键字,不可用
<span style="color: #008080"> 10</span>         var pic = document.getElementById("img"); //可以将取到的img标签使用任何变量名(pic)接收
<span style="color: #008080"> 11</span>         pic.src = "img/" + (++i) + ".jpg";
<span style="color: #008080"> 12</span>          if (i == 3) {
<span style="color: #008080"> 13</span>              i = 0;
<span style="color: #008080"> 14</span>          }
<span style="color: #008080"> 15</span>      }
<span style="color: #008080"> 16</span>      <span style="color: #0000ff"></span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 17</span>  <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span></span></span></span>

八.setInterval() (BOM-Window)
语法:
     setInterval(code,millisec)
     按照指定的周期（以毫秒计）来调用函数或计算表达式。
举例:(见七)

九.setTimeout() (BOM-Window)
语法:
     var t=setTimeout("javascript语句",毫秒):
     第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
     第二个参数指示从当前起多少毫秒后执行第一个参数。
     该函数执行完毕后自动关闭.
举例:(效果:两秒显示一下广告图片)

<span style="color: #008080">  1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">  2</span>      <span style="color: #0000ff"><span style="color: #800000">div</span> <span style="color: #ff0000">style</span>=<span style="color: #0000ff">"display: none"</span> <span style="color: #ff0000">id</span>=<span style="color: #0000ff">"imggg"</span><span style="color: #0000ff">></span>
<span style="color: #008080">  3</span>          <span style="color: #0000ff"><span style="color: #800000">img</span> <span style="color: #ff0000">src</span>=<span style="color: #0000ff">"img/gg.jpg"</span> <span style="color: #ff0000">width</span>=<span style="color: #0000ff">"80%"</span> <span style="color: #ff0000">height</span>=<span style="color: #0000ff">"30%"</span><span style="color: #0000ff">></span>
<span style="color: #008080">  4</span>      <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #008080">  5</span>      <span style="color: #0000ff"><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #008080">  6</span>          <span style="color: #0000ff"><span style="color: #800000">img</span> <span style="color: #ff0000">src</span>=<span style="color: #0000ff">"img/2.jpg"</span> <span style="color: #ff0000">width</span>=<span style="color: #0000ff">"80%"</span> <span style="color: #ff0000">height</span>=<span style="color: #0000ff">"30%"</span><span style="color: #0000ff">></span>
<span style="color: #008080">  7</span>      <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #008080">  8</span>      <span style="color: #0000ff"><span style="color: #800000">script</span> <span style="color: #ff0000">type</span>=<span style="color: #0000ff">"text/javascript"</span><span style="color: #0000ff">></span>
<span style="color: #008080">  9</span>      //设置定时器
<span style="color: #008080"> 10</span>     setTimeout(show, 2000);
<span style="color: #008080"> 11</span>      function show() {
<span style="color: #008080"> 12</span>          //获取广告图片所在的div
<span style="color: #008080"> 13</span>          var div = document.getElementById("imggg");
<span style="color: #008080"> 14</span>          div.style.display = "block";
<span style="color: #008080"> 15</span>          setTimeout(hide, 2000);
<span style="color: #008080"> 16</span>      }
<span style="color: #008080"> 17</span> 
<span style="color: #008080"> 18</span>     function hide() {
<span style="color: #008080"> 19</span>          var div = document.getElementById("imggg");
<span style="color: #008080"> 20</span>          div.style.display = "none";
<span style="color: #008080"> 21</span>          setTimeout(show, 2000);
<span style="color: #008080"> 22</span>      }
<span style="color: #008080"> 23</span>      <span style="color: #0000ff"></span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 24</span>  <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 25</span> </span></span></span></span></span></span>

以上是JavaScript筆記1的詳細內容。更多資訊請關注PHP中文網其他相關文章！