Java script Introduction

UE: DEVELOPPEMENT WEB ET MULTIMEDIA 2 (1)Programmation Web2 (2)Atelier Développement Web et Multimédia II Technologies de l’Informatique (TI) TC-Semestre 2 Mohamed Mhamdi Iset de Sousse(Tunisie)

Programmation Web2 (les fondamentaux) Mohamed Mhamdi Iset de Sousse

page web statique - page web dynamique • Une page web statique est une page web dont le contenu ne varie pas en fonction des caractéristiques de la demande, c'est-à-dire qu'à un moment donné tous les internautes qui demandent la page reçoivent le même contenu. • À l'inverse, une page web dynamique est générée à la demande et son contenu varie en fonction des caractéristiques de la demande (heure, adresse IP de l'ordinateur du demandeur, formulaire rempli par le demandeur, etc.) qui ne sont connues qu'au moment de sa consultation.

Mode de communication Client- serveur (Ce mode permet d’expliquer le dynS vs dynC ) • La signification d’une page dynamique ne peut s’expliquer que dans le contexte d’une communication client-serveur • environnement client-serveur= un mode de communication à travers un réseau entre plusieurs programmes ou logiciels. – l'un, qualifié de client, envoie des requêtes. – l'autre ou les autres, qualifiés de serveurs, attendent les requêtes des clients et y répondent(réponse!!!!). – Plusieurs types de serveurs: • un serveur de données à communiquer des données stockées dans une base de données • un serveur de fichiers permet de stocker et consulter des fichiers sur le réseau • un serveur de messagerie électronique envoie des mails à des clients de messagerie ; • un serveur web publie des pages web demandées par des navigateurs web ;

réponse à la requête et type du dynamisme • Une page dynamique contient forcement une réponse à une requête émanée du client: – En cas où la réponse est générée par le serveur on parle alors d’une page dynamique coté serveur – En cas où la réponse est générée par le client on parle du dynamisme coté client

Serveur Web Structure • Composition d’un serveur Web: – Un daemon HTTP + virtual host(protocole HTTP): écoute+analyse+extraction+envoi réponse – Autres composants Système (moteur de rendu+ moteur de script) : vérification de l’existence d’un script+ exécution du script+génération de la page web dynamique; – Pages Web Statiques (HTML+CSS) – Pages Web Dynamiques(HTML+CSS+Scripts+autres ..)

Serveur Web La structure Interne d’un serveur Web(1)

Serveur Web Moteur de rendu(2) Avec un rendu côté client: • votre demande initiale (Get) charge la mise en page (HTML), le code CSS et code JavaScript de la page HTML. • Mais tout ou partie du contenu ne sera pas inclus. • Au lieu de cela, le JavaScript fait une autre demande, obtient une réponse (probablement en XML ou JSON), et génère le code HTML approprié. Avec un rendu côté serveur, la demande initiale charge: -La mise en page, - le code CSS, -le contenu de la pages. Rendering coté client ou serveur ? La décision architecturale la plus importante À prendre pour votre projet! Tendance:Hybride

Rendu du serveur suite à la demande d’une page web(1) • Les différents cas: – ScriptServ+html: (rendu=html) – ScriptServ+ScriptCli+Html: (rendu=ScriptCli+html) – ScriptServ+Applet+Html: (rendu=Applet+html) – Applet + Html: (rendu=Applet+html) – ScriptCli+html: (rendu=ScriptCli+html) – ScriptCli+applet+HTML: (rendu=ScriptCli+applet+html)

Rendu du serveur suite à la demande d’une page web(2) Certains langages permettent de développer à la fois les aspects client et serveur. C'est le cas d'Ocsigen, de Hop ou bien encore du Server-Side JavaScript.

Rendu du serveur suite à la demande d’une page web(3)

Dynamisme coté serveur vs coté client • À l'inverse, une page web dynamique est générée à la demande et son contenu varie en fonction des caractéristiques de la demande • on utilise des langages qui offrent la possibilité de réagir à certaines actions de l'utilisateur sans avoir à questionner le serveur

Technologies pour pages Web dynamiques(1) (1)Comme il Il y a des langages pour la programmation des pages web statiques qui sont Les langages de balisage (HTML, XHTML,XML) (2)Il ya d’autres qui sont fait pour la programmation des pages dynamiques (3)En réalité il ne s’agit pas uniquement des langages mais de technologies • Ce type de Technologies est utilisé pour une plus grande interaction entre un client et un serveur • Nous allons tracer un bref aperçu de différentes technologies possibles dans la programmation dynamique côté client ou côté serveur.

Langages pour pages Web dynamiques(2) • Insertion d'objets – Images ( gifs animés.) – Multimédia (son ou vidéo) – Animation Flash (animations dans un format vectoriel propriétaire +ActionScript(1)) – Applet Java (appliquette) – ActiveX (applications développée par Microsoft.)

Partie2: Programmation web côté client

Programmation web côté client • Côté client (en général le navigateur web): on utilise des langages qui offrent la possibilité de réagir à certaines actions de l'utilisateur: – En exploitant la puissance de traitement locale du client (eclatement au niveau du traitement) – sans avoir à questionner le serveur.(parfois)

Les technologies de programmation Web dynamique côté client • Les technologies natives aux navigateurs – HTML5 : le langage client du Web – CSS 3 pour la présentation – JavaScript et Framework JavaScript pour l'interactivité • Les technologies à base de plugins – Applet Java – Contrôle ActiveX – Flash

Scripts vs Applets(1) Code source Java Byte code (.class) 0: iconst_2 1: istore_1 2: iload_1 3: sipush 1000 6: if_icmpge 44 9: iconst_2 10: istore_2 11: iload_2 12: iload_1 13: if_icmpge 31 16: iload_1 17: iload_2 18: irem 19: ifne 25 22: goto 38 25: iinc 2, 1 28: goto 11 31: getstatic #84; // Field java/lang/System.out:Ljava/io/PrintStream; 34: iload_1 35: invokevirtual #85; // Method java/io/PrintStream.println:(I)V 38: iinc 1, 1 41: goto 2 44: return outer: for (int i = 2; i < 1000; i++) { for (int j = 2; j < i; j++) { if (i % j == 0) continue outer; } System.out.println (i); }

Scripts vs Applets(2) (1)Intaller java (2) Activer javaplugin dans le browser: appel du panneau de configuration java demarrer/programme/java/c onfiguration java/ securité/activer le contenu java dans le navigateur (3) Autoriser l’execution des applets java: Chrome/paramètres/plugins/ autoriser tout le contenu du plug-in

Scripts vs Applets(3) <html> <!–- COMP519 js03.html 11.10.14 --> <head> <title>Folding Puzzle</title> </head> <body> <script type="text/javascript"> var distanceToSun = 93.3e6*5280*12; var thickness = .002; var foldCount = 0; while (thickness < distanceToSun) { thickness *= 2; foldCount++; } document.write("<p>Number of folds = " + foldCount+"</p>"); </script> </body> </html> (1) Autoriser l’execution des applets java: Chrome/paramètres/java script/ autoriser tous les sites à exécuter JavaScript

Insertion du code JavaScript dans une page HTML(1) • La mise en page en utilisant HTML a la tendance d’être assez statique. • on peut ajouter du comportement dynamique à une page en écrivant un code JavaScript. • Il ya plusieurs façons afin de pouvoir inclure du JavaScript dans une page Web, • La majorité utilisent toutes la balise <script> (sauf une).

Insertion du code JavaScript dans une page HTML(2)

Insertion du code JavaScript dans une page HTML(3) • Méthode1: • Ecrire le code JavaScript dans la page en tant qu’une partie du contenu d'un élément <script>. <script type="text/javascript"> alert('I am a line of JavaScript'); </script>

Insertion du code JavaScript dans une page HTML(7) • Méthode2: • Enregistrer le JavaScript dans un fichier séparé et le référencé en utilisant l’attribut src de l’élément <script>. • <script type="text/javascript" src="alertme.js"></script> • <script type="text/javascript" src="http://ajax.contoso.com/ajax/jQuery/jquery- 1.7.2.js"> </script>

La balise <script> • La balise <script> possède trois attributs: – L’attribut type, qui identifie le langage script à utiliser; (la valeur par défaut est: text/javascript). – L’attribut src qui identifie le fichier script à télécharger(on doit pas l’utiliser en cas ou le scripy fait partie du contenu de la balise <script>). – L’attribut charset, qui identifie le type d’ encodage (for example, utf-8, Shift-JIS) du fichier script externe; (dans le cas ou src n’est pas utilisé l’attribut charset ne doit pas être utilisé).

La balise <noscript> • Parfois pour des raisons de sécurité la fonctionnalité JavaScript est désactivée • Dans ce cas n’importe quelle partie de la page web utilisant JavaScript ne pourra pas s’executer correctement • On peut alerter alors l’utilisateur à propos de ce cas en utilisant la balise <noscript>. • Cet élément permet au browser d’afficher un message demandant l’activation du JavaScript afin que la page soit exécutées correctement. <body> <noscript>This page uses JavaScript. Please enable it in your browser</noscript> … Rest of page … <script src="MyScripts.js"></sc ript> </body>

Les Sorties en JavaScript • JavaScript ne dispose pas de fonctions d'impression ou d'affichage qui sont intégrées (on utilise les API DOM, Console etc.): • JavaScript peut réaliser la fonction d'affichage" de différentes façons: – L'écriture dans une boîte d'alerte, en utilisant window.alert (). – L'écriture dans le fichier HTML en utilisant document.write (). – L'écriture dans un élément HTML, en utilisant innerHTML. – L'écriture dans la console du navigateur, en utilisant console.log ().

Affichage1-Utilisation de window.alert () • On peut utiliser une boîte d'alerte pour afficher des données: <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> document.alert(5 + 6); </script> </body> </html>

Affichage2-Utilisation de Document.write() • Exemple 1: À des fins de test, il est commode d'utiliser: document.write (): <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> document.write(5 + 6); </script> </body> </html>

Affichage3-Utilisation de Document.write () • Exemple2: L’utilisation de Document.write () après un chargement tout-entier d’un document HTML, va supprimer tous les éléments HTML existants de la page: <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <button onclick="document.write(5 + 6)">Try it</button> </body> </html>

Affichage4-Utilisation console.log () • Dans le navigateur, on peut utiliser la méthode console.log () pour afficher des données. • On doit activer le console du navigateur : – On appui sur la touche F12, – et sélectionne "Console" dans le menu. !DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> console.log(5 + 6); </script> </body> </html>

Les kits de développement et leur console • Aujourd'hui, chaque navigateur possède un kit de développement. • Ces kits nous permettent de déboguer efficacement nos codes, que ce soit pour: – détecter des erreurs syntaxiques, – afficher un grand nombre de valeurs dans la console, – consulter le code HTML généré par du code, – analyser des requêtes HTTP (entre autres) effectuées par le navigateur, – mesurer les performances du code, – et bien d'autres choses encore !

Les kits de développement et leur console • Bien, à quoi ressemble un kit de développement (Chrome 34)? • Pour ouvrir le kit de développement, appuyez sur la touche F12

signalisation des erreurs syntaxiques • Créons un code syntaxiquement faux : • // Ici nous créons une fonction JavaScript, avec quelques erreurs de syntaxe. functin test() { alert('Hello !'); • Et incluons-le dans notre code HTML : • <script> functin test() { alert('Hello !'); test(); • </script>

signalisation des erreurs syntaxiques • affichez cette page dans votre navigateur et allez consulter la console, vous devriez voir l'erreur suivante affichée : • le terme SyntaxError qui mentionne une erreur syntaxique, • le texte qui suit n'est qu'une indication sur ce qui a bien pu provoquer cette erreur, • À droite de ce texte, vous pouvez voir le nom du fichier concerné ainsi que la ligne de code, • vous pouvez cliquer dessus et votre navigateur vous amènera directement sur la ligne qui pose problème.

signalisation des erreurs syntaxiques • Tout simplement parce que l'interpréteur JavaScript s'arrête sur la première erreur rencontrée. • Essayez de rectifier l'erreur actuellement indiquée, vous verrez que le navigateur vous affichera alors l'erreur suivante sur Chrome : « Uncaught SyntaxError: Unexpected end of input ».

Try et catch de JavaScript: pour la gestion des erreurs • L‘instruction Try permet de définir un bloc de code qui doit être testé en ce qui concerne lors de son exécution. • L’instruction catch permet de définir un bloc de code à exécuter, en cas où une erreur se produit dans le bloc try. <!DOCTYPE html> <html> <body> <script> try { adddlert("Welcome guest!"); } catch(err) { document.write(err.message); } </script> </body> </html>

Java script Introduction

Contenu connexe

Tendances

Similaire à Java script Introduction

Java script Introduction

Notes de l'éditeur