Infoforall

CREER AVEC JAVASCRIPT

Voici le menu général de la partie Javascript :

javascript

Liste récapitulative des notions vues dans les activités

Activité Description
Vous trouverez ici la liste des différentes notions abordées ou réabordées dans l'activité. Il ne s'agit pas de faire un bilan ou un résumé. Pour cela, allez voir la partie Fiche du site qui regroupe les résumés des différentes activités.
01 - Afficher à l'écran

Balise SCRIPT : < script > et < /script >

Insertion de balises directement dans le HTML.

Utilisation de la balise link par attacher un fichier CSS à un fichier HTML : <link rel = "stylesheet" href = "monFichier.css" />


Console Web pour observer et debugger le code


La méthode alert ouvre un affichage pop-up : window.alert("Bonjour le monde !");

La méthode log affiche dans la console web : console.log("Mon message s'affiche sur la console");

La méthode getElementById récupére la référence d'une balise possédant un id : document.getElementById("premier_paragraphe")

L'attribut innerHTML permet d'avoir accès au contenu d'une balise :

Récupérer le contenu : lecture = document.getElementById("premier_paragraphe").innerHTML

Modifier le contenu : document.getElementById("premier_paragraphe").innerHTML = "Nouveau contenu"

La méthode querySelector récupère la référence d'une balise en fournissant un string correspondant à un ciblage CSS. Ne renvoie qu'une référence.


Les STRING :

Eléments délimitateurs : guillemets

\" \t \n

Concaténation de string


Opérateurs +-*/ et % et **

Commentaire sur une ligne avec //

Commentaire sur plusieurs lignes avec /* et */


Déroulement séquentiel du programme


Les INTEGERS et les FLOATS

Variable, premier contat : simple boîte de stockage ?

Affectation d'une variable avec le signe =


Boucle FOR numérique (introduction rapide)

02 - Lire entrée clavier

La méthode prompt ouvre un affichage pop-up : var sNom = prompt("Quel est votre nom ?");

Attention : cette méthode prompt renvoie toujours un string.

Pour transformer un type en un autre :

x = parseInt(x) transforme en Integer.

x = parseFloat(x) transforme en Float.

x = x.toString() transforme en String.

Les différents types de variables : String, Number, Boolean

Affectation multiple


Balise INPUT qu'on place normalement dans une balise FORM : < input >

Les types : text, password, range, menu, button ...

L'attribut value permet d'accéder à la valeur ou au contenu du INPUT.

var solutionDeux = document.getElementById("nom").value;

Première rencontre avec les fonctions via les INPUT de type button.


Attributs onchange et onclick.


Attribut contentEditable permettant de modifier le innerHTML d'une balise.


IF, ELSE IF, ELSE (introduction rapide)

Booléen True et False

Test d'égalité avec ==


Méthode random de l'objet global Math. Exemple : création d'une valeur aléatoire valant 1, 2 ou 3.

bonneReponse = 1 + Math.floor(Math.random()*Math.floor(3));


break et continue en FAQ

03 - Test logique & Boucle for

IF - ELSE - IF ELSE

Tests logiques AND, OR, NOT


Type NaN: Not a Number


FOR numérique


STRING : itérable, séquentiel, non mutable

Eléments délimitateurs : guillemets

Lecture d'un caractère d'un string à l'aide des crochets

Lecture d'un caractère d'un string à l'aide de la méthode charAt

Propriété length : renvoie le nombre d'éléments dans une struture itérable (nbr caractères pour un string)


Méthode fromCharCode de l'objet global String : renvoie le caractère associé à une valeur ASCII puis UNICODE.


Méthode floor de l'objet global Math qui renvoie la partie entière du nombre.


Présentation de fonctions pour créer et détruire des carrés à l'écran

OPERATEUR % qui calcule le modulo ou reste de la division entière


break et continue en FAQ

04 - WHILE et FOR nominatif

WHILE

DO WHILE


Type NaN: Not a Number

Fonctions natives : parseInt(x), parseFloat(x), isNaN(x)


FOR in et FOR of nominatifs sur les strings ou les Arrays (tableaux)

FOR numérique + length pour lire les éléments des strings et des listes


STRING : itérable, séquentiel et non mutable

Eléments délimitateurs : guillemets

Concaténation pour créer un string avec une boucle

Méthodes des strings : indexOf, split, replace

Test d'appartenance avec if ("AEYUIOaeyuio".indexOf(element) >= 0) {

Expression régulière


ARRAY (tableau) : itérable, séquentiel et mutable

Eléments délimitateurs : crochets

Lecture d'un élément à l'aide des crochets

Propriété : length

Méthode : push


REFERENCES HTML : variable stockant l'adresse d'une balise

Lecture des attributs avec le . : maBalise.style.backgroundColor = 'blue';

Modification des attributs avec le . et le = : var laCouleur = maBalise.style.backgroundColor;


05 - Gestion des STRINGs

STRING : itérable, séquentiel et non mutable

Eléments délimitateurs : guillemets

Lecture d'un string à l'aide d'une boucle FOR nominative : for (of) et for (in)

Lecture d'un string à l'aide d'une boucle FOR numérique

Etude de la "modification" des strings : ils sont non mutables

Méthode de l'objet String : String.fromCharCode(65) que renvoie le caractère correspondant au code (A ici).

Test d'appartenance avec string1.indexOf(string2) > -1

Méthodes des strings : toLowerCase, toUpperCase, split, replace, charCodeAt, indexOf.

Concaténation


Fonction native isNaN : renvoie true si l'argument n'est pas un nombre.

Encodage ASCII sur 7 bits : 128 possibilités de 0 à 127

Encodage UNICODE correspond à celui de ASCII (de 0 à 127)

06- Les images

Notion de pixel

Intensité codée en 1 octet (8 bits) (0-255)

Couleur codée en 3 couches RGB (3 octets)

Couleur codée en 4 coucehs RGBA (4 octets)

Taille théorique d'un fichier

BMP - GIF - JPEG - PNG

Canvas

07- Les fonctions

Procédures

Déclaration des fonctions

Arguments : données transmises aux fonctions

Paramètres : variables de réception des arguments transmis aux fonctions

Retour d'informations avec return

Différence entre fonction et méthode


Fonction native setTimeout qui permet de lancer une fonction avec une certain tempo


Exemple rapide de gestion svg

Exemple rapide de gestion canvas

08- Gérer Interface

Objet window :

Méthode addEventListener : gestionnaire d'événement.

window.addEventListener("load",demarrage); : attend le chargement total de la page avant de lancer demarrage

Autres événements utilisables : "load", "click", "change"...


Modification et lecture des attributs des balises HTML

  • Lire innerHTML : laBalise.innerHTML;
  • Modifier innerHTML : laBalise.innerHTML = "ABC";
  • Lire value des inputs : laBalise.value;
  • Modifier value des inputs : laBalise.value = "ABC";
  • Lire background-color : laBalise.style.backgroundColor;
  • Modifier background-color : laBalise.style.backgroundColor = "#7799FF";
  • Lire class : laBalise.className;
  • Modifier class : laBalise.className = "nouvelle_classe";
  • Lire position : laBalise.style.position;
  • Modifier position : laBalise.style.position = "absolute";
  • Lire left : laBalise.style.left;
  • Modifier left : laBalise.style.left = "200px";
  • Lire position : laBalise.style.position;
  • Modifier position : laBalise.style.position = "absolute";

Remarque la différence subtile entre la balise style et le CSS


Sélection des balises : plusieurs méthodes renvoyant la référence de la première balise correspondante :

  • Méthode par id (une réponse) : document.getElementById("identifiant_voulu")
  • Méthode par balise/tag (une réponse) : document.querySelector("h3")
  • Méthode par id (une réponse) : document.querySelector("#identifiant_voulu")
  • Méthode par class (une réponse) : document.querySelector(".identifiant_voulu")

Sélection des balises : plusieurs méthodes renvoyant une collection HTML de références :

  • Méthode par balise/tag (all) : document.getElementsByTagName("div")
  • Méthode par class (all) : document.getElementsByClassName("laClasse")
  • Méthode par balise/tag (all) : document.querySelectorAll("h3")
  • Méthode par class (all) : document.querySelectorAll(".identifiant_voulu")

Lecture des éléments d'une collection HTML : avec un for numérique ou nominatif.

Procédures

Déclaration des fonctions

Arguments : données transmises aux fonctions

Paramètres : variables de réception des arguments transmis aux fonctions

Retour d'informations avec return

Différence entre fonction et méthode


Fonction native setTimeout qui permet de lancer une fonction avec une certain tempo


Exemple rapide de gestion svg

Exemple rapide de gestion canvas