[PDF] [PDF] TP Javascript - IGM TP Javascript Master de Bioinformatique





Previous PDF Next PDF



TP TIC (J S) TP TIC (J S)

TP N°8 (Les formulaires et la gestion des événements en JS):. Objectifs Corriger". onClick="reponse(form4)">. </FORM>. </BODY>. </HTML>. Constatation : Dans ...



FASCICULE DES TRAVAUX PRATIQUES FASCICULE DES TRAVAUX PRATIQUES

TP n°2 : Syntaxes de base du langage JavaScript. TP n°3 : Objets prédéfinis du JS. TP n°4 : Evénements et Formulaires du JS. TP n°5 : Le DOM en JavaScript. TP n 



tp-javascript.pdf tp-javascript.pdf

10 févr. 2013 Cette vérification peut donc se faire côté client par le langage Javascript. Une fois les données du formulaire contrôlées (toutes les ...



JavaScript - Travaux Pratiques 1

Écrire une page XHTML comportant un mini-formulaire composé d'un champ de saisie et d'un <title>Exo 1 TP 1</ title>. <meta http−equiv=”content−type” content ...



Cours PHP Accéléré

27 juin 2023 3.47 Feuilles de TD et TP BUT2 informatique . ... Les vérifications dans les formulaires HTML5 et en JavaScript sont valables uniquement côté.



TP 5 – Programmation Web avec PHP - Correction

print "<a href='javascript:history.back()'>Essayez à nouveau</a> Afficher ensuite un formulaire permettant de saisir le nom et le prénom de l'utilisateur.



TP 3 : Formulaires

JavaScript. Question 1 : Créer l'en-tête HTML le titre (avec une balise h1) et la phrase de bas de page. Question 2 : Créer le formulaire avec la balise <form> ...



TP Javascript

NB : Commencez par récupérer l'archive du TP2. Cette archive contient des images utilisées dans la suite du TP. Exercice 1 : Gestion d'événements en Javascript.



FICHE 1. Les bases du JavaScript

Deux événements spécifiques à <form> : submit. Envoyer le formulaire reset. Réinitialiser le formulaire. JavaScript <title>TP : Un système d'auto- complétion ...



TP 3 : Formulaires

JavaScript. Question 1 : Créer l'en-tête HTML le titre (avec une balise h1) et la phrase de bas de page. Question 2 : Créer le formulaire avec la balise <form> ...



tp-javascript.pdf

TP Javascript. © 2013 tv <tvaira@free.fr> - v.1.0 Exercice n°1.3 : code javascript dans des balises HTML . ... Séquence n°3 : vérification de formulaire.



PWB – TP JS

Ecrivez un script Javascript «en ligne» c'est à dire inclus dans le corps de Javascript permettant la copie d'un champs texte d'un formulaire vers.



FASCICULE DES TRAVAUX PRATIQUES

TP n°4 : Evénements et Formulaires du JS. TP n°5 : Le DOM en JavaScript. TP n°6 : Langage XML. TP n°7 : La validation XML avec DTD.



Cours PHP Accéléré

12 juil. 2022 Tuto PHP en accéléré en pdf ... doc php (http ://php.net/manual/fr/) ... Les vérifications dans les formulaires HTML5 et en JavaScript sont ...



JavaScript - Travaux Pratiques 1

Pour associer du code JavaScript placé dans un fichier Écrire une page XHTML comportant un mini-formulaire composé d'un champ de saisie et d'un.



tp-javascript.pdf

TP Javascript. Master de Bioinformatique. Université de Rouen. 1 Exercice. Voici le listing d'un fichier HTML contenant du code javascript :.



TP 5 – Programmation Web avec PHP - Correction

<a href="javascript:history.back()">Essayez à nouveau</a>. </body>. </html> si le script est appelé sans paramètre il créera le formulaire.



liste fonction javascript

[PDF] JAVASCRIPT igm univ mlv ~fpetit download langageJS pdf. Download. Javascript 14. tp javascript formulaire corrigé pdf. 15. cours javascript open ...



FICHE 1. Les bases du JavaScript

Exercice 3. Passez le code HTML en script : <div id="divTP4">. <form enctype=" 



Correction Examen

DUT MMI 1`ere année - Programmation Web avec JavaScript ". Correction Examen. – Q.C.M individuel sur feuille (aucun document autorisé) durée : 20 minutes.



tp javascript formulaire corrigé pdf - PDFprof

PDF Télécharger TP Javascript - Free tp javascript formulaire corrigé pdf Correction TD Patrick Poulingeas JavaScript Or nous avons ici la var resultat 



[PDF] TP Javascript - Free

10 fév 2013 · Reprendre le formulaire réalisé dans le TP HTML (contact html) et assurer son contrôle en javascript : on n'acceptera pas les champs non remplis 



[PDF] JavaScript - Travaux Pratiques 1

1 Écrivez une page HTML contenant un formulaire permettant d'obtenir la valeur absolue d'un nombre donné par l'utilisateur Le formulaire comprendra un 



Exercices Corrigés en JavaScript PDF - UnivScience

11 août 2019 · Javascript Cours et Exercices Corrigés PDF Problèmes résolus de JavaScript JavaScript (JS généralement abrégé) est un langage de programmation 



Exercice HTML corrigé formulaire HTML avec fonction Javascript

Exercice HTML corrigé formulaire HTML avec fonction Javascript tutoriel guide de travaux pratiques en pdf Ecrire le code permettant de réaliser le 





Série D-Exercices Corrigés en Javascript-Correction PDF - Scribd

Série D-'Exercices Corrigés en Javascript-Correction Téléchargez comme PDF TXT ou lisez en ligne sur Scribd Tp n°3 HTML 5 CSS3 4eme STI



[PDF] TP Javascript - IGM

TP Javascript Master de Bioinformatique Université de Rouen 1 Exercice Voici le listing d'un fichier HTML contenant du code javascript :



[PDF] TP 3 : Formulaires - LORIA

Dans cet exercice il n'est demandé ni d'utiliser CSS ni d'utiliser JavaScript Question 1 : Créer l'en-tête HTML le titre (avec une balise h1) et la phrase 



[PDF] PWB – TP JS - Rennes Login

A l'aide des formulaires et de fonctions Javascript réalisez un QCM dont le résultat (le nombre de réponses correctes) sera affiché dans un champs texte en bas 

:
[PDF] TP Javascript - IGM

TP Javascript

©2013 tv - v.1.0

Sommaire

Séquence n°1 : les bases2

Insertion de code javascript

2

Exercice n°1.1 : code javascript interne au document. . . . . . . . . . . . . . . . . . . . . . . 2

Exercice n°1.2 : code javascript externe au document. . . . . . . . . . . . . . . . . . . . . . . 2

Exercice n°1.3 : code javascript dans des balises HTML. . . . . . . . . . . . . . . . . . . . . . 2

Exercice n°1.4 : gestionnaire d"évènement en javascript. . . . . . . . . . . . . . . . . . . . . . 3

Exercice n°1.5 : les fonctions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Conclusion

3 Séquence n°2 : interactivité côté client4

Exercice n°2.1 : changement d"image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Exercice n°2.2 : modification du document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Exercice n°2.3 : fenêtre popup. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Conclusion

6 Séquence n°3 : vérification de formulaire6

Conclusion

7 Les objectifs de ce tp sont d"être capable d"intégrer des scripts clients dans un site ou une page en respectant les bonnes pratiques. 1 SÉQUENCE N°1 : LES BASESSéquence n°1 : les bases

Insertion de code javascript

Il est possible d"insérer du codejavascriptde plusieurs manières dans une page HTML : in terneau do cumenten utilisan tl"élémen tSCRIPT

-externe au document : le codejavascriptse trouve dans un fichier séparé portant le plus souvent

l"extension.js. On utilise l"attributSRCde l"élémentSCRIPTpour préciser le chemin du fichier du

script.

dire ctementdans des élémen tsHTML en précisan tle mot clé javascript :une fonction js

Exercice n°1.1 : code javascript interne au document

Question 1.

Créer le document à partir du code source fourni ci-dessous. Quelle est l"extension à donner

à ce document?Exercice 1 JavaScriptdocument.write("

Du texte écrit en javascript.

");

alert ("Hello world ! en javascript");

Du texte écrit enHTML.

Exercice 1

Question 2.

Tester dans un navigateur. Pourquoi le texte écrit en HTML ne s"affiche-t-il pas tout de suite? Question 3.Comment appelle-t-on le type de boîte de dialogue utilisé dans cet exemple? Question 4.Que se passe-t-il si on place le codejavascriptaprès le texte écrit en HTML? Exercice n°1.2 : code javascript externe au document

Question 5.

Reprendre l"exemple précédent mais en plaçant le script dans un fichier externescript1.js.

Tester dans un navigateur.

Exercice n°1.3 : code javascript dans des balises HTML

Question 6.

Afficher une boîte de dialogue modale lorsqu"on clique sur un lien. Le texte à afficher sera : " Vous venez de cliquer sur un lien! ». ??? ???? ???? ?? ? ? ??? ?? ??? ???? ????%20 ??? ???? escape()??unescape()??TP Javascript 2 /7 ©2013 tv SÉQUENCE N°1 : LES BASESExercice n°1.4 : gestionnaire d"évènement en javascript

Question 7.Créer le document à partir du code source fourni ci-dessous.Exercice 4 JavaScript

Je suis undocument HTML.

Exercice 4

Question 8.Quel est le nom de l"évènement géré ici par le codejavascript? Tester dans un navigateur.

Que se passe-t-il lors du chargement de la page dans un navigateur?

Question 9.

Modifier l"exemple précédent pour qu"une boîte de dialogue modale affiche " À bientôt! »

lorsqu"on quitte la page. Quel est alors le nom de l"évènement à gérer? Tester dans un navigateur le

changement produit.

Exercice n°1.5 : les fonctions

On vous demande de créer un document qui affiche une boîte de dialogue de saisie avec le message

suivant : " Entrez une année : ". ??? ? ?? ??window.prompt(texte, texte_par_défaut) ??? ?? ???

Le script testera ensuite si l"annéeyyyysaisie par l"utilisateur est une année bissextile. Pour cela, vous

devez écrire une fonctionisAnneeBissextile()qui : re çoiten argumen tl"année à tester et re tournevrai ( true) dans le cas où l"année est bissextile sinon faux (false).

Cela se termine par l"affichage dans la page HTML du résultat du test : "yyyyest une année bissextile"

ou "yyyyn"est pas une année bissextile". Question 10.Éditer le document HTML et le script dans un fichier externescript2.js. Tester dans un navigateur.

Conclusion

Le codejavascripts"insère dans un document HTML et s"exécute côté client.TP Javascript 3 /7 ©2013 tv

SÉQUENCE N°2 : INTERACTIVITÉ CÔTÉ CLIENTSéquence n°2 : interactivité côté client

Exercice n°2.1 : changement d"imagePlacer une image dans un document HTML. Vous pouvez utiliser votre pagecontact.htmlou créer un

nouveau document pour faire cet exercice.

Il vous faut installer un gestionnaire d"événement (mouseover) qui permet de changer l"image lorsque

le pointeur de la souris se trouve sur celle-ci. On revient sur l"image d"origine lorsque le pointeur de la

souris se déplace hors de l"image (mouseout).

Pour rendre cette fonctionnalité ré-utilisable, le gestionnaire d"événement sera réalisé par une seule et

unique fonctionchangerImage()qui recevra en arguments l"idde l"élément et l"image à afficher.

?? ?? ??getElementById()???? ?? ? ?? ?? ???? ??? ??? ????ID?? ???? ???? ??

Question 11.

Écrire le document HTML et le codejavascriptpermettant de réaliser le changement d"image interactif.TP Javascript 4 /7 ©2013 tv

SÉQUENCE N°2 : INTERACTIVITÉ CÔTÉ CLIENTExercice n°2.2 : modification du documentReprendre l"exercice précédent et permettre l"affichage dans le document HTML des informations associées

aux deux images lorsque l"on déplace le pointeur de la souris sur celles-ci :

sur l"image du téléphone : on affichera dans un paragraphe (

), situé dessous, le message suivant

" Appelez-nous au 06 06 06 06 pour toutes vos demandes. »

sur l"image du courrier : on affichera dans un paragraphe (

), situé dessous, le message suivant

" Envoyez-nous un courriel à contact[at]sfcv.com, nous vous répondrons immédiatement. » Cela donnera par exemple pour l"image du téléphone :

Pour insérer dynamiquement le paragraphe dans la documentcontact.html, on prévoira un élément

DIVen n"oubliant pas de préciser son attributid:

 

Le gestionnaire d"événements (mouseoveretmouseout) de l"image concernée sera réalisé par une seule et

unique fonctionafficherInformation()qui recevra en arguments l"idde l"élémentDIVet le message

à insérer.

??? ?? ??? ?? ????innerHTML???? ?? ???? ?? ?? ???? ???? ???? ????

Question 12.

Écrire le document HTML et le codejavascriptpermettant de réaliser l"affichage dynamique de texte.TP Javascript 5 /7 ©2013 tv SÉQUENCE N°3 : VÉRIFICATION DE FORMULAIREExercice n°2.3 : fenêtre popup

Question 13.Écrire un scriptexo-2-3.jsqui permet de créer, au chargement de la pageexo-2-3.html,

une nouvelle fenêtre (window.open()) qui se fermera automatiquement (window.close()) au bout de 3 secondes. ??window?? ??? ???setTimeout()? ?? ?setTimeout("toto()", 100)? ???? ?? ???toto()? ?? ?? ???? ?? ??? ???

Conclusion

Le codejavascriptpermet d"améliorer l"interactivité côté client. Séquence n°3 : vérification de formulaire

L"objectif principal de cette étape est d"assurer l"intégrité des données envoyées par les formulaires vers le

serveur. En effet, il serait inutile de surcharger le serveur avec l"envoi de données manquantes, incomplètes

ou incorrectes. Cette vérification peut donc se faire côté client par le langageJavascript.

Une fois les données du formulaire contrôlées (toutes les informations sont présentes et cohérentes),

réaliser son envoi parmailsous forme d"un texte simple : Modifier le bouton "Envoyer" dans la pagecontact.htmlde telle manière que : le formulaire ne soit plus envoyé automatiquement (il faut donc changer letype="submit"en type="button")

lor squ"onclique sur le b outon,la fonction v erifierFormulaire()soit app elée: function verifierFormulaire()

var formulaire = document .getElementById("demande") ; var valid = 1; vérifications Le formulaire est il validé if(valid == 1){ Alors envoyer le formulaire appel de la méthode submit et retourner true else Sinon retourner false Squelette de la fonction verifierFormulaire()TP Javascript 6 /7 ©2013 tv

SÉQUENCE N°3 : VÉRIFICATION DE FORMULAIREQuestion 14.Reprendre le formulaire réalisé dans le TP HTML (contact.html) et assurer son contrôle

enjavascript: on n"acceptera pas les champs non remplis ou les choix ou options non renseignés (cf.

exemples).Question 15. Bonus : Vous pouvez ajouter les contrôles ci-dessous pour améliorer l"interactivité avec le client. Si aucune civilité n"a été c hoisie,fixer "Monsieur" par défaut

Si la case à cocher "je souhaite recevoir la newslettre" est activée alors donner le focus à la saisie de

l"adresse email

Si il y a saisie d"a dresseemail alors activ erautomatiquemen tla case à co cher"je souhaite recev oirla

newslettre"

Conclusion

Le codejavascriptpermet de réaliser des contrôles côté client.TP Javascript 7 /7 ©2013 tv

quotesdbs_dbs2.pdfusesText_3
[PDF] le maroc et les droits de l homme

[PDF] droit humain maroc

[PDF] examen javascript corrigé

[PDF] conjoncture économique mondiale 2016

[PDF] economie mondiale classement

[PDF] economie mondiale pdf

[PDF] l'économie mondiale 2017 pdf

[PDF] economie mondiale 2017 classement

[PDF] économie mondiale actuelle

[PDF] perspectives économiques mondiales 2017

[PDF] projet jazz cycle 2

[PDF] situation initiale élément perturbateur situation finale

[PDF] fiche jazz cp

[PDF] histoire du jazz cm1

[PDF] situation initiale du conte le petit chaperon rouge