Des instructions JavaScript peuvent également servir à générer une partie d'un document HTML. Il suffit pour cela d'invoquer la méthode "write" de l'objet prédéfini document.
Document.write("Partie a afficher à la ligne courante");
Le format ".js"
Vous pouvez, par exemple pour les fonctions répétées, mettre notre code Javascript dans un fichier séparé qui devra avoir l'extension de fichier ".js" et surtout ne doit contenir aucune balise même pas celle de déclaration de script.
Exemple :
<script language="Javascript" src="monFichier.js"></script>
Quand on fait référence à un fichier séparé on ne peut pas faire référence dans cette même balise au contenu du fichier, il faut fermer la balise ou l'on joint le fichier et ouvrir une autre balise de script pour y faire référence.
Exemple :
<script language ="Javascript" src="monFichier.js"></script>
<script>appel des instructions se trouvant dans "monFichier.js"</script>
Nous ne pouvons pas non plus mettre du code entre ces deux balises car il ne sera pas interpreté par le navigateur, pour ce cas, à nouveau, il faudra fermer la balise de script qui appel le fichier et ensuite réouvrir une balise de script pour mettre notre nouveau code.
Exemple :
<script language ="Javascript" src="monFichier.js"></script>
<script> Mon code supplémentaire à mettre;</script>
Les éléments de formulaire
Pour les instructions Javascript se trouvant dans des éléments de formulaire comme par exemple, un bouton, il ne faut pas mettre les balises de script, il faut directement mettre le code dans l'évenement qui le gérera.
Exemple :
<input type="button" name="monBouton" onclick="mes instructions Javascript">
Si ces instructions doivent contenir du texte il faut les encadrer par des simples cotes (') et surtout pas par des doubles cotes car cela provoquerait une erreur avec le code HTML.
Exemple :
<input type="button" name="monBouton" onclick="prompt('Mon Message en Javascript','')"> Pour les boîtes de dialogues en Javascript prompt('') il faut rentrer deux paramètres :
prompt('question','valeur par défaut');
Si vous voulez que la valeur par défaut soit vide il faut quand même mettre les simples côtes :
prompt('question','');
Si vous voulez afficher le contenu d'une variable dans un prompt() il faut mettre le nom de la variable sans les simples côtes.
Exemple :
<script>Var texte=''Mon texte à afficher'' prompt(MaVariable)</script>
Rajouter du texte dans une page
Pour rajouter du texte dans une page HTML avec Javascript il faut se servir de document.write(''). Il est possible d'insérer des balises HTML dans un document.write('') pour passer à la ligne par exemple.
Exemple :
document.write('ma première ligne<br>ma deuxième ligne')
ou
document.write('ma première ligne') ou encore
document.write('<br>ma deuxième ligne')
Pour qu'un document.write('') s'affiche dans la page ou on l'appel il faut d'abord préparer sa place en HTML, par exemple, appel d'un prompt('','') à partir d'un bouton de formulaire et l'on veut que la réponse s'affiche sur la ligne en dessous du bouton. Pour cela il faut aller juste après la fermeture de la balise </form> et y inclure une balise de paragraphe et lui donner impérativement une valeur dans son identifiant, ensuite dans l'événement onClick du bouton, insérer les instructions Javascript.
Exemple :
<input type="button" name="monBouton" onclick="vReponse=prompt('Quel est votre âge','29');idPara,innerHTML=vReponse">
</form>
<p id="idPara"></p>
Dans l'exemple si dessus on crée notre paragraphe que l'on nomme idPara et ensuite dans l'évenement onCLick on déclare une variable vReponse qui contiendra la valeur de la réponse à la question (29 par défaut) on termine l'instruction par un ";" pour continuer avec l'instruction d'affichage dans l'emplacement que nous avons créé on prend l'id que nous avons donné à notre balise de paragraphe avec la méthode .innerHTML et on lui passe notre variable comme valeur: idPara.innerHTML=vReponse.
Créer des tableaux
pour créer un nouveau tableau il faut utiliser la fonction new Array(). Vous pouvez ensuite ajouter des valeurs dans ce tableau à partir de leurs index, à savoir que les index commencent toujours à 0.
Exemple :
<script> vTab=new Array();
vTab[0]=1;
vTab[1]=''coucou'';
vTab[4]=True;
</script>
Dans l'exemple ci-dessus il y a en tout 5 index car pour les index 2, et 3 les valeurs sont égales à vides mais les index sont tout de même créer implicitement. On peut ajouter les valeurs directement dans la création du tableau.
Exemple :
<script>vTab=new Array(1,True,'Décembre')</script> qui auront pour index : 0,1,2
L'objet Date()
Pour créer une date il faut utiliser l'objet New Date(), vous pouvez lui passer une date par défaut en paramètre.
Exemple :
date1= New Date(2006,11,05)
il faut la mettre au format US (aaaa,mm,jj) et surtout savoir que les mois commencent à 0 c'est à dire que Janvier=0, Février=1 ... Décembre=11
Créer ses objets
Vous pouvez créer vos propres objets, pour cela il faut les définir dans une fonction et déclarer leur propriétés et méthodes, par exemple créez un objet qui s'appellera stylo et définissez lui 2 propriétés : sa couleur, sa taille de trait et sa méthode qui sera donc : écrire.
il est recommandé de les créer dans un fichier ".js" et de les inclures dans les pages HTML afin de ne pas alourdir les pages HTML.
Exemple :
// Création de l'objet stylo par la fonction
function Stylo (couleur,taille_trait)
{
// Création des propriétés et de la méthode de l'objet
this.couleur=couleur;
this.taille=taille_trait;
this.Ecrire=Ecrire;
}
// déclaration de la méthode
function Ecrire (msg)
{
// définition de la méthode de l'objet.
return msg.fontcolor(this.couleur).fontsize(this.taille)
}
Notre objet stylo est maintenant créé avec ses deux propriétés et sa méthode pour l'exploiter.
Exemple :
Voir le fichier stylo.html (en cours de préparation)
Les vérifications de formulaires
Quand on vérifie un formulaire en cliquant sur le bouton Envoyer la vérification se fait mais le formulaire part, même si il contenait des erreurs. Pour éviter cela il faut rajouter la propriété onSubmit=''return true ou false'' dans la balise <form> et c'est à partir de cette propriété qu'il faut appeler la fonction de vérification du formulaire.
Exemple :
<form name=''form1'' action =''nomFichier.html'' method=''POST'' onSubmit=''return verif_form(this)''>
On lance la fonction de recherche par verif_form() qui retournera la valeur "true" ou "false". Si "false" est renvoyé le formulaire ne sera pas envoyé, si c'est "true" le formulaire sera envoyé. Nous avons mis "this" dans la propriété de la fonction car on l'appelle depuis le form sinon il aurait fallu lui mettre le nom du form c'est à dire : form1.
Les zones de listes déroulantes
Pour récupérer le texte et non la valeur de l'objet pointé il faut d'abord rechercher l'index de la selection et ensuite récupérer son texte.
Exemple :
<form name=''frm''>
<select name=''maliste''>
<option value= ''red''>rouge</option>
<option value=''blue''>bleu</option>
</select>
</form>
<script>frm.maliste.options[frm.maliste.selectedIndex].text</script>
on pointe le formulaire et la liste par leurs identifiants, on utilise la propriété .options[] qui crée un tableau avec toutes les options de la liste et à l'intérieur on recherche l'index de la selection par la méthode .selectedIndex et on récupere le texte de cette sélection par la propriété .text
Les cookies
On peut créer et stocker des cookies en Javascript, il est recommandé de ne pas les créer dans un fichier ".js" mais de les inclure dans les pages concernées. On crée un nouveau cookie avec cette méthode :
Cookie:nomCookie=valeur;path=chemin;expire=dates d'expiration au format GMT
Il faut penser à enlever tous les caractères spéciaux et espaces en se servant de la méthode escape(valeur) et sont contraire unescape(valeur)
Exemple :
varCook = Cookie:MonCookie=escape(ma valeur stocké);toGMTString()
|
HTML, Javascript, VbScript, Asp, Asp.net, Php et référencement.
JavaScript
