10621 數位整合傳播 Week03 學習日誌
任課老師：
王曉璿
學 生：
林佑蓉
學 號：ADT106129
一、課程摘要
1.Webduino雲端平台
*以Google帳號登入或註冊一個帳號
2.Webduino Device 裝置管理:建立Webduino Smart IP與認證處理。
3.點選Webduino
Blockly 程式積木
*蒐集網路上任何Webduino
Smart 的教學資源、Youtube Webduino Smart作品案例，上傳至【03_1_Smart_作品彙編】
*上傳格式參考，學號_姓名_Smart作品案例.htm
1作品名稱:
2.作品介紹
3.作品網址:
4.【我的檔案】+(新增檔案)→取檔名，如:myLed
5.點選myLed，開啟空白的Blocky程式積木
6. 【參考官方三色Led製作介紹】
7.完成按鈕網頁
★Webduino
Smart開發版的基本流程整理★
對於硬體線路的部分，我還不太了解，直覺認為這張圖很重要，就貼上來了。(欸#)Webduino Smart的機體配置大致上跟Arduino相似，上學期在吳智鴻老師的課有學過Arduino，所以我想學習起來應該不難。
★Webduino
Blockly 相關工具基本類別架構彙編參考★
|
編號 |
名稱 |
說明 |
|
1 |
程式積木 |
變數、流程、基本功能(邏輯、迴圈、數學式、文字、列表、顏色)、進階功能(控制台、等待、數值轉換、鍵盤行為、語音聲控、語音朗讀、行動裝置)、開發版控制(開發板、資料傳輸、I/O腳位)、發光元件(LED燈、三色LED、OLED螢幕、LCD螢幕、全彩點矩陣)、輸入輸出(繼電器、蜂鳴器、按鈕開關、震動開關、搖桿、條碼機、電子磅秤、紅外線發射、紅外線接收、冷氣紅外線、MP3播放器)、環境偵測(超音波、溫濕度、細懸浮微粒、人體紅外線、聲音偵測、光敏(可變)電阻、土壤溼度偵測、三軸加速度計)、無線感應(RFID、GPS、LORA)、玩具及馬達(哇寶機器人、伺服馬達、自走車、樂高EV3)、資料庫(Firebase)、按鈕行為 |
|
2 |
產生編碼 |
從【程式積木】中，拖曳積木到此區進行組裝。點擊【JavaScript】可以觀看JavaScript的程式碼。 |
|
3 |
功能列 |
分別為：產生QRCode、打開程式碼編輯器繪出完整程式碼、查看裝置狀態、快速載入範例、網頁互動測試區、刪除所有積木、存檔並產生連結、執行。 |
|
4 |
網頁互動測試區 |
在功能列中，點選【網頁互動測試區】即可開啟此功能列。 |
二、課程網路資源
★Javascript 線上學習資源：
Eloquent
JavaScript
: 一本開放、免費且非常優質的 JavaScript 線上電子書，曾榮獲 Mozilla 與多人贊助，章節結構清楚明瞭，內容不拖泥帶水，各種格式的電子書、範例程式通通可以線上取得。
JavaScript
Promise 迷你书（中文版）: 一本由日文版翻譯過來的電子書，專注在 ES6 的 Promise 這個主題上，有非常完整的圖文範例與解說。
Train with Programming Challenges/Kata |
Codewars : 透過闖關的方式練成 JavaScript 達人，這網站在註冊的時候，會先讓你選擇程式語言，如果你選擇 JavaScript 的話，他會問你兩個 JavaScript 的問題，要你在線上改 Code，你必須回答正確才能讓你註冊帳號，所以你適合給已經入門的人練功。註冊成功後，可以點擊 Kata 開始練等級 (kyu)，他有八個困難等級，共有 1,158 關，每一關通過後還可以看到全世界其他人有哪些不同的解法，非常有趣。
JavaScript學習網站 :適合初學者、一般程度、進階者使用的中文網站。
三、課程重要指令語法摘要
★CSS★
.db5
{
font-size: 24px; /*文字大小*/
outline: none; /*邊框設置*/
margin: 0 10px 10px 0; /*間距*/
pointer-events: auto!important; /*阻止用戶點及動作坢生任何效果*/
}
/* hover 是在控制當滑鼠移至某元件時，某元件該如何反應*/
button:hover {
box-shadow: 2px 2px 5px #888; /*滑鼠移上按鈕時的陰影顏色*/
background-color: #4CAF50; /* Green */
color:
Green；
}
★Java Script★
JavaScript是所有Web開發人員 必須 學習的三種語言之一：
1. HTML來定義網頁的內容
2. CSS來指定網頁的佈局
3. 編寫網頁行為的JavaScript
<h2>JavaScript改變HTML內容</h2> <!--標題-->
<p id="demo1">緊來踹踹看!</p>
<button type="button" onclick='document.getElementById("demo1").innerHTML = "叫你踹你還真的踹R?!"'>踹?</button>
<button type="button" onclick='document.getElementById("demo1").innerHTML = "你心裡♥"'>猜猜我在哪裡 </button>
<h2>Do U
kno de wae?</h2> <!--標題-->
<!--設置圖案位置和按鈕的文字-->
<button
onclick="document.getElementById('myImage').src='https://d2g8igdw686xgo.cloudfront.net/26677248_15159542370_r.jpg'">I Kno</button>
<img
id="myImage" src="https://i.imgflip.com/22i1a3.jpg" style="width:200px">
<button
onclick="document.getElementById('myImage').src='https://i.imgflip.com/22i1a3.jpg
'">U kno?</button>
四、學習心得
這週上課的進度內容對我來說滿困難的，以前沒有接觸過程式語言是這學期
開始的，老實說我有點頭痛。上課的時候一直落後跟不上，必須回去多花時間
好好研讀，但自己的理解速度還是很慢。有點難過。不過我很慶幸自己在上學
期的時候，有去上院長開的課【物聯網(webduino)基本設計應用研習】，所以
在操作上不會覺得困難，順便把一些學過的部分複習了一遍。
超棒der~( ͡° ͜ʖ ͡°)