Introduction to programming

This was for highschool students over an 8 week course.

Transcript

1. An introduction to Javascript Day 1
2. Who are we?
3. What are we going to do? • An introduction to programming. • A game!
4. What will you need before starting? • Google Chrome • Sublime Text 2 or 3 • That's it!
5. Why Javascript?
6. It's the backbone of web development
7. Web development is HUGE
8. It's really easy to get started with. You just need a browser!
9. Let's start!
10. Values Javascript understands a finite set of values • Numbers 4 or 8.3 • Strings 'My name is Pablo' • Booleans true or false
11. Operations with numbers 1 + 2 * 3 / 6 -> 2 (1 + 2 * 3) / 6 -> 1.16 // the module operator returns the reminder of a division 3 % 2 -> 1 6 % 3 -> 0
12. Operations with strings // they can be concatenated 'Homer' + ' Jay ' + 'Simpson' // to obtain this result 'Homer Jay Simpson'
13. Comparisons 3 > 2 -> true 'Pablo' === 'Ernesto' -> false 4.4 !== 5.4 -> true
14. Variables A container where you can save values var name = 'Homer Jay Simpson'; var age = 40; var height = 1.70; They are used to remember state
15. An example var apples = 10; var pricePerApple = 5; var total = apples * pricePerApple; console.log(total); -> 50
16. Try it! Create variables for your name, lastName and Age. // On Google Chrome: View -> Developer -> Developer Tools. Open the console.
17. Conditional execution Whenever we want a certain code to be executed if, and only if, a certain condition holds. var name = 'Pablo'; if (name === 'Pablo') { console.log('Hello, Pablo!'); } else { console.log('Wait, you are not Pablo!'); }
18. Try it! // On Google Chrome: View -> Developer -> Developer Tools. Open the console. var name = 'John'; if (name === 'John') { console.log('Hello, John!'); } else { console.log('Wait, you are not John!'); }
19. Loops We use them to repeat some code while certain conditions are met So instead of doing this: console.log(0); console.log(2); console.log(4); console.log(6); console.log(8); console.log(10); console.log(12);
20. We can do this with while loops: var number = 0; while (number < 12) { console.log(number); number = number + 2; }
21. Or with do while loops: var number = 0; do { console.log(number); number = number + 2; } while (number < 12);
22. Or with for loops: for (var i = 0; i <= 12; i = i + 2) { console.log(i); }
23. Let's get some practice!
24. Print your name 10 times
25. Print your name 10 times Alternate between your first name and last name. John Doe John Doe John Doe John Doe John Doe // the module operator returns the remainder of a division 3 % 3 -> 0
26. Looping a triangle Write a loop that makes seven calls to console.log to output the following triangle: # ## ### #### ##### ###### #######
27. # ## ### #### ##### ###### ####### It may be useful to know that you can find the length of a string by writing .length after it. var abc = "abc"; console.log(abc.length); -> 3
28. Big Square Write a program that creates a string that represents an 8×8 grid, using newline characters to separate lines. At each position there's an # character. If you append "\n" to a string, it will jump the line. You're only allowed to concatenate a single character at once. ######## ######## ######## ######## ######## ######## ######## ########
29. FizzBuzz part 1 Write a program that uses console.log to print all the numbers from 1 to 100, with two exceptions. For numbers divisible by 3, print "Fizz" instead of the number, and for numbers divisible by 5 (and not 3), print "Buzz" instead. // the module operator returns the remainder of a division 3 % 3 -> 0
30. FizzBuzz part 2 When you have that working, modify your program to print "FizzBuzz" for numbers that are divisible by both 3 and 5. // the module operator returns the remainder of a division 3 % 3 -> 0
31. Data structures and Objects • Arrays ['Homer', 'Jay'] // add objects to them ['Homer', 'Jay'].push('Simpson') -> ['Homer', 'Jay', 'Simpson'] // get count of objects ['Homer', 'Jay', 'Simpson'].length -> 3
32. Objects var day1 = { types: ['string', 'boolean', 'number'], exercises: 3, teachers: 3 awesome: true };
33. .. and now a graphic example