CM11 JavaScript DOM

Télécharger le CM11 JavaScript DOM en pdf

Pages : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

Page 1 : Programmation WebJavaScript et DOMMussab ZneikaCY-TechDéveloppement Web – INFO4

Page 2 : 2Date méthodesgetDaterenvoie le jour du mois1-12getDayrenvoie le jour de la semaine // Sunday - Saturday : 0 – 6getFullYearrenvoie l'année complètegetHoursrenvoie la partie heures de l'heuregetMinutesrenvoie la partie minutes de l'heuregetMonthrenvoie le moisgetTimerenvoie l'heureExamplevar now = new Date; var jj = now.getDate; var mm = now.getMonth + 1; var aaaa = now.getYear; var H = now.getHours;var M = now.getMinutes;L’Objet Date

Page 3 : 3Exercise 1:1. Ecrivez un programme JavaScript pour obtenir la date actuelle dans le format suivant: Jour/mois /année Exemple: 06/12/2021.1. Ecrivez un programme JavaScript pour obtenir la date actuelle dans le format suivant: jour de la semaine, date du mois, année : Exemple Lundi 06 December 2021.1. Ecrivez un programme JavaScript pour obtenir l’heure actuelle dans le format suivant heure: minute.L’Objet Date

Page 4 : 4Exercise 1: solutionvar date = new Date;var jj = date.getDate;var mm = date.getMonth;var aaaa = date.getFullYear;var H = date.getHours;var M = date.getMinutes;var S = date.getSeconds;document.writejj + "/" + mm + "/" + aaaa + "br";var jours = new Array'dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi’;var mois = new Array"janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "octobre", 'Décembre’;document.writejoursdate.getDay + " " + jj + " " + moismm - 1 + " " + aaaa + "br";document.writeH + ":" + M + "br";javaScriptL’Objet Date

Page 5 : 5MathPropriétés : Math.PI Méthodes :atan, acos, asin,tan, cos, sin.abs, exp, log, pow, sqrt.max:renvoie le nombre avec la valeur maximale entre les paramètres passés. min:renvoie le nombre avec la valeur minimale entre les paramètres passés.round:arrondit un nombre à l'entier le plus proche. floor:retourne le plus grand entier inférieur ou égal à la valeur passée en paramètre.trunc:retourne la troncature entière d'un nombre.random: Renvoie un nombre aléatoire entre 0 inclus et 1 exclu.L’Objet Math

Page 6 : 6L’Objet MathExemplesvar a = Math.floor1.9; // 1var b = Math.round1.9;// 2var t= Math.trunc1.9;// 1var c = Math.floor5.1; // 5var d = Math.round5.1; // 5var t1= Math.trunc5.1; // 5var e = Math.floor-5.2; //-6var f = Math.round-5.2; // -5var t2= Math.trunc-5.2; //-5//pour générer un nombre entier aléatoire compris entre min=0 et max=20var min=0;var max=20;var r=Math.roundmax-minMath.random+min;document.writer;javaScript

Page 7 : 7Exercice 2Créez la fonction constructeur pour un objet Cercle. La fonctiondoit ajouter deuxméthode sur l'objetpour calculer lacirconférence et l'aire.L’Objet Math

Page 8 : 8Exercice 2 : solutionfunction Cerclenom, r this.nom = nom;this.r = r;this.getCircumference = function return this.r Math.PI 2;;this.getAire = function return Math.PI Math.powthis.r,2;;this.getName = function return this.nom; ;var c1=new Cercle"A",5;document.writec1.nom+" " +"Aire ="+c1.getAire+"br";document.writec1.nom+" "+"getCircumference ="+c1.getCircumference+"br";javaScriptL’Objet MathLe Résultat

Page 9 : 9StringPropriété :•length: retourne la longueur de la chaîne de caractèresMéthodes :charAt : renvoie le caractère se trouvant à une certaine positionconcat : permet de concaténer 2 chaînes de caractèresindexOf : trouve l'indice d'occurrence d'un caractère dans une chaînesubstringdebut,fin : extrait une sous-chaîne, depuis la position debut incluse à fin excluse.substrdebut,i : extrait une sous-chaîne, depuis la position debut, en prenant i caractèresplitstr : retourne, sous forme de tableau, les portions de la chaînes délimitées par strtoLowerCase : retourne la chaîne en minusculestoUpperCase : retourne la chaîne en majusculesL’Objet String

Page 10 : 10L’Objet StringString : Exemplesvar a="Mussab Zneika"var b=" Works at cergy university"var ab=a.concatb;document.writeab+"br";// Mussab Zneika Works at cergy university var s=ab.split" ";document.writes.length+" "+ s+"br";// 6 Mussab,Zneika,Works,at,cergy,universityvar ua=a.toUpperCase;document.writea+" "+ua;// Mussab Zneika MUSSAB ZNEIKAdocument.writeb.length;//26var x=a.charAt1;document.writex; // ujavaScript

Page 11 : 11DocumentDocument représente n'importe quelle page Web chargée dans le navigateur Propriétés :applets, forms, images, links : retourne les collection d'applets java, formulaires… présente dans le documentcookie : permet de stocker un cookiereferrer : indique l'adresse de la page précédentetitle : indique le titre du documentbgColor indique la couleur d'arrière-plan du document courant.fgColor indique la couleur du texte du document courant.title Définit ou renvoie le titre du documentURL Renvoie l'URL complète du document HTML L’Objet Documentimg src="index.jpg"/imgimg src ="index.jpg"Google/imgscript type="text/javascript"alertdocument.title;forvar i=0; i document.images.length; ++i alert"br" + document.imagesi.width;/script

Page 12 : 12DocumentMéthodes :close : ferme le document en écriture;open : ouvre le document en écriture;writeString text : écrit dans le document;writelnString text : écrit dans le document et effectue un retour à la.getElementByIdString id:renvoie l'élément qui a l'attribut ID avec la valeur spécifiée.getElementsByClassNameString text :renvoie une HTMLCollection contenant tous les éléments avec le nom de classe spécifié.getElementsByNameString text: renvoie une HTMLCollection contenant tous les éléments avec un nom spécifié.getElementsByTagNameString text :renvoie une HTMLCollection contenant tous les éléments avec le nom de balise spécifié L’Objet Document

Page 13 : 13WindowL'objet window représente une fenêtre ouverte dans un navigateur. Propriétés :closed : indique que la fenêtre a été fermée.defaultStatus : indique le message par défaut dans la barre de status.document : retourne l'objet document de la fenêtre.frames : retourne la collection de cadres dans la fenêtre.history : retourne l'historique de la session de navigation.location : retourne l'adresse actuellement visitée.name : indique le nom de la fenêtre.navigator : retourne le navigateur utilisé.opener : retourne l'objet window qui a créé la fenêtre en cours.parent : retourne l'objet window immédiatemment supérieur dans la hiérarchie.status : indique le message affiché dans la barre de status.L’Objet Window

Page 14 : 14WindowL'objet window représente une fenêtre ouverte dans un navigateur. Méthodes :close : ferme la fenêtre.focus : place le focus sur la fenêtre.moveBy : déplace d'une distance.moveTo : déplace la fenêtre vers un point spécifié.open : ouvre une nouvelle fenêtre.print : imprime le contenu de la fenêtre.resizeBy : redimensionne d'un certain rapport.resizeTo : redimensionne la fenêtre.setInterval : appelle une fonction ou évalue une expression à des intervalles spécifiés en millisecondes, continuera à appeler la fonction jusqu'à ce que clearInterval soit appelée ou que la fenêtre soit fermée.setTimeout : appelle une fonction après un nombre spécifié de millisecondesla a fonction n'est exécutée qu'une seule fois L’Objet Window

Page 15 : 15L’Objet WindowObjet Window : Exemple 1p wait 5 seconds, then you will see alert./pscriptfunction myFunctionfname,lname alert"Hello "+fname+" "+ lname;setTimeoutmyFunction, 5000, "Mussab", "Zneika";/script

Page 16 : 16L’Objet WindowObjet Window : Exemple 2//Danscetexemple,nousafficheronsl'heureactuelledel'utilisateuroù chaquesecondeet en utilisantla méthodesetInterval, nous obtenons l'heure et nous l'affichons.p id="time"/pscriptvar myVar = setIntervalfunction var date = new Date;var time = date.toLocaleTimeString;document.getElementById"time".innerHTML = time;, 1000;/script

Page 17 : 17L’Objet WindowObjet Window : Exemple 3//Dans cet exemple, nous ouvrons une fenêtre vide et après 5 seconds nous la redimensionnons à 800, 900 var newwindow = window.open"", "", "width=200, height=200";window.setTimeoutfunction newwindow.resizeTo800, 900; , 5000;Objet Window : Exemple 4//Dans cet exemple, nous ouvrons une fenêtre vide et après 5 secondes nous la redimensionnons à 250, 250var newwindow = window.open"", "", "width=200, height=200";window.setTimeoutfunction newwindow.resizeBy50, 50; , 5000;

Page 18 : 18Présentation des DOM Les objets de la page créent le Document Object ModelDOM.Le DOM définit la structure logique des objets et commenty accéder et les gérerLe DOM peut être vu comme une hiérarchie partant del'objet le plus général et allant jusqu'à l'objet le plusspécifique.Undocumentestunecollectionordonnéed'autreséléments .

Page 19 : 19Présentation des DOM window documenteventframehistorylocationnavigatorscreendocumentformimagelinkstyletaganchorbuttoncheckboxradioresetselectinputsubmittextareaLe DOM HTML est un standard pour savoir comment obtenir, modifier, ajouter ou supprimer des éléments HTML.

Page 20 : 20DOM et JavaScript AvecDOM,JavaScriptpeutcréerunHTMLdynamique en :Modifier tous les éléments HTML.Modifier tous les attributs HTML.Modifier tous les styles CSS.Supprimer les éléments et attributs HTML existants.Ajouter de nouveaux éléments et attributs HTML.Réagir à tous les événements HTML existants.Créer de nouveaux événements HTML dans la page.

Page 21 : 21Sélectiondes élémentsLa sélection des éléments peut se faire:par attribut idpar attribut classpar balisepar sélecteur CSS

Page 22 : 22Sélection par l’attribut idSe fait par la méthode getElementById de l'objet document.Sélectionner l'élément du document dont l'id est fourni en paramètre, ou null si aucun.Le résultat est un objet élément de type HTMLElement.Exemple: var element = document . getElementById " idtext";Sélectiondes éléments

Page 23 : 23Sélectiondes élémentsSélection par l’attribut classSe fait par la méthode getElementsByClassName de l'objet document.Sélectionner les éléments dont la classe est fourni en paramètre.Le résultat est liste des éléments de type HTMLElement.Exemple: var classList = document . getElementsByClassName " class1";

Page 24 : 24Sélectiondes élémentsSélection par baliseSe fait par la méthode getElementsByTagNamede l'objet document.Sélectionner les éléments dont la balise est fourni en paramètre.Le résultat est liste des éléments de type HTMLElementExemple: var imgList = document . getElementsByTagName" img";imgList0; // le premier élément sélectionné

Page 25 : 25Sélectiondes élémentsSélection par CSS sélecteurSe fait par la méthode querySelectorAll de l'objet document.Sélectionner les éléments qui correspond à un sélecteur CSS spécifié.Le résultat est liste des éléments de type NodeList.Exemple: var imgList = document . querySelectorAll" img";imgList0; // le premier élément sélectionné

Page 26 : 26ManipulationsModification des éléments HTML : AttributsLes attributs html sont des propriétés.La valeur peut être string, number ou booleanselon l’attribut.Changer la valeur des attributs peut être faitelement.attribut = valeur element.setAttribute: qui ajoute l'attribut spécifié à un élément et lui donne la valeur spécifiée. Exemple: var in = document . querySelectorAll" input";in0.value=" enter ";

Page 27 : 27ManipulationsModification des éléments HTML : Attributselement.hasAttribute teste si l'élément a l'attribut passé en paramètre .removeAttribute supprime l'attribut spécifié d'un élément. Exemple : var inp=document.querySelectorAll"input";inp0.value=" enter your email "; inp0.setAttribute" type " , " email "; ifinp0.hasAttribute"class"inp0.removeAttribute"class" ;

Page 28 : 28Manipulationsimg id="img1" src="img1.jpg" width="100 " height="100" /script//Dans cet exemple, on modifie la largeur et la hauteur d'une image après 5 secondes de 100 à 500 var myVar = setTimeoutfunction var img1 = document.getElementById"img1";img1.height = "500";img1.width = "500";, 5000;/scriptLe RésultatModification des éléments HTML Exemple 1Après 5 secondes

Page 29 : 29Manipulationsp id="time" Welcom in our page/pp Bienvenue dans notre page /pp wait 5 seconds, then you will see red color ./pscript//Dans cet exemple, après 5 secondes nous modifions la couleur de fond de tous les paragraphes en rougevar myVar = setTimeoutfunction var p = document.getElementsByTagName"p";for var i in p pi.style.backgroundColor = "red";, 5000;/scriptLe RésultatModification des éléments HTML Exemple 2Après 5 secondes

Page 30 : 30Modification des éléments HTML: ContenuinnerHTMLla propriété innerHTML représente le contenu HTML d'un élémenttextContent:la propriété textContent représente le contenu textuel d'un élémentManipulations

Page 31 : 31Modification des éléments HTML Exemple 3div id="div1" text pour testp exemple /p/divscript type="text/javascript"var elem = document.getElementById"div1";var innerHTML = elem.innerHTML;var textContent = elem.textContent;alert"innerHTML" + innerHTML;alert"textContent" + textContent;elem.innerHTML="ok h1 innerHTML modication/h1 ";/scriptinnerHTML text pour testp exemple /ptextContent text pour testexemple ManipulationsLe Résultat

Page 32 : 32Modification des éléments HTML Exemple 4div id="div1" text pour testp exemple /p/divscript type="text/javascript"var elem = document.getElementById"div1";var innerHTML = elem.innerHTML;var textContent = elem.textContent;alert"innerHTML" + innerHTML;alert"textContent" + textContent;elem.textContent = "ok h1 textContent modication/h1 ";/scriptinnerHTML textpour testp exemple /ptextContent text pour testexemple ManipulationsLe Résultat

Page 33 : 33Modification des éléments HTML Exemple 5bodydiv id="divid"pBonjour tout le monde 1/pp class="test" Bonjour tout le monde 2/pp Bonjour tout le monde 3/pp Bonjour tout le monde 4/p/divscriptvar parent = document.getElementById"divid";var test = parent.getElementsByClassName"test";alertparent.innerHTML;alerttest0.innerHTML;/script/bodypBonjour tout le monde 1/pp class="test" Bonjour tout le monde 2/pp Bonjour tout le monde 3/pp Bonjour tout le monde 4/pBonjour tout le monde 2Manipulations

Page 34 : 34Ajout et suppression des éléments HTML document.createElementelement: Crée un élément HTML du type spécifié par tagName.removeChildelement: Supprime un élément HTML enfant de l'élément parent.appendChildelement: Ajoute un élément HTML en tant qu'enfant.replaceChildnew, old: Remplace l'ancien élément HTML par le nouveau. Remove: Supprime un élément HTML.document.createTextNodetext: crée un nœud de texte avec le texte spécifié. node.insertBeforenewnode, existingnodeManipulations

Page 35 : 35Ajout et suppression des éléments Exemple 1bodydiv id="divid"pBonjour tout le monde 1/pp class="test" Bonjour tout le monde 2/pp Bonjour tout le monde 3/pp Bonjour tout le monde 4/p/divscript type="text/javascript"var newLink = document.createElement'a';var newLinkText = document.createTextNode'New link';newLink.id = 'sd';newLink.href = 'http://www.google.com';newLink.appendChildnewLinkText;document.getElementById'divid'.appendChildnewLink;/script/bodyManipulationsBonjour tout le monde 1Bonjour tout le monde 2Bonjour tout le monde 3Bonjour tout le monde 4New link

Page 36 : 36Ajout et suppression des éléments Exemple 2pBonjour tout le monde 1/pp id="test" Bonjour tout le monde 2/pp id="test1" Bonjour tout le monde 3/pp id="test2" Bonjour tout le monde 4/pscript type="text/javascript"var myVar = setTimeoutfunction var p = document.getElementById'test';p.parentNode.removeChildp;var p1 = document.getElementById'test1';p1.remove;var p2 = document.getElementById'test2';document.body.removeChildp2;, 3000;/scriptManipulationsLe RésultatAprès 3 secondes

Page 37 : 37Ajout et suppression des éléments Exemple 3pBonjour tout le monde 1/pp id="test" Bonjour tout le monde 2/pp id="test1" Bonjour tout le monde 3/pp id="test2" Bonjour tout le monde 4/pscript type="text/javascript"var myVar = setTimeoutfunction var p = document.getElementById'test2';var p1 = document.getElementById'test1';p1.parentNode.replaceChildp, p1;, 3000;/scriptManipulationsLe RésultatAprès 3 secondes

Page 38 : 38Ajout et suppression des éléments Exemple 4pBonjour tout le monde 1/pp id="test" Bonjour tout le monde 2/pp id="test1" Bonjour tout le monde 3/pp id="test2" Bonjour tout le monde 4/pscript type="text/javascript"var myVar = setTimeoutfunction var p = document.getElementById'test2';var a=document.createElement"p";texn=document.createTextNode"Bonjour tout le monde 5";a.appendChildtexn;var p1 = document.getElementById'test1';p1.parentNode.replaceChilda, p1;, 3000;/scriptManipulationsLe RésultatAprès 3 secondes

Page 39 : 39Example : changer la position et la taille de l'imageimg src="index.jpg" width="50" height="50" id="img1" /scriptvar x = 50, y = 50;async function myFunction var element = document.getElementById"img1";x = x + 50; y = y + 50;element.width = x;element.height = y;element.style.marginLeft = x + 'px';element.style.maringTop = y + 'px';var i = 0;while i 10 setTimeout myFunction, i1000;i++;/scriptManipulations

Page 40 : 40Example : changer la position et la taille de l'imageimg src="img2.jpg" width="50" height="50" id="img1"/scriptvar x = 50, y = 50;function sleepms return new Promiseresolve = setTimeoutresolve, ms;async function myFunction var element = document.getElementById"img1";x = x + 50; y = y + 50;element.width = x;element.height = y;element.style.marginLeft = x + 'px';element.style.maringTop = y + 'px';async function test var i = 0;while i 10 myFunction;await sleep1000;// alert"x=" + x + "y=" + y;i++;test; /scriptManipulations

Page 41 : 41ManipulationsExercice 3Écrire un programme javascript qui change aléatoire la couleurd'arrière-plan du page toutes les 3 secondes.

Page 42 : 42Exercice 3: solutionvar colors = 'FF6633', 'FFB399', 'FF33FF', 'FFFF99', '00B3E6','E6B333', '3366E6', '999966', '99FF99', 'B34D4D','80B300', '809900', 'E6B3B3', '6680B3', '66991A','FF99E6', 'CCFF1A', 'FF1A66', 'E6331A', '33FFCC','66994D', 'B366CC', '4D8000', 'B33300', 'CC80CC','66664D', '991AFF', 'E666FF', '4DB3FF', '1AB399','E666B3', '33991A', 'CC9999', 'B3B31A', '00E680','4D8066', '809980', 'E6FF80', '1AFF33', '999933','FF3380', 'CCCC00', '66E64D', '4D80CC', '9900B3','E64D66', '4DB380', 'FF4D4D', '99E6E6', '6666FF';function chageBgColorindex var b = document.getElementsByTagName"body";document.bgColor = colorsindex;//b0.style.background= colorsindex;var i = 0;while i 10 var index = Math.round49 Math.random;setTimeoutchageBgColor, i 3000, index;i++;javaScriptManipulations

Page 43 : 43ManipulationsExercice 4Écrire un programme javascript qui affiche une image aléatoire toutes les 3 secondes. La liste des noms des images doit être stockée dans un tableau.

Page 44 : 44Exercice 4 : solutionfunction chageBackgroundImageimg var element = document.getElementById"img1";element.src = tabimg;var tab = "img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg", "img5.jpg", "img6.jpg", "img7.jpg";var i = 0;while i 10 var img = Math.round6 Math.random;setTimeoutchageBackgroundImage, i 3000, img;i++;javaScriptManipulations

Page 45 : 45Les événements servent à interagir avec l'utilisateur, on peut détecter les clics, les modifications de formulaires.Chaque événement a un identifiant De la forme onQuelqueChose par exemple : onLoad, onClick, onMouseOver, etc.Un événement peut exécuter du code Javascript.Activation :balise … onQuelqueChose="code javascript;"…/baliseGestionnaire des événements

Page 46 : 46Les événements de baseonloadSe produit lorsque une page web est chargée dans la fenêtre du navigateur.onclickSe produit lorsque l’utilisateur clique sur un élément spécifique dans une page, comme un lien hypertexte, une image, un bouton, du texte, etc.onmouseoverSe produit lorsque l’utilisateur place le pointeur de sa souris sur l’un des éléments précités lien hypertexte, image, bouton, texte, etc..onmouseoutSe produit lorsque le pointeur de la souris quitte la zone de sélection d’un élément.onkeydownSe produit lorsque l'utilisateur appuie sur une touche du clavier.onunload :Se produit lorsque l'utilisateur quitte la page .Gestionnaire des événements

Page 47 : 47Plus des événements:onabort : chargement d'une image interrompu.onerror : une erreur durant le chargement de la page.onblur : un élément perd le focus.onClick : clic sur l'élément.ondblclick: double clic sur l'élément.ondragdrop : drag and drop sur la fenêtre du navigateuronfocus : le focus est donné à un élémentonresize : la fenêtre est redimensionnéeonchange : modification d'un champ de donnéesonreset : effacement d'un formulaire à l'aide du bouton Reset.onselect : sélection d'un texte dans un champ "text" ou "textarea".onsubmit : clic sur le bouton de soumission d'un formulaireGestionnaire des événements

Page 48 : 48Ajouter un événement à un élément Gestionnaire des événements• span onclick=“alert ‘Click Event’ ”Click me/spanType d'événement Ce qu'on veut qu'il se passe quand ça arriveElément relatif à l'événement

Page 49 : 49Ajouter un événement à un élément Gestionnaire des événementsspan id=‘sp’Click me/spanfunction myfunction alert 'doSomething invoked’ ;this.innerText="you clicked me before";var a = document.getElementById 'sp' ;a.onclick = myfunction;a.onclick=functionalert 'doSomething invoked’ ;this.innerText="you clicked me before";;Erreur : a.onclick = myfunction;

Page 50 : 50Ajouter un événement à un élément Gestionnaire des événementsspan id=“sp”Click me/spanfunction myfunction alert 'doSomething invoked’ ;this.innerText="you clicked me before";var a = document.getElementById ‘sp’ ;a.addEventListener‘click’, myfunction;Type d'événement Ce que nous voulons qu'il se passe quand cela arriveElément relatif à l'événement

Page 51 : 51Les événements de base : Example formnumero1 :brinput type="text" id="numero1" name="numero1" value="0"brnumero2 :brinput type="text" id="numero2" name="numero2" value="0"brResultat :brinput type="text" id="numero3" name="numero3" value="0"brbr/formbutton onclick="add"+++++++/buttonbutton onclick="multi"/buttonbutton onclick="divs"/////////buttonGestionnaire des événementsHTML

Page 52 : 52function add var x = parseIntdocument.getElementById"numero1".value;var y = parseIntdocument.getElementById"numero2".value;if isNaNx isNaNy document.getElementById"numero3".value = "Err";else document.getElementById"numero3".value = x + y;function multi var x = parseIntdocument.getElementById"numero1".value;var y = parseIntdocument.getElementById"numero2".value;if isNaNx isNaNy document.getElementById"numero3".value = "Err";else document.getElementById"numero3".value = x y;function divs var x = parseIntdocument.getElementById"numero1".value;var y = parseIntdocument.getElementById"numero2".value;if isNaNx isNaNy document.getElementById"numero3".value = "Err";else if y != 0document.getElementById"numero3".value = x / y;else alert"error y doit pas etre 0";Gestionnaire des événementsjavaScript

Page 53 : 53Gestionnaire d’événementsExercice 5Ecrire un JavaScript program permettant de changer l'image lorsquele pointeur de la souris se trouve sur celle-ci. On revient sur l’imaged’origine lorsque le pointeur de la souris se déplace hors de l’image.

Page 54 : 54Exercice 5 : solution1img onmouseover="this.src='img2.jpg'" onmouseout="this.src='img1.jpg'"border="0" src="img1.jpg" alt="Smiley" width="200" height="200"Gestionnaire des événements

Page 55 : 55Exercice 5 : solution2img onmouseover="changesrcthis" onmouseout="changesrc1this"border="0" src="img1.jpg" alt="Smiley" width="200" height="200"scriptfunction changesrcx x.src = "img2.jpg";function changesrc1x x.src = "img1.jpg";/scriptGestionnaire des événements

Page 56 : 56Exercice 5 : solution 3imgborder="0" src="img1.jpg" alt="Smiley" width="200" height="200"scriptfunction changesrcx x.src = "img2.jpg";function changesrc1x x.src = "img1.jpg";var img = document.getElementsByTagName"img";img0.addEventListener"mouseover", function changesrcthis; ;img0.addEventListener"mouseout", function changesrc1this; ;//img0.addEventListener"mouseover", function this.src = "img2.jpg"; ;//img0.addEventListener"mouseout", function this.src = "img1.jpg"; ;/scriptGestionnaire des événements

Page 57 : 57Gestionnaire des événementsExercice 6Écrire un script javascript qui crée, au chargement de la page, unenouvellefenêtrequisefermeraautomatiquementaprèsde3secondes.

Page 58 : 58Exercice 6 : solutionbody onload="myFunction"scriptfunction myFunction var myWindow = window.open"", "", "width=200,height=100";setTimeoutfunction myWindow.close;, 3000;/script/bodyGestionnaire des événements

Page 59 : 59SOURCES D’ INFORMATION• MDN Web Docs: JavaScript: https://developer.mozilla.org/fr/docs/Web/JavaScript• W3C JavaScript and HTML DOM Reference: https://www.w3schools.com/jsref/• Cours de Thierry Lecroqhttp://www-igm.univ-mlv.fr/lecroq/cours/javascript.pdf• Cours de Jean-Loup Guillaume JAVASCRIPThttp://jlguillaume.free.fr/www/documents/teaching/ntw1213/LI385C4Javascript.pdf

Pages : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59