Javascript Flashcards
Quelles balises encadrent du code Javascript ?
< script> </script>
Pourquoi mettre le javascript à la fin du < body> ?
Parce que sinon ça ralentit l’affichage
Quelle est la syntaxe si je veux que mon script soit dans un fichier externe, et que son chargement ne ralentisse pas le chargement de la page html ?
< script src="myScript.js" async></script>
Ecrire dans l’output du HTML
document.write()
Ecrire dans une pop-up
window.alert()
alert()
Ecrire dans la console du navigateur (pour débugger)
console.log()
Accéder à un élément HTML
document.getElementById('id')Accéder à tous les éléments correspondant à une (ou plusieurs) classe(s)
document.getElementsByClassName('color')
document.getElementsByClassName('color example')Qu’est-il nécessaire de mettre après chaque statement ?
;
a = 5; b = 6; c = a + b;
a = 5;
Créer un bouton qui change une phrase
<button type="button"
onclick= "document.getElementById("demo").innerHTML = 'Bonjour'">
Clique ici </button>
< p id="demo">Salut</p>Affiche la date
Date()
Crée un bouton qui change la taille d’un élément txt
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'"> Click Me! </button>Crée un bouton qui cache un élément
<button type="button" onclick="document.getElementById('demo').style.display='none' " > Clique ici !</button>Crée un bouton qui révèle un élément
<button type="button" onclick="document.getElementById('demo').style.display='block' "> Clique ici !</button>Imprime le contenu de la fenêtre
(seule manière d’accéder à un output device)
window.print() <button onclick="window.print()">Print this page</button>
A quoi sert {…} ?
A regrouper des lignes de code qui doivent être exécutées ensemble (dans une fonction par exemple)
déclare une variable (pour les vieux navigateurs, avant 2015)
var
var x, y;
x = 5 + 6;
y = x * 10;
on peut redéclarer les variables avec var sans qu’elles ne perdent leur valeur :
var carName = “Volvo”;
var carName;
déclare un bloc de variable
let
let carName ;
carName = “Volvo”
propriétés de const
block scope
il faut leur assigner une valeur quand elles sont déclarées : cont name = Lena
variable immuable = si un array est déclaré avec const, on peut réassigner des valeurs (avec des méthodes ou l’index) mais pas le réassigner entièrement
déclare une fonction
function maFonction() {
insère ici le code à exécuter
};
try
gère les erreurs dans un bloc de code
Taper un commentaire
// comment
/* comment */
Règle pour nommer une variable : doit commencer par…
a letter (A-Z or a-z)
a dollar sign ($)
an underscore (_)
Dans l’idéal, comment déclarer les variables ?
dans l’idéal, au début du script
c’est mieux de les déclarer avant de les assigner
on peut tout déclarer ensemble : let person = “John Doe”, carName = “Volvo”, price = 200;
au pire ça peut se faire en une ligne : let carName = “Volvo”
$
souvent le nom de la fonction principale d’un script
_
souvent le nom d’une variable “cachée”
C’est quoi “block scope” ?
Ca concerne quel type de valeurs ?
on ne peut accéder aux valeurs déclarées dans {} que dans ce bloc
ça concerne let et const, pas var
–> on peut redéclarer les let dans le bloc, et ça n’aura pas d’impact sur le code hors du bloc
(on ne peut jamais redéclarer ni réassigner un const)
opérateur : type égal + valeur égale
===
100 == “100” –> true
100 === “100” –> false
not equal value or not equal type
!==
opérateur ternaire
?
logical and :
les deux valeurs doivent être vraies
&&
a<5 && b>10
logical or :
l’une des deux valeurs doit être vraie
||
a<5 || b>10
opérateur : not
!
!(a<5)
retourne le type d’une variable
typeof
typeof “John” // Returns “string”
Returns true if an object is an instance of an object type
instanceof
C’est quoi “undefined”
car = undefined; // Value is undefined, type is undefined (pour vider la variable)
let car = “”; // The value is “”, the typeof is “string”
Quelle syntaxe pour déclarer une fonction ?
function name(parameter1, parameter2) {
// code to be executed
}accéder au HTML d’un élément pour le modifier
element.innerHTML
element.style
accéder au style d’un élément
ajouter et modifier l’attribut d’un élément
element.setAttribute(attribute, value)
supprimer un attribut d’un élément
element.removeAttribute(attribute)
accède au premier élément ‘p’
accède au premier élément où class=’example’
document.querySelector("p");
document.querySelector(".example");architecture du if statement
if (condition == true) {
// execute code
} else if {
//execute code
} else {
//execute code
}S’il faut tester plein plein de trucs, on n’utilise plus if mais…
switch
let pet = "cat";
switch(pet) {
case 'dog':
console.log("it's a dog !");
break;
case 'cat':
console.log("it's a cat!");
break;
default:
console.log("bah y en a pas");
}
syntaxe de la for loop
(compter jusqu’à 100)
for (var i=1; i<101; i++) {
console.log(i)
}syntaxe de la while loop
(compter jusqu’à 100)
var i=1;
while (i<101) {
console.log(i);
i += 1;
}syntaxe d’une nested if loop
(compter 5 jours par semaine sur 2 semaines)
for (var i = 1; i<=2; i++) {
for (var j=1; j<=5; j++) {
console.log("Week ", i, " day ", j)
}
}itérer à travers une liste avec une for loop
for (var i=0 ; i < myArray.length ; i++) {
// code à exécuter }Ajouter un élément à une liste
Comme dans python :
viennoiseries=[];
viennoiseries.push('croissant'); //['croissant']
Enlever le dernier élément d’une liste
Comme dans python
viennoiseries.pop()
Math.random()
génère un nombre aléatoire dans l’intervalle [0 ; 1)
Arrondit un nombre à l’entier du dessus
Math.ceil()
Arrondit un nombre à l’entier du dessous
Math.floor()
Arrondit un nombre
Math.round()
Tronque la décimale d’un nombre, pour ne laisser qu’un nombre entier
Math.trunc()
Retourne le premier caractère d’une chaîne
"allo".charAt(0) "allo"[0]
Concaténer plusieurs éléments
"Wo".concat("rl").concat("d"); // 'World'
["abc"].concat(["def"]); // ['abc', 'def']
["abc"] + ["def"]; // ["abcdef"]Retourne l’index de la première occurence du caractère demandé dans une chaîne
"ho-ho-ho".indexOf('h'); // 0Changer une chaîne entre majuscule et minuscule
'hello'.toUpperCase(); // "HELLO, " 'HELLO'.toLowerCase(); // "hello, "
faire exécuter du code malgré une erreur
try catch
try {
// code susceptible de générer une erreur
} catch(err) {
//code à exécuter si une erreur est détectée
}
Qu’est-ce que c’est “ReferenceError”
Quand on utilise une variable qui n’a pas été déclarée
Qu’est-ce que c’est une “SyntaxError”
Quand le code n’est pas valide
Ne peut pas être récupéré avec un try/catch bloc
Qu’est-ce que c’est un “TypeError” ?
Quand on utilise une méthode sur un type de donnée non valide
Par exemple : “hello”.pop() –> pop marche pas sur une chaîne
Créer une classe ‘train’, et permettre de créer des objets avec ‘color’ et ‘lightsOn’ en paramètres
class Train {
constructor(color, lightsOn) {
this.color = color;
this.lightsOn = lightsOn;
}
}Créer une instance de la classe ‘Animal’ déjà créée
var myDog = Object.create(Animal)
ou
~~~
var myDog = new Animal()
~~~
Créer une sous-classe ‘oiseau’ de la classe ‘animal’
class Oiseau extends Animal {
/* ...class code here... */ }Faire que le paramètre entré pour la fonction devienne une propriété de l’objet créé
function Icecream(flavor) {
this.flavor = flavor};
let kiwiIcecream = new Icecream("kiwi");Formater le texte de sorte à utiliser la valeur d’une propriété donnée
${this.clé}
this.meltIt = function() {
console.log(`The ${this.flavor} icecream has melted`)
Créer une sous-classe ‘HighSpeedTrain’ de la classe ‘Train’, qui reprenne les propriétés ‘color’ et ‘lightsOn’ de la super-classe mais qui prenne aussi les paramètres ‘passengers’ et ‘highSpeedOn’
super(paramètres repris)
class HighSpeedTrain extends Train {
constructor(passengers, highSpeedOn, color, lightsOn) {
super(color, lightsOn);
this.passengers = passengers;
this.highSpeedOn = highSpeedOn;
}
}
format du gabarit automatique pour se référer au nom de l’objet créé par constructor
${this.constructor.name}
itérer à travers un objet
Object.keys()
Object.values()
Object.entries()
const car2 = {
speed: 200,
color: "red"}
console.log(Object.keys(car2)); // ['speed','color']for of loop
itère à travers un objet et son prototype
syntaxe :
for (el of array) {
//insérer code
}
méthode forEach
sur un array, effectue une action sur chaque élément
array.forEach(function(paramètres) {
code à exécuter;
});
méthode filter
sur un array, sélectionne des données qui correspondent à un filtre
const ages = [32, 33, 16, 40];
document.getElementById("demo").innerHTML = ages.filter(checkAdult);
function checkAdult(age) {
return age >= 18;
}
méthode map
sur un array, crée un autre array en modifiant chaque valeur d’origine
[0,10,20,30,40,50].map( function(num) {
return num / 10
}) // 0, 1, 2, 3, 4, 5
const materials = ['Hydrogen', 'Helium', 'Lithium', 'Beryllium'];
console.log(materials.map((material) => material.length));
// Expected output: Array [8, 6, 7, 9]
data structure Map
let fruits = new Map(); fruits.set(1, "apple"); fruits.set(2, "pear"); fruits.get(1); // donne "apple"
Ajouter des éléments dans un array, peut-être à la place d’autres éléments
array.splice(startIndex, deleteCount, item 1, item 2, etc)
const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 0, "Lemon", "Kiwi"); // fruits = Banana,Orange,Lemon,Kiwi,Apple,Mango
spray opérator
…array ; …objet
permet de reprendre chaque élément de l’array/objet –> permet de concaténer
newArray = [...array1, ...array2];
newObject = {...objet1, ...objet2};
permet d’ajouter de nouveaux éléments à une liste
veggies = [...veggies, 'carrot', 'beetroot'];
permet de transformer un string en array
const greeting = "Hello"; const arrayOfChars = [...greeting]; console.log(arrayOfChars); // ['H', 'e', 'l', 'l', 'o']
rest operator
accumule les éléments restants dans une variable
function myFun(a, b, ...manyMoreArgs) {
console.log("a", a);
console.log("b", b);
console.log("manyMoreArgs", manyMoreArgs);
}
myFun("one", "two", "three", "four", "five", "six");
// Console Output:
// a, one
// b, two
// manyMoreArgs, ["three", "four", "five", "six"]
Quelle méthode pour accéder au dernier caractère de la chaîne “newFood” ?
newFood[newFood.length - 1]
Pour envoyer une réponse à un formulaire, quelle est la différence entre les méthodes GET et POST ?
GET :
- méthode par défaut
- réponses dans l’url –> pour accéder directement à la page (bookmark)
POST:
- pour les données sensibles ou longues
Récupérer la valeur du bouton coché parmi les 3 qui ont name = “temp”
document.querySelector('input[name="temp"]:checked');Mettre des bordures sur un tableau
div head, div style :
table, th, td {
border : 1px solid blueviolet;
border-collapse : collapse;
}
Mettre des bordures arrondies sur un tableau
div head, div style :
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
Mettre une couleur de fond sur un tableau
<head>
<style>
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
</style>
</head>Skip the border around the table
Ne pas inclure “table” dans le sélecteur de CSS, dans div head div style :
th, td {
border: 1px solid black;
border-radius: 10px;
}
Sélectionne les colonnes paires d’un tableau
div head, div style :
tr:nth-child(even) {
background-color: #D6EEEE;
}
Change la couleur de la ligne d’une table où se trouve le curseur
<head>
<style>
tr:hover {background-color: #D6EEEE;}
</style>
</head>Sélectionne les colonnes impaires d’un tableau
div head, div style :
tr:nth-child(odd) {
changer ici le style;
}
