24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Learn to Code JavaScript!
2 |
3 | Brought to you by Galvanize. Learn more about the way we teach code at [galvanize.com](http://galvanize.com).
4 |
5 | ### Overview
6 |
7 | In this course, we'll be going over the following!
8 |
9 | - Basic syntax of JavaScript
10 | - Variables and Functions
11 | - Conditional statements (if, else if, else)
12 | - Build a “Rock, Paper, Scissors” application
13 |
14 | While not required, reviewing our [HTML & CSS](https://github.com/GalvanizeOpenSource/Learn-To-Code-HTML-CSS) course can help!
15 |
16 | ### Setting Up Your Computer
17 |
18 | For this workshop, you need to have the following:
19 |
20 | - Install a text editor! We recommend [Atom.io](http://atom.io)
21 | - Have an updated web browser! We recommend [Google Chrome](http://chrome.google.com)
22 |
23 | ### What IS JavaScript?
24 |
25 | Making its first appearance in 1995, JavaScript was created by an engineer at Netscape to provide a user-friendly, lightweight programming language that can be easily adapted for the rise of the Internet. Now, with HTML and CSS, it is one of the core languages of the Internet and is growing quickly to accommodate beyond the client-side.
26 |
27 | JavaScript allows web pages to do more than just “sit there." You can animate, calculate, etc. - you can do it all!
28 | It is a great programming bridge between “design” and “development” that allows for endless creativity.
29 |
30 | Common confusion: JavaScript is **NOT** Java. They are largely different programming languages and should not be confused with one another.
31 |
32 | ### A Quick Mini-Tutorial
33 |
34 | In order to go over some basic JavaScript concepts, let's follow a tutorial provided by the [JavaScript.com](http://chrome.google.com) team.
35 |
36 | It's only 8 lessons and takes less than 5 minutes.
37 |
38 | https://www.javascript.com/try
39 |
40 | ### Dive a Little Deeper
41 |
42 | Let's review some of the basic syntax of JavaScript.
43 |
44 | - `var` - defines a variable (an object of some value)
45 | - `;` - terminator, commonly found at the end of a code operation
46 | - `"word"` - quotes create strings, which are a form of data
47 | - `function()` - performs some action or method
48 | - `{}` - block notation, contains code that can be initialized by a function
49 | - `.` - dot notation, allows for the chaining of variables and functions
50 |
51 | JavaScript is an [Object-Oriented Language](https://en.wikipedia.org/wiki/Object-oriented_programming), a common paradigm of coding that occurs in many other languages and can help you learn them as well.
52 |
53 | ### Variables
54 |
55 | Variables are essentially containers for storing data, values, etc.
56 | In JavaScript, you must declare them with `var` first, then define them with `=`.
57 |
58 | Syntax:
59 |
60 | ```
61 | var price1 = 5;
62 | var price2 = 6;
63 | var total = price1 + price2;
64 | ```
65 |
66 | What is the value of `total`?
67 |
68 | **Variables** can store a variety of data types:
69 |
70 | - Strings - `“Hello, my name is Lee.”`
71 | - Numbers - `40, 0.15`
72 | - Boolean - `True` or `False`
73 | - Null - literally nothing
74 | - “” - undefined value
75 | - Functions - here we go…!
76 |
77 | #### Gut check!
78 |
79 | What's the difference between `=`,`==`, and `===`? I see this all the time.
80 |
81 |
82 | #####`=` is known as the **assignment operator**
83 | It sets variables equal to a specific value.
84 | ```javascript
85 | var foo = 1
86 | ```
87 | ##### `==` is known as the **abstract equality comparison**
88 | It compares two items to see if they are of equal value, but it ignores if they are the same exact _type_ of data.
89 | ```
90 | “1” == 1 => True
91 | Null == undefined => True
92 | ```
93 | ##### `===` is known as the **strict equality comparison**
94 | It compares the value & type of the items to see if they are exactly the same. In the case of null vs undefined, null is more specifically typed than undefined, so they are not exactly the same value.
95 | ```
96 | “1” === 1 => False
97 | Null === undefined => False
98 | ```
99 |
100 | ### Functions
101 |
102 | Functions are blocks of code that perform tasks for us.
103 |
104 | In JavaScript, you follow the general syntax: 1) declare, 2) define, 3) call (invoke).
105 |
106 | Syntax:
107 | ```javascript
108 | var multiply = function(a,b){
109 | return a * b
110 | };
111 | multiply(2,4);
112 | ```
113 | ~What is the value produced by this function?
114 |
115 | ###### More on the syntax of functions:
116 | - **Parameters** - `(a,b,c)` - hypothetically what passes through the function
117 | - **Arguments** - real values of the parameters the function affects
118 | - **Block** - `{...}` - the function’s operational code
119 | - **Return** command - the output of the function
120 |
121 |
122 | ### Conditional Statements
123 |
124 | Remember [Choose Your Own Adventure](https://en.wikipedia.org/wiki/Choose_Your_Own_Adventure) books?
125 |
126 | Conditional statements work a lot like them and follow the basic format: *if*, *else*, *else if*...
127 |
128 | ###### If Statements
129 |
130 | **if** - if what’s in the parameters is `True`, then a block of code will run.
131 | If it’s `False`, the code will not run.
132 |
133 | ```javascript
134 | if (hour < 18) {
135 | greeting = "Good day";
136 | }
137 | ```
138 | if statements by themselves default to `True`.
139 |
140 |
141 | ###### Else Statements
142 |
143 | **else** - what if you wanted the code to do something else besides nothing if it’s False?
144 |
145 | ```javascript
146 | if (hour < 18) {
147 | greeting = "Good day";
148 | } else
149 | { greeting = “Go away.”;
150 | }
151 | ```
152 |
153 | ###### Else if Statements
154 |
155 | **else if** - What if another scenario comes up?
156 |
157 | Add an `else if` in between the `if` and `else` statements.
158 | ```javascript
159 | if (hour < 18)
160 | {greeting = "Good day";}
161 | else if (hour < 9)
162 | {greeting = “OK day”;}
163 | else {greeting = “Go away.”;}
164 | ```
165 | _This code is actually broken. Can you figure out why?_
166 |
167 | ##### Recap of Conditional Rules
168 |
169 | - **If** statements perform an action if the statement is True
170 | - **Else** statements perform an action if the statement is False
171 | - **Else if** statements perform an action if the first is False but the second is True
172 | _Is there any other way to do this?_
173 |
174 |
175 | ## LET'S CODE
176 |
177 | Time for us to make our *Rock, Paper, Scissors* application!
178 |
179 | 1. Go to: https://github.com/GalvanizeOpenSource/Learn-To-Code-JavaScript/
180 | 2. Download the zip file of our code
181 | 3. Open the files in your text editor
182 | 4. index.html
183 | 5. CSS/style.css
184 | 6. Open the index.html file in your web browser
185 |
186 | #### 4 Steps To Building This App
187 |
188 | 1. Get the user's choice
189 | 2. Get the computer's choice
190 | 3. Teach the computer how to guess rock, paper, or scissors
191 | 4. Compare their choices and tell the user the result
192 |
193 |
194 | ###### 1. Get the user's choice
195 |
196 | **Assign a `prompt` method to the variable `userChoice`:**
197 | The ```prompt``` method gets input from the user, ```prompt``` has an optional message parameter which you can use to ask the user for a response.
198 |
199 | ```javascript
200 | var userChoice = prompt("Do you choose rock, paper or scissors?");
201 | ```
202 |
203 | This line creates a variable called ```userChoice``` to represent the users response.
204 |
205 | Question: _Why is this a terrible way to get user input?_
206 |
207 |
208 | ###### 2. Get the computer's choice
209 |
210 | Assign a `Math.random()` method to the variable `computerChoice`:
211 |
212 | What is `Math` in JavaScript?
213 |
214 | ```Math.random()``` returns a random floating point number between 0 and 1.
215 |
216 | ```javascript
217 | var computerChoice = Math.random();
218 | ```
219 |
220 | Here we are setting a variable named ```computerChoice``` to the result of `Math.random()`.
221 |
222 | Question: _How else can we get a random choice?_
223 |
224 | ###### 3. Teach the computer rock, paper, scissors.
225 |
226 | This is our first conditional statement.
227 |
228 | We change the value of ```computerChoice```
229 | to either rock, paper, or scissors depending on what number the ```computerChoice```
230 | variable gets set to when we run the program.
231 |
232 | Computers don't speak English (well, not exactly), so we need to speak in a language they understand: numbers.
233 |
234 | ```javascript
235 |
236 | if (computerChoice <= 0.33) {
237 | computerChoice = "rock";
238 | } else if (computerChoice <= 0.66) {
239 | computerChoice = "paper";
240 | } else {
241 | computerChoice = "scissors";
242 | }
243 | ```
244 |
245 | At this point the computer is ready to rumble with it's choice, and the user has made theirs.
246 |
247 | **IT'S GO TIME!!! (Not so fast, bub.)**
248 | First we need to tell the computer how to decide who wins.
249 | In order to do that, we're going to need to create a function!
250 |
251 |
252 | ###### 4. Compare the choices and tell the user of the result.
253 | Here we're creating a function called ```compare```. The ```compare``` function takes two
254 | arguments ```choice1``` and ```choice2```.
255 |
256 | ```javascript
257 | var compare = function(userChoice, computerChoice) {
258 | if (userChoice === computerChoice) {
259 | window.alert("The result is a tie!");
260 | } else if(userChoice === "rock") {
261 | if (computerChoice === "scissors") {
262 | window.alert("Rock wins!");
263 | } else {
264 | window.alert("Paper wins");
265 | }
266 | } else if(userChoice === "paper") {
267 | if(computerChoice === "rock") {
268 | window.alert("paper wins!");
269 | } else {
270 | window.alert("scissors wins!");
271 | }
272 | } else if(userChoice === "scissors") {
273 | if (computerChoice === "rock") {
274 | window.alert("Rock wins");
275 | } else {
276 | window.alert("scissors wins");
277 | }
278 | }
279 | };
280 | ```
281 |
282 |
283 | ###### 4.5 Calling the compare function
284 | We're passing values of userChoice and computerChoice to run the equation.
285 |
286 | The function is called when someone clicks the button via the ```onclick``` attribute!
287 |
288 | ```html
289 |
290 | ```
291 |
292 | ### Play around in the sandbox some more!
293 |
294 | - "I want to play the game again. Make a button I can press to play again!"
295 | - "When I win, I want the game to congratulate me by my name!"
296 | - "I don't ever want to lose. Make it so I always win."
297 | - "I want the JavaScript code to work on other HTML files. How do I do this?"
298 |
299 |
300 | ## YOU DID IT, YOU'RE NOW A JAVASCRIPT CODER!
301 |
302 | Want to learn more? Visit one of our nearby **Learn to Code** sessions or check out our other tutorials:
303 |
304 | - [Learn to Code HTML & CSS](https://github.com/GalvanizeOpenSource/Learn-To-Code-HTML-CSS)
305 | - [Learn to Code Git and GitHub](https://github.com/GalvanizeOpenSource/Learn-To-Code-GitHub-Git)
306 |
307 | You can also check out our evening courses at [galvanize.com/workshops](http://galvanize.com/workshops):
308 |
309 | - **Zero to Web Designer in 8 Weeks**
310 | - **Foundations in JavaScript in 8 Weeks**
311 |
312 | If you're ready for a full-fledged immersive program, Galvanize offers the following:
313 |
314 | **Galvanize Full Stack Immersive Program**
315 | - 24 Week Full-Time Program
316 | - 97% Job Placement Rate within six months
317 | - Average starting salary: $77,000 per annum
318 | - Scholarships available for those who qualify
319 |
320 | To learn more, email our enrollment department at enrollment@galvanize.com.
321 |
322 |
323 | ## About the Authors
324 |
325 | **Graham McBain** is an alum of the 3rd cohort of the Galvanzie Web Development Program. He previously served as Evangelist for Galvanize based in the Colorado area. Graham believes that programming is more accessible than people think and is passionate about showing people the path to becoming a developer.
326 |
327 | **Lee Ngo** is an evangelist for Galvanize based in Seattle. Previously he worked for UP Global (now Techstars) and founded his own ed-tech company in Pittsburgh, PA. Lee believes in learning by doing, engaging and sharing, and he teaches code through a combination of visual communication, teamwork, and project-oriented learning.
328 |
329 | You can email him at lee.ngo@galvanize.com for any further questions.
330 |
--------------------------------------------------------------------------------
20 | 
23 |