Javascript
Download
1 / 149

???? JavaScript ?? - PowerPoint PPT Presentation


  • 155 Views
  • Uploaded on

網頁設計 JavaScript 簡介. Introduction to JavaScript. 大綱. 基本 語法 變數 條件 判斷 迴 圈 函 式 物件. 網頁 分工. HTML 負責內容 文章的結構與內容 CSS 負責長相 版面設計的樣式與風格 JavaScript 負責動作 資料處理、使用者互動與事件處理. JavaScript 簡介. Client-Side JavaScript (CSJS) ECMAScript ECMA International 歐洲計算機 製造商 協會 ECMA-262 specification

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '???? JavaScript ??' - harmon


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Javascript

網頁設計JavaScript 簡介

Introduction to JavaScript


Javascript
大綱

基本語法

變數

條件判斷

迴圈

函式

物件


Javascript
網頁分工

  • HTML 負責內容

    • 文章的結構與內容

  • CSS 負責長相

    • 版面設計的樣式與風格

  • JavaScript 負責動作

    • 資料處理、使用者互動與事件處理


Javascript1
JavaScript 簡介

  • Client-Side JavaScript (CSJS)

  • ECMAScript

    • ECMA International

      • 歐洲計算機製造商協會

    • ECMA-262 specification

    • ISO/IEC 16262

  • Netscape: LiveScript

  • Microsoft: Jscript


Javascript2
JavaScript 簡介

  • JavaScript的功能

    • 控制瀏覽器的動作與內容

  • JavaScript的優點

    • 直譯式語言, 簡單易懂

    • 直接反應使用者的要求, 無須透過伺服器

    • 瀏覽器解譯程式, 可跨作業平台執行

    • 安全:無法經由網路從他處傳輸資料, 也無法讀取使用者硬碟中的資料


Javascript3
JavaScript 開發環境

  • 開發工具

    • Dreamweaver

    • Eclipse

    • Aptana Studio

  • 除錯工具

    • Firefox: firebug

      • 以 Firefox 開啟這個 下載點

      • 或到 Firefox 附加元件網站https://addons.mozilla.org/搜尋 firebug

    • IE: IE 開發者工具列(Developer Toolbar)

      • 在 IE9 網頁按 F12 或右上齒輪選「 F12 開發者工具」


Javascript
基本語法

  • JavaScript is NOT Java

    • Java 和 JavaScript 在語法方面相似,但是在變數宣告、資料型別與物件導向方面有許多差異


Javascript4
第一個 JavaScript 程式

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>第一個JavaScript程式</title>

<script language="javascript">

alert("Hello World!");

</script>

</head>

<body>

<h1>歡迎光臨 JavaScript 的世界!</h1>

</body>

</html>


Javascript5
第二個 JavaScript 程式

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>第二個JavaScript程式</title>

</head>

<body>

<h1>歡迎光臨 JavaScript 的世界!</h1>

<script language="javascript">

alert("Hello World!");

</script>

</body>

</html>


Javascript6
第三個 JavaScript 程式

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>第二個JavaScript程式</title>

<link rel="stylesheet" href="Hello.css">

</head>

<body>

<article>

<h1>歡迎光臨 JavaScript 的世界!</h1>

<hr>

<div id="message">Place message here!</div>

</article>

<script language="javascript">

varmsg = document.getElementById("message");

msg.innerHTML="<h2>Hello World!</h2>";

</script>

</body>

</html>


Hello css
Hello.css

@charset "utf-8";

article {

margin: 1em 10%;

padding: 1em;

background-color: #FFC;

text-align: center;

}

h1 {

color: blue;

}

h2 {

color: red;

}


Javascript7
第四個 JavaScript 程式

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>第四個JavaScript程式</title>

<link rel="stylesheet" href="Hello.css">

</head>

<body>

<article>

<h1>歡迎光臨 JavaScript 的世界!</h1>

<hr>

<h2 id="message">Place message here!</h2>

</article>

<script language="javascript">

varmsg = document.getElementById("message");

var name = prompt("請問尊姓大名?");

if (name) {

msg.innerHTML="Hello " + name;

msg.style.color="magenta";

} else {

msg.innerHTML="Hello World!";

}

</script>

</body>

</html>


Javascript8
第五個 JavaScript 程式

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>第五個JavaScript程式</title>

<link rel="stylesheet" href="Hello.css">

<script language="javascript">

functionsayHello() {

varmsg = document.getElementById("message");

var name = prompt("請問尊姓大名?");

if (name) {

msg.innerHTML="Hello " + name;

msg.style.color="magenta";

} else {

msg.innerHTML="Hello World!";

}

}

</script>

</head>

<body>

<article>

<h1>歡迎光臨 JavaScript 的世界!</h1>

<hr>

<h2 id="message" onClick="sayHello()">按按看</h2>

</article>

</body>

</html>


Javascript9
第六個 JavaScript 程式

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>第六個JavaScript程式</title>

<link rel="stylesheet" href="Hello.css">

<script language="javascript" src="Hello.js"></script>

</head>

<body>

<article>

<h1>歡迎光臨 JavaScript 的世界!</h1>

<hr>

<h2 id="message" onClick="sayHello()">按按看</h2>

</article>

</body>

</html>


Hello js
Hello.js

functionsayHello() {

varmsg = document.getElementById("message");

var name = prompt("請問尊姓大名?");

if (name) {

msg.innerHTML="Hello " + name;

msg.style.color="magenta";

} else {

msg.innerHTML="Hello World!";

}

}


Javascript10
第七個 JavaScript 程式

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>第七個JavaScript程式</title>

<link rel="stylesheet" href="Hello.css">

<script language="javascript" src="Hello.js"></script>

</head>

<body>

<article>

<h1 onClick="sayHello2('歡迎光臨 ', this, ' 的世界!')">

歡迎光臨 JavaScript 的世界!</h1>

<hr>

<h2 onClick="sayHello2('Hello ', this, ' !')">

按按看</h2>

</article>

</body>

</html>


Hello js1
Hello.js

function sayHello2(msgPrefix, node, msgPostfix) {

var rainbow = new Array("red","orange","yellow","green",

"blue","indigo", "violet");

var name = prompt("請問輸入名稱:");

if (name) {

node.innerHTML= msgPrefix + name + msgPostfix;

varn = Math.floor(Math.random() * rainbow.length);

varcolor = rainbow[n];

node.style.color= color;

}

}


Javascript11
JavaScript 程式碼撰寫慣例

  • 關鍵字(Reserved Word)

    • function, if, else

  • 特殊字元

    • {} () ;

  • 識別字

    • 程式設計師自行定義的名詞


Javascript
規則與慣例

  • 區分英文字母大小寫

  • 忽略多餘的空白字元

  • 分號:不一定需要

  • 換行:提高程式的可讀性

  • 註解:

    • // 單行

    • /* 多行*/


Javascript
識別字命名規則

  • 第一個字元:

    • 英文字母或底線(_)

  • 後續字元

    • 阿拉伯數字

    • ISO-8859-1字元

    • Unicode字元

    • 底線

    • 錢號($)


Javascript
識別字命名規則(續)

  • 避開關鍵字

  • 駱駝命名法:

    • userName

    • CheckUserAccount()

  • 函式名稱開頭取動詞

  • 事件處理函式末尾加EventHandler

  • 避免在內部範圍使用和外部範圍相同的變數名稱


Javascript12
JavaScript 關鍵字


Hello javascript
練習:Hello JavaScript

  • 以 document.write 方法輸出字串 "Hello JavaScript"

    • document 代表這個HTML文件

    • write() 輸出字串的副程式

  • JavaScript 程式碼必須以<script type="text/javascript"></script>夾住前後


Javascript13
JavaScript 語言特性

Dynamically Typed 動態資料型別

Interpreted 直譯,逐行編譯執行

Functions as First-Class Objects 函式即物件


Javascript
語言特性

var x = 5; // set x to 5 (number)

x = "Hello!"; // set x to "Hello!" (String)

  • Dynamically Typed 動態型別

    • Data types are NOT declared

    • Data types are NOT known until execution time

    • Data type is associated to the value of the variable rather than the variable itself


Javascript
語言特性

  • Interpreted 直譯式語言

    • The code is stored as text and interpreted into machine instructions and stored in memory as the program runs.

    • Line by line 逐行譯、逐行執行


Javascript
語法概述

  • 利用 "." 來連接 "物件"與

    • 其所擁有的屬性(Property)

    • 能夠改變其狀態的方法(Method)

    • 與其有下層關係的物件 (Object)

  • 利用物件名稱.屬性名稱= 屬性值, 可以改變物件的屬性值, 亦即改變物件的狀態

  • 利用物件名稱.方法名稱(),即可呼叫某物件的方法,改變物件的狀態


Javascript
變數宣告

  • 變數宣告方式

    • 一般變數宣告: [var] 變數名稱[=變數值];

    • 陣列變數宣告: [var] 變數名稱 = new Array([數量|陣列值]);

    • 物件變數宣告: (宣告物件一定要用 var)var 變數名稱 = new 物件名稱;


Javascript
基本資料型別

  • Primitive Data Types

    • boolean 真/假(true/false)

    • number 數字(有小數點)

    • string 文字(用雙引號或單引號括住)

  • Special values

    • undefined 未定義

    • null 虛空


Javascript
基本資料型別

var x = false;

var y = true;

var z = 1;

alert (y === z); // 3:false; 2:true

  • booleans 布林,真/假、是/否

    • Possible values

      • true

      • false

    • 1相當於 true

    • 0相當於 false


Javascript
基本資料型別

var x = 6; // x: 64-bit

var y = x << 2; // x: 32-bit, y: 64-bit

  • Numbers 數字

    • 64位元值

    • Similar to double in Java

    • 進行整數運算時:

      • 先轉成 32-bit 整數(無條件捨去),運算完畢再轉回 64-bit number





Javascript
練習:印出從一到十的數字

  • 以 document.write 輸出從 1 到 10 的數字

  • 迴圈:

    • while (條件) { … }

    • for (初值; 條件; 改變) { … }




Javascript
邏輯運算子

! 運算子 (邏輯否定Not)

&& 運算子 (最短路徑邏輯交集)

|| 運算子 (最短路徑邏輯聯集)


Javascript
位元運算子

~ 運算子 (位元NOT)

& 運算子 (位元AND)

| 運算子 (位元OR)

^ 運算子 (位元XOR)

<< 運算子 (向左移位)

>> 運算子 (向右無號移位)

>>> 運算子 (向右有號移位,維持正負號)




Javascript
條件運算子

  • 條件運算式 ?運算式1 : 運算式2

    • Max = (x > y) ? x : y;

    • Abs = (x > 0) ? x : -x;



Javascript
基本資料型別

  • Strings 字串

    • A string is a sequence of zero or more Unicode values used to represent text.

    • Strings are immutable

      • Modification produces a new string

  • JavaScript 只有字串,沒有字元型別

  • 單引號與雙引號皆可


Escape characters
Escape Characters 跳脫字元


Javascript
流程控制

  • 判斷結構

    • if...else

    • switch

  • 迴圈結構

    • for

    • while

    • do


Javascript
if…:如果…就…(單向選擇)

  • if (condition) statement;

  • if (condition)

  • {

  • statement1;

  • statement2;

  • statementN;

  • }


If else
if…else:如果…就否則…(雙向選擇)

if (condition)

{

statements1;

}

else

{

statements2;

}


Javascript
練習:判斷奇數偶數

  • 判斷輸入的數字是奇數還是偶數

    • 如果不用除法該怎麼做?

      var n = prompt("請輸入一個整數");

      if (n % 2 == 0)

      alert(n + "是偶數");

      else

      alert(n + "奇偶數");


If else if
if…else if…:「如果…就….否則 如果…就…否則…」(多向選擇)

if (condition1)

{

statements1;

}

else if (condition2)

{

statements2;

}

else if (condition3)

{

statements3;

}

else

{

statementsN+1;

}


Javascript
練習:評定等第

<SCRIPT LANGUAGE="javascript">

var X = prompt("請輸入學期成績", "");

if (X >= 90)

alert("優等!");

else if (X < 90 && X >= 80)

alert("甲等!");

else if (X < 80 && X >= 70)

alert("乙等!");

else if (X < 70 && X >= 60)

alert("丙等!");

else

alert("不及格!");

</SCRIPT>


Switch case
switch…case

switch(expression)

{

case value1:

statements1;

break;

case value2:

statements2;

break;

default:

statementsN+1;

break;

}


Javascript
for (計數迴圈)

for (initializers; expression; iterators)

{

statements;

[break;]

statements;

}


Javascript
練習:印出從一加到十的結果

以 document.write 輸出從 1 加到 10 的結果


While
while迴圈

while(condition)

{

statements;

[break;]

statements;

}


Do while
do…while迴圈

do

{

statements;

[break;]

statements;

}while(condition);


Break continue
break 與 continue

break 讓迴圈立即中斷

continue 跳過迴圈中後續的指令,令迴圈立即進入下一回合


For in
for…in

for (varidentifier in expression)

{

statements;

[break;]

statements;

}


Javascript

<html>

<head>

<title>流程控制範例</title>

<script language="javascript">

var students = new Array("小丸子", "小玉", "花輪");

for (varindex in students)

{

alert(students[index]);

}

</script>

</head>

<body>

</body>

</html>


Javascript
練習:九九乘法表

  • 以document.write輸出九九乘法表

    • 作法一:以<pre>標籤配合 \t 定位

    • 作法二:以<table>排版

      • 試試看:以 background-color 做出間隔列顏色不同的變化

      • 試試看:以 CSS 的 tr:hover做出隨著滑鼠移動的螢光棒


Javascript
練習

計算並印出從 1 到 10 累加的結果,例如:1+2+3+4+5+6+7+8+9+10=55

設計一個 JavaScript 程式,計算並印出從 1 到 n 累加的結果,其中 n 是一個從文字方塊輸入的數字

用 parseInt() 將字串轉成數字


Function
函式 Function

  • 函式的用途

    • 可重複使用

    • 程式碼變精簡。

    • 提高程式碼的可讀性

    • 提高程式碼的邏輯和正確性

      • 容易偵錯、修改與維護


Javascript
使用者自訂函式

function function_name([argumentlist])

{

statements;

[return;|return value;]

[statements;]

}


Javascript

<html>

<head>

<title>自訂函式範例</title>

<script language="javascript">

function greeting()

{

var username = prompt("請輸入您的大名", "");

alert(username + "您好!歡迎光臨!");

}

greeting();

</script>

</head>

<body>

</body>

</html>


Javascript
對話方塊

alert("警示訊息");

var answer = confirm("確認訊息");

var answer = prompt("提示訊息","預設值");


Javascript

<html>

<head>

<title>自訂函式範例</title>

<script language="javascript">

function greeting()

{

var username = prompt("請輸入您的大名", "");

alert(username + "您好!歡迎光臨!");

}

</script>

</head>

<body>

<h1><a href="javascript:greeting()">點取此處以顯示歡迎訊息</a></h1>

</body>

</html>


Javascript
函式的參數

<html>

<head>

<title>自訂函式範例</title>

<script language="javascript">

function convert2f(degC)

{

var degreef = degC * 1.8 + 32;

alert("攝氏" + degC + "度可以轉換成華氏" + degreef + "度");

}

var temperature = prompt("請輸入攝氏溫度", "");

convert2f(temperature);

</script>

</head>

<body>

</body>

</html>


Javascript
函式的傳回值

<html>

<head>

<title>自訂函式範例</title>

<script language="javascript">

function convert2f(degC)

{

return degreef = degC * 1.8 + 32;

}

var temperature = prompt("請輸入攝氏溫度", "");

var result = convert2f(temperature);

alert("攝氏" + temperature + "度可以轉換成華氏" + result + "度");

</script>

</head>

<body>

</body>

</html>


Javascript
區域變數 V.S. 全域變數

變數的有效範圍(Scope)

區域變數只存在於 function(){ } 內

全域變數都掛在 window 物件下

宣告在最外層(任何一對 { } 之外)的皆為全域變數

不宣告就使用的變數,自動宣告成全域變數

全域變數的有效範圍及於內層的{ }之中,區域變數的有效範圍限制於{ } 之內


Function1
區域變數只存在於 function(){ } 內

Only the global object (the window object in browsers) and functions are variable scope boundaries

Other blocks, such as if-then-else statements and while loops, don't provide a variable scope boundary.

Variables declared inside a block other than the function block will be accessible outside that block



Globally scoped variables
Globally Scoped Variables

The global window is the root of the DOM and is accessed through the window keyword


Undeclared variables are global
Undeclared Variables are Global

不宣告就使用的變數,自動宣告成全域變數


Javascript
傳值 vs傳參

  • 傳值 Call by VALUE

    • 傳遞基本資料型別

    • Number

    • String

    • Boolean

  • 傳參 Call by REFERENCE

    • 所有的物件


Javascript14
JavaScript 內建函式

  • encodeURI() 將英文字母、數字及 ! # $ & ' ( ) * + , - . / : ; = ? @ _ ~ 之外的字元加以編碼

    • 例如 encodeURI("Hello 123!") 傳回Hello%20123!

  • decodeURI() 將 encodeURI() 編碼過的資料解碼

    • 例如 decodeURI("Hello%20123!") 傳回Hello 123!


Javascript15
JavaScript 內建函式

  • encodeURIComponent() 將英文字母、數字及 ! ' ( ) * - . _ ~ 之外的字元加以編碼

    • 例如 encodeURI("http://") 傳回 http://encodeURIComponent("http://") 傳回http%3A%2F%2F。

  • decodeURIComponent() 將encodeURIComponent() 編碼過的資料解碼


Javascript16
JavaScript 內建函式

  • eval() 將字串當成 JavaScript 程式碼執行

    • 例如:eval("alert('Hello World!');");


Javascript17
JavaScript 內建函式

isFinite() 判斷參數是否為有限值

isNaN() 判斷參數是否為 NaN (Not a Number)

Number() 用來將參數轉換為數字

parseInt() 用來將參數轉換為整數

parseFloat() 用來將參數轉換為浮點數


Javascript
字串轉數字

alert(Number("10.5") + Number("8"));//傳回數字18.5

alert(Number("abc")); //傳回NaN

alert(parseInt(10.5)); //傳回10

alert(parseInt("10.5")); //傳回10

alert(parseInt("-7.56")); //傳回-7

alert(parseFloat(10.5)); //傳回10.5

alert(parseFloat("10.5")); //傳回10.5

alert(parseFloat("-7.56")); //傳回-7.56

alert(parseInt("123abc")); //傳回123

alert(parseInt("123ab", 16)); //傳回74667

alert(parseInt("123ab", 8)); //傳回83

alert(parseInt("123ab", 2)); //傳回1


Javascript
函式庫

<srciptsrc="MyLibrary.js" type="text/JavaScript"></script>

將常用的使用者自訂函式存成 .js 檔案,需要時以下列敘述引入使用


Javascript
練習:取絕對值

  • 撰寫一個可以計算絕對值的函式

  • 輸入:數字

  • 輸出:該數字的絕對值

  • 提示:

    • 以 prompt 取得輸入

    • 以 parseFloat 將字串轉換成數字


Javascript
練習:判斷質數

  • 撰寫一個可以判斷輸入是否質數的函式

  • 輸入:大於1的自然數

  • 輸出:是否質數

  • 提示:

    • 質數是除了1和自己之外,無法被其他自然數整除

    • 最小的質數是2

    • 質數又稱為素數,英文稱為 Prime Number


Javascript
練習:列出範圍內的質數

輸入:起訖範圍兩個數字

輸出:位於起訖範圍內的質數,包括起訖兩個數字


Javascript
練習:計算階乘

  • 輸入:一個正整數 n

  • 輸出:n階乘(n!)

  • 提示

    • 階乘是所有小於或等於該數的正整數的積。

    • n! = 1 * 2 * … * n

    • 13!= 6,227,020,800

    • 231-1=2,147,483,647


Javascript
練習:計算組合數

  • 輸入:兩個正整數 n 和 k

  • 輸出:C(n, k)

  • 提示

    • 組合數用於二項式係數的計算

    • 英文稱為Combination


Javascript
練習:計算組合數

為什麼要避免計算階乘?


Javascript
練習:計算費氏數列第n項

  • 輸入:正整數 n

  • 輸出:費氏數列第 n 項

  • 提示:

    • 英文稱為 Fibonacci Sequence

    • 定義為

    • 通常以遞迴解

    • 不用遞迴其實更快


Javascript
練習:計算最大公因數

  • 輸入:兩個整數 m 和 n

  • 輸出:m 和 n 的最大公因數

  • 提示:

    • 輾轉相除法


Url request
練習:URL Request 分解

  • 輸入:URL Request

  • 輸出:分解後的 URL

  • 例如:

    • 輸入: http://www.xyz.com/ig#s1?p1=1&p2=x

    • 輸出:

      • URL:http://www.xyz.com/ig#s1

      • 參數1名稱:p1,參數1值:1

      • 參數2名稱:p2,參數2值:x

    • 測試:http://www.xyz.com.uu/%E7%94%A2%E5%93%81/%E7%9B%AE%E9%8C%84?%E9%A1%9E%E5%88%A5=%E9%87%91%E5%B1%AC&%E4%BB%A3%E7%A2%BC=36

  • 提示:

    • decodeURI()

    • String.split()

    • Regular Expression


Document object model dom
Document Object Model (DOM)

  • What is model 什麼是模型?

    • Prototype or plan for the organization of 物件s on a page 網頁內物件的組織架構

  • 由 World Wide Web Consortium (W3C) 定義

  • HTML 定義文章的內容與架構(章節、標題、圖表)

  • DOM 專注於物件的組織架構(階層式、樹狀)


Javascript
HTML文件基本結構


Browser object model bom
Browser Object Model (BOM)

  • 瀏覽器物件模型

    • 瀏覽器上的物件

    • 獨立於網頁內容之外


Javascript
BOM

視窗

瀏覽器

螢幕

歷史

位置

文件


Javascript
BOM

  • window 物件:

    • 代表瀏覽器視窗

    • 若使用頁框(frame)則每一個頁框都有一個 window物件

    • DOM的樹根

  • navigator 物件:

    • 唯讀

    • 主要用於判斷瀏覽器的種類和版本


Javascript
BOM

  • screen 物件:

    • 唯讀

    • 關於實體環境

      • 螢幕的寬度與高度

  • history 物件:

    • 瀏覽的過程

    • 主要用於控制『下一頁』、『上一頁』


Javascript
BOM

  • location 物件:

    • 主要用途:載入新的網頁

  • document 物件:

    • 代表HTML文件

    • 包含HTML文件內的每一個標籤物件

      • 不包括 html、head、body 等物件


Javascript
DOM 物件階層


Javascript
DOM 物件階層


Javascript
DOM 物件階層


Object reference
物件參照方式(Object Reference)

  • 網頁載入後,所有的物件以DOM的樹狀結構儲存於主記憶體中

  • DOM 物件命名方式

    • 使用 id 屬性


Javascript
DOM物件命名規則

不可以包含空白字元

不可以使用標點符號,底線(_)除外

必須以字串符號(單引號、雙引號)括住

第一個字元不可以使用阿拉伯數字

名稱必須唯一,不同物件的 id 必須相異


Javascript
物件參照方式

  • 以 document.getElementById(物件id) 抓取物件

  • 注意英文字母大小寫

    • document.getElementByName() 傳回陣列,不是單一物件


Javascript
節點專有名詞

Document Node

Element Node

Parent Node

Child Node

Text Node


Javascript
如何定義物件?

Properties 屬性(資料)

Methods 方法(副程式)

Events (Handlers). 事件&事件處理常式



Methods
Methods 方法


Events
Events 事件


Window document
Window 和 Document 物件


Window
window 物件

  • 如何存取 window 的屬性&方法

    • window.propertyName

    • window.methodName([parameters])

    • self.propertyName

    • self.methodName([parameters])

    • propertyName

    • methodName([parameters])


Window1
產生新的 window

chrome : 包含 scrollbars、toolbars、status bar、menu bar 的區域

  • window.open(URL,name,specs,replace)打開新的視窗,載入新的網頁

  • 參數

    • URL指定載入的網址

    • name目標視窗的名稱,類似target

    • specs限制參數(包括寬度、高度和 chrome contingent)

    • replace取代目前視窗? true/false


Window name
產生新的 window:name目標視窗的名稱

_blank - URL is loaded into a new window. This is default

_parent - URL is loaded into the parent frame

_self - URL replaces the current page

_top - URL replaces any framesets that may be loaded

name - The name of the window


Window specs
產生新的 window:specs 限制參數


Window2
建立 window


Window open
window.open() 參數

window.open ('page.html', 'targetWindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')

height=100 視窗高度  

width=400 視窗寬度

top=0 視窗左上角y座標

left=0 視窗左上角x座標

toolbar=no 是否顯示工具列,yes為顯示

menubar 選單

scrollbars 捲軸

resizable=no 是否允許改變視窗大小,yes為允許

location=no 是否顯示網址列,yes為顯示

status=no 是否顯示狀態列,yes為顯示


Window3
Window 屬性&方法

  • window.alert() method 顯示警訊

    • This method generates a dialog box that displays whatever text you pass as a parameter

    • A single OK button (whose label you cannot change) enables the user to dismiss the alert.


Window4
Window 屬性&方法

  • window.confirm() method 要求確認

    • presents two buttons (Cancel and OK)

    • returns a value: true if the user clicks OK or false if the user clicks Cancel

    • as a way to have a user make a decision about how a script progresses


Window5
Window 屬性&方法

  • window.prompt() method 要求輸入

    • displays a message that you set and provides a text field for the user to enter a response

    • Two buttons, Cancel and OK

    • canceling the entire operation or accepting the input typed in the dialog box.


Javascript

<script type="text/javascript">

var answer = prompt("請輸入您的姓名:", "?");

if (answer) {

alert("您好!\n" + answer);

} else {

alert("真可惜!");

}

</script>


Location
location 物件

  • location.href = "http://www.ywdeng.com";

    • 可以使用相對路徑

  • 在別的 window 中載入網址

    • newWindow.location.href = "http://www.ywdeng.com";


Navigator
navigator 物件

  • navigator.userAgent 瀏覽器

    • returns a string with numerous details about the browser and operating system

    • Internet Explorer 7 in Windows XP:

      • Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)

    • Firefox 1.5 on a Macintosh:

      • Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7


Navigator1
navigator 物件

  • navigator.appVersion 版本資訊

    • Firefox 3.0 on Windows Vista

      • 5.0 (Windows; zh-TW)

    • Internet Explorer 7.0 on Windows Vista


Detecting firefox x x
Detecting Firefox x.x

<script type="text/javascript"> //test for Firefox/x.x or Firefox x.x (ignoring remaining digits); if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){  var ffversion=new Number(RegExp.$1) // capture x.x portion and store as a number if (ffversion>=3)  document.write("You're using FF 3.x or above") else if (ffversion>=2)  document.write("You're using FF 2.x") else if (ffversion>=1)  document.write("You're using FF 1.x")}else document.write("n/a")</script>


Detecting ie x x
Detecting IE x.x

<script type="text/javascript">

//test for MSIE x.x;

if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){

var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number

if (ieversion>=8)

document.write("You're using IE8 or above")

else if (ieversion>=7)

document.write("You're using IE7.x")

else if (ieversion>=6)

document.write("You're using IE6.x")

else if (ieversion>=5)

document.write("You're using IE5.x")

}

else

document.write("n/a")

</script>


Document
document 物件

  • document 物件包含實際的網頁內容

  • document.forms[] 屬性

    • Array of <form> 表單的陣列

    • document.forms.length 表單數量

    • document.forms[0] 存取第一個表單

    • document.forms["formName"] 依名稱存取表單

    • document.formName依名稱存取表單


Document1
document 物件

  • document.images[] property

    • Array of <img> 圖片的陣列


Document2
document 物件

  • document.write() method 輸出字串

    • Append output to the document

    • Can include HTML tags

    • After a page loads, the browser’s output stream automatically closes

    • After that, any document.write() method issued to the current page opens a new stream that immediately erases the current page

    • 網頁載入完畢之後再以 document.write() 輸出,會產生新網頁


Document3
document 物件

  • document.close()

    • Your script should close the output stream when it finishes writing its content to the window (either the same window or another).


Document4
document 物件

  • 動態增刪節點

    • document.createElement() 建立新元素節點(element node)

    • document.createTextNode() 建立新的文字節點(text node)

    • elementNode.appendChild(childNode) 將節點掛進 DOM 樹



Drag drop
應用於 Drag & Drop

W3 Schools HTML5 Drag & Drop

將物件丟入 <div> 之後,在 <div> 裡 appendChild建立子節點用來掛被拖入的物件


Document5
document 物件

  • document.getElementById() method

    • The sole parameter of this method is a quoted string containing the ID of the element you wish to reference

      • document.getElementById("output")

    • The method returns a value, which you typically preserve in a variable for use by subsequent script statements:

      • var oneTable = document.getElementById("salesResults");


Javascript
事件

window 視窗

form 表單

keyboard 鍵盤

mouse 滑鼠

media 媒體


Window6
window 事件

  • onLoad載入完成時

  • onUnload關閉時

  • onBeforePrint列印前

  • onAfterPrint列印後

  • onResize大小改變時

  • onPageShow顯示時

  • onPageHide隱藏時

  • onError發生錯誤時


Javascript
form 事件

onFocus獲得焦點時

onBlur失去焦點時

onFormInput使用者輸入時

onChange資料改變時

onSubmit表單提交時


Keyboard
keyboard 事件

onKeyDown鍵被按下時

onKeyUp鍵彈起時

onKeyPress使用者按鍵時


Mouse
mouse 事件

  • onClick點擊時

  • onDblClick雙擊時

  • onDrag拖移時

  • onDrop拖移結束時

  • onDragStart拖移開始時

  • onDragEnd拖移結束時

  • onDragEnter拖移進入範圍時

  • onDragLeave拖移離開範圍時

  • onDragOver拖移經過上方時

  • onMouseDown左鍵按下時

  • onMouseUp左鍵放開時

  • onMouseMove滑鼠移動時

  • onMouseOut滑鼠移開時

  • onMouseOver滑鼠經過上方時

  • onMouseWhee滾輪

  • onScroll捲動時


Media
media 事件

onPlay播放時

onPause暫停時

onAbort取消播放

onEnded播放結束


Javascript
結語

  • 網頁分工

    • HTML 負責內容

    • CSS 負責長相

    • JavaScript 負責動作

  • JavaScript 語法和 JAVA 類似

    • 動態資料型別

    • 變數有效範圍

  • DOM: Document Object Model

  • BOM: Browser Object Model


Javascript
練習:開啟視窗 & 點不到的按鈕

按下『開啟視窗』以 window.open打開新的瀏覽器視窗

按下『關閉視窗』以window.close關閉瀏覽器視窗


Javascript
練習:開啟視窗 & 點不到的按鈕

  • 設定按鈕的 onMouseOver事件

    • 以隨機亂數 Math.random() 產生新座標

    • 以 window.moveTo(x, y) 移動視窗到新座標

  • 當使用者點到按鈕時

    • 以 prompt 或 confirm 詢問使用者是否要繼續玩?


Javascript18
練習:開啟視窗 & 點不到的按鈕視窗控制 JavaScript


Javascript
練習:開啟視窗 & 點不到的按鈕視窗控制 CSS


Html body
練習:開啟視窗 & 點不到的按鈕視窗控制 HTML BODY


Runningbutton html javascript init
練習:開啟視窗 & 點不到的按鈕RunningButton.html JavaScript init()


Runningbutton html javascript run
練習:開啟視窗 & 點不到的按鈕RunningButton.html JavaScript run()


Runningbutton html javascript gotme
練習:開啟視窗 & 點不到的按鈕RunningButton.html JavaScript gotMe()


Runningbutton html body
練習:開啟視窗 & 點不到的按鈕RunningButton.html BODY