Les notions essentielles du JavaScript

Nous avons déjà passé en revue les notions essentielles du HTML5 et du CSS3. Maintenant, voyons ensemble les bases du JavaScript.

On peut suivre des cours en ligne gratuitement pour se familiariser notamment sur :

Apprendre à coder : https://apprendre-a-coder.com (pas commandité)

Code Academy : https://www.codecademy.com

freeCodeCamp : https://www.freecodecamp.org

Mozilla : https://developer.mozilla.org/fr/docs/Web/JAVASCRIPT

W3 Schools : https://www.w3schools.com/js/default.asp

Console

Dans Google Chrome, on doit cliquer droit à l'écran, puis aller à « Inspecter les éléments -Inspect » et aller à la console.

On retrouve nos fichiers :

index.html

script.js

On peut écrire notre premier script :

<script> console.log(“Hello”);
</script>

Syntaxe, variables et chaînes de caractères (strings)

var name = “Stephanie”; 
console.log(name); va afficher le nom

Nombres

var x = 10;
console.log(x);

Opérateurs + - * /

var x = 10;
var y = 4;
var result = x + y;
console.log(result);

Commentaires

alert("message"); // Commentaire

ou

/* Commentaire sur plusieurs lignes */

alert("message"); // Cette ligne est exécutée

Booléens et comparaisons

Vrai ou faux

var myBoolean = true;
console.log(myBoolean);

Opérateurs de comparaison

var = 7;
var myBoolean = (x===7);
console.log(myBoolean);

Le résultat est le booléen.

Plusieurs questions dans une :

var x =  4;
var y = 11;
var myBoolean = (x>3 && y<15);
console.log(myBoolean);

&& - deux parties vraies.

Conditions

if (condition) {
 // Exécute ce block de code si la condition est vraie;
}

if (condition1) {
 // Exécute ce block de code si la condition est vraie;
} else if (condition2) {
 // Exécute ce block de code si a condition 1 n’est pas vraie, mais la condition 2 l’est;
} else {
 // Exécute ce code si les deux conditions ne sont pas vraies; 
}

Il existe aussi switch pour sélectionner un des nombreux blocs de code à exécuter. C'est la solution idéale lorsque l'on a plusieurs "if/else". Switch évalue une expression. La valeur de l'expression est ensuite comparée avec les valeurs de chaque cas dans la structure.

switch(expression) {
  case x:
    // Block de code;
    break;
  case y:
    // Block de code;
    break;
  default:
    // Block de code;
}

Boucles (loops)

Exécuter le code plusieurs fois :

while

while (condition) {
 // Block de code à être exécuté; 
}

do-while passe en boucle un bloc de code une fois, puis répète la boucle si la condition spécifiée est toujours vraie :

do {
 // Block de code à être exécuté;
}
while (condition);

Fonctions (functions)

Une fonction est à un bloc de code nommé et réutilisable avec pour objectif l'exécution d'une tâche précise.

function name(paramètres) {
 // Code à être exécuté;
}

Scope (la portée) détermine la visibilité des variables. Elle est locale ou globale.

Tableaux (arrays)

Un tableau est une variable spéciale, qui peut contenir plus d'une valeur à la fois.

var array_name = [item1,item2, ...]; 

On peut aussi consulter ces aide-mémoires :

Ajax : https://www.w3schools.com/xml/ajax_intro.asp

Boostsrap : https://getbootstrap.com/docs/3.4/javascript

AngularJS : https://www.w3schools.com/angular

Node.JS : https://www.w3schools.com/nodejs

Express.JS : https://youtu.be/G8uL0lFFoN0

React.JS : https://reactjs.org/tutorial/tutorial.html

Vanilla.JS : https://www.javatpoint.com/what-is-vanilla-javascript

jQuery : https://learnxinyminutes.com/docs/jquery

Pour terminer, il y a aussi TensorFlow.js qui permet d'utiliser JavaScript dans le navigateur. On peut trouver des tutoriels sur leur site officiel. Il est aussi possible de consulter le site suivant pour avoir un résumé plus exhaustif sur JavaScript.

Bonne étude !

Stéphanie Tessier