CREER AVEC JAVASCRIPT
Voici le menu général de la partie 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 : Console Web pour observer et debugger le code La méthode alert ouvre un affichage pop-up : La méthode log affiche dans la console web : La méthode getElementById récupére la référence d'une balise possédant un id : L'attribut innerHTML permet d'avoir accès au contenu d'une balise : Récupérer le contenu : Modifier le 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 : Attention : cette méthode prompt renvoie toujours un string. Pour transformer un type en un autre :
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.
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.
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 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 . : Modification des attributs avec le . et le = : |
| 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 : Test d'appartenance avec 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.
Autres événements utilisables : "load", "click", "change"... Modification et lecture des attributs des balises HTML
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 :
Sélection des balises : plusieurs méthodes renvoyant une collection HTML de références :
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 |