认识JavaScript及电脑程式设计的基本架构.ppt

認識JavaScript及 電腦程式設計的基本架構,認識 variables及data types,推薦參考書籍,Reed D., A Balanced Introduction to Computer Science, Pearson Prentice Hall, New Jersy, 2005. /reed/,課程內容,什麼是程式設計 HTML與JavaScript的差別 認識程式中的變數（ variables ） 第一次與讀者的互動：Prompt小視窗 嘗試自己寫JavaScript程式,程式設計的基本概念,有沒有好看的衣服,沒有, 繼續作 計概作業吧！,心情好嗎？,不好,有沒有錢,沒有,臉上有沒有痘子,有, 耶！ 出去約會！,沒有,HTML與JavaScript的差別,HTML語言的架構,JavaScript語言的架構,文字、圖形、聲音 及影像的資料與其 相關的HTML指令,輸出至 網頁瀏覽器,從網頁的某一物件 輸入 相關問題的資料,經過邏輯的判斷、 數學的計算或是 文字的編輯,在網頁的某一物件 輸出 程式執行結果,今日JavaScript程式的基本架構,經過邏輯的判斷、 數學的計算或是 文字的編輯,在網頁的某一物件 輸出 程式執行結果,document.write(firstname);,firstname =firstname + “is a teacher.”;,將資料存入記憶體 （記憶體的代號 即是變數）,var firstname =“Dave Li”;,Java Script基本概念,編譯器(complier) VS 直譯(interpreter) 當瀏覽器不支援 Java Script 時 Java Script 要放在哪裡 可以放在HTML文件的任何地方 同一個HTML文件內可以有一個以上的Java Script 碼 要注意瀏覽器是由上而下讀入HTML文件 JavaScript的語法： 每一指令結束時都需加上； 大小寫不同,JavaScript 的基本結構,將Java的語言程式直接內崁於Homepage的HTML中，讓瀏覽器執行其程式。, . . , JavaScript語言程式 當瀏覽器沒有支援Java Script的時候 ,開啟新的空白網頁,開啟FrontPage先將此空白網頁存於 桌面WWWjs-2，檔名為index.htm 將編輯模式改為HTML 在及之間插入右邊的JavaScript程式, document.write(“Hello, welcome to my Web page“); ,讓網頁更有禮貌, var firstname; firstname = prompt(“Please enter your first name“, “); document.write(“Hello “ +firstname + “, welcome to my Web page! “); ,Prompt小視窗的語法,字串變數 = prompt(輸出的訊息字串, 輸入資料的內設值); 先在文字方塊輸入提示問題的答案 在按下確定之後，文字方塊所輸入的文字（即使是數字）當成純文字（字串string）存在字串變數,儲存資訊 - 變數 （variables）,變數是所有電腦程式的基本記憶單位 變數的宣告：變數名必須以字母或底線開頭、其後可接字母、底線或數字 var Variablename = Initial_value var result; （不明變數） var result=10; （數值變數） var result= “abc” （字串變數） 不正確的變數名稱 2hotforU Salary$ Two words Johns,Weakly Typed JavaScript不需要明確地宣告每一變數的型態 變數的型態可隨資訊的不同而改變其型態 變數能夠讓JavaScript程式儲存資訊包括數字、文字、圖片、聲音或一個物件，以便JavaScript程式中使用或運算這些資訊。,變數內的資料型態字串,字串（string）：以單引號或雙引號包圍起來的字元集合 “fool“ handsome “Hello! Welcome ” 輸出時的特殊指令 ：斷行 ：新段落 如：,特殊字元 ：字串 “：字串 ：字串 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. Im coming, Im 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合理？,在傳統的數學AA+1代表的是01，矛盾！ 而在電腦的語言卻AA+1是 AA+1 A：原來在變數A所存的數值 A ：代表新的A，即將原來A的數值加上1,舉例：請將下列指令置於之前 var a=5; document.write(“a is “,a); a=a+1; document.write(“a+1 is “,a);,斷行符號：document.write的內容其實就是HTML語法，因此斷行符號即為，如 document.write(“a+1 is “,a, “ “);,文字與數值的混和加法,作業二： 試試看下列的加法，請將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寫出你的個人網址並請助教檢查，如 .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寫出你的個人網址並請助教檢查，如 .tw/u96250? 11月21日午夜十二點以前繳交滿分100分 11月28日午夜十二點以前繳交滿分80分 11月28日午夜十二點以後就不需要繳交，以0分計算,Window中常用的互動方式,alert( ) ： alert(輸出的訊息字串or變數);如： aler