Intro to Programming! 25Pts

May 10 :: Asynchronous :: code.org

If you need extra help... please send a private chat via TEAMS!

MAKE SURE YOU HAVE COMPLETED LESSON 6...& CREATED YOUR 3 SCREENS in LESSON 4!



CODE.ORG!

Let's SIGN IN!

WHAT ARE WE LEARNING: App Development....Intro to Programming!

WHY IS IT IMPORTANT: Investigating working code and make simple modifications to understand how it works is vital in creating a well written app. Knowing a number of concepts and vocabulary around what programs are and how they run that will need to be reinforced in future lessons

HOW WILL MY TEACHER KNOW WHAT I LEARNED: You will run through a series of programming code and answer a follow-up question!

ASSIGNMENT: Intro to Programming

Due: May 10 :: 25 Points!

Go to code.org

Select SIGN IN on the top right corner


Enter your fresnou.org email and password

Or Click Continue with MicroSoft


Click CONTINUE WITH MICROSOFT

Enter your fresnou.org email and password


If you are on MY DASHBOARD...

Scroll down to find MY COURSES...

Click CSP Unit 3 - Intro to App Design ('20-'21)

Click LESSON 6

Click 1 and continue

Follow along with the class!

Click CONTINUE

PAGE 2: (SEQUENTIAL PROGRAMMING)

Do This:

Run the program

  • What does it do?

  • Why do you think some information is in quotes and some is not?

HINTS:

  • Code is running one line at a time.

  • Strings need to go in quotes. Numbers do not need to.

  • Yellow highlighting shows you which line of code is running in either block or text mode.

MODIFY:

On the Code.org (Lesson 6, Page 2) modify the code by adding 2 (two) lines of code... one that displays a string (a line in quotes) and one that displays a number (no quotes)

PAGE 3: (SEQUENTIAL PROGRAMMING)

Do This:

Run the program

  • What are the differences between console.log and setProperty?

HINTS:

  • console.log prints text in the Debug Console

  • setProperty changes the properties of elements on the screen. These should be familiar from using Design Mode.

  • console.log needs one input while setProperty needs three

  • Hovering over a block in the toolbox helps you know what kind of information to put in each input.

MODIFY:

On the Code.org (Lesson 6, Page 3) modify the code by adding 1 (ONE) consol.log and 1 (one) setProperty to the program

PAGE 4: (EVENT DRIVEN PROGRAMMING)

Do This:

Run the program

  • How does the onEvent block work? Be as specific as possible.

  • How do commands inside an onEvent run different from commands outside?

HINTS:

  • onEvent makes the program respond to the user. You can add code inside of it that will only run when something happens.

  • Changing the second input changes the type of interaction that will make the code inside the onEvent run.

  • Code outside the onEvent runs right away. Code inside an onEvent will only run when the event happens.

  • Even if code is after an onEvent, it will run first if it's outside of any onEvent

MODIFY:

On the Code.org (Lesson 6, Page 4) modify the code by adding one command inside the onEvent and one command outside of it.

PAGE 5: (EVENT DRIVEN PROGRAMMING)

Do This:

Run the program

  • How does the playSound block work?

  • How do the lines that start with // run differently from the others?

HINTS:

  • playSound will play a sound you pick from the Sound Library

  • Lines that start with // are called comments and don't actually run. They just help you understand your code.

MODIFY:

On the Code.org (Lesson 6, Page 5) modify the code by:

  • Adding code so the dog button makes sound too.

  • Change the messages when each button is clicked.

PAGE 6: (EVENT DRIVEN PROGRAMMING)

Do This:

Run the program

  • How do you think the randomNumber command works?

  • Why do the birds move even if they're not clicked? Are there other options?

HINTS:

    • Random number chooses a new random number each time, between the high and low value given

    • Each time randomNumber runs, there's a possibility of a different result!

    • onEvent takes many different event types, not just "mouseOver" and "click". Depending on the situation different ones make more sense. READ the CODE!

MODIFY:

On the Code.org (Lesson 6, Page 6) modify the code by:

  • Making the birds move around the entire screen, not just the top left corner.

  • Experiment with other event types besides "mouseOver" and "click". Which ones still make the game work?

Program Statement: a command or instruction. Sometimes also referred to as a code statement.

Program: a collection of program statements. Programs run (or “execute”) one command at a time.

Two different ways for programs to run...

Sequential Programming: program statements run in order, from top to bottom.

  • No user interaction

  • Code runs the same way every time


Event Driven Programming: some program statements run when triggered by an event, like a mouse click or a key press

  • Programs run differently each time depending on user interactions

Completing the code.org assignment is worth

25 points!

NOTE: MAKE SURE THE TOP OF THE CODE.ORG LESSON SHOWS THAT IS COMPLETE! (ALL CIRCLES ETC SHOULD BE GREEN!)

Remember, if you skip a page this will occur:

CONGRATULATIONS! YOU HAVE COMPLETED LESSON 6...25 POINTS!

Once you are done, please give a thumbs up in the chat!