#更 #回文 Dcard工程師在狂什麼

前情提要
註一: 還看不到dcard掀桌的各位可以按F12或是滑鼠右鍵->[檢查]又或是按ctrl+shift+i打開開發者工具 然後按[Console],如圖
megapx
如果文章太長可以直接看最後的結論喔>.0 註二: 這篇分享只是想讓大家體會打程式的樂趣 若有疏漏或是說錯還請各位大大提供建議幫忙補充 -----正文開始----- 看到大家對於dcard工程師的狂還有對程式的興趣 身為一介小小碼農(沒日沒夜打程式的人)甚感欣慰 決定來告訴大家關於用JavaScript 無痛除錯(debug)的方法 先介紹網頁開發這件事情給大家聽,並且會舉一些小例子 一般來說通常網頁會用五種語言撰寫 ( B9 B14提到dcard有些並非使用以下提到的程式語言,因為撰寫程式的時候常會依據需要使用適合的語言喔,並非所有網頁都是如此) 1. HTML:靜態的部分,像是不變的文字或圖案(像是dcard左上角的logo)、框架(排版)等等 ex. 人(爸媽生的時候就固定了不會有重大變動,如果你跑去整形相當於你改變了你的靜態程式碼) 2. CSS:美工,有固定格式或顏色之類的,像是dcard左邊的topic顏色怎麼顯示、字體大小等等 ex. 化妝品(會分成幾類,口紅裡面就會寫上色號、滋潤度等等,你可以化不一樣的妝用不同的口紅) 3. PHP:動態的部分,像是我們發表了文章會馬上存進資料庫裡面,其他讀者來到就可以馬上看到新的文章 ex. 每天講的話、做的事 4. SQL:就是資料庫的語言啦,通常會跟PHP一起使用~ ex. 腦袋(資料就是腦袋裡面的知識、回憶) 5. JavaScript:各種變魔術的小功能,動態的美工之類的,總之像是變魔術的功能都由他負責( B83提到現在很多好用的語言是用javascript寫出來,所以已經不侷限在前端了,大家若有興趣可以上網搜尋,這裡就不贅述了) ex. 喇妹喇鮮肉的技巧 -- 再來告訴大家HTML大概會長怎樣 (點擊圖片可放大)
megapx
-- 對不起我知道上面這段文字可能有點難又很無聊 那麼接下來我來著重在這次dcard的掀桌相關的程式碼 (點擊圖片可放大)
megapx
用手機看得圖不清楚我只能說抱歉 因為dcard不能上色,直接貼程式碼會很亂 還有就是我把javascript直接寫在同一個檔案裡是為了解說方便 B14 B24提到dcard應該是把console.log寫在獨立的js檔案裡喔 只要可以呼叫過來哪一種寫法都是沒問題的~ 這樣的程式碼執行後打開開發者工具就可以看到這樣的結果 一開始cosole裡面空空的
megapx
按了按鈕之後
megapx
console.log那行文字後面的'color: #f00; font-size: 50px;'就是代表文字的顏色和大小 大家可以試著改改看'color: #ff00; font-size: 30px;' 另外如果在程式裡面把console.log那行整行換成//window.alert("要說的話");就是比較古老的debug方法 比較不好用,而且忘記拿掉的話會嚇到使用者XD 有時候也會拿來警告使用者 像這樣
megapx
------------------------ -----結論在此----- ------------------------ 一般來說console的語法是工程師用來debug用的 通常會丟在javascript的function裡面 不像跳alert視窗如果不小心進入無限迴圈會很恐怖 但是又可以在網頁顯示裡面看到很方便~ 不過有些詐騙人士(?)會用這個來玩弄非資訊專業的人 所以FB就在cosole裡面寫了這些
megapx
**以下錯誤示範,想玩弄的人本人不負任何責任,純粹程式學習分享** **根據 B25之解說及本人認知,本行為並沒有違反dcard服務條款,若有違反E-8項條款,dcard可逕行刪除,本人一切尊重dcard之判決** 可以在console玩弄dcard,教他說一些色色的話給你聽(誤)
megapx
然後如果看到一堆錯誤訊息的話 就是因為你壞壞裝了Adblock害人家不能靠廣告賺錢 把Adblock暫停就沒問題了
megapx
希望大家沒有看得很痛苦,想要程式碼的人連結在這裡
載下來之後解壓縮然後把裡面的檔案右鍵->[開啟檔案]->[Google Chrome] 再一樣按F12之後點擊console就可以玩了~ 祝大家玩得幸福快樂(?) 玩完以後如果有人威脅你你就可以恐嚇他:「偶會寫程式捏!!給我小心點!!(瞪)」 by正妹碼農 >.0 ----------更---------- 首先感謝各位資訊人員前輩們不吝賜教 還有雖然看不懂但還是看到這裡的新手們 這篇文章本身的用意是希望人們可以接觸到簡單的程式並產生興趣,因此內容主要是分享我當年(約2014年左右)入門學習時的基礎知識與心得。 程式世界浩瀚無垠千變萬化,快速更迭的科技洪流推著你我前進,驀然回首早已不是我們當年學習時的景況,這是碼農們的幸福與負荷,因此非常感謝大家的補充。 小女子不才,仍會在打程式這件事上繼續努力,前輩們的建議我絕對會虛心學習,感謝你們的指教,也歡迎新手們加入我們的行列!
留言
B1想讓大家體會打程式的樂趣>< B2 ٩(。・ω・。)و B3謝謝你的愛心>< B4你不是也會嗎不要跪XD B5我是資管人哈哈...同是資訊人推推 B6沒關係我也不太會寫企劃書ˊˋ各有各的專業 B7其實我不是走前端哈哈感覺前端超猛 B8感謝在臺東玩貓的前室友XD B9因為高併發和高I/O不是php擅長的方面,Node.js在這方面比較強阿~