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

javascript

使用JavaScript制作动态网页-1

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

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

使用JavaScript制作動態網頁-1

JavaScript是什么

JavaScript是一種描述語言，基于對象和事件驅
動的腳本語言。
1. JavaScript的特點

腳本語言（一種輕量級的編程語言）
一種解釋性語言（無需預編譯）
被設計為向HTML頁面添加交互行為
運行于客戶端

2. ECMAScript是JavaScript的標準和基礎
3. JavaScript與JAVA的關系
javaScript與java名字雖然相像，但是它們沒有關系。JavaScript和Java都與sun公司有合作，是借勢Java

JavaScript的發展

95年LiveScript（Netscape公司）（為了減輕服務器壓力創建）
Netscape將其更名為JavaScript
微軟IE3.0并附帶JScript、CEnvi的ScriptEase以及JavaScript三足鼎立
97年JavaScript1.1版本被ECMA（歐洲計算機制造商）標準化為ECMAScript的全新腳本語言

JavaScript學習

JavaScript的組成

關于ECMAScript

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

關于DOM

DOM(Document Object Model文檔對象模型)

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

關于BOM

BOM(Browser Object Model瀏覽器對象模型)

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

JavaScript的使用

JavaScript的語法

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

示例：

<html> <head>    <script type="text/javascript"> document.write("你好，JavaScript"); </script></head> <body></body></html>

引用JavaScript的3種方式

HTML標簽中引用

常用的框輸入/輸出/確認

◆alert()
alert(“提示信息”); //提示信息框
示例：

<html> <head><title>js支持的三種彈框，實現和用戶交互</title><script type="text/javascript">//這是js注釋alert("你好,alert")//瀏覽器處于阻塞狀態代碼在alert這個位置停止并等待</script> </head> <body> </body><h1>你好 html</h1> </body> </html>

◆prompt()
prompt(“提示信息”, “輸入框的默認信息”);
prompt(“請輸入姓名”, “張三”);
prompt(“請輸入姓名”);
示例：

<html> <head> <title>js支持的三種彈框，實現和用戶交互</title><script type="text/javascript"> // 第二個彈框叫做prompt框具有返回值,返回的是string數據類型 var userName = prompt("請輸入用戶名稱：",666); //接受2個參數，第一個是提示字符，第二個是輸入框默認的值 alert(typeof userName); </script> </head><body><h1>你好 html</h1> </body> </html>

◆confirm（
confirm(“確認信息？”); //確定則返回true，取消則返回false
示例：

<html> <head> <title>js支持的三種彈框，實現和用戶交互</title><script type="text/javascript"> //confirm 確認框返回的是布爾值的true或者false var flag=confirm("確定提交嗎？"); alert(flag); </script></head> <body> <h1>你好 html</h1> </body> </html>

JavaScript的基礎語法

注釋

JavaScript的注釋方法，與Java一致
//或者/* */

變量聲明和使用

1、由于 JavaScript 對大小寫敏感，變量名也對大小寫敏感（y 和 Y 是兩個不同的變量）
2、變量必須以字母或下劃線或美元符$開始，不能使用關鍵字作為變量名

◆JavaScript的變量聲明

//JS的變量聲明，是通過 var 語句來聲明的，無需指定數據類型 var num = 10 ; var str = "JavaScript" ; //當然也可聲明多個，之間用逗號隔開 var num =10 , str = "JavaScript"; //省略 var 語句，直接變量聲明 num = 100; //相當于window.num= 100;即全局變量（不推薦）

JavaScript的變量使用
建議先定義后使用
-+ 運算符用于把文本值或字符串變量加起來（連接起來），如果是兩個數字則為數學運算加號
= 運算符用于給變量賦值，變量可以重復賦不同類型的值
JS的語法約定
代碼區分大小寫
變量、對象和函數的名稱有意義，最好使用駝峰
式命名
句尾的分號最好不要省略

數據類型

運算符

typeof運算符

typeof檢測變量的返回值，為字符串類型
typeof運算符返回值如下：

undefined：變量被聲明后，但未被賦值
string：用單引號或雙引號來聲明的字符串
boolean：true或false
number：整數或浮點數
function：函數方法
object：對象或數組或 Null 類型

轉換函數

parseInt():字符串轉換為整數
parseFloat():字符串轉換為浮點數
toString()：返回字符串

強制類型轉換

Boolean()：轉化為邏輯值
Number()：對象轉化為數字
String()：對象轉化為字符串

運算符

◆邏輯控制符

1.if條件語句
variablename = ( condition ) ? value1 : value2 ;
2.switch多分支語句

◆流程控制語句

1.while和do while循環語句
2.for循環語句
for ( 變量=開始值; 變量<=結束值; 變量=變量+步進值 )
{
//需執行的代碼
}
for ( 變量a in 對象obj )
{
// 獲得 obj[a];
}
3.循環中斷
break
使用 break 語句來終止循環
continue
使用 continue 語句來終止當前的循環，然后從下一個值繼續執行

◆語法規則

JavaScript中的函數定義

JavaScript中的函數
一組可以隨時隨地運行的語句
將腳本編寫為函數以避免頁面載入時執行該腳本

分類
系統函數
自定義函數

/*系統函數舉例*/ parseInt("143dd") //將字符串轉化為整數，結果為143 parseFloat("143.33dd") //解析一個字符串，并返回一個浮點數，結果為143.33 /*自定義函數*/ //根據函數的語法自定義的函數 myfun(123);

如何調用函數
函數可以通過其名字加上括號中的參數進行調用

<html> <head> <title>函數的介紹</title><script type="text/javascript">//函數的使用// 當某些代碼需要被重復利用的時候就可以使用函數了 console.log(isNaN("jack")); //判斷的不是數據類型是值 "12",12 false 會自動嘗試將值轉換為數值// 寫一個最簡單的函數并調用// 函數的調用 //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(); ?形參和實參有關系嗎？沒有 */ //實現練習 eval 和 isNaN 兩個系統函數</script> </head><body> <h1>你好</h1> </body></html>

事件

JavaScript偵測到的行為

事件舉例：
鼠標點擊
頁面或圖像載入
鼠標懸浮于頁面的某個熱點之上
在表單中選取輸入框
表單提交
鍵盤按鍵
-
例題:
◆需求說明
制作留言板提交效果
點擊“提交”按鈕表單提交
提交前讓用戶確認，確認后提交，否則不提交

<html> <head> <title>隨堂練習2 從頁面上獲取元素和元素的值</title> </head><body> 標題：<input type="text" id="tt" /><br /> 內容：<textarea id="ttt"></textarea><br /> <input type="button" value="提交" id="btn" /><script type="text/javascript"> //1 獲取元素 var title1=document.getElementById("tt"); var value1=document.getElementById("ttt"); var btn1=document.getElementById("btn"); //2 操作元素 // 綁定事件 btn1.onclick=function(){if(confirm("確定提交嗎？")){console.log(title1.value);console.log(value1.value); //innerHTML和value的區別}} </script> </body> </html>

程序調試

錯誤分類
語法錯誤
邏輯錯誤

程序調試的方法

注釋調試法
輸出調試法
alert()調試法
document.write()調試法
console對象調試法（IE不支持）
-調試工具
Firebug、瀏覽器自帶開發窗口

使用JavaScript實現動態交互

BOM概述
BOM使得JavaScript能與瀏覽器進行“對話”

主要是Window對象的操作
History對象
Location對象
Document對象

例題:

<html> <head> <title>隨堂練習3</title> </head><body> <h1>新浪</h1> <input type="button" value="改變層內容" id="btn1" /><br /><input type="text" name="session" /> <input type="text" name="session" /> <input type="text" name="session" /> <input type="text" name="session" /><br /><input type="button" value="顯示所有input元素的內容" id="btn2" /> <input type="button" value="顯示所有session內容" id="btn3" /><hr /> <p id="pshow"></p><script text="text/javascript"> //1 獲取元素 // 如果元素具有id 瀏覽器會自動在加載完成之后自動創建為一個對象模型名字就是這個id 前提是你必須保證這個id在html中是唯一的 var inputs = document.getElementsByTagName("input"); var sessions = document.getElementsByName("session"); var hs = document.getElementsByTagName("h1");//2 操作元素 // 2.1 改變元素內容 btn1.onclick=function(){hs[0].innerHTML="搜狐";} // 2.2 顯示所有input中的內容 btn2.onclick=function(){pshow.innerHTML="";for(var i=0;i<inputs.length;i++){pshow.innerHTML=pshow.innerHTML+" "+inputs[i].value;}} // 2.3 顯示所有session的內容 btn3.onclick=function(){pshow.innerHTML="";for(var i=0;i<sessions.length;i++){pshow.innerHTML=pshow.innerHTML+" "+sessions[i].value;} } </script> </body> </html>

HTML DOM innerHTML 屬性
定義和用法
innerHTML 屬性設置或返回表格行的開始和結束標簽之間的 HTML。
語法

Object.innerHTML = "HTML";// 設置 var html = Object.innerHTML;// 獲取

總結

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

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

上一篇：搜索引擎蜘蛛爬虫 User Agent
下一篇：最新JS正则大全(常用)