javaScript入門—函數和document使用方法,新手必看!

2021-01-08 編程小學生

javaScript是世界上流行一種客戶端語言,是一種弱類型語言, javaScript語言解釋器為瀏覽器的一部分,javaScript這些優勢更好適應了網站頁面的特點。javaScript代碼只需要嵌入到html頁面中(頁面頭部、body,javaScript代碼大部分放在頁面頭部)就可以執行,也不需要任何額外的插件,大多數瀏覽器(firefox、ie、oprea、safari等)都可以直接運行javaScript代碼。

上面代碼在瀏覽器中打開會顯示「hello !」的alert的對話框,如果沒有檢查一下瀏覽器是否啟用了javascript。

JavaScript中函數有什麼特點?

函數是重複使用腳本的一種方式,可以重複多次成為可能,在javascript中函數不僅能多次運行而且還可以用來控制什麼時候執行引用腳本。

上面是javascript的語法,首先是關鍵字funcion,後面是函數名、圓括號(包含參數,參數可以是零)、大括號和函數體,函數體放在大括號中,有了函數之後需要調用函數才能執行函數內的腳本,這就是下面要說的函數的事件句柄。

javascript函數事件句柄

事件句柄可以將函數與某個特定的事件聯繫起來,當事件觸發時,就會執行函數。常見的事件句柄是onload事件,當網頁載入結束時就會觸發該事件,事件句柄會調用相應函數。

常見的事件句柄有onclick(滑鼠單擊元素觸發)、onmouseover(滑鼠移到某元素時觸發)、onmouseout(滑鼠離開元素時觸發)、onfocus(元素獲得焦點時觸發)、onblur(元素失去焦點時觸發)、這些事件句柄只是一小部分而已,並且不是所有的元素都支持所有的事件句柄比如說HTML中img元素,因為事件和載入資源相關。

onload事件句柄是瀏覽器內置對象windows的一個屬性。在腳本第一行中,我們將函數hello賦給window對象的onload事件句柄。

瀏覽器對象document

document對象用來呈現整個頁面,包括頁面中的所有的元素。通過document對象訪問頁面中的所有的內容,基於docment對象可以修改頁面的內容。常見的修改的頁面方法有open(open可以打開修改的html頁面)、writeln(是write方法的變種,他們之間區別是writeln輸出文本之後會自動添加換行符)及close(用來關閉頁面強制瀏覽器刷新頁面內容)方法。

相關焦點

  • jQuery封裝JavaScript代碼實現隱藏Html元素和文檔就緒函數的使用
    01第一節:jQuery入門jQuery是對#JavaScript#進行封裝的一個工具集,比起JavaScript更容易操作,將一些複雜的操作封裝成一個簡單的函數,這樣對於JS開發者來說,無疑是一件幸福的事。
  • JavaScript入門教程
    BOM結構圖3) 內容簡介windowBOM使javascript有能力與瀏覽器進行溝通,這個溝通從window對象開始,所有的window對象的屬性和方法自動成為javascript的全局變量和全局函數
  • javascript中var使用方法和語句特點是什麼?初學者要注意什麼?
    屬性操作符可以通過JavaScript語言中的屬性操作符「.」可以訪問document對象中的方法。JavaScript中支持的操作符還有很多,比如說算術運算符(+,-)、條件表達式(>,<)以及其他的運算符。不過在這些操作符中最重要的是屬性操作符。
  • JavaScript基礎教程新手入門必看
    毫不誇張的說,大部分網頁都使用了JavaScript,想要成為一個優秀的前端工程師,做出漂亮令用戶滿意的網頁,熟練掌握JavaScript是一個必備技能。本文為新手整理了一篇JavaScript基礎教程入門指南,希望可以幫助編程小白可以更加輕鬆的掌握JavaScript。
  • 在JavaScript中,使用replace()、test()和exec()方法匹配字符串
    ;var res = str.replace("案例", "例子");document.write(res);</script>此JS代碼說明如下:在replace()方法中第一個參數使用了一個字符串
  • 函數式 JavaScript:將方法從對象中解耦
    解耦方法可以讓方法擺脫父對象所施加的限制,同時在表示代碼的方式上給了我們更多的自由。那麼這到底是啥玩意呢?為簡便起見,我們只從 Array 對象中抽取 map 方法。document.querySelectorAll(以及類似的方法)不返回數組,而是返回一個 NodeList 對象,而 NodeList 對象是不包含 map 方法的。雖然你可以採用一些魔法手段,將 NodeList 轉換為 Array,但是這種轉換是沒有必要的。因為 map 可以遍歷 NodeList,就好像它是一個數組一樣。
  • JavaScript函數 - 事件驅動
    什麼是事件驅動函數? 最後給大家補充一個知識,叫做事件驅動函數,它到底是做什麼的呢?在頁面交互的過程中所調用的函數,該函數被稱之為事件驅動函數。和頁面交互的行為稱之為事件比如:滑鼠點擊某個按鈕時(onclick)、滑鼠浮動,或者滑鼠離開某一個區域(onmouseover、onmouseout)、文本框獲取焦點和失去焦點時(onfocus、onblur)等等如果我們想給一個按鈕綁定一個事件,就要通過事件驅動函數來綁定,並且通過
  • JavaScript函數 - 遞歸
    什麼是函數遞歸?遞歸是指函數自己調用自己。注意:我們可以寫出遞歸,但是我們並不知道她如何得出結果。2.但是在工作中,一般情況下禁止使用遞歸。方法:1.首先去找臨界值,既無需計算,獲得的值。2.找這一次和上一次的關係3.假設當前的函數已經可以使用,調用自身計算上一次的運行結果,再寫出這次的運行結果特點:1.必須有參數2.必須由return返回值
  • 初學JavaScript應該清楚函數、事件、關鍵字和保留字、注釋的使用
    </title> <script type="text/javascript"> document.write("你好"); document.write("Hello"); </script>&
  • 第41節 Document文檔節點-Javascript
    ;"];document.write(arr.join(""));function func(){ return "func";}document.write(func + "<br>");document.write(function(){ return "Happy";}());只有在解析文檔時才能使用write()方法輸出HTML到當前文本,如果把write()方法放到一個函數內或者在文檔加載結束後再調用
  • JavaScript日期函數 - 計時器、innerHTML
    注意引號、分號等標點符號一定要用英文的運行結果如下:2.setDate()和getDate()封裝一個函數,可以根據輸入的數值n(天數)顯示n天后的時間分析:先獲取當前時間,再獲取天數,再用天數加上n天function numOfDate( n ){ //n天后var d = new Date(); //獲取當前時刻
  • 一篇文章帶你快速入門JavaScript(實操代碼)
    1.2JavaScript和Java語言的區別Javascript和Java沒有任何關係,它們是不同的兩種語言(java是一種程序設計語言,javascript 是客戶端的腳本語言),只是名字上都有一個Java而已。
  • 在JavaScript中使用Window對象的警告框、確認框、窗口尺寸和操作
    雖然說現在沒有對瀏覽器對象有一個正式的標準來規定,但是這些對象早已成為JavaScript開發者使用的標準,且大部分主流瀏覽器都支持。第2節. 常用方法和屬性在瀏覽器中,除了我們用戶以可視化的方式操作瀏覽器之外,各大瀏覽器還提供了以對象模型的方式讓開發者也能操作瀏覽器。如瀏覽器的「後退」功能,除了可以使用滑鼠點擊實現之外,還可以使用BOM實現。
  • 七天學會javascript第三天數組處理
    數組的應用在javascript和php都是非常非常常見的。數組排序,數組去重,數組數據篩選等等。今天就介紹一下javascript對數組的處理。可以解決項目中遇到的大部分問題。看下面demovar arr = new Array("張三","tony","王五","趙柳",123456);介紹數組常用方法:join:將數組元素使用指定的連接符號連接成字符串。push: 在數組的末尾添加元素.unshift:在開頭添加元素。shift:刪除數組第一個位置的元素,且返回該元素。
  • JavaScript_簡介2
    javascript 運算符JavaScript 使用(=)複製運算符。JavaScript 使用算數運算符(+ - * / % ++ --)來計算值。<!實例:function myFunction(p1, p2) {return p1 * p2; // 該函數返回 p1 和 p2 的乘積}JavaScript 函數通過 function 關鍵詞進行定義.
  • 「JavaScript-2」 獲取及操作標籤
    獲取標籤元素可以使用內置對象 document 上的 getElementById 方法來獲取頁面上設置了id屬性的標籤元素,獲取到的是一個html對象,然後將它賦值給一個變量,比如:<script type=&34;>    var oDiv = document.getElementById
  • 在JavaScript代碼中使用HTML DOM給Html標記分配事件
    如果你以前在給html標記分配事件時,使用的是在事件屬性(如onclick)上綁定JavaScript函數的方法,則需要你改變一下這種編程方式了。02第二節:屬性分配事件首先,我們來看一下,如何給事件屬性分配事件,綁定JavaScript函數,代碼如下:<script type="text/javascript">function f1() {var name = document.getElementById
  • 第六篇:DOM對象與Document
    DOM對象概述DOM是一套Web標準,它定義了訪問HTML文檔對象的一套屬性、方法和事件,DOM實際上是建立網頁與JavaScript語言溝通的橋梁。DOM對象層次結構如下圖所示:DOM對象的使用應用DOM可以完整解析HTML網頁,DOM會在內存中構建一棵完整的解析樹,來實現對網頁文檔的動態訪問和操作,它把網頁所有的HTML元素都解析為樹上層次分明的節點,然後可以對這些節點進行添加、修改、刪除和查看等操作
  • Web開發的大爆炸:利用JavaScript進行移動
    要在index.html文件中使用這個新函數,我們需要添加一個對文件的引用(類似於我們對CSS樣式表的操作),然後在onclick 屬性中調用該函數 。我們需要多次引用它,所以將它定義為一個變量並在我們需要該值時使用該變量會更容易。我們可以通過使用var和名稱來創建一個變量。在你的函數定義下面定義這個權利(所以這是你函數的第一行)。
  • 利用CSS、JavaScript及Ajax實現圖片預加載的三大方法
    方法一:用CSS和JavaScript實現預加載實現預加載圖片有很多方法,包括使用CSS、JavaScript及兩者的各種組合。這些技術可根據不同設計場景設計出相應的解決方案,十分高效。該腳本的第二部分,我們使用addLoadEvent()函數來延遲preloader()函數的加載時間,直到頁面加載完畢。如果JavaScript無法在用戶的瀏覽器中正常運行,會發生什麼?很簡單,圖片不會被預加載,當頁面調用圖片時,正常顯示即可。