入門就《JavaScript+DOM編程藝術》
創(chuàng)新互聯(lián)堅持“要么做到,要么別承諾”的工作理念,服務領域包括:做網(wǎng)站、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務,滿足客戶于互聯(lián)網(wǎng)時代的阿合奇網(wǎng)站設計、移動媒體設計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴!
這個階段處于對JS有基本認識,包括語法和數(shù)據(jù)類型概念, 還包括JS的組成以及DOM的基本操作。
對JS有一定認識和理解的時候就《JavaScript高級程序設計》
這個階段處于對JS的探索階段,要了解JS的各種性能、不同終端和解釋器的兼容性、以及原型鏈、封裝和繼承概念等。
對JS已經(jīng)有自己的理解和思想了就《JavaScript 權威指南》,可以把這本書當JS字典用
這個階段就是突破階段了, 會形成自己的編碼風格和思想,處于架構層次的突破階段。
DOM 的全稱是" Document Object Model ",中文意思為“文檔對象模型”。
就像 JS 中所有的對象都繼承自 Object 一樣,瀏覽器提供一個原生的節(jié)點對象 Node (Node 是一個函數(shù)), DOM 的所有節(jié)點都繼承自 Node ,Node 又繼承自 Object,因此它們具有一些共同的屬性和方法。
一個文檔的所有節(jié)點,按照所在的層級,可以抽象成一種樹狀結構。這種樹狀結構就是 DOM 樹。
頂層的 根節(jié)點 html 屬于 Document 節(jié)點,代表整個文檔;
第二層級和第三層級的屬于 Element 節(jié)點,即網(wǎng)頁的各種 HTML 標簽;
第四層級的屬于 Text 節(jié)點,即標簽之間或標簽包含的文本。
頁面中的節(jié)點,通過上述不同的構造函數(shù),構造出相應的對象。
由此可以看出 DOM 的主要作用 :DOM 是 JavaScript 操作網(wǎng)頁的接口,它的作用是將網(wǎng)頁轉為一個 JavaScript 對象,從而可以用腳本進行各種操作(如增刪改查)。
DOM 有自己的國際標準,目前通用版本是 DOM 3。
Node 屬性有很多,用到時可以查詢文檔。
如果一個屬性是函數(shù),那么這個屬性也叫做 方法 ;即方法是函數(shù)屬性。
document對象是文檔的根節(jié)點,window.document屬性就指向這個對象。
通過 DOM API 獲取到的 elements 都是偽數(shù)組。
Element 對象對應網(wǎng)頁的 HTML 元素。每一個 HTML 元素在 DOM 樹上都會轉化成一個 Element 節(jié)點對象。
DOM 提供兩種節(jié)點集合,用于容納多個節(jié)點: NodeList 和 HTMLCollection 。這兩種集合都屬于接口規(guī)范。許多 DOM 屬性和方法,返回的結果是 NodeList 實例或 HTMLCollection 實例。
節(jié)點對象除了繼承 Node 接口以外,還會繼承其他接口。
ECMAScript、DOM、BOM
JavaScript的三大組成部分是:
1、ECMAScript:JavaScript的核心,描述了語言的基本語法(var、for、if、array等)和數(shù)據(jù)類型(數(shù)字、字符串、布爾、函數(shù)、對象(obj、[]、{}、null)、未定義),ECMAScript是一套標準,定義了一種語言(比如JS)是什么樣子。
2、文檔對象模型(DOM):DOM(文檔對象模型)是 HTML 和 XML 的應用程序接口(API)。DOM 將把整個頁面規(guī)劃成由節(jié)點層級構成的文檔。HTML 或 XML 頁面的每個部分都是一個節(jié)點的衍生物。請考慮下面的 HTML 頁面:
html
head
titleSample Page/title
/head
body
phello world!/p
/body
/html
這段代碼可以用 DOM 繪制成一個節(jié)點層次圖:DOM 通過創(chuàng)建樹來表示文檔,從而使開發(fā)者對文檔的內(nèi)容和結構具有空前的控制力。用 DOM API 可以輕松地刪除、添加和替換節(jié)點(getElementById、childNodes、appendChild、 innerHTML)。
3、瀏覽器對象模型(BOM)對瀏覽器窗口進行訪問和操作。例如彈出新的瀏覽器窗口,移動、改變和關閉瀏覽器窗口,提供詳細的網(wǎng)絡瀏覽器信息(navigator object),詳細的頁面信息(location object),詳細的用戶屏幕分辨率的信息(screen object),對cookies的支持等等。
Java用ScriptEngine解析腳本
javax.script,始于JDK1.6,不過現(xiàn)在只有sun實現(xiàn)的JavaScript的解析器,難道是因為主要用來解析js語法所以歸類到JEE的范疇?不過基本足夠了,一般的用途主要是能解析通用的表達式就好,比如X = 1(X作為參數(shù)傳入)這樣的表達式,也能利用js的函數(shù)語法,創(chuàng)造一個就像Java的函數(shù)一樣存在于內(nèi)存中隨時可以被調(diào)用的函數(shù),更可以將js中的對象直接轉換成java對象。
Script主要類及接口
ScriptEngineManager、ScriptEngine、CompiledScript和Bindings 4個類或接口
ScriptEngineManager是一個工廠的集合,可以通過name或tag的方式獲取某個腳本的工廠并生成一個此腳本的ScriptEngine,目前只有javascript的工廠。通過工廠函數(shù)得到了ScriptEngine之后,就可以用這個對象來解析腳本字符串了,直接調(diào)用Object obj = ScriptEngine.eval(String script)即可,返回的obj為表達式的值,比如true、false或int值。
CompiledScript可以將ScriptEngine解析一段腳本的結果存起來,方便多次調(diào)用。只要將ScriptEngine用Compilable接口強制轉換后,調(diào)用compile(String script)就返回了一個CompiledScript對象,要用的時候每次調(diào)用一下CompiledScript.eval()即可,一般適合用于js函數(shù)的使用。
Bindings的概念算稍微復雜點,我的理解Bindings是用來存放數(shù)據(jù)的容器。它有3個層級,為Global級、Engine級和Local級,前2者通過ScriptEngine.getBindings()獲得,是唯一的對象,而Local Binding由ScriptEngine.createBindings()獲得,很好理解,每次都產(chǎn)生一個新的。Global對應到工廠,Engine對應到ScriptEngine,向這2者里面加入任何數(shù)據(jù)或者編譯后的腳本執(zhí)行對象,在每一份新生成的Local Binding里面都會存在。
ScriptEngine代碼示例
先來看一段JS
var arrclass = new Array();
arrclass.push(new Class(20000,"計算機-軟件開發(fā)"));
arrclass.push(new Class(30000,"計算機-網(wǎng)絡/通訊"));
arrclass.push(new Class(10000,"計算機-硬件開發(fā)"));
arrclass.push(new Class(40000,"計算機-管理"));
arrclass.push(new Class(50000,"計算機-品質管理/技術支持"));
arrclass.push(new Class(320000,"電子/電器/半導體/儀器儀表"));
java代碼實現(xiàn)解析
public void parseJS() {
//1、通過Http請求獲取js的String數(shù)據(jù),格式如上
String jsData = getJsData("url");
//2、觀察js結構,自定義Class,push到數(shù)組中,java中需要定義跟js中的Class的聲明
String clazz = "function Class(classId, className){ this.classId=classId;this.className=className};";
//3、初始化ScriptEngine
ScriptEngine engine = new ScriptEngineManager().getEngineByName("javascript");
//4、js中未定義返回對象,這里需要將Class數(shù)據(jù)轉換成字符串的數(shù)組返回,個人覺得很別扭,不知道是理解錯誤還是確實如此?
//如果不這樣做則直接在js后加上arrclass,cScript.evel()則返回NativeObject對象的數(shù)組
String fun = "var result = new Array() ;for(var i=0;i arrclass.length;i++){result.push(new Array(arrclass[i].classId,arrclass[i].className))}; result;";
Compilable compilable = (Compilable) engine;
//4、使用NativeArray獲取數(shù)據(jù)
CompiledScript cScript;
try {
cScript = compilable.compile(clazz + jsData + fun);
NativeArray na = (NativeArray) cScript.eval();
for (int i = 0; i na.getLength(); i++) {
NativeArray nv = (NativeArray) na.get(i, null);
System.out.println(nv.get(0, null).toString() + " " + nv.get(1, null).toString());
}
} catch (ScriptException ex) {
ex.printStackTrace();
}
}
java代碼中執(zhí)行js計算
public void js() {
// 創(chuàng)建腳本引擎管理器
ScriptEngineManager sem = new ScriptEngineManager();
// 創(chuàng)建一個處理JavaScript的腳本引擎
ScriptEngine engine = sem.getEngineByExtension("js");
try {
// 執(zhí)行js公式
engine.eval("if(65){flag=true;}else{flag =false;}");
} catch (ScriptException ex) {
ex.printStackTrace();
}
//看看我們預期的反饋結果 true
System.out.println(engine.get("flag"));
}
Java解析JS另一大引擎-Rhino
Rhino是完全用Java編寫的JavaScript的開放源代碼實現(xiàn)。它通常是嵌入到Java應用程序提供給最終用戶的腳本。它被鑲嵌在J2SE6作為默認的Java腳本引擎。
使用Rhino來解析,感覺一切都很清晰明朗.
public void parseJS() {
//1、通過Http請求獲取js的String數(shù)據(jù),格式如上
String jsData = getJsData("url");
//2、定義跟js中的Class的聲明
String clazz = "function Class(classId, className){ this.classId=classId;this.className=className};";
//3、初始化Context
Context cx = Context.enter();
Scriptable scope = cx.initStandardObjects();
Object result = cx.evaluateString(scope, clazz + jsData + ";arrclass", "arrclass", 1, null);
System.out.println(NativeJSON.stringify(cx, scope, result, null, null));
Context.exit();
}
第一種寫法
根據(jù)直覺,你可能覺得可以這樣寫:
代碼如下:
if (!myObj) {
myObj = { };
}
但是,運行這段代碼,瀏覽器會直接拋出ReferenceError錯誤,導致運行中斷。請問錯在哪里?
對了,if語句判斷myObj是否為空時,這個變量還不存在,所以才會報錯。改成下面這樣,就能正確運行了。
代碼如下:
if (!myObj) {
var myObj = { };
}
為什么加了一個var以后,就不報錯了?難道這種情況下,if語句做判斷時,myObj就已經(jīng)存在了嗎?
要回答這個問題,就必須知道Javascript解釋器的工作方式。Javascript語言是"先解析,后運行",解析時就已經(jīng)完成了變量聲明,所以上面的代碼實際等同于:
代碼如下:
var myObj;
if (!myObj) {
var myObj = { };
}
因此,if語句做判斷時,myObj確實已經(jīng)存在了,所以就不報錯了。這就是var命令的"代碼提升"(hoisting)作用。Javascript解釋器,只"提升"var命令定義的變量,對不使用var命令、直接賦值的變量不起作用,這就是為什么不加var會報錯的原因。
ulliinput 按照這樣的結構,點擊input的時候li、ul也會被點擊到的
網(wǎng)頁名稱:javascript層級,javascript分數(shù)等級劃分代碼
轉載注明:http://chinadenli.net/article24/dssheje.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供ChatGPT、全網(wǎng)營銷推廣、關鍵詞優(yōu)化、移動網(wǎng)站建設、域名注冊、網(wǎng)站收錄
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)