认识javascript及电脑程式设计的基本架构.pptVIP

認識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 時 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） 變數是所有電腦程式的基本記憶單位 變數的宣告：變數名必須以字母或底線開頭、其後可接字母、底線或數字 var Variablename [= Initial_value] var result; （不明變數） var result=10; （數值變數） var result= “abc” （字串變數） 不正確的變數名稱 2hotforU Salary$ Two words John’s Weakly Typed JavaScript不需要明確地宣告每一變數的型態 變數的型態可隨資訊的不同而改變其型態 變數能夠讓JavaScript程式儲存資訊包括數字、文字、圖片、聲音或一個物件，以便JavaScript程式中使用或運算這些資訊。 變數內的資料型態—字串 字串（string）：以單引號或雙引號包圍起來的字元集合 fool handsome “Hello! ‘Welcome‘ ” 輸出時的特