此人尚未填寫簡介。
註冊於2023年01月17日
  發表了 35 篇貼文
  新增了 81 則留言
  貼文共 9,855 次瀏覽
近期留言



🎉🎉🎉 恭喜 birdie 順利轉職&給新入行者的簡單建議 🎉🎉🎉

那我先拋出其中一個最近的議題好了 朋友去職訓局上課 其中有丙級證照考DW的考試 基本上他已經學過CSS HTML JS 手刻的技術了 不過老師還是建議他好好準備丙級證照 畢竟政府的課程 有沒有成效 似乎學員考證照就是指標 不過他深深知道這對於工作沒有幫助 在這樣的情況下 該怎麼取捨 是否可以直接放棄練習DW 把時間拿來研究更有意義的前端框架 這算是我最近也還在想的一個議題 畢竟他也已經參加了課程 不過時間成本又是一個昂貴的東西 也許站長可以從一些新的思路 去分享會作出怎樣子的決定? 我相信未來也會有人去報名相關課程 也會有這種老舊的DW課程的XDDD




[好文分享] 太屌了吧!?用Class(類)製作Jquery的效果!

## 目錄 ##### [【前端動手玩創意】等待的轉圈圈效果 (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裡面一行都沒有也能搞?

[【前端動手玩創意】哇操!你敢信?花式寫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竟然可以搞成這樣!? 真的是太有趣了(๑╹◡╹๑)! 原來前端的惡夢也可以變成寫不同風格的天堂,沒錯,寫程式就是這麼千變萬化! 重點是背後的邏輯抓到了,那麼想要怎麼寫,真的就是藝術的發揮。 請繼續關注, 跟著我們這個系列繼續動手玩創意!!未來還有更多更新鮮的花招呢(。◕∀◕。)

# JS油猴系列-遮蔽廣告(D卡未登入)腳本、自定義新增名單

## 前情提要 逛論壇或網站常常有惱人的蓋板廣告,要馬就是要你登入、註冊, 要馬就是搞一堆課程的販售廣告, 對重視使用者體驗的人來說,真的是一場噩夢! 為了解決這個問題,我模擬了AdBlock的其中一個功能,刪除頁面上的元素! 乾乾淨淨才是王道阿。 ## 效果 按下ctrl+Q啟動刪除元素模式: ![](https://i.imgur.com/411nh3Q.png) 被選取的會加上邊框色彩,讓人確認是否要刪除: ![](https://i.imgur.com/zPEKMhC.png) 點選確認後: ![](https://i.imgur.com/nnOY4Ji.png) 煩人的元素就此消失在這個永恆的宇宙裡。 ## 觀念筆記 ### 套件一: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://i.imgur.com/lNDch3V.png) [測試效果反應網站](https://codeseven.github.io/toastr/demo.html) ![](https://i.imgur.com/v95GUfO.png) [[十分鐘學習] 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) ``` ![](https://i.imgur.com/qUeTUlj.png) ![](https://i.imgur.com/FJH8EMX.png) 有提供很多API範例,還可以自己定義可愛的小動物XD [官方網站](https://sweetalert2.github.io/) ### 監聽鍵盤組合鍵 ``` document.addEventListener('keydown', function(e){ if(e.which==81 && e.ctrlKey==true){ //..... } ``` ### Object.assign 動態修改樣式 ![](https://i.imgur.com/AzZMRCc.png) [用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。 可以新增、刪除,看有哪些元素被列入要刪除的黑名單。

[前端學習] 用JS動態修改CSS的三種寫法,花式JS玩弄樣式,嚇死你的同事!

## 前情提要 還在寫行內樣式醜醜的嗎?教你不用寫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/ ![](https://i.imgur.com/lBtfanS.png)

[資源分享] 裝爆的VScode擴充套件,人生沒有擴充套件就是黑白的!

## code spell checker ![](https://i.imgur.com/dEaysXp.png) 不管是自己的英文程度太差,還是粗心大意,把英文字拼錯是家常便飯, 這款擴充套件就是來幫助你的救星! 使用code spell checker馬上會幫你標出奇奇怪怪的單字, 讓你確定沒有不小心把1跟l搞錯,就debug一整天的那種尷尬事件! ## live server ![](https://i.imgur.com/BdyRNga.png) 寫前端最需要的就是看到畫面٩(。・ω・。),و 每次如果都要自己在網址列找到檔案的位置才打開html, 那實在是太沒有工程師的效率了,簡直荒唐!! 當然要使用這款live server來架,馬上就可以看到自己的前端畫面, 而且儲存之後自動更新,根本神器。 ## material icon theme ![](https://i.imgur.com/cLgrQLt.png) 沒有什麼其他的,純粹就是好看! 裝了這款之後可以讓icon變得比較不一樣,整天都跟程式為伍, 當然就是要追求好看的圖圖。 ## prettier - code formatter ![](https://i.imgur.com/DDkFzb4.png) 超級讚的排版好物,懶得自己縮排了啦!就靠這款prettier, 讓你的程式從原本醜醜的排版, 最後,變成人類也能看懂的正常程式,必裝神器之一! ## 補充有人整理的 ### github ![](https://i.imgur.com/7X9O5Dz.png) [專案點這邊](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 前端開發必備安裝推薦 ## 心得 以上都是寫程式過程中會發現的需求,自然會想要找擴充來安裝,提升效率、美觀, 利用這些擴充功能,寫程式的體驗真的變得很舒服呢(๑•́ ₃ •̀๑)。 未來如果有什麼新的,也會持續補充,也歡迎大家分享討論唷~~

發問-教學經驗的累積?或是說教學風格的培養?

## 前情提要 自學程式對某部分人來說,是一個不太難的事情, 學習能力好,悟性高、執行力強就有辦法可以做到,這屬於自學型人才。 像我自己就有能力可以自學到一定的程度。 但當這樣子的人要轉變成教學模式,當一個家教或老師,似乎是另一回事, 並非技術研究的越深,越會教,而是要針對教學下功夫....(? ## 舉例說明 像是我有觀察教學前端的課程設計,有的是從CSS開始, 一堂教reset跟html,一堂教margin,做出各種練習。 再來可能是padding,以此類推,這樣。 通常都是這種零件式的學習,分散大架構,東西拆開來解說。 這樣子可能可以教一個禮拜之類的, 但其實對熟練的人來說用個簡單的模板網頁,十分鐘內一定能做完。 這之間有點矛盾或說,有差別。 ## 疑惑內容 想請教前輩或是站長在這方面有沒有心得, 教學上追求循序漸進似乎是必要的,講白一點就是進度比較慢啦! 不知道這種狀況前輩們是否有遇過? 目前有在規劃假設要教人的話,是否就是慢慢來,給人家操作看看練習, 但感覺又很像在拖時間XD (因為我自己跟人家線上試上過也會覺得,有點慢,資訊量很難跟自學比) 雖然我個人不傾向於這種學習模式, 但我知道要把十分鐘弄完的東西,轉化成:解說成那麼多堂課,是另一個領域的一種功力.... 我想這應該是有些人走過的路,心態上有點不確定,因此想請益一下這塊的經驗跟心得~ 任何關於家教的想法,歡迎站長或是前輩們稍微分享看看 教育這條準備的道路心得~~

[資源分享] 超好用的擴充套件你還不裝?裝了人生直接逆襲,日子過得好舒服!!

## Midnight Lizard ![](https://i.imgur.com/PKrYQfh.png) ``` 這個擴展改變了頁面的顏色,亮度和對比度以提高可讀性,並且為所有網站開啟夜間模式。 將幫助您定制整個互聯網的外觀,以便於使用。您可以為每個喜愛的網站設置不同的配色方案,並為所有其他網站設置一個默認主題。從預定義的方案中選擇或創建自己的方案。用戶配色方案的數量是無限的。 ━━━━━ 的優點 ━━━━━ ✔智能黑暗的主題 ✔增加對比度 ✔反轉的亮度,而不是倒置的顏色 ✔選擇灰度 ✔在類似的背景顏色之間增加差異 ✔將圖像恢復到鼠標懸停時的原始狀態 ✔顯著提高可讀性 ✔增強的語法突出顯示(對於程序員) ✔有藍色濾鏡可以用紅光代替藍色光 ``` ## Stylebot ![](https://i.imgur.com/MQN95R6.png) ``` 壹個方便改變網頁外觀的擴展 選擇壹個元素,然後從編輯器中選擇要進行的任何更改。您可以更改字體,顏色,邊距,可見性等。您也可以自定義 CSS。 ★易於使用:使用 UI 操作挑選元素並設置樣式 ★簡單快捷:更改立即保存 ★代碼編輯器-在這裏編寫自己的 CSS ★可讀性模式-通過隱藏非必要的頁面元素(如側邊欄,頁腳和廣告),提升網頁閱讀體驗。 ★灰度模式-啟用灰度以減少來自網頁的刺激 ``` ## 後記 未來可能還會新增更多唷!

請益-這樣子的coding遊戲是否能夠一人開發?會太具挑戰嗎?

## 前提 https://flexboxfroggy.com/ 類似這種遊戲或是https://hexschool.github.io/flexbox-pirate/index.html#/simple (六角應該是學習他  這兩個基本上一樣XD) 想問這種可以讓使用者丟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? 那我一定馬上來弄 感覺就超好玩~超酷~

切版示範-教你怎麼完成一個切板,完全新手導向,帶你從零到一!!

## 題目說明 ![](https://i.imgur.com/5O73qvg.png) 寫出這樣子的網頁切版 ### 示範效果 ![](https://i.imgur.com/s4H57CU.jpg) 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 這兩個屬性去微調 這個是很好用的小技巧,可以特別留意 ## 心得 這種切板很常見 使用的伎倆其實差不多就那些 學習上 可以藉由先完成效果 再尋求優化的原則 以上 有相關問題都可以提出討論 或是歡迎投稿想要切版的圖片 我未來可以寫一系列的切版文來跟大家交流~~~

RE: 請教切板問題--切版觀念教學!實例code review!

## 前提 很棒的問題,很榮幸我也有辦法可以回答。 你好,稍微看了一下你的code,有些東西想要跟你討論、分享。 ## 解答 ### 修改完的效果 ![](https://i.imgur.com/3KBwL9M.png) ### 觀念方面 首先必須要稱讚你的野心,想要clone整個網頁,這是非常值得嘉獎的想法! 是我也會這樣練習,這種想法非常棒! 我覺得你這種學習態度非常好哦~~~ 針對code的問題, 我覺得你寫得有點亂,具體在於class與ID的名稱取名,我不知道你是否是直接copy人家的過來。 如果是這樣子,我覺得你可以試著自己重構, 如果不是的話,也建議你可以分區,使用註解來把哪一個區域是什麼標註起來, ![](https://i.imgur.com/hbMMJV8.png) 這對新手來說是個很好的習慣。 再來是你的分區我覺得滿亂的,加上似乎又有重複的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 阿川。

還在用CSS搞?介紹 10 個優秀的 HTML 標籤,超牛逼低調神標籤!! (更:補MDN說明

來自這個: 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 功能說明: 用於對表單中的控制元素進行分組 ![](https://i.imgur.com/oxy0MJC.png) ```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> 的內容標題。` ![](https://i.imgur.com/a2v8wkM.png) ## [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> 元素,這些元素表示其它表單控件可選值。` ![](https://i.imgur.com/D02kWpS.png) ### option 功能說明: `HTML 元素 <option> 用於定義在 <select>, <optgroup> 或 <datalist> 元素中包含的項。<option> 可以在彈出窗口和 HTML 文檔中的其他項目列表中表示菜單項。` ## [progress](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/progress) ### 功能說明: `HTML中的 <progress> 元素用來顯示一項任務的完成進度。雖然規範中沒有規定該元素具體如何顯示,瀏覽器開發商可以自己決定,但通常情況下,該元素都顯示為一個進度條形式。` ![](https://i.imgur.com/jQtHfE6.png) ## [abbr](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/abbr) ![](https://i.imgur.com/ODAFv8H.png) ### 功能說明: `HTML 縮寫元素(<abbr>)用於代表縮寫,並且可以通過可選的 title 屬性提供完整的描述。若使用 title 屬性,則它必須且僅可包含完整的描述內容。` ![](https://i.imgur.com/B6qRKeB.png) ## [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>標簽的作用恰恰於此相反:表示文檔中添加的內容。` ![](https://i.imgur.com/F0kX2GV.png) ### ins 功能說明: `HTML <ins> 元素定義已經被插入文檔中的文本。` ![](https://i.imgur.com/TcKaH3Q.png) ```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 標簽代表突出顯示的文字,例如可以為了標記特定上下文中的文本而使用這個標簽**.** 舉個例子,它可以用來顯示搜索引擎搜索後關鍵詞 ``` ![](https://i.imgur.com/83IiPxw.png) ## [marquee](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/marquee) ### 功能說明: 捲動元素(已過時) ![](https://i.imgur.com/VDYcTy2.png)

發問-能不能做解讀代碼系列!?(內有題材之一:破解右鍵

# 主題 一直覺得看別人的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去重構 分析討論都滿好的~~~ 如果各位同學也好奇的一起+1 或是有懂的  也來分享!! 一起交流這塊 # 後記 這樣慢慢學習的日子感覺我自己真的進步很多 從前連markdown是什麼都不懂 現在都能使用 而且發現根本就很簡單 github 的push也是 都慢慢跳脫舒適圈 才發現以前卡關就是不太去嘗試 希望大家都能越來越厲害!!

討論-淺談html/js之關係以及,延伸至XSS

>最近在忙著實作我的一些小項目,沒有上來發文,但還是一直學習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,例如把 (<)寫成 ` &lt; or &#60;` ,透過這樣的過濾render出來的就不會是指令了。 為什麼不建議,是因為你過濾的東西有可能會被double encoded URL之類的手法繞過。 或是你覆蓋了document.write,以為安全了,但是我用孿生函數(twin function)的document.writeIn你可能就忘了過濾。 這剛好就是我最近在研究的東西。 ## 相關討論問題: 1.對於文章的內容,有沒有什麼錯誤呢?或相關名詞想法想補充? 2.是否要UJS的實際使用,有哪些想法?或是有什麼經驗?

此篇閒聊-關於這個網站以及關於站長(+此站使用心得

因為我有個點子是搞一個梗圖的網站 就想說上網先看看人家怎麼弄的 看著就到了梗圖倉庫 欸 突然眼熟的看到站長阿川!? 稍微確認一下才知道是我們的站長 挖真的是偶像啊0.0 早我好幾百年就已經弄得票漂亮亮有聲有色  我還在那邊1+1咧 哭暈在廁所 難怪自我介紹說有經驗 相關問題都能回答 這豈止是回答 是模範 是偶像欸(跪了 是說站長人格方面可能才是我最欽佩的  為人善良熱情  低調謙虛 沒有把自己的行頭  作品都丟上來搞一個自我經歷很豐富這樣的介紹  真的很低調欸 小弟個人覺得這真的是各位學習的典範 這邊不知道會不會不太好 推薦這篇 [工程師的缺德行為:叫朋友去學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 各位都應該去點個讚!!