[好站介紹] 五個學習程式設計的教學網站
5/1 勞動節快樂!
前幾天連續介紹了一些影音教學網站:「CodeRibbit」、「The New Boston」跟「Wap2Learn」,不知道大家看了覺得如何呢?今天要跟大家介紹的,是我在國外網站逛到的一篇報導,介紹了幾個作者覺得不錯的程式設計教學網站。其中有幾個網站我也很愛!也還沒在這個粉絲頁介紹,就借花獻佛,把原文簡單翻譯一下,分享給大家。
首先給大家看一下原文連結:
"Best websites to learn Programming"
http://www.technotification.com/2014/05/best-websites-to-learn-programming.html
鑑於並非每個人閱讀英文都沒啥困難,所以小弟就「簡單」(原諒我的懶惰... :-P)翻譯一下,希望對大家有幫助。該篇文章介紹的五個網站如下:
1. The New Boston
------------------
http://www.thenewboston.org
* 性質:影音教學網站
* 內容:C, C++, HTML, Javascript...等電腦語言
* 難易度:簡單
來了來了!果然英雄所見略同!The New Boston 果然在國外鄉民的眼中是第一名啊~~ 這個網站我已經在前天的文章介紹過,所以這裡就省略了!想回味一下的網友,可以點擊底下的連結:
http://on.fb.me/1GnYM3M
2. Codecademy
--------------
英文: http://www.codecademy.com
簡中: http://www.codecademy.com/zh/
* 性質:實作型教學網站
* 內容:著重網頁設計。包含:HTML, Javascript, CSS, Python, Ruby, PHP
* 難易度:簡單
Codecademy 大約在 2011 年竄起。由於它透過實作的方式教會大家寫程式,不僅少見,也備受眾程式講師推崇。這部分國內有報導,就讓我借用一下:
T 客邦:「Codecademy 讓你一年內學會寫程式,或許能賺更多錢」
http://www.techbang.com/posts/8212-codecademy-makes-you-a-year-to-learn-about-programming
看完相信各位對 Codecademy 應該就有基本認識了。原文沒有「簡中」的網址,我幫各位補上了。目前還沒有繁中網站,不過我想台灣或香港的朋友,看簡體字應該還應付得過去才是。
3. Learn Code The Hard Way
---------------------------
http://learncodethehardway.org
* 性質:電子書、影音教學
* 內容:Python, Ruby, C, Regex(Regular Expression), SQL...。
* 難易度:簡單
這個網站的電子書比它的影音教學出名十幾倍!主要是它的影音教學要錢(一門課約 US$30 左右,也不多就是了),但電子書免費。偏偏它的電子書寫得超好!還被很多人翻譯成各國語言。所以想省錢的可以看它的電子書。如果英文聽力夠好,想聽影音教學,可以付個 US$30 左右試試看。
其實這個網站小弟也在 2012/02/16 於本版介紹過。只不過年代久遠,大家可能忘了。我貼一下當時的連結給大家參考:
http://goo.gl/arYJlD
為了大家方便,若某一版本有簡中或繁中版的,我直接把該網站的電子書連結附在下方,希望對大家有幫助。沒有中文版的,有可能是我才疏學淺找不到,或者該項目太冷門,沒有人翻譯(看到小弟這麼努力,是不是來點虛榮心、幫忙轉寄按個讚咧?哈哈哈~):
- Learn Python the Hard Way
英文: http://learnpythonthehardway.org/book/
簡中: http://goo.gl/t7O3V5
- Learn Ruby the Hard Way
英文: http://learnrubythehardway.org/book/
繁中: http://lrthw.github.io/
- Learn C the Hard Way
英文: http://c.learncodethehardway.org/book/
簡中: http://goo.gl/IujZJk (尚未翻譯完成,有找到完整版的麻煩補一下連結 m(- -)m )
- Learn Regex the Hard Way
英文: http://regex.learncodethehardway.org/book/
- Learn SQL the Hard Way
英文: http://sql.learncodethehardway.org/book/
4. WiBit.Net
-------------
https://www.wibit.net
* 性質:影音教學
* 內容:程式入門、物件導向基礎、C/C++、Objective-C、Java、C#、Python、與腳本語言。
* 難易度:簡單
一句話描述這個網站:「程式初學者的可愛風學習網站」!主頁用許多可愛的圖片,來代表每一門課程。該網站是兩位程式師,以對談聊天的方式(這種錄影腳本比獨白難寫多了... :-P),介紹 C/C++、Objective-C、Java、C#...等課程。而且...完全免費!可愛這種東西用講的很難形容,不妨大家點點看他們的網址,就知道我的意思了!
5. W3School
-------------
http://www.w3schools.com
* 性質:網頁文章教學
* 內容:HTML, CSS, JavaScript, VBScript, PHP, ASP.NET, XML
* 難易度:簡單
老牌的網頁程式設計教學網站!這個網站很久了!當年 YouTube 還沒紅時,它就以滿滿的網頁程式設計範例,風靡國外鄉民們。它的特色就是「範例、範例、範例」,一大堆循序漸進的範例!我蠻喜歡這種教法的。畢竟讓我看一眼跑出來的結果,我有興趣再去研究裡面的程式碼是怎麼寫的,比直接看一本可以砸死唐伯虎那過世的寵物簡單多了... XD。不過它也有缺點:近年來興起的各種 JavaScript 框架,如 jQuery, Angular.js, Node.js...等,它就沒有教了。不過仍無損它在「網頁程式設計」教學的地位!
[2015/05/02 補記] ---------------
感謝 Dennis Kuo 網友補充。W3CSchools 的確已經有 jQuery 與 Angular.js。不過 Node.js 我沒找到。如果有找到的朋友再麻煩補充一下。
另外,對英文苦手的朋友,也可以看看由中國網友熱心翻譯的 w3schools 簡體中文版。網址是: http://www.w3school.com.cn/
-----------------------
今天的五個網站,大家看了還滿意嗎?喜歡的話,麻煩轉寄給你的朋友、或按讚鼓勵小弟一下喔!!
Search
w3school介紹 在 [心得]從js 到jQuery 之四:屬性與樣式- 看板Ajax - 批踢踢實業坊 的八卦
※ [本文轉錄自 Web_Design 看板]
作者: TonyQ (沉默是金) 看板: Web_Design
標題: [心得]從 js 到 jQuery 之四:屬性與樣式
時間: Sun Aug 10 04:09:23 2008
副標容我再強調一下 , 瀏覽器的真正戰場,
不僅僅是 瀏覽器相容 , 也代表著javascript真正發揮作用的地方.
講到這章真的是讓筆者感到萬般無奈 , 從以前作表單必填欄位採取
自訂attr策略, 到設定各種css屬性 , attribute 跟 css樣式 ,
一直都是筆者寫純js時期的痛 , 且聽筆者慢慢道來.
為了撰文方便 , 底下簡稱 attribute 為 attr.
────────────────────────────────
@ css 之前有提到過 , 那什麼是attr ?
沒錯 , 迄今我們一直都還沒介紹過 attr , 所以當然得重新介紹一番.
讓我們用底下一個簡單的img元素當例子
<img src="hi.jpg" width="100" height="200" alt="hello img" />
這是一個 <img> tag , 其中含有四個attr , 分別是 src width height alt.
相信你已經了解屬性對於 tag 的重要性 , 每個元素能用的屬性都有所不同 ,
比方說 <a> 的href , <img> <iframe> 會用的src等.
@我怎麼知道有哪些tag可以用哪些attr?
當然這些都有明文規範 , 可參考w3school 介紹的 html reference.
https://www.w3schools.com/tags/default.asp
點選tags進去後就會看到對應的必要(Required)跟選用(Optional)屬性了.
@現在我知道 attr跟css了 , 那我們要討論什麼?
承本系列首篇「javascript的魔力」一文中所提到的 , javascript大部分
的時間都在異動元件的屬性跟資料 , 而這些東西全部都取決於我們本章要講
的attr跟 css style.
只要一個html 元素內容寫的再多 , 只要一個style="display:none;" , 就可
以默默的躲在頁面的某個隱藏的位置.
所以我們現在要來討論的是 attr/css 的 setter & getter
@什麼是 setter & getter?
setter就是指設定資料的方法 , getter就是指取得資料的方式 ,
這只是個簡單的名詞 , 在此做個解釋.
@ attr setter & getter
我們先從 attr的setter跟getter下手 , 這是有原因的 , 因為style 其實
也是個attr(想想attr的定義) , 後面會再提到另外獨立提css的理由.
我們比較會常使用的attr , 不外乎是像是切換圖片(改變img的src),
或是把某個按鈕設定 disabled.( 變成按不下去的灰色 .)
或是設定某個 text 只能輸入10個字等 (maxlength)
或者是針對 style 這個attr中的 display設定 none 來隱藏元素,
傳統js在大部分的狀況下 , attr就是dom物件的成員 ,
舉個例子 imgNode.src='hi.gif'; //假設 imgNode是 <img>元素對應的物件
當然 , 根據javacript 對物件的定義 , 這段也可以改寫成
imgNode["src"]='hi.gif'; 這兩個表示法是相同的 .
當然這只針對於比較一般性的attr , 比方說當我們在寫 class 這個 attr時 ,
就得改用 imgNode.className 來做設定.
至於要取得資料 , 當然是就直接取 imgNode.src 的資料來用 .
@聽說傳統 dom 有支援 setAttribute/getAttribute 的方法?
沒錯 , 但是它的瀏覽器支援問題多多 , google "setattribute firefox" ,
可以看到眾多網路上的朋友們為這個問題傷神的痕跡.
主要的問題仍然是在於 className跟event 的綁定上 ,
不是很適合透過 setAttribute / getAttribute .
另外還有 style 這個屬性當然也有許多的麻煩 , 我們等到後面再談.
@那jQuery怎麼做?
setter
$(imgNode).attr("src","hi.gif"); //註1
getter
$(imgNode).attr("src") (e.g. alert($(imgNode).attr("src"));)
就這麼簡單 , 中間內容他都幫你做掉了 , 讓你完全不用針對js做出任何讓步,
通常你只要記得html怎麼寫 , attr就怎麼下 , 你不需要思考 class這個attr
到底是class還是className , 只要記得html是怎麼寫就ok了.
以這例子來說.
$(imgNode).attr("class","hello");
$(imgNode).attr("className","hello");
對jQuery來講是一樣的 .
(當然 以處理class而言 , jQuery另提供addClass跟removeClass
做增刪的動作 , 優點是可方便疊加/移除 特定class.)
測試class attr 能在fx跟ie正常運作的簡單實例於此
https://tonyq.org/jqtalk/jq4_ImgAttr.html
註1:
當$()傳入dom元件,會自動轉成該元件的jQuery物件 .
@事件/css 也可以用attr setter/getter嗎?
理論上可以 , 但目前仍有部份相容性問題 , 經測試
attr("onclick", "alert('hi')") 就只能在fx上運作,
css的部份測試過底下的敘述是可行的 ,
attr("style","border:1px solid red;position:absolute;left:50px;");
但考慮到相容性問題 , 建議還是不要使用這種作法,
舉例來講:$("img").attr("style","opacity:0.5;");
由於opacity是ie6不支援的屬性, 在ie6底下就會有問題.
@css setter/getter
這在傳統 js coder來講我個人覺得簡直是惡夢...
看看這張表 , https://www.w3schools.com/htmldom/dom_obj_style.asp
為了設定一個 background-color , 你得了解他其實是得調用
node.style.backgroundColor
本來中間有 - 的屬性幾乎都改為駱駝式的寫法 , -拿掉 後面的字首字大寫,
當然你也可以選擇 style.cssText , 就可以像是在寫 attr style 一樣,
cssText的瀏覽器相容性問題我沒深究 , (事實上我很少用這個屬性),
因為要自己寫 style 的資訊實在是太麻煩也太累贅了 ,
不僅要查表 , 有些功能還不見得支援都一致.
(透明度 Opacity 就是一個例子 , 在ie6底下得透過filter實現 ,
fx底下則是 css屬性就有支援 Opacity.
諸多類似的問題 , 實在是畫面設計與程式設計師心中永遠的痛.
@ jQuery怎麼做?
他的寫法很簡單 , 我們都知道css是key-value成對的一組屬性 ,
所以設值可以寫成類似這樣
$("td").css("background-color","red").css("color","white");
而取資料則是只給一個參數 (e.g. $("td").css("background") );
一樣 , 在這裡又幫我們把思緒簡化回 純css領域的思考 ,
再也不用去煩惱表怎麼查 , 資料怎麼取 ,
甚至於他還會盡力幫我們達成瀏覽器相容.
以前面提到的opacity 為例
$("table").css("opacity","0.5");
他就會自動幫我們處理在ie6底下跟fx底下的瀏覽器相容問題.
雖然不見得完全能夠處理100%瀏覽器相容的問題 , 比方說我曾提過
需要用 bgiframe 解決的select z-index 問題 , 但是我完全能了
解他的確盡力了. =.=a
@其實總歸一句 , 本章要介紹的就是 attr 跟css兩個 jQuery function ,
但是這兩個function實在是有其歷史意義 , 所以我特地花了些篇幅撰寫.
而 jQuery所幫我們做的 , 在這一點上主要是幫我們簡化在html->js css->js
這兩件事情的過程中 , 能夠讓我們的思緒更加一致 , 而免於被打斷的困擾.
減少不需要額外記憶跟負擔的事情 , 對程式設計師來講是一件很重要的事情 .
本章很顯然寫的是真的較為雜亂了些 , 希望各位讀者能了解 ,
很多問題是經年累月的經驗所累積下來的 , 相信各位 js developer們 ,
能夠了解為什麼attr 跟 style的設定是如此地繁瑣與充滿著雜訊 .
而且 attr跟css setter 又幾乎是必做不可的設定之一 ,
如 show跟hide 這兩個 css setter在jQuery也被做成獨立函式 ,
足見其意義與使用頻率.
我傾向於將事情交給專家 , jQuery既然研究過跨平台議題 ,
那我將問題交給他 , 讓他去處理而僅在必要時注意細節 ,
這也是我為什麼如此推崇 jQuery 這個穩定而簡單的lib的原因.
@體驗時間
本週要介紹的是 thick box .
https://jquery.com/demo/thickbox/
他是用來在一個頁面中 , 直接載入另一個頁面的解法,
因為它是跨頁的處理 , 自己寫一個demo倒不如拿現成的 ,
我直接用今年二月初在系上協助學弟妹做短期的java 課輔義工 ,
當時所建立的網站來做sample .
(網站失連中...)
站中幾乎所有站內連結都是用thickbox效果做的 ,
我也在原始碼上加上註解 , 請看我註解標示的區域了解thickbox如何操作.
比較有趣的是在 thickbox你不需要去呼叫他,他是透過設定
一個class , 他會在onload時去針對設定為該class的元素做處理.
這也是plug-in實做時可以採用的一種方案.
(btw , tab panel 純粹是透過 fadeIn fadeOut效果做到的 ,
這兩個effects 也是jQuery內建的.
head內的script都是 tab penl的效果而寫的 , 可以不用理會.)
---
因為這個主題很簡單 , 所以反而花了更多的時間整理資料 ,這是所謂的莫非定律嗎?:P
讓我們將目光繼續放在下一篇吧 , 就算介紹的不見得很完善 , 嘗試總是一件好事.
下一篇要講的主題是 traversing , 網頁元素之間的巡覽 ,
撰文還有很多可以改善的地方 , 還請各位版友多多批評/指教 .o(_ _)o
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.132.59.247
--
What do you want to have ? / What do you have?
從書本中,你可以發現我的各種興趣。
從CD中,你可以瞭解我所喜歡的偶像明星。
或許從文字你很難以瞭解一個人,但從物品可以。
My PPolis , My past. https://ppolis.tw/user/Tony
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.132.59.247
※ 編輯: TonyQ 來自: 61.224.239.208 (12/15 23:59)
... <看更多>