Activité 3 : HTML, CSS et JavaScript

ericlgg

l'essentiel du cours

Activité sur Capytale

Ressource HTML

Ressource CSS

Ressource JS

Ressource HTML

Tester son html

Tester son html

Activité JAVA SCRIPT

I] Premiers exemples d’utilisation de JavaScript : Fonction « alert »

Code JavaScript dans un code HTML

Affichage d’un message avec la fonction « alert »

Code JavaScript dans un fichier séparé du code HTML

Affichage d’un message avec la fonction « alert » – Javascript externe

Interaction avec utilisateur dans une page Web :

Associer à un bouton un évènement qui permet l’affichage d’ un message

Utilisation de onClick et de querySelector

 

Modifier les élément d’une page Web

Utilisation de la méthode « style »

Changer le texte d’une balise : propriété innerHTML

Utiliser des champs de saisie : propriété value

Changer le texte d’un paragraphe

Les boucles

La boucle for

La boucle while

Tester la validité d’un identifiant

Formulaires

Création du formulaire avec la balise <form> et la méthode GET  

Validation des données du formulaire

Création d’un formulaire

 

Créez votre propre formulaire

Mini projets

Programmation d’un convertisseur décimal,  binaire, hexadécimal  avec JavaScript

Jeu de Morpion 

Je m'exerce ...

Création d'un site WEB 1/5

Création d'un site WEB 2/5

Création d'un site WEB 3/5

Création d'un site WEB 4/5

Création d'un site WEB 5/5

Requêtes GET, POST et formulaires

1.1. La méthode GET⚓︎

Considérons le formulaire suivant, inclus dans une page html ouverte dans le navigateur du client :

 

Le mot de passe est :
<form action= »cible2.php » method= »get »>
<p>
<input type= »password » name= »pass » />
<input type= »submit » value= »Valider » />
</p>
</form>

Aperçu : 

TEST

Rendez-vous sur la page http://glassus1.free.fr/ex_get.html et testez un mot de passe.

Observez attentivement l’url de la page sur laquelle vous êtes arrivés. Que remarquez-vous ?

1.2. La méthode POST

Dans notre code de formulaire du 1.1, modifions l’attribut method, auparavant égal à "get". Passons-le égal à "post" :

Le mot de passe est :
<form action="cible2.php" method="post">
<p>
    <input type="password" name="pass" /> 
    <input type="submit" value="Valider" />
</p>
</form>

 

Aperçu : 

Test

Rendez-vous sur la pagehttp://glassus1.free.fr/ex_post.html et testez un mot de passe.

Observez attentivement l’url de la page sur laquelle vous êtes arrivés. Que remarquez-vous ?

Synthèse du cours