【心得】HTML5 WEB APP程式設計

今天上半堂課老師開了數個同學寫作業的例子，看到了很多不同的想法，有助於啟發不同的邏輯思考，印象最深刻的是用「餘數」的寫法，是老師上次提示的寫法，很簡潔又有效率。 function   myfunction ( x ) {      i  = ( i  +  x  +  cars . length ) %  cars . length ;      document . getElementById ( "demo" ). innerHTML  =  '<img src="'  +  cars [ i ] +  ' " height=300px" alt="Seal">'      } 自己的寫法是將「next」與「prev」個用一個函數控制。 function   next () {      i ++;      if  ( i  ==  cars . length ) {      i  =  cars . length  -  1 ;      }      document . getElementById ( "demo" ). innerHTML  =  '<img src="'  +  cars [ i ] +  ' " height=300px" alt="Seal">'      }      function   pre () {      i --;    ...

今天開始進入類似相簿的設計，將多張圖片利用兩個按鈕控制上一張、下一張，總共經歷了好幾個階段，慢慢優化程式碼。 1.使用兩種function，設定兩個按鈕，讓圖片切換 2.改為使用一種function，button將網址貼在function1的()內，此時網址當作參數傳遞，設定變數x為「字串變數」，讓x儲存圖片1的網址，getElementById中的圖片語法用' '切割成'<img' src" ' + x + ' alt=" "'三段。 < button      onclick = " myFunction1 ('圖片1網址 ') " > P U S H ! </ button > <!-- 注意單引號 --> < button   onclick = " myFunction1 ('圖片1網址 ') " > P U S H ! </ button > < script >      // 用x變數存起來"圖片1"      function   myFunction1 ( x ) {          document . getElementById ( "demo" ). innerHTML  =            '<img src="'  +  x  +  ' " height=300px" alt="Seal">' ;          // innerHTML:那段裡面替代     } </ script > 3.使用array技巧，將兩張...

今天是第一次上課，上課整體速度適中，目的是讓我們一開始有好的基礎才能繼續精進，上課教材不採用實體書本，而是使用線上資源「w3school」，學習到的內容可以隨時與時俱進，內容豐富，是個很實用的程式百科全書。 老師很有耐心地慢慢帶我們認識 HTML基本結構，主要分成head跟body，標題種類由大到小為h1到h6， 接著一步步介紹其他基本語法，超連結，可以分為絕對路徑及相對路徑，相對路徑麻煩的是檔案位置要確認好，我忘記把test 2放在跟test 1同一個資料夾就一直跑不出來，是個印象深刻的錯誤；區塊，是我今天印象最深刻的部分，本堂課使用到在網頁中常常見到的按鈕(buttom)，首先要在head區設定一個function，然後在body區設置一個區塊，並在區塊中設定與function相對應的id，本次做出的效果是點擊按鈕，本來區塊中的文字就會被function設定的文字取代，原來一個小小的按鈕須要做這麼多的設定；圖片，今天使用絕對路徑將網頁插入圖片，特別的是大小調整要符合比例僅輸入長或寬其一即可。 整堂課下來我覺得受益良多，沒有吸收不良的問題，每學會一點新語法就成就感多了一些，希望能一直保持對網頁設計的熱忱!