Initiation aux techniques du Web Cours L2 sciences cognitives Séance 7 Charif HAYDAR: alchiekc@loria.fr
JS exemple: calculatrice <html> <head> <title> Calculatrice </title> </head> <body> <table> <tr align="center"> <td colspan="3" align="center"> <input type="text" id="affiche"></td> </tr> <tr> <td><input type="button" id="b7" value="7"></td> <td><input type="button" id="b8" value="8"></td> <td><input type="button" id="b9" value="9"></td> <td><input type="button" id="boper" value="+"></td> </tr> <tr> <td><input type="button" id="b4" value="4"></td> <td><input type="button" id="b5" value="5"></td> <td><input type="button" id="b6" value="6"></td> <td><input type="button" id="boper" value="-"></td> </tr> <tr> <td><input type="button" id="b1" value="1"></td> <td><input type="button" id="b2" value="2"></td> <td><input type="button" id="b3" value="3"></td> <td><input type="button" id="boper" value="*"></td> </tr> <tr> <td><input type="button" id="begal" value="=" ></td> <td><input type="button" id="b0" value="0" ></td> <td><input type="button" id="bvirgule" value="."></td> <td><input type="button" id="boper" value="/"></td> </tr> </table> </body> </html>
JS exemple: calculatrice Chiffres (et virgule) Opérateurs Égal (exécution) Chiffres Opérateurs égal
JS exemple: calculatrice var num1; var operateur; scriptfile.js <html> <head> <title> Calculatrice </title> <script type="text/javascript" src="scriptfile.js"></script> </head> <body> Calculatrice.html
JS exemple: calculatrice var num1; var num2; var operateur; function numero(x){ document.getelementbyid("affiche").value += document.getelementbyid(x).value; <td><input type="button" id="b7" value="7" onclick="numero(this.id)"></td> <td><input type="button" id="b8" value="8" onclick="numero(this.id)"></td> <td><input type="button" id="b9" value="9" onclick="numero(this.id)"></td>
JS exemple: calculatrice var num1; var operateur; function operation(x){ num1 = parsefloat(document.getelementbyid("affiche").value); operateur = document.getelementbyid(x).value; document.getelementbyid("affiche").value = "0"; <td><input type="button" id="bplus" value="+ onclick="operation(this.id)"></td>
JS exemple: calculatrice functionegal(){ var num2 = parsefloat(document.getelementbyid("affiche").value); switch(operateur){ case "+": document.getelementbyid("affiche").value = num1 + num2; break; case "-": document.getelementbyid("affiche").value = num1 - num2; break; case "*": case "/": document.getelementbyid("affiche").value = num1 * num2; break; document.getelementbyid("affiche").value = num1 / num2; break; <input type="button" width="60" id="begal" value="=" onclick="egal()">
JS exemple: calculatrice function numero(x){ document.getelementbyid("affiche").value += document.getelementbyid(x).value; x="b1" "value" de "b1" = "1" Affiche.value = "1"
JS exemple: calculatrice function numero(x){ document.getelementbyid("affiche").value += document.getelementbyid(x).value; x="b2" "value" de "b1" = "2" Affiche.value= "1" + "2" = "12"
JS exemple: calculatrice function operation(x){ num1 = parsefloat(document.getelementbyid("affiche").value); operateur = document.getelementbyid(x).value; document.getelementbyid("affiche").value = "0"; num1 = 12 Operateur="+" Affiche.value = "0"
JS exemple: calculatrice function numero(x){ document.getelementbyid("affiche").value += document.getelementbyid(x).value; num1 = 12 Operateur="+" x="b5" "value" de "b1" = "5" Affiche.value= "0" + "5" = "05"
JS exemple: calculatrice functionegal(){ var num2 = parsefloat(document.getelementbyid("affiche").value); switch(operateur){ case "+": document.getelementbyid("affiche").value = num1 + num2; break; num1 = 12 num2 = 5 Operateur="+" Affiche.value= 5 + 12 = 17
Matrices var matrice= new Array(); matrice[0] = "HTML"; matrice[1] = "CSS"; matrice[2] = "JS"; matrice.sort(); document.write(matrice[0] + "<br/>" + matrice [1] + "<br/>" + matrice [2]); CSS HTML JS
Fonctions prédéfinis Imprimer une page web Rederiger l'utilisateur vers une autre page: <input type="button" onclick="window.print()"> <input type="button" onclick="window.location='http://www.google.com'">
Fonctions prédéfinis: popup Dependent: La fenêtre sera fermée si avec son parent Fullscreen: Le navigateur fonctionnera en mode pleinécran Height: la hauteur de la fenêtre Width: Le largeur de la fenêtre Left:Pixels à partirdu côtégauche de l'écran Top: Pixels à partirdu sommetde l'écran Resizable:permetà l'utilisateurde changer la taillede la fenêtre manuellement. Status:afficherounon la bar des outils
popup <input type="button" onclick="window.open('http://www.google.com')"> <input type="button" value = "popup" <input type="button" value = "popup" onclick='window.open( "http://www.google.com/", "mywindow", "status = 1, height = 300, width = 300, resizable = 0" ) '>
JS time object var temps = new Date() gettime(): Nombre de millisecondes depuis 1/1/1970 @ 12:00 AM getseconds(): Nombre de secondes(0-59) getminutes(): Nombre de minutes (0-59) gethours(): Nombre de heurs(0-23) getday(): Jour de la semaine(0-6). 0 = dimanche,..., 6 = samedi getdate(): Jour du mois(0-31) getmonth(): Nombre du mois(0-11) getfullyear(): L'année en quatre chiffres(1970-9999) var temps = new Date() document.write(temps.getfullyear);
Détection de navigateur Le navigateur est un objet prédéfini: appcodename appname appversion cookieenabled platform useragent
Exemple txt = "<p>code du navigateur: " + navigator.appcodename + "</p>"; txt+= "<p>nom du navigateur: " + navigator.appname + "</p>"; txt+= "<p>version: " + navigator.appversion + "</p>"; txt+= "<p>cookies activé: " + navigator.cookieenabled + "</p>"; txt+= "<p>os: " + navigator.platform + "</p>"; if(navigator.appname == "Microsoft Internet Explorer"){ window.location = "http://www.google.com"; else{ document.write(txt);
Chaînes de caractères var str="ma chaine" str.length La taille de la chaîne 9 Ar = str.split("a") Découperla chaîne Ar[0]="m", Ar[1]=" ch", Ar[2]="ine" X = str.search("ch"); S = str.replace("", "_"); Y = str.indexof("a", 3); str.tolowercase() str.touppercase() Chercher unsous-chaîne dans la chaîne principale Remplacerun sous-chaîne par un autre Chercher un sous-chaîneà partir d'un point donné X = 3 S = "Ma_chaine" Y=5 ma chaine MA CHAINE
Cookies Cookies: Des valeurs qu'une page web stocke sur les machines de ses visiteurs pour des buts diverses. Avec JS on peut lire et écrire des cookies. Chaque cookie a une date d'expiration
Ajouter un cookie function createcookie(name,value,days) { if (days) { var date = new Date(); date.settime(date.gettime()+(days*24*60*60*1000)); var expires = "; expires="+date.togmtstring(); elsevar expires = ""; document.cookie = name+"="+value+expires+"; path=/";
Lire un cookie function readcookie(name) { var nameeq= name+ "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while(c.charat(0)==' ') c = c.substring(1,c.length); if (c.indexof(nameeq) == 0) return c.substring(nameeq.length,c.length); return null;
Supprimer un cookie function erasecookie(name) { createcookie(name,"",-1);
Ajouter un élément HTML functionaddelement() { //Create an input type dynamically. var element = document.createelement("input"); //Assign different attributes to the element. element.setattribute("type", "text"); element.setattribute("value", "hello"); element.setattribute("name", "dynamic"); var foo = document.getelementbyid("parent"); //Append the element in page (in span). foo.appendchild(element); <div id="parent"> </div>
Supprimer un élément HTML functionremoveelement(divnum) { var d = document.getelementbyid('parent'); var olddiv = document.getelementbyname(" dynamic"); d.removechild(olddiv);