Successfully reported this slideshow.
Upcoming SlideShare
×

Le Wagon - Javascript for Beginners

Slide of this meetup => http://www.meetup.com/fr/Le-Wagon-Paris-Coding-Station/events/225612507/

• Full Name
Comment goes here.

Are you sure you want to Yes No

Le Wagon - Javascript for Beginners

1. 1. JavaScript for Beginners @ssaunier
2. 2. { , }/ssaunier Sébastien Saunier CTO @ Le Wagon
3. 3. Bring technical skills to creative people
4. 4. Let's talk about JavaScript
5. 5. In-browser language (since 1995)
6. 6. Sublime Text
7. 7. JS Bin
8. 8. Data types typeof
9. 9. Numbers -100 0 1 3.14 42
10. 10. Boolean true false
11. 11. String "John" "John Lennon" "a" ""
12. 12. Object { "first_name" : "John", "last_name" : "Lennon" } [ "john", "paul", "ringo", "george" ]
13. 13. null undefined
14. 14. Variables var
15. 15. var firstName;
16. 16. var firstName = "John"; "John"
17. 17. console.log(firstName); "John"
18. 18. Concatenate two strings Exercise
19. 19. Conditions if, else
20. 20. if (weather === "rainy") { console.log("Take an umbrella"); }
21. 21. if (weather === "rainy") { console.log("Take an umbrella"); } else { console.log("Take your sunglasses"); }
22. 22. if (weather === "rainy") { console.log("Take an umbrella"); } else if (weather === "stormy") { console.log("Stay at home"); } else { console.log("Take your sunglasses"); }
23. 23. Boolean algebra &&, ||, !
24. 24. var result = a && b; Logical and a b result false false false false true false true false false true true true
25. 25. var rain = true; var wind = true; if (rain && wind) { console.log("Really stay at home"); }
26. 26. var result = a || b; Logical or a b result false false false false true true true false true true true true
27. 27. var day = "Saturday"; if (day === "Saturday" || day === "Sunday") { console.log("It's the week-end!"); }
28. 28. var result = !a; Logical not a result true false false true
29. 29. var sunny = true; if (!sunny) { console.log("Cancel the beach"); }
30. 30. var weather = "raining"; if (weather !== "sunny") { console.log("Cancel the beach"); }
31. 31. Filter names starting with a "B" Exercise
32. 32. Loops for, while
33. 33. Array var students = [ "john", "paul", "ringo" ]; students.length // => 3 students[0] // => "john" students[2] // => "ringo" students[1] // => "paul"
34. 34. For for (var i = 0; i < students.length; i += 1) { console.log(students[i]); }
35. 35. Filter names starting with a "B" Exercise bis
36. 36. While var i = 0; while (i < students.length) { console.log(students[i]);  i += 1; }
37. 37. Functions function
38. 38. function name(parameters) { body (return statement) }
39. 39. function fullName(first, last) { var name = first + " " + last; return name; } Example: Full Name
40. 40. fullName("John", "Lennon"); Calling a function Function name arguments
41. 41. Filter names starting with "B" starting with "C" … Exercise ter
42. 42. DOM
43. 43. <html> <head> <title>Hello</title> </head> <body> <h1> Hello </h1> <p> Lorem Ipsum… </p> </body> </html> html
44. 44. <html> <head> <title>Hello</title> </head> <body> <h1> Hello </h1> <p> Lorem Ipsum… </p> </body> </html> html head body
45. 45. <html> <head> <title>Hello</title> </head> <body> <h1> Hello </h1> <p> Lorem Ipsum… </p> </body> </html> html head body title
46. 46. <html> <head> <title>Hello</title> </head> <body> <h1> Hello </h1> <p> Lorem Ipsum… </p> </body> </html> html head body title h1 p
47. 47. jQuery
48. 48. https://code.jquery.com/jquery-1.11.3.min.js \$(document).ready(function() { // The jQuery-dependent code });
49. 49. 1 - DOM Manipulation
50. 50. p \$("p").hide(); <h1> Hello </h1> <p> Lorem Ipsum… </p> <p> Autrum Ipsum… </p> Element Selector
51. 51. #cart \$("#cart").hide(); <h1> Hello </h1> <div id="cart"> […] </div> <div> […] </div> Id selector
52. 52. .red \$(".red").hide(); <div class="green"> Hello </h1> <div class="red"> […] </div> <div class="red"> […] </div> Class selector
53. 53. <div id="cart" class="red"> […] </div>
54. 54. \$("#cart").addClass(‘bold’); <div id="cart" class="red"> […] </div>
55. 55. \$("#cart").addClass(‘bold’); <div id="cart" class="red"> […] </div> <div id="cart" class="bold red"> […] </div>
56. 56. \$("#cart").removeClass(‘bold’); <div id="cart" class="bold red"> […] </div> <div id="cart" class="red"> […] </div>
57. 57. 2 - Event Handling
58. 58. \$('#play-button').click();
59. 59. \$('#an-element').on('click', function() { alert("You have clicked"); });
60. 60. 3 - AJAX (To be continued…)
61. 61. Resources
62. 62. ondemand.lewagon.org/jsmeetup -30€ (Jusqu'à dimanche, 23h)