| 10 January 2018 |
Code Monkey
by Gabriel Zerbib & Megane Dreyfuss (Co Founders @ DI)
Wanna do it again with your kids / Sisters / Brothers ? You can !
This session contains two parts.
Part I, Help the little monkey collect bananas
Connect to https://www.playcodemonkey.com, register as Student and join the Classroom code p5d49
In this game you need to guide the monkey, by instructing it about any move it needs to do in order to collect the bananas. Each level is of increasing difficulty.
The right side of the screen is your program.
A program is a list of instructions that a machine (or computer, or monkey-robot) is to execute, in the specified sequence (pay attention to the line numbers in front of your instructions).
The “instructions set” is the complete variety of instructions at hand with your machine.
In the first levels, the only instructions that you can use are step to walk a specified distance, and turn to make the monkey change its heading direction.
As you progress through the levels of the game, your “CPU” (in fact, the capabilities of your guidance of the monkey) gains more and more understood instructions.
You can use the ruler to measure a distance or an angle, and report the number in the editor in which you type the instructions of your program.
In Step 15, you can see that you need to instruct several objects to execute different instructions. You need to tell the monkey to step some distance, and then you need to tell the turtle to do some other instruction.
You achieve this by using the “.” (dot) symbol. Place this symbol after the name of the object which you need to instruct, and then place the instruction that you want the object to execute.
This is the very beginning of Object Oriented Programming!
In the higher levels of PlayCodeMonkey, you will learn to execute loops (make the program repeat a certain number of times the same block of instructions), write conditions (make the program act in a way or another according to various situations) and more.
Part II, Learn some JavaScript
Time to connect to this following page : https://jsfiddle.net/h48c0gtb/1/
You have just learned some instructions to write a sequential program for the monkey game.
These instructions, together, are what we call a programming language.
But the programming language that you’ve just played with, is only used in this monkey game for training purposes.
We use other languages, more advanced, to build Websites, Mobile apps, video games, or to launch a satellite in space.
The JavaScript language is the programming language for Websites.
A Web page is composed of several ingredients:
– a declarative part (HTML) in which you place the various elements that is should display (this image, that button, these form fields).
– a declarative part (CSS) in which you specify the aspect of the various elements declared in your HTML skeleton (color, size, relative position, alignment, shadow, etc.)
– and an event-based program (JavaScript) with which you instruct the Website of actions to take upon certain events (what do to when this button is clicked (what to check when this form is submitted, how to animate that image when the mouse rolls over it, etc…)
Event Programming is different from Sequential programming: the various lines of your code are not to be executed from begin to end no matter what happens (which was what you’ve done with Monkey). Rather, you specify various sequences of code (it’s called “blocks”) corresponding to various specific events, that the system should execute only when the said event occurs.
Connect to the JSFiddle page whose link you received in the invitation email.
In the HTML pane, you can see the following skeleton for your page:
<button>Click Me!</button>
This simply says that the Web page that you’re building should only display one button, whose caption is “Click Me!”.
Click on the Run button (top left) of your editor, and check that your button shows up in the Web pane.
Now, in the JavaScript pane, let’s write some code that will execute right away when you hit Run.
$(“button”).text(“Hello!”);
Don’t pay too much attention to the syntax for now.
The line above says: “with the button element on our page, let’s change its text to “Hello!”.
You may identify for yourself, that we’ve used the dot (“.”) between our button and the “text” command. Just like we did with Monkey and Turtle!
Click on Run and see for yourself: despite the “Click Me!” string in the declarative part of your Web page (the HTML pane), you never see this phrase. All that you see in “Hello!”.
This is because at the very beginning of your page visit, the JavaScript program changes very quickly the caption.
But what if we wanted to display “Click Me!” and then change the caption only when we click on the button with the mouse?
You achieve this with Event Programming:
$(“button”).click( () =>
$(“button”).text(“Hello!”)
);
The above block tells: “Whenever a click occurs on the button, then change the button’s text to Hello!”.
Click Run and observe that the button is labelled “Click Me!” until you click on it, and then its text becomes “Hello!”.
The program does not know in advance the exact time when you decide to click the button (if you ever do).
This is why it’s called Event Programming, as opposed to Sequential Programming.
Now, let’s make a little challenge.
We will instruct the button to jump to an arbitrary location on screen, whenever the mouse rolls over it.
This FREE CODING CLASS was offered by Developers.institute
Developers.Institute is a selective & intensive coding bootcamp, dedicated to educating the next generation of tech talent in Israel. We offer cutting edge mentored courses in Web and mobile Development, working with the industry’s best professionals to take our fellows from beginner to job-ready developer in 3 months.
Uniquely positioned at the center of tech ecosystems in Tel Aviv, Jerusalem and soon in Bne Brak , Developers.Institute is designed to open new doors for everyone who wants to learn code.
Our learning methodology doesn’t just teach you tactical skills, but shows you how to learn and think as a
developer by doing hands-on project from our partners. In addition to our expert training in the most in-demand skills, we also offer personalized career mentorship and connections to companies .
Wanna see the other class given?
