Javascript Flashcards

1
Q

Quelles balises encadrent du code Javascript ?

A
< script> </script>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Pourquoi mettre le javascript à la fin du < body> ?

A

Parce que sinon ça ralentit l’affichage

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Quelle est la syntaxe quand le javascript est dans un fichier externe ?

A
< script src="myScript.js"></script>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Ecrire dans l’output du HTML

A

document.write()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Ecrire dans une pop-up

A

window.alert()

alert()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Ecrire dans la console du navigateur (pour débugger)

A

console.log()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Accéder à un élément HTML

A
document.getElementById('id')
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Accéder à tous les éléments correspondant à une (ou plusieurs) classe(s)

A
document.getElementsByClassName('color')

document.getElementsByClassName('color example')
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Qu’est-il nécessaire de mettre après chaque statement ?

A

;

a = 5; b = 6; c = a + b;
a = 5;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Affiche la date

A

Date()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

A quoi sert {…} ?

A

A regrouper des lignes de code qui doivent être exécutées ensemble (dans une fonction par exemple)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

déclare un bloc de variable

A

let

let carName ;
carName = “Volvo”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

déclare une fonction

A

function maFonction() {
insère ici le code à exécuter
};

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

try

A

gère les erreurs dans un bloc de code

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Taper un commentaire

A

// comment
/* comment */

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Règle pour nommer une variable : doit commencer par…

A

a letter (A-Z or a-z)
a dollar sign ($)
an underscore (_)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

$

A

souvent le nom de la fonction principale d’un script

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

_

A

souvent le nom d’une variable “cachée”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

C’est quoi “block scope” ?
Ca concerne quel type de valeurs ?

A

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)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

opérateur : type égal + valeur égale

A

===

100 == “100” –> true
100 === “100” –> false

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

not equal value or not equal type

A

!==

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

opérateur ternaire

A

?

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

logical and :
les deux valeurs doivent être vraies

A

&&
a<5 && b>10

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

logical or :
l’une des deux valeurs doit être vraie

A

||
a<5 || b>10

33
Q

opérateur : not

A

!
!(a<5)

34
Q

retourne le type d’une variable

A

typeof

typeof “John” // Returns “string”

35
Q

Returns true if an object is an instance of an object type

A

instanceof

36
Q

C’est quoi “undefined”

A

car = undefined; // Value is undefined, type is undefined (pour vider la variable)

let car = “”; // The value is “”, the typeof is “string”

37
Q

Quelle syntaxe pour déclarer une fonction ?

A
function name(parameter1, parameter2) {
  // code to be executed
}
38
Q

accéder au HTML d’un élément pour le modifier

A

element.innerHTML

39
Q

element.style

A

modifier le style d’un élément

40
Q

ajouter et modifier l’attribut d’un élément

A

element.setAttribute(attribute, value)

41
Q

supprimer un attribut d’un élément

A

element.removeAttribute(attribute)

42
Q

accède au premier élément ‘p’

accède au premier élément où class=’example’

A
document.querySelector("p");

document.querySelector(".example");
43
Q

architecture du if statement

A
if (condition == true) {
    // execute code
} else if {
    //execute code
} else {
    //execute code
}
44
Q

S’il faut tester plein plein de trucs, on n’utilise plus if mais…

A

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
Q

syntaxe de la for loop
(compter jusqu’à 100)

A
for (var i=1; i<101; i++) {
    console.log(i)
}
46
Q

syntaxe de la while loop
(compter jusqu’à 100)

A
var i=1;
while (i<101) {
    console.log(i);
    i += 1;
}
47
Q

syntaxe d’une nested if loop
(compter 5 jours par semaine sur 2 semaines)

A
for (var i = 1; i<=2; i++) {
    for (var j=1; j<=5; j++) {
        console.log("Week ", i, " day ", j)
    }
}
48
Q

itérer à travers une liste avec une for loop

A
for (var i=0 ; i < myArray.length ; i++) {
    // code à exécuter }
49
Q

Ajouter un élément à une liste

A

Comme dans python :
~~~
viennoiseries=[];
viennoiseries.push(‘croissant’); //[‘croissant’]
~~~

50
Q

Enlever le dernier élément d’une liste

A

Comme dans python
~~~
viennoiseries.pop()
~~~

51
Q

Math.random()

A

génère un nombre aléatoire dans l’intervalle [0 ; 1)

52
Q

Arrondit un nombre à l’entier du dessus

A

Math.ceil()

53
Q

Arrondit un nombre à l’entier du dessous

A

Math.floor()

54
Q

Arrondit un nombre

A

Math.round()

55
Q

Tronque la décimale d’un nombre, pour ne laisser qu’un nombre entier

A

Math.trunc()

56
Q

Retourne le premier caractère d’une chaîne

A
"allo".charAt(0)
"allo"[0]
57
Q

Concaténer plusieurs éléments

A
"Wo".concat("rl").concat("d"); // 'World'
["abc"].concat(["def"]); // ['abc', 'def']
["abc"] + ["def"]; // ["abcdef"]
58
Q

Retourne l’index de la première occurence du caractère demandé dans une chaîne

A
"ho-ho-ho".indexOf('h'); // 0
59
Q

Changer une chaîne entre majuscule et minuscule

A
'hello'.toUpperCase(); // "HELLO, "
'HELLO'.toLowerCase(); // "hello, "
60
Q

faire exécuter du code malgré une erreur

A

try catch
~~~
try {
// code susceptible de générer une erreur
} catch(err) {
//code à exécuter si une erreur est détectée
}
~~~

61
Q

Qu’est-ce que c’est “ReferenceError”

A

Quand on utilise une variable qui n’a pas été déclarée

62
Q

Qu’est-ce que c’est une “SyntaxError”

A

Quand le code n’est pas valide

Ne peut pas être récupéré avec un try/catch bloc

63
Q

Qu’est-ce que c’est un “TypeError” ?

A

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
Q

Créer une classe ‘train’, et permettre de créer des objets avec ‘color’ et ‘lightsOn’ en paramètres

A
class Train {
    constructor(color, lightsOn) {
        this.color = color;
        this.lightsOn = lightsOn;
    }
}
65
Q

Créer une instance de la classe ‘Animal’ déjà créée

A
var myDog = Object.create(Animal)

ou
~~~
var myDog = new Animal()
~~~

66
Q

Créer une sous-classe ‘oiseau’ de la classe ‘animal’

A
class Oiseau extends Animal { 
/* ...class code here... */ }
67
Q

Faire que le paramètre entré pour la fonction devienne une propriété de l’objet créé

A
function Icecream(flavor) {
    this.flavor = flavor};
		
		let kiwiIcecream = new Icecream("kiwi");
68
Q

Formater le texte de sorte à utiliser la valeur d’une propriété donnée

A

${this.clé}
~~~
this.meltIt = function() {
console.log(The ${this.flavor} icecream has melted)
~~~

69
Q

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’

A

super(paramètres repris)

class HighSpeedTrain extends Train {
    constructor(passengers, highSpeedOn, color, lightsOn) {
        super(color, lightsOn);
        this.passengers = passengers;
        this.highSpeedOn = highSpeedOn;
    }
}
70
Q

format du gabarit automatique pour se référer au nom de l’objet créé par constructor

A

${this.constructor.name}

71
Q

itérer à travers un objet

A
Object.keys()
Object.values()
Object.entries()

const car2 = {
    speed: 200,
    color: "red"}
console.log(Object.keys(car2)); // ['speed','color']
72
Q

for of loop

A

itère à travers un objet et son prototype

syntaxe :
~~~
for (el of array) {
//insérer code
}
~~~

73
Q

méthode forEach

A

sur un array, effectue une action sur chaque élément
~~~
array.forEach(function(paramètres) {
code à exécuter;
});
~~~

74
Q

méthode filter

A

sur un array, sélectionne des données qui correspondent à un filtre
~~~
array.filter(fonction(paramètre) {
code à exécuter;
});
~~~

75
Q

méthode map

A

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
Q

data structure Map

A
let fruits = new Map();
fruits.set(1, "apple");
fruits.set(2, "pear");
fruits.get(1); // donne "apple"
77
Q

Ajouter des éléments dans un array, peut-être à la place d’autres éléments

A

array.splice(startIndex, deleteCount, item 1, item 2, etc)

78
Q

spray opérator

A

…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
Q

rest operator

A

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”]
~~~