Le javascript est un language de scripting qui est interprêter par le navigateur web pour rendre les pages dynamique, il permet de contacter des api, effectuer des actions, etc.
Il est aussi bien utiliser directement dans une page html ou dans un fichier à part comme côté serveur via nodejs (que nous aborderons dans un autre cours).
Afin d'utiliser les scripts js, il nous faut utilisé le balise <script></script>.
Via cette balise, on peut écrire du javascript directement dedans.
<script>
let maVariable = "Dragal le sachant"
if (maVariable === "Dragal le sachant") {
console.log("oui maître")
}
</script>
Ou alors, l'utiliser pour lié un fichier contenant le script de la même façon que du css.
<script src="./script.js"></script>
Faire un mix des deux est également possible mais c'est une utilisation très peu courante.
Petit point organisation, parce que c'est important d'en avoir une en développement pour si retrouver facilement.
Le mieux est de faire une arborescence comme ceci :
Mon projet
├── css
│ ├── index.css
│ ├── login.css
│ └── news.css
├── index.html
├── pages
│ ├── login.html
│ └── news.html
└── scripts
├── main.js
├── login.js
└── news.js
Il existe plusieurs type de variable, les variables standard représenter par var ou let, la première étant utilisé pour créer des variables global au fichier ou locales à une fonction alors que l'autre est utilisé pour les variables locales à un bloc de code, et les variables dite constante représenter par const qui sont des variables dont on ne peut pas changer la valeur.
const params = {
baseUri = "https://api.example.com/api/v1",
token = "4f3da883-9aee-4bb4-8d07-a245d97ac838"
}
var result = ""
fetch(`${params.baseUri}&token=${params.token}`)
.then((response) => {
let res = response.data
if (res !== "undefined") {
result = res
console.log("Arrêter moi je sais pas ce que j'écris")
}
})
Pas d'inquiétude si le code ci-dessus est incompréhensible, nous verrons ces notions plus tard.
La valeur des variables peut avoir plusieurs type :
Il existe aussi des sous types pour les objets, les objets sont basiquement des tableaux (la constante params dans le code ci-dessus en est un) :
const strings = ["papa", "maman"])const strings = [1, 2, 3])Nous verrons plus tard comment les utiliser par la suite.
Une base essentiel de tout language est le conditionnel.
Une condition est toujours l'équivalent d'un booléen et est souvent repésenter par une égalité ou, plus globalement, une "vérité".
"a" == "a"
"a" !== "b"
1 > 0
Il existe plusieurs signe utilisable pour vérifié une vérité :
== : Vérifie l'égalité de valeur sans s'attarder sur le type
1 == "1" true == "true"=== : Vérifie l'égalité de valeur et de type
1 === 1, "a" === "a"< ou > : Permet de vérifié si la condition est strictement inférieur à ou strictement supérieur à
1 < 2, 10 > 5<= ou >= : Permet de vérifié si la condition est inférieur ou égale à ou si elle est supérieur ou égale à
10 <= 11, 20 >= 20Si vous connaissant ce qu'est une porte logique, vous serez dans votre élément.
Il est possible qu'une condition compte plusieurs vérité :
&& : Pour qu'elle soit vrai, les deux conditions doivent être toute les deux vérifié
true === true && false === false|| : Pour qu'elle soit vrai, l'une des deux conditions doivent être vérifié
true === false || false == 'false'! : Il permet d'inverser une vérité
!(true == false) : La condition n'est pas vérifié mais renvoie vrai car elle est inverséLe conditionnel peut s'écrire de plusieurs façon via l'instruction if :
if (condition)
console.log('test')
if (condition) {
console.log('test')
}
Notez que la première façon ne fonctionne que si le bloc de code ne comporte qu'une seule instruction.
Si nous voulons tester une variable en fonction de sa valeur nous pouvons utiliser else if :
if (condition === "1")
console.log('test 1')
else if (condition === "2")
console.log('test 2')
if (condition === "1") {
console.log('test 1')
} else if (condition === "2") {
console.log('test 2')
}
Là aussi, les deux façons fonctionne.
Nous avons également la possibilité d'avoir un échapement via l'instruction else
if (condition === "1")
console.log('test 1')
else if (condition === "2")
console.log('test 2')
else
console.log('test 3')
if (condition === "1") {
console.log('test 1')
} else if (condition === "2") {
console.log('test 2')
} else {
console.log('test 3')
}
Enfin, et là je pense que je vais vous perdre, il existe une méthode pour les tests avec beaucoup de possibilité qui est plus optimisé que le if, il s'agit du switch
var condition = "yolo"
switch (condition) {
case 'yolo':
console.log("test 1")
break;
case 'hey':
console.log("test 2")
break;
case 'bonjour':
console.log("test 3")
break;
case 'yallah':
console.log("test 4")
break;
default:
console.log("test par defaut")
}
Il permet, pour chaque cas, d'avoir un bloc de code différent tout en ayant un cas par défaut si aucune valeur ne correspond à la variable d'entrée.
Attention, le
break;permet d'arrêter leswitchà la fin du bloc de code pour éviter d'activer le défaut.
Pour l'utilisation du if, il est recommander dans la plupart des cas de ne pas utilisé le else if et de le reserver pour les cas où il est indispensable. Dans les autres cas, nous pouvons procéder comme ceci :
if (condition == 1) {
return console.log("Test 1")
}
if (condition == 2) {
return console.log("Test 2")
}
return console.log("Test par défaut")