Javascript Flashcards
(92 cards)
1
Q
Quelles balises encadrent du code Javascript ?
A
< script> </script>
2
Q
Pourquoi mettre le javascript à la fin du < body> ?
A
Parce que sinon ça ralentit l’affichage
3
Q
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 ?
A
< script src="myScript.js" async></script>
4
Q
Ecrire dans l’output du HTML
A
document.write()
5
Q
Ecrire dans une pop-up
A
window.alert()
alert()
6
Q
Ecrire dans la console du navigateur (pour débugger)
A
console.log()
7
Q
Accéder à un élément HTML
A
document.getElementById('id')
8
Q
Accéder à tous les éléments correspondant à une (ou plusieurs) classe(s)
A
document.getElementsByClassName('color')
document.getElementsByClassName('color example')
9
Q
Qu’est-il nécessaire de mettre après chaque statement ?
A
;
a = 5; b = 6; c = a + b;
a = 5;
10
Q
Créer un bouton qui change une phrase
A
<button type="button"
onclick= "document.getElementById("demo").innerHTML = 'Bonjour'">
Clique ici </button>
< p id="demo">Salut</p>
11
Q
Affiche la date
A
Date()
12
Q
Crée un bouton qui change la taille d’un élément txt
A
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'"> Click Me! </button>
13
Q
Crée un bouton qui cache un élément
A
<button type="button" onclick="document.getElementById('demo').style.display='none' " > Clique ici !</button>
14
Q
Crée un bouton qui révèle un élément
A
<button type="button" onclick="document.getElementById('demo').style.display='block' "> Clique ici !</button>
15
Q
Imprime le contenu de la fenêtre
(seule manière d’accéder à un output device)
A
window.print() <button onclick="window.print()">Print this page</button>
16
Q
A quoi sert {…} ?
A
A regrouper des lignes de code qui doivent être exécutées ensemble (dans une fonction par exemple)
17
Q
déclare une variable (pour les vieux navigateurs, avant 2015)
A
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;
18
Q
déclare un bloc de variable
A
let
let carName ;
carName = “Volvo”
19
Q
propriétés de const
A
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
20
Q
déclare une fonction
A
function maFonction() {
insère ici le code à exécuter
};
21
Q
try
A
gère les erreurs dans un bloc de code
22
Q
Taper un commentaire
A
// comment
/* comment */
23
Q
Règle pour nommer une variable : doit commencer par…
A
a letter (A-Z or a-z)
a dollar sign ($)
an underscore (_)
24
Q
Dans l’idéal, comment déclarer les variables ?
A
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”
25
$
souvent le nom de la fonction principale d'un script
26
_
souvent le nom d'une variable "cachée"
27
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)
28
opérateur : type égal + valeur égale
===
100 == "100" --> true
100 === "100" --> false
29
not equal value or not equal type
!==
30
opérateur ternaire
?
31
logical and :
les deux valeurs doivent être vraies
&&
a<5 && b>10
32
logical or :
l'une des deux valeurs doit être vraie
||
a<5 || b>10
33
opérateur : not
!
!(a<5)
34
retourne le type d'une variable
typeof
typeof "John" // Returns "string"
35
Returns true if an object is an instance of an object type
instanceof
36
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"
37
Quelle syntaxe pour déclarer une fonction ?
```
function name(parameter1, parameter2) {
// code to be executed
}
```
38
accéder au HTML d'un élément pour le modifier
element.innerHTML
39
element.style
accéder au style d'un élément
40
ajouter et modifier l'attribut d'un élément
element.setAttribute(attribute, value)
41
supprimer un attribut d'un élément
element.removeAttribute(attribute)
42
accède au premier élément 'p'
accède au premier élément où class='example'
```
document.querySelector("p");
document.querySelector(".example");
```
43
architecture du if statement
```
if (condition == true) {
// execute code
} else if {
//execute code
} else {
//execute code
}
```
44
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");
}
```
45
syntaxe de la for loop
(compter jusqu'à 100)
```
for (var i=1; i<101; i++) {
console.log(i)
}
```
46
syntaxe de la while loop
(compter jusqu'à 100)
```
var i=1;
while (i<101) {
console.log(i);
i += 1;
}
```
47
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)
}
}
```
48
itérer à travers une liste avec une for loop
```
for (var i=0 ; i < myArray.length ; i++) {
// code à exécuter }
```
49
Ajouter un élément à une liste
Comme dans python :
```
viennoiseries=[];
viennoiseries.push('croissant'); //['croissant']
```
50
Enlever le dernier élément d'une liste
Comme dans python
```
viennoiseries.pop()
```
51
Math.random()
génère un nombre aléatoire dans l'intervalle [0 ; 1)
52
Arrondit un nombre à l'entier du dessus
Math.ceil()
53
Arrondit un nombre à l'entier du dessous
Math.floor()
54
Arrondit un nombre
Math.round()
55
Tronque la décimale d'un nombre, pour ne laisser qu'un nombre entier
Math.trunc()
56
Retourne le premier caractère d'une chaîne
```
"allo".charAt(0)
"allo"[0]
```
57
Concaténer plusieurs éléments
```
"Wo".concat("rl").concat("d"); // 'World'
["abc"].concat(["def"]); // ['abc', 'def']
["abc"] + ["def"]; // ["abcdef"]
```
58
Retourne l'index de la première occurence du caractère demandé dans une chaîne
```
"ho-ho-ho".indexOf('h'); // 0
```
59
Changer une chaîne entre majuscule et minuscule
```
'hello'.toUpperCase(); // "HELLO, "
'HELLO'.toLowerCase(); // "hello, "
```
60
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
}
```
61
Qu'est-ce que c'est "ReferenceError"
Quand on utilise une variable qui n'a pas été déclarée
62
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
63
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
64
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;
}
}
```
65
Créer une instance de la classe 'Animal' déjà créée
```
var myDog = Object.create(Animal)
```
ou
```
var myDog = new Animal()
```
66
Créer une sous-classe 'oiseau' de la classe 'animal'
```
class Oiseau extends Animal {
/* ...class code here... */ }
```
67
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");
```
68
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`)
```
69
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;
}
}
```
70
format du gabarit automatique pour se référer au nom de l'objet créé par constructor
${this.constructor.name}
71
itérer à travers un objet
```
Object.keys()
Object.values()
Object.entries()
const car2 = {
speed: 200,
color: "red"}
console.log(Object.keys(car2)); // ['speed','color']
```
72
for of loop
itère à travers un objet et son prototype
syntaxe :
```
for (el of array) {
//insérer code
}
```
73
méthode forEach
sur un array, effectue une action sur chaque élément
```
array.forEach(function(paramètres) {
code à exécuter;
});
```
74
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;
}
```
75
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]
```
76
data structure Map
```
let fruits = new Map();
fruits.set(1, "apple");
fruits.set(2, "pear");
fruits.get(1); // donne "apple"
```
77
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
```
78
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']
```
79
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"]
```
80
Quelle méthode pour accéder au dernier caractère de la chaîne "newFood" ?
newFood[newFood.length - 1]
81
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
82
Récupérer la valeur du bouton coché parmi les 3 qui ont name = "temp"
```
document.querySelector('input[name="temp"]:checked');
```
83
Mettre des bordures sur un tableau
div head, div style :
```
table, th, td {
border : 1px solid blueviolet;
border-collapse : collapse;
}
```
84
Mettre des bordures arrondies sur un tableau
div head, div style :
```
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
```
84
Mettre une couleur de fond sur un tableau
```
```
85
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;
}
86
Sélectionne les colonnes paires d'un tableau
div head, div style :
```
tr:nth-child(even) {
background-color: #D6EEEE;
}
```
87
Change la couleur de la ligne d'une table où se trouve le curseur
```
```
88
Sélectionne les colonnes impaires d'un tableau
div head, div style :
```
tr:nth-child(odd) {
changer ici le style;
}
```
89
90
Cloner un élément HTML
```
const original = document.getElementById(demo);
let clone = original.cloneNode(deep);
clone.id = data + "-clone"; //changer l'ID sinon bug
```
deep est un booléen (true ou false) :
* true : il clone l’élément et tous ses enfants (le contenu HTML intérieur, les balises imbriquées, etc.).
* false : il clone seulement le nœud lui-même, pas ses enfants.
91
# Dragndrop
Quelle est la différence entre ev.target et ev.currentTarget ?
ev.target :
* retourne l'élément le plus profond touché par une action,
* c'est pour savoir où exactement l'action se produit
ev.currentTarget :
* retourne l'élément où l'event handler est attaché,
* permet d'agir sur le conteneur ou sur un scope bien défini
