Cours JS Part1

Cours: Développement Web

Enseignants : Mme Z. CHANNOUF

Année universitaire :2014-2015

Références : Cours Web – Javascript, Thierry Vaira, TS IRIS Avignon.

https://developer.mozilla.org/en-US/docs/Web/JavaScript

http://www.grappa.univ-lille3.fr/~torre/Enseignement/Cours/javascript.php

http://www.toutjavascript.com

http://www.w3schools.com/js/

Sommaire

Introduction à JavaScript

Où placer le code Javascript

Types, variables et opérateurs

Possibilités d’affichage en Javascript

Structures de contrôle

Fonctions en Javascript

Classe et objet

Événements en JavaScript

Types de langages Deux types:

Un langage client-side : les scripts sont exécutés par le navigateur chez l'internaute (le client).

Un langage server-side : les scripts sont exécutés par le serveur Web. C'est le cas des langages comme le PHP.

Un script server-side va s'occuper de « créer » la page Web qui sera envoyée au navigateur. Ce dernier va alors afficher la page puis exécuter les scripts client-side tel que le JavaScript.

JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives côté client.

C’est un langage orienté objet inspiré de nombreux langages dont Java mais il reste très différent de celui-ci.

Le langage a été créé en 1995 par Brendan Eich, membre de la fondation Mozilla, pour le compte de Netscape

Communications Corporation.

Pourquoi JavaScript

Simple et interprétable par les langages de programmation

Permet une interactivité au Web

Contrôle des valeurs saisies dans un formulaire

Exécution lors de la survenue d’événement (chargement, utilisation de la souris, etc.)

Les scripts populaires sont: Javascript, VBScript, JScript, etc

JavaScript ≠ Java

◦ java : véritable langage de programmation, compilé,

code protégé, typage fort, objet (classes, instances,

héritage..)

◦ JavaScript : facile à utiliser, typage faible, intégré dans

html, interprété, basé sur les objets html

Où placer le code Javascript ?

Code Javascript placé dans la page HTML :

Importation d'un code Javascript externe (dans le fichier

moncode.js) :

Cas des événements : il faut simplement insérer le code à l’intérieur de la

balise HTML comme un attribut de celle-ci.

Où placer le code Javascript ?

<A HREF="javascript:message()">une fonction js</A>

Cas des liens HREF : on peut insérer du code javascript dans un lien href

en précisant le mot clé javascript :

Dans certains cas, l’usage de la balise <SCRIPT> n’est pas obligatoire :

Utilisation de la console de debug JavaScript des navigateurs

Très pratiques pour tester la syntaxe JavaScript

Les variables Pas de déclaration de types

Utiliser var pour déclarer les variables (optionnel )

Noms de variables doivent débuter avec une lettre ou un tiret "_ “ et ils sont sensibles à la casse Exemples :

var a;

var ceciEstUneVariable;

var _et_ceci_aussi;

var mix12trois;

var 2three4five; // Invalide , une variable ne peut commencer par un chiffre !

var a = 1

var v1, v2, v3 = 'hello', v4 = 4, v5;

// Attentions aux majuscules/minuscules

var case_matters = 'lower';

var CASE_MATTERS = 'upper';

Types, Variables et Opérateurs

Arithmétiques : + - / * ++ --

Comparaison: < <= == != >= >

Concaténation des chaînes : +

Assignation : =

Spéciales:

◦ == et != convertissent les opérandes de même

type avant la comparaison

◦ === et !== considèrent ses opérandes inégales si

leurs types sont différents

Les opérateurs

>>> 1 + 2

>>> var a = 1;

>>> var b = 2;

>>> a + 1

>>> b + 2

>>> a + b

>>> var c = a + b;

>>> var a = 123;

var b = a++;

>>> var a = 123;

var b = ++a;

>>> var a = 123;

var b = a--;

Les opérateurs

Symbole Description Exemple

== Egalité avec

conversion de type

>>> 1 == 1

>>> 1 == 2

>>> 1 == '1‘

=== Egalité sans

conversion de type

>>> 1 === '1‘

>>> 1 === 1

Les opérateurs

Les types

String, Number, Boolean, NaN, Infinity, undefined et null

NaN est le sigle de "Not a Number",

INFINITY est un nombre qui est trop grand (ou trop petit)

INFINITY, NEGATIVE_INFINITY ou POSIVE_INFINITY

UNDEFINED pour créer une variable sans lui donner une valeur,

elle est de ce type jusqu'à temps qu'on lui donne une valeur

NULL sert à spécifier une variable sans valeur

typeof : renvoie un objet de stype String, qui peut valoir

"number", "string", "boolean", "undefined", "object", ou

"function"

l'opérateur typeof

>>> var n0;

>>>typeof n0

« undefined »

>>>var n1 = 1234;

>>> typeof n1;

« number »

>>> var n2 = 1.23;

>>> typeof n2;

« number »

>>> typeof 123;

« number »

>>> var s = "quelques caractères";

>>> typeof s;

« string »

>>>var n3= 2e+3 // nombre avec exposant

>>> typeof n3;

« number »

>>> var n4 = 6 / 0;

>>> n4

Infinity

>>> typeof n4

« number »

Possibilités d’affichage en JavaScript

On peut afficher les données de différentes façons:

L'écriture dans une boîte d'alerte, en utilisant window.alert () .

L'écriture dans la sortie HTML en utilisant document.write () .

L'écriture dans un élément HTML, en utilisant innerHTML .

L'écriture dans la console de navigateur, en utilisant console.log () .

window.alert ()

Vous pouvez utiliser une boîte d'alerte pour afficher les

données :.

Exemple

<!DOCTYPE html>

<html>

<body>

<h1>My First Web Page</h1>

<p>My first paragraph.</p>

window.alert(5 + 6);

</script>

</body>

</html>

document.write ()

Exemple

<!DOCTYPE html>

<html>

<body>

<p>My first paragraph.</p>

document.write(5 + 6);

</script>

</body>

</html>

innerHTML

Pour accéder à un élément HTML, JavaScript peut utiliser

document.getElementById (id).

L' id est un attribut qui définit l'élément HTML.

Le innerHTML est une propriété qui définit le contenu HTML:

<!DOCTYPE html>

<html>

<body>

<p>My First Paragraph</p>

document.getElementById("demo").innerHTML = 5 + 6;

</script>

</body>

</html>

console.log () Exemple

<!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> console.log(5 + 6); </script> </body> </html>

Conditions:

If (condition) instruction

If (condition) instruction else instruction

Les structures de contrôle

Structures conditionnelles

Exemple 1: sc simple

var a= 187, b = 173;

if(a > b)

text=(‘a est supérieur à b’);

Exemple 2 : sc simple

var a= 187, b = 173;

if(a > b)

text=(‘a est supérieur à b’);

text=(‘ a est inférieur ou égal à

b’);

Exemple 3 : sc imbriquée

var a= 17, b = 173;

if(a > b)

text=('a est supérieur à b');

else if (a<b)

text=(' a est inférieur à b');

text=(' a est égal à b');

Exemple 4 : switch

var grade='A';

switch (grade)

case 'A': text=(‘Professeur’); break;

case 'B': text=(‘Assistant’); break;

case 'C': text=(‘Technicien’); break;

case 'D': text=(‘Ouvrier’); break;

default: text=(‘Grade inconnu’)

Structures conditionnelles

While (condition) instruction

Do instruction While (condition)

For (initialisation; condition; incrémentation)

instructions

Exemples :

Structures répétitives

Exemple 1: Boucle FOR

for (i = 0; i < 10; i++) {

text = “Le nombre est “

+ i+ “\n”;

Exemple 2: Boucle

var text = "";

var i = 0;

while (i < 10) {

text += “le nombre

est” +

i+”\n”;

Exemple 3: Boucle DO…

text="";

text += “Le nombre est " +

i+"\n";

while (i < 10);

Définie préférablement dans la partie <head> surtout avant

l’appel de la fonction

Syntaxe

function nom (arg1, …, argn)

{ instructions}

Appelée dans la partie <body>

Syntaxe de l’appel: nom (arg1, …, argn)

Variables déclarées dans une fonction resteront locales à

cette fonction

On pourra utiliser la commande RETURN (optionnel)

Les Fonctions en JavaScript

Syntaxe d’une fonction

<html>

<head>

function Saluer (nom)

{ document.write (“Bonjour” + nom) }

</script>

</head>

<body>

< script type=text/javascript >

var votreNom = prompt("Quel est votre nom?");

Saluer(votreNom);

</script>

</body>

</html>

Exemple de déclaration

On pourra mettre dans un fichier à part: fonctions.js toutes les fonctions déclarées

Pour les charger et les utiliser dans différentes pages Web

< script type=text/javascript src=fonctions.js >

</script>

ATTENTION! : Pas de balise <script> dans fonctions.js

Fonctions en fichier externe

eval(): interpréte une expression

escape():transforme des signes ASCII en nombres

isFinite():vérifie le domaine numérique de valeurs

isNaN():vérifie si la valeur n'est pas un nombre

parseFloat():transforme en nombre avec décimales

parseInt():transforme en nombre entier

Number():transforme un objet en nombre

String():transforme le contenu d'un objet en une chaîne

de caractères 29

eval ("document.write(Bonjour !);")

Résultat: Bonjour !

Fonction eval()

Fonction escape()

var exemple = "\n\r\t";

document.write(escape(exemple));

Résultat : %0A%0D%09

//Transforme les caractères de commande avec des codes ASCII de 0 à 31)

// dans leurs valeurs ASCII numériques et cela sous forme hexadécimale

Fonction isNaN()

if(isNaN(x))

{ alert(x + " n'est pas un nombre."); }

Fonction isFinite()

if(isFinite(x + 5 * y))

{ alert("Le résultat est un nombre fini.");

//Si la valeur assignée est NaN,

//le résultat retourné par isFinite sera false.

var a = "54 a ", b = "d 54 " , c = 12.5, d = "toto";

document.write(parseFloat(a));

document.write(parseFloat(b));

document.write(parseFloat(c));

document.write(parseFloat(d));

Fonction parseFloat()

var a = "54 a ", b = "d 54 " , c = 12.5, d = "toto";

document.write(parseInt(a));

document.write(parseInt(b));

document.write(parseInt(c));

document.write(parseInt(d));

Fonction parseInt()

var a = 54, b = 44, c = 12.5, d = true;

a = String(a); b = String(b); c = String(c);d = String(d);

document.write(typeof (a));

document.write(typeof (b));

document.write(typeof (c));

document.write(typeof (d));

Fonction String()

String

var a = "54 " , b = "d54", c = "54d";

document.write(Number(a));

document.write(Number(b));

document.write(Number(c));

Fonction Number()

Exercice 1

<HTML>

<HEAD>

var firstNumber, secondNumber,number1, number2, sum;

firstNumber = window.prompt( "Entrer le premier entier", "0" );

secondNumber = window.prompt( "Entrer le deuxieme entier",

"0" );

number1 = parseInt( firstNumber );

number2 = parseInt( secondNumber );

sum = number1 + number2;

document.write( "<H1>La somme est " + sum + "</H1>" );

</SCRIPT>

</HEAD>

Solution

Exercice 2

function controle() {

var test = document.form1.moninput.value;

alert("Vous avez tapé : " + test); }

</script>

</head>

<body>

</form>

</body>

</html>

Solution 1

function controle() {

var test = document.getElementById (‘’txt’’).value;

alert("Vous avez tapé : " + test); }

</script>

</head>

<body>

<form >

< input type ="button" name="bouton" value="Contrôler" onClick= "controle()">

</form>

</body>

</html>

Solution 2

Classe et Objet

Une classe est un type qui est la description

d’un ensemble de :

◦ propriétés (les données) et de

◦ méthodes (les fonctions).

Un objet est une instance de classe (c’est à

dire une variable de type classe). On écrira :

◦ o.p pour accéder à une propriété p d’un objet o

◦ o.m() pour appeler une méthode m d’un objet o

Lorsqu’un document HTML est chargé dans un

navigateur, celui-ci fournit une interface DOM

(Document Object Model) pour accéder aux objets le

composant :

◦ Ces objets sont classés de manière hiérarchique

(notion d’arbre).

◦ L’objet le plus haut dans la hiérarchie est l’objet de la

classe window (fenêtre).

◦ Dans cette fenêtre, il y a un document HTML : c’est

l’objet document. Donc, L’objet window contient

l’objet document.et ainsi de suite ...

Classe et Objet

Lorsqu’une page Web est chargée dans un

navigateur, Javascript identifie plusieurs objets pour y

représenter les informations.

Ces objets sont classés de manière hiérarchique.

L’objet le plus haut dans la hiérarchie est l’objet de

la classe window (fenêtre).

Classe et Objet

Dans cette fenêtre, il y a un document

HTML : c'est l'objet document. Donc, L'objet fenêtre contient l'objet document (c’est la notion de hiérarchie).

Dans ce document, on trouve un formulaire au sens HTML : c'est l'objet formulaire. Donc, l'objet fenêtre contient un objet document qui lui contient un objet formulaire (hiérarchie des objets).

Classe et Objet

Dans ce document, on trouve trois objets : l'objet radio, l'objet bouton, et l'objet texte. Donc, l'objet fenêtre contient : ◦ Le modèle hiérarchique

des objets en Javascript.

Classe et Objet

Dans un document HTML, on pourrait donc accéder aux objets de

la manière suivante :

// Accès à une propriété de l’objet button

window.document.form.button.value = "Déterminer"; // Accès à une méthode de l’objet button

window.document.form.button.focus(); // Accès à une méthode de l’objet window

window.alert("Hello world");

Remarque : l’objet window est souvent facultatif. On ne doit pas

forcément préciser son nom pour utiliser ses méthodes ou ses

propriétés.

Classe et Objet

On recommande d’utiliser la méthode

getElementById() pour accéder aux objets par

leur identifiant (attribut ID de l’élément HTML) :

var bouton = document.getElementById(’id_button’);

bouton.click(); // pour simuler un clic de souris sur ce bouton

Classe et Objet

Le script est exécuté chaque fois que l’événement survient

<HTML>

<HEAD>

function bienvenue() {alert("Bienvenue à cette page"); }

function au_revoir() {alert("Au revoir"); }

</SCRIPT>

</HEAD>

Salut étudiants ISI

</BODY>

</HTML>

Les évènements en JavaScript

Exemple

onAbort (en cas d'interruption)

onChange (après modification)

onClick (en cliquant)

onDblClick (en double-cliquant)

onError (en cas d'erreur)

onFocus (en activant)

onKeydown (en appuyant sur une touche)

onKeypress (en appuyant sur une touche)

onKeyup (en relâchant la touche)

Liste des évènements (1)

onLoad (en chargeant un fichier)

onMousedown (en maintenant la touche de souris appuyée)

onMousemove (en bougeant la souris)

onMouseout (En quittant l'élément avec la souris)

onMouseover (en passant sur l'élément avec la souris)

onMouseUp (en relâchant la touche de souris)

onReset (en initialisant le formulaire)

onSelect (En sélectionnant du texte)

onSubmit (en envoyant le formulaire)

onUnload (en quittant le fichier)

Liste des évènements (2)

Cours JS Part1

Documents

Cm6.09 part1 organisation_projet ing

Cm6.07 part1 innovation_ettailleentreprise - manag

Le boeuf part1

Cours communication financière - EM Lyon -Part1

ZÁVITNÍKY- TECHNICKÉPODMÍNKY Taps - technical conditions / Gewindebohrer ... · DIN8140 Part2 DIN158 DINISO5855 Part1÷2 DINISO228 Part1 DIN6630 DIN259 Part1÷3 DIN2999 Part1

Cm6.05 part1 liste_financementsexterieurs ing

cours GRH Part1

Cm6.07 part1 innovation_ettailleentreprise_ing

Hanon Part1

Part1 Ingenierie Financiere Plan de Cours

Manuel d'Echographie Fr Part1

1) Securite Informatique Part1

Cm6.08 part1 strategie_innovation_isaac_man

Cm6.09 part1 organisation_projet tech

Cm6.02 part1 situer_ing

Cm6.07 part1 innovation_ettailleentreprise_tech

Cm6.03 part1 veille_entreprise_ortzi_ing

Cm6.06 part1 generalites_mana

Budgetisation Part1

Cours fouille de donn+®es part1