More Related Content
Similar to 網頁入門聊天室工作坊20180721
網頁入門聊天室工作坊20180721
- 2. (ﾉ>ω<)ﾉ 2018/07/212 # # # #Unity 互動設計 主要使⽤用 Unity ，有開 發過展場投影、導覽介 ⾯面、互動遊戲等 網⾴頁開發 程式教育 前端學兩兩年年了了喔！後端 也有⼀一點涉略略，框架部 分使⽤用 Vue.js 以及 Node.js 程式家教經驗三年年，兒 童程式教育講師經驗兩兩 年年
- 6. (ﾉ>ω<)ﾉ 2018/07/21 安裝 VS Code 下載連結: https://code.visualstudio.com/ 安裝 Chrome 完成 Flex box Froggy 24個關卡 連結: http://flexboxfroggy.com/ 確保你電腦有⾜足夠三⼩小時多的電⼒力力以及連接上網路路 6
- 11. (ﾉ>ω<)ﾉ 2018/07/2111 電腦 1. 顯⽰示貓圖片 2. 寫出Swag 3. … 瀏覽器 Swag HTML
- 13. (ﾉ>ω<)ﾉ 2018/07/21 1. Img 裡⾯面會包著圖片連結 2. Span 裡⾯面會包著⽂文字 3. ⼀一組符號為 < > </ > 13
- 15. (ﾉ>ω<)ﾉ 2018/07/2115 <cat> </cat> 就說是貓了了 開始標籤 (tag) 結束標籤 (tag)
- 16. (ﾉ>ω<)ﾉ 2018/07/2116 <短腿><電臀> 柯基 </電臀> </短腿>
- 19. (ﾉ>ω<)ﾉ 2018/07/2119 1. 新增檔案 2. 儲存成 index.html 3. 輸入 html 選 html:5 4. 未知符號出現
- 21. (ﾉ>ω<)ﾉ 2018/07/21 被包住的⼈人要往後縮四格 (按⼀一下 Tab 剛剛好)，若若包得越 深，你就要退越後⾯面。 21 <短腿> <電臀> 柯基 </電臀> </短腿>
- 23. (ﾉ>ω<)ﾉ 2018/07/21 <h1> </h1> ⼀一級標題 <hr> ⽔水平線 <p> </p> ⽂文字段落落 <iframe src=“ 網址 ”> </iframe> 嵌入網⾴頁 <img src=“ 圖片網址 ” > 圖片 <a href=“ 放入網址網址 ” > 連結⽂文字 </a> 連結 23
- 24. (ﾉ>ω<)ﾉ 2018/07/21 關鍵字： W3C School HTML Tags 連結： https://www.w3schools.com/tags/tag_iframe.asp W3C school 24
- 25. (ﾉ>ω<)ﾉ 2018/07/2125 <科基 name=“ 短短 ”> </柯基> (attribute) attribute，為標籤的屬性，可以更更詳細的定義此標籤的意義
- 26. (ﾉ>ω<)ﾉ 2018/07/21 <div> </div> 區塊元素 不管內容物，我就是跟我的 上⼀一層⼀一樣寬。 26 <span> </span> ⾏行行內元素 只跟內容物⼀一樣寬，不多不 少。 內容 內容 內容 內容 內容 內容
- 27. (ﾉ>ω<)ﾉ 2018/07/2127 <健樺 class=“老師 男⽣生 戴眼鏡”> </健樺> class, id class：代表種類，種類可以重複 id：如同你的⾝身分證字號⼀一樣，(道德上來來說) 不能重複 <雞丁 class=“男⽣生 帥”> </雞丁> <健樺 id=“學⽣生Ａ”> </健樺> <雞丁 id=“學⽣生Ｂ”> </雞丁>
- 29. (ﾉ>ω<)ﾉ 2018/07/21 CSS 29 寫在標籤內 <科基 style=“ CSS內容 ”> </柯基>
- 32. (ﾉ>ω<)ﾉ 2018/07/21 CSS 最重要的觀念念就是選擇，上⾯面是 選擇器 所需使⽤用的 符號，這樣才可以選取 HTML 的元素 (ex. <p>狗狗</p>) 來來進⾏行行樣式設定。 32 class . id # tag tag
- 33. (ﾉ>ω<)ﾉ 2018/07/21 CSS 的構成分為兩兩部分， 選擇器 以及 樣式設定，然⽽而選擇 器就是要告訴瀏覽器，CSS中所設定的樣式數值，要設定給 哪⼀一個元素 (element)。 33 .dog { color: red; } Class 選擇器 冒號 分號 設定值要設定之屬性
- 35. (ﾉ>ω<)ﾉ 2018/07/21 color: red; 直接指定顏⾊色 color: #FF0000; 使⽤用⼗十六進位⾊色碼指定 color: rgba(255, 0, 0, 0); 使⽤用⼗十進位⾊色碼指定 font-size: 10px; 字體⼤大⼩小 font-weight: 300; 字體粗細 text-align: center; 對⿑齊⽅方式 35
- 36. (ﾉ>ω<)ﾉ 2018/07/21 <div class=“box”> </div> .box { width: 100px; 寬度 height: 100px; ⾼高度 background-color: red; 背景顏⾊色 border: solid 3px #324373; 邊框設定 border-radius: 50px; 邊框圓⾓角 } 36 執⾏行行結果
- 39. (ﾉ>ω<)ﾉ 2018/07/21 接下來來會有⼤大量量的ＣＳＳ，然⽽而ＣＳＳ博⼤大精深，所以請 善⽤用我們提供的快速ＣＳＳ包，當你跟不上時就⾺馬上貼上， ⾺馬上補上速度以及經驗的缺⼝口！ 39
- 42. (ﾉ>ω<)ﾉ 2018/07/21 jQuery 是 JavaScript 的框架，簡單來來說就是讓你寫 JS 更更 輕鬆愉快的⼯工具啦！ jQuery 42
- 44. (ﾉ>ω<)ﾉ 2018/07/21 jQuery in CDN，把下⽅方整串串貼到 <head> </head> 之中 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin=“anonymous"></script> CDN 就像是有⼈人把檔案放在雲端，你連線過去下載來來使⽤用 Head jQuery 44
- 46. (ﾉ>ω<)ﾉ 2018/07/21 document 代表了了你的 html 檔案，意思是說當 html 載入 完成時，才會執⾏行行你的程式碼，如果還沒找入完成，你就 沒辦法控制你想要的元素了了！ 46 $(document).ready(function() { //你的程式碼 }); jQuery
- 48. (ﾉ>ω<)ﾉ 2018/07/21 此次實作的⾴頁⾯面切換是將 1. 還沒進入的⾴頁⾯面隱藏 2. 所在的⾴頁⾯面顯⽰示 不過⼀一般來來說會將不同⾴頁 ⾯面分成不同 html 檔案，再 使⽤用 <a> 標籤進⾏行行跳轉， 但是今⽇日不討論此⽅方法。 48 登入 登出
- 49. (ﾉ>ω<)ﾉ 2018/07/21 $(“ .start ”).on(“click”, function(){ //click 事件發⽣生時，我們要做的事情 }); 49 我們對 class 為 start 的元素進⾏行行監聽，當被按下時，就會 執⾏行行我們寫好的功能。
- 50. (ﾉ>ω<)ﾉ 2018/07/21 $(“ .start ”).on(“click”, function(){ $(“.login”).hide(); $(“.chatroom”).fadeIn(); }); 50 登入 登出
- 51. (ﾉ>ω<)ﾉ 2018/07/21 $(“ .leave ”).on(“click”, function(){ $(“.login”).fadeIn(); $(“.chatroom”).hide(); }); 51 登入 登出
- 59. (ﾉ>ω<)ﾉ 2018/07/21 display: flex; //設定為彈性盒⼦子！ justify-content: space-around; //控制主要軸的對⿑齊 align-items: center; //控制次要軸的對⿑齊 flex-direction: column; //設定主要軸向(預設為 row) 59 讓元素完全置中或者⼀一些其他的排版需且，都是不好處理理 的，但是有了了flexbox，考試都考⼀一百分了了呢！
- 60. (ﾉ>ω<)ﾉ 2018/07/21 上下左右置中 Flexbox groggy 60 .big { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #6B5B7A; } .small { width: 50px; height: 50px; background-color: #F67180; }
- 61. (ﾉ>ω<)ﾉ 2018/07/21 ⽔水平分散對⿑齊 Flexbox groggy 61 .big { width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center; background-color: #6B5B7A; } .small { width: 50px; height: 50px; background-color: #F67180; }
- 62. (ﾉ>ω<)ﾉ 2018/07/21 垂直分散對⿑齊 Flexbox groggy 62 .big { width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center; flex-direction: column; background-color: #6B5B7A; } .small { width: 50px; height: 50px; background-color: #F67180; }
- 63. (ﾉ>ω<)ﾉ 2018/07/21 往前靠且上下置中 Flexbox groggy 63 .big { width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center; background-color: #6B5B7A; } .small { width: 50px; height: 50px; background-color: #F67180; }
- 64. (ﾉ>ω<)ﾉ 2018/07/21 往後靠且上下置中 Flexbox groggy 64 .big { width: 100%; height: 100%; display: flex; justify-content: flex-end; align-items: center; background-color: #6B5B7A; } .small { width: 50px; height: 50px; background-color: #F67180; }
- 79. (ﾉ>ω<)ﾉ 2018/07/21 使⽤用範本 79 顯⽰示訊息的⽅方法 1. 按下送出鈕 2. 讀取輸入框的內⽂文 3. 將內⽂文置換到範本(對⽅方)中 4. 複製範本的html並且新增到對話 框內
- 94. (ﾉ>ω<)ﾉ 2018/07/21 var msgDbRef = firebase.database().ref(‘/msg'); // 連結到 /msg 路路徑下 msgDbRef.set( { name: “OAO” } ); //將路路徑下的資料設定成你送進去的資料 var newMsgRef = msgDbRef.push(); newMsgRef.set( { name: yourName, msg: myMsg, head: selectedHead } ); //把路路徑當作⼀一個清單，⼀一次新增⼀一筆資料進去 94
- 95. (ﾉ>ω<)ﾉ 2018/07/21 var msgDbRef = firebase.database().ref('/msg'); msgDbRef.on('child_added', function(data) { //每當參參考的路路徑的資料被新增，就會被呼叫，⼀一開始也會被呼叫⼀一次 }); msgDbRef.on('child_changed', function(data) { //每當參參考的路路徑的資料被修改，就會被呼叫 }); msgDbRef.on('child_removed', function(data) { //每當參參考的路路徑的資料被刪除，就會被呼叫 }); 95