當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

使用JavaScript制作动态网页-1

發(fā)布時(shí)間：2024/3/26 javascript 52 豆豆

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

使用JavaScript制作動(dòng)態(tài)網(wǎng)頁(yè)-1

JavaScript是什么

JavaScript是一種描述語(yǔ)言，基于對(duì)象和事件驅(qū)
動(dòng)的腳本語(yǔ)言。
1. JavaScript的特點(diǎn)

腳本語(yǔ)言（一種輕量級(jí)的編程語(yǔ)言）
一種解釋性語(yǔ)言（無(wú)需預(yù)編譯）
被設(shè)計(jì)為向HTML頁(yè)面添加交互行為
運(yùn)行于客戶端

2. ECMAScript是JavaScript的標(biāo)準(zhǔn)和基礎(chǔ)
3. JavaScript與JAVA的關(guān)系
javaScript與java名字雖然相像，但是它們沒有關(guān)系。JavaScript和Java都與sun公司有合作，是借勢(shì)Java

JavaScript的發(fā)展

95年LiveScript（Netscape公司）（為了減輕服務(wù)器壓力創(chuàng)建）
Netscape將其更名為JavaScript
微軟IE3.0并附帶JScript、CEnvi的ScriptEase以及JavaScript三足鼎立
97年JavaScript1.1版本被ECMA（歐洲計(jì)算機(jī)制造商）標(biāo)準(zhǔn)化為ECMAScript的全新腳本語(yǔ)言

JavaScript學(xué)習(xí)

JavaScript的組成

關(guān)于ECMAScript

ECMAScript定義了腳本語(yǔ)言的所有屬性、方法和對(duì)象，包括語(yǔ)法、類型、關(guān)鍵字、保留字、運(yùn)算符、對(duì)象等
除了JavaScript外，同時(shí)也是Nombas的ScriptEase和Flash腳本ActionScript的基礎(chǔ)

關(guān)于DOM

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

HTML和XML的應(yīng)用程序接口（API）
把整個(gè)頁(yè)面規(guī)劃為層級(jí)式的節(jié)點(diǎn)結(jié)構(gòu)（如下圖）

關(guān)于BOM

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

可對(duì)瀏覽器窗口進(jìn)行訪問(wèn)和操作
包括
1.彈出新的瀏覽器窗口
2.移動(dòng)、關(guān)閉瀏覽器窗口及調(diào)節(jié)瀏覽器窗口大小
3.獲取用戶屏幕分辨率的屏幕對(duì)象
4.WEB瀏覽器詳細(xì)的定位對(duì)象
-對(duì)象舉例
1.Window對(duì)象
2.Navigator對(duì)象
3.Screen對(duì)象
4.History對(duì)象
5.Location對(duì)象

JavaScript的使用

JavaScript的語(yǔ)法

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

示例：

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

引用JavaScript的3種方式

HTML標(biāo)簽中引用

常用的框輸入/輸出/確認(rèn)

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

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

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

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

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

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

JavaScript的基礎(chǔ)語(yǔ)法

注釋

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

變量聲明和使用

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

◆JavaScript的變量聲明

//JS的變量聲明，是通過(guò) var 語(yǔ)句來(lái)聲明的，無(wú)需指定數(shù)據(jù)類型 var num = 10 ; var str = "JavaScript" ; //當(dāng)然也可聲明多個(gè)，之間用逗號(hào)隔開 var num =10 , str = "JavaScript"; //省略 var 語(yǔ)句，直接變量聲明 num = 100; //相當(dāng)于window.num= 100;即全局變量（不推薦）

JavaScript的變量使用
建議先定義后使用
-+ 運(yùn)算符用于把文本值或字符串變量加起來(lái)（連接起來(lái)），如果是兩個(gè)數(shù)字則為數(shù)學(xué)運(yùn)算加號(hào)
= 運(yùn)算符用于給變量賦值，變量可以重復(fù)賦不同類型的值
JS的語(yǔ)法約定
代碼區(qū)分大小寫
變量、對(duì)象和函數(shù)的名稱有意義，最好使用駝峰
式命名
句尾的分號(hào)最好不要省略

數(shù)據(jù)類型

運(yùn)算符

typeof運(yùn)算符

typeof檢測(cè)變量的返回值，為字符串類型
typeof運(yùn)算符返回值如下：

undefined：變量被聲明后，但未被賦值
string：用單引號(hào)或雙引號(hào)來(lái)聲明的字符串
boolean：true或false
number：整數(shù)或浮點(diǎn)數(shù)
function：函數(shù)方法
object：對(duì)象或數(shù)組或 Null 類型

轉(zhuǎn)換函數(shù)

parseInt():字符串轉(zhuǎn)換為整數(shù)
parseFloat():字符串轉(zhuǎn)換為浮點(diǎn)數(shù)
toString()：返回字符串

強(qiáng)制類型轉(zhuǎn)換

Boolean()：轉(zhuǎn)化為邏輯值
Number()：對(duì)象轉(zhuǎn)化為數(shù)字
String()：對(duì)象轉(zhuǎn)化為字符串

運(yùn)算符

◆邏輯控制符

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

◆流程控制語(yǔ)句

1.while和do while循環(huán)語(yǔ)句
2.for循環(huán)語(yǔ)句
for ( 變量=開始值; 變量<=結(jié)束值; 變量=變量+步進(jìn)值 )
{
//需執(zhí)行的代碼
}
for ( 變量a in 對(duì)象obj )
{
// 獲得 obj[a];
}
3.循環(huán)中斷
break
使用 break 語(yǔ)句來(lái)終止循環(huán)
continue
使用 continue 語(yǔ)句來(lái)終止當(dāng)前的循環(huán)，然后從下一個(gè)值繼續(xù)執(zhí)行

◆語(yǔ)法規(guī)則

JavaScript中的函數(shù)定義

JavaScript中的函數(shù)
一組可以隨時(shí)隨地運(yùn)行的語(yǔ)句
將腳本編寫為函數(shù)以避免頁(yè)面載入時(shí)執(zhí)行該腳本

分類
系統(tǒng)函數(shù)
自定義函數(shù)

/*系統(tǒng)函數(shù)舉例*/ parseInt("143dd") //將字符串轉(zhuǎn)化為整數(shù)，結(jié)果為143 parseFloat("143.33dd") //解析一個(gè)字符串，并返回一個(gè)浮點(diǎn)數(shù)，結(jié) 果為143.33 /*自定義函數(shù)*/ //根據(jù)函數(shù)的語(yǔ)法自定義的函數(shù) myfun(123);

如何調(diào)用函數(shù)
函數(shù)可以通過(guò)其名字加上括號(hào)中的參數(shù)進(jìn)行調(diào)用

<html> <head> <title>函數(shù)的介紹</title><script type="text/javascript">//函數(shù)的使用// 當(dāng)某些代碼需要被重復(fù)利用的時(shí)候就可以使用函數(shù)了 console.log(isNaN("jack")); //判斷的不是數(shù)據(jù)類型是值 "12",12 false 會(huì)自動(dòng)嘗試將值轉(zhuǎn)換為數(shù)值// 寫一個(gè)最簡(jiǎn)單的函數(shù)并調(diào)用// 函數(shù)的調(diào)用 //alertName("jack"); //聲明在調(diào)用之后就無(wú)法被調(diào)用了 // 函數(shù)的聲明方式1 js函數(shù)提升器 js會(huì)先聲明這種方式聲明的函數(shù) 再依次執(zhí)行代碼 function alertName(userName){alert(userName); }// 函數(shù)的聲明方式2 聲明一個(gè)匿名函數(shù)將地址傳遞給變量 //var alertName = function(userName){ // alert(userName); //}/* 如果我函數(shù)的聲明中參數(shù)和傳入?yún)?shù)數(shù)量不一致會(huì)有什么結(jié)果 functuon fn1() {} fn1("jack"); functuon fn2(userName) {} fn2(); ?形參和實(shí)參有關(guān)系嗎？沒有 */ //實(shí)現(xiàn)練習(xí) eval 和 isNaN 兩個(gè)系統(tǒng)函數(shù)</script> </head><body> <h1>你好</h1> </body></html>

事件

JavaScript偵測(cè)到的行為

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

<html> <head> <title>隨堂練習(xí)2 從頁(yè)面上獲取元素和元素的值</title> </head><body> 標(biāo)題：<input type="text" id="tt" /><br /> 內(nèi)容：<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的區(qū)別}} </script> </body> </html>

程序調(diào)試

錯(cuò)誤分類
語(yǔ)法錯(cuò)誤
邏輯錯(cuò)誤

程序調(diào)試的方法

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

使用JavaScript實(shí)現(xiàn)動(dòng)態(tài)交互

BOM概述
BOM使得JavaScript能與瀏覽器進(jìn)行“對(duì)話”

主要是Window對(duì)象的操作
History對(duì)象
Location對(duì)象
Document對(duì)象

例題:

<html> <head> <title>隨堂練習(xí)3</title> </head><body> <h1>新浪</h1> <input type="button" value="改變層內(nèi)容" 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元素的內(nèi)容" id="btn2" /> <input type="button" value="顯示所有session內(nèi)容" id="btn3" /><hr /> <p id="pshow"></p><script text="text/javascript"> //1 獲取元素 // 如果元素具有id 瀏覽器會(huì)自動(dòng)在加載完成之后自動(dòng)創(chuàng)建為一個(gè)對(duì)象模型名字就是這個(gè)id 前提是你必須保證這個(gè)id在html中是唯一的 var inputs = document.getElementsByTagName("input"); var sessions = document.getElementsByName("session"); var hs = document.getElementsByTagName("h1");//2 操作元素 // 2.1 改變?cè)貎?nèi)容 btn1.onclick=function(){hs[0].innerHTML="搜狐";} // 2.2 顯示所有input中的內(nèi)容 btn2.onclick=function(){pshow.innerHTML="";for(var i=0;i<inputs.length;i++){pshow.innerHTML=pshow.innerHTML+" "+inputs[i].value;}} // 2.3 顯示所有session的內(nèi)容 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 屬性設(shè)置或返回表格行的開始和結(jié)束標(biāo)簽之間的 HTML。
語(yǔ)法

Object.innerHTML = "HTML";// 設(shè)置 var html = Object.innerHTML;// 獲取

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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