javascript
JavaWeb:JavaScript
1. JavaScript概述
Javascript是基于對象和事件驅動的腳本語言,主要應用在客戶端
- 基于對象:提供好了很多對象,可以直接拿過來使用
- 事件驅動:html做網站靜態效果,javascript動態效果
- 客戶端:專門指的是瀏覽器
JavaScript的特點:
- 交互性:信息的動態交互
- 安全性:不可以直接訪問本地硬盤
- 跨平臺性:只要是可以解析js的瀏覽器都可以執行,和平臺無關
javascript和java的區別(雷鋒和雷峰塔)
- java是sun公司,現在oracle;js是網景公司
- JavaScript 是基于對象的,java是面向對象
- java是強類型的語言,js是弱類型的語言
- 比如java里面 int i = “10”;
- js: var i = 10; var m = “10”;
- JavaScript只需解析就可以執行,而java需要先編譯成字節碼文件,再執行
2. JavaScript與java不同
- Netscape公司開發的一種腳本語言 ,并且可在所有主要的瀏覽器中運行 :IE、Firefox、Chorme、Opera
- JavaScript 是基于對象的,java是面向對象
- JavaScript只需解析就可以執行,而java需要先編譯成字節碼文件,再執行
- JavaScript 是一種弱類型語言,java是強類型語言
ECMA-262 是正式的 JavaScript 標準。這個標準基于 JavaScript (Netscape) 和 JScript (Microsoft)。
Netscape (Navigator 2.0) 的 Brendan Eich 發明了這門語言,從 1996 年開始,已經出現在所有的 Netscape 和 Microsoft 瀏覽器中。
ECMA-262 的開發始于 1996 年,在 1997 年 7 月,ECMA 會員大會采納了它的首個版本。
在 1998 年,該標準成為了國際 ISO 標準 (ISO/IEC 16262)。這個標準仍然處于發展之中。
3. JavaScript歷史
在早期瀏覽器競爭的背景下,各瀏覽器廠商標新立異,獨樹一幟,JavaScript 腳本編寫者們苦不堪言
W3C、ECMA 的不懈努力下,隨著Microsoft 的 IE瀏覽器的不斷改進,一個遵奉標準、篤行規范的 Web 新世界展現在世人面前
4. JavaScript語言組成
一個完整 JavaScript實現由以下3個部分組成
- 核心(ECMAScript),ECMA:歐洲計算機協會,由ECMA組織制定的js的語法,語句..
- 文檔對象模型(DOM:Document Object Model)
- 瀏覽器對象模型(BOM:Broswer Object Model)
5. js和html的結合方式
第一種:使用一個標簽
<script type="text/javascript"> js代碼; </script>第二種:使用script標簽,引入一個外部的js文件
創建一個js文件,寫js代碼
<script type="text/javascript" src="1.js"></script>使用第二種方式時候,就不要在script標簽里面寫js代碼了,不會執行。
6. JavaScript的基礎
6.1 JavaScript的變量
JavaScript是弱變量類型的語言。弱變量類型:定義變量的時候變量沒有具體的類型,當變量被賦值的時候變量才會有具體的數據類型
// 定義變量 在JavaScript中定義所有的變量都使用var. var a = 1; var b = "abc"; var c = true; var d = 'bcd';// 如果了解變量的具體類型 那么可以使用 typeof alert(typeof(a)); // output number alert(typeof(b)); // output string alert(typeof(c)); // output boolean alert(typeof(d)); // output string// 在JavaScript中 定義字符串 可以使用單引號 或者 雙引號6.2 JavaScript的數據類型
6.2.1 JavaScript和Java一樣存在兩種數據類型
- 原始值 (存儲在棧Stack中簡單數據)
- 引用值 (存儲在堆heap中對象)
6.2.2 5種原始數據類型
- Undefined、Null、Boolean、Number 和 String
- JavaScript中字符串是原始數據類型
6.2.3 通過typeof運算符,查看變量類型
所有引用類型都是object
6.2.4 通過instanceof 運算符解決typeof對象類型判斷問題
在使用 typeof 運算符時采用引用類型存儲值會出現一個問題,無論引用的是什么類型的對象,它都返回 “object”。ECMAScript 引入了另一個 Java 運算符 instanceof 來解決這個問題。instanceof 運算符與 typeof 運算符相似,用于識別正在處理的對象的類型。與 typeof 方法不同的是,instanceof 方法要求開發者明確地確認對象為某特定類型。例如:
var oStringObject = new String("hello world"); alert(oStringObject instanceof String); //輸出 "true"6.2.5 區分 undefined 和 null
- undefined:變量定義了未初始化或訪問對象不存在屬性
- null:表示訪問的對象不存在
6.3 JavaScript的語句
條件語句
兩種:if語句 和 switch語句
if語句:
var i = 6;if(i>5){alert("i>5"); }else{alert("i<=5"); }switch語句
var a = "2"; // Java中switch作用在什么上? // 在Java中 switch() 可以 byte short char int 不可以 long String類型也是不可以 但是在JDK1.7中String類型可以作用在switch上. // 在JavaScript中 switch是否可以作用在string上. string在JavaScript中是原始數據類型. switch(a){case "1":alert("a==1");break;case "2":alert("a==2");break;case "3":alert("a==3");break;default:alert("a是其他值"); }if語句比較的時候 全等和非全等(=== !==)
var a = "98"; // 與Java不一樣的地方. == 比較的值. 而且可以進行簡單的類型轉換. // 在JavaScript中有一個 === 全等. (值相等 而且 類型也要相等.) if(a === 98){alert("a等于98"); }else{alert("a不等于98"); }循環語句
for語句
var arr = [11,22,33,44];/* for(var i = 0;i<arr.length;i++){alert(arr[i]); } */while語句
var i = 0; while(i<arr.length){alert(arr[i]);i++; }dowhile
var i = 0; do{alert(arr[i]);i++; }while(i<arr.length);for in
for(var i in arr){alert(arr[i]); }6.4 JavaScript中的數組
// 定義數組. var arr1 = []; // 定義一個空數組 var arr2 = [11,22,33,44]; // 定義了一個有元素的數組. var arr3 = [11,true,'abc']; // 定義一個數組 存入不同的數據類型. 但是一般不建議這樣使用./* for(var i = 0;i<arr3.length;i++){alert(arr3[i]); } */ // 定義數組 使用對象定義 var arr4 = new Array(); // 定義了一個空數組. var arr5 = new Array(5); // 定義了一個長度為5的數組. //alert(arr5[0]); // alert(arr4.length); var arr6 = new Array(1,2,3,4,5,6); // 定義了一個數組 元素 1,2,3,4,5 arr6[100] = 10;// 數組的長度是以 數組的最大下標值 + 1 alert(arr6.length);// 面試題 /*一下的語句那個是錯誤的( C )A.var a = //;B.var a = [];C.var a = ();D.var a = {}; */6.5 JavaScript的函數
定義函數:
普通方式
function 函數名(參數列表){函數體 }構造方式(動態函數)
var 函數名 = new Function(“參數列表”,”函數體”);直接方式
var 函數名 = function(參數列表){函數體 }函數中變量作用范圍
在JavaScript中存在于兩個域的,全局域和函數域
特殊的函數
| 回調函數 | 作為參數傳遞的函數 |
| 匿名函數 | 沒有函數名的函數 |
| 匿名回調函數 | 這個方法作為參數傳遞而且還沒有方法名 |
| 私有函數 | 定義在函數內部的函數,保證函數的內部代碼私有性。一個函數執行多個邏輯 |
| 返回函數的函數 | |
| 自調函數 | 定義()(),第一個小括號是函數定義,第二個小括號是函數調用 |
6.6 JavaScript的內置對象
Array
Array對象屬性
Array對象方法
Boolean
boolean對象屬性
boolean對象方法
Date
Math
String
Number
Number對象屬性
Number對象方法
js的全局函數
由于不屬于任何一個對象,直接寫名稱使用
| eval() | 執行js代碼(如果字符串是一個js代碼,使用方法直接執行) |
| encodeURI() | 對字符進行編碼 |
| decodeURI() | 對字符進行解碼 |
| encodeURIComponent() | 把字符串編碼為URI組件 |
| decodeURIComponent() | 解碼一個URI組件 |
| isNaN() | 判斷當前字符串是否是數字 |
| parseInt() | 類型轉換 |
7. JS的面向對象
JS不是面向對象的 是基于對象. JS中的函數就是對象.
對象的定義:
一種
var p1 = new Object();二種
var p2 = {};三種
function P{ }將三種定義形式,分成兩類
普通形式
var obj = {name:”張三”,sayHello:function(){} }函數形式
function Person(){this.name = “李四”;this.sayHello = function(){} }調用的時候 需要new var p = new Person();
8. JS函數中的重載問題
函數的重載:一個類中的方法名相同,但是參數個數或參數類型不同
JS中本身沒有重載需要使用arguments對象來實現類似與重載的效果 arguments本身就是數組
arguments存的方法中的參數 // 使用argument模擬重載效果. function add(){if(arguments.length == 2){return arguments[0] + arguments[1];}else if(arguments.length == 3){return arguments[0] + arguments[1] + arguments[2];} }alert(add(1,2,3));JS中的繼承:
要了解繼承就需要先了解prototype屬性.在每個函數對象中都有一個prototype的屬性
那么就可以使用prototype對對象進行擴展(包括內建對象)
prototype:原型,作用用類對函數對象進行擴展
JS擴展內建對象
// 擴展Array對象.判斷某一個值是否在數組中。 Array.prototype.inArrays = function(val){for(var i = 0;i<this.length;i++){if(this[i]==val){return true}}return false; }var arr = ["red","green","blue"]; alert(arr.inArrays("black"));JS中的繼承:JS中本身沒有繼承,實現繼承的效果. prototype就是一個函數對象的屬性.利用了這個屬性的擴展功能(擴展了的屬性和方法 就可以當成在自己類定義的時候定義的那個屬性和方法)
利用prototype完成繼承的效果
function A(){this.aName = “a”; }function B(){this.bName = “b”; }B.prototype = new A();另一種繼承 原型繼承.
function A(){} A.prototype = {aName : "a" }function B(){this.bName = "b"; }B.prototype = A.prototype;var b = new B(); alert(b.bName); alert(b.aName);9. BOM
Browser Object Model(瀏覽器對象模型)
- Window:對象表示瀏覽器中打開的窗口 最頂層對象
- Navigator :瀏覽器對象
- Screen: 屏幕對象
- History:瀏覽器歷史對象
- Location:地址對象
10. Window對象
Window 對象是 JavaScript 層級中的頂層對象,Window 對象代表一個瀏覽器窗口或一個框架
Window對象常用的方法
| alert() | 彈出帶有一段消息和一個確認按鈕的警告框 |
| confirm() | 彈出帶有一段消息以及確認按鈕和取消按鈕的對話框 |
| prompt() | 彈出可提示用戶輸入的對話框 |
| setTimeout() | 定時,執行一次就ok了,在指定的毫秒數后調用函數或計算表達式 |
| setInterval() | 定時 循環執行,按照指定的周期(以毫秒計)來調用函數或計算表達式 |
| clearTimeout() | 清除定時 |
| clearInterval() | 取消由setInterval()設置的timeout |
| open() | 打開一個新的瀏覽器窗口或查找一個已命名的窗口 |
| close() | 關閉瀏覽器窗口 |
案例:open和showModalDialog
History對象:瀏覽器的歷史對象
History 對象包含用戶(在瀏覽器窗口中)訪問過的 URL
| back() | 加載 history 列表中的前一個 URL |
| go() | 加載 history 列表中的某個具體頁面 |
| forward() | 加載 history 列表中的下一個 URL |
Screen對象:屏幕對象
常用的屬性
width
height
Location對象:地址對象
Location 對象包含有關當前 URL 的信息
常用的屬性 href = url,通過href屬性完成超鏈接效果
Navigator對象:瀏覽器對象
11. DOM對象
Document Object Model
11.1 DOM的介紹
dom:document object model: 文檔對象模型
- 文檔:標記型文檔
- 對象:封裝了屬性和行為的實例,可以直接被調用。
- 模型:所有的標記型文檔都具有一些共性特征的一個體現。
- 用來將標記型文檔封裝成對象,并將標記型文檔中的所有內容(標簽、文本、屬性)都封裝成對象。
- 封裝成對象的目的是為了更方便的操作這些文檔及其文檔中的所有內容。因為對象包含屬性和行為。
- 標記型文檔包含標簽、屬性、標簽中封裝的數據。只要是標記型文檔,DOM這種技術都可以對其進行操作。
- 常見的標記型文檔包括:HTML XML。
- DOM要操作標記型文檔必須先進行解析。
DOM:將文檔解析成內存中的樹狀結構。通過樹狀結構對文檔進行添加節點刪除節點修改節點 查找節點
DOM 是 W3C(萬維網聯盟)的標準
DOM 定義了訪問 HTML 和 XML 文檔的標準:
“W3C 文檔對象模型 (DOM) 是中立于平臺和語言的接口,它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式?!?/p>
11.2 DOM結構模型
11.3 DOM三個級別和DHTML介紹
DOM模型有三種
- DOM level 1:將html文檔封裝成對象。
- DOM level 2:在level 1的基礎上添加新的功能,例如:對于事件和css樣式的支持。
- DOM level 3:支持xml1.0的一些新特性。
DHTML
- 動態的HTML,它不是一門語言,是多項技術綜合體的簡稱
- 包括html,css,dom,javascript
這四種語言的職責
- Html:負責提供標簽,封裝數據,這樣便于操作數據
- Css:負責提供樣式,對標簽中的數據進行樣式定義
- Dom:負責將標簽及其內容解析,封裝成對象,對象中具有屬性和行為
- Javascript:負責提供程序設計語言,對頁面中的對象進行邏輯操作
11.4 BOM 和HTML DOM關系圖
11.5 Node接口屬性和方法
11.6 DOM中的Document對象
每個載入瀏覽器的 HTML 文檔都會成為 Document 對象,Document:代表整個文檔
11.6.1 常用屬性
| all[] | 提供對文檔中所有 HTML 元素的訪問 FF不支持 |
| forms[] | 返回對文檔中所有 Form 對象引用 |
| body | 提供對 <body> 元素的直接訪問 |
11.6.2 使用document查找標簽
| documentElement | 獲得文檔的跟節點 |
| getElementById() | 通過ID獲得元素 |
| getElementsByTagName() | 通過標簽名獲得元素.返回一個數組 |
| getElementsByName() | 通過name屬性 獲得元素 |
| write() | 向文檔寫 HTML 表達式 或 JavaScript 代碼 |
案例:
11.6.3 Document創建標簽
| createElement() | 創建一個元素標簽 |
| createTextNode() | 創建一個文本節點 |
| appendChild() | 添加子節點 |
案例
11.7 Element對象:元素(標簽)
11.7.1 元素對象操作屬性
| getAttribute(name) | 獲得屬性的值 |
| setAttribute(name,value) | 設置屬性 |
| removeAttribute(name) | 刪除屬性 |
在 Element 對象中查找 Element 對象
在Element對象的范圍內,可以用來查找其他節點的唯一有效方法就是getElementsByTagName()方法。而該方法返回的是一個集合
案例:操作元素的屬性
// 操作屬性 (對屬性進行增加 修改 刪除) // 查找元素. var input = document.getElementsByTagName("input")[0]; //alert(input.getAttribute("value"));// 修改name屬性的值 // input.setAttribute("name","uname"); // alert(input.getAttribute("name"));// 添加一個屬性id //alert(input.getAttribute("id")); //input.setAttribute("id","username"); //alert(input.getAttribute("id"));alert(input.name); input.removeAttribute("name"); alert(input.getAttribute("name"));11.7.2 在標簽下查找標簽
childNodes:獲得所有的子節點.屬性不是所有的瀏覽器都兼容
在標簽下查找標簽 只有getElementsByTagName()是有效的
案例
// 查找第一個ul下的所有的li標簽. // 1.先查找第一個ul標簽. var city1 = document.getElementById("city1"); // 2.再找ul下的li標簽. //var childs = city1.childNodes; //alert(childs.length); var lis = city1.getElementsByTagName("li"); alert(lis.length);11.8 Node對象:節點對象
11.8.1 Node中的常用的屬性
nodeName
- 如果節點是元素節點,nodeName返回這個元素的名稱
- 如果是屬性節點,nodeName返回這個屬性的名稱
- 如果是文本節點,nodeName返回一個內容為#text 的字符串
nodeType
- Node.ELEMENT_NODE —1 — 元素節點
- Node.ATTRIBUTE_NODE —2 — 屬性節點
- Node.TEXT_NODE —3 — 文本節點
- nodeValue
- 如果給定節點是一個屬性節點,返回值是這個屬性的值
- 如果給定節點是一個文本節點,返回值是這個文本節點內容
- 如果給定節點是一個元素節點,返回值是 null
| 元素節點 | 標簽名 | 1 | 沒有 null |
| 屬性節點 | 屬性名 | 2 | 屬性的值 |
| 文本節點 | text | 3 | 文本內容 |
案例
11.8.2 節點名稱、值和類型
nodeName:其內容是給定節點的名字
- 如果是元素節點,nodeName返回這個元素的名稱(標簽名)
- 如果是屬性節點,nodeName返回這個屬性的名稱(屬性名)
- 如果是文本節點,nodeName返回一個內容為#text 的字符串
nodeType:返回一個整數,這個數值代表著給定節點的類型
- Node.ELEMENT_NODE —1 — 元素節點
- Node.ATTRIBUTE_NODE —2 — 屬性節點
- Node.TEXT_NODE —3 — 文本節點
nodeValue:返回給定節點的當前值(字符串)
- 如果給定節點是一個屬性節點,返回值是這個屬性的值
- 如果給定節點是一個文本節點,返回值是這個文本節點內容
- 如果給定節點是一個元素節點,返回值是 null
11.8.3 節點對象的父節點、子節點及同輩節點
父節點: parentNode
- parentNode 屬性返回的節點永遠是一個元素節點,因為只有元素節點才有可能包含子節點
- document 節點的沒有父節點
子節點
- childNodes:獲取指定節點的所有子節點集合
- firstChild:獲取指定節點的第一個子節點
- lastChild:獲取指定節點的最后一個子節點
同輩節點
- nextSibling: 返回一個給定節點的下一個兄弟節點
- previousSibling:返回一個給定節點的上一個兄弟節點
11.8.4 節點屬性
- 節點屬性attributes是Node接口定義的屬性
- 節點屬性attributes就是節點(特別是元素節點)的屬性
- 事實上,attributes中包含的是一個節點的所有屬性的集合
- attributes.getNameItem()和Element對象的getAttribute()方法類似
11.8.5 檢測節點中是否有子節點和屬性
查看是否存在子節點: hasChildNodes()
查看是否存在屬性:hasAttributes()
即使節點中沒有定義屬性,其attributes屬性仍然有效的,而且長度值為0。同樣節點中的childNodes屬性也是如此
當你想知道某個節點是否包含子節點和屬性時,可以使用hasChildNodes()和hasAttributes()方法。但是,如果還想知道該節點中包含多少子節點和屬性的話,仍要使用attributes和childNodes屬性
在IE瀏覽器中,不存在hasAttributes()方法
11.8.6 節點的插入
- appendChild() 插入節點
- insertBefore(newNode,oldNode)
- 沒有insertAfter()方法
11.8.7 刪除和替換節點
- removeChild() 刪除節點
- replaceChild(newNode,oldNode) 替換節點
11.8.8 移動節點
移動節點:由以下三種方法組合完成
查找節點
- getElementById():通過節點的id屬性,查找對應節點。
- getElementsByName():通過節點的name屬性,查找對應節點。
- getElementsByTagName():通過節點名稱,查找對應節點。
插入節點
- appendChild()方法
- insertBefore()方法
替換節點:replaceChild()方法
11.8.9 復制節點
cloneNode(boolean)方法,其中,參數boolean是判斷是否復制子節點
11.9 innerHTML
- 獲得標簽的html的內容及設置標簽的html內容
- 瀏覽器幾乎都支持該屬性,但不是 DOM 標準的組成部分
- innerHTML 屬性可以用來讀,寫某給定元素里的 HTML 內容
- innerHTML 屬性多與div或span標簽配合使用
獲得焦點:onfocus,失去焦點:onblur
innerHTML的案例
var table = " <table width='400' border='1'><tr><td>1</td><td>2</td></tr><tr><td>1</td><td>2</td></tr> </table>";function createTable(){document.getElementById("divv").innerHTML = table; }使用innerHTML生成動態的表格
12. JS中的事件
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作(action),比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表,這些屬性可插入 HTML 標簽來定義事件動作。
事件通常與函數配合使用,這樣就可以通過發生的事件來驅動函數執行。
| onclick | 單擊 |
| ondblclick | 雙擊 |
| onchange | 列表框改變事件 |
| onmouseover | 鼠標放在上面 |
| onmouseout | 鼠標離開 |
| onmousemove | 鼠標移動 |
| onload | 頁面加載時間 |
| onunload | 頁面的卸載事件 |
| onblur | 失去焦點 |
| onfocus | 獲得焦點 |
| onkeyup | 鍵盤事件 |
| onkeydown | 鍵盤事件 |
12.1 鼠標移動事件
onmouseout/onmouseover
<html><script language="JavaScript">function mouseovertest(){document.getElementById("info").value = "鼠標在輸入框上";}function mouseouttest(){document.getElementById("info").value= "鼠標在輸入框外";}</script><body><input type="text" id="info" onmouseover="mouseovertest();"onmouseout="mouseouttest();"/></body> </html>12.2 鼠標點擊事件
onclick/ondblclick
<html><script language="JavaScript">function addFile(){var file = document.createElement('input');file.setAttribute('id', 'temp_file');file.setAttribute('type', 'file');document.body.appendChild(file);}</script><body><form action="uploadFile" method="post"><input type="button" value="添加附件" onclick="addFile();"></form></body> </html>12.3 加載與卸載事件
onload/unload
<html><head><script Language="JavaScript">function loadform(){alert("這是一個自動裝載例子!");}function unloadform(){alert("這是一個卸載例子!");}</script></head><body onload=“loadform()” onbeforeunload=“unloadform()”><a href=“http://www.itcast.cn”>傳智播客</a></body> </html>12.4 聚焦與離焦事件
onfocus/onblur
<html> <script language="JavaScript"> function checkDate(){var date1 = document. getElementById("testdate").value;if(date1.match("^\\d{8}$")==null){alert("wrong");}else{alert("right");} } </script> <body> 請輸入一個八位數字<input type="text" id="testdate" onblur="checkDate();"> </body> </html>12.5 鍵盤事件
keydown/keyup/keypress
<html> <script language="JavaScript"> function submitform(e){if(e.keyCode){if (e.keyCode == 13) {document.forms(0).submit();} }else{if (e.which == 13) {document.forms(0).submit();} }} </script> <body> 沒有按鈕的表單,用回車鍵提交 <form action="login"><input type="text" name="username" onkeypress="submitform(event);"/> </form> </body> </html>12.6 提交與重置事件
submit/reset
<html> <script language="JavaScript"> function isDelete(){ var isdelete= window.confirm(); if(isdelete){return true;}else{return false;} } </script> <body> <form action="delete" onsubmit="return isDelete();"> 姓名:小明 年齡:23 學校:清華大學 <input type="submit" value="刪除"> </form> </body> </html>12.7 選擇與改變事件
select/change
范例代碼(表單聯動) <html> <script src="content.js" language="javascript"></script><body><select id="provice" onchange="changecontent();"><option value="0">請選擇省份</option><option value="1">河北</option><option value="2">山東</option></select><select id="city"></select></body> </html>總結
以上是生活随笔為你收集整理的JavaWeb:JavaScript的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: MySQL数据库:编码
- 下一篇: JavaWeb:用JDBC操作数据库