當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

使用JavaScript制作动态网页

發布時間：2024/3/26 javascript 30 豆豆

生活随笔收集整理的這篇文章主要介紹了使用JavaScript制作动态网页小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

什么是JavaScript？
JavaScript是一種描述語言，基于對象和事件驅動的腳本語言
JavaScriptte特點：
腳本語言（一種輕量級的編程語言）
一種解釋性語言（無需預編譯）
被設計為向HTML頁面添加交互行為
運行于客戶端
JavaScriptte基本語法

注意：
（1）部分是非必須的，為了規避老版本瀏覽器不識別
（2）“//”是 JavaScript 的注釋符號（/**/也是注釋符號），它會阻止
JavaScript 編譯器對這一行的編譯
（3）type屬性不推薦寫成 language= " javascript " ，不符合XHMLT1.0
JavaScriptte的組成：

關于ECMAScript

1.ECMAScript定義了腳本語言的所有屬性、方法和對象
2.包括語法、類型、關鍵字、保留字、運算符、對象等
3.除了JavaScript外，同時也是Nombas的ScriptEase和
Flash腳本ActionScript的基礎

關于DOM（Document Object Model文檔對象模型）

1.HTML和XML的應用程序接口（API）
2.把整個頁面規劃為層級式的節點結構

關于BOM（Browser Object Model瀏覽器對象模型）

1.可對瀏覽器窗口進行訪問和操作包括：
彈出新的瀏覽器窗口
移動、關閉瀏覽器窗口及調節瀏覽器窗口大小
獲取用戶屏幕分辨率的屏幕對象
WEB瀏覽器詳細的定位對象
2.對象舉例
Navigator對象
Screen對象
Window對象

Window對象(表示瀏覽器中打開的窗口)
特點：
1.Window 對象是全局對象，可直接調用其方法和屬性
2.Window對象的一些方法和屬性可省略不寫
Window對象常用屬性
history屬性就是History對象的引用
方法：
1.back()：加載上一個瀏覽的文檔
2.forward()：加載下一個瀏覽過的文檔
3.go(n)：n為整數，跳轉第n個瀏覽過的文檔
3.1.n==0 則刷新當前頁面
3.2.n>0 則向前跳轉到第n個文檔
3.3.n<0 則向后跳轉到第n個文檔
代碼：

<html> <head> <title>history對象</title> </head> <body> <h1 id="hh1">返回上一頁</h1> <script> //1 獲取元素 var hh1 = document.getElementById("hh1"); //2 操作元素 hh1.onclick=function(){history.back(); } </script> </body> 的繁榮打</html>

location屬性就是Location對象的引用

代碼：

<html> <head> <title>history對象</title> </head> <body><input type="text" id="address" /><input type="button" value="跳轉" id="btn" />  <script type="text/javascript"> //console.log(location); //1 獲取元素 var add=document.getElementById("address"); var btn1=document.getElementById("btn"); //2 操作元素 btn1.onclick=function(){ //console.log(location);// 2.1 獲取文本框中的內容var a = add.value;// 2.2 將文本框中的內容作為瀏覽器中的地址location.href="https://"+a; } </script> </body> </html>

document屬性：每個載入瀏覽器的 HTML 文檔都會成為 Document 對象,利用它可對 HTML頁面中的所有元素進行訪問。
常用屬性：
title：返回或設置當前文檔的標題
常用方法
1.write()：向文檔寫HTML表達式或JavaScript代碼
2.getElementById():返回對擁有指定id的第一個對象的引用
3.getElementsByTagName():返回帶有指定名稱的對象集合
4.getElementsByName():返回帶有指定名稱的對象集合

代碼：

<html> <head> <title>document對象</title> </head> <body> <ul> <li name="ll1">蘋果</li> <li>葡萄</li> <li name="ll1">西瓜</li> </ul> <script> //1 獲取元素 var lis = document.getElementsByTagName("li"); var names = document.getElementsByName("ll1"); //2 操作元素 lis[2].innerHTML="橘子"; for(var i=0;i<lis.length;i++){ console.log(lis[i].innerHTML); } //console.log(names); //for(itm in names){ //console.log(itm); //} </script> </body> </html>

History對象
Location對象

引用JavaScriptte的三種方式

1.HTML標簽中引用
2.<script>標簽中直接書寫
3.通過<script>標簽的src屬性引入外部JS文件
代碼：

<html><head><title>javascript支持的三種彈窗，實現和用戶交互</title><script type="text/javascript">//這是javascript注釋//第一種彈窗 alert（）彈窗//alert("你好！alert");//注意：alert有一個特性！//瀏覽器處于阻塞狀態，代碼在alert這個位置停止并等待//第二個彈窗 prompt（）具有返回值，返回的是String類型//var userName=prompt("請輸入用戶名稱:", "劉德華");//prompt("請輸入姓名");//接受兩個參數，第一個是提示字符，第二個是輸入框默認的值//alert(typeof userName);//第三個彈窗 confirm（）確認框，返回的是boolean類型的true或falsevar flag=confirm("確定要提交嗎？")alert(flag);document.write("你好，javascript");</script></head> </html>

JavaScript的數據類型

undefined
1.undefined 類型只有一個值，即 undefined;
2.未定義或定義未賦值
Null
表示尚未存在的對象，與undefined值相等
Number
var iNum=23; //整數
var iNum=23.0; //浮點數
Boolean
true和false
String
一組被引號（單引號或雙引號）括起來的文本
var string1=“This is a string”;

代碼：

<html> <head> <title>介紹js的數據類型及基本操作</title> <script type="text/javascript"> // 1 代碼調試代碼斷點調試alert來完成 // 2 代碼調試我不想中斷代碼 console.log(); //var userName="jack"; //alert(userName); //console.log(userName);var aa = 12; //使用var聲明變量 console.log(typeof aa ); //number //bb = 36; //沒有使用var來聲明 //上面是js支持的兩種變量聲明方式，注意他們是有區別的 //我只規定你們只能用第一種不允許使用第二種 aa = "12"; console.log(typeof aa ); //stringconsole.log(12+"12"); //這邊的加號和Java有相同的使用方法和注意事項，使用的時候需要大家盡量注意數據類型 console.log(12+"12"); //這邊的加號和Java有相同的使用方法和注意事項，使用的時候需要大家盡量注意數據類型var u ; //當你聲明了一個變量的時候， js自動復制undefined var uu=null; console.log(uu); </script> </head> <body> </body> </html>

數據類型轉換

◆轉換函數
?parseInt():字符串轉換為整數
?parseFloat():字符串轉換為浮點數
?toString()：返回字符串
◆強制類型轉換
?Boolean()：轉化為邏輯值
?Number()：對象轉化為數字
?String()：對象轉化為字

常用的系統函數
自定義函數
語法：

代碼：

<html> <head> <title>函數的介紹</title> <script type="text/javascript"> //函數的使用 // 寫一個最簡單的函數并調用 // 函數的調用 //alertName("jack"); //聲明在調用之后就無法被調用了 // 函數的聲明方式1 js函數提升器 js會先聲明這種方式聲明的函數再依次執行代碼 function alertName(userName){alert(userName); } // 函數的聲明方式2 聲明一個匿名函數將地址傳遞給變量 //var alertName = function(userName){ // alert(userName); //} /* 如果我函數的聲明中參數和傳入參數數量不一致會有什么結果 functuon fn1() {} fn1("jack"); functuon fn2(userName) {} fn2(); ?形參和實參有關系嗎？ */ </script> </head> <body> <h1>你好</h1> </body> </html>

常見事件舉例

相關代碼：

<html> <head> <title>事件的介紹</title> </head><body>  <input type="text" onfocus="javascript:console.log(this.value)" onblur="javascript:console.log(this.value)" /> <br /> <select onchange="javascript:console.log(this.value)"> <option value="1">玩具</option> <option value="2">文具</option> <option value="3">書籍</option> </select> </body> </html> <html> <head> <script> window.onload=function(){ // 當頁面加載完成的時候出發onload事件 // 這個事件綁定在一個函數上，然后執行這個函數var input1 = document.getElementById("userName");var texta1 = document.getElementById("texta");console.log(input1.value);console.log(texta.innerHTML);}</script> </head> <body> <input type="text" id="userName" value="你好上海" /> <textarea id="texta"> 你好中國 </textarea> </body> </html>

程序的輸出調試方法
1.alert()調試法
2.document.write()調試法
3.console對象調試法（IE不支持）

總結

以上是生活随笔為你收集整理的使用JavaScript制作动态网页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：这6个Office学习网站凭什么值得收藏
下一篇：【瑞数】维普期刊JS逆向4000字详细流