2015年3月30日 星期一

Coding for fun 快樂寫程式指導手冊:第六堂課

第六堂課 設計自己的作品 (課程網址:http://coding4fun.tw)


章   節

6-1 remix
什麼是 remix 呢?re是「再一次」的意思;mix是「混合」的意思,進一步的說,mix 就像是攪拌蛋糕的材料、混合不同顏色來產生另一個顏色等等。
在 Scratch 中應用 remix,能得到什麼樣的幫助呢?
我們在前面的課程中,會提出一些例子讓同學做修改。同學們可以從這些例子當中得到靈感,也許是跟著原作者的方向,繼續創作;也許是更改為完全不一樣風格的作品。
在Scratch 網站中,有很多不一樣風格的作品,同學可以嘗試去更改他們,remix 它們,創造出不一樣的作品。
6-2 條件
條件,也就是 condition。
什麼是條件?先想一想在生活中我們如何談條件。比方說:
  • 如果(肚子餓)就(吃飯)
  • 如果(渴了)就(喝水)
  • 如果(功課寫完了)就(洗澡)否則(繼續寫功課)
  • 如果(洗過澡了)就(睡覺)否則(去洗澡)
是不是常常跟家人討價還價呢?
在Scratch 和一般的程式語言中,我們常常會用到語法:「if... then…」。if 是「如果」的意思;then 是「然後/就」怎麼樣的意思。比方說,把前面的句子做置換,就變成了:
  • if(肚子餓)then(吃飯)
  • if(渴了)then(喝水)
相對於 Scratch 的積木就是「如果__就」這個積木。在六角形的框框中,就是我們的條件。當這個條件成立的時候,我們就會執行這個積木裡所包含的所有積木。
另外一個語法加入了else,是否則的意思。比方說,把前面的句子做置換,就變成了:
  • if(功課寫完了)then(洗澡)else(繼續寫功課)
  • if(洗過澡了)then(睡覺)else(去洗澡)
相對於 Scratch 的積木就是「如果__就__否則_」這個積木。在六角形的框框中的條件成立,就執行第一個空白處的所有積木;否則就執行第二個空白處的所有積木。
請同學下載範例,試著了解這兩個積木的使用方法。

下載 範例
6-3 True&False 介紹 True 和 False。
True 是真的,成立的意思。False 是假的,不成立的意思。
點選小測驗來釐清什麼是 True,什麼是 False。

下載 測驗
6-4 Boolean Boolean 在程式設計中用來表示兩個值, True 和 False。除了這兩個值,沒有其他的意義。
Scratch 中積木的六角形,要填入 Boolean 值。這四個積木「如果__就__」、「如果__就__否則___」、「等待__」與「直到___前都不斷重複」都會判斷六角形裡的值是 True 還是 False。
同學可以寫程式來試試看!
後面兩個積木「等待__」與「直到___前都不斷重複」需要在應用中理解,所以學生還不太懂也沒關係。
6-5 內功 畫筆積木 讓孩子探索畫筆積木中的所有積木。等一下有小測驗等著大家喔。
6-6 小測驗
6-7 解說
鼓勵孩子通過所有的測驗,如果沒辦法完全答對也沒關係,下面有解說。看完解說後,再回頭試試這些功能。完全答對的同學,也要看解說;因為魔鬼藏在細節中,老師會做詳細的解說。
6-7:解說。

下載 內功之畫筆積木
6-8 自動繪圖 請同學看看這個程式是如何做到這個效果的。讓孩子讀程式,培養孩子讀程式的能力。大部份的程式積木都已經教過了。

下載 範例
6-9 運算子 Operator,中文稱為運算子。Operator 在 Scratch 中分為「一般運算」與「邏輯運算」。
  • 一般運算,像是加、減、乘、除,或是字串的運算。
  • 邏輯運算,就是要判斷是 True 或是 False。做邏輯運算的程式積木,是由六角形所框住,它的結果只有兩種,True 或是 False。
6-10 內功 運算積木
6-11 解說一
6-12 解說二
6-13 解說三
讓孩子探索運算積木。
6-11:說明一般運算的算數積木,可以做數字計算。
6-12:說明一般運算的字串積木,可以做字串的處理。
6-13:說明邏輯運算的積木。
這些積木的介紹對學生而言,並不會很清楚。主要還是要以寫專案、練習的方式,才能真正的理解。
6-14 作業
這是第六個作業—不設限的專案。也就是說,可以選擇自己喜歡的題目。
喜歡藝術、動畫或遊戲,可以到參考相關網址的作品。
同學可以創作自己的作品,或是將喜歡的程式作修改做 remix,都可以。
請將作業繳交到 http://scratch.mit.edu/studios/587714。
至少要花 30 分鐘以上來設計作品。如果是一群學生,告訴他們,下次上課會分享他們的作業內容,請用心完成。請同學將作業上傳到作業網址。
作業網址
藝術範例
動畫範例
遊戲範例

2015年3月29日 星期日

Coding for fun 快樂寫程式指導手冊:第五堂課

第五堂課 短篇故事 (課程網址:http://coding4fun.tw)

章   節
內   容  與   指  導  說  明
5-1 更多積木 介紹「更多積木」。「更多積木」讓我們可以定義自己的積木。
在這裡附了一個範例檔案。

  • Scratch Cat 定義了「run away」(跑開)與「look」(看)兩個積木。
  • Dog 定義了「tail」(搖尾巴)與「chase」(追逐)兩個積木。

定義自己的積木可以讓程式看起來更清楚、簡潔。
自己定義的積木,要使用「定義」積木做開頭,把想要的動作黏在下方就可以了。

下載 範例
5-2 製作第一個積木 示範如何製作自己的積木。請同學試試看!
5-3 有輸入值的積木 接續 5-2,使用自己定義的積木,是不是比較乾淨、清楚呢?
另外介紹了如何在自己定義的積木裡傳入「輸入值」。
請同學試試看!
5-4 積木的應用 提供範例,示範如何重複使用自己定義的積木。
此外,也介紹如何「提問」,「提問」所得到的答案,會放在「答案」裡喔。

下載 範例
5-5 對話一
5-6 對話一 解說
提供範例,示範兩個角色間的對話。這兩者的對話,其實是經過設計的,彼此講話的時間必須錯開,而且等待的時間也要小心調整。
5-5:請同學研究這兩個對話是如何造成的。
5-6:在這個範例中,如果「等待_秒」的數字調整的不對,會發生什麼事呢?
請同學試試看!

下載 範例
5-7 蘿蔔蹲
5-8 蘿蔔蹲 解說
這是一個「蘿蔔蹲」的範例。當點選「藍色」蘿蔔圖案時,戴「藍色」手套的女孩會全部蹲下來。但是點選「黃色」蘿蔔圖案時,只有一位戴「黃色」手套女孩蹲下。
5-7:請同學試著修改程式,讓所有戴「黃色」手套的女孩,在點選「黃色」蘿蔔圖案時,通通會蹲下。
5-8:解說範例中如何「廣播」與「接受訊息」。而廣播訊息,並不限於一對一,而是所有等待相同訊息的程式會同時執行。

下載 範例
5-9 對話二 利用圖解說明範例中,如何運用「廣播」與「接受訊息」的方式來達到 5-5 的效果。

下載 範例
5-10 Debug it!-1
5-11 Debug it!-1 解說
進行的方式可以是單人,或是小組進行。當同學解答出來的時候,可以請他擔任小老師教其他同學。
透過 Debug ,可以幫助學生了解自己是不是真的會使用這些積木。遇到問題請鼓勵學生盡力地想想看,如果沒有頭緒,看解答也可以,然後再回去試試看。
老師的答案並不是唯一的答案,不是標準答案。有不一樣的解決方法也很棒!
5-10:第一個挑戰的預期效果是:Scratch Cat 教 Gobo 如何發出「喵~」的聲音。但是Gobo 並沒有發出「喵~」的聲音。為什麼呢? 請同學debug!
5-11:解說影片。這裡複習了「更多積木」的應用方式。

下載 專案
5-12 Debug it!-2
5-13 Debug it!-2 解說
5-12:第二個挑戰的預期效果是:Scratch Cat 要從 1 數到使用者提供的數字。但是 Scratch Cat 總是從 1 數到 10 為什麼呢? 請同學debug!
5-13:解說影片。這裡複習了兩個重要觀念,一個是「提問/答案」的應用;一個是「更多積木」的應用。

下載 專案
5-14 Debug it!-3
5-15 Debug it!-3 解說
5-14:第三個挑戰的預期效果是:Scratch Cat 要一個一個地呼叫 Gobo 的朋友,Giga、 Nano、Pico、和Tera。但是他們同時出現了。請同學debug!
5-15:解說影片。先解說預期的效果。如果學生不清楚效果是什麼,可以先看一下影片前段的示範,再回去解題。鼓勵學生有不同的解法。在影片的解說中主要是說明「廣播訊息」與「廣播訊息並等待」兩者的差別。

下載 專案
5-16 Debug it!-4
5-17 Debug it!-4 解說
5-16:第四個挑戰的預期效果是:Scratch Cat 和 Gobo 在練習上下跳 。當 Scratch Cat 說「jump」, Gobo 應該要上上下下地跳。但是 Gobo 沒有跳。請同學debug!
5-17:解說影片。這裡複習「廣播」與「接受訊息」的應用方式。

下載 專案
5-18 Debug it!-5
5-19 Debug it!-5 解說
5-18:第五個挑戰的預期效果是:按「向右鍵」時,要切換背景。一開始的時候,恐龍應該要躲起來,直到背景換成禮堂(auditorium)。在變換為禮堂時,恐龍不僅出現了而且跳一段舞。但是恐龍一直都出現在畫面上,而且不是在對的時間點跳舞。請同學debug!
5-19:解說影片。這個挑戰在於學生對題目的理解。家長或老師可以先看完解答後,在給予學生口語上的提示。

下載 專案
5-20 作業
這是第五個作業,要做個短篇故事。
可以做自己的故事、笑話、或是以卡片的方式來呈現。別忘了音樂可以增加氣氛。也可以結合節日做設計,像是母親節、父親節、聖誕節、生日卡片等等。
請將作業繳交到 http://scratch.mit.edu/studios/587714。
至少要花30 分鐘以上來設計作品。如果是一群學生,告訴他們,下次上課會分享他們的作業內容,請用心完成。請同學將作業上傳到作業網址。

作業網址

2015年3月28日 星期六

104年「Coding for fun」臺北地區程式⼯作坊 ⾏前通知


104年「Coding for fun」臺北地區程式⼯作坊 ⾏前通知

目的:  給孩⼦「快樂學程式, 創意學程式」的機會,培養未來競爭⼒。
學習⽅式:  提供孩⼦共學「程式設計」的環境,以線上課程⾃學為主。

感謝:
  1. 真理大學學⽣志⼯提供現場 Scratch 問題說明與解答
  2. 展賦教育文創提供優質場地供我們使⽤
  3. 志⼯媽媽吳芝瑛提供上課期間⾏政⽀援與服務(手機 0916-409-389)
  4. Kids Coding Studio 的 Shalley老師 4/11 和 6/13 到教室予以協助


上課時間:  104年4⽉11日~ 6⽉13日每週六下午 2:00~4:00, ハ共10堂課。
上課地點:  新北市板橋區明德街17號1樓 (⾃捷運府中站⾛路約3~5分鐘)。
費⽤:  1,500元整。內含押⾦ 500元, 全勤者退押金。

上課請攜帶 (1)筆記型電腦 (2)筆

2015年3月17日 星期二

Coding for fun 快樂寫程式指導手冊:第四堂課

第四堂課 音樂影片 (課程網址:http://coding4fun.tw)


章   節
內   容  與   指  導  說  明
4-1 探索藝術檔案 給學生一個關於藝術的範例,總共有 5 個角色。請同學看一下程式,為什麼這些角色會有這些變化?

下載 範例
4-2 示範動畫 說明如何利用多個造型做出動畫。請同學試試看!
4-3 內功外觀積木 讓孩子探索外觀積木中的所有積木。特別是特效下有 7 種變化,每一個都試試看。等一下有小測驗等著大家喔。
4-4 小測驗
4-5 解說一
4-6 解說二
4-7 解說三
進行外觀積木的測驗。鼓勵孩子通過所有的測驗,如果沒辦法完全答對也沒關係,下面有解說。看完解說後,再回頭試試這些功能。
4-5:介紹「隱藏」、「顯示」、「設定造型」、「下一個造型」與「設定背景」等積木。
4-6:介紹特效積木以及如何清除特效。
4-7:介紹設定角色大小的積木、「移至最上層」、「往回走__層」等積木。

下載 內功之外觀積木
下載 範例
4-8 Debug it!-1
4-9 Debug it!-1 解說
進行的方式可以是單人,或是小組進行。當同學解答出來的時候,可以請他擔任小老師教其他同學。
透過 Debug ,可以幫助學生了解自己是不是真的會使用這些積木。遇到問題請鼓勵學生盡力地想想看,如果沒有頭緒,看解答也可以,然後再回去試試看。
老師的答案並不是唯一的答案,不是標準答案。有不一樣的解決方法也很棒!
4-8:第一個挑戰的預期效果是:當你點一下 Scratch Cat時﹐它一邊跳舞﹐而且有鼓聲伴隨著。但是他跳一下就靜止了,只剩下鼓聲還進行著。為什麼 Scratch Cat 不跳了呢? 請同學debug!
4-9:解說影片。

下載 專案
4-10 Debug it!-2
4-11 Debug it!-2 解說
Debug 時,同學要看清楚預期效果是什麼,耐心地了解文意,才能正確地解決問題。
4-10:第二個挑戰的預期效果是:當綠旗被點一下時,Pico應該要向Nano移動。當Pico碰到 Nano 時﹐Pico 應該要說「碰到你了」﹐Nano 要回應「輪到我了」。但是為什麼 Pico 沒說話呢?請同學debug!至少要花 3 - 5 分鐘,別急著看解答喔~
4-11:解說影片。

下載 專案
4-12 Debug it!-3
4-13 Debug it!-3 解說
4-12:第三個挑戰的預期效果是:畫一張開心的臉。但是畫筆從眼睛移到嘴巴時﹐卻沒有停筆。請同學 debug!
4-13:解說影片。

下載 專案
4-14 Debug it!-4
4-15 Debug it!-4 解說
4-14:第四個挑戰的預期效果是:當綠旗被點一下,花開的動畫會進行,直到花盛開。但是花盛開後﹐動畫又重新開始﹐不會停止。請同學 debug!
4-15:解說影片。

下載 專案
4-16 Debug it!-5
4-17 Debug it!-5 解說
4-16:第五個挑戰的預期效果是:當綠旗被點一下﹐生日快樂歌開始播放。當歌播放完﹐就會秀出指令「點我來吹熄蠟燭」。但是生日快樂歌還在播放的時候﹐指令就出現了。請同學 debug!
4-17:解說影片。

下載 專案
4-18 註解 在程式區中按選空白處會出現兩個功能:一個是「clean up」清理桌面,一個是「新增評論」。「新增評論」其實應該翻譯為「註解」比較恰當。
註解像是留在程式中的筆記,說明程式的功能。在日後 debug 的時候,會有所幫助。
4-19 音樂影片 點選這三個範例,看看這三個範例是如何做出來的。

範例一
範例二
範例三
4-20 作業
這是第四個作業,要做個音樂影片。
要有很酷的造型,也要有時髦的節奏或音樂。
請將作業繳交到 http://scratch.mit.edu/studios/475517。
至少要花30 分鐘以上來設計作品。如果是一群學生,告訴他們,下次上課會分享他們的作業內容,請用心完成。請同學將作業上傳到作業網址。

作業網址

2015年3月14日 星期六

Udacity 網頁前端技術課程概要整理 (Web front end technology)

Udacity 課程地圖網頁前端技術課程


這是針對 10-18 歲學生所篩選的課程,以自學為主,共學為輔。為什麼沒有推薦 Codecademy 的課程?主要是因為這個年紀的孩子對於「自己讀文章,然後解題」的學習模式是比較難接受的。

Udacity 的課程雖然大多沒有中文資源,但這也是我們想讓孩子認清的一件事:英文很重要。買了中文書來讀,即使學得很快,但是對於他們現階段最好的投資,就是努力把英文學好。未來最新的科技,都得透過英文來學習。


此外,和市面上課程不同的是,我們不是職業訓練所,而是夢想發展地。我們希望能聚集一群孩子共築夢想。



Intro to HTML and CSS
Not Your Typical Intro to Web Dev
ud304
Lesson 1 - From Design to CodeDiligently employ a code/test/refine strategy as you precisely and deliberately translate initial design documents into static web pages. You'll also investigate the Document Object Model (DOM) and its implications for web development.
Lesson 2 - Your Own FrameworkTake pride in creating and personalising your own multi-platform, responsive CSS framework for publishing your professional portfolio projects to the web.
Lesson 3 - Learning and Using BootstrapStrategically investigate an existing professional CSS framework as you use it to build a website using responsive design principles while maintaining code readability.


JavaScript Basics
The Programming Language of the Web
ud804
Lesson 1: Getting Up and Running Learn about the tools we'll be using throughout the course and begin modifying web pages with a little bit of code.

  • Introduction of résumé project
  • Components of the résumé
  • Introduction to browser developer tools
  • Running commands on the console
  • Appending elements to the page
Lesson 2: Data Types Dig deeper into JavaScript as we introduce you to the building blocks of the language as you write more complex code using variables and advanced data structures like JSON, Objects, and Arrays.

  • Variables
  • Strings
  • Evaluating values
  • Arrays
  • Objects
  • JSON
  • Validating JSON
Lesson 3: Flow Control Finish the résumé while you learn how to make your code more modular and reusable by using conditional statements, loops, and functions.

  • Conditional statements
  • For and while loops
  • Functions
  • Encapsulation




Intro to AJAX
Making Asynchronous Requests with jQuery
ud110
Inspiration
  • What is AJAX?
  • Why use an API?
  • How can you identify AJAX requests in existing websites?
Perspiration
  • Clone the Move Planner repository
  • Implement the Google Streetview API
  • Implement the NY Times API
  • Error handling normal AJAX requests
  • Implement the Wikipedia API
  • Error handling JSON-P requests
Meditation
  • What did you learn?
  • How else can you apply AJAX to make speedy page loads?
  • Go customize!

Intro to jQuery
Manipulating Websites with Ease
ud245
Lesson 1: the DOM, $ and Selectors
  • The jQuery Object ($)
  • Basic DOM Structure
  • Selectors
  • Filters
Lesson 2: DOM Manipulation
  • Reading jQuery Documentation
  • Accessing HTML Attributes and Content
  • Modifying HTML Attributes and Content
  • Adding and Removing DOM Elements
  • Iterating with .each()
  • Using jQuery to run on DOM ready

Responsive Web Design Fundamentals
Great Experiences on Any Device
ud893
Lesson 1 - Why Responsive? What is responsive web design and why is it important? What kinds of devices should we be targeting with our design? How can we best leverage the different capabilities of each device to provide great experiences to users? You’ll also make sure that your development environment is ready to go.

  • What is responsive design?
  • Why does responsive design work for any device?
  • Remote debugging and emulation in the browser
Lesson 2 - Starting Small The best way to get started is to start small and build up. In this lesson, we’ll cover the key components that make a site great on a small screen, including setting the viewport, adding content and sizing the content to the viewport. You’ll start the home town site project, by making sure that it looks good on a small screen.

  • Why start small and build up?
  • What is the viewport?
  • Sizing content the content to the viewport
  • avoiding static sized items
  • Touch targets, and why they should be large
Lesson 3 - Building Up Once you’ve got a page optimized for small screens, it’s time to start thinking about how they’ll look on larger screens. Learn how to use CSS media queries to add breakpoints that change the layout depending on the screen size or other device characteristics.

  • CSS media queries
  • What is a breakpoint, and how to choose one
  • Using the CSS flexbox to modify layout
Lesson 4 - Common Responsive Patterns Now that you’ve got the basics of responsive design down, you’ll learn about and practice some of the common layout design patterns used across sites. You'll also iterate on the home town site project, creating breakpoints for tablet and desktop layouts using the patterns from this lesson.

  • Mostly fluid pattern
  • Column drop pattern
  • Layout shifter pattern
  • Off canvas pattern
Lesson 5 - Optimizations Learn strategies for minor breakpoints used to adjust the margins or padding on an element, or increase the font size to make it feel more natural in the layout. You’ll also learn about strategies for dealing with tables and optimal text readability. At the end of the lesson, you'll iterate for the last time on the home town site, adding minor breakpoints to really make the experience stand out.

  • Minor break points
  • Optimizing text layout
  •       -  font size
  •       -  optimal line length
  • Responsive tables, and strategies for dealing with them


JavaScript Design Patterns
Organizing code in a disorganized world
ud989
Lesson 1: Changing Expectations We'll first start by building a project the way you already know how: without an overarching organizational paradigm. Specifically, we'll discuss pain points and difficulties that are easy to run into when you don't use an organizational model. Then, we'll discuss a paradigm that will help us in the future, and we’ll see some examples of that paradigm in action.
Lesson 2: Refactoring We'll spend some time discussing how our new paradigm applies to the project we worked on in Lesson 1. Then we'll rebuild the project with the new organizational paradigm.
Lesson 3: Using an Organizational Library Finally, we'll explore how to use KnockoutJS, an organizational library, to organize our code and to reduce the amount of boilerplate code we write. Our resulting application will be well-organized, easy to understand, and extendable.

Udacity 課程學習地圖

這是根據 Udacity 目前推出的課程所設計的學習地圖。

每門課有一個編號。




黑色實線指向下一門要上的課。
橘色虛線表示為了建立更好的能力,要進行的下一堂課。

一個課程如果有一個或一個以上的箭頭,表示箭頭的源頭是先修課程。例如 ud088 的先修課程有  ud304、ud036 與 ud197。








2015年3月12日 星期四

台北地區 Coding for fun 程式工作坊 4/11(六) 要開班囉~


目的


程式工作坊是 Kids Coding Studio 實驗性的公益活動,希望藉由工作坊的成立,可以培育更多喜歡寫程式的孩子。

也希望能運作出成功的模式,在志工的協助下,程式工作坊在各地開花成長。

地點/時間


臺北地區捷運站附近,地點未定
104/4/11 起至 6/13 每週六下午2-4點共10次

報名請洽:shalley.tsay@gmail.com,註明孩子的姓名/學校/年級/聯絡電話


實施計劃



在 Scratch 課程的影片中,老師解釋了難懂或需要說明的部分。小五以上可以自學,小四以下親子共學。

這個 Scratch 線上課程是以 ScratchEd 在 2014 年 10 月發佈的「Creative Computing」教案為主軸,再根據 Kids Coding Studio 過去的教學經驗修改而成的。

目前收到學生與家長的回饋是「有趣!」「好玩!」,也希望使用過的學生與家長給予改進意見。

教學方式:

由大學學生擔任志工,掌握學生進度。

陸續會在部落格發表教案。

上課請準備:

(1) 筆記型電腦、耳機
(2) 安裝 Scratch 2.0 的軟體。(http://scratch.mit.edu/scratch2download/,步驟1和2)

費用:

每次上課活動費未定,視租借場地與報名人數而定 (不超過2000元為原則),另押 500 元(全勤退款)。
根據以往教學經驗,小孩缺席課程往往會影響教學成果,因為程式設計缺一堂課,下次來就可能完全銜接不上,反而讓孩子心生排斥。希望家長承諾讓孩子全程參與,所以訂定這個規則。

2015年3月8日 星期日

Coding for fun 快樂寫程式指導手冊:第三堂課

第三堂課 建立樂團 (課程網址:http://coding4fun.tw)

章   節
內   容  與   指  導  說  明
3-1 迴圈 Loop 是什麼呢?Loop 就是對指令(instruction)或序列(sequence)做重複執行。

  • 什麼是 instruction?在 Scratch 中,一個積木就是一個 instruction。
  • 什麼是 sequence?sequence 就是一連串的指令。在 Scratch 中,就是一連串的積木。

在 Scratch 中,最常使用到 Loop 積木是 「重複 10 次」與「不停重複」。我們可以在這兩個積木中,塞入一個或一個以上的積木。
3-2 事件 Event 是什麼呢?就是一件事導致另一件事發生。當某個事件發生,就採取對應的動作?例如:

  • 媽媽叫你,於是你回應
  • 警報器響了,於是大家逃出建築物
  • 按電視遙控器,於是電視轉台

「媽媽叫你」、「警報器響了」、「按電視遙控器」都是事件的產生,有了這些事件,我們採取了對應的動作。那麼在 Scratch 中有哪些機制來達成事件的觸發呢?
請學生打開事件積木﹐看看哪些積木符合這個特質。請先探索看看,後面會作說明。
3-3 事件積木 在事件積木中,我們看到有 8 種積木。
前面三種積木「當綠旗被點一下」、「當按下OO鍵」與「當角色被點一下」已經使用過了。

  • 「當背景切換為__」:前面說過,舞台可以有好幾個背景,當背景被切換的時候,角色可以有對應的動作,比方說,他移動到新的位置,或是消失不見等等效果。
  • 「音量值大於__」或是「計時器大於__」或是「視訊動作大於__」,同學可以試試看,課程後面會作說明。
  • 「當我接收到__」訊息,在後面的課程會作說明。

所以在事件積木中,有 6 個積木會處理事件,上面是圓滑線的積木,同學都找到了嗎?
3-4 平行
平行這個概念,和我們數學所說的平行並不相同。在設計程式的時候,平行表示「事件」同時發生。比方說
  • 我一邊 (吃飯) 一邊 (聽音樂)。
  • 小明一邊 (走路) 一邊 (唱歌)。

請同學下載範例,這個範例說明平行的意義。其中有三段程式,這三段程式同時會做各自的動作,都是由「當綠旗被點一下」這個事件所觸發。在每段程式一開始,我們會給一個設定好的值,讓他一開始的時候就準備好。(這是 reset,3-10 會講解。)

下載 範例
3-5 平行
上個例子中,有三個事件同時進行。那麼在 Scratch 中,有沒有限制多少個事件可以同時進行?
理論上可以有很多的事件同時進行。但是如果事件過多,每個事件分配到的時間就相對地變少,執行速度可能因此變慢。
同學初期寫程式的時候,可以盡情的發揮。但是當程式變得很複雜的時候,請同學再回頭想想這個問題。
3-6 debug
什麼是 Debug?de 表示去除,bug 是小蟲。Debug 就是去除程式中作怪的小蟲。程式中為什麼會有作怪的小蟲呢?其實這是有典故的。
圖片中的主角是 COBOL 程式語言的創始人 Grace Hopper,她是傑出的女性程式設計師。她正站在一個大型的主機前面。以前的電腦就是這麼大,跟人一樣高呢。很難想像吧!
當時有ㄧ天因為天氣很熱,為了讓大型主機可以散熱,他們就把窗戶打開,結果很不巧地飛來了一隻蛾被打死在裡面,造成機器當機,連帶著所有需要機器計算的工作都沒辦法進行。經過一整天的檢查,最後是 Hopper 找到那隻罪魁禍首的蛾,她在筆記中寫下:「就是這個 bug,害我們今天的工作無法完成。」
後來每當老闆問為什麼你的程式沒寫好時,所有人都把問題推給了 bug,一直到現在,只要碰到電腦程式的瑕疵就被稱為 bug。消除這些 bug,就叫做 debug。
後面我們要進行遊戲,看看你是否有 debug 的功夫。
3-7 Debug it!-1
3-8 Debug it!-1 解說
Debug 進行的方式可以是單人,或是小組進行。當同學解答出來的時候,可以請他擔任小老師教其他同學。對初學者來說, debug 並不容易。可以告訴同學這些題目有難度,解不出來沒關係;解出來真的很厲害,表示他前面學得很好喔。不要讓學生因為解不出來而感到挫折。
3-7:第一個挑戰的預期效果是:當點綠旗的時候,Gobo 和 Scratch Cat 要開始跳舞。但是卻只有 Scratch Cat 開始跳舞?Gobo 怎麼了,為什麼不跳舞呢?請同學debug!
Debug 時,同學一定要看清楚預期效果是什麼,才能把正確的 bug 找出來。 
3-8:解說影片。

下載 專案
3-9 Debug it!-2
3-10 Debug it!-2 解說
3-9:第二個挑戰的預期效果是:當點綠旗的時候,Scratch Cat 應該要出現在舞台的左側,而且說「我在左邊」;滑到舞台的右側時,要說「我在右邊」。第一次點綠旗時運作正常,可是第二次就出現問題了。請同學 debug!
3-10:解說 reset,就是在程式一開始執行時,設定好初始的狀況。這個 bug 產生的原因就是沒有設定初始的位置。

下載 專案
3-11 Debug it!-3
3-12 Debug it!-3 解說
3-11:第三個挑戰的預期效果是:按空白鍵時﹐Scratch Cat 應該要翻轉,也就是要轉向。但是按空白鍵時,卻什麼也沒發生?請同學 debug!
3-12:解說,原來是因為程式執行太快,眼睛看不到效果。可以使用各種方法來解答,鼓勵學生有不同的想法喔。

下載 專案
3-13 Debug it!-4
3-14 Debug it!-4 解說
3-13:第四個挑戰的預期效果是:當 Scratch Cat 被點一下的時候,應該在舞台上來回移動。但是 Scratch Cat 是轉向了,卻是上下顛倒的。請同學 debug!
3-14:解說影片。

下載 專案
3-15 Debug it!-5
3-16 Debug it!-5 解說
強調只要同學改的效果跟解答一樣就可以了,解法不一定要相同。因為 coder 有不同的想法很正常,而且是被鼓勵的。
3-15:第五個挑戰的預期效果是:當綠旗被點一下的時候﹐Scratch Cat 應該要同時顯示「說」的泡泡並發出聲音「喵~喵~喵~」。但是「說」的泡泡發生在聲音之前﹐而且 Scratch Cat 只發出一聲「喵~」。請同學 debug!
3-16:解說影片。

下載 專案
3-17 內功 聲音積木 讓孩子探索聲音積木中的所有積木。可以任意組合,看看有什麼作用。等一下有小測驗等著大家喔。
3-18 小測驗
3-19 解說一
3-20 解說二
3-21 解說三
進行聲音積木的測驗。鼓勵孩子通過所有的測驗,如果沒辦法完全答對也沒關係,下面有解說。看完解說後,再回頭試試這些功能。
3-19:節奏就是設定拍子的長短,每分鐘 60 拍的意思就是 1 拍 1 秒鐘。「彈奏鼓聲」可以設定鼓聲與拍子的長度,「休息」的意思和休止符的意義是相同的。
3-20:解說 Scratch 中的音符與樂器。音符可以選擇聲音的高低,也可以選擇各種不同的樂器。
3-21:解說如何錄製聲音,如何編輯;也可以從 Scratch 內建的聲音檔案做選取;以及如何調整聲音的音量。

下載 內功之聲音積木
下載 範例
下載 範例
下載 範例
3-22 加入mp3 在 Scratch 中,可以加入聲音檔案,只要附檔名是 .wav 或是 .mp3。
如果想從網路上的 youtube 抓音樂,這段影片教學生如何輸入 youtube 網址後,下載影片的聲音檔(mp3形式)。如果 mp3 的檔案太大,有可能 Scratch 2.0 讀不進來,這時候請把 mp3 檔案轉為 wav 檔案。影片中都有詳細的使用說明。

youtube->mp3 網址
mp3->wav 網址
3-23 合奏 介紹如何做出合奏。一邊是主旋律,另一邊是鼓聲。鼓聲也就是打擊樂器,可以讓音樂聽起來更豐富。

下載 範例
3-24 建立樂團 提供學生三個樂團的檔案,給學生一些想法。請同學下載玩玩看。

樂團一
樂團二
樂團三
3-25 作業
這是第三個作業。
首先想一想,樂團是什麼樣子?當然要有聲音囉!
可以任選上一章節的範例改寫成「建立樂團」,或是自行製作。
請將作業繳交到 http://scratch.mit.edu/studios/475523
作業對學生非常重要,透過作業,孩子才能練習學到的程式積木。如果是一群學生,告訴他們,下次上課會分享他們的作業內容,請用心完成。請同學將作業上傳到作業網址。

作業網址