切入角度 評論語氣都很有理 已經轉給朋友! 感謝站長分享觀點
期待你更多分享 包含面試 作品集 真的超級勵志的哦 !! 恭喜壓 當初就一路看你認真寫作業 超讚
那我先拋出其中一個最近的議題好了 朋友去職訓局上課 其中有丙級證照考DW的考試 基本上他已經學過CSS HTML JS 手刻的技術了 不過老師還是建議他好好準備丙級證照 畢竟政府的課程 有沒有成效 似乎學員考證照就是指標 不過他深深知道這對於工作沒有幫助 在這樣的情況下 該怎麼取捨 是否可以直接放棄練習DW 把時間拿來研究更有意義的前端框架 這算是我最近也還在想的一個議題 畢竟他也已經參加了課程 不過時間成本又是一個昂貴的東西 也許站長可以從一些新的思路 去分享會作出怎樣子的決定? 我相信未來也會有人去報名相關課程 也會有這種老舊的DW課程的XDDD
另外預告一下 我也有很多idea的文章可以撰寫 各位可以期待我分享~d(･∀･)b`
我有很多問題可以問欸XD 原本想說不要太多問題 自己研究 有注意到站長最近滿樂意經營 活絡本站的 看起來又可以好好來寫寫文章 討論一些有趣的問題囉~~~
 [連結點這邊](https://online.visual-paradigm.com/tw/diagrams/features/flowchart-tool/) ## 介紹  超級好用，好用到爆，基本上我沒有花錢，也不太確定他是否要花錢 但看起來免費就可以使用了 超級方便的！ 大推！
## 目錄 ##### [【前端動手玩創意】等待的轉圈圈效果 (1)](https://ithelp.ithome.com.tw/articles/10311621) ##### [【前端動手玩創意】google五星評分的星星(2)](https://ithelp.ithome.com.tw/articles/10311643) ##### [【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難度頗高，想挑戰再進來！)](https://ithelp.ithome.com.tw/articles/10311672) ##### [【前端動手玩創意】一句CSS做出好看的hero section！(4)](https://ithelp.ithome.com.tw/articles/10311691) ##### [【前端動手玩創意】創造一個Skill bar(5)](https://ithelp.ithome.com.tw/articles/10311756) ##### [【前端動手玩創意】遮蔽廣告(D卡未登入)腳本、自定義新增名單(6)](https://ithelp.ithome.com.tw/articles/10311999) ##### [【前端動手玩創意】前端canvas截圖的招式！竟然有三招，可存成SVG或PNG (7)](https://ithelp.ithome.com.tw/articles/10312001) ##### [【前端動手玩創意】讓你的PDF檔案更難被抓取(8)](https://ithelp.ithome.com.tw/articles/10312046) ##### [【前端動手玩創意】哇操！你敢信？花式寫todo-list，body裡面一行都沒有也能搞？(9)](https://ithelp.ithome.com.tw/articles/10312056) ##### [【前端動手玩創意】卡片製作，才不是！是卡片製作器！(10)](https://ithelp.ithome.com.tw/articles/10312066) ## 前情提要 各位知道jquery，這個JS的函式庫提供我們非常多實用的方法，包裝好給我們用。 其中底層邏輯都還是跑不出js原生的概念， 今天就讓我們用原生JS的類來創造一些Jquery幫我們打包好的方法吧！ 來掀開它的奧秘底牌。 ## 程式碼內容 假設我們要創造一個叫做Dquery的東西，該怎麼做呢： ``` class Dquery { constructor(selector) { this.elements = document.querySelectorAll(selector); //噴出DOM來 } css(property, value) { for (let i = 0; i < this.elements.length; i++) { this.elements[i].style[property] = value; } return this; //修改style } addClass(className) { for (let i = 0; i < this.elements.length; i++) { this.elements[i].classList.add(className); } return this; //增加class } removeClass(className) { for (let i = 0; i < this.elements.length; i++) { this.elements[i].classList.remove(className); } return this; } on(eventType, callback) { for (let i = 0; i < this.elements.length; i++) { this.elements[i].addEventListener(eventType, callback); } return this; //監聽事件的運作 } html(htmlString) { if (typeof htmlString === 'undefined') { return this.elements[0].innerHTML; } else { for (let i = 0; i < this.elements.length; i++) { this.elements[i].innerHTML = htmlString; } return this; } } } function $(selector) { return new Dquery(selector); } ``` ## 觀念筆記 其實概念就是先把底層邏輯刷過一遍 最後return this 就達成jquery的效果了唷。 ## 心得 Jquery曾經非常流行，儘管後來式微了，卻還是有一批死忠的粉絲鍾愛著它的簡便， 事實上它就是JS，所以討人喜歡也是正常的， 這次學會了用ES6類的概念，會讓我們在前端的功力大幅提升唷！！
## 前情提要 最近在網上想找一些學習前端的夥伴，發現要組個討論會非常的難。 是因為沒有人學前端嗎？不是，與事實相反，非常多人學。那麼是因為大家程度太差嗎？ 也不是，其實自學的人吸收能力都不錯。 那到底是因為什麼，其實是源自於一個魯蛇心態：「貶低自己、迂迴溝通」 ## 觀念解說 什麼意思？貶低自己？沒錯，很多前端新手當要進行自我介紹或是參加討論， 都因為自尊心太高，要幫自己打上一堆預防針：「我還是菜鳥，我什麼都不會。」 當人家問你說寫過什麼，就說：「都只是一些人家的作業，我沒有做什麼耶」 你以為謙虛是一種美德，事實上這種噁心的做作，只是降低大家討論進步的溝通效率， 要人家稱讚你老半天說：「不會啦！很棒，有東西就拿出來」 你才願意把你自己的作品連結丟出來。 事實上你明明就有自己嘗試做過一些東西，一定要迂迴老半天才願意拿出來，真的太假掰。 ## 健康的心態 那麼前端的新手應該具備什麼心態呢？我們要培養的不是假裝謙虛：「我什麼都不會啦，只是照著做」 「就看網路課程而已，我只是剛摸過js」 「對框架沒概念耶，只是看過VUE的課程。」 就省去這些假掰的噁心詞彙，你學過什麼就說出來，把自己會的東西講出來， 明明學過，又不願意老實講，真的很糟糕。 這不僅是對自己的尊重也是尊重別人。 別人沒有義務必須要每一次的對話都要先稱讚你，才有辦法跟你討論正事。 格局多大，完全建立在你自己的心態健康不健康之上。 做過什麼作品，就算是抄課程上的那就拿出來講，表達出來才有辦法討論。 不是明明你也想要找學習夥伴討論、交流，真的要互相討論的時候才拿出來當作藉口。 那你到底是想要進步，還是你只是想要人家安慰？ ## 總結心得 我不知道這是源自於人格上的自卑，又或是東方文化容易被打擊所培養的自我防禦意識。 但在前端程式的交流，真的要練習培養大方的態度， 實事求是，不需要你把自己包裝的多厲害，只要不要你裝模作樣說自己什麼都不會、 什麼都沒寫過， 問了老半天才要把你明明偷偷嘗試過的五種作品拿出來，才發現你bs5也碰過、VUE也學了， 那講了老半天的預防針到底有什麼意義？ 請培養健康正確的心態，不要看不起自己，也請尊重別人跟你溝通的對談成本。 真的沒有人有義務一路上安慰你，想要討論交流，你必須擁有正確大方地表達、人格態度。
[【前端動手玩創意】哇操！你敢信？花式寫todo-list，body裡面一行都沒有也能搞？](https://ithelp.ithome.com.tw/articles/10312056) ## 前情提要 如果說蟑螂怕拖鞋，老鼠愛大米，任何事物都有相生相剋的道理，那麼前端最害怕什麼呢？ 恐怕就是todo-list。 這應該是前端的四大惡夢之一，並不是因為太難了，而是因為太簡單而且太無聊了， 不只無聊，還是每次教學都必須寫的一個磨難，簡直是瞬間殺死靈魂中隊前端的愛。 今天要來用不同風格寫出todo-list，把代辦事項寫出新滋味。 body裡面一行都沒有也能搞？ 就是可以搞，讓我們馬上來欣賞這段有特別滋味的玩法！ε(*´･∀･｀)зﾞ ## 程式碼 ``` <!DOCTYPE html> <html> <head> <title>Todo List</title> </head> <body></body> <script> //渲染DOM AddHtml(); //資料內容 function AddHtml() { const Data = { h1: "Todo List", button: "Add", }; //主體的DOM const html = `<h1>${Data.h1}</h1> <input type="text" id="input" /> <button onclick="CheckNull()">${Data.button}</button> <ul id="list"></ul>`; //渲染至畫面上 document.body.innerHTML += html; } //邏輯確認:是否有輸入值 function CheckNull() { if (!input.value.trim("")) { return; } else { AddItem(); } } //新增代辦事項 function AddItem() { const li = `<li>${document.getElementById("input").value}</li>`; document.getElementById("list").innerHTML += li; input.value = ""; } </script> </html> ``` [可以貼到try it的地方執行看看效果](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_submit) ## 觀念筆記 所謂MVC架構就是模型、視圖、控制，背後其實有一個元素貫串任何程式，那就是：「邏輯」 每當你要下手寫一個程式卻不知道怎麼開始動手， 那就是邏輯沒有通順。 網頁不外乎就是畫面，以及資料，還有使用者的操作。 對於todo-list來說就是一個簡單的input畫面，使用者輸入的資料，點下按鈕送出的操作。 這段程式特地不寫任何一行body裡面的東西， 玩弄了一般人對於程式區分的概念。 用模板符的特性讓所有一切交給變數與函式處理，最後三個function： AddHtml、CheckNull、AddItem完美演繹了代辦清單這個網頁所需要構成的底層邏輯。 必須先加入畫面，然後確認使用者操作的條件，最後新增資料。 這樣子的流程對於新手或許不習慣，但是以邏輯面來看比一般人的寫法清晰許多。 這也是未來框架導入後，對資料流更敏感的培養練習。 ## 心得 無聊的todo-list竟然可以搞成這樣！？ 真的是太有趣了(๑╹◡╹๑)！ 原來前端的惡夢也可以變成寫不同風格的天堂，沒錯，寫程式就是這麼千變萬化！ 重點是背後的邏輯抓到了，那麼想要怎麼寫，真的就是藝術的發揮。 請繼續關注， 跟著我們這個系列繼續動手玩創意！！未來還有更多更新鮮的花招呢(｡◕∀◕｡)
通知那邊出現 但好像處理過了 站長有空也可以分享這怎麼解決 目前難道是人工(?
## 前情提要 逛論壇或網站常常有惱人的蓋板廣告，要馬就是要你登入、註冊， 要馬就是搞一堆課程的販售廣告， 對重視使用者體驗的人來說，真的是一場噩夢！ 為了解決這個問題，我模擬了AdBlock的其中一個功能，刪除頁面上的元素！ 乾乾淨淨才是王道阿。 ## 效果 按下ctrl+Q啟動刪除元素模式：  被選取的會加上邊框色彩，讓人確認是否要刪除：  點選確認後：  煩人的元素就此消失在這個永恆的宇宙裡。 ## 觀念筆記 ### 套件一：toastr ```javascript= //toast.js cdn匯入 const toastJS = ` <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>` $('body').append(toastJS); ```  [測試效果反應網站](https://codeseven.github.io/toastr/demo.html)  [[十分鐘學習] toastr - 簡易提示訊息](https://ithelp.ithome.com.tw/articles/10197861) ### 套件二：SweetAlert2 ```javascript= //設定cdn使用Sweetalert套件 let Sweetalert2=`<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>` $('html').append(Sweetalert2) ```   有提供很多API範例，還可以自己定義可愛的小動物XD [官方網站](https://sweetalert2.github.io/) ### 監聽鍵盤組合鍵 ``` document.addEventListener('keydown', function(e){ if(e.which==81 && e.ctrlKey==true){ //..... } ``` ### Object.assign 動態修改樣式  [用JS動態修改CSS的三種寫法，花式JS玩弄樣式，嚇死你的同事！](https://codelove.tw/@JsLover0018/post/Ja64Kx) ## 油猴程式碼 ```javascript= // ==UserScript== // @name 刪除廣告元素 // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match *://*/* // @require https://code.jquery.com/jquery-3.6.3.min.js // @icon https://www.hexschool.com/ // @grant none // ==/UserScript== (function() { //--------------------------------------- // 宣告變數 let set let Check = true; let List=[] //設定選取的border色彩效果 let styleNeon = `@keyframes neon-color { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }` $('style:last').append(styleNeon) //設定cdn使用Sweetalert套件 let Sweetalert2=`<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>` $('html').append(Sweetalert2) //使用者點選某個元素 執行刪除元素function function SetDeleteEl(e){ e.preventDefault(); set=e.target.class console.log(set) const border={ border:"4px dotted red" } const Neon={ animation: "neon-color 2.5s linear infinite" } const NoBorder={ border:"none" } const StopNeon={ animation: "" } Object.assign(e.target.style,border) Object.assign(e.target.style,Neon) //e.target.remove() if (Check==true){ Swal.fire({ title: '確定要刪除這個元素?', showDenyButton: true, showCancelButton: false, confirmButtonText: '確認', denyButtonText: `取消`, }).then((result) => { /* Read more about isConfirmed, isDenied below */ if (result.isConfirmed) { e.target.remove() List.push(e.target.className) localStorage.setItem('List',List); Check=false; Swal.fire('成功刪除此元素!', '', 'success') } else if (result.isDenied) { Check=false; Swal.fire('動作已取消', '', 'info') Object.assign(e.target.style,NoBorder) Object.assign(e.target.style,StopNeon) }; }); } //選取流程結束後 解開選取流程的事件綁定 $('body').unbind('click',SetDeleteEl) } //toast.js cdn匯入 const toastJS = ` <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>` $('body').append(toastJS); // 當使用者按下Ctrl+Q 就執行主程序 document.addEventListener('keydown', function(e){ if(e.which==81 && e.ctrlKey==true){ RemoveListItem(); toastr.options = { // 參數設定[註1] "closeButton": false, // 顯示關閉按鈕 "debug": false, // 除錯 "newestOnTop": false, // 最新一筆顯示在最上面 "progressBar": false, // 顯示隱藏時間進度條 "positionClass": "toast-bottom-right", "preventDuplicates": false, // 隱藏重覆訊息 "onclick": null, // 當點選提示訊息時，則執行此函式 "showDuration": "300", // 顯示時間(單位: 毫秒) "hideDuration": "1000", // 隱藏時間(單位: 毫秒) "timeOut": "2000", // 當超過此設定時間時，則隱藏提示訊息(單位: 毫秒) "extendedTimeOut": "1000", // 當使用者觸碰到提示訊息時，離開後超過此設定時間則隱藏提示訊息(單位: 毫秒) "showEasing": "swing", // 顯示動畫時間曲線 "hideEasing": "linear", // 隱藏動畫時間曲線 "showMethod": "fadeIn", // 顯示動畫效果 "hideMethod": "fadeOut" // 隱藏動畫效果 } toastr.success( "已開啟刪除元素模式！" ); $('body').on('click',SetDeleteEl) Check=true }}) function RemoveListItem(){ if (localStorage.getItem('List')!=null){ item=localStorage.getItem('List').split(',') for (i=0;i<item.length;i++){ item[i]='.'+item[i] item[i]=item[i].replaceAll(' ','.') try{ document.querySelector(item[i]).remove()} catch{} } // item='.'+item // item=item.replaceAll(' ','.') // document.querySelector(item).remove() } } //-------------------------------------------------------- })(); ``` ## 心得 短短150行左右的程式碼，就寫得好辛苦！（汗 過去寫過很多次類似的東西，所以基本上沒有卡關的地方， 只是設計邏輯、嘗試的過程還是比想像的還要耗精神( ´•̥̥̥ω•̥̥̥ ) 但寫出來比過去快很多，也比過去好看超級多的。 給自己一個讚讚！ 重新把localstorge複習一遍，Object.assign、套件使用等。 算是一個確確實實的實力鞏固過程。 ## 延伸 未來可以新增控制黑名單元素的UI。 可以新增、刪除，看有哪些元素被列入要刪除的黑名單。
## 前情提要 還在寫行內樣式醜醜的嗎？教你不用寫css檔案，使用javascript來動態修改樣式的招數！ 這樣子處理的層次又更不一樣， 前端之路有你有我，馬上來看看這是怎麼完成的。 ## 要修改CSS怎麼做呢？物件儲存 首先樣式寫成物件 ```css= const die={ display:"none" } ``` 為什麼要寫成物件呢？修改一種，可能看不出來，修改很多樣式就能感受到， 物件這個儲存方式是有它特別的美感與好處的。 下面我來舉例： ```css= const wrapperStyle = { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: '350px', backgroundColor: '#261d4a', borderRadius: '5px', transition: 'box-shadow .5s ease', overflow: 'hidden' }; ``` ## 語法介紹 Object.assign 使用範例 `Object.assign(element.style,Style)` element是你要修改的元素，Style是樣式寫的object 這是修改一個的情況，當像是上面很多屬性要改的話，我們物件與JS的好處就產生了！ 直接使用迴圈來全部套入： ```javascript= const wrapper = document.getElementsByClassName('wrapper'); for (let i = 0; i < wrapper.length; i++) { Object.assign(wrapper[i].style, wrapperStyle); } ``` [MDN官網說明](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) [JS 原力覺醒 Day27 - JS 常用 API - Object.assign && Object.defineProperty](https://ithelp.ithome.com.tw/notifications) ## 還有沒有別的寫法？ 有。 ``` document.getElementById("myElement").style.cssText = ` display: block; position: absolute; `; ``` 這樣寫也跟原生css寫起來差不多，比較舒服。 用這種比較分離畫面與程式的寫法， 體感上爽度更高。 就不會是找到元素後還要.style.display="none" 一直.屬性.進去點點點這樣。 ## 說好的三種呢？ ``` function setStyle( objId, propertyObject ) { var elem = document.getElementById(objId); for (var property in propertyObject) elem.style[property] = propertyObject[property]; } setStyle('myElement', {'fontsize':'12px', 'left':'200px'}); ``` 這種寫成function的風格我也很愛，感覺很舒服，跟第一個的有點類似卻不太一樣。 這個是把迴圈弄再函式了，所以呼叫一次就會全部修改。 第一個則是把物件內的東西丟給迴圈，一次一次去做改動變化， 邏輯上一模一樣，手段跟風格差異而已唷。 [stackoverflow](https://stackoverflow.com/questions/3968593/how-can-i-set-multiple-css-styles-in-javascript) ## 心得 使用這個小技巧很有趣，之後我們會應用到「JS油猴系列-遮蔽廣告腳本，自定義新增名單」文章裡面。 當要寫腳本，很需要JS動態修改CSS的時候，這種小技巧就佔了很大的角色呢٩(๑•̀ω•́๑)۶！ 是不是沒有想到居然可以用JS修改呀！ 加上我認為比較差的寫法，就不只三種了呢。 趕快選一種喜歡的， 練習成自己的寶藏知識吧！
分類: node類 腳本類 ajax類 頁面製作類 研究類 --------------------------------------------------------------------------- 1. 用JS動態修改CSS 的三種寫法 (完成) 2. 用node.js來寫聊天室--->進階篇章:對戰小遊戲 3. 串API練習-寫出qrcode製作器 4.串API練習-使用post完成"reurl.cc縮網址"功能 5. 串API練習-查詢股價用ajax，再用d3.js視覺化整理 6.寫出chrome離線小恐龍遊戲 7.JS油猴系列-遮蔽廣告腳本，自定義新增名單 (完成) 8.網頁製作入門-寫一個sitcom官網示範教學 9.瀑布流呈現-結合前端爬蟲抓PTT表特版圖片 10. hackmd視覺化-讓自己的筆記變成部落格 (X) :整理自己所學 11.把元素轉成圖片的三種方法:介紹html2canvas--->各種套件都介紹 12. jQuery CDN 掛點解決方案？簡單的 JavaScript 讓您有本地替代方案！ https://mnya.tw/cc/word/1428.html --------------------------------------------------------------- 前端小試身手 1.至頂按鈕 自動隱藏且可直接使用的網頁回頂部按鈕 https://mnya.tw/cc/word/1735.html 2.捲動軸 3.用 JavaScript 做一個 Tooltips 功能 https://www.letswrite.tw/js-tooltips/ 4. Javascript，XML 轉 JSON https://www.letswrite.tw/xml-to-json/ -------------------------------------------------------------------------- CSS Tooltip Generator https://www.cssportal.com/css-tooltip-generator/ 
## code spell checker  不管是自己的英文程度太差，還是粗心大意，把英文字拼錯是家常便飯， 這款擴充套件就是來幫助你的救星！ 使用code spell checker馬上會幫你標出奇奇怪怪的單字， 讓你確定沒有不小心把1跟l搞錯，就debug一整天的那種尷尬事件！ ## live server  寫前端最需要的就是看到畫面٩(｡・ω・｡)，و 每次如果都要自己在網址列找到檔案的位置才打開html， 那實在是太沒有工程師的效率了，簡直荒唐！！ 當然要使用這款live server來架，馬上就可以看到自己的前端畫面， 而且儲存之後自動更新，根本神器。 ## material icon theme  沒有什麼其他的，純粹就是好看！ 裝了這款之後可以讓icon變得比較不一樣，整天都跟程式為伍， 當然就是要追求好看的圖圖。 ## prettier - code formatter  超級讚的排版好物，懶得自己縮排了啦！就靠這款prettier， 讓你的程式從原本醜醜的排版， 最後，變成人類也能看懂的正常程式，必裝神器之一！ ## 補充有人整理的 ### github  [專案點這邊](https://github.com/Lin-jun-xiang/vscode-extensions-best/blob/main/README_%E4%B8%AD%E6%96%87.md) ### 影片分享 https://www.youtube.com/watch?v=xGE_M3R69YA [ Alex 宅抬槓 ] Visual Studio Code 外掛生存戰｜從 2019 到 2020 前端開發必備安裝推薦 ## 心得 以上都是寫程式過程中會發現的需求，自然會想要找擴充來安裝，提升效率、美觀， 利用這些擴充功能，寫程式的體驗真的變得很舒服呢(๑•́ ₃ •̀๑)。 未來如果有什麼新的，也會持續補充，也歡迎大家分享討論唷～～
[ JavaScript 試煉之旅系列 ](https://ithelp.ithome.com.tw/users/20120099/ironman/2593) [初學者跪著學JavaScript系列](https://ithelp.ithome.com.tw/users/20123461/ironman/4760) 陸續整理，這些文章都對JS觀念建立非常有幫助。 常常查資料都會找到！
## 前情提要 有鑑於有些人還是需要考丙級網頁 雖然是使用過時的DW 這邊還是貼出教學影片 提供參考  ## 影片資源 [YT教學系列連結](https://youtu.be/7bM1kjRayB8) ## 心得 很喜歡這種熱心分享的頻道 大多是默默耕耘的老師 實在是網路界的一大佛心人之一 就算沒有看內容 也很感恩(,,・ω・,,) 未來有機會我也來用其中的網頁切版 示範怎麼手刻出來好了 應該挺有趣的XD ## 額外補充 最近在研究關於SPA的技術 這個影片示範的還不錯 很簡陋 簡易 鍵盤敲打的聲音很好聽(誤 紀錄一下  [SPA教學](https://youtu.be/5HgMIP5tarE)
## 前情提要 自學程式對某部分人來說，是一個不太難的事情， 學習能力好，悟性高、執行力強就有辦法可以做到，這屬於自學型人才。 像我自己就有能力可以自學到一定的程度。 但當這樣子的人要轉變成教學模式，當一個家教或老師，似乎是另一回事， 並非技術研究的越深，越會教，而是要針對教學下功夫....（？ ## 舉例說明 像是我有觀察教學前端的課程設計，有的是從CSS開始， 一堂教reset跟html，一堂教margin，做出各種練習。 再來可能是padding，以此類推，這樣。 通常都是這種零件式的學習，分散大架構，東西拆開來解說。 這樣子可能可以教一個禮拜之類的， 但其實對熟練的人來說用個簡單的模板網頁，十分鐘內一定能做完。 這之間有點矛盾或說，有差別。 ## 疑惑內容 想請教前輩或是站長在這方面有沒有心得， 教學上追求循序漸進似乎是必要的，講白一點就是進度比較慢啦！ 不知道這種狀況前輩們是否有遇過？ 目前有在規劃假設要教人的話，是否就是慢慢來，給人家操作看看練習， 但感覺又很像在拖時間ＸＤ (因為我自己跟人家線上試上過也會覺得，有點慢，資訊量很難跟自學比) 雖然我個人不傾向於這種學習模式， 但我知道要把十分鐘弄完的東西，轉化成：解說成那麼多堂課，是另一個領域的一種功力.... 我想這應該是有些人走過的路，心態上有點不確定，因此想請益一下這塊的經驗跟心得~ 任何關於家教的想法，歡迎站長或是前輩們稍微分享看看 教育這條準備的道路心得~~
## Midnight Lizard  ``` 這個擴展改變了頁面的顏色，亮度和對比度以提高可讀性，並且為所有網站開啟夜間模式。 將幫助您定制整個互聯網的外觀，以便於使用。您可以為每個喜愛的網站設置不同的配色方案，並為所有其他網站設置一個默認主題。從預定義的方案中選擇或創建自己的方案。用戶配色方案的數量是無限的。 ━━━━━ 的優點 ━━━━━ ✔智能黑暗的主題 ✔增加對比度 ✔反轉的亮度，而不是倒置的顏色 ✔選擇灰度 ✔在類似的背景顏色之間增加差異 ✔將圖像恢復到鼠標懸停時的原始狀態 ✔顯著提高可讀性 ✔增強的語法突出顯示（對於程序員） ✔有藍色濾鏡可以用紅光代替藍色光 ``` ## Stylebot  ``` 壹個方便改變網頁外觀的擴展 選擇壹個元素，然後從編輯器中選擇要進行的任何更改。您可以更改字體，顏色，邊距，可見性等。您也可以自定義 CSS。 ★易於使用：使用 UI 操作挑選元素並設置樣式 ★簡單快捷：更改立即保存 ★代碼編輯器-在這裏編寫自己的 CSS ★可讀性模式-通過隱藏非必要的頁面元素（如側邊欄，頁腳和廣告），提升網頁閱讀體驗。 ★灰度模式-啟用灰度以減少來自網頁的刺激 ``` ## 後記 未來可能還會新增更多唷！
## 前提 https://flexboxfroggy.com/ 類似這種遊戲或是https://hexschool.github.io/flexbox-pirate/index.html#/simple （六角應該是學習他 這兩個基本上一樣ＸＤ） 想問這種可以讓使用者丟code的遊戲 是否會很難開發 這邊順便提供相關遊戲 [10 amazing games to learn CSS](https://daily-dev-tips.com/posts/10-amazing-games-to-learn-css/) [10 games to learn JavaScript](https://dev.to/dailydevtips1/10-games-to-learn-javascript-155j) 有些難度似乎會比較高 是因為還要用美術素材 但我想 我若是使用人家現成的 純粹練習 這方面應該也不困難 ## 疑問 我在想 其實應該會算是個很有趣的挑戰? 我考慮的點 是要判斷user的code是否正確 基本上去判斷text area的內容有沒有 那些特定的條件 用判斷式去寫 應該不至於太難 想說試著練習寫一個這個遊戲 因為我看六角也是照著人家的做XD 不知道前輩們對這樣的練習有什麼建議~~ 會有什麼地方要注意嗎 感恩!!!!!!!! ## 想法漫談 從以前練到現在，真的很喜歡這個論壇~~~未來有機會搞一個自己設計的遊戲關卡 也可以讓大家練習JS 因為我看到有些練習的遊戲是要付費的 在這裡:https://codepip.com/games 想說我可以自己搞一個免費版 XDD 只是怕弄下去也許是一個太大的專案? 或者其實跟切版差不多 幾個小時就OK? 那我一定馬上來弄 感覺就超好玩~超酷~
## 題目說明  寫出這樣子的網頁切版 ### 示範效果  CODEPEN:https://codepen.io/flwrtykd-the-scripter/pen/VwGyOwa ## 代碼寫法 ### HTML ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>貓咪網站</title> </head> <body> <div class="wrap"> <div class="hero"> <img src="https://wallpapers.com/images/featured/g9rdx9uk2425fip2.jpg" alt="" /> <div class="text"> <span class="red">有貓咪也有狗，</span> <br /> <span class="red">甚至是螳螂！</span> <br /> <span class="green">隨便讓你領養</span> </div> </div> <div class="content"> <div class="block"> <img src="https://i.imgur.com/9ej5zY3.jpg" alt="" referrerpolicy="no-referrer" /> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa commodi quo assumenda nam tempore sint quia neque voluptatum ab. </p> </div> <div class="block"> <img src="https://i.imgur.com/9ej5zY3.jpg" alt="" referrerpolicy="no-referrer" /> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa commodi quo assumenda nam tempore sint quia neque voluptatum ab. </p> </div> <div class="block"> <img src="https://i.imgur.com/9ej5zY3.jpg" alt="" referrerpolicy="no-referrer" /> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa commodi quo assumenda nam tempore sint quia neque voluptatum ab. </p> </div> </div> <div class="footer"> <p>@copy right 這邊就是一些文字</p> </div> </div> </body> </html> ``` ### CSS ``` body { background: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1888&q=80"); overflow: hidden; } .wrap { width: 1000px; background-color: #e9edc9; margin: 0 auto; height: 100vh; margin-top: -10px; } .hero img { width: 100%; height: 250px; object-fit: cover; object-position: 0px 1px; } .hero span { font-size: 45px; } .hero .green { font-size: 35px; } .text { position: absolute; top: 35px; left: 250px; font-weight: 900; text-shadow: 2px 2px 5px white; border-left: 5px solid yellow; } .text > * { margin-left: 20px; } .content { display: flex; justify-content: space-around; margin-top: 40px; } .block { width: 250px; border: 1px solid black; } .block img { width: 100%; } .block p { padding: 5px 20px; } .block:nth-child(1) { margin-left: 25px; } .footer { background-color: black; color: white; text-align: center; height: 30px; } .footer p { transform: translateY(25%); } ``` ## 布局解釋 ### 背景以及格局 先設定一個背景 background img之後 使用wrap來製造一個效果是左右縮窄 只要設定width 以及margin auto 0就可以了 之後我使用三個分區 分別是上到下的四個div: hero 裡面有大圖片 text是標題文字 然後是content裡面放置三個block裝著小圖片跟內容文字 最底下是footer放著版權說明 ### hero & text hero就放圖片 width設定100%即可 text的話我裡面用三個span寫文字 設定class分別調整樣式 換行是使用br標籤 其中左邊的書籤效果(黃色長長那條) 是對text這個div使用border left完成的 ### content 這邊的話 先對content的div設定display flex達到水平排列的效果 其中可以用justify content讓它space around 平均分散開 再使用:nth-child(1) 去針對第一個block調整margin left 讓排版更精準 裡面的話 寫一個block 完成後再複製成三個 block放置img跟p即可 而它本身也要用一個border製造出邊線的效果 ### footer 我使用 transform: translateY(25%); 讓文字有點垂直置中的感覺 這都可以自己微調 ## 特別注意 在hero的img調整上我使用了 object-fit object-position 這兩個屬性去微調 這個是很好用的小技巧，可以特別留意 ## 心得 這種切板很常見 使用的伎倆其實差不多就那些 學習上 可以藉由先完成效果 再尋求優化的原則 以上 有相關問題都可以提出討論 或是歡迎投稿想要切版的圖片 我未來可以寫一系列的切版文來跟大家交流～～～
## 影片來源 https://youtu.be/EeZM5SXuCsU ##內容 ---------- 1. テキスト系 ---------- 02:02 line-clamp 02:56 text-stroke 03:22 background-clip: text; ---------- 2. 画像系 ---------- 03:47 object-fit 04:23 aspect-ratio 04:58 clip-path 05:30 filter 05:57 mix-blend-mode ---------- 3. サイズ ---------- 06:32 max-content 07:02 min, max, clamp 07:13 min 07:50 max 08:14 clamp ---------- 4. レイアウト系 ---------- 08:52 gridlayout 09:21 gap 10:03 display: contents; ---------- 5. 動き ---------- 11:08 position: sticky; 11:49 scroll-behavior: smooth; ---------- 6. その他 ---------- 12:30 Custom Properties 14:35 backdrop-filter 15:37 detail summary 先貼上來，有空補上mdn或是w3c的說明
 現在這個時代大家都是分頁魔人 這個擴充可以參考看看 [STORE](https://chrome.google.com/webstore/detail/vertical-tabs/pddljdmihkpdfpkgmbhdomeeifpklgnm?hl=zh-TW) [GITHUB](https://github.com/lxieyang/vertical-tabs-chrome-extension/blob/master/CHANGELOG.md#v2x-official-releases) 未來有機會我也想研究chrome extension的製作 應該很多好玩的API 
[GITHUB](https://github.com/lecepin/code-lab/tree/main/flex%20%E5%A4%87%E5%BF%98%E5%BD%95) 
目前似乎一共有八個系列 但是標題上看不太出來是哪個系列 我認為這在學習閱讀上會導致滿大的障礙(對我來說 是否有考慮用EP幾 或是其他方法 標註是第幾個系列 否則 JavaScript 自學網頁の嬰兒教材：第2課 ── XXXXXXXXXXXXXXXXXX 這種第二課可能會有八篇 必須我自己藉由XXXX的文字內容去猜到底是哪個階段的話 還滿煩躁的 個人想法是 「JavaScript 自學網頁の嬰兒教材」這幾個字似乎也稍微過於冗長、重複太多次 也許可以找個縮寫名稱 或是乾脆省略(? 畢竟這應該也不是SEO重點(? 也希望其他學員發表想法 大家討論看看~ 也許只是我個人的小偏見~提供參考而已:))))
## 實用yt頻道 https://www.youtube.com/@ludiflex/videos  Traversy Media https://www.youtube.com/@TraversyMedia 滿老牌的 也有開課 要注意的是他教學沒什麼分析 基本上就是看他打code ## html+css好文章 [還在用CSS搞？介紹 10 個優秀的 HTML 標籤，超牛逼低調神標籤！！ ](https://codelove.tw/@JsLover0018/post/Ja69X3) [18個超好用的css屬性，還不知道點進來就會知道！！](https://codelove.tw/@JsLover0018/post/AqJ21q) [資源分享-學習CSS最快速清晰的視覺筆記在這，馬上搞懂flex怎麼用！](https://codelove.tw/@JsLover0018/post/Zq4GLa) [資源分享-練手項目以及結構教學（新手適合！）](https://codelove.tw/@JsLover0018/post/rqEWA3) [資源分享-JS推坑入門必看！老外用示範教小朋友學JS，講的簡單清晰！小朋友竟然問那個問題！](https://codelove.tw/@JsLover0018/post/Ex2vEx) 資源還很多 先這樣 一次收集太多也沒意義 未來會持續慢慢更新~
## 前提 很棒的問題，很榮幸我也有辦法可以回答。 你好，稍微看了一下你的code，有些東西想要跟你討論、分享。 ## 解答 ### 修改完的效果  ### 觀念方面 首先必須要稱讚你的野心，想要clone整個網頁，這是非常值得嘉獎的想法！ 是我也會這樣練習，這種想法非常棒！ 我覺得你這種學習態度非常好哦～～～ 針對code的問題， 我覺得你寫得有點亂，具體在於class與ID的名稱取名，我不知道你是否是直接copy人家的過來。 如果是這樣子，我覺得你可以試著自己重構， 如果不是的話，也建議你可以分區，使用註解來把哪一個區域是什麼標註起來，  這對新手來說是個很好的習慣。 再來是你的分區我覺得滿亂的，加上似乎又有重複的div閉合標籤（？ 不知道是你用copy的還是哪裡有問題，這部分要注意！！ 做切版要先確定怎麼分割，你比較像是邊做邊分割，切的不是太好，導致排不太出來。 但這不是你的問題，這邊跟你分享他怎麼切，其實他這種板很簡單。 ### 邏輯方面 主要就是三個東西，wrap、container：main、side。 wrap的話就是設定寬度width以及margin:0 auto，製造一個居中效果。 container裡面有main與side就是你想要排的左跟右邊區。 只要container寫成dispaly:flex 與 justify-content: space around就可以了， 裡面的main寫flex: 0.66、然後side是flex:0.33 這樣會有平均分配的效果。 至於細節寬度就使用padding跟margin去調整。 ### HTML ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="https://glitch.com/favicon.ico" /> <title>Hello world!</title> <!-- import the webpage's stylesheet --> <link rel="stylesheet" href="style2.css" /> <!-- import the webpage's javascript file --> <script src="/script.js" defer></script> </head> <body> <div class="wrap"> <div id="logo"> <a href="https://www.storm.mg/"> <img id="homepage" src="https://www.storm.mg/images/logo.svg" /> </a> </div> <div id="nav_menu"> <nav> <a class="nav_btn" href="https://new7.storm.mg/" ><img id="img1" src="https://www.storm.mg/images/logo_new7.svg" /></a> <a class="nav_btn" href="https://onepercent.storm.mg/" ><img id="img2" src="https://www.storm.mg/images/1percentstyle.svg" /></a> <a class="nav_btn" href="https://www.storm.mg/premium" ><img id="img3" src="https://www.storm.mg/images/vip_logo.png" /></a> <a class="nav_btn" href="#">新聞</a> <a class="nav_btn" href="#">評論</a> <a class="nav_btn" href="#">財經</a> <a class="nav_btn" href="#">生活</a> <a class="nav_btn" href="#">下班經濟學</a> </nav> </div> <div id="tag_title"> <a class="tag_link" href="https://www.storm.mg/category/118">政治</a> <a class="tag_link" href="https://www.storm.mg/category/22168" >公共政策</a > </div> <h1>北捷研擬早晚鳥4折票救內湖交通 高嘉瑜列3原因打臉：根本劃錯</h1> <div id="article_info"> <div id="article_info_name"> <a id="name" href="https://www.storm.mg/authors/313137/%E9%99%B3%E5%AC%BF%E5%A9%B7" >陳嬿婷</a > </div> <div id="article_info_time"> <span id="article_time">2023-02-13 16:16</span> </div> </div> </div> <div class="container2 wrap"> <div class="main"> <img src="https://image.cache.storm.mg/styles/smg-800x533-fp-wm/s3/media/image/2023/01/18/20230118-104054_U18448_M824647_96f1.jpeg?itok=xwGSqPL9" /> <p id="imgintro"> 民進黨立委高嘉瑜（見圖）認為，北市府放錯重點，需2年內讓汐止民生線、東環段動工，才有望根治長年未解的內湖交通問題。（資料照，柯承惠攝） </p> <p class="content_text"> 台北市內湖區近年發展快速，交通壅塞的問題成為各界關注的焦點，為解決內科交通問題，北市副市長李四川與相關單位討論，初步研擬推出北捷早晚鳥票，提供悠遊卡4折優惠，吸引通勤族捨棄汽機車，改搭捷運通勤，並鼓勵民眾在離峰時間上、下班。對此，民進黨立委高嘉瑜認為，北市府放錯重點，需2年內讓汐止民生線、東環段動工，才有望根治長年未解的內湖交通問題。 </p> <a id="link1" href="https://www.storm.mg/line/notify/login" >[啟動LINE推播] 每日重大新聞通知</a > <p class="content_text"> 高嘉瑜於<a id="fb" href="https://www.facebook.com/ntufishfans/posts/pfbid02AhK796XpShFigJjCsMe8vgDsGn8nCrzwXYs8aQdWPcbp86u92sXPJqZUXnnVadoZl" >臉書</a >發文，指出內科塞車問題，主要肇因於在上下班時間同時湧入高達15萬人次的跨區、跨縣市通勤者，而內科地區員工上班時間又有高達82%都集中在上午9時。雖然北市交通局預計推出早晚鳥票，並搭配企業彈性上下班，意圖使內科員工上班能錯開通勤尖峰時段，但事實上，前台北市長柯文哲早在2016年就曾提出為期3個月的「綠色運輸試辦計畫」，其內容就包括捷運早鳥優惠，結果仍是失敗收場。 </p> <p class="content_text"> 高嘉瑜也提到，彈性分流上下班很好，但優惠票誘因不足，她認為，企業端該如何溝通鼓勵彈性上下班？市府端又該如何推動共乘、減少一人一車？才是短期能立竿見影的方法，而長期而言，內科交通最終仍得靠完善捷運路網來拯救，如何解決現有文湖線運量不足且妥善率差及路線轉乘次數高等問題，才是當務之急。 </p> <p class="content_text"> 高嘉瑜也批評，目前民生線遙遙無期，汐東段亦未延伸至舊宗，北市府仍一拖再拖。她表示，行政院在今年1月已核定捷運汐東線，她也多次質詢跟強調，台北端的民生線應接續推動，至少此次汐東線也應先同步延伸至內湖舊宗路的「SB07站」，進而在未來與東環段接軌，串聯內湖、南港、社后、樟樹灣、保長坑及北五堵新市鎮等產業區。 </p> <p class="content_text"> 高嘉瑜說，但遺憾的是，經她近日再度詢問北市府關於「捷運汐東線之規劃，評估可否延伸」，得到的答覆卻是，「因民生線與汐東捷運、基隆捷運所採用之系統不同，須待汐東捷運具體規劃方案核定後，才會開始評估。」至今仍未能有明確定案。 </p> <p class="content_text"> 高嘉瑜強調，台北市長蔣萬安選前承諾東環段2年內動工，務必說到做到。她指出，環狀線東環段可串聯捷運紅線（象山）、藍線（永春）、綠線（松山），為東台北縱向捷運路網的重要建設，並有望根治長年未解的內湖交通問題，蔣萬安也曾在選前承諾2年內動工。她表示，自己會持續關注東環段進度，希望台北市政府可以更積極推動，中央加速進度儘快核定，別讓民眾一等再等。（相關報導：<a id="link2" href="https://www.storm.mg/article/4724935" >幕後》和柯文哲不一樣 高虹安的「軍機處」走自己的路</a >｜更多文章） </p> </div> <div id="sidebar"> <div id="video_area"> <p class="sidebar_video">現正熱映中</p> <iframe id="smg_live_video" class="smg_live_video embed-responsive-item" src="https://www.youtube.com/embed/eJ4RErMLLh4?autoplay=&mute=1&version=3&loop=1" height="200" frameborder="0" allowfullscreen=""></iframe> </div> <div id="recommend"> <p class="sidebar_news sidebar_video">熱門新聞</p> </div> </div> </body> </html> ``` ### CSS ``` * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #logo { margin: 0 auto; text-align: center; } #homepage { width: 169px; height: auto; } #img1 { width: 79px; height: 25px; margin: -8px 0 -5px; } #img2 { width: 79px; height: 25px; margin: -8px 0 -5px; } #img3 { width: 79px; height: 25px; margin: -8px 0 -5px; } #nav_menu { width: 100%; height: auto; border-top: 1px solid black; border-bottom: 1px solid #cccccc; text-align: left; } .nav_btn { display: inline-block; padding: 13px 15px 14px; letter-spacing: 3px; font-size: 16px; text-decoration: none; color: black; } #tag_title { border-left-width: 10px; border-left-style: solid; border-left-color: rgb(255, 56, 56); margin: 10px; } .tag_link { padding: 10px; color: black; text-decoration: bold; } #container { background: #f5f5f5; } #intro { margin: 10px; color: grey; font-size: 10px; } h1 { font-size: 32px; color: black; } #content { background: lightyellow; width: 800px; padding: 5px 30px 20px; } .content_text { padding: 15px 0px; } #artice_info, #article_info_name, #article_info_time { display: inline-block; margin: 10px; } #name { color: red; font-size: 16px; padding: 5px; } #article_time { color: black; font-size: 16px; padding: 5px; } #sidebar { flex:0.33; width: 300px; margin-left: 20px; padding: 0px 30px; } .main{ flex: 0.66; } #video_area, #recommend { border-top-width: 2px; border-top-style: solid; border-top-color: rgb(0, 0, 0); } .sidebar_news{ border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: grey; padding: 10px 10px 10px 0px; } #img_area { min-height: 420px; position: relative; } #link1 { color: grey; padding: 0px 25px; } #link2 { color: grey; } #fb { color: red; } .container2{ display: flex; justify-content: space-around; } .wrap { width: 1250px; margin: 0 auto; padding: 0px 39px; } .sidebar_video{ margin-top: 10px; font-size: 20px; letter-spacing: 5px; color: #ff3838; margin-bottom: 10px; } .smg_live_video{ margin-bottom: 10px; } ``` ## 後記 以上，很不錯的練習，整體而言做得很好！ 希望未來可以一起繼續進步哦～～ 另外也還是要感謝站長創立這個網站，我從加入的第一天到現在都還是很喜歡哦。 現在站長也有[線上諮詢](https://codelove.tw/coaching)的服務，歡迎各位有需求，投資自己，跟高手學習！ 時間就是金錢，掌握關鍵的學習方法其實比胡搞瞎搞重要！ shout out to my man 阿川。
來自這個： https://www.youtube.com/embed/HhkIstbkmpU fieldset ・legend ・datalist ・option ・progress ・abbr ・del ・ins ・mark ・marquee ## 摘要 fieldset ・legend 表單用 ・datalist ・option 資料選單用 ・progress 進度條用 ・abbr 縮寫用 ・del 刪除線用 ・ins 插入文字用 ・mark 螢光標籤用 ・marquee 過時的捲動元素 ## [fieldset](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/fieldset) + [legend](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend) ### fieldset 功能說明： 用於對表單中的控制元素進行分組  ```htmlmixed= <form action="#"> <fieldset> <legend>Do you agree?</legend> <input type="checkbox" id="chbx" name="agree" value="Yes!" /> <label for="chbx">I agree</label> </fieldset> </form> ``` ### legend 功能說明： HTML `<legend> 元素用於表示其父元素 <fieldset> 的內容標題。`  ## [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) + [option](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/option) ### datalist 功能說明： `HTML <datalist> 元素包含了一組 <option> 元素，這些元素表示其它表單控件可選值。`  ### option 功能說明： `HTML 元素 <option> 用於定義在 <select>, <optgroup> 或 <datalist> 元素中包含的項。<option> 可以在彈出窗口和 HTML 文檔中的其他項目列表中表示菜單項。` ## [progress](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/progress) ### 功能說明： `HTML中的 <progress> 元素用來顯示一項任務的完成進度。雖然規範中沒有規定該元素具體如何顯示，瀏覽器開發商可以自己決定，但通常情況下，該元素都顯示為一個進度條形式。`  ## [abbr](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/abbr)  ### 功能說明： `HTML 縮寫元素（<abbr>）用於代表縮寫，並且可以通過可選的 title 屬性提供完整的描述。若使用 title 屬性，則它必須且僅可包含完整的描述內容。`  ## [del](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/del) + [ins](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ins) ### del 功能說明： `HTML 的 <del> 標簽表示一些被從文檔中刪除的文字內容。比如可以在需要顯示修改記錄或者源代碼差異的情況使用這個標簽。<ins>標簽的作用恰恰於此相反：表示文檔中添加的內容。`  ### ins 功能說明： `HTML <ins> 元素定義已經被插入文檔中的文本。`  ```htmlembedded= <p>“You're late!”</p> <del> <p>“I apologize for the delay.”</p> </del> <ins cite="../howtobeawizard.html" datetime="2018-05"> <p>“A wizard is never late …”</p> </ins> ``` ## [mark](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/mark) ### 功能說明： ``` HTML 標記文本元素 (< Mark >) 表示為引用或符號目的而標記或突出顯示的文本，這是由於標記的段落在封閉上下文中的相關性或重要性造成的。 這個 HTML mark 標簽代表突出顯示的文字，例如可以為了標記特定上下文中的文本而使用這個標簽**.** 舉個例子，它可以用來顯示搜索引擎搜索後關鍵詞 ```  ## [marquee](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/marquee) ### 功能說明： 捲動元素（已過時） 
未來想要找商家幫忙架站 接案賺點小錢 想問一下 純靜態網站我去辦一個github來架設應該也是可以的吧(? 怎麼好像沒看到有人這樣做 我自己猜是因為大多數不是靜態 有資料庫 後端 所以如果我架靜態網站 直接用github感覺滿偷吃步的 但也是可以的吧 假設說 撇除github這個比較旁門左道的方案(? 是否我這個目標就是要去學wordpress呢~ 自己希望未來可以走向 架網站 接案之路!! 或是各位有沒有接案經驗也可以一併分享 感恩各位前輩~
# 資源分享-練手項目以及結構教學 跟各位分享一個日本的教學網站 做的非常的好 [PAGE](https://code-step.com/)  可以進去逛一下 用擴充軟件翻譯成中文 會發現他的教材做的很用心 很有質感 非常適合新手！ 日本不愧是大國（？ 這教材至少我自己沒有看過台灣有這樣子的規劃 可以供各位參考練習
像這邊的文章輸入是使用textarea 想要用JS得到文章內容可以直接抓 但有些地方是編輯器 通常長的就比較奇怪 會像是html的結構 甚至有的貼出來是用iframe去完成 我最近想要實作備份文章內容的腳本 發現一些問題 首先是在it幫這邊測試  我發現就算在開發者工具改動文章內容 回到編輯那邊 卻又會跳回來 如果是textarea 我用value就可以改動 不太知道這種狀況 要怎麼用JS去改動裡面結構 就算我學裡面的span去貼 會發現只會跳會原本的內容 動彈不得 是說該怎麼處理 我發現就算我改innerText 表面上會改一下 當我要編輯 又會跳回去 這樣子是什麼問題 這樣的效果也會導致假設我想要用JS輸入文章也會遇到障礙 這方面該怎麼解決呢～～
``` <fieldset> <legend>ID</legend> <input type="text" id="position" placeholder="Enter PositionID"> </fieldset> ```  原來有這種東西 不需要CSS耶 很酷很有趣 記錄起來
# 主題 一直覺得看別人的code可以學到很多 不只是方法還有寫程式的觀念 想許願新的教學文章是 帶著看code 解讀網頁上實際運用到的東西 我第一個想丟出來討論的是破解右鍵 # 程式碼 ```javascript= javascript: (function() { function R(a) { ona = "on" + a; if (window.addEventListener) window.addEventListener(a, function(e) { for (var n = e.originalTarget; n; n = n.parentNode) n[ona] = null; }, true); window[ona] = null; document[ona] = null; if (document.body) document.body[ona] = null; } R("contextmenu"); R("click"); R("mousedown"); R("mouseup"); R("selectstart"); } )() ``` # 我的觀察與分析 ## 程式風格分析 我只看的出來這邊 他非常非常聰明 的利用一個function 去做一堆addEventListener 感覺這是pureJs很漂亮的寫法 而不是每個都在那邊addEventListener五坨 似乎這樣寫會比較乾淨 或者說有概念 總之就是比較酷也比較厲害的感覺 ### 我的看法 不知道有沒有什麼名詞可以形容這個概念 如果是Jquery 我覺得類似手法應該是變成一個Jquery物件群組（不太確定這個名詞） 然後再直接live或on或是trigger好像就可以了！？ ## 程式內容討論 originalTarget跟parentNode可以查MDN看到，不過還是不太了解具體內涵。 大概只知道原理應該就是解除所有，監聽那些「禁止操作」的listener 但搞不太清楚怎麼寫成這樣子 ### 我的看法 感覺如果用Jquery 似乎可以直接unbind就解決了！？ # 總結 以上我覺得這題材是很不錯的討論 目前網路上應該都沒有人願意進行這種探討 但這恐怕卻是最多人接觸JS的其中一環 有點矛盾XD 看是不是有機會可以以此為題材 針對code去重構 分析討論都滿好的～～～ 如果各位同學也好奇的一起＋１ 或是有懂的 也來分享！！ 一起交流這塊 # 後記 這樣慢慢學習的日子感覺我自己真的進步很多 從前連markdown是什麼都不懂 現在都能使用 而且發現根本就很簡單 github 的push也是 都慢慢跳脫舒適圈 才發現以前卡關就是不太去嘗試 希望大家都能越來越厲害！！
我用XMLHttpRequest實作一個， 找到米特某文章所有圖片的程式碼 其中也會找到上一頁的網址 儲存為url ``` let space url="https://meteor.today/article/a6GSu4" async function test(){let req=new XMLHttpRequest; req.open("get",url); req.onload=function(){ space=this.response; //parser與DOM操作 let parser = new DOMParser(); let parsed = parser.parseFromString(space, "text/html"); let text=parsed.getElementById("article_content") let texted=text.innerText.split("\n") //把圖片網址call出來 for (j=0;j<texted.length;j++){ if(texted[j].search(".jpg")>-1){console.log('https'+texted[j].split("https")[1])}; } //上一頁的網址 url=parsed.querySelector("body > div.pusher > div.ts.container > div.ts.relaxed.grid > div.nine.wide.computer.sixteen.wide.mobile.column > div:nth-child(2) > div.ts.stackable.two.column.grid > div:nth-child(1) > a").href; //這個新的url我想要把它拿出來，讓我未來迴圈可以用！ } req.send(); } test() ``` 我的主要問題是， 我想要拿出來的這個url拿不出來， 並沒有讓我可以呼叫url=上一頁 似乎是因為這個變數在XMLHttpRequest的過程中存取的，因此執行完就拿不到（？ （去年五月就開始研究的．．．一直找不到相關解法QQ）
[Hacking Javascript](https://www.youtube.com/watch?v=zMi70J3S7NM) 內容淺顯易懂，裡面的小孩子很聰明。 範例也很有趣：實作讓購買遊戲的網站，自動排序成價格低到高的布局。 簡單的內容弄了很不錯、實用的效果，非常推薦入門js的觀看。
>最近在忙著實作我的一些小項目，沒有上來發文，但還是一直學習JS， >累積滿多經驗，也累積不少疑問。 >之前站長阿川有跟我提到相關話題，也就是UJS，想說把它拿過來聊一聊。 >剛好最近弄的東西，跟這個也有一些關聯性。 ## html與JS的交互關係。 Inline JavaScript是什麼呢？ 就把JS寫在html裡面的一種手段，也就是onclick那些東西，在自學教材會學到唷：））。 其中也有個東西叫做JavaScript pseudo-protocol，他好像有點像是給一個js的前綴， 讓瀏覽器讀取html的時候知道要開始讀取JS了，用法如： `<a href="javascript:alert(1)">my website</a>` 這樣子的作法都讓JS侵入到html裡面，也就是行為跟結構沒有分離。 是否要UJS，站長上次有提到這可以看專案大小來區分，這篇閒聊開起來可以提供更多細節。 --- 不過我不打算就此結束文章，我要額外分享與XSS相關的內容。 XSS其實是CSS，跨站指令碼Cross Site Script的意思，只是因為縮寫重複CSS樣式（Cascading Style Sheets ）所以用X代替。 簡單理解它就是一種攻擊手段，讓別人網站上執行我的代碼。 --- 有趣的事情來了，那html跟JS交互關係跟XSS又有什麼關聯呢？ 想像一下，當今天小明要做一個討論區，讓使用者用html編輯打文章，就必須小心有人會放一些JS的代碼。 小明想說，我要過濾`<script>`標籤來保證他們乖乖地寫html。 請問這樣子是否就安全了呢？ 答案是否定的，這時候使用Inline JavaScript會發生什麼狀況？ 試想一下因為小明沒有CSP相關設定，防止使用者偷偷塞JS到html裡面，導致小明的壞朋友大胖， 可以直接寫一個`<img src=x onerror="alert(1)">`在留言區裡面， 完全沒有使用到`<script>`標籤，卻也能造成XSS。 --- ## 關於防禦： ### CSP 設定嚴格一點，可以阻止很多XSS，舉例來說文章一開始有`href="javascript:alert(1)"`， 可以設定href後面只能接上http開頭的東西。 ### WAF 他是Web Application Firewall 的簡稱，中文通常叫作「網站應用程式防火牆」 可以建立及管理避免網際網路威脅的規則，包括IP 位址、HTTP 標頭、HTTP 主體、URI 字串、跨網站命令檔(XSS)、SQL 隱碼攻擊及其他OWASP 定義的漏洞。 ### 自己建立fliter 自己過濾也是可行的（不建議），把字串符碼都轉成HTML Entities，例如把 (<)寫成 ` < or <` ，透過這樣的過濾render出來的就不會是指令了。 為什麼不建議，是因為你過濾的東西有可能會被double encoded URL之類的手法繞過。 或是你覆蓋了document.write，以為安全了，但是我用孿生函數(twin function)的document.writeIn你可能就忘了過濾。 這剛好就是我最近在研究的東西。 ## 相關討論問題： 1.對於文章的內容，有沒有什麼錯誤呢？或相關名詞想法想補充？ 2.是否要UJS的實際使用，有哪些想法？或是有什麼經驗？
因為我有個點子是搞一個梗圖的網站 就想說上網先看看人家怎麼弄的 看著就到了梗圖倉庫 欸 突然眼熟的看到站長阿川！？ 稍微確認一下才知道是我們的站長 挖真的是偶像啊0.0 早我好幾百年就已經弄得票漂亮亮有聲有色 我還在那邊１＋１咧 哭暈在廁所 難怪自我介紹說有經驗 相關問題都能回答 這豈止是回答 是模範 是偶像欸（跪了 是說站長人格方面可能才是我最欽佩的 為人善良熱情 低調謙虛 沒有把自己的行頭 作品都丟上來搞一個自我經歷很豐富這樣的介紹 真的很低調欸 小弟個人覺得這真的是各位學習的典範 這邊不知道會不會不太好 推薦這篇 [工程師的缺德行為：叫朋友去學C/C++](https://blog.turn.tw/?p=2568) 太中肯啦 最屌的一句話 我真心覺得屌 非吹捧 是「別擔心，這不是你的錯，是那些書寫得不夠好」 說實話要說那些書很爛嗎 也沒有 但說真的 真的不夠好 其實現在的網路課程 線上教學也是有同樣的問題 課程編排都很死 講老半天的閉包 hoisting 那些東西 不是說這些不重要 要面試 要工作恐怕那是最基本的 可是我身為一個愛好者 我沒看見那些觀念真的被套用&應用在實際狀況 舉例來說我學變數的觀念 是經由RPG製作大師 要修復做寶箱會無限開的bug 因此設定一個變數是off 打開是on 然後用if條件式去判斷 我一次學會好多東西 第一個我懂了變數 我知道需要記憶體幫我存資料 第二資料型態 Boolean 就是on跟off兩種 然後我也學會流程判斷 也就是if x=off then....這樣子 後來用CE修改器發現要找血量 是小數點 所以搜尋要用浮點數(float) 再來是玩VB要寫自動發話所以瞭解了迴圈 並知道要寫一個函式 再去call它 多麼精彩啊這些片段！每一個細節我都忘不了！全部都是畫面！全部都很有趣！ 以此類推 講真的到現在 每一個語法都是我靠著自己實踐 找出來的 雖然這樣子花了十來幾年 程度還很弱 但我敢說這樣子的內容有趣 甚至我也敢說 這樣才有意義 我至今到現在常常看網路教學影片 還是一堆講課講老半天都是程式的語法 沒有實戰也就算了 先理解語法 但講解的都很生硬 完完全全都只是為了講課而解釋&示範 真正要實戰了的話也都玩那幾招 沒有變化 明明這個網路世界 程式世界是如此的繽紛 到了他們教學的手上 真的是變黑白 也難怪需要特別聰明跟有天分的人才能駕馭 因為教學資源的傾向就是科板書的教法 當然要足夠聰明 而不是有熱誠 純有熱誠也要能像我這樣十來年慢慢去搞 錯誤了沒地方搞懂 再等好幾年後發現問題 對我來說 我不是特別聰明 我一路走來也理解了 我的確偏笨 但打開書本或是課程 從VScode建置開始 慢慢開始介紹語言的歷史 我真的看不下去 無聊死了 我寧願花個十年 用我有趣的摸索去實戰 去玩 也不要聽課 對我來說 這些課不是爛 是真的不夠好 我用我的自學證明 有一套比他們的課程更生動活潑 更有愛的方法能學程式 至少對我自己來說永遠為真 嗯嗯 離題了 主要是在這個論壇 真的很棒 鼓勵大家也多多發文分享 大多數擁有聰明頭腦的人 或是自己熬過來的工程師 只會轉頭批評外行人蠢或笨 要不然就是酸 藏私 不回答你還講幹話說 這你就不懂 或是重複一次問題說 就把這個解決就好啦 優越感灌下去 見不得你好 甚至批評你是在搞東搞西 我真的遇到一個 我發問問A問題 結果有個嘴臭仔他不回答就算了 在那邊嘴說看我過去發文 過去問B過去問C 說我是搞東搞西沒屁用 叫我去系統性學 在那邊講跟我問題無關的屁話 系統性學要是能解決 我早就解決了== 要怎樣的系統 笑死 你說的系統才是系統喔 我只想知道我研究的領域 你要我系統去哪裡 真的超傻眼 雖然文長有點抒發心情 但收尾主要還是想說 這個網站的資源是不同於其他地方的 還有這個網站的站長也是很真心要提升台灣程式社群的 所以我們可以一起利用這個資源～一起好好努力～ 讓未來新加入的分子 可以看到有趣的例子、找到真的有用的問答文章~ 站長是個很熱心 很有才華想法的大家長 我認為難得的是也很善良與見解獨到 能體會我們這種熱愛程式的人的心 https://codelove.tw/@howtomakeaturn/post/VaGR3p 各位都應該去點個讚！！
我最近有蒐集不少問題 這是其中之一 比較小的項目 我的主要疑問是 YT的字幕其實是不斷重新誕生新的span 所以我抓到他的span改了樣式後 下一個又等於跳回去 勢必我必須要setinterval不斷的去馬上改成我要的字體 不過經由測試 就算是50的毫秒也是有發現從原字體變成新字體的更動 視覺上會很不舒服 目前我在想 有兩種解法 第一個是用我不知道的方法 想辦法改 第二是退而求其次 我直接不開字幕 然後直接重新把字幕加回去 難道只能用第二種招式了嗎 ##若如此 我也有想到延伸的問題 也就是說 1.豈不是必須先下載字幕 那麼似乎會必須有等待時間 2.添加字幕如果用html原生的方法不知是否可行 又者要自己寫一個針對撥放秒數判斷字幕的 那難度似乎又是另一個等級
我想要用cookie自動登入 如果是session或是localstorge的話好像開dev tool就可以用 setItem即可 如果是cookie的話 直接document.cookie去做更改好像沒有效果....？ 上網查了都說是用cookieEditThis的外掛去改 不過照理說extension能改 沒道理我在dev tool不能寫JS更改cookie吧 本地端 我照理說 無論如何都有辦法在前端使用JS去弄自動登入吧 以上 還請各位有經驗的討論分享 請前輩們多多指教
https://html5drummachine.com/virtual-drum-machine/ 看了很多前端的練習作品 老實說 真的都挺無聊的.... 對我來說這種網站才酷啊!!!!!!!!! 話是這樣說 但基本功還是要慢慢練 不過我打算做這種網站 先蒐集這些厲害的網頁 未來可以分析他的元素 只不過要搞這種 圖片部分好像會先是第一道難點.... 我已經有分析網頁的一些要點 有些是靠提供素材 例如netflix 某盜版網 好讀 這種 網站的價值來自裡面的sourse 並不一定是什麼創意的點子 前端後端服務等等 有些則是靠功能 例如某某遊戲計算機 實現訂便當 todolist 線上鬧鐘 身分證檢驗&產生等等 當然論壇也包含於此類 這就是要有點技術 這應該算是滿深的思考 相信未來深入的話 面試作品集應該能更有東西 不知道其他的朋友或版主們 有沒有遇見過什麼酷網站 喜歡哪一部分的效果等？ 可以來討論 未來我也會加入我的構造網站筆記～
我英文很OK 所以資源滿豐富的 這點我很幸運也很感激 只是我點子也比較多 常常想要實作超出我能力的東西 例如串後端 資料庫 弄出會員系統 發送email驗證 一些實作python的爬蟲 因為我也常常搜尋人家前輩的作品 心有所向 就很嚮往也做出那些東西 (例如這種論壇 就是我的目標之一 之前一直很期待有這種程式的討論社團.....版主實現我的願望 ) 可是後端我完全不懂 還不會 目前還在專注練習html+css+js的小作品 心中的焦慮感太強了...導致往往都沒法動手 畢竟我未來要搞的作品就是專案 有時候小作品太小 都沒什麼動力練 可是自己實力又還不到.... 挫折˙真的滿滿啊... 感謝版主開這個論壇 讓我抒發... 學習規劃真的不容易...
本論壇提供「新手友善」的 JavaScript 前端自學教材！
站長阿川近幾年指導了很多朋友 JavaScript，寫了一份自學教材
我發現傳統的教法，從程式觀念一個一個介紹，有點無聊，很多人無法吸收
所以我想說換個方法試試，以不斷寫「小專案」為主，然後在過程中
順便吸收會用到的程式觀念，這樣比較好玩，比較好消化
如果有完全沒基礎的朋友，可以試試看，或許會對 web 領域開始有興趣！
本論壇也是「新手友善」的程式設計討論區！
歡迎多多與大家交流、分享、互相打氣、一起學習、一起成長！
