Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript
for Beginners
@ssaunier
{ , }/ssaunier
Sébastien Saunier
CTO @ Le Wagon
Bring technical skills
to creative people
Let's talk about JavaScript
In-browser language
(since 1995)
Sublime Text
JS Bin
Data types
typeof
Numbers
-100
0
1
3.14
42
Boolean
true
false
String
"John"
"John Lennon"
"a"
""
Object
{
"first_name" : "John",
"last_name" : "Lennon"
}
[ "john", "paul", "ringo", "george" ]
null
undefined
Variables
var
var firstName;
var firstName = "John";
"John"
console.log(firstName);
"John"
Concatenate two strings
Exercise
Conditions
if, else
if (weather === "rainy") {
console.log("Take an umbrella");
}
if (weather === "rainy") {
console.log("Take an umbrella");
} else {
console.log("Take your sunglasses");
}
if (weather === "rainy") {
console.log("Take an umbrella");
} else if (weather === "stormy") {
console.log("Stay at home")...
Boolean algebra
&&, ||, !
var result = a && b;
Logical and
a b result
false false false
false true false
true false false
true true true
var rain = true;
var wind = true;
if (rain && wind) {
console.log("Really stay at home");
}
var result = a || b;
Logical or
a b result
false false false
false true true
true false true
true true true
var day = "Saturday";
if (day === "Saturday" || day === "Sunday") {
console.log("It's the week-end!");
}
var result = !a;
Logical not
a result
true false
false true
var sunny = true;
if (!sunny) {
console.log("Cancel the beach");
}
var weather = "raining";
if (weather !== "sunny") {
console.log("Cancel the beach");
}
Filter names starting with a "B"
Exercise
Loops
for, while
Array
var students = [ "john", "paul", "ringo" ];
students.length // => 3
students[0] // => "john"
students[2] // => "ring...
For
for (var i = 0; i < students.length; i += 1) {
console.log(students[i]);
}
Filter names starting with a "B"
Exercise bis
While
var i = 0;
while (i < students.length) {
console.log(students[i]);

i += 1;
}
Functions
function
function name(parameters) {
body
(return statement)
}
function fullName(first, last) {
var name = first + " " + last;
return name;
}
Example: Full Name
fullName("John", "Lennon");
Calling a function
Function name arguments
Filter names starting with "B"
starting with "C"
…
Exercise ter
DOM
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>
Hello
</h1>
<p>
Lorem Ipsum…
</p>
</body>
</html>
html
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>
Hello
</h1>
<p>
Lorem Ipsum…
</p>
</body>
</html>
html
head body
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>
Hello
</h1>
<p>
Lorem Ipsum…
</p>
</body>
</html>
html
head body
ti...
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>
Hello
</h1>
<p>
Lorem Ipsum…
</p>
</body>
</html>
html
head body
ti...
jQuery
https://code.jquery.com/jquery-1.11.3.min.js
$(document).ready(function() {
// The jQuery-dependent code
});
1 - DOM Manipulation
p
$("p").hide();
<h1>
Hello
</h1>
<p>
Lorem Ipsum…
</p>
<p>
Autrum Ipsum…
</p>
Element Selector
#cart
$("#cart").hide();
<h1>
Hello
</h1>
<div id="cart">
[…]
</div>
<div>
[…]
</div>
Id selector
.red
$(".red").hide();
<div class="green">
Hello
</h1>
<div class="red">
[…]
</div>
<div class="red">
[…]
</div>
Class sel...
<div id="cart" class="red">
[…]
</div>
$("#cart").addClass(‘bold’);
<div id="cart" class="red">
[…]
</div>
$("#cart").addClass(‘bold’);
<div id="cart" class="red">
[…]
</div>
<div id="cart" class="bold red">
[…]
</div>
$("#cart").removeClass(‘bold’);
<div id="cart" class="bold red">
[…]
</div>
<div id="cart" class="red">
[…]
</div>
2 - Event Handling
$('#play-button').click();
$('#an-element').on('click', function() {
alert("You have clicked");
});
3 - AJAX
(To be continued…)
Resources
ondemand.lewagon.org/jsmeetup
-30€
(Jusqu'à dimanche, 23h)
Le Wagon - Javascript for Beginners
Le Wagon - Javascript for Beginners
Le Wagon - Javascript for Beginners
Le Wagon - Javascript for Beginners
Le Wagon - Javascript for Beginners
Le Wagon - Javascript for Beginners
Le Wagon - Javascript for Beginners
Le Wagon - Javascript for Beginners
Le Wagon - Javascript for Beginners
Le Wagon - Javascript for Beginners
Upcoming SlideShare
Loading in …5
×

Le Wagon - Javascript for Beginners

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

  • Login to see the comments

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)

×