探索Javascript

1、 JavaScript探索JavaScript JavaScript對象Javascript是一種基于對象的語言，因此可以使用面向?qū)ο蟮乃枷雭磉M(jìn)行javascript程序設(shè)計對象就是由一些彼此相關(guān)的屬性和方法集合在一起而構(gòu)成的一個數(shù)據(jù)實體。屬性與方法都是對象的成員顏色貓身高抓老鼠對象屬性方法 JavaScriptJavaScript中的對象是由屬性(properties)和方法(methods)兩個基本的元素的構(gòu)成的。前者是對象在實施其所需要行為的過程中，實現(xiàn)信息的裝載單位，從而與變量相關(guān)聯(lián)；后者是指對象能夠按照設(shè)計者的意圖而被執(zhí)行，從而與特定的函數(shù)相聯(lián)。 JavaScript本地對象1.Da

2、te 日期對象 Date對象用來處理日期和時間。（日期基線：1970年1月1日00：00：00）例：var today = new Date();var year = today.getFullYear();var month = today.getMonth() + 1;var day = today.getDay();日期參數(shù)：1.省略；2.英文-數(shù)值格式：月 日，公元年 時：分：秒 如：today=new Date(October 1,2008 12:00:00)3.數(shù)值格式：公元年，月，日，時，分，秒 如：today=new Date(2008,10,1) JavaScript2.Ma

3、th 數(shù)學(xué)對象(靜態(tài)對象)Math 對象用來處理復(fù)雜的數(shù)學(xué)運算。Math對象是javascript的一個全局對象，不需要用new 創(chuàng)建例：var a = Math.abs(-2);/return 2var b = Math.round(5.5);/return 6var c = Math.random();數(shù)學(xué)對象的屬性：數(shù)學(xué)對象的屬性：格式：Math.屬性屬性： PI 圓周率SQRT1_2 1/2的平方根SQRT2 2的平方根數(shù)學(xué)對象的方法：數(shù)學(xué)對象的方法：格式：Math.方法（參數(shù)）方法： ceil(數(shù)值) 大于等于該數(shù)值的最小整數(shù)floor(數(shù)值) 小于等于該數(shù)值的最大整數(shù)min(數(shù)值1

4、,數(shù)值2) 最小值 JavaScriptmax(數(shù)值1,數(shù)值2) 最大值pow(數(shù)值1,數(shù)值2) 數(shù)值1的數(shù)值2次方random() 0倒1的隨機(jī)數(shù)round(數(shù)值) 最接近該數(shù)值的整數(shù)sqrt(數(shù)值) 開平方根abs() 絕對值三角函數(shù)等：sin(弧度)、cos、tan、asin、acos、atan JavaScript3.Array 數(shù)組對象var week = new Array();var week = new Array(星期一 , 星期二, 星期三);alert(week1);alert(week.length);var arr=a,b,c,d; arr20建立數(shù)組對象：建立數(shù)組對

5、象：格式：數(shù)組對象名稱=new Array(元素個數(shù))格式：數(shù)組對象名稱=new Array(元素1，元素2，.)格式：數(shù)組對象名稱=元素1，元素2，.數(shù)組對象的屬性：數(shù)組對象的屬性：格式：數(shù)組對象名稱.屬性屬性：length數(shù)組長度數(shù)組對象的方法：數(shù)組對象的方法：格式：數(shù)組對象名稱.方法(參數(shù))方法： join(分隔符) 數(shù)組元素組合為字符串toString() 以字符串表示數(shù)組reverse() 數(shù)組反轉(zhuǎn)valueOf() 返回數(shù)組值 JavaScript4. String 對象(字符串對象)String 對象用來處理文本。事實上任何一個字符串常量都是一個String對象,可以將其直接作為

6、對象來使用。例1：獲得字符串長度var str = “hello”;var str2 = “你好”;alert(str.length);/outputs 5alert(str2.length);/outputs 2建立字符串對象：建立字符串對象：格式：字符串對象名稱=new String(字符串常量)格式：字符串變量名稱=字符串常量“字符串對象的屬性：字符串對象的屬性：格式：字符串對象名稱 . 屬性屬性：length 字符串長度字符串對象的方法：字符串對象的方法：格式：字符串對象名稱.方法方法： 如下頁 JavaScriptbold() 粗體italtics() 斜體strike() 刪除線f

7、ontsize(字級大小) 文字大小fontcolor(#rrggbb) 文字顏色sup() 上標(biāo)sub() 下標(biāo)toUpperCase() 大寫toLowerCase() 小寫charAt(索引) 返回索引位置的字符charCodeAt(索引) 返回索引位置的ASCII字符碼，十進(jìn)制表示indexOf(“字串”,索引) 返回字串在對象中的索引位置lastIndexOf(“字串”,索引) 返回字串在對象中的索引位置（反向搜索）search(“字串”) 返回字串在對象中的索引位置replace(字串1,字串2) 字串2替換字串1split(“字串”,限制) 將字串從對象中刪除substr(sta

8、rt,length) 返回特定長度的字串 JavaScript例2.提取字符串var str = hello;alert(str.substr(0,2);例3.替換字符串var str = hello;alert(str.replace(h, a);例4.大小寫字母轉(zhuǎn)換var str = hello;alert(str.toLowerCase();alert(str.toUpperCase(); JavaScript自定義對象1.構(gòu)造函數(shù)方式function Person(name) = name;this.say = function()alert(I am +this.n

9、ame);var p1 = new Person(wang);var p2 = new Person(li);p1.say();p2.say();alert(p1.say=p2.say); JavaScript2. Object方式function createObject(name) var p = new Object(); =name; p.say = function()alert(I am +); return p;var p1 = createObject(“wang);var p2 = createObject(“l(fā)i);alert(+ +p

10、2.name);p1.say();p2.say(); JavaScript3.原型方式 D = d;Dtotype.isLeapYear = function()var year = this.getFullYear();if(year%4=0 & year%100!=0) | year%400=0)return true;elsereturn false;var d = new Date();alert(d.isLeapYear(); JavaScript4.For in 用法function Person() =

11、zxx;this.age = 19;this.height = 176;var p1 = new Person();var prop, str = ;for(prop in p1)str += p1prop + ;alert(str); JavaScriptvar x, str = ;var arr = new Array();arr0 = 3.5;arr1 = abc;arr2 = 3;for(x in arr)str += x + : + arrx + “;alert(str); JavaScript5.json對象var person = ;var girl = name:”miss w

12、ang”,age:20,show : function() alert(my name is + );var p= “a” : 1 , ”b” : 2var a=“c”:“d”:3,”e”:”s”,”f”:”f” JavaScriptwindowdocumentframeshistorylocationnavigatorscreenformsimageslinksBOM 瀏覽器對象模型BOM (瀏覽器對象模型），它提供了與瀏覽器窗口進(jìn)行交互的對象。 JavaScriptwindow對象Window對象表示整個瀏覽器窗口。1.系統(tǒng)消息框alert()例：alert(hello)

13、;2.確認(rèn)對話框confirm()Confirm()方法返回一個boolean值，如果點擊ok返回true,點擊cancel返回false;例：If(confirm(“確定要刪除嗎?”)/刪除 JavaScript3.輸入對話框prompt()如果點擊ok將文本框中的值作為函數(shù)值返回，如果點擊cancel返回null例：var name = prompt(“請輸入你的姓名？”，“”);If(name != null)alert(welcome+ name);4. 打開新窗口Window.open()例：Window.open(“http:/”,”_blank”,”width=300, heig

14、ht=200”); JavaScript5.定時器用以指定在一段特定的時間后執(zhí)行某段程序。1.setTimeout() 格式：定時器對象名= setTimeout(“”，毫秒)功能：隔多久執(zhí)行一次。(只執(zhí)行一次)clearTimeout(定時器對象名) 終止定時器2.setInterval()格式：定時器對象名= setInterval(“”，毫秒)功能：循環(huán)執(zhí)行表達(dá)式，間隔的時間是clearInterval(定時器對象名) 終止定時器 JavaScripthistory對象history對象是window對象的子對象，對應(yīng)于瀏覽器的歷史記錄。屬性：屬性：current 當(dāng)前歷史記錄的網(wǎng)址le

15、ngth 存儲在記錄清單中的網(wǎng)址數(shù)目next 下一個歷史記錄的網(wǎng)址previous 上一個歷史記錄的網(wǎng)址方法：方法：back() 回到上一個歷史記錄中的網(wǎng)址forward() 回到下一個歷史記錄中的網(wǎng)址go(整數(shù)或URL) 前往歷史記錄中的網(wǎng)址window.history.go(-1);window.history.go(1);history.back();history.forward(); JavaScriptLocationLocation對象對象Location對象也是window對象的子對象，通過它可以獲取或設(shè)置瀏覽器的當(dāng)前地址。1.跳轉(zhuǎn)到其它頁面window.location =

16、“http:/”;location.href = “http:/”;Window.location.href=屬性：屬性：hash 錨點名稱host 主機(jī)名稱hostname host:port主機(jī)名及端口href 完整的URL字符串pathname 路徑port 端口protocol 協(xié)議search 查詢信息方法：方法：location.reload() 重新載入頁面（刷新)replace(網(wǎng)址) 用指定的網(wǎng)頁取代當(dāng)前網(wǎng)頁 JavaScriptnavigator對象Navigator對象包含著有關(guān)web瀏覽器的信息，它也是window的屬性，可以用window.navigator引用它，也

17、可以用navigator引用例：獲取瀏覽器內(nèi)部代號，名稱，操作系統(tǒng)等信息var info = navigator.userAgent;alert(info);document.write(瀏覽器名稱: +navigator.appName+);document.write(版本號: +navigator.appVersion+);document.write(代碼名字: +navigator.appCodeName+);document.write(用戶代理標(biāo)識: +navigator.userAgent); JavaScriptDOM 文檔對象模型DOM (document object m

18、odel) 文檔對象模型，是HTML和XML的應(yīng)用程序接口（API）， 它定義了操作文檔對象的接口 。DOM將把整個頁面規(guī)劃成由節(jié)點層級構(gòu)成的文檔。所謂文檔對象模型，其實就是對網(wǎng)頁HTML中的各種元素的一種內(nèi)部的表示，例如HTML中的頭、段落、列表、風(fēng)格、ID等，所有的元素都能通過DOM來訪問 。DOM可以被看作是一棵擁有很多互相關(guān)聯(lián)的節(jié)點的樹，使用parent(父), child(子), sibling(兄弟)等，來表明家庭成員之間的關(guān)系。 JavaScripthtmlheadbodymetatitleh1pullilili JavaScript節(jié)點節(jié)點（node) 一詞來自于網(wǎng)絡(luò)理論，這代

19、表著網(wǎng)絡(luò)中一個個的連接點，網(wǎng)絡(luò)是由節(jié)點構(gòu)成的。對于html文檔也是一樣，文檔是由節(jié)點構(gòu)成的集合。1.元素節(jié)點元素節(jié)點如 之類的元素，這些元素在文檔中的布局形成了文檔的結(jié)構(gòu)。2.文本節(jié)點文本節(jié)點指的是元素節(jié)點中的內(nèi)容，但并非所有的元素節(jié)點都包含有文本節(jié)點。3.屬性節(jié)點元素都或多或少有一些屬性，屬性的作用是對元素作出更具體的描述。屬性節(jié)點總是被包含在元素節(jié)點當(dāng)中。 JavaScriptptitle=“提示”這是一個段落元素節(jié)點屬性節(jié)點文本節(jié)點html:這是一個段落 JavaScript獲取文檔對象1.getElementById()這個方法返回一個與給定id屬性值的元素節(jié)點相對應(yīng)的對象。例：doc

20、ument.getElementById(box);2.getElementsByName() getElementsByTagName() 這個方法返回一個對象數(shù)組。每個對象分別對應(yīng)著文檔里給定標(biāo)簽的一個元素。例：document.getElementsByTagName(li); JavaScript3. getAttribute 獲取節(jié)點屬性值object.getAttribute(attribute)例：var a = document.getElementByTagName(a);for(var i=0; ia.length; i+)alert(ai.getAttribute(tit

21、le);4.setAttribute() 設(shè)置節(jié)點屬性值object.setAttribute(attribute, value)例：var link = document.getElementById(link);link.setAttribute(title, 鏈接提示信息); JavaScriptcreateElement()createTextNode() appendChild() className style.color JavaScript function test() var div = document.createElement(div); var node = doc

22、ument.createTextNode (這是新創(chuàng)建的元素); div.appendChild(node); document.body.appendChild(div); 插入到元素的末尾：appendChild ()放到某節(jié)點之前：insertBefore ()替換掉原有的某個節(jié)點： replaceChild ()removeChild函數(shù)能夠用于刪除父節(jié)點的任意子節(jié)點，并返回被刪除的對象。 JavaScriptDOM 總結(jié)：一份文檔就是一棵樹;節(jié)點分為不同的類型，分別是：元素節(jié)點，屬性節(jié)點，文本節(jié)點;每個節(jié)點都是一個對象;getElementById()方法將返回一個對象，該對象對應(yīng)著

23、文檔里的一個元素節(jié)點;getElementByTagName()方法返回一個對象數(shù)組，它們分別對應(yīng)著文檔里的元素節(jié)點; JavaScript事件一、什么是事件？JavaScript和HTML之間的交互是通過用戶和瀏覽器操作頁面時引發(fā)的事件來處理的。頁面載入完成時，會觸發(fā)一個事件。用戶點擊按鈕時，點擊也是一個事件。通常鼠標(biāo)或熱鍵的動作我們稱之為事件，而由鼠標(biāo)或熱鍵引發(fā)的一連串程序的動作，稱之為事件驅(qū)動。而對事件進(jìn)行處理程序或函數(shù)，我們稱之為事件處理程序二、怎樣將事情處理程序綁定到特定的事件中？方法方法1 1. 使用HTML標(biāo)記創(chuàng)建事件處理程序;例：給圖片添加點擊事件 JavaScript Jav

24、aScript方法方法2 2：使用對象的事件屬性創(chuàng)建事件處理程序語法：object.onEventName = eventHandler;例1：給document對象添加點擊事件function sayHello()alert(hello);document.onclick = sayHello;/document.onclick = function()sayHello();/document.onclick = function()alert(hello);例2：給所有的圖片都添加一個單擊事件，用于在新窗口中打開圖片var img_obj = document.getElementsByT

25、agName(img);for(var i = 0; i img_obj.length; i+)img_obji.onclick = function()alert(this.src); JavaScript表單操作一、表單表單(Form)是Web頁面中最常用的元素之一，它通常由一個或多個表單域組成，這些表單域接收用戶的輸入，并通過表單的提交功能將數(shù)據(jù)傳遞到服務(wù)器端，由服務(wù)器端對這些數(shù)據(jù)進(jìn)入處理。在Javascript中可以很方便的操作表單，例如獲取表單域的數(shù)據(jù)進(jìn)行有效驗證、自動給表單域賦值、處理表單域的事件等。每對.標(biāo)記被解析為一個對象，即form對象，可以通過document.forms集

26、合來引用這些對象，例如一個名為form1的表單可以用如下語句獲得：var myform = document.formsform1;不僅如此，還可以通過表單在文檔中的索引來引用表單對象，例如下面代碼表示引用文檔中的第一個表單對象。var myform = document.forms0; JavaScript二、引用表單域 表單域是指用于接收用戶輸入或操作的一些頁面元素，例如文本框、按鈕、復(fù)選框等。它們通常包含在一個表單中，要在Javascript中引用一個表單元素，可以采用以下兩種方法：var element = theForm.elementsindex;var element = the

27、Form.elementselementName;在第一種方法中，index表示表單域的索引，第一個出現(xiàn)的索引為0,依次遞增; 第二種方法中，elementName表示表單域name屬性所指定的表單域名稱;有時需要指定遍歷某種類型的表單域，可以使用表單域的type屬性來獲取表單域類型，例如要處理所有的復(fù)選框，可以使用如下語句for(var i=0; i theForm.elements.length; i+)if(checkbox = theForm.elememtsi.type)/處理程序 JavaScript三、表單域的通用屬性1. disabled有時希望表單域不能接收用戶操作，如有些文

28、本框要設(shè)定為只讀; 當(dāng)所有的表單域輸入完成之前，設(shè)定提交按鈕為灰的，不可單擊等。這些都可以通過表單域的disable屬性來實現(xiàn)：例：element.disable = true;2. 使用name屬性獲取或者設(shè)置表單域的名稱3. 使用form屬性獲取該表單域所屬的表單4. 使用value屬性來獲取和設(shè)置表單域的值四、表單域的通用方法1. 使用focus() 方法讓表單域獲得焦點2. 使用 blur()方法讓表單域失去焦點 JavaScript五、表單域的通用事件事件是處理用戶操作的一項重要機(jī)制，在Javascript中，表單域提供了豐富的事件以方便程序捕獲用戶行為。1. 使用onfocus事件和onblur事件，該事件在表單獲得焦點和失去焦點時觸發(fā)。2.使用 onclick、onkeydown、onkeyup、onkeypress 事件，這4個事件分別對應(yīng)于鼠標(biāo)和鍵盤的幾個操作。click事件表示鼠標(biāo)單擊該表單域; 3. 使用 onmouseover、onmouseout、onmousedown、onmouseup事件，這些事件對應(yīng)于鼠標(biāo)的不同動作4.使用onchange事件捕獲表單域值的變化每個表單域都有一定的值，在這些值發(fā)生變化的時候會觸發(fā)onchange事件，例如：文本域文本的變化，復(fù)選框從選中變?yōu)槲催x中，下