Le Wagon - Javascript for Beginners

JavaScript
for Beginners
@ssaunier

{ , }/ssaunier
Sébastien Saunier
CTO @ Le Wagon

Bring technical skills
to creative people

In-browser language
(since 1995)

String
"John"
"John Lennon"
"a"
""

Object
{
"first_name" : "John",
"last_name" : "Lennon"
}
[ "john", "paul", "ringo", "george" ]

var firstName = "John";
"John"

console.log(firstName);
"John"

Concatenate two strings
Exercise

if (weather === "rainy") {
console.log("Take an umbrella");
}

} else {
console.log("Take your sunglasses");
}

} else if (weather === "stormy") {
console.log("Stay at home");
} else {
console.log("Take your sunglasses");
}

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

Array
var students = [ "john", "paul", "ringo" ];
students.length // => 3
students[0] // => "john"
students[2] // => "ringo"
students[1] // => "paul"

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;
}

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

<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>
Hello
</h1>
<p>
Lorem Ipsum…
</p>
</body>
</html>
html

<html>
<head>
</head>
<body>
<h1>
Hello
</h1>
<p>
Lorem Ipsum…
</p>
</body>
</html>
html
head body

<html>
<head>
</head>
<body>
<h1>
Hello
</h1>
<p>
Lorem Ipsum…
</p>
</body>
</html>
html
head body
title

<html>
<head>
</head>
<body>
<h1>
Hello
</h1>
<p>
Lorem Ipsum…
</p>
</body>
</html>
html
head body
title h1 p

https://code.jquery.com/jquery-1.11.3.min.js
$(document).ready(function() {
// The jQuery-dependent code
});

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 selector

$("#cart").addClass(‘bold’);
[…]
</div>

$("#cart").addClass(‘bold’);
[…]
</div>
<div id="cart" class="bold red">
[…]
</div>

$("#cart").removeClass(‘bold’);
<div id="cart" class="bold red">
[…]
</div>
[…]
</div>

$('#an-element').on('click', function() {
alert("You have clicked");
});

ondemand.lewagon.org/jsmeetup
-30€
(Jusqu'à dimanche, 23h)

More Related Content