JavaScript

HTML:負責了一個頁面的結構

   css: 負責了一個頁面的樣式

   javascript: 負責與用戶進行交互。

   javascript的歷時:

             微軟: 蓋茨認爲未來是"視窗"的世界。

       網景: 1995年推出了一款瀏覽器(導航者)和liveScript(校驗功能),非常受歡迎

       和sun公司合作,借用了Java的名字,把liveScript改名成JavaScript。70%市場份額

       

JavaScript的特點:       

         1、跨平臺

    2、安全性(JavaScript的代碼不能直接訪問硬盤的內容)

JavaScript與Java的區別:

         1、JavaScript是屬於網景公司產品,Java是sun公司的產品

    2、JavaScript是基於對象的語言,Java是面向對象的語言。

    3、JavaScript是解釋型語言,Java是解釋、編譯型語言

    4、JavaScript是弱類型語言,Java是強類型語言

   Java中聲明變量的時候必須要明確該變量的數據類型。

   JavaScript聲明變量不需要明確是何種數據類型,任何的變量都是使用一個關鍵字var去聲明即可

如何編寫JavaScript的代碼?

  方式一:可以使用<script> 進行編寫

    格式:

     <script type="text/javascript">

       js代碼;

     </script>

     例:<scripttype = "text/javascript">

                     alert("哈哈");

                   </script>

  方式二:引入外部的JavaScript文件

    格式:<scriptsrc="1JavaScript.js"type="text/javascript"></script>

    注意:1、<script>是有開始標籤與結束標籤的,千萬不要在一個標籤中結束了。

        2、如果<script>已經用於引入了js文件,那麼該<script>標籤體就不能再寫js代碼了

     

 

javascript常用的函數:

 alert("顯示的內容..“);彈出框

 document.write("數據");//向頁面輸出數據...   

網頁的註釋:

 html <!--

  css的註釋 /* 註釋的內容 */

 JavaScript //註釋的內容單行註釋            /* 註釋的內容 */ 多行註釋

控制流程語句

  if語句

    格式:

           if(判斷條件){

                     符合條件執行的代碼

                     }

   if語句的特殊之處:

           1、在JavaScript中的if語句條件不單止可以寫布爾表達式,還可以寫任何的數據

             number 非0位true,0爲false

       string 內容不能空是true,內容空的時候是false

                   undefinedfalse

                   NaNfalse

 

var workAge = 2;

var str = null;

var b;

if(b){

         document.write("welcome");

}else{

         document.write("baibai");

         }

  選擇語句:

   switch(變量){

           case 值1

          

             break;

         case值2

          

             break;

         case值3

          

             break;

         }

         特殊之處:

1、  在JavaScript中case後面可以跟常量與變量還可以跟表達式

javascript的變量聲明:

           格式:

             var 變量名 = 數據;

           聲明變量要注意的事項:

             1、在JavaScript中聲明變量是 使用var關鍵字聲明的,JavaScript中的變量可以存儲任意的數據類型數據

                   2、JavaScript中變量數據類型是根據存儲的值決定的,可以隨時更改存儲數據的類型。

                   3、定義了多個同名的變量時,後定義的同名變量是覆蓋前面定義的同名變量。

                   4、聲明變量的時候可以省略var關鍵字,但是不建議省略

         javascript的數據類型

           typeof 查看變量的數據類型

           使用格式:typeof 變量名

           number 小數與整數

           string 字符串 注意:JavaScript中沒有字符的概念,只有字符串,字符串可以卸載單引號或者雙引號中

           boolean 布爾數據類型

           undefined undefined代表該變量沒有定義呢

運算符:

           +(加法、正數、連接符)

           true 是1,false 是0;

  vara = 1;

  a =a + 1;

 document.write("a+1="+ a +"<br/>");// 2

 document.write("1+false:"+(1+false)+"<br/>");//1

 document.write("1+true:"+ (1+true)+"<br/>");// 2

 document.write("hello"+1);// hello1

 document.write("<br/>");

 

  除法:

  vara = 10;

  varb = 3;

 document.write("除法運算是:" + (a/b) + "<br/>");// 如果兩個整數相除不能整除的時候結果還是小數

 

  比較運算符

  字符串與字符串的比較規則是:

    情況1:能找到對應位置上的不同字符,那麼就比較第一個不同字符的大小

         情況2:不能找到對應位置上的不同字符,這時候比較的是兩個字符串的長度

   

 document.write("10大於3嗎?"+(10>3)+"<br/>");//true

 document.write("10字符串大於3字符串嗎?"+("10">"3")+"<br/>");//false字符串與字符串比較

 document.write("10大於字符串9嗎?"+(10>"9")+"<br/>");//true 字符串還可以和數字進行比較  凡是數字與字符串進行比較,會先把字符串轉換成

  數字再進行 比較的。

 

  邏輯運算符:

  //沒有單與的

 document.write((true&&true)+"<br/>");// true

 document.write((true&&false)+"<br/>");// false

 document.write((false&&true)+"<br/>");// false

 document.write((false&&false)+"<br/>");// false

 

 document.write((true||true)+"<br/>");// true

 document.write((true||false)+"<br/>");// true

 document.write((false||true)+"<br/>");// true

 document.write((false||false)+"<br/>");// false

 

  三目運算符

    布爾表達式?值1:值2;

  varage = 19;

 document.write(age>18?"成年人":"未成年人");

 

字符串轉數字

   parseInt()  可以把一個字符串轉換成整數

         parseFloat()  可以把一個字符串轉換成小數

var a = "12";

a = 12.54;

a = "12354abcad1232";

a = "a112";// NAN not a number(不是一個數字)

a = "012";// 如果首位是0,那麼就先去除0再進行轉換

a = "0x10";// 如果一個字符串是以0x開頭,那麼會把字符串中的內容當成十六進制的數據處理的

var b = parseInt(a);/*parseInt 方法如果接收的字符串含有非數字的字符,那麼parse方法會從字符串的首個字符開始尋找,一直知道非數組字符爲止,然後就是用前面的數字字符轉換成數字*/

document.write("結果:" + b+ "<br/>");

 

var c = "3.14";

c = "10";//如果一個字符串是整數的,那麼使用parseFloat還是轉換成整數

c = "100a";

c = "a100";

c = parseFloat(c);

document.write("結果:"+c+"<br/>");

 javascript 提供了一個 isNaN 的方法讓我們判斷該字符串是否是一個數字

   is not a number 不是一個數字

         不是一個數字返回true,是一個數字返回false

document.write("123不是一個數字嗎?"+isNaN("123")+"<br/>");

循環語句0702:

if

switch

 switch 語句的特殊之處:case後面可以跟常量與變量或者是表達式

循環語句:

 while

    格式:

           while(判斷的條件){

             循環體內容

           }

           var count = 0;

     while(count<5){

             document.write("helloworld"+"<br/>");

                   count++;

           }

  dowhile循環語句

   do{

                   循環語句

         }while(判斷條件);

         //計算1-100奇數的總和

var num = 1;

var result = 0;

do{

         if(num%2!=0){

           result += num;

         }

         num++;

}while(num<=100);

document.write("結果:"+result+"<br/>");

 

  for循環語句:

    格式

           for(初始化語句;判斷的條件;循環後的語句){

             循環體語句;

           }

           //需求:計算1-100偶數的總和

var result = 0;

for(var i = 1; i<=100; i++){

 if(i%2==0){

   result += i;

  }

}

document.write("結果:"+result+"<br/>");

//正方形* 5行5列

for(var i = 0; i<5; i++){

 for(var j = 0; j<5; j++){

   document.write("*&nbsp;")

  }

 document.write("<br/>");

}

document.write("<hr/>");

//直角三角形

for(var i = 0; i < 5; i++){

 for(var j = 0; j <= i; j++){

   document.write("*&nbsp;");

  }

 document.write("<br/>");

}

document.write("<hr/>");

//乘法口訣

for(var i = 1; i <= 9; i++){

 for(var j = 1; j <= i; j++){

   document.write(j+"*"+i+"="+(i*j)+"&nbsp;&nbsp;");

  }

 document.write("<br/>");

}

for-in語句:

 for(數據類型變量名 : 遍歷的目標){

          

  }

 for-in語句的格式:

   for(var 變量名 in 遍歷的目標){

        

         }

  for-in語句的作用:

    1、可以用於遍歷數組的元素  注意:使用for-in語句遍歷數組元素的時候遍歷出來是數組的下標。

          2、可以用於遍歷對象的所有屬性數據  注意:使用for-in語句遍歷對象的屬性的時候,遍歷出來的是對象的屬性名。

with語句:有了with語句,在存儲對象屬性和調用方法時就不用重複指定對象

    格式:

           with(對象){

          

           }

函數:

  函數的定義格式:

   function 函數名(形參列表){

           函數體;

         }

 javascript的函數要注意的細節:

    1、在JavaScript中函數 定義形參時是不能使用var關鍵字聲明變量的。

         2、在JavaScript中的函數是沒有返回值類型的,如果函數需要返回數據給調用者,直接返回即可,如果不需要返回則不返回。

         3、在JavaScript中是沒有函數重載的概念得,後定義的同名函數會直接覆蓋前面定義的同名函數。

        4、在JavaScript中任何的函數內部都隱式的維護了一個arguments(數組)的對象,給函數傳遞數據的時候,是會先傳遞到arguments對象中,然後再由arguments      對象分配數據給形參

var str1 = new String("hello");

  varstr2 = new String("hello");

 document.write("兩個字符串的對象一樣嗎?"+(str1.toString()==str2.toString()));

創建一個字符串的方式:

方式1:

  newString("字符串的內容");

方式2:

  varstr = "字符串的內容";

字符串常用的方法:

 Anchor()                 生產錨點

 Blink()            爲元素添加blink標籤

 charAt()                 返回指定索引位置處的字符

 charCodeAt()        返回一個整數,代表指定位置上字符的Unicode編碼

 concat()                 返回字符串值,該值包含了兩個或更多個提供的字符串的連接

 fontcolor()    把帶有COLOR屬性的一個HTML<FONT>標記放置在String對象中的文本兩端

 indexOf()                返回String對象內第一次出現子字符串的字符位置

 italics()                   把HTML<I>標記放置在String對象中的文本兩端

 link()              把一個有HREF屬性的HTML錨點放置在String對象中的文本兩端

 replace()                返回根據正則表達式進行文字替換後的字符串的複製

 split()             切割

 substr()                  截取子串

 toUpperCase()     轉大寫

 toLowerCase()     轉小寫

日期對象(Date)

var date = new Date();// 獲取到當前的系統時間

document.write("年:"+date.getFullYear()+"<br/>");

document.write("月:"+(date.getMonth()+1)+"<br/>");

document.write("日:"+date.getDate()+"<br/>");

 

document.write("時:"+date.getHours()+"<br/>");

document.write("分:"+date.getMinutes()+"<br/>");

document.write("秒:"+date.getSeconds()+"<br/>");

定時方法

 window.setInterval("代碼","每隔指定的毫秒數");//setInterval 定時方法,第一個參數要指定調用的代碼,第二個參數是每隔指定的毫秒數調用指定的代碼

Number 對象

  創建Number對象的方式:

       方式1:

           var 變量 = new Number(數字);

         方式2:

           var 變量 = 數字;

  常用的方法:

   toString()          把數字轉換成指定進制形式的字符串

         toFixed()            指定保留小數位,而且還帶有四捨五入

Math 對象常用的方法:

 ceil()             向上取整

 floor()            向下取整

 random()               隨機數方法// 產生的僞隨機數介於 0 和 1 之間(含0,不含1)

 round()          四捨五入

Array數組對象:

  創建數組的方式1:

   var 變量名 = new Array();// 創建一個長度爲0的數組

  創建數組的方式2:

   var 變量名 = new Array(長度); // 創建一個指定長度的數組對象

  創建數組的方式3:

   var 變量名 = new Array("元素1","元素2",......);// 給數組指定元素創建數組的對象

  創建數組的方式4:

   var 變量名 = ["元素1","元素2",......];

  數組要注意的細節:

1、  在JavaScript中數組的長度是可以發生變化的,

數組常用的方法:

 concat()                 把arr1與arr2的數組元素組成一個新的數組返回

 join()              使用指定的分隔符把數組中的元素拼裝成一個字符串返回

 pop()            移除數組中的最後一個元素並返回該元素

 push()            將新元素添加到一個數組中,並返回數組的新長度值

 reverse()                翻轉數組的元素

 shift()            移除數組中的第一個元素並返回該元素

 slice()            指定數組的開始索引值與結束索引值截取數組的元素,並且返回子數組

 sort()             返回一個元素已經進行了排序的Array對象

 splice()          從一個數組中移除一個或多個元素,如果必要,在所移除元素的位置上插入新元素,

自定義對象:

  在JavaScript中沒有類的概念,只要有函數即可創建對象

  自定義對象的方式1:使用無參的函數創建對象

    例子:

          function Person(){}

          var p = new Person();// 創建了一個Person對象了

          p.id = 110;

          p.name = "張三";

  方式2:使用帶參的函數創建對象

   function Person(id,name){

   this.id = id;

   this.name = name;

   this.say = function(){

     alert(name+"呵呵");

    }

  }

  varp = new Person(110,"李四");// 創建對象

  方式3:使用Object函數創建對象

   var p = new Object();

   p.id = 110;

   p.name = "張三";

  方式4:使用字面量的方式創建

           var p = {

                     id : 110,

                     name : "張三",

                     say : function(){

                            alert(this.name+"哈哈");

                     }

                   }

需求:想把getMax與searchEle方法添加到數組對象中

 function Array(){

    this.prototype= new Object();

  }

prototype(原型):

 prototype注意的細節:

    1、prototype是函數(function)的一個必備屬性(書面一點的說法是"保留屬性")(只要是function,就一定要一個prototype屬性)

         2、prototype的值是一個對象

         3、可以任意修改函數的prototype屬性的值

         4、一個對象會自動擁有prototype的所有成員屬性和方法

JavaScript組成部分:

  1、EMCAScript(基礎語法)

  2、BOM(BrowserObject Model)瀏覽器對象模型

  3、DOM

    瀏覽器對象模型中把瀏覽器的各個部分都是用了一個對象進行描述,如果我們要操作瀏覽器的一些屬性,我就可以通過瀏覽器對象模型的對象進行操作

   window             代表了一個新開的窗口

   location             代表了地址欄對象

   screen               代表了整個屏幕的對象

 window 對象常用的方法:

   oper()                 打開一個新的窗口

//      resizeBy()         更改窗口的當前位置縮放指定的x和y偏移量           //過時,瀏覽器不支持了

         resizeTo() 將窗口的大小更改爲指定的寬度和高度值

         moveBy() 相對於原來的窗口移動指定的x,y值

         moveTo()        將窗口左上角的屏幕位置移動到指定的x和y位置

         setInterval()     每經過指定毫秒值後就會執行指定的代碼

         clearInterval() 根據一個任務的ID取消定時任務

         setTimeout()    經過指定毫秒值後執行指定的代碼一次

注意:使用window對象的任何屬性與方法都可以省略window對象不寫的

事件:

  註冊事件的方式:

    方式一:直接在html元素上註冊

           <body οnlοad="ready()">

           function ready(){

       alert("body的元素被加載完畢了。。。");

     }

         方式二:可以用js代碼先找到對應的對象再註冊  // 推薦使用

           var bodyNode =document.getElementById("body");

     bodyNode.onload = function(){

      alert("body的元素被加載完畢...");

     }

常用的事件:

  鼠標點擊相關:

   onclick                         在用戶用鼠標左鍵單擊對象時觸發

         ondblclick          當用戶雙擊對象時觸發

         onmousedown          當用戶用任何鼠標按鈕單擊對象時觸發

         onmouseup               當用戶在鼠標位於對象之上時釋放鼠標按鈕時觸發

  鼠標移動相關:

   onmouseout              當用戶將鼠標指針移出對象邊界時觸發

         onmousemove          當用戶將鼠標劃過對象時觸發

  焦點相關的:

   onblur                         在對象失去輸入焦點時觸發

         onfocus                       當對象獲得焦點時觸發

  其他:

   onchange          當對象或選中區的內容改變時觸發

         onload                         在瀏覽器完成對象的裝載後立即觸發

         onsubmit          當表單將要被提交時觸發

地址欄對象(Location):

 href                設置以及獲取地址欄的對象

 reload()         刷新當前的頁面

Screen 對象

   availHeight                         獲取系統屏幕的工作區域高度,排除Microsoft Windows 任務欄

         availWidth                           獲取系統屏幕的工作區域寬度,排除Windows  任務欄

         height                                   獲取屏幕的垂直分辨率

         width                                    獲取屏幕的水平分辨率

DOM(Document Object Model)文檔對象模型

  一個HTML頁面被瀏覽器加載的時候,瀏覽器就會對整個HTML頁面上的所有標籤都會創建一個對應的對象進行描述,我在瀏覽器上看到的信息只不過就是這些html對象的屬性信息而已。我們只要能找到對應的對象操作對象的屬性,則可以改變瀏覽器當前顯示的內容

  varallNodes = document.all;// 獲取html文件中的所有標籤節點

 for(var i=0; i<allNodes.length; i++){

         alert(allNodes[i].nodeName);//標籤的名字 nodeName;

  }

通過html元素的標籤屬性找節點

 document.getElementById("html元素的id");//根據ID屬性值找元素

 document.getElementsByTagName("標籤名");// 根據標籤名獲取所有的標籤對象

 document.getElementsByName("html元素的name");// 根據標籤的name屬性值去找對應的標籤,返回的是一個數組

// innerHTML 是用於設置標籤體的內容的,value是用於設置標籤的value屬性值

通過關係(父子關係、兄弟關係)找標籤

         parentNode                        獲取當前元素的父節點

         childNodes                          或取當前元素的所有下一級子元素

         firstChild                    獲取當前節點的第一個子節點

         lastChild                     獲取當前節點的最後一個子節點

         nextSibling                          獲取當前節點的下一個節點         (兄節點)

         previousSibling                   獲取當前節點的上一個節點(弟節點)

 

我們可以通過標籤的類型進行判斷篩選

         文本節點的類型:3

         註釋的節點類型:8

         標籤節點的類型:1

創建節點、插入節點、設置節點的屬性

         document.createElement("標籤名")                        創建新元素節點

         elt.setAttribute("屬性名","屬性值")              設置屬性

         elt.appendChild(e)                                                 添加元素到elt中最後的位置

         插入目標元素的位置

         elt.insertBefore(new,child);                       添加到elt中,child之前 // 參數1:要插入的節點 

         elt.removeChild(eChild)                                        刪除指定的子節點

插入目標元素的位置

         elt.insertBefore(newNode,oldNode);                        添加到elt中,child之前

         注意:elt必須是oldNode的直接父節點 

         elt.removeChild(child)                                           刪除指定的子節點

         注意:elt必須是child的直接父節點

正則表達式的創建方式:

        

         方式1:

                   /正則表達式/模式

         方式2:

                   newRegExp("正則表達式",模式);

正則表達式對象常用的方法:

         test  使用正則對象去匹配字符串,如果匹配成功返回true,否則返回false

         exec 根據正則表達式去查找字符串符合規則的內容

模式:

  g            (全文查找出現的所有 pattern)

  i             (忽略大小寫)



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章