├── .gitattributes ├── .gitignore ├── README.md ├── class1.html ├── class2.html ├── class3.html ├── class4.html ├── classexercises.css ├── css └── custom.css ├── files ├── class3.zip └── class4.zip ├── homework.html ├── images ├── client-server.jpg ├── dom-tree.png └── gdi_logo_badge.png ├── index.html └── reveal ├── LICENSE ├── README.md ├── css ├── images │ ├── pink-logo.png │ └── white-logo.png ├── print │ ├── paper.css │ └── pdf.css ├── reveal.css ├── shaders │ ├── tile-flip.fs │ └── tile-flip.vs └── theme │ ├── README.md │ ├── gdicool.css │ ├── gdidefault.css │ ├── gdilight.css │ ├── gdisunny.css │ ├── source │ ├── gdicool.scss │ ├── gdidefault.scss │ ├── gdilight.scss │ └── gdisunny.scss │ └── template │ ├── mixins.scss │ ├── settings.scss │ └── theme.scss ├── favicon.ico ├── index.html ├── js ├── reveal.js └── reveal.min.js ├── lib ├── css │ ├── dark.css │ ├── light.css │ └── zenburn.css ├── font │ ├── Gotham-Bold.otf │ ├── Gotham-BoldIta.otf │ ├── Gotham-BoldItalic.otf │ ├── Gotham-Book.otf │ ├── Gotham-BookIta.otf │ ├── Gotham-BookItalic.otf │ ├── Gotham-Medium.otf │ ├── Gotham-MediumIta.otf │ ├── Gotham-MediumItalic.otf │ ├── league_gothic-webfont.eot │ ├── league_gothic-webfont.svg │ ├── league_gothic-webfont.ttf │ ├── league_gothic-webfont.woff │ └── league_gothic_license └── js │ ├── classList.js │ ├── head.min.js │ └── html5shiv.js ├── package.json └── plugin ├── highlight └── highlight.js ├── markdown ├── markdown.js └── showdown.js ├── notes-server ├── client.js ├── index.js └── notes.html ├── notes ├── notes.html └── notes.js └── zoom-js └── zoom.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | *.sln merge=union 7 | *.csproj merge=union 8 | *.vbproj merge=union 9 | *.fsproj merge=union 10 | *.dbproj merge=union 11 | 12 | # Standard to msysgit 13 | *.doc diff=astextplain 14 | *.DOC diff=astextplain 15 | *.docx diff=astextplain 16 | *.DOCX diff=astextplain 17 | *.dot diff=astextplain 18 | *.DOT diff=astextplain 19 | *.pdf diff=astextplain 20 | *.PDF diff=astextplain 21 | *.rtf diff=astextplain 22 | *.RTF diff=astextplain 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.db 2 | .DS_Store 3 | .svn 4 | log/*.log 5 | tmp/** 6 | node_modules/ 7 | .sass-cache -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Girl Develop It - Intro to JavaScript 2 | =================== 3 | 4 | **PLEASE NOTE: This is an older, archived version of the Girl Develop It Intro to JavaScript curriculum. A newer version is located on our main repo, at [https://github.com/girldevelopit/gdi-featured-js-intro/](https://github.com/girldevelopit/gdi-featured-js-intro/).** 5 | 6 | This is the Girl Develop It Intro JavaScript course. Material based on original material by Sara Chipps, Pamela Fox, Alexis Goldstein, Izzy Johnston, Leo Newball, and Sylvia Richardson. 7 | 8 | The course is meant to be taught in 4 two-hour sections. Each of the slides and practice files are customizable according to the needs of a given class or audience. 9 | 10 | Slides and materials are hosted at [https://gdi-curriculum-review.github.io/gdi-featured-js-intro-OLD/](https://gdi-curriculum-review.github.io/gdi-featured-js-intro-OLD/). 11 | 12 | 13 | 14 | ## Classes 15 | 16 | ### Class 1 17 | 18 | Introduction to JavaScript and Basic Programming Concepts 19 | 20 | An overview of the history of JavaScript, what it is, and how it interacts with the browser. Covers basic JavaScript concepts including variables, data types, and functions. 21 | 22 | ### Class 2 23 | Control Flow 24 | 25 | Introduces boolean variable, if/then statements, loops, and arrays. 26 | 27 | ### Class 3 28 | 29 | Introduction to the DOM 30 | 31 | Introduces the Document Object Model (DOM) and how to use JavaScript to interact with it. Includes finding and modifying nodes. 32 | 33 | ### Class 4 34 | 35 | Events and Animations 36 | 37 | Introduces events, listening functions, user inputs, and basic animations. 38 | 39 | 40 | ## Theme customization 41 | 42 | You can change theme colors by changing the theme css to any of the following options: 43 | ```html 44 | 45 | 46 | 47 | 48 | ``` 49 | You can change the text editor theme by changing the highlight.js css to the following options: 50 | ```html 51 | 52 | 53 | ``` 54 | You can change transition by changing the reveal transition property in Reveal.initialize 55 | ```javascript 56 | Reveal.initialize({ 57 | transition: 'default', // default/cube/page/concave/zoom/linear/none 58 | }); 59 | ``` 60 | -------------------------------------------------------------------------------- /class1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Class 1 ~ JavaScript for Beginners ~ Girl Develop It 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 32 | 33 | 34 | 35 | 36 |
37 | 38 |
39 | 40 |
41 | GDI logo 42 |

JavaScript for Beginners

43 |

Class 1

44 |
45 | 46 | 47 |
48 |

Welcome!

49 |
50 |

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

51 |

Some "rules"

52 |
    53 |
  • We are here for you!
    • 54 |
  • Every question is important.
    • 55 |
  • Help each other.
    • 56 |
  • Have fun.
    • 57 |
58 |
59 |
60 | 61 |
62 |

Welcome!

63 |
64 |

Tell us about yourself.

65 |
    66 |
  • Who are you?
    • 67 |
  • What do you hope to get out of the class?
    • 68 |
  • What is your favorite children's book?
    • 69 |
70 |
71 |
72 | 73 |
74 |

What is JavaScript?

75 |
    76 |
  • JavaScript is standardized by the "ECMAScript" specifications.
    • 77 |
  • JavaScript is a client-side processing language. A browser reads the code and runs it directly.
    • 78 |
  • JavaScript interfaces with HTML and CSS.
    • 79 |
  • With JavaScript, you can write code once and use it everywhere. Remember, you want DRY code (Don't Repeat Yourself).
    • 80 |
  • JavaScript lets you build dynamic webpages that respond to input from users.
    • 81 |
82 |
83 |
84 |

JavaScript is a client-side language

85 | Laptop and server connected via the internet 86 |

Photo credits: Andrew E. Larson and John Seb Barber cc

87 |
88 |
89 |

Let's Develop It

90 |

Let's write your first JavaScript program. Make a folder called gdi. Inside, make a new page called index.html. Place this code inside.

91 | 

 92 | <!DOCTYPE html>
 93 | <html>
 94 |     <head>
 95 |         <title>Test Page</title>
 96 |     </head>
 97 |     <body>
 98 |     <p>This is my awesome JavaScript code.</p>
 99 |         <script>
100 |             alert('Hello World!');
101 |         </script>
102 |     </body>
103 | </html>
104 |
105 |
106 | 107 |
108 |

Script Tags

109 |

You can mix JavaScript and HTML. The script tag tells your browser the stuff inside is code, not content.

110 | 

111 | <script>
112 |     CODE GOES HERE
113 | </script>
114 |
115 |
116 |
117 |

JavaScript Files

118 |

Just like CSS, you can split a long block of JavaScript into its own file.

119 | 

120 | <script src="path/to/file.js"></script>
121 |
122 |
123 |
124 |

Separating Instructions

125 |

After each individual statement, you must add a semicolon.

126 | 

127 | <script>
128 |     console.log('Hello World!');
129 |     console.log('I am glad to meet you');
130 |     console.log('I am fuzzy');
131 | </script>
132 |
133 |
134 |
135 |

Comments

136 |

You can leave comments in your code—notes that people can read and computers will ignore.

137 | 

138 | <script>
139 |     /*I can wrap long comments 
140 |     with multiple lines 
141 |     like this*/
142 |     console.log('Hello World!'); //Or mark short comments like this
143 | </script>
144 |
145 |
146 |
147 |

Getting results onto your screen

148 |

Open a popup box.

149 | 

150 | alert('Hello World!');
151 |
152 |

Display a message in your console.

153 | 

154 | console.log('Hello World!');
155 |
156 |

Add something to the page.

157 | 

158 | document.write('Hello World!');
159 |
160 |
161 |
162 |

Let's Develop It

163 |
    164 |
  • Open index.html. Add a comment to the code.
    • 165 |
  • Try different ways of printing your message.
    • 166 |
  • Create a new file called mycode.js. Move your code to this file and link it to your page.
    • 167 |
168 |
169 | 170 |
171 |

Variables

172 |

A variable is a place to store values

173 |
174 |
175 |

Variable Values

176 |
    177 |
  • When you first create a variable, it does not have a value (it is undefined).
    • 178 |
  • You can set a value for a variable.
    • 179 |
  • Variables can hold different types of information, like words, numbers, and collections of data.
    • 180 |
  • The value of a variable can change over time.
    • 181 |
182 |
183 |
184 |

Naming Variables

185 |
    186 |
  • The variable name is case-sensitive.
    • 187 |
  • A new variable needs to have a unique name.
    • 188 |
  • Variable names need to start with a letter, $, or _.
    • 189 |
  • Variable names can only be made of letters, numbers, $, or _.
    • 190 |
191 |
192 |
193 |

Declaring a Variable

194 |

To declare (create) a variable, just type the word "var" and the variable name.

195 | 

196 | <script>
197 |     var numberOfKittens;
198 | </script>
199 |
200 |

It is a good idea to give your variable a starting value. This is called initializing the variable.

201 | 

202 | <script>
203 |     var numberOfKittens = 5;
204 | </script>
205 |
206 |
207 | 208 |
209 |

ES2015 Declarations

210 |

The ES2015 standard implemented in June 2015 added two additional declarations:


211 |

"let" keyword declares a block scoped variable (more on scope later)


212 |

"const" keyword declares a read-only named constant, and value must be assigned at declaration

213 | ```js 214 | let numberOfKittens = 5; 215 | const numberOfCats = 6; 216 | ``` 217 |
218 | 219 |
220 |

Using a Variable

221 |

Once you have created a variable, you can use it in your code. Just type the name of the variable.

222 | 

223 | <script>
224 |     var numberOfKittens = 5;
225 |     console.log (numberOfKittens);
226 | </script>
227 |
228 |
229 |
230 |

Let's Develop It

231 |

In your JS file, create a variable and give it a valid name and a value. Then, display the value.

232 |
233 | 234 | 235 |
236 |

Numbers

237 |

Variable can be numbers, either integers or floats (decimals).

238 | 

239 | <script>
240 |     var numberOfKittens = 5;
241 |     var cutenessRating = 9.6;
242 | </script>
243 |
244 |

The browser will automatically convert integers to floats if needed

245 |
246 | 247 |
248 |

Arithmetic Operators

249 |

Once you have numbers, you can do math with them!

250 | 

251 | <script>
252 |     var numberOfKittens = 5;
253 |     var numberOfPuppies = 4;
254 |     var numberOfAnimals = numberOfKittens + numberOfPuppies;
255 | </script>
256 |
257 |
258 |
259 |

Arithmetic Operators

260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 |
ExampleNameResult
-aNegationOpposite of a.
a + bAdditionSum of a and b.
a - bSubtractionDifference of a and b.
a * bMultiplicationProduct of a and b.
a / bDivisionQuotient of a and b.
a % bModulusRemainder of a divided by b.
301 |
302 |
303 |

Let's Develop It

304 |

Create two variables and try some arithmetic operators. Don't forget to display your results!

305 |
306 | 307 |
308 |

Strings

309 |

Variable can be strings, groups of characters. You put your string in quotes.

310 | 

311 | <script>
312 |     var kittensName = 'Fluffy';
313 | </script>
314 |
315 |

If you want to use a quote in your string, you'll need to "escape" it with a backslash.

316 | 

317 | <script>
318 |     console.log('I\'d like to use an apostrophe');
319 | </script>
320 |
321 |
322 | 323 |
324 |

String Operators

325 |

You can put strings together with a +, the concatenation operator.

326 | 

327 | <script>
328 |     var kittensName = 'Fluffy ';
329 |     var fullName = kittensName + ' McDougle';
330 |     console.log(fullName); //Outputs 'Fluffy McDougle'
331 | </script>
332 |
333 |
334 |
335 |

String Operators

336 |

You can also use += to add things to the end of a string.

337 | 

338 | <script>
339 |     var kittensName = 'Admiral ';
340 |     kittensName += ' Snuggles';
341 |     console.log(kittensName); //Outputs 'Admiral Snuggles'
342 | </script>
343 |
344 |
345 | 346 |
347 |

Let's Develop It

348 |

Create two variables, a first name and a last name, and then put them together to make a full name. Don't forget to display your results!

349 |
350 | 351 |
352 |

Functions

353 |

Functions are separable, reusable pieces of code. 354 | 355 |

356 |
357 |

Using Functions

358 |

First, declare the function.

359 | 

360 | <script>
361 |     function turtleFact() {
362 |         console.log('A turtle\'s lower shell is called a plastron.');
363 |     }
364 | </script>
365 |
366 |

Then, use it as many times as you want!

367 | 

368 | <script>
369 |     turtleFact();
370 | </script>
371 |
372 |
373 |
374 |

Arguments

375 |

Functions can accept input values, called arguments.

376 | 

377 | <script>
378 |     function callKitten (kittenName){
379 |         console.log('Come here, ' + kittenName + '!');
380 |     }
381 |     callKitten ('Fluffy'); //outputs 'Come here, Fluffy!'
382 |     
383 |     function addNumbers(a, b) {
384 |         console.log(a + b);
385 |     }
386 |     addNumbers(5,7); //outputs 12
387 |     addNumbers(9,12); //outputs 21
388 | </script>
389 |
390 |
391 |
392 |

Arguments

393 |

You can also pass variables into functions. These variables do not need to have the same name as the function arguments.

394 | 

395 | <script>
396 |     function addOne(inputNumber){
397 |         var newNumber = inputNumber + 1;
398 |         console.log('<p>You now have ' + newNumber);
399 |     }
400 |     //Declare variables
401 |     var numberOfKittens = 5;
402 |     var numberOfPuppies = 4;
403 |     //Use them in functions
404 |     addOne(numberOfKittens);
405 |     addOne(numberOfPuppies);    
406 | </script>
407 |
408 |
409 |
410 |

Let's Develop It

411 |

Turn the code you wrote to output someone's full name into a function, then use it.

412 |
413 |
414 |

Returning Values

415 |

You can have a function give you back a value, to use later.

416 | 

417 | <script>
418 |     function square(num) {
419 |         return num * num;
420 |     }
421 |     console.log(square(4));   // outputs '16'.
422 |     var squareOfFive = square(5); // will make squareOfFive equal 25.
423 | </script>
424 |
425 |

Return will immediately end a function.

426 |
427 |
428 |

Let's Develop It

429 |

Add a return statement to your name function. Use that function to set the value of a variable.

430 |
431 | 432 |
433 |

Resources

434 |
    435 |
  • JavaScript Guide, from the Mozilla Developers Network.
    • 436 |
  • Code Academy, with interactive JavaScript lessons to help you review.
    • 437 |
438 |
439 | 440 | 441 |
442 | 448 |
449 | 450 | 451 | 452 | 453 | 454 | 479 | 480 | 481 | 482 | -------------------------------------------------------------------------------- /class3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Class 3 ~ JavaScript for Beginners ~ Girl Develop It 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 32 | 33 | 34 | 35 | 36 |
37 | 38 |
39 |
40 | GDI logo 41 |

JavaScript for Beginners

42 |

Class 3

43 |
44 | 45 | 46 |
47 |

Objects

48 |

Objects let us store a collection of properties.

49 | 

 50 | var objectName = { 
 51 |   propertyName: propertyValue,
 52 |   propertyName: propertyValue,
 53 |   ...
 54 | };
 55 |
56 | 

 57 | var aboutMe = {
 58 |   hometown: 'Atlanta, GA',
 59 |   hair: 'Auburn',
 60 |   likes: ['knitting', 'code'],
 61 |   birthday: {month: 10, day: 17}
 62 | }; 
 63 |
64 |
65 |
66 |

Accessing Objects

67 |

You can retrieve values using "dot notation"

68 | 

 69 | var aboutMe = {
 70 |   hometown: 'Atlanta, GA',
 71 |   hair: 'Auburn'
 72 | }; 
 73 | var myHometown = aboutMe.hometown;
 74 |
75 |

Or using "bracket notation" (like arrays)

76 | 

 77 | var myHair = aboutMe['hair'];
 78 |
79 |
80 |
81 |

Changing Objects

82 |

You can use dot or bracket notation to change properties

83 | 

 84 | var aboutMe = {
 85 |   hometown: 'Atlanta, GA',
 86 |   hair: 'Auburn'
 87 | }; 
 88 | aboutMe.hair = 'blue';
 89 |
90 |

Add new properties

91 | 

 92 | aboutMe.gender = 'female';
 93 |
94 |

Or delete them

95 | 

 96 | delete aboutMe.gender;
 97 |
98 |
99 |
100 |

Arrays of Objects

101 |

Since arrays can hold any data type, they can also hold objects

102 | 

103 | var myCats = [
104 |   {name: 'Lizzie', 
105 |    age: 18},
106 |   {name: 'Daemon',
107 |    age: 1}
108 | ];
109 | 
110 | for (var i = 0; i < myCats.length; i++) {
111 |   var myCat = myCats[i];
112 |   console.log(myCat.name + ' is ' + myCat.age + ' years old.');
113 | }
114 |
115 |
116 |
117 |

Arrays of Objects

118 |

Just like other data types, objects can be passed into functions:

119 | 

120 | var lizzieTheCat = {
121 |   age: 18,
122 |   furColor: 'grey',
123 |   likes: ['catnip', 'milk'],
124 |   birthday: {month: 7, day: 17, year: 1996}
125 | }
126 | 
127 | function describeCat(cat) {
128 |   console.log('This cat is ' + cat.age + ' years old with ' + cat.furColor + ' fur.');
129 | }
130 | 
131 | describeCat(lizzieTheCat);
132 |
133 |
134 |
135 |

Let's Develop It

136 |

Create an object to hold information on your favorite recipe. It should have properties for recipeTitle (a string), servings (a number), and ingredients (an array of strings).

137 |

Try displaying some information about your recipe.

138 |

Bonus: Create a loop to list all the ingredients.

139 |
140 | 141 |
142 |

Object methods

143 |

Objects can also hold functions.

144 | 

145 | var lizzieTheCat = {
146 |   age: 18,
147 |   furColor: 'grey',
148 |   meow: function() {
149 |     console.log('meowww');
150 |   },
151 |   eat: function(food) {
152 |     console.log('Yum, I love ' + food);  
153 |   },
154 | };
155 |
156 |

Call object methods using dot notation:

157 | 

158 | lizzieTheCat.meow();
159 | lizzieTheCat.eat('brown mushy stuff');
160 |
161 |
162 |
163 |

Built-in methods

164 |

JS provides several built-in objects:

165 | 174 |
175 | 176 |
177 |

Review: Anatomy of a website

178 |
Your Content
179 |
+ HTML: Structure
180 |
+ CSS: Presentation
181 |
= Your Website
182 |

A website is a way to present your content to the world, using HTML and CSS to present that content & make it look good.

183 |
184 | 185 |
186 |

IDs vs. Classes

187 |
188 | ID -- Should only apply to one element on a webpage, e.g., A webpage only has one footer. 189 |

The "#" is how you tell CSS "this is an id."

190 |
191 |
192 | Class -- Lots of elements can have the same class, e.g., There can be many warnings on one webpage. 193 |

The "." is how you tell CSS "this is a class name."

194 |
195 |
196 | 197 | 198 |
199 |

The DOM Tree

200 |

We model the nested structure of an HTML page with the DOM (Document Object Model) Tree. The browser makes a "map" of all the elements on a page.

201 |
202 |
203 |

The DOM: Sample Code

204 | 

205 | <!DOCTYPE html>
206 | <html>
207 |     <head>
208 |         <title>Test Page</title>
209 |         <style>
210 |             h1 {
211 |              color: red;
212 |             }
213 |         </style>
214 |     </head>
215 |     <body>
216 |         <h1>My Page</h1>
217 |         <p>Hello World!</p>
218 |         <img src="http://placekitten.com/200/300" alt="cat"/>
219 |     </body>
220 | </html>
221 |
222 |
223 |
224 |

The DOM: Sample Model

225 | Simple DOM Tree 226 |
227 | 228 | 229 | 230 |
231 |

DOM Access

232 |

Your browser automatically builds a Document object to store the DOM of a page. To change a page:

233 |
    234 |
  1. Find the DOM node and store it in a variable
    2. 235 |
  2. Use methods to manipulate the node
    3. 236 |
237 |
238 |
239 |

DOM Access: By Id

240 |

You can find nodes by id using the method:

241 | 

242 | document.getElementById(id);
243 |
244 |

To find:

245 | 

246 | <img id="kittenPic" src="http://placekitten.com/200/300" alt="cat"/>
247 |
248 |

We would use:

249 | 

250 | var imgKitten = document.getElementById('kittenPic');
251 |
252 |
253 |
254 |

DOM Access: By Tag Name

255 |

You can certain types of HTML elements using this method:

256 | 

257 | document.getElementsByTagName(tagName);
258 |
259 |

To find:

260 | 

261 | <li>Daisy</li>
262 | <li>Tulip</li>
263 |
264 |

We would use:

265 | 

266 | var listItems = document.getElementsByTagName('li');
267 | for (var i =0; i < listItems.length; i++) {
268 |   var listItem = listItems[i];
269 | }
270 |
271 |
272 |
273 |

DOM Access: HTML 5

274 |

In newer browsers, you can use other methods too.

275 |

Available in IE9+, FF3.6+, Chrome 17+, Safari 5+:

276 | 

277 | document.getElementsByClassName(className);
278 |
279 |

Available in IE8+, FF3.6+, Chrome 17+, Safari 5+:

280 | 

281 | document.querySelector(cssQuery);
282 | document.querySelectorAll(cssQuery);
283 |
284 |
285 |
286 |

getElement vs. getElements

287 |

Any method that starts with "getElement" will return a single node.

288 | 

289 | document.getElementById('uniqueID'); //returns a single node
290 |
291 |

Any method that starts with "getElements" will return a array of nodes. To modify a single node, you will need to use bracket notation to select the correct one.

292 | 

293 | document.getElementsByTagName('p'); //returns multiple nodes
294 | var specficParagraph = document.getElementsByTagName('p')[2];
295 |
296 |
297 | 298 |
299 |

DOM Nodes: Attributes

300 |

You can access and change attributes of DOM nodes using dot notation.

301 |

To change this element:

302 | 

303 | <img id="kittenPic" src="http://placekitten.com/200/300" alt="cat"/>
304 |
305 |

We could change the src attribute this way:

306 | 

307 | var imgKitten = document.getElementById('kittenPic');
308 | var oldSrc = imgKitten.src;
309 | imgKitten.src = 'http://placekitten.com/100/500';
310 |
311 |
312 |
313 |

DOM Nodes: Getting and Setting Attributes

314 |

You can also use getAttribute/setAttribute

315 | 

316 | <img id="kittenPic" src="http://placekitten.com/200/300" alt="cat"/>
317 |
318 |

We could change the src attribute this way:

319 | 

320 | var imgKitten = document.getElementById('kittenPic');
321 | var oldSrc = imgKitten.getAttribute('src');
322 | imgKitten.setAttribute('src', 'http://placekitten.com/100/500');
323 |
324 |
325 |
326 |

DOM Nodes: Styles

327 |

You can change page css usingstyle

328 |

To make this CSS:

329 | 

330 | body {
331 |   color: red;
332 | }
333 |
334 |

Use this JavaScript:

335 | 

336 | var pageNode = document.getElementsByTagName('body')[0];
337 | pageNode.style.color = 'red';
338 |
339 |
340 |
341 |

DOM Nodes: More Styles

342 |

Change any CSS property with a "-" to camelCase, and be sure to include a unit on any number

343 |

To make this CSS:

344 | 

345 | body {
346 |   background-color: pink;
347 |   padding-top: 10px;
348 | }
349 |
350 |

Use this JavaScript:

351 | 

352 | var pageNode = document.getElementsByTagName('body')[0]
353 | pageNode.style.backgroundColor = 'pink';
354 | pageNode.style.paddingTop = '10px';
355 |
356 |
357 |
358 |

Let's Develop It

359 |

Create a simple HTML page or use this sample code.

360 |

Isolate a node (an element on the page) and change an attribute or add a new style.

361 |
362 | 363 |
364 |

DOM innerHTML

365 |

Each DOM node has an innerHTML property with the HTML of all its children. You can use the property to view or change the HTML of a node.

366 |

For example, you can overwrite the entire body:

367 | 

368 | var pageNode = document.getElementsByTagName('body')[0];
369 | pageNode.innerHTML = '<h1>Oh Noes!</h1> <p>I just changed the whole page!</p>'
370 |
371 |

Or just add some new content to the end

372 | 

373 | pageNode.innerHTML += '...just adding this bit at the end of the page.';
374 |
375 |
376 |
377 |

DOM innerHTML continued

378 |

You can also target a particular element

379 |

To fill this HTML element:

380 | 

381 | <p id="warning"></p>
382 |
383 |

We can select the node and modify it

384 | 

385 | var warningParagraph = document.getElementById('warning');
386 | warningParagraph.innerHTML = 'Danger Will Robinson!';
387 |
388 |
389 |
390 |

Creating New Nodes

391 |

The document object also provides ways to create nodes from scratch:

392 | 

393 | document.createElement(tagName);
394 | document.createTextNode(text);
395 | document.appendChild();
396 |
397 |
398 |
399 |

Creating New Nodes: Sample Code

400 | 

401 | var pageNode = document.getElementsByTagName('body')[0];
402 | 
403 | var newImg = document.createElement('img');
404 | newImg.src = 'http://placekitten.com/400/300';
405 | newImg.style.border = '1px solid black';
406 | pageNode.appendChild(newImg);
407 | 
408 | var newParagraph = document.createElement('p');
409 | var paragraphText = document.createTextNode('Squee!');
410 | newParagraph.appendChild(paragraphText);
411 | pageNode.appendChild(newParagraph);
412 |
413 |
414 |
415 |

Let's Develop It

416 |

Create a new paragraph element and add it to a div on your page.

417 |
418 | 419 |
420 |

Resources

421 |
    422 |
  • JavaScript Guide, from the Mozilla Developers Network.
    • 423 |
  • Code Academy, with interactive JavaScript lessons to help you review.
    • 424 |
425 |
426 | 427 |
428 | 434 |
435 | 436 | 437 | 438 | 439 | 440 | 465 | 466 | 467 | 468 | -------------------------------------------------------------------------------- /class4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Class 4 ~ JavaScript for Beginners ~ Girl Develop It 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 32 | 33 | 34 | 35 | 36 |
37 | 38 |
39 | 40 |
41 | GDI logo 42 |

JavaScript for Beginners

43 |

Class 4

44 |
45 | 46 | 47 |
48 |

Events

49 |

An 'event' is a type of object that is created when the user interacts with a web page.

50 |

For example, JS creates an event when a user clicks an element.

51 | 

 52 | element.onclick = function () {
 53 |   //code to execute when the click happens
 54 | };
 55 |
56 |
57 |
58 |

Types of Events

59 |

There are variety of events. Some of the most common:

60 |
    61 |
  • onclick: The event occurs when the user clicks on an element
    • 62 |
  • onmouseover: The event occurs when the pointer is moved onto an element
    • 63 |
  • onkeyup: The event occurs when the user releases a key
    • 64 |
  • onload: The event occurs when a document has been loaded
    • 65 |
  • onfocus: The event occurs when an element gets focus
    • 66 |
67 |
68 |
69 |

Events and Code

70 |

How do you make an event trigger some code?

71 |
    72 |
  1. Break your code into functions
    2. 73 |
  2. Associate a function with a JavaScript event
    3. 74 |
75 |
76 |
77 |

Calling Functions from HTML

78 |

You can call a function directly from your HTML code:

79 | 

 80 | <button id="clickMe" onclick="sayHi()">Click Me!</button>
 81 |
82 | 

 83 | function sayHi() {
 84 |     alert ('Hi!');
 85 | }
 86 |
87 |
88 |
89 |

Listening Functions

90 |

Listening functions work like many of the other things we have done. First, find the object:

91 | 

 92 | var myTarget = document.getElementById('clickMe');
 93 |
94 |

Then add an event to that object:

95 | 

 96 | myTarget.onclick=function(){
 97 |      alert ('Hi!');
 98 | }
 99 |
100 |
101 |
102 |

Let's Develop It

103 |

Download this week's sample code.

104 |

Make some JavaScript code fire after an onmouseover event. Try adding the event to the HTML and adding a listening function.

105 | 106 |
107 | 108 |
109 |

Preventing Defaults

110 |

Elements like buttons and links have a default behaviors. However, the event objects has a built-in method to handle that:

111 | 

112 | element.onclick = function (event) {
113 |   event.preventDefault();
114 | };
115 | 
116 |
117 |
118 | 119 |
120 |

This

121 |

The keyword this references the element that the user has just interacted with

122 | 

123 | element.onmouseover = function (event) {
124 |   console.log(this);
125 | };
126 | 
127 | element.onclick = function (event) {
128 |   this.style.backgroundColor = 'red';
129 |   this.innerHTML = 'I've been clicked!';
130 | };
131 |
132 |
133 |
134 |

Let's Develop It

135 |

Write code that targets this link:

136 | 

137 | <a href="http://girldevelopit.com/" id="gdiLink">Girl Develop It</a>
138 |
139 |

When a user clicks the link, the page should display an error message instead of going to the Girl Develop It homepage.

140 |
141 | 142 | 143 |
144 |

Forms

145 |

You can collect information from users to use in functions. The most common method is an HTML form

146 | 

147 | <form id="temperatureForm">
148 |     <label for="temp">Temperature:</label> <input type="text" id="temp" size="3"/> degrees in 
149 |     <input type="radio" name="tempFormat" value="F" checked />Fahrenheit 
150 |     <input type="radio" name="tempFormat" value="C" />Celsius <br />
151 |     <label for="submitButton"></label> <input id="tempSubmitButton" type="submit" value="Submit" />
152 | </form>
153 |
154 |
155 |
156 |

Retrieving Form Data

157 |

You retrieve the values of form elements using the value method.

158 | 

159 | var temperature = document.getElementById('temp').value;
160 | console.log (temperature);
161 |
162 |

You can retrieve the value of a form at any time. Try onblur (when a form element loses focus).

163 |
164 |
165 |

Radio Buttons

166 |

Radio buttons usually do not have IDs, so you will need to use an array:

167 | 

168 | var radios = document.getElementsByName('tempFormat');
169 | 
170 | for (var i = 0, length = radios.length; i < length; i++) {
171 |     if (radios[i].checked) {
172 |         var radioButtonValue = radios[i].value;
173 |         // only one radio can be checked, so stop now
174 |         break;
175 |     }
176 | }
177 |
178 |
179 |
180 |

Submit buttons

181 |

If you are going to retrieve form values with the submit button, be sure to prevent the default action!

182 | 

183 | var submitButton = document.getElementById('tempSubmitButton');
184 | submitButton.onclick = function () {
185 |     event.preventDefault();
186 |     var temperature = document.getElementById('temp').value;
187 |     console.log (temperature);
188 | }
189 |
190 |
191 |
192 |

Let's Develop It

193 |

Collect a value from the input box on the page. Use it inside a function of some kind. For example, collect a number and multiply it by five or collect a name and display a greeting.

194 |
195 | 196 |
197 |

Timing Events

198 |

In JavaScript, is possible to execute some code at specified time intervals.

199 |
    200 |
  • setInterval() executes a function over and over again, at specified time intervals
    • 201 |
  • setTimeout() executes a function, once, after waiting a specified number of milliseconds
    • 202 |
203 |
204 |
205 |

setInterval

206 |

The syntax for setInterval() is:

207 | 

208 | setInterval(function, milliseconds);
209 |
210 |

For example, this is a simple clock:

211 | 

212 | var simpleClock=setInterval(myClock, 1000);
213 | function myClock() {
214 |     var d = new Date();
215 |     var t = d.toLocaleTimeString();
216 |     document.getElementById('resultsBox').innerHTML = t;
217 | }
218 |
219 |
220 |
221 |

clearInterval

222 |

You can use clearInterval() to stop a setInterval loop

223 | 

224 | clearInterval(intervalVariable)
225 |
226 |

To stop our clock:

227 | 

228 | function myStopFunction() {
229 |     clearInterval(simpleClock);
230 | }
231 |
232 |
233 |
234 |

setTimeout

235 |

The method setTimeout() is similar, but it will only run once.

236 | 

237 | setTimeout(function, milliseconds);
238 |
239 |

For example, this code will wait 3 seconds, then create a popup box, unless the user triggers the clearTimeout()

240 | 

241 | var helloBox;
242 | function sayHello() {
243 |     helloBox=setTimeout(function(){alert('Hello')},3000);
244 | }
245 | function dontSayIt() {
246 |     clearTimeout(helloBox);
247 | }
248 |
249 |
250 |
251 |

Animations

252 |

By changing values slowly over time, we can create simple animations

253 | 

254 | var targetPic = document.getElementById('turtlePic');
255 | targetPic.onclick = function () {
256 |     var leftMarginValue = 0;
257 |     function increaseMargin() {
258 |         leftMarginValue++  // update parameter each time 
259 |         targetPic.style.marginLeft = leftMarginValue + 'px' //set left margin 
260 |         if (leftMarginValue === 200)  // check finish condition {
261 |             clearInterval(movePic);
262 |         }
263 |     var movePic = setInterval(function(){increaseMargin()}, 10) // update every 10ms
264 | }
265 |
266 |
267 |
268 |

Let's Develop It

269 |

Using the function from the previous slide as a base, try changing some animation parameters. What happens?

270 |
271 | 272 |
273 |

Resources

274 |
    275 |
  • JavaScript Guide, from the Mozilla Developers Network.
    • 276 |
  • Code Academy, with interactive JavaScript lessons to help you review.
    • 277 |
  • Khan Academy has a lot more information abut drawing and animations.
    • 278 |
279 |
280 | 281 |
282 | 288 |
289 | 290 | 291 | 292 | 293 | 294 | 319 | 320 | 321 | 322 | -------------------------------------------------------------------------------- /classexercises.css: -------------------------------------------------------------------------------- 1 | /* Pretty code box */ 2 | 3 | .codebox { 4 | border:1px solid black; 5 | background-color:#EEEEFF; 6 | width:100%; 7 | overflow:auto; 8 | padding:10px; 9 | } 10 | 11 | pre { 12 | margin: 0; 13 | } 14 | 15 | code{ 16 | word-wrap: break-word; 17 | } 18 | 19 | /*More readable forms*/ 20 | form label { 21 | display: block; 22 | float: left; 23 | clear: left; 24 | width: 10%; 25 | margin-right: 10px; 26 | text-align: right; 27 | } 28 | form textarea, input, select, label, button, optgroup { 29 | margin-top: 5px; 30 | } 31 | 32 | /*Overall Design*/ 33 | 34 | body{ 35 | background-color: #D3C7B1; 36 | font-family: Sans-Serif; 37 | } 38 | 39 | #wrapper{ 40 | width: 75em; 41 | margin: 2em auto; 42 | background-color: #fff; 43 | } 44 | 45 | #header{ 46 | background-color: #3B597D; 47 | margin: 0; 48 | padding: 1em; 49 | color: #fff; 50 | } 51 | 52 | #main{ 53 | background-color: #fff; 54 | padding: 1em; 55 | width: 58em; 56 | float: left; 57 | } 58 | 59 | #sidebar{ 60 | background-color: #D68051; 61 | padding: 1em; 62 | width: 13em; 63 | float: right; 64 | } 65 | 66 | #footer{ 67 | background-color: #3B597D; 68 | margin: 0; 69 | padding: 1em; 70 | color: #fff; 71 | clear: both; 72 | } 73 | 74 | div#footer a{ 75 | color: #fff; 76 | } 77 | 78 | /*Sidebar links*/ 79 | 80 | #sidebar ul{ 81 | list-style-type: none; 82 | margin: 0; 83 | padding: 5px; 84 | } 85 | 86 | #sidebar ul li { 87 | display: inline-block; 88 | width: 95%; 89 | height: 40px; 90 | line-height: 40px; 91 | font-size: 130%; 92 | padding: 5px; 93 | margin-bottom: 5px; 94 | background: #3B597D; 95 | background: -webkit-gradient(linear, 0 0, 0 bottom, from(#1d2c3e), to(#3B597D)); 96 | background: -webkit-linear-gradient(#1d2c3e, #3B597D); 97 | background: -moz-linear-gradient(#1d2c3e, #3B597D); 98 | background: -ms-linear-gradient(#1d2c3e, #3B597D); 99 | background: -o-linear-gradient(#1d2c3e, #3B597D); 100 | background: linear-gradient(#1d2c3e, #3B597D); 101 | border: 1px solid #1d2c3e; 102 | border-radius: 2px; 103 | font-weight: bold; 104 | } 105 | 106 | #sidebar ul li a{ 107 | text-decoration: none; 108 | color: #ffffff; 109 | } 110 | -------------------------------------------------------------------------------- /css/custom.css: -------------------------------------------------------------------------------- 1 | .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6{ 2 | color: #f3787e; 3 | } 4 | 5 | .reveal h1 { 6 | text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); 7 | font-size: 1.5em} 8 | 9 | .reveal h2 { 10 | text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); 11 | font-size: 1.2em} 12 | 13 | p.credit{ 14 | font-size: 12px; 15 | } 16 | 17 | .reveal section img { 18 | max-height: 60%; 19 | max-width: 60%; 20 | } 21 | 22 | table.smalltext{ 23 | font-size: .6em; 24 | } 25 | 26 | 27 | /* 28 | * Hide only visually, but have it available for screenreaders: h5bp.com/v 29 | */ 30 | 31 | .visuallyhidden { 32 | border: 0; 33 | clip: rect(0 0 0 0); 34 | height: 1px; 35 | margin: -1px; 36 | overflow: hidden; 37 | padding: 0; 38 | position: absolute; 39 | width: 1px; 40 | } 41 | 42 | /* 43 | * Extends the .visuallyhidden class to allow the element to be focusable 44 | * when navigated to via the keyboard: h5bp.com/p 45 | */ 46 | 47 | .visuallyhidden.focusable:active, 48 | .visuallyhidden.focusable:focus { 49 | clip: auto; 50 | height: auto; 51 | margin: 0; 52 | overflow: visible; 53 | position: static; 54 | width: auto; 55 | } 56 | -------------------------------------------------------------------------------- /files/class3.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdi-curriculum-review/gdi-featured-js-intro-OLD/c85c8f3a6563b54f40d3b65e63c73e0922b5c08e/files/class3.zip -------------------------------------------------------------------------------- /files/class4.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdi-curriculum-review/gdi-featured-js-intro-OLD/c85c8f3a6563b54f40d3b65e63c73e0922b5c08e/files/class4.zip -------------------------------------------------------------------------------- /homework.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript Puzzles | Girl Develop It 6 | 7 | 8 | 17 | 18 | 19 |
20 | 23 | 31 |
32 |

Welcome! These are some bonus puzzles to accompany the Girl Develop It JavaScript for Beginners class. Please take a look at the puzzles, and work on one that looks challenging but not completely overwhelming. You can always reference the slides if you get stuck. Commit to spend at least 20 minutes trying to figure out a problem before you look at the answers. It helps you learn!

33 | 34 |

Class 1

35 |

The Fortune Teller

36 |

Why pay a fortune teller when you can just program your fortune yourself?

37 | 41 | 42 | 43 |
44 | 

 45 | var numKids  = 5;
 46 | var partner  = 'David Beckham';
 47 | var location = 'Costa Rica';
 48 | var jobTitle = 'web developer';
 49 | 
 50 | var future = 'You will be a ' + jobTitle + ' in ' + location + ', and married to ' +
 51 |    partner + ' ' + ' with ' + numKids + ' kids.';
 52 | console.log(future);
 53 |
54 |
55 | 56 |

The Calculator

57 | 74 | 75 | 76 |
77 | 

 78 | function squareNumber(num) {
 79 |     var squaredNumber = num * num;
 80 |     console.log('The result of squaring the number ' + num + ' is ' + squaredNumber);
 81 |     return squaredNumber;
 82 | }
 83 | 
 84 | squareNumber(3);
 85 | 
 86 | function halfOf(num) {
 87 |     var half = num / 2;
 88 |     console.log('Half of ' + num + ' is ' +  half);
 89 |     return half;
 90 | }
 91 | 
 92 | halfOf(5);
 93 | 
 94 | function percentOf(num1, num2) {
 95 |     var percent = (num1/num2) * 100;
 96 |     console.log(num1 + ' is ' + percent + '% of ' + num2);
 97 |     return percent;
 98 | }
 99 | 
100 | percentOf(5, 10);
101 | 
102 | function areaOfCircle(radius) {
103 |     var area = Math.PI * squareNumber(radius);
104 |     console.log('The area of circle with radius ' + radius + ' is ' + area);
105 |     return area;
106 | }
107 | 
108 | areaOfCircle(2);
109 | 
110 | function doCrazyStuff(num) {
111 |     var half    = halfOf(num);
112 |     var squared = squareNumber(half);
113 |     var area    = areaOfCircle(squared);
114 |     var result  = percentOf(squared, area);
115 | }
116 | 
117 | doCrazyStuff(5);
118 |
119 |
120 | 121 |

Challenge Questions: String Manipulation

122 |

If you feel comfortable with the other exercises, it's time to expand your knowledge! These puzzles involve manipulating strings; to try them out, you'll need to use some of the built-in JavaScript methods for strings. Methods are pre-written functions that are built into the language.

123 | 124 |

These questions are not as straightforward as the others. They challenge you to really think like a programmer. Really try to solve them before you peek at the answer.

125 | 126 |

MixUp

127 |

Create a function called mixUp. It should take in two strings, and return the concatenation of the two strings (separated by a space) slicing out and swapping the first 2 characters of each. You can assume that the strings are at least 2 characters long. For example:

128 | 
129 | mixUp('mix', pod'): 'pox mid'
130 | mixUp('dog', 'dinner'): 'dig donner'
131 |
132 | 133 | 134 |
135 | 

136 | //This function uses the slice() method. It extracts a part of a string and returns a new string
137 | function mixUp(string1, string2) {
138 |   return string1.slice(0, 2) + string2.slice(2) + " " + string2.slice(0, 2) + string1.slice(2);
139 | }
140 |
141 |
142 | 143 |

FixStart

144 |

Create a function called fixStart. It should take a single argument, a string, and return a version where all occurrences of its first character have been replaced with '*', except for the first character itself. You can assume that the string is at least one character long. For example:

145 | 
146 | fixStart('babble'): 'ba**le'
147 | fixStart('turtle'): 'tur*le'
148 |
149 | 150 | 151 |
152 | 

153 | //This function uses a few new methods and regular expressions
154 | function fixStart(inputString) {
155 |   var firstChar = inputString.charAt(0);
156 |   return firstChar + inputString.slice(1).replace(new RegExp(firstChar, 'g'), '*');
157 | }
158 |
159 |
160 | 161 | 162 | 163 |

Class 2

164 |

What number is bigger?

165 |

Write a function that compares two numbers and returns the larger one. Be sure to try it our with some different numbers. Bonus: add error messages if the numbers are equal or cannot be compared.

166 |

Don't forget to test it!

167 | 168 | 169 |
170 | 

171 | function greaterNum(num1, num2) {
172 |     if (num1 === num2) {
173 |         console.log ('Those numbers are equal');
174 |         return num1;
175 |     } else if (num1 > num2) {
176 |         return num1;
177 |     } else if (num2 > num1) {
178 |         return num2;
179 |     } else {
180 |         console.log ('Those are simply incomparable!');
181 |         return undefined;
182 |     }
183 | }
184 | 
185 | console.log (greaterNum(3, 3));
186 | console.log (greaterNum(7, -2));
187 | console.log (greaterNum(5, 9));
188 | console.log (greaterNum(5, 'dog'));
189 |
190 |
191 | 192 |

Pluralize

193 |

Write a function pluralize that takes in two arguments, a number and a word, and returns the plural. For example:

194 | 
195 | pluralize(5, 'cat'): '5 cats'
196 | pluralize(7, 'turtle'): '7 cats'
197 |
198 |

Bonus: Make it handle a few collective nouns like "sheep" and "geese".

199 | 200 | 201 | 202 |
203 | 

204 | function pluralize(number, noun) {
205 |     if (number != 1 && noun != 'sheep' && noun != 'geese') {
206 |         return number + ' ' + noun + 's';
207 |     } else {
208 |         return number + ' ' + noun;
209 |     }
210 | }
211 | console.log('I have ' + pluralize(0, 'cat'));
212 | console.log('I have ' + pluralize(1, 'cat'));
213 | console.log('I have ' + pluralize(2, 'cat'));
214 | console.log('I have ' + pluralize(3, 'geese'));
215 |
216 |
217 | 218 |

Even/Odd Counter

219 |

Write a for loop that will iterate from 0 to 20. For each iteration, it will check if the current number is even or odd, and report that to the screen (e.g. "2 is even")

220 | 221 | 222 |
223 | 

224 | for (var i = 0; i <= 20; i++) {
225 |     if (i % 2 === 0) {
226 |         console.log(i + ' is even');
227 |     } else {
228 |         console.log(i + ' is odd');
229 |     }
230 | }
231 |
232 |
233 | 234 |

Top Choice

235 |

Create an array to hold your top choices (colors, presidents, whatever). For each choice, log to the screen a string like: "My #1 choice is blue." Bonus: Change it to log "My 1st choice, "My 2nd choice", "My 3rd choice", picking the right suffix for the number based on what it is.

236 | 237 | 238 |
239 | 

240 | var choices = ['red', 'orange', 'pink', 'yellow'];
241 | for (var i = 0; i < choices.length; i++) {
242 |     console.log('My #' + (i + 1) + ' choice is ' + choices[i]);
243 | }
244 | 
245 | for (var i = 0; i < choices.length; i++) {
246 |     var choiceNum = i + 1;
247 |     var choiceNumSuffix;
248 |     if (choiceNum == 1) {
249 |         choiceNumSuffix = 'st';
250 |     } else if (choiceNum == 2) {
251 |         choiceNumSuffix = 'nd';
252 |     } else if (choiceNum == 3) {
253 |         choiceNumSuffix = 'rd';
254 |     } else {
255 |         choiceNumSuffix = 'th';
256 |     }
257 |     console.log('My ' + choiceNum + choiceNumSuffix + ' choice is ' + choices[i]);
258 | }
259 |
260 |
261 | 262 |

Class 3

263 | 264 |

The Reading List

265 |

Keep track of which books you read and which books you want to read!

266 | 271 | 272 | 273 |
274 | 

275 | var books = [
276 |   {title: 'The Design of EveryDay Things',
277 |    author: 'Don Norman',
278 |    alreadyRead: false
279 |   },
280 |   {title: 'The Most Human Human',
281 |   author: 'Brian Christian',
282 |   alreadyRead: true
283 |   }];
284 | 
285 | for (var i = 0; i < books.length; i++) {
286 |   var book = books[i];
287 |   var bookInfo = book.title + '" by ' + book.author;
288 |   if (book.alreadyRead) {
289 |     console.log('You already read "' + bookInfo);
290 |   } else {
291 |     console.log('You still need to read "' + bookInfo);
292 |   }
293 | }
294 |
295 |
296 | 297 | 298 |

Logo Hijack

299 | 306 | 307 | 308 |
309 | 

310 | var img = document.getElementById('hplogo');
311 | img.width = 400;
312 | img.src = 'http://www.logostage.com/logos/yahoo.GIF';
313 | var button = document.getElementById('gbqfba');
314 | button.innerHTML = 'Yahoooo!';
315 |
316 |
317 | 318 |

The Reading List Part II

319 | 328 | 329 | 330 |
331 | 

332 | <!DOCTYPE html>
333 | <html>
334 |  <head>
335 |   <meta charset="utf-8"/>
336 |   <title>Book List</title>
337 |  </head>
338 | <body>
339 | 
340 | <h1>My Book List</h1>
341 | <script>
342 | var books = [
343 |   {title: 'The Design of EveryDay Things',
344 |    author: 'Don Norman',
345 |    alreadyRead: false
346 |   },
347 |   {title: 'The Most Human Human',
348 |    author: 'Brian Christian',
349 |    alreadyRead: true
350 |   }];
351 |     
352 | for (var i = 0; i < books.length; i++) {
353 |   var bookP = document.createElement('p');
354 |   var bookDescription = document.createTextNode(books[i].title + ' by ' + books[i].author);
355 |   bookP.appendChild(bookDescription);
356 |   document.body.appendChild(bookP);
357 | }
358 | 
359 | // Or, with the bonuses:
360 | var books = [
361 |   {title: 'The Design of EveryDay Things',
362 |    img: 'http://ecx.images-amazon.com/images/I/41j2ODGkJDL._AA115_.jpg',
363 |    author: 'Don Norman',
364 |    alreadyRead: false
365 |   },
366 |   {title: 'The Most Human Human',
367 |    img: 'http://ecx.images-amazon.com/images/I/41Z56GwEv9L._AA115_.jpg',
368 |    author: 'Brian Christian',
369 |    alreadyRead: true
370 |   }];
371 |     
372 | var bookList = document.createElement('ul');
373 | for (var i = 0; i < books.length; i++) {
374 |   var bookItem = document.createElement('li');
375 |   var bookImg = document.createElement('img');
376 |   bookImg.src = books[i].img;
377 |   bookItem.appendChild(bookImg);
378 |   var bookDescription = document.createTextNode(books[i].title + ' by ' + books[i].author);
379 |   bookItem.appendChild(bookDescription);
380 |   if (books[i].alreadyRead) {
381 |     bookItem.style.color = 'grey';
382 |   }
383 |   bookList.appendChild(bookItem);
384 | }
385 | document.body.appendChild(bookList);
386 | </script>
387 |   
388 | </body>
389 | </html>
390 |
391 |
392 | 393 |

Challenge Question: The Counter

394 |

Write a function that takes a certain type of tag and counts the number of elements with that tag. The function should return "There a X tags of type y on the page.For example:

395 | 
396 | countTags('p'): 'There are 3 tags of type p on the page'
397 |
398 | 399 | 400 |
401 | 

402 | function countTags (tagType) {
403 |     var tagArray = document.getElementsByTagName(tagType);
404 |     console.log ('There are ' + tagArray.length + ' tags of type ' + tagType + ' on the page.');
405 | }
406 |
407 |
408 | 409 |

Class 4

410 |

Coming Soon!

411 | 412 |
413 | 416 |
417 | 418 | 431 | 432 | -------------------------------------------------------------------------------- /images/client-server.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdi-curriculum-review/gdi-featured-js-intro-OLD/c85c8f3a6563b54f40d3b65e63c73e0922b5c08e/images/client-server.jpg -------------------------------------------------------------------------------- /images/dom-tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdi-curriculum-review/gdi-featured-js-intro-OLD/c85c8f3a6563b54f40d3b65e63c73e0922b5c08e/images/dom-tree.png -------------------------------------------------------------------------------- /images/gdi_logo_badge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdi-curriculum-review/gdi-featured-js-intro-OLD/c85c8f3a6563b54f40d3b65e63c73e0922b5c08e/images/gdi_logo_badge.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Class Slides ~ JavaScript for Beginners ~ Girl Develop It 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 32 | 33 | 34 | 35 | 36 |
37 | 38 | 39 |
40 | 41 |
42 | 43 |

JavaScript for Beginners

44 |
45 |
46 |

Class Slides

47 | 53 |
54 | 55 | 56 |
57 | 63 |
64 | 65 | 66 | 67 | 68 | 69 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /reveal/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. -------------------------------------------------------------------------------- /reveal/README.md: -------------------------------------------------------------------------------- 1 | # reveal.js 2 | 3 | A framework for easily creating beautiful presentations using HTML. [Check out the live demo](http://lab.hakim.se/reveal-js/). 4 | 5 | reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). It's best viewed in a browser with support for CSS 3D transforms but [fallbacks](https://github.com/hakimel/reveal.js/wiki/Browser-Support) are available to make sure your presentation can still be viewed elsewhere. 6 | 7 | 8 | #### More reading in the Wiki: 9 | - [Changelog](https://github.com/hakimel/reveal.js/wiki/Changelog): Up-to-date version history. 10 | - [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own! 11 | - [Browser Support](https://github.com/hakimel/reveal.js/wiki/Browser-Support): Explanation of browser support and fallbacks. 12 | 13 | ## rvl.io 14 | 15 | Slides are written using HTML or markdown but there's also an online editor for those of you who prefer a more traditional user interface. Give it a try at [www.rvl.io](http://www.rvl.io). 16 | 17 | 18 | ## Instructions 19 | 20 | ### Markup 21 | 22 | Markup heirarchy needs to be ``
`` where the ``
`` represents one slide and can be repeated indefinitely. If you place multiple ``
``'s inside of another ``
`` they will be shown as vertical slides. The first of the vertical slides is the "root" of the others (at the top), and it will be included in the horizontal sequence. For example: 23 | 24 | ```html 25 |
26 |
27 |
Single Horizontal Slide
28 |
29 |
Vertical Slide 1
30 |
Vertical Slide 2
31 |
32 |
33 |
34 | ``` 35 | 36 | ### Markdown 37 | 38 | It's possible to write your slides using Markdown. To enable Markdown, add the ```data-markdown``` attribute to your ```
``` elements and wrap the contents in a ``` 49 |
50 | ``` 51 | 52 | 53 | ### Configuration 54 | 55 | At the end of your page you need to initialize reveal by running the following code. Note that all config values are optional and will default as specified below. 56 | 57 | ```javascript 58 | Reveal.initialize({ 59 | // Display controls in the bottom right corner 60 | controls: true, 61 | 62 | // Display a presentation progress bar 63 | progress: true, 64 | 65 | // Push each slide change to the browser history 66 | history: false, 67 | 68 | // Enable keyboard shortcuts for navigation 69 | keyboard: true, 70 | 71 | // Enable the slide overview mode 72 | overview: true, 73 | 74 | // Loop the presentation 75 | loop: false, 76 | 77 | // Number of milliseconds between automatically proceeding to the 78 | // next slide, disabled when set to 0, this value can be overwritten 79 | // by using a data-autoslide attribute on your slides 80 | autoSlide: 0, 81 | 82 | // Enable slide navigation via mouse wheel 83 | mouseWheel: true, 84 | 85 | // Apply a 3D roll to links on hover 86 | rollingLinks: true, 87 | 88 | // Transition style 89 | transition: 'default' // default/cube/page/concave/zoom/linear/none 90 | }); 91 | ``` 92 | 93 | ### Dependencies 94 | 95 | Reveal.js doesn't _rely_ on any third party scripts to work but a few optional libraries are included by default. These libraries are loaded as dependencies in the order they appear, for example: 96 | 97 | ```javascript 98 | Reveal.initialize({ 99 | dependencies: [ 100 | // Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/ 101 | { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } }, 102 | // Interpret Markdown in
elements 103 | { src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, 104 | { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, 105 | // Syntax highlight for elements 106 | { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, 107 | // Zoom in and out with Alt+click 108 | { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }, 109 | // Speaker notes 110 | { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } } 111 | ] 112 | }); 113 | ``` 114 | 115 | You can add your own extensions using the same syntax. The following properties are available for each dependency object: 116 | - **src**: Path to the script to load 117 | - **async**: [optional] Flags if the script should load after reveal.js has started, defaults to false 118 | - **callback**: [optional] Function to execute when the script has loaded 119 | - **condition**: [optional] Function which must return true for the script to be loaded 120 | 121 | 122 | ### API 123 | 124 | The Reveal class provides a minimal JavaScript API for controlling navigation and reading state: 125 | 126 | ```javascript 127 | // Navigation 128 | Reveal.slide( indexh, indexv ); 129 | Reveal.left(); 130 | Reveal.right(); 131 | Reveal.up(); 132 | Reveal.down(); 133 | Reveal.prev(); 134 | Reveal.next(); 135 | Reveal.prevFragment(); 136 | Reveal.nextFragment(); 137 | Reveal.toggleOverview(); 138 | 139 | // Retrieves the previous and current slide elements 140 | Reveal.getPreviousSlide(); 141 | Reveal.getCurrentSlide(); 142 | 143 | Reveal.getIndices(); // { h: 0, v: 0 } } 144 | ``` 145 | 146 | ### States 147 | 148 | If you set ``data-state="somestate"`` on a slide ``
``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide. 149 | 150 | Furthermore you can also listen to these changes in state via JavaScript: 151 | 152 | ```javascript 153 | Reveal.addEventListener( 'somestate', function() { 154 | // TODO: Sprinkle magic 155 | }, false ); 156 | ``` 157 | 158 | ### Ready event 159 | 160 | The 'ready' event is fired when reveal.js has loaded all (synchronous) dependencies and is ready to start navigating. 161 | 162 | ```javascript 163 | Reveal.addEventListener( 'ready', function( event ) { 164 | // event.currentSlide, event.indexh, event.indexv 165 | } ); 166 | ``` 167 | 168 | ### Slide change event 169 | 170 | An 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes. 171 | 172 | ```javascript 173 | Reveal.addEventListener( 'slidechanged', function( event ) { 174 | // event.previousSlide, event.currentSlide, event.indexh, event.indexv 175 | } ); 176 | ``` 177 | 178 | ### Internal links 179 | 180 | It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (```
```): 181 | 182 | ```html 183 | Link 184 | Link 185 | ``` 186 | ### Fullscreen mode 187 | Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode. 188 | 189 | ### Fragments 190 | Fragments are used to highlight individual elements on a slide. Every elmement with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/16 191 | 192 | The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment: 193 | 194 | ```html 195 |
196 |

grow

197 |

shrink

198 |

roll-in

199 |

fade-out

200 |

highlight-red

201 |

highlight-green

202 |

highlight-blue

203 |
204 | ``` 205 | 206 | ### Fragment events 207 | 208 | When a slide fragment is either shown or hidden reveal.js will dispatch an event. 209 | 210 | ```javascript 211 | Reveal.addEventListener( 'fragmentshown', function( event ) { 212 | // event.fragment = the fragment DOM element 213 | } ); 214 | Reveal.addEventListener( 'fragmenthidden', function( event ) { 215 | // event.fragment = the fragment DOM element 216 | } ); 217 | ``` 218 | 219 | 220 | ## PDF Export 221 | 222 | Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome). 223 | Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-13872948. 224 | 225 | 1. Open your presentation with [css/print/pdf.css](https://github.com/hakimel/reveal.js/blob/master/css/print/pdf.css) included on the page. The default index HTML lets you add *print-pdf* anywhere in the query to include the stylesheet, for example: [lab.hakim.se/reveal-js?print-pdf](http://lab.hakim.se/reveal-js?print-pdf). 226 | 2. Open the in-browser print dialog (CMD+P). 227 | 3. Change the **Destination** setting to **Save as PDF**. 228 | 4. Change the **Layout** to **Landscape**. 229 | 5. Change the **Margins** to **None**. 230 | 6. Click **Save**. 231 | 232 | ![Chrome Print Settings](https://s3.amazonaws.com/hakim-static/reveal-js/pdf-print-settings.png) 233 | 234 | 235 | ## Speaker Notes 236 | 237 | reveal.js comes with a speaker notes plugin which can be used to present per-slide notes in a separate browser window. The notes window also gives you a preview of the next upcoming slide so it may be helpful even if you haven't written any notes. Append ```?notes``` to presentation URL or press the 's' key on your keyboard to open the notes window. 238 | 239 | By default notes are written using standard HTML, see below, but you can add a ```data-markdown``` attribute to the ```