javascript文檔對象的簡單介紹

本文目錄一覽:

Javascript 怎麼創建File對象

1、對已有對象進行擴充方法和屬性

 var object = new Object();

    object.name = “zhangsan”;//每個對象需要寫這些語句

    object.sayName = function(name){//每個對象需要寫這些語句

        this.name = name;

    };

    object.sayName(“lisi”);

    alert(object.name);

2、工廠方式創建對象

 function createObject() {

        var object = new Object();

        object.username = “zhangsan”;

        object.password = “123456”;

        object.get = function(){

            alert(this.username + “,” + this.password);

        }

        return object;

    }

    var object1 = createObject();

    var object2 = createObject();

    object1.get();

    object2.get();

    // 帶參數的構造方法

    function createObject(username, password){

        var object = new Object();

        object.username = username;

        object.password = password;

        object.get = function(){//缺點是,多少個對象則方法就有多少個

            alert(this.username + “, ” + this.password);

        }

        return object;

    }

    var object1 = createObject(“zhangsan”,123456);

    object1.get();

    // 最佳改進方式

    function get(){//使該函數被多個對象共享

        alert(this.username + “, ” + this.password);

    }

    function createObject(username, password){//創建對象

        var object = new Object();

        object.username = username;

        object.password = password;

        object.get = get;

        return object;

    }

    var object1 = createObject(“zhangsan”, “123456”);

    var object2 = createObject(“wangwu”, “654321”);

    object1.get();

    object2.get();

3、構造函數方式創建對象

 function Person(){

        //在執行第一行代碼欠,js引擎會為我們生成一個對象

        this.username = “zhangsan”;

        this.password = “123”;

        this.getInfo = function(){

            alert(this.username + “, ” + this.password);

        }

        //此處有一個隱藏的return語句,用於將之前生成對象返回。

    }

    var p1 = new Person();

    p1.getInfo();

    //帶參數

    function Person(username, password){

        this.username = username;

        this.password = password;

        this.getInfo = function(){

            alert(this.username + “, ” + this.password);

        }

    }

    var p1 = new Person(“zhangsan”,”1234546″);

    p1.getInfo();

4、原型(「prototype」)方式

function Person(){}

    Person.prototype.username = “zhangsan”;

    Person.prototype.password = “123456”;

    Person.prototype.getInfo = function(){

        alert(this.username + “, ” + this.password);

    }

    var person = new Person();

    var person2 = new Person();

    person.username = “haha”;

    person.getInfo();

    person2.getInfo();

    //單純使用原型方式定義對象無法在構造函數中為屬性賦值,只能在對象生成後再去改變屬性值

    function Person(){}

    Person.prototype.username = new Array();

    Person.prototype.password = “123456”;

    Person.prototype.getInfo = function(){

        alert(this.username + “, ” + this.password);

    }

    var person = new Person();

    var person2 = new Person();

    person.username.push(“zhangsan”);

    person.username.push(“lisi”);

    person.password = “321”;

    person.getInfo();

    person2.getInfo();

5、綜合方式(原型+構造函數方式搭配)

  function Person(){

        this.username = new Array();//不被多個對象共享

        this.password = “123”;

    }

    Person.prototype.getInfo = function()//被多個對象共享

    {

        alert(this.username + “,” + this.password);

    }

    var p1 = new Person();

    var p2 = new Person();

    p1.username.push(“zhangsan”);

    p2.username.push(“lisi”);

    p1.getInfo();

    p2.getInfo();

6、動態原型方式

    function Person(){

        this.username = “zhangsan”;

        this.password = “123”;

        //通過標誌量讓所有的對象共享方法

        if(typeof Person.flag == “undefined”){

            alert(“prototype”);

            Person.prototype.getInfo = function() {

                alert(this.username + “, ” + this.password);

            }

            Person.flag = true;

        }

    }

    var p = new Person();

    var p2 = new Person();

    p.getInfo();

    p2.getInfo();

在javascript里document的作用

document 是一個文檔對象,使用 document 對象可以對 HTML 文檔進行檢查、修改或添加內容,並處理該文檔內部的事件。瀏覽器打開一個 HTML 文檔時,該文檔就成了一個 document 對象,Document 對象使我們可以對 HTML 頁面中的所有元素進行訪問。它是window對象的一部分,可用window.document,往往省略window。

Document對象是文檔數的根節點,documentElement屬性是文檔的根元素。

Document節點可以有其他子節點(比如Comment及DocumentType節點),不過它只有一個保存文檔所有內容的Element子節點。

大多數情況下獲取一個Document對象的方法是通過窗口的document屬性。Document對象也可以通過IFrame元素的contentDocument屬性或任意節點的ownerDocument屬性獲取。

Document對象的大多數屬性提供了對文檔元素或其他與文檔相關的重要對象的訪問,一些Document方法做同樣的事:提供一個方法在文檔書中查找元素。許多其他Document方法是創建元素及相關對象的「工廠方法」。

可以使用DOMImplementation的createDocument()和createHTMLDocument()方法來生成一個新的Document對象:

docment.implementation.createHTMLDocumen(“New Doc”);

javascript基礎部分三大核心是什麼意思

ECMAScript、DOM、BOM

JavaScript的三大組成部分是:

1、ECMAScript:JavaScript的核心,描述了語言的基本語法(var、for、if、array等)和數據類型(數字、字符串、布爾、函數、對象(obj、[]、{}、null)、未定義),ECMAScript是一套標準,定義了一種語言(比如JS)是什麼樣子。

2、文檔對象模型(DOM):DOM(文檔對象模型)是 HTML 和 XML 的應用程序接口(API)。DOM 將把整個頁面規劃成由節點層級構成的文檔。HTML 或 XML 頁面的每個部分都是一個節點的衍生物。請考慮下面的 HTML 頁面:

html

head

titleSample Page/title

/head

body

phello world!/p

/body

/html

這段代碼可以用 DOM 繪製成一個節點層次圖:DOM 通過創建樹來表示文檔,從而使開發者對文檔的內容和結構具有空前的控制力。用 DOM API 可以輕鬆地刪除、添加和替換節點(getElementById、childNodes、appendChild、 innerHTML)。

3、瀏覽器對象模型(BOM)對瀏覽器窗口進行訪問和操作。例如彈出新的瀏覽器窗口,移動、改變和關閉瀏覽器窗口,提供詳細的網絡瀏覽器信息(navigator object),詳細的頁面信息(location object),詳細的用戶屏幕分辨率的信息(screen object),對cookies的支持等等。

JavaScript是什麼類型語言?

javascrip

JavaScript一種直譯式腳本語言,是一種動態類型、弱類型、基於原型的語言,內置支持類型。它的解釋器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用於客戶端的腳本語言,最早是在HTML(標準通用標記語言下的一個應用)網頁上使用,用來給HTML網頁增加動態功能。

在1995年時,由Netscape公司的Brendan Eich,在網景導航者瀏覽器上首次設計實現而成。因為Netscape與Sun合作,Netscape管理層希望它外觀看起來像Java,因此取名為JavaScript。但實際上它的語法風格與Self及Scheme較為接近。

為了取得技術優勢,微軟推出了JScript,CEnvi推出ScriptEase,與JavaScript同樣可在瀏覽器上運行。為了統一規格,因為JavaScript兼容於ECMA標準,因此也稱為ECMAScript。

組成部分

ECMAScript,描述了該語 javascript組成 ,言的語法和基本對象。

文檔對象模型(DOM),描述處理網頁內容的方法和接口。

瀏覽器對象模型(BOM),描述與瀏覽器進行交互的方法和接口。

基本特點

JavaScript是一種屬於網絡的腳本語言,已經被廣泛用於Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。

是一種解釋性腳本語言(代碼不進行預編譯)。

主要用來向HTML(標準通用標記語言下的一個應用)頁面添加交互行為。

可以直接嵌入HTML頁面,但寫成單獨的js文件有利於結構和行為的分離。

跨平台特性,在絕大多數瀏覽器的支持下,可以在多種平台下運行(如Windows、Linux、Mac、Android、iOS等)。

Javascript腳本語言同其他語言一樣,有它自身的基本數據類型,表達式和算術運算符及程序的基本程序框架。Javascript提供了四種基本的數據類型和兩種特殊數據類型用來處理數據和文字。而變量提供存放信息的地方,表達式則可以完成較複雜的信息處理。

日常用途

1.嵌入動態文本於HTML頁面。

2.對瀏覽器事件做出響應。

3.讀寫HTML元素。

4.在數據被提交到服務器之前驗證數據。

5.檢測訪客的瀏覽器信息。

6.控制cookies,包括創建和修改等。

7.基於Node.js技術進行服務器端編程。

歷史

它最初由Netscape的Brendan Eich設計。JavaScript是甲骨文公司的註冊商標。Ecma國際以JavaScript為基礎制定了ECMAScript標準。JavaScript也可以用於其他場合,如服務器端編程。完整的JavaScript實現包含三個部分:ECMAScript,文檔對象模型,瀏覽器對象模型。

Netscape在最初將其腳本語言命名為LiveScript,後來Netscape在與Sun合作之後將其改名為JavaScript。JavaScript最初受Java啟發而開始設計的,目的之一就是「看上去像Java」,因此語法上有類似之處,一些名稱和命名規範也借自Java。但JavaScript的主要設計原則源自Self和Scheme。JavaScript與Java名稱上的近似,是當時Netscape為了營銷考慮與Sun微系統達成協議的結果。為了取得技術優勢,微軟推出了JScript來迎戰JavaScript的腳本語言。為了互用性,Ecma國際(前身為歐洲計算機製造商協會)創建了ECMA-262標準(ECMAScript)。兩者都屬於ECMAScript的實現。儘管JavaScript作為給非程序人員的腳本語言,而非作為給程序人員的腳本語言來推廣和宣傳,但是JavaScript具有非常豐富的特性。

現在很多小夥伴喜歡在互聯網上找視頻資料學習javascript,但是光看視頻你是不可能學會javascript的,沒有人指導你,而且很多視頻已經過時了 並沒有什麼用!  如果你真的想學習javascript這門技術,你可以來這個群,前面是5柒3,中間是82〇,最後是49〇, 在這裡有最新的javascript課程 免費學習 也有很多人指導你 進步 不需要你付出什麼 只要你有一顆學習的心就可以了 不是願意學習或者自認不需要學習的就不要加了。

發展初期,JavaScript的標準並未確定,同期有Netscape的JavaScript,微軟的JScript和CEnvi的ScriptEase三足鼎立。1997年,在ECMA(歐洲計算機製造商協會)的協調下,由Netscape、Sun、微軟、Borland組成的工作組確定統一標準:ECMA-262。

特性

JavaScript腳本語言具有以下特點:

(1)腳本語言。JavaScript是一種解釋型的腳本語言,C、C++等語言先編譯後執行,而JavaScript是在程序的運行過程中逐行進行解釋。

(2)基於對象。JavaScript是一種基於對象的腳本語言,它不僅可以創建對象,也能使用現有的對象。

(3)簡單。JavaScript語言中採用的是弱類型的變量類型,對使用的數據類型未做出嚴格的要求,是基於Java基本語句和控制的腳本語言,其設計簡單緊湊。

(4)動態性。JavaScript是一種採用事件驅動的腳本語言,它不需要經過Web服務器就可以對用戶的輸入做出響應。在訪問一個網頁時,鼠標在網頁中進行鼠標點擊或上下移、窗口移動等操作JavaScript都可直接對這些事件給出相應的響應。

(5)跨平台性。JavaScript腳本語言不依賴於操作系統,僅需要瀏覽器的支持。因此一個JavaScript腳本在編寫後可以帶到任意機器上使用,前提上機器上的瀏覽器支 持JavaScript腳本語言,目前JavaScript已被大多數的瀏覽器所支持。[3]

不同於服務器端腳本語言,例如PHP與ASP,JavaScript主要被作為客戶端腳本語言在用戶的瀏覽器上運行,不需要服務器的支持。所以在早期程序員比較青睞於JavaScript以減少對服務器的負擔,而與此同時也帶來另一個問題:安全性。

而隨着服務器的強壯,雖然程序員更喜歡運行於服務端的腳本以保證安全,但JavaScript仍然以其跨平台、容易上手等優勢大行其道。同時,有些特殊功能(如AJAX)必須依賴Javascript在客戶端進行支持。隨着引擎如V8和框架如Node.js的發展,及其事件驅動及異步IO等特性,JavaScript逐漸被用來編寫服務器端程序。

JS中document對象和window對象的區別

簡單來說,document是window的一個對象屬性。

Window 對象表示瀏覽器中打開的窗口。

如果文檔包含框架(frame 或 iframe 標籤),瀏覽器會為 HTML 文檔創建一個 window 對象,並為每個框架創建一個額外的 window 對象。

所有的全局函數和對象都屬於Window 對象的屬性和方法。

document 對 Document 對象的只讀引用。

[window對象]

它是一個頂層對象,而不是另一個對象的屬性,即瀏覽器的窗口。

屬性

defaultStatus 缺省的狀態條消息

document 當前顯示的文檔(該屬性本身也是一個對象)

frame 窗口裡的一個框架((FRAME)(該屬性本身也是一個對象)

frames array 列舉窗口的框架對象的數組,按照這些對象在文檔中出現的順序列出(該屬性本身也是一個

對象)

history 窗口的歷史列表(該屬性本身也是一個對象)

length 窗口內的框架數

location 窗口所顯示文檔的完整(絕對)URL(該屬性本身也是一個對象)不要把它與如document.location

混淆,後者是當前顯示文檔的URL。用戶可以改變window.location(用另一個文檔取代當前文檔),但卻不能改變

document.location (因為這是當前顯示文檔的位置)

name 窗口打開時,賦予該窗口的名字

opener 代表使用window.open打開當前窗口的腳本所在的窗口(這是Netscape Navigator 3.0beta 3所引

入的一個新屬性)

parent 包含當前框架的窗口的同義詞。frame和window對象的一個屬性

self 當前窗口或框架的同義詞

status 狀態條中的消息

top 包含當前框架的最頂層瀏覽器窗口的同義詞

window 當前窗口或框架的同義詞,與self相同

方法

alert() 打開一個Alert消息框

clearTimeout() 用來終止setTimeout方法的工作

close() 關閉窗口

confirm() 打開一個Confirm消息框,用戶可以選擇OK或Cancel,如果用戶單擊OK,該方法返回true,單擊

Cancel返回false

blur() 把焦點從指定窗口移開(這是Netscape Navigator 3.0 beta 3引入的新方法)

focus() 把指定的窗口帶到前台(另一個新方法)

open() 打開一個新窗口

prompt() 打開一個Prompt對話框,用戶可向該框鍵入文本,並把鍵入的文本返回到腳本

setTimeout() 等待一段指定的毫秒數時間,然後運行指令事件處理程序事件處理程序

Onload() 頁面載入時觸發

Onunload() 頁面關閉時觸發

[document 對象]

該對象是window和frames對象的一個屬性,是顯示於窗口或框架內的一個文檔。

屬性

alinkColor 活動鏈接的顏色(ALINK)

anchor 一個HTMI錨點,使用A NAME=標記創建(該屬性本身也是一個對象)

anchors array 列出文檔錨點對象的數組(A NAME=)(該屬性本身也是一個對象)

bgColor 文檔的背景顏色(BGCOLOR)

cookie 存儲於cookie.txt文件內的一段信息,它是該文檔對象的一個屬性

fgColor 文檔的文本顏色(BODY標記里的TEXT特性)

form 文檔中的一個窗體(FORM)(該屬性本身也是一個對象)

forms anay 按照其出現在文檔中的順序列出窗體對象的一個數組(該屬性本身也是一個對象)

lastModified 文檔最後的修改日期

linkColor 文檔的鏈接的顏色,即BODY標記中的LINK特性(鏈接到用戶沒有觀察到的文檔)

link 文檔中的一個A HREF=標記(該屬性本身也是一個對象)

links array 文檔中link對象的一個數組,按照它們出現在文檔中的順序排列(該屬性本身也是一個對象)

location 當前顯示文檔的URL。用戶不能改變document.location(因為這是當前顯示文檔的位置)。但是,

可以改變 window.location (用其它文檔取代當前文檔)window.location本身也是一個對象,而

document.location不是對象

referrer 包含鏈接的文檔的URL,用戶單擊該鏈接可到達當前文檔

title 文檔的標題((TITLE)

vlinkColor 指向用戶已觀察過的文檔的鏈接文本顏色,即BODY標記的VLINK特性

方法

clear 清除指定文檔的內容

close 關閉文檔流

open 打開文檔流

write 把文本寫入文檔

writeln 把文本寫入文檔,並以換行符結尾

區別:1、window 指窗體。document指頁面。document是window的一個子對象。

2、用戶不能改變 document.location(因為這是當前顯示文檔的位置)。但是,可以改變window.location (用其它文檔取代當前文檔)window.location本身也是一個對象,而document.location不是對象

JavaScript入門教程(9) Document文檔對象

描述當前窗口或指定窗口對象的文檔。它包含了文檔從head到/body的內容。

用法:document

(當前窗口)

窗口對象.document

(指定窗口)

屬性:

document.title

//設置文檔標題等價於HTML的title標籤

document.bgColor

//設置頁面背景色

document.fgColor

//設置前景色(文本顏色)

document.linkColor

//未點擊過的鏈接顏色

document.alinkColor

//激活鏈接(焦點在此鏈接上)的顏色

document.vlinkColor

//已點擊過的鏈接顏色

document.URL

//設置URL屬性從而在同一窗口打開另一網頁

document.fileCreatedDate

//文件建立日期,只讀屬性

document.fileModifiedDate

//文件修改日期,只讀屬性

document.fileSize

//文件大小,只讀屬性

document.cookie

//設置和讀出cookie

document.charset

//設置字符集

簡體中文:gb2312

cookie

關於

cookie

請參看「使用框架和

Cookies」一章。

lastModified

當前文檔的最後修改日期,是一個

Date

對象。

referrer

如果當前文檔是通過點擊連接打開的,則

referrer

返回原來的

URL。

title

指head標記里用title…/title定義的文字。在

Netscape

里本屬性不接受賦值。

fgColor

指body標記的

text

屬性所表示的文本顏色。

bgColor

指body標記的

bgcolor

屬性所表示的背景顏色。

linkColor

指body標記的

link

屬性所表示的連接顏色。

alinkColor

指body標記的

alink

屬性所表示的活動連接顏色。

vlinkColor

指body標記的

vlink

屬性所表示的已訪問連接顏色。

方法:

open()

打開文檔以便

JavaScript

能向文檔的當前位置(指插入

JavaScript

的位置)寫入數據。通常不需要用這個方法,在需要的時候

JavaScript

自動調用。

write();

writeln()

向文檔寫入數據,所寫入的會當成標準文檔

HTML

來處理。writeln()

write()

的不同點在於,writeln()

在寫入數據以後會加一個換行。這個換行只是在

HTML

中換行,具體情況能不能夠是顯示出來的文字換行,要看插入

JavaScript

的位置而定。如在pre標記中插入,這個換行也會體現在文檔中。

clear()

清空當前文檔。

close()

關閉文檔,停止寫入數據。如果用了

write[ln]()

clear()

方法,就一定要用

close()

方法來保證所做的更改能夠顯示出來。如果文檔還沒有完全讀取,也就是說,JavaScript

是插在文檔中的,那就不必使用該方法。

現在我們已經擁有足夠的知識來做以下這個很多網站都有的彈出式更新通知了。

複製代碼

代碼如下:

script

language=”JavaScript”

var

whatsNew

=

open(”,’_blank’,’top=50,left=50,width=200,height=300,’

+

‘menubar=no,toolbar=no,directories=no,location=no,’

+

‘status=no,resizable=no,scrollbars=yes’);

whatsNew.document.write(‘centerb更新通知/b/center’);

whatsNew.document.write(‘p最後更新日期:00.08.01’);

whatsNew.document.write(‘p00.08.01:增加了「我的最愛」欄目。’);

whatsNew.document.write(‘p

align=”right”‘

+

‘a

href=”javascript:self.close()”關閉窗口/a’);

whatsNew.document.close();

/script

當然也可以先寫好一個

HTML

文件,在

open()

方法中直接

load

這個文件。

原創文章,作者:UVAOE,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/128804.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
UVAOE的頭像UVAOE
上一篇 2024-10-03 23:25
下一篇 2024-10-03 23:25

相關推薦

  • Python簡單數學計算

    本文將從多個方面介紹Python的簡單數學計算,包括基礎運算符、函數、庫以及實際應用場景。 一、基礎運算符 Python提供了基礎的算術運算符,包括加(+)、減(-)、乘(*)、除…

    編程 2025-04-29
  • Python滿天星代碼:讓編程變得更加簡單

    本文將從多個方面詳細闡述Python滿天星代碼,為大家介紹它的優點以及如何在編程中使用。無論是剛剛接觸編程還是資深程序員,都能從中獲得一定的收穫。 一、簡介 Python滿天星代碼…

    編程 2025-04-29
  • 使用Spire.PDF進行PDF文檔處理

    Spire.PDF是一款C#的PDF庫,它可以幫助開發者快速、簡便地處理PDF文檔。本篇文章將會介紹Spire.PDF庫的一些基本用法和常見功能。 一、PDF文檔創建 創建PDF文…

    編程 2025-04-29
  • Python海龜代碼簡單畫圖

    本文將介紹如何使用Python的海龜庫進行簡單畫圖,並提供相關示例代碼。 一、基礎用法 使用Python的海龜庫,我們可以控制一個小海龜在窗口中移動,並利用它的「畫筆」在窗口中繪製…

    編程 2025-04-29
  • 面向對象編程、類和對象

    面向對象編程(Object-Oriented Programming, OOP)是一種編程方法,它將現實世界中的事物抽象為對象(Object),對象的屬性和方法被封裝成類(Clas…

    編程 2025-04-29
  • Python櫻花樹代碼簡單

    本文將對Python櫻花樹代碼進行詳細的闡述和講解,幫助讀者更好地理解該代碼的實現方法。 一、簡介 櫻花樹是一種圖形效果,它的實現方法比較簡單。Python中可以通過turtle這…

    編程 2025-04-28
  • Python爬蟲文檔報告

    本文將從多個方面介紹Python爬蟲文檔的相關內容,包括:爬蟲基礎知識、爬蟲框架及常用庫、爬蟲實戰等。 一、爬蟲基礎知識 1、爬蟲的定義: 爬蟲是一種自動化程序,通過模擬人的行為在…

    編程 2025-04-28
  • Python大神作品:讓編程變得更加簡單

    Python作為一種高級的解釋性編程語言,一直被廣泛地運用於各個領域,從Web開發、遊戲開發到人工智能,Python都扮演着重要的角色。Python的代碼簡潔明了,易於閱讀和維護,…

    編程 2025-04-28
  • Mapster:一個高性能的對象映射庫

    本文將深入介紹furion.extras.objectmapper.mapster,一個高性能的對象映射庫,解釋它是如何工作的以及如何在你的項目中使用它。 一、輕鬆地實現對象之間的…

    編程 2025-04-28
  • Python生成PDF文檔

    Python是一門廣泛使用的高級編程語言,它可以應用於各種領域,包括Web開發、數據分析、人工智能等。在這些領域的應用中,有很多需要生成PDF文檔的需求。Python有很多第三方庫…

    編程 2025-04-28

發表回復

登錄後才能評論