《认识JavaScript及电脑程式设计的基本架构.ppt》由会员分享，可在线阅读，更多相关《认识JavaScript及电脑程式设计的基本架构.ppt（23页珍藏版）》请在三一办公上搜索。
1、認識JavaScript及電腦程式設計的基本架構,認識 variables及data types,推薦參考書籍,Reed D.,A Balanced Introduction to Computer Science,Pearson Prentice Hall,New Jersy,2005.http:/,課程內容,什麼是程式設計HTML與JavaScript的差別認識程式中的變數（variables）第一次與讀者的互動：Prompt小視窗嘗試自己寫JavaScript程式,程式設計的基本概念,有沒有好看的衣服,沒有,繼續作計概作業吧！,心情好嗎？,不好,有沒有錢,沒有,臉上有沒有痘子,有,耶！出
2、去約會！,沒有,HTML與JavaScript的差別,HTML語言的架構,JavaScript語言的架構,文字、圖形、聲音及影像的資料與其相關的HTML指令,輸出至網頁瀏覽器,從網頁的某一物件輸入相關問題的資料,經過邏輯的判斷、數學的計算或是文字的編輯,在網頁的某一物件輸出程式執行結果,今日JavaScript程式的基本架構,經過邏輯的判斷、數學的計算或是文字的編輯,在網頁的某一物件輸出程式執行結果,document.write(firstname);,firstname=firstname+“is a teacher.”;,將資料存入記憶體（記憶體的代號即是變數）,var firstname
3、=“Dave Li”;,Java Script基本概念,編譯器(complier)VS 直譯(interpreter)當瀏覽器不支援 Java Script 時 Java Script 要放在哪裡可以放在HTML文件的任何地方同一個HTML文件內可以有一個以上的Java Script 碼要注意瀏覽器是由上而下讀入HTML文件JavaScript的語法：每一指令結束時都需加上；大小寫不同,JavaScript 的基本結構,將Java的語言程式直接內崁於Homepage的HTML中，讓瀏覽器執行其程式。,.,JavaScript語言程式當瀏覽器沒有支援Java Script的時候,開啟新的空白網頁
4、,開啟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(輸出的訊息字串,輸入資料的內設值);先在文字方塊
5、輸入提示問題的答案在按下確定之後，文字方塊所輸入的文字（即使是數字）當成純文字（字串string）存在字串變數,儲存資訊-變數（variables）,變數是所有電腦程式的基本記憶單位變數的宣告：變數名必須以字母或底線開頭、其後可接字母、底線或數字var Variablename=Initial_valuevar result;（不明變數）var result=10;（數值變數）var result=“abc”（字串變數）不正確的變數名稱2hotforUSalary$Two wordsJohns,Weakly TypedJavaScript不需要明確地宣告每一變數的型態變數的型態可隨資訊的不同而
6、改變其型態變數能夠讓JavaScript程式儲存資訊包括數字、文字、圖片、聲音或一個物件，以便JavaScript程式中使用或運算這些資訊。,變數內的資料型態字串,字串（string）：以單引號或雙引號包圍起來的字元集合foolhandsome“Hello!Welcome”輸出時的特殊指令：斷行：新段落如：,特殊字元：字串：字串：字串t：Tab鍵字串b：退後鍵字串r：return鍵字串e：Escape鍵字串f：from feed字串,認識字串變數的用法,作業一：下列的JavaScript指令希望能在網頁上歡迎語的下一行印出英文歌詞，卻發生嚴重的語法錯誤，請幫忙修改之document.write
7、(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.);,變數內的資料型態數
8、值,數值（numeric）的類型有下列幾種：整數：25516進位數字：0 x456ff 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語法，因此斷行符號即為，如 documen
9、t.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);,你是那急馳的
10、我就是你旁邊的風聲你是那負傷的我是那撫慰你的月光,字串加法遊戲,作業三:字串加法練習的應用(30%)請用prompt詢問讀者，將右邊詩句中的變數 fast 及 animal 的填寫在該位置，並印在網頁上fast的問句：請輸入速度最快的事物Animal的問句：請輸入最凶猛的動物或飛禽,你是那急馳的fast我就是你旁邊的風聲你是那負傷的animal我是那撫慰你的月光,Javascript Homework 2-1,請在BB寫出你的個人網址並請助教檢查，如 http:/w3.nctu.edu.tw/u96250?將今天的上課所JavaScript網頁完成(包括互動式的問候語、a=a+1、作業一、作業
11、二及作業三），將js-2整個目錄上傳至WWW，並在目錄框架中為其增加新的超連結（30%）作業一：特殊符號的印法（20%）試試看如何用JavaScript印出英文歌詞作業二：文字與數值的混和加法（20%）請將s2及s3印在作業一的下一行,Javascript Homework 2-2,作業三:字串加法的應用(30%)請用prompt詢問讀者，將右邊詩句中的變數 fast 及 animal 的填寫在該位置，並印在網頁上fast的問句：請輸入速度最快的事物animal的問句：請輸入最凶猛的動物或飛禽,你是那急馳的fast我就是你旁邊的風聲你是那負傷的animal我是那撫慰你的月光,作業繳交方式,請在
12、今天（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(想玩個數學遊戲嗎？),
