交大思源產學資訊中心期中報告

Transcript 交大思源產學資訊中心期中報告

認識JavaScript及
電腦程式設計的基本架構
認識 variables及data types
推薦參考書籍

Reed D., A Balanced
Introduction to Computer
Science, Pearson Prentice
Hall, New Jersy, 2005.
http://www.prenhall.com/reed/
課程內容
什麼是程式設計
 HTML與JavaScript的差別
 認識程式中的變數（ variables ）
 第一次與讀者的互動：Prompt小視窗
 嘗試自己寫JavaScript程式

程式設計的基本概念
吃完晚飯，是否該
完成計概作業呢？
還是出去約會呢？
有沒有好看的衣服
沒有
有
心情好嗎？
不好
好
有沒有錢
沒有
有
 耶！
出去約會！
沒有
臉上有沒有痘子
有
 繼續作
計概作業吧！
HTML與JavaScript的差別

HTML語言的架構

JavaScript語言的架構
從網頁的某一物件
文字、圖形、聲音
及影像的資料與其
相關的HTML指令
輸入
相關問題的資料
經過邏輯的判斷、
數學的計算或是
文字的編輯
輸出至
網頁瀏覽器
在網頁的某一物件
輸出
程式執行結果
今日JavaScript程式的基本架構
將資料存入記憶體
（記憶體的代號
即是變數）
經過邏輯的判斷、
數學的計算或是
文字的編輯
var firstname =“Dave Li”;
firstname =firstname + “is a teacher.”;
在網頁的某一物件
輸出
程式執行結果
document.write(firstname);
Java Script基本概念
編譯器(complier) VS 直譯(interpreter)
 當瀏覽器不支援 Java Script 時 <noscript>
 Java Script 要放在哪裡

可以放在HTML文件的任何地方
同一個HTML文件內可以有一個以上的Java Script 碼
要注意瀏覽器是由上而下讀入HTML文件

JavaScript的語法：
每一指令結束時都需加上「；」
大小寫不同
JavaScript 的基本結構

將Java的語言程式直接內崁於Homepage的HTML中
，讓瀏覽器執行其程式。
<html>
<head>
…….
</head>
<body>
……….
</body>
<SCRIPT LANGUAGE="JavaScript">
JavaScript語言程式
</SCRIPT>
<NOSCRIPT>
當瀏覽器沒有支援Java Script的時候
</NOSCRIPT>
開啟新的空白網頁



開啟「FrontPage」先將此空
白網頁存於「桌面
\WWW\js-2」，檔名為「
index.htm」
將編輯模式改為「HTML」
在<body>及</body>之間插
入右邊的JavaScript程式
<center>
<SCRIPT
LANGUAGE="JavaScript">
document.write("Hello,
welcome to my Web page");
</SCRIPT>
</center>
讓網頁更有禮貌
<SCRIPT LANGUAGE="JavaScript">
var firstname;
firstname = prompt("Please enter your first name", "");
document.write("Hello " +firstname + ", welcome to my Web page! ");
</SCRIPT>
Prompt小視窗的語法

字串變數 = prompt(輸出的訊息字串, 輸入資料的內
設值);
先在文字方塊輸入提示問題的答案
在按下「確定」之後，文字方塊所輸入的文字（即使是數
字）當成純文字（字串string）存在「字串變數」
儲存資訊 - 變數（variables）

變數是所有電腦程式的基本記憶單位

變數的宣告：變數名必須以字母或底
線開頭、其後可接字母、底線或數字

 JavaScript不需要明確地宣告每一變數
的型態
 變數的型態可隨資訊的不同而改變其
 var Variablename [= Initial_value]

var result;
（不明變數）

var result=10;
（數值變數）

var result= “abc”
（字串變數）
 不正確的變數名稱

2hotforU

Salary$

Two words

John’s
Weakly Typed
型態

變數能夠讓JavaScript程式儲存資訊包
括數字、文字、圖片、聲音或一個物
件，以便JavaScript程式中使用或運算
這些資訊。
變數內的資料型態—字串

字串（string）：以單引號
或雙引號包圍起來的字元集
合
"fool"
'handsome'
“Hello! ‘Welcome‘ ”
輸出時的特殊指令
 <br>：斷行
 <p>：新段落
 如：
特殊字元
 \'：「'」字串
 \"：「〃」字串
 \\ ：「\」字串
 \t ：「Tab鍵」字串
 \b：「退後鍵」字串
 \r：「return鍵」字串
 \e：「Escape鍵」字串
 \f ：「from feed」字串
認識字串變數的用法

作業一：
下列的JavaScript指令希望能在網頁上歡迎語的下一行印出英文歌詞，
卻發生嚴重的語法錯誤，請幫忙修改之
document.write("
Gone are the days when my heart was young and gay,
Gone are my friends from the cotton fields away,
Gone from the earth to a better land I know,
I hear their gentle voices calling Old Black Joe.

I'm coming, I'm coming, for my head is bending low,
I hear their gentle voices calling Old Black Joe.");
變數內的資料型態—數值

數值（numeric）的類型有下列幾種：
整數： 255
16進位數字：0x456ff
8進位數字：0377
實數（浮點數字）：1.732
科學符號：1.5e+6 （＝1.5*106）
為什麼「A=A+1」合理？


在傳統的數學「A＝A+1」
代表的是「0＝1」，矛盾！
而在電腦的語言卻「A＝
A+1」是「「A＝A+1」
A：原來在變數A所存的數值

舉例：請將下列指令置於
</script>之前
var a=5;
document.write("a is ",a);
a=a+1;
document.write("a+1 is ",a);
A ：代表新的A，即將原來A
的數值加上1
斷行符號：document.write的內容其實就是HTML語法，因此
斷行符號即為<p>，如 document.write("a+1 is ",a, " <p> ");
文字與數值的混和加法

作業二：
試試看下列的加法，請將「s2」及「s3」印在作業一的下
一行。想想看為什麼會有不同算術的結果呢？
var n1=2;
var n2=10;
var t1=“apples”;
var t2=“There are”;
s2=n1+n2+t1;
s3=t2+n1+n2+t1;
字串加法練習

下列的JavaScript指令希望
能在作業二的下一行印出如
右框的中文詩句，但又出了
小毛病請修正之
var s1="你是那急馳的";
s1 =s1+"我就是你旁邊的風聲";
s1 =s1+"你是那負傷的";
s1 =s1+"我是那撫慰你的月光";
document.write(s1);
你是那急馳的
我就是你旁邊的風聲
你是那負傷的
我是那撫慰你的月光
字串加法遊戲

作業三:
「字串加法練習」的應用
(30%)
請用prompt詢問讀者，將右邊
詩句中的變數 fast 及 animal
的填寫在該位置，並印在網頁
上
fast的問句：請輸入速度最快
的事物
Animal的問句：請輸入最凶猛
的動物或飛禽
你是那急馳的[fast]
我就是你旁邊的風聲
你是那負傷的[animal]
我是那撫慰你的月光
Javascript Homework 2-1

請在BB寫出你的個人網址並請助教檢查，如
http://w3.nctu.edu.tw/~u96250???
將今天的上課所JavaScript網頁完成(包括互動式的問候語
、a=a+1、作業一、作業二及作業三），將「js-2」整個目
錄上傳至WWW，並在目錄框架中為其增加新的超連結（
30%）
作業一：特殊符號的印法（20%）
 試試看如何用JavaScript印出英文歌詞
作業二：文字與數值的混和加法（20%）
 請將「s2」及「s3」印在作業一的下一行
Javascript Homework 2-2

作業三:
「字串加法」的應用(30%)
請用prompt詢問讀者，將右邊
詩句中的變數 fast 及 animal
的填寫在該位置，並印在網頁
上
fast的問句：請輸入速度最快
的事物
animal的問句：請輸入最凶猛
的動物或飛禽
你是那急馳的[fast]
我就是你旁邊的風聲
你是那負傷的[animal]
我是那撫慰你的月光
作業繳交方式

請在今天（11月21日）午夜十二點前請在BB寫出你
的個人網址並請助教檢查，如
http://w3.nctu.edu.tw/~u96250???
11月21日午夜十二點以前繳交滿分100分
11月28日午夜十二點以前繳交滿分80分
11月28日午夜十二點以後就不需要繳交，以0分計算
Window中常用的互動方式

alert( ) ：
alert(輸出的訊息字串or變數);
如：
 alert("輸入的資料錯誤!!");
 alert(s1);

prompt( )：
prompt(輸出的訊息字串or變
數 , 輸入資料的內設值); 如：
 n1=prompt("妳有幾個蘋果
","1");

confirm( )：
confirm(輸出的訊息字串or
變數); 但與alert不同的是
confirm還可輸入true或false
的值，如：
 play=confirm("想玩個數
學遊戲嗎？")

交大思源產學資訊中心 期中報告

Transcript 交大思源產學資訊中心 期中報告

Directory

交大思源產學資訊中心期中報告

Transcript 交大思源產學資訊中心期中報告