Apprendre facilement le Javascript

SANTE

Bienvenue ! 21/11/2024 @ 07:29:19 - IP : 3.12.152.102 -

Microsoft

Télécharger

SQL Server 2012

Pinpoint

Visual Studio

Choisir son PC

Developpement

Visual Basic

Langage C

Java

Assembleur

Delphi

SQL

Python

WinDev

Systèmes OS

Ms Dos

Windows 9.x

Windows Nt

Windows Vista

Unix

Linux

Mac Os

Conception Web

PHP

ASP

Html

XmL

Flash Adobe

Director Adobe

WebDev

Java Script

Livre GRATUIT:

Sommaire :

Introduction - Les fonctions - Passer une variable - Protection de pages

Introduction au Javascript

Cours du Javascript pour les débutants

Découvrir JavaScript

Développer et déployer facilement vos sites web

Télécharger gratuitement Office 2013

Héberger votre site web sur des serveurs gratuits

Visual Studio 2013

Télécharger et apprenez gratuitement

Trucs et Astuces

Découvrez Windows 8.1 et télécharger le gratuitement

Le JavaScript est un langage de programmation mis au point par Netscape pour le développement d'applications internet. Le navigateur Netscape depuis sa version 2 sait interpréter le JavaScript. Il en est de même d'internet Explorer depuis sa version 3.

Bien que langage "orienté objet" JavaScript est un langage aisé à mettre en œuvre. Seule difficulté pour un utilisateur du HTML, en JavaScript comme en C ou Java, majuscules et minuscules sont distinguées. Le code JavaScript est inséré directement dans la page HTML entre les balise <SCRIPT> et </SCRIPT> . Il peut aussi être intégré à certaines balises HTML. Il est lu, interprété et exécuté par le navigateur lors du chargement de la page ou bien lors d'un événement généré par l'utilisateur.

Un script peut être placé n'importe où dans la page HTML. On utilisera souvent la balise <HEAD> afin de s'assurer que le script est lu et exécuté dès le chargement de la page.

Les principes :

Le principe de la programmation en JavaScript pourrait être résumé comme suit : Par un langage de scripts on accède aux propriétés des différents objets connus du navigateur afin de lire ou modifier ces propriétés. voici un premier exemple simple où l'on accède pour le modifier, au contenu de la barre d'état (status) de la fenêtre (window) du navigateur :

<font size="1" face="Arial"><HTML> <HEAD> </HEAD> <BODY> <FORM> <INPUT type="button" value="clic" onClick="window.status='regardez en bas' "> </FORM> </BODY> </HTML></font><HTML> <HEAD> </HEAD> <BODY> <FORM> <INPUT type="button" value="clic" onClick="window.status='regardez en bas' "> </FORM> </BODY> </HTML>

Ce script provoque l'affichage du texte entre apostrophes dans la barre d'état du navigateur. onClick est appelé un gestionnaire d'événement.

Ce gestionnaire est intégré à la balise qui défini un bouton dans un formulaire.

Notez l'utilisation des apostrophes délimitant la chaîne à afficher à l'intérieur d'une instruction JavaScript elle-même placée entre double guillemets.

Dans l'exemple suivant, on modifie une image du document simplement en affectant une nouvelle valeur à l'attribut SRC=. et ce lorsque l'utilisateur fait glisser la souris au dessus de l'image. L'événement qui déclenche l'exécution du script (le mouvement de souris) est géré par le gestionnaire onMouseover.

Le gestionnaire onMouseover n'est efficace que lorsque la souris passe au dessus d'un hyperlien. il faut donc transformer l'image en "lien vers rien". On utilise A HREF="#" :

<font size="1" face="Arial"><HTML> <HEAD> </HEAD> <BODY> <A HREF="#" onMouseover=" document.MON_IMAGE.src='Blanc.gif' " onMouseout=" document.MON_IMAGE.src='Noir.gif' "> <IMG src="Noir.gif" name="MON_IMAGE" border=0> </A> </BODY> </HTML></font><HTML> <HEAD> </HEAD> <BODY> <A HREF="#" onMouseover=" document.MON_IMAGE.src='Blanc.gif' " onMouseout=" document.MON_IMAGE.src='Noir.gif' "> <IMG src="Noir.gif" name="MON_IMAGE" border=0> </A> </BODY> </HTML>

Ce script provoque un changement immédiat d'image lors du passage de la souris au dessus de la zone.

Pour nous francophones, il faut lire à l'envers la drôle d'appellation utilisée pour accéder à l'objet : document.MON_IMAGE.src, cela signifie : la propriété source (SRC) de l'image MON_IMAGE faisant partie du document (de la fenêtre active).

Pour accéder facilement à la sources (SRC) de l'image, nous avons pris soin de la nommer (MON_IMAGE) au préalable. Pour modifier maintenant le contenu (propriété value) d'un zone de texte dans un formulaire :

<font size="1" face="Arial"><HTML> <HEAD> </HEAD> <BODY> <FORM> <INPUT type="text" name="MA_ZONE_DE_TEXTE" value="je suis vide" > <br> <INPUT type="button" value="clic" onClick="document.MON_FORMULAIRE.MA_ ZONE_DE_TEXTE.value='regardez ici' " > </FORM> </BODY> </HTML></font><HTML> <HEAD> </HEAD> <BODY> <FORM> <INPUT type="text" name="MA_ZONE_DE_TEXTE" value="je suis vide" > <br> <INPUT type="button" value="clic" onClick="document.MON_FORMULAIRE.MA_ ZONE_DE_TEXTE.value='regardez ici' " > </FORM> </BODY> </HTML>

Encore une fois nous avons pu accéder à la propriété que nous voulions modifier par un chemin arborescent :

La fenêtre (l'objet window qui n'a pas besoin d'être explicitement mentionné : il ne peut s'agir que de lui ! ) contient un document qui contient au moins un formulaire ( MON_FORMULAIRE ) qui possède au moins une zone de saisie ( nommée MA_ZONE_DE_TEXTE ) qui elle-même a une valeur (value).

Pour accéder à ces objets et à leurs propriétés nous les avons baptisés à leur génération. Nous n'y étions pas obligé toutefois. Le navigateur tient à jour en effet une liste pour chaque type d'objet.

document.forms[0] désigne ainsi le premier formulaire du document (l'index commence à zéro).

document.forms[3] fait référence au 4ème formulaire du document, etc.

Au sein d'un formulaire maintenant les éléments peuvent-être désignés par ordre d'apparition :

MON_FORMULAIRE.elements[0] désigne ainsi le premier objet du formulaire nommé MON_FORMULAIRE.

C'est pourquoi, pour accéder au contenu de la zone de texte, nous aurions pu écrire aussi :

document.forms[0].elements[0].value

Toutes les propriétés de tous les objets ne peuvent pas être modifiées et certaines pas tout le temps mais toujours la manière d'y

accéder restera la même. Voici un script permettant de modifier la couleur de fond du document :

<HTML>

<HEAD>

</HEAD>

<BODY bgcolor="#000000">

<FORM>

<INPUT type="button" value="changer La Couleur ?" onClick=<document.bgColor='#ffcc33' ">

</FORM>

</BODY>

</HTML>

Notez bien la différence entre l'option bgcolor intégrée à la balise BODY ( c'est du HTML ) et la propriété bgColor de l'objet

document ( c'est du JavaScript et la casse est impérative ). Bien sûr, il s'agit bien de la même chose.

Devenez membre ZNsoft : La communauté Informatique

Cours - Etudiants - Concours - Congrès - Téléchargement - Formations

_________________________________________________________________________________________________________
Qui sommes-nous ? | Contact | | Inviter un ami | Soutenir ZNsoft | Revue de press | Références
ZNsoft Corporation, Tous Droits Réservés Â© 2002/ 2024
Dernière mise Ã jour : 18/11/2024