Cours 4 Développement Web LST Génie Informatique 2024-2025 PDF

Cours 4 Développement Web Introduction à JavaScript LST Génie Informatique 2024-2025 JavaScript dans une page Web...

Cours 4 Développement Web Introduction à JavaScript LST Génie Informatique 2024-2025 JavaScript dans une page Web Bases de JavaScript: Instructions, variables, M’hamed AIT KBIR Fonctions, événements …. Les objets JavaScript Département Génie Informatique Exemples FST de Tanger M. AIT KBIR LST Génie Informatique 2024-2025 2 JavaScript: Séparation fonctionnelle Qualités de JavaScript Langage de script permet de créer des pages qui Assister l’utilisateur pour contrôler la saisie répondent aux actions des utilisateurs. Développé par Netscape en 1995 ( aucune relation avec le langage Accéder aux éléments d’une page Web Java): Ouvrir et redimensionner une fenêtre du navigateur Intégré à la majorité des navigateurs. Associer des actions aux événements déclenchés par Outil pour la programmation côté client, le code est l’utilisateur. exécuté sur la machine locale. Pour des raisons de sécurité, JavaScript ne permet N’a pas besoin d’une connexion réseau, une fois le script pas l’accès au réseau et au système de fichier local. chargé. La gestion de l’interface Home-Machine et du Décharge le serveur, souvent occupé, de certains graphisme est limitée. traitements. M. AIT KBIR LST Génie Informatique 2024-2025 3 M. AIT KBIR LST Génie Informatique 2024-2025 4 1  JavaScript: Séparation fonctionnelle Où insérer le code JavaScript ? Niveau haut … : pour les scripts, internes ou externes Exemple: Afficher une boite de dialogue lors de chargement de la page (Script interne) Expérience du function message(){ développeur alert("Message: chargement de la page"); } Niveau bas M. AIT KBIR LST Génie Informatique 2024-2025 5 M. AIT KBIR LST Génie Informatique 2024-2025 6 Où insérer le code JavaScript ? JavaScript: Les variables Exemple: Afficher une boite de dialogue lors de chargement de la page et appeler un Une variable possède: script depuis le corps du document. – Nom: sensible à la casse, doit commencer par une lettre ou par le caractère '_'. – Type : Pas de typage, détection automatique par l’interpréteur: entier, réel, chaîne de caractères, booléen. – Valeur ou "null" // Écrire dans le flux de document HTML – Déclaration: var nomVariable document.write(" Titre 2 "); document.write(" Ce paragraphe est ajouté par JavaScript "); – Portée: Global en dehors des fonctions – Eviter comme noms des variables les mots clés: 'Array‘, 'if', 'Document’, 'Math', etc. Le fichier monscript.js : function message(){ window.alert("Message: chargement de la page"); } M. AIT KBIR LST Génie Informatique 2024-2025 7 M. AIT KBIR LST Génie Informatique 2024-2025 8 2  JavaScript: Les instructions JavaScript: Opérateurs Opérateurs arithmétiques Opérateurs logiques Les commentaires: Opérateur Description Opérateur Description // Tout ce qui vient après sur une ligne est un commentaire + Addition && and / Division ! not Les points-virgules sont utiles quant on utilise plus d’une % Modulo Opérateurs relationnels instruction sur une seule ligne. ++ Incrémentation Opérateur Description -- Décrémentation Groupement d’instructions : { … instructions … } Opérateurs d’affectation == Est égal Exemple: Opérateur Exemple === Est égal(vérifie aussi le type) = x=y != Différent += x+=y > Supérieur à var a = 10; var b = 11; -= x-=y < Inférieur à var c ; c = a + b *= x*=y >= Supérieur ou égal à /= x/=y alert("a+b  " + c) %= x%=y : "+elements[i].nodeName +","+ le script, est affiché. window fait référence à la fenêtre elle-même. window est elements[i].firstChild.nodeValue); l’objet par défaut de JavaScript, on peut donc utiliser ses propriétés et ses méthodes sans mentionner le nom de l’objet. //Ajouter un titre de niveau 1 au document courant var nH1 = document.createElement("H1"); Propriétés: var nTexte = document.createTextNode("Nouveau... "); frames[ ] : Tableau de frames nH1.appendChild(nTexte); length: Le nombre de frames dans la fenêtre document.body.appendChild(nH1); self : Fenêtre courante opener : Fenêtre ouvrante (lorsqu’elle existe) //Créer une nouvelle fenêtre parent : parent de la fenêtre courante var w = window.open(); top : Fenêtre qui a crée toutes les fenêtres w.document.open(); // voir la syntaxe de la méthode open(…) w.document.write("Fenêtre crée par JavaScript"); status : message dans la barre de statut w.document.close(); name : nom de la fenêtre innerHeight/innerWidth: Hauteur/Largeur du contenu de la fenêtre //Afficher les paramètres du navigateur sur la page courante outerHeight/ outerWidth: Hauteur/largeur externe de la fenêtre for(x in navigator) screen: retourne l’objet screen de la fenêtre document.write(x+" = "+navigator[x]+""); … M. AIT KBIR LST Génie Informatique 2024-2025 25 M. AIT KBIR LST Génie Informatique 2024-2025 26 DOM : Window DOM : Document Méthodes: alert(string) : Ouvre une boîte de dialogue L’objet Document représente le document affiché. document fait référence confirm : Ouvre une boîte de dialogue ( avec boutons OK et Cancel) au document lui-même. blur() : Enlève le focus de la fenêtre Propriétés: focus() : Donne le focus à la fenêtre title : Titre du document prompt(string) : Affiche une fenêtre de saisie location : URL du document body: Retourne le corps de document resizeTo(): Modifier la taille de la fenêtre head: Retourne l’entête du document moveBy(), moveTo(): modifier la position de la fenêtre domain: Nom de domaine du serveur qui a chargé le document scroll(int x, int y) : Positionnement aux coordonnées (x,y) cookie: Retourne les paires (nom, valeur) des cookies du document open(URL, string name, string options) : Ouvre une nouvelle Images: Retourne les images dans le document (éléments ) fenêtre contenant le document identifié par l’URL. Scripts: Retourne les scripts dans le document (éléments ) links: Retourne les liens dans le document (éléments ) close() : Ferme la fenêtre lastModified : Date de dernière modification print(): Imprime le contenu de la fenêtre courante referrer : URL de la page d’où arrive l’utilisateur … … M. AIT KBIR LST Génie Informatique 2024-2025 27 M. AIT KBIR LST Génie Informatique 2024-2025 28 7  DOM : Document La sortie standard de JavaScript est la fenêtre qui affiche le document. La DOM : Element méthode write de l’objet Document écrit donc ses paramètres dans la fenêtre du navigateur. Le modèle DOM, un élément HTML est représenté par l’objet Element. Méthodes: Propriétés: getElementById(): Retourne l’élément dont l’attribut ID avec une valeur childNodes: Retourne les nœuds fils d’un élément. donnée. className/id: Manipule l’attribut class/id de l’élément getElementsByName(): Retourne l’élément dont l’attribut NAME avec une dir: Direction du texte. valeur donnée. firstChild: Retourne le premier fils d’un élément querySelector(): retourne le premier élément dans le document qui innerHTML : Retourne le contenu d’un élément correspond au sélecteur css. lastChild: Retourne le dernier fils d’un élément Open(), ouvre un nouveau document nodeName: Retourne la valeur de l’attribut name write(string) : écrit une chaîne dans le document nodeValue: valeur d’un élément writeln(string) : idem + caractère de fin de ligne tagName: Retourne le nom de la balise de l’élément clear() : efface le document (obsolète, pour effacer un document, il suffit d’ouvrir un nouveau.) offsetHeight/ offsetWidth: hauteur/largeur de l’élément close() : ferme le document style: Valeur de l’attribut style … … M. AIT KBIR LST Génie Informatique 2024-2025 29 M. AIT KBIR LST Génie Informatique 2024-2025 30 DOM : Element DOM : Form Méthodes: Propriétés: blur(): Enlève le focus à un élément. name : Nom (unique) du formulaire focus(): Donne le focus à un élément method : Méthode de soumission (0=GET, 1=POST) getAttribute(): Retourne la valeur d’un attribut action : Action déclenchée par la validation du formulaire setAttribute(): Modifie la valeur d’un attribut target : Fenêtre de destination de la réponse (si elle existe) hasChildNodes(): Retourne true si l’élément à des nœuds fils elements[ ] : Tableau des éléments du formulaires hasAttribute(): Retourne true si on a fixé un attribut quelconque length : Nombre d’éléments du formulaire pour l’élément getElementsByClassName(): Retourne les éléments fils dont l’attribut class prend une valeur donnée. Méthodes: submit() : Soumet le formulaire getElementsByTagName(): Retourne les éléments fils dont l’attribut name prend une valeur donnée. reset() : Réinitialise le formulaire … M. AIT KBIR LST Génie Informatique 2024-2025 31 M. AIT KBIR LST Génie Informatique 2024-2025 32 8  DOM: Navigator & Screen DOM: Location & History Navigator: objet qui contient des informations sur le navigateur, history : objet qui donne accès à l'historique des sessions du navigateur, pages visitées dans l'onglet ou le cadre dans lequel la page actuelle est parmi ses propriétés : chargée. appCodeName :Nom de code interne du navigateur back() : document précédent appName : Nom réel du navigateur forward() : le suivant appVersion : Version du navigateur go(n) : recharge le document situé à n étapes du pas du document courant cookieEnabled: Détermine si les cookies sont permises location : objet qui donne accès aux informations sur l'emplacement userAgent : retourne un objet contenant des détails sur : actuel de la ressource. l’appCodeName, l’appVersion et le système href : chaine contenant l'url d’exploitation utilisé. hash : partie de l'url après # (lien interne) host : nom serveur et port Screen: objet qui contient des informations de l’écran de protocol : http, ftp... l’utilisateur, parmi ses propriétés : height/width (taille de l’écran) reload() : recharge le document courant ( équivalent à history.go(0) et pixelDepth(nombre de bits par pixel pour coder la couleur). replace(url) : remplace la ressource actuelle par celle de l'URL fournie. M. AIT KBIR LST Génie Informatique 2024-2025 33 M. AIT KBIR LST Génie Informatique 2024-2025 34 9