Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Technologie Web 1 Pr. Hiba Chougrad Année-universitaire: 2019-2020 Planning Cou

Technologie Web 1 Pr. Hiba Chougrad Année-universitaire: 2019-2020 Planning Cours Génie Logiciel Orienté Objet: • 3 séances de cours + 3 séances de TP • Cours collectif : Lundi matin • TP en groupe : Groupe1 Lundi Matin et Groupe2 Lundi après-midi La note : • Rapport des TP • Examen final pratique 2 Plan I. Langage HTML / CSS II. Langage JavaScript III. PHP/MySQL 3 JavaScript 4 Introduction • Javascript est un langage de scripts incorporé aux balises Html qui permet d'améliorer la présentation et l'interactivité des pages Web. • Javascript est une extension du code Html des pages Web. • Les scripts vont être gérés et exécutés par le browser lui-même sans devoir faire appel aux ressources du serveur • Les scripts peuvent être écrits dans la page HTML ou dans un autre fichier à part avec extension .js 5 Javascript n'est pas Java 6 Javascript Java Code intégré dans la page Html Module (applet) distinct de la page Html Code interprété par le browser au moment de l'exécution Code source compilé avant son exécution Codes de programmation simples mais pour des applications limitées Langage de programmation beaucoup plus complexe mais plus performant Permet d'accéder aux objets du navigateur N'accède pas aux objets du navigateur Confidentialité des codes nulle (code source visible) Sécurité (code source compilé) Notion d’objet 7 Notion d’objet 8 radio fenêtre document formulaire bouton texte (window).document.form.radio[0] Syntaxe 9 <SCRIPT LANGUAGE="Javascript"> ….. …..code javascript …. </SCRIPT> Commentaire 10 // commentaire Tout ce qui est écrit entre le // et la fin de la ligne sera ignoré. Il sera aussi possible d'inclure des commentaires sur plusieurs lignes avec le code /* commentaire */ Exemple 11 <HTML> <HEAD> <TITLE>Mon premier Javascript</TITLE> </HEAD> <BODY>  <SCRIPT LANGUAGE="Javascript"> // affichage du texte: votre texte alert("votre texte"); </SCRIPT>  </BODY> </HTML> Html normal ... ... ... ... ... Début du script Fin du script Html normal ... ... Testez ! Extension .js pour scripts externes 12 <SCRIPT LANGUAGE='javascript' SRC='script.js'></SCRIPT> <SCRIPT LANGUAGE='javascript' SRC='http://site.com/javascript.js’ /> Notion de variable 13 Les variables peuvent se déclarer de deux façons : implicite ou explicite. La commande qui permet de déclarer une variable est le mot var. Par exemple : • var Numero = 1 • var Prenom = " Adil" Variable 14 <HTML> <BODY> <SCRIPT LANGUAGE="Javascript"> var texte = "Mon chiffre préféré est le "; var variable = 7; document.write(texte + variable); </SCRIPT> </BODY> </HTML> Exemple: Testez ! Types de données 15 Type Description Des nombres Tout nombre entier ou avec virgule tel que 22 ou 3.1416 Des chaînes de caractères Toute suite de caractères comprise entre guillemets telle que "suite de caractères" Des booléens Les mots true pour vrai et false pour faux Le mot null Mot spécial qui représente pas de valeur Affichage du texte 16 La méthode write() méthode de l’objet document, pour écrire dans le document document.write("votre texte"); document.write(resultat); // soit la variable resultat document.write("Le résultat est " + resultat); document.write("<B>Le résultat est</B>" + resultat); ou document.write ("<B>" + "Le résultat est " + "</B>" + resultat); Affichage du texte 17 Exemple : <HTML> <BODY> <H1>Ceci est du Html</H1> <SCRIPT LANGUAGE="Javascript"> document.write("<H1>Et ceci du Javascript</H1>"); </SCRIPT> </BODY> </HTML> Testez ! Lecture 18 • Javascript vous propose une autre boite de dialogue, dans le cas présent appelée boite d'invite, qui est composée d'un champ comportant une entrée à compléter par l'utilisateur. • Cette entrée possède aussi une valeur par défaut. prompt("texte de la boite d'invite", "valeur par défaut"); Syntaxe : Les écriture en Javascript... 19 variable.big(); variable.small(); variable.bold(); variable.italics(); variable.fontcolor(color ); //ex. Var.fontcolor(“red”); variable.fontsize(x); variable.strike(); // texte barré variable.sub(); // textSub variable.sup(); // textSup Exemple : document.write(nom.fontcolor("green").italics().bold().strike()); Testez ! Les écriture en Javascript... 20 str="Ensa Fes"; x=3; document.write("<FONT SIZE=3>" +str+"</FONT>"); document.write("<FONT SIZE=3>" +" Ensa Fes </FONT>"); document.write(str. fontcolor(“red”) ); document.write(str.fontsize(x)); document.write(str.italics()); document.write(str.bold()); Les instructions de formatage de document 21 document.bgColor Cette instruction permet de spécifier la couleur d'arrière-plan d'un objet document. On peut employer le nom ou la valeur RGB de la couleur. document.bgColor="white"; document.bgColor="#FFFFFF"; document.fgColor Cette instruction permet de spécifier la couleur du texte d'un objet document. document.fgColor="black"; document.fgColor="#000000"; Les instructions de formatage de document 22 document.title Cette instruction permet d’afficher le titre du document: document.write("le titre du document est " + document.title + "<br>"); document.lastModified La propriété javascript lastModified de l'objet document permet de savoir quand la page HTML a été modifiée. document.write("la dernière modification : " + document.lastModified + "<br>"); Les opérateurs 23 Les opérateurs de calcul: x=11 Signe Nom Signification Exemple Résultat + plus Addition x + 3 14 - moins Soustraction x - 3 8 * multiplié par Multiplication x*2 22 / divisé par division x /2 5.5 % modulo reste de la division par x%5 1 = a la valeur Affectation x=5 5 Les opérateurs 24 Les opérateurs de comparaison: x=11 Signe Nom Exemple Résultat == égal x==11 true < inférieur x<11 false <= inférieur ou égal x<=11 true > supérieur x>11 false =< Supérieur ou égal x>=11 true != différent x!=11 false Les opérateurs 25 Les opérateurs associatifs: x=11, y=5 Signe Description Exemple Signification Résultat += plus égal x += y x = x + y 16 -= moins égal x -= y x = x - y 6 *= multiplié égal x *= y x = x * y 55 /= divisé égal x /= y x = x / y 2.2 Les opérateurs 26 Les opérateurs d'incrémentation : y=3 Signe Description Exemple Signification Résultat x++ incrémentation (x++ est le même que x=x+1) y = x++ 3 puis plus 1 4 x-- décrémentation (x-- est le même que x=x-1) y= x-- 3 puis moins 1 2 Les fonctions 27 Une fonction est un groupe de ligne(s) de code de programmation destiné à exécuter une tâche bien spécifique function nom_de_la_fonction(arguments) { ... code des instructions ... } Déclaration Appel nom_de_la_fonction(); Les fonctions 28 function Exemple(Texte) { alert(Texte); } Passer une valeur à une fonction Appel Exemple(‘’ mon texte ‘’); Les fonctions 29 Une variable déclarée dans une fonction par le mot clé var aura une portée limitée à cette seule fonction, donc c’est une variable locale Variables locales et variables globales Si la variable est déclarée contextuellement (sans utiliser le mot var), sa portée sera globale. Variable locale Variable globale Les fonctions 30 function AfficheVar() { var i = 100; document.write("hello"); } AfficheVar(); document.write(i); Variables locales et variables globales Exemple : Variable locale function AfficheVar() { i = 100; document.write("hello"); } AfficheVar(); document.write(i); Exemple : Variable globale Affiche : hello Affiche : hello100 Les fonctions 31 Les variables déclarées tout au début du script, en dehors et avant toutes fonctions, seront toujours globales, qu'elles soient déclarées avec var ou de façon contextuelle. Variables globales <SCRIPT LANGUAGE="javascript"> var i = 1; function AfficheVar() { var i=10; document.write("hello"); } AfficheVar(); document.write(i); </SCRIPT> Exemple : Variable globale <SCRIPT LANGUAGE="javascript"> var i = 1; function AfficheVar() { i=10; document.write("hello"); } AfficheVar(); document.write(i); </SCRIPT> Quelle est la différence entre les deux scripts ? Que va afficher chacun d’eux? Les fonctions prédéfinies eval • Cette fonction exécute un code Javascript à partir d'une chaîne de caractères. 32 ... <SCRIPT LANGUAGE="JavaScript"> function evaluation() { var x= eval(‘’ 20+ 40’’); document.write(x); } // appel de la fonction evaluation(); // ou bien ev= evaluation(); </SCRIPT> Affiche : 60 Les fonctions prédéfinies isFinite • Détermine si le paramètre est un nombre fini. Renvoie false si ce n'est pas un nombre ou l'infini positif (Number.POSITIVE_INFINITY) ou infini négatif (Number.NEGATIVE_INFINITY) isNaN • détermine si le paramètre n’est pas un nombre (NaN : Not a Number). 33 isFinite(240) //retourne true isFinite("Un nombre") //retourne false isNaN("un nombre") //retourne true isNaN(20) //retourne false Les fonctions prédéfinies parseFloat • analyse une chaîne de caractères et retourne un nombre décimal. • parseInt • analyse une chaîne de caractères et retourne un nombre entier de la base spécifiée. • La base peut prendre les valeurs : • 16 (hexadécimal) 10 (décimal), 8 (octal), 2 (binaire). 34 var numero="125"; var nombre=parseFloat(numero); //retourne le nombre 125 var prix=30.75; var arrondi = parseInt(prix, 10); //retourne 30 Les fonctions prédéfinies Number • convertit l'objet spécifié en valeur numérique String • convertit l'objet spécifié en chaîne de caractères 35 var jour = new Date(“Octobre 09, 2019 03:24:00");//convertit la date en millisecondes alert (Number(jour)); jour = new Date(430054663215);//Convertit le nombre en date Mois jour, Année etc. alert (String(jour)); Les événements 36 Les événements Javascript, associés aux fonctions, aux méthodes et aux formulaires, ouvrent grand la porte pour une réelle interactivité de vos pages. monévénement="fonction() " Ou monévénement= " instruction javascript" Les événements onclick 37 Evénement classique en informatique, le click de la souris. Exemple: <FORM> <INPUT TYPE="button" VALUE="Cliquez ici" onClick="alert('Vous avez bien cliqué ici')"> </FORM> Testez ! Les événements 38 L'événement Load survient lorsque la page a fini de se charger. A l'inverse, Unload survient lorsque l'utilisateur quitte la page. onLoad et onUnload Exemple : <HTML> <HEAD> <SCRIPT LANGUAGE="Javascript"> function bienvenue() { alert("Bienvenue à cette page");} function au_revoir() { alert("Au revoir"); } </SCRIPT> </HEAD> <BODY onLoad='bienvenue()' onUnload='au_revoir()'> Html normal… </BODY> </HTML> Les uploads/Ingenierie_Lourd/ cours2-web.pdf