Voir le chapitre 1 : introduction au langage HTML SOMMAIRE : I. Introduction au langage Java II. Déclaration et affectation des variables III. Les opérateurs IV. Les structures de contrôle I- Introduction au langage script JAVASCRIPT Le javascript est le langage de programmation de Netscape. Il sert à dynamiser les pages web, il est possible d'ajouter des scripts (animation,...) qui sont directement intégrés dans les pages HTML. Ces codes sont directement interprétés par le navigateur au moment de l'éxécution. Ces applications sont toutefois limitées. <HTML> <HEAD><TITLE> mon 1er script </TITLE> <SCRIPT LANGUAGE="javascript"> function action( ) alert ("bienvenue") </SCRIPT> </HEAD> <BODY ONLOAD="action ( ) ;"> <a href="http://..."> allez sur le site WBC </a> </BODY></HTML> Bases du langage Java : - on peut rajouter éventuellement la version instructions ; exemple : <script language="javascript 1.2" SRC="emplacement du fichier script">
document.write ("support de la version 1.2 de java") ; Script : soit placé directement sur la page web (idéalement dans <head>) soit placé dans un fichier externe à la page (idéal si le script est utilisé sur plusieurs pages, utilisation de l'extension.js ) A l'intérieur des balises, on n'utilise que du code java, pas de code HTML!!! Commentaires : si le commentaire tient sur une ligne, on le fait précéder de 2 //, s'il tient sur plusieurs lignes : /*.........*/ II - Les variables : Variables : élément à qui on attribut une valeur, qui pourra ensuite être utilisée ou modifiée lors de l'éxécution du programme. Doit commencer par une lettre ou un _ (underscore) et ne doit pas contenir d'espaces ni de &. Déclaration et affectation : var NomVariable= valeur ; - exemple : var age = 35 ; Les quatres types de variables : Nombres Les chaines de caractères entouré par ' ' ou " " Booléen 2 valeurs possibles : true ou false Null (constante) \n : passage à la ligne \t : tabulation \\ : interprétation du caractère \ comme caractère exemples : var message = 'C\'est moi ; var taux = 19/100 Portée d'une variable : selon comment on la déclare, une variable peut être locale ou glogale. locale : n'existe que dans la fonction dans laquelle elle a été déclarée globale : disponible pour l'intégralité du script III - Les opérateurs Opérateurs : manipuler des variables pour des opérations et des comparaisons
1. de calcul + - / * % (reste de la division) var nb=25 ; resultat = nb * 2 ; 2. d'affectation = synthaxe : variable=expression ; peut être une autre variable, une valeur, une expression quelconque 3. d'assimilation : += -= *= /= si nb a pour valeur 10 : nb * = 2 ; -------------> (nb = nb * 2) 4. d'incrémentation ++ de décrémentation -- Exemple : nb ++ : expression calculée avec le contenu de la variable avant l'incrémentation nb -- : c'est l'inverse! <HTML><HEAD> var nb= 5 ; document.write (nb ++ "<br>" + ++ nb) ; </head> <BODY></BODY></HTML> 5. comparaison Affiche : 5 7 = =! = > = < = > < 6. logiques (alt gr + 6) ou && et! non opérations binaires opération unaire 7. Concaténation : + : assembler chaine de caractères entre elles IV - Les structures de contrôle : Structures de controle : ---> instructions conditionelles
permet d'éxécuter une instruction si et seulement si l'instruction est réalisée. (ex : mot de passe valide) if... else... opérateurs ternaires switch instructions répétitives : for for in while do while synthaxe : if (condition) instruction 1 ; else instruction 2 ; var motdepasse='mdp' var motuser = prompt("entrer votre mot de passe") ; if (motuser = = mot de passe) alert ("vous pouvez entrer") ; else alert ("pas possible" ; condition? instr 1 : instr 2 ; var nb1 = 8 ; var nb 2 = (nb1>10)? nb1 : nb1 * 2 document.write (nb2) ; switch (variable) case cas1 : instruction 1 ; break ; case cas2 : instruction 2 ; break ; default : instruction ; FOR - synthaxe : for (initialisation ; condition d'arrêt ; mode d'évolution ;) instruction ; for (var i=0 ; i<5 ; i++) document : write("boucle num" +i+ "<br>") ; -------> 5 passages (boucle num 0 à num 4)
while (condition) instruction ; do instruction ; while (condition) ; var i=0 ; write (i<5) document.write : (1 + "<br>") i + 1 ; Fonction : sous programme qui permet d'effectuer un ensemble d'instructions par simple appel de la fonction dans le corps du programme principal. function NomFonction ([arguments]) instructions ; Termine son exécution soit lorsque toutes les instructions sont terminées, ou soit lorsqu'il y a une instruction return ; : permet de renvoyer une valeur de retour. <script... > function addition (nb1 + nb2 + nb3) return (nb1 + nb2 + nb3) ; document.write (addition (4, 5, 6)) ; Ecrire le code java pour la table de multiplication par 9 dans un tableau CODE : function nul (nb) return (nb + 0) ; document.write ('<table border=1>') for (1=0, 1<11, i++) document.write('<tr><td>'+i+'</td><td>'+nul(i)+'</td></tr>') document.write('</table>') V - Les évênements: Les objets : différents types : clic de la souris passage de la souris appui sur une touche chargement de la page fermeture de la page
Pour associer des évênements aux actions, on utilise des gestionnaires d'évênements. synthaxe : onevenement="fonction();" Exemple : OnClick="alert("message"); Quelques gestionnaires d'évênements : onload : quand la page se charge onunload : quand la page se ferme Exemple : <html><head><title></title> function bienvenue() alert("bienvenue sur mon site"); function aurevoir() alert("au revoir et à bientôt"); </head> <body onload="bonjour');" onunload="aurevoir();"> </body> </html> Les objets : Hiérarchie WIN DOW S NAVI GAT OR DOC UME NT HIST ORY DOCUMENT ANCHORS FORMS ELEMENTS (boutons, cases à cocher, ) IMAGES LINKS Autres objets : un objet a : date array string number RegExp
des méthodes ( ex : window.alert("... ") ) des propriétés ( ex : document.bgcolor ) Ecrire un script qui découpe une phrase en plusieurs fragments : document.write(...) tableau qui va afficher les mots (1 par ligne) Nombre d'éléments du tableau (NomduTableau,lenght) Méthode split (séparateur) : de l'objet string <html> <head><title></title> function affichermots(chaine) var tableau=chaine.split(""); for (i=0; i<tableau.lenght; i++) document.write(tableau[i]+"<br>"); </head> <body> chaine="bonjour"; affichermots(chaine); </body></html> Création d'une "combo box" : <html> <head><title></title> function aller() location.href=combo.librairie.options[combo.librairie.selected index].value ; </head> <body> <form name="combo"> <select name="librairie"> <option value="http://www.....com"> NOM </option> </select> <input type="button" value="aller sur la page" oncick="aller();"> </form> </body></html>