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

javascript

使用JavaScript制作动态网页-1

發(fā)布時間：2024/3/26 javascript 47 豆豆

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

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

JavaScript是什么

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

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

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

JavaScript的發(fā)展

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

JavaScript學(xué)習(xí)

JavaScript的組成

關(guān)于ECMAScript

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

關(guān)于DOM

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

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

關(guān)于BOM

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

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

JavaScript的使用

JavaScript的語法

注意
（1）””部分是非必須的，為了規(guī)避老版本瀏覽器不識別
（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標(biāo)簽中引用

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

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

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

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

<html> <head> <title>js支持的三種彈框，實(shí)現(xiàn)和用戶交互</title><script type="text/javascript"> // 第二個彈框叫做prompt框具有返回值,返回的是string數(shù)據(jù)類型 var userName = prompt("請輸入用戶名稱：",666); //接受2個參數(shù)，第一個是提示字符，第二個是輸入框默認(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ǔ)語法

注釋

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

變量聲明和使用

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

◆JavaScript的變量聲明

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

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

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

運(yùn)算符

typeof運(yùn)算符

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

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

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

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

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

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

運(yùn)算符

◆邏輯控制符

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

◆流程控制語句

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

◆語法規(guī)則

JavaScript中的函數(shù)定義

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

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

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

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

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

事件

JavaScript偵測到的行為

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

<html> <head> <title>隨堂練習(xí)2 從頁面上獲取元素和元素的值</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)試

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

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

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

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

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

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

例題:

<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 瀏覽器會自動在加載完成之后自動創(chuàng)建為一個對象模型名字就是這個id 前提是你必須保證這個id在html中是唯一的 var inputs = document.getElementsByTagName("input"); var sessions = document.getElementsByName("session"); var hs = document.getElementsByTagName("h1");//2 操作元素 // 2.1 改變元素內(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。
語法

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

總結(jié)

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

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

上一篇：搜索引擎蜘蛛爬虫 User Agent
下一篇：公众号被关注之后自动回访图文php,如何