Java Script

JavaScript
JavaScript ?
• Langage de programmation orienté objet .
• Peut être inclus dans une page HTML .
• Permet de contrôler dynamiquement le comportement
d’une page web .
• Le code JS est interprété par le navigateur coté client
(Décharger le serveur de quelques opérations)
JavaScript : Le langage
▪ Variables
o Déclaration et assignement
(pas besoin de définir le type ni de citer le mot clé var (optionnel))
Exemples :
a = 3;
b = "hello world" ;
c = 'hello from Mars' ;
a = b;
a = 3*4*3+2;
o Types de données
-Nombre : Entier ou à virgule
-Chaine de caractères (String)
-Booléen (true, false)
-Type null : un mot caractéristique pour indiquer qu'il n'y a pas de données.
▪ Opérations et opérateurs
o Arithmétiques (+, -, *, ^, /)
Exemples :
somme = somme +1;
b = c – d;
somme = somme ^ 5 ;
resultat = (3 + 5) * (23 / 4) – 3;
o Comparaison o Opérateurs logiques
▪ Les instructions
o L’alternative if
o La boucle for
▪ Les instructions
o La boucle while
▪ Les fonctions (function)
o Exemple
▪ Les méthodes
Une méthode est une fonction associée à un objet
(une action que l'on peut faire exécuter à un objet)
o Syntaxe
window.objet1.objet2.methode()
o Exemple
window.document.write()
JavaScript et HTML
▪ Insérer du code JS dans une page HTML
<SCRIPT LANGUAGE="JavaScript">
…code JavaScript…
</SCRIPT>
Ou
<script type="text/javascript">
…..Code JavaScript…
</script>
Ou à partir d’un fichier
<script src="mon_code.js" type="text/javascript"></script>
Ou comme évènement
<a href="#" OnClick="alert('bonjour !')">Click !</a>

JavaScript et HTML
▪ Afficher des messages
alert('bonjour !') ;
▪ Introduire des données

x=prompt('entrer votre nom') ; // rend la valeur sous forme d’une chaine
▪ Les objets JavaScript et HTML
JavaScript et HTML
▪ Les objets
Exemples :
• Pour atteindre une case à cocher à l'intérieur d'un formulaire, la hiérarchie est :
window.document.form.checkbox
• Première case dans le premier formulaire de la page :
window.document.forms[0].checkbox[0]
(Voir les objets et leurs méthodes associées dans le support de cours)

JavaScript et HTML
▪ Les évènements
Les événements sont des actions de l'utilisateur qui vont pouvoir donner lieu à une interactivité.
onEvenement="Action_Javascript_ou_Fonction();"
❑ Exemple d'action au chargement de la page Web :
<html>
<body onLoad="alert('Hello world!');">
</body>
</html>
Exemple d’utilisation avec formulaire
<!DOCTYPE html>
<html>
<head>
function testResults(form) {
var TestVar = form.elements['champ'].value;
alert("Vous avez tapé : " + TestVar );
}
</script>
</head>
<body>
<form id="monformulaire" method="get" action="">
<p>Saisir quelque chose dans le champ :<br>
<input type="text" id="champ" /><br>
<input type="button" id="bouton" value="Click " onClick="testResults(this.form)" />
</p>
</form>
</body>
</html>
Envoyer le formulaire uniquement si le nom d'utilisateur n'est pas vide
<html>
<body>
<form onSubmit="if(document.getElementById('login').value == '')

{ return false; }
else{ return true; }">
Nom d'utilisateur : <input type="text" id="login"/><br/>

Mot de passe : <input type="text" id="password"/><br/>
<input type="submit"/>
</form>
</body>
</html>
Envoyer le formulaire uniquement si le nom d'utilisateur n'est pas vide + Avertir l’utilisateur
<html>
<head>
function checkForm()
{
if(document.getElementById("login").value == "")
{
alert("Formulaire invalide : le nom d'utilisateur est vide");
return false;
}
else
{
alert("Le formulaire est valide");
return true;
}
}
</script>
</head>
<body>
<form onSubmit="return checkForm();">
Nom d'utilisateur : <input type="text" id="login"/><br/>
Mot de passe : <input type="password" id="password"/><br/>
<input type="submit" value="Envoyer"/>
</form>
</body>
</html>
Document Object Model
DOM
▪ DOM est un standard W3C
▪ DOM est une plate-forme et une interface permettent aux
programmes et aux scripts d'accéder et de mettre à jour de
manière dynamique le contenu, la structure et le style d'un
document
▪ Trois parties DOM :
o Core DOM : Modèle standard pour tout type de documents
o XML DOM : Modèle standard pour les documents XML
o HTML DOM : Modèle standard pour les documents HTML
HTML DOM ?
▪ Le DOM HTML est un modèle d'objet standard et une
interface de programmation pour HTML. Il définit:
▪ Les éléments HTML en tant qu'objets
▪ Les propriétés de tous les éléments HTML
▪ Les méthodes pour accéder à tous les éléments HTML
▪ Les événements pour tous les éléments HTML
HTML DOM est un standard permettant d’accéder, de modifier, d'ajouter ou de

supprimer des éléments HTML.
Hiérarchie DOM
Hiérarchie DOM - Exemple
Scripts DOM
1. Accès aux éléments
o getElementById
o getElementsByTagName
o getElementsByClassName
o querySelector
o querySelectorAll
Accès aux éléments
1. getElementById
2. getElementsByTagName
3. getElementsByClassName
4. querySelector & querySelectorAll
Scripts DOM
2. Accès au contenu des éléments
o innerHTML
o textContent
o title
o body
o links
Accès au contenu des éléments
1. innerHTML
2. textContent
3. title & body & link
Scripts DOM
2. Modifier le contenu des éléments
o Contenu textuel : innerHTML
o Contenu d’un attribut : (href, className, setAttribute)
o Le style css d’un élément : style

Modifier le contenu des éléments
1. Contenu textuel : innerHTML
o Modifier le contenu
1. Contenu textuel : innerHTML
o Rajouter du contenu
2. Modifer le contenu d’un attribut
3. Modifer le style css d’un élément
Scripts DOM
3. Ajout / Insérer des éléments
o Créer un élémént : createElement
o Créer du texte : createTextNode
o Insérer à la queue d’un élément : appendChild
o Insérer avant un élément : insertBefore

Scripts DOM
o Insérer à la queue
Scripts DOM
o Insérer dans un emplacement donné
Scripts DOM
3. Modifier ou supprimer des éléments
o Supprimer un élément : removeChild
o Remplacer un élément par un autre : replaceChild

Scripts DOM
o Supprimer un élément : removeChild
Scripts DOM
o Remplacer un élément : replaceChild
Framework JS
o JQuery
o AngularJS
o NodeJS
o ….

Java Script

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Java Script

Transféré par

Droits d'auteur :

Formats disponibles

JavaScript

<script src="mon_code.js" type="text/javascript"></script>

<a href="#" OnClick="alert('bonjour !')">Click !</a>

▪ Introduire des données

• Première case dans le premier formulaire de la page :

(Voir les objets et leurs méthodes associées dans le support de cours)

<form onSubmit="if(document.getElementById('login').value == '')

Nom d'utilisateur : <input type="text" id="login"/><br/>

HTML DOM est un standard permettant d’accéder, de modifier, d'ajouter ou de

1. Accès aux éléments

2. Accès au contenu des éléments

o Contenu textuel : innerHTML

o Contenu d’un attribut : (href, className, setAttribute)

o Le style css d’un élément : style

1. Contenu textuel : innerHTML

1. Contenu textuel : innerHTML

o Créer un élémént : createElement

o Créer du texte : createTextNode

o Insérer à la queue d’un élément : appendChild

o Insérer avant un élément : insertBefore

o Supprimer un élément : removeChild

o Remplacer un élément par un autre : replaceChild

Vous aimerez peut-être aussi