R紫
忍不住發廢噗該一下
(可能晚點會刪點廢文改正經的筆記噗)
CS50 week5突入,看到CSS/HTML/JavaScript感覺真好 親切與安心感MAX
スズ
恭喜!(拍手)
スズ
那這週我就跟著看戲了
都沒學過
R紫
不考慮沾個水嗎 (不知他影片有沒有公開
看本周的作業好像是生一個網頁出來,天啊好親切的主題(流淚
象 象
其實我覺得網頁比較難寫XD
R紫
作業要求沒有javascript,本週佛心來著
慢心
接下來一定會有很鬼畜的展開,這可是CS50
慢心はダメ
會感覺簡單也應該只是因為作業沒開虐
R紫
象 象 : 主要難點是在相容方面嗎?還是不可預期的使用方式?(好好奇)
象 象
我覺得是很難 debug
C 語言有東西寫錯 build 的時候就能抓出部分問題
執行時也有滿多工具可以分析(gdb, valgrid等等)
甚至能解譯成組合語言看他實際執行什麼指令

javascript 就很難 debug
一個打錯字就可能找半天
R紫
錯字
這下靠北了
象 象
而且 javascript 有比較高階(抽象)的語法 不像 C 那麼直觀
ex. chain function/ lambda/ closure

要寫一個工具要不斷的查文件
編輯器的 autocomplete 通常沒法自動找到 function/member

還有網頁的 framework 更新超快
三個月流行就變一波 要不斷追新的挺累XD

雖然說很多缺點 但她還算是個方便的語言
也能做很多視覺化的東西
像是.......下紫雨(?
Coding Challenge #4: Purple Rain in Processing
象 象
R紫
追新番都不會那麼勤,果然是高年薪低時薪⋯⋯
另外這人打字也太快了吧而且全都是沒碰過的東西wwwww 被當菜虐啊 不,是真的菜
象 象
這 youtuber 滿厲害的
對圖像頭腦很清楚 才能那麼快寫出這些
這頻道很多影片都不知他做這幹啥XDDDDD
但算滿有趣的 CS50 的 javascript 學一些後可以找他的範例做做
有圖像成就感比較高
R紫
來了來了熟悉的真‧硬漢課程CS50
https://images.plurk.com/5bx1ZerQJoTP4N6d0zsvQW.png
前4週被虐完沒死後看到這個結構圖竟然只是很平淡的接受了原來網頁也是一種tree的事實
一年前的我大概只會宇宙級別的黑人問號ㄅ
CS50: 用心良苦
R紫
前幾天輕率說出html真讓人心安啊果然只是菜逼八什麼都不懂才會講出來的天真發言wwwww
スズ
所有可以畫成樹狀圖的都是啊
包含你現在正在用的檔案總管
R紫
之前自己啃書學html跟css的時候完全沒有這種概念,先給C洗臉還是有用的,腦袋裡儲存的概念真的有差
象 象
C語言編譯也會建tree
C 學好基礎夠 學其他語言比較容易知道在做啥XD
R紫
雖然本週的課程內容是以前有試著自學過的東西,但依舊收穫滿滿 !
https://images.plurk.com/4nC82MECNNZLNoASLZsj0b.png
DHCP: 提供IP
https://images.plurk.com/1b88jfkPHjmzO4I6tjP0X7.png
DNS: 把數字轉成文字
https://images.plurk.com/1G02US1NdTHcqst6ZwGONq.png
PORT: 同一棟樓裡辨別不同收件人的門牌
都是聽過但其實一直沒搞得很懂的基礎
R紫
[JavaScript]
x = 44; → 宣告global variable x = 44
var x = 4; → local variable
欸以前都不知道,終於闢謠
R紫
array改用[]來宣告
e.g. var num = [0, 1, 2, 3, 4];
R紫
JavaScript的array竟然可以合法混裝不同型態的資料 !!!
var mixed = [0, true, 3.1415, 'text'];
R紫
哇出現沒看過的東西了
Object (JavaScript) 用{}包起來
var car = {year: 1963, model: 'Beetle'};
象 象
最後 object 可以查查看 JSON 的格式
網路傳資料也滿常用到
R紫
說到網路傳資料,這禮拜都在看Welcome to The TCP/IP Guide!
結果作業一個字都還沒動www
--
JSON與Object:
[筆記] JavaScript中物件(object)和JSON格式的轉換

原來可以這樣用啊... 感謝火力支援
R紫
--
果然事情沒有憨人想得如此單純
https://images.plurk.com/49ovaU2iln7q51gm3GTNYh.png
37-39行正常動作
35行是想要作出滑鼠游標移動到表格文字上,網頁背景會依照每一格裡面的色碼來改變顏色 ←然而毫無反應
用javascript, mouse cursor跟background color change估狗了一下,感覺寫法都跟想做的功能微妙錯開...35行這樣寫為何不能讀呢呃呃呃...
R紫
姆還是應該先getId然後依照ID內容變換背景顏色...所以其實需要寫兩個功能(aha)?
象 象
看起來頗微妙 感覺思考跳太快了XDDDD
35 的 http://this.id 看起來不會有東西 妳想取得什麼內容呢?

如果要達成你的要求 我想應該要要對每一個顏色的 td 做 onmouseover 的 event, 然後在幫 table 做對應的變色
R紫
理想是這樣: 滑鼠滑過去後,可以直接抓到表格中每一格的十六進位值色碼,然後網頁背景顏色變換為該色碼
35那行我是從課堂裡的code借來改的,但課堂上示範的內容是從下拉式選單選取字型大小XX後,把某段文字的大小改成XX ←這樣
或是我應該先從按下按鈕後改變網頁背景顏色開始寫寫看 好像有點跳太快了,javascript的語法串成一坨其實還沒有看得很懂Orzz
R紫
https://images.plurk.com/1HDTHvnZ2wwgAil3aePc3J.png
課堂上的示範碼長這樣w
象 象
https://images.plurk.com/5DOYYFJVNNyJFkd0baAtfT.png
簡單範例是這樣
要知道
1. 如何選到想要的 td -> 讀 selector 的語法
2. 如何變成該 td 想要的顏色
-> 給 td 埋 data 並在 code 中取得

範例寫法每個 td 都要寫一次 moussover event, 可以再優化
R紫
喔喔喔謝謝大,人在外頭,回家研究研究
R紫
https://images.plurk.com/7e6whQqtcSxlwLRzzRbOlG.png
感受到什麼叫debug困難
只有FF0000的按鈕按下去會執行javascript是什麼魔術......
R紫
靠北改成文字(red, green, blue, white) 就正常執行 !
所以問題是#字號嗎?! 你她嗎...(自我黑人問號
R紫
https://images.plurk.com/qzdu1NT5iTkqS1iJRU3EG.png
不知道為什麼code動了/不動了
象 象
用chrome按f12開開發者模式看看出現什麼問題
想印log可用 console.log()
剛游完泳 回去幫妳看看怎麼回事XD
R紫
象 象 : 啊啊啊啊原來F12是這樣用的 (CS50: told u)
告訴你開發者模式很重要但先不告訴你他原來還可以用在這地方
太自信了我根本把CSS跟javascript都還回課本 感覺得惡補一下
R紫
Home page (CS50 Promblem Set 5)
這種不完全燃燒的啊砸感覺 可惡...
象 象
一看來以為是課程的 demo 頁面, 原來是妳寫的....這就是對美感的差距嗎
話說有看到個小小 bug
在 table.html 連到 index.html 有打錯字XD
R紫
象 象 : 您人真是太善良 兩三年前自己搞的blog (完全從頭寫,找一個免費的獨立空間放) 比現在寫的這個華麗不知幾百倍
其實好像不只那邊有錯字,我修一下重新上傳 感謝提醒www
象 象
原來妳還從頭寫過 blog, 超 SHOCK!!
那很不簡單啊!!
R紫
現在應該整個掛了,也忘記當時的code我到底有沒有備份
寫好玩的啦,只有用到html跟css,更新日記就是很原始的直接更新原始碼 (太智障惹ㄅ)
拿來放UL的對戰影片 (實在是
啊對惹錯字修正了,現在應該正常了 (F5一下應該就OK了)
象 象
看起來正常了!
我看不到妳 code 怎寫 但想說提一下可能會有幫助
建議要寫出像下方這種 只要在 td 指定屬性即可
javascript 的 code 不須重複很多遍
https://images.plurk.com/25rvfyjm68qZiouE3kCEs6.png
PS. for 迴圈如果用 var 會悲劇
R紫
象 象 : !!! 就是這個
大,感謝您,我就在想說這麼簡單的功能怎麼可能只能copy paste 然而就是無法找到正確的關鍵字
不過實際寫起來的內容比我想像的複雜不少hmmm
象 象
這要下關鍵字超困難XDDDD
把問題分成兩個部份想會好些
1. 取得所有 td tag 物件
2. 對這些 td tag 物件設定 event

我也查下文件才知怎寫...for of 查了才知道, selectall 的 tr > td 是在測試XD
而且還踩了個雷 如果把 for 中的 let 換成 var 結果會不一樣
原因可能等後面課程再解釋 有點複雜XD
R紫
現在尷尬的是...JS被我基本全還給參考書了,看到示範碼還要再去查那到底是功能還是自定義變數
明天去公司問MIS借書來看一下好了QQ"
CS50 week6已經衝入python了但這語言也太方便了吧 (震驚
象 象
python 頗好用
我在工作上都用 C & python
雖然 python 效率差了些但真的是個方便的東西

話說 js 在 CS50 就這樣一周過水就沒了喔XD
R紫
簡直比過水還不如,week5作業甚至只要求html跟css
剛剛看了30分鐘的week6課程+翻了下作業,不確定還有沒有js的要素輕如鴻毛
js跟jquery應該可以弄出蠻多有趣的效果,但CS50看起來沒打算花太多時間在這上面,是不是js能在網頁上做的python都可取代啊 (aha)
象 象
python 跟網頁相關只能做後端 ex. server
要做視覺呈現比 HTML+JS+CSS 複雜許多 通常只是呈現圖表 or gamedev (之前我貼的影片能看到 HTML + JS 多強)
python & js 的用途較不相同
可能 CS50 要給的是 overview, 對於不同面向的語言都介紹一下
學生之後可依照需求往想要的方向發展
R紫
姆果然還是術業有專攻呢 感謝您簡單又清楚的解說
我覺得CS50基本上是走一個給學生提示,然後讓大家各自摸索細節
如果說JS比較偏向做效果的話,可能被快速帶過的原因就是...網頁不美他還是可以用吧(欸
載入新的回覆