javascript
使用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的語法
<script type= " text/javascript " >
<!-- // JavaScript 代碼// -->
</script>
注意
(1)””部分是非必須的,為了規避老版本瀏覽器不識別
(2)“//”是 JavaScript 的注釋符號(/**/也是注釋符號),它會阻止
JavaScript 編譯器對這一行的編譯
(3)type屬性不推薦寫成 language= " javascript " ,不符合XHMLT1.0
示例:
<html> <head> <!-- <head>與<body>的區別 --> <!-- 在使用上沒有區別--> <!-- 瀏覽器有自動糾錯功能,能正常顯示不表示 你寫對了--> <!-- 大家規定想讓用戶看見的寫在<body>中,不想讓用戶看見的寫在<head>中--><script type="text/javascript"> document.write("你好,JavaScript"); </script></head> <body></body></html>引用JavaScript的3種方式
- HTML標簽中引用
常用的框輸入/輸出/確認
◆alert()
alert(“提示信息”); //提示信息框
示例:
◆prompt()
prompt(“提示信息”, “輸入框的默認信息”);
prompt(“請輸入姓名”, “張三”);
prompt(“請輸入姓名”);
示例:
◆confirm(
confirm(“確認信息?”); //確定則返回true,取消則返回false
示例:
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中的函數
一組可以隨時隨地運行的語句
將腳本編寫為函數以避免頁面載入時執行該腳本
- 分類
系統函數
自定義函數
- 如何調用函數
函數可以通過其名字加上括號中的參數進行調用
事件
JavaScript偵測到的行為
- 事件舉例:
- 鼠標點擊
- 頁面或圖像載入
- 鼠標懸浮于頁面的某個熱點之上
- 在表單中選取輸入框
- 表單提交
- 鍵盤按鍵
-
例題:
◆需求說明
制作留言板提交效果
點擊“提交”按鈕表單提交
提交前讓用戶確認,確認后提交 ,否則不提交
程序調試
- 錯誤分類
語法錯誤
邏輯錯誤
程序調試的方法
- 注釋調試法
- 輸出調試法
alert()調試法
document.write()調試法
console對象調試法(IE不支持)
-調試工具
Firebug、瀏覽器自帶開發窗口
使用JavaScript實現動態交互
BOM概述
BOM使得JavaScript能與瀏覽器進行“對話”
- 主要是Window對象的操作
History對象
Location對象
Document對象
例題:
HTML DOM innerHTML 屬性
定義和用法
innerHTML 屬性設置或返回表格行的開始和結束標簽之間的 HTML。
語法
總結
以上是生活随笔為你收集整理的使用JavaScript制作动态网页-1的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 搜索引擎蜘蛛爬虫 User Agent
- 下一篇: 最新JS正则大全(常用)