• Aucun résultat trouvé

Javascript insertion au langage HTML – Cours et formation gratuit

N/A
N/A
Protected

Academic year: 2022

Partager "Javascript insertion au langage HTML – Cours et formation gratuit"

Copied!
15
0
0

Texte intégral

(1)

JavaScript / ECMAScript - ENSAM

Plan du cours

Le Modéle OSI

Internet et le modéle OSI Principe TCP/IP

Principe DNS

Routage et adressage IP

Internet - Intranet - Extranet

Principes administratifs de lʼInternet Les Données : HTML, SQL, XML, ...

Echange de données (et systèmes de gestion) Langages et programmation

Plateformes logicielles

La gestion dʼun projet Web Annexes

(2)

JavaScript / ECMAScript - ENSAM

Défi nition

- Langage de type «script».

- Utilisation de fonctions prédéfi nies par un système, appelé «noyau» («core»).

- Programmation facilitée par un environnement pré-existant.

- Exemples de langages de type script :

• Javascript / Navigateur (Netscape, Mozilla, Safari, ...) • JScript / Microsoft Internet Explorer

• PHP / PHP+webserver (Apache, IIS) • ActionScript / Macromedia Flash • Lingo / Macromedia Director

(3)

JavaScript / ECMAScript - ENSAM

Origines

- Création en 1995 par Brendan Eich pour Netscape sous le nom «Livescript».

- Accords pour la mutualisation de développement entre Netscape et SUN.

- Le LiveScript prend lʼapparence du langage Java™ de SUN et devient JavaScript.

- JavaSsript 1.0 est implémenté sur Netscape Navigator 2.0

- Netscape et SUN annonce JavaScript le 4 décembre 1995 comme un langage • conçu pour créer des applications centrées-réseau

• complémentaire et intégré à Java™

• complémentaire et intégré à HTML • ouvert et multi-plateforme

(4)

JavaScript / ECMAScript - ENSAM

Fonctionnalités

- Javascript est un langage interprété par le navigateur client.

- Il ajoute des fonctionnalités interactives aux pages HTML.

- Il permet au navigateur de réaliser un traitement local de données sans solliciter le serveur.

Inconvénients

- Son exécution dépend du navigateur -> problèmes de compatibilité entre les navigateurs.

- Standard contesté (enjeu commercial) -> rivalité Microsoft.

- Jusquʼà aujourdʼhui, la principale diffi culté de mise en œuvre est la compatibilité.

Néanmoins, standard devenu incontesté et largement utilisé.

(5)

JavaScript / ECMAScript - ENSAM

Normalisation

- Javascript est lʼobjet dʼune norme édité par ECMA.

- ECMA : European Computer Manufacturers Association - Organisme pour la normalisation des technologies de lʼinformation et de la communication. Association dʼindustriels basée à Genève. Fondée en 1961. LʼECMA défi nit des normes dans des domaines divers (support de données optiques, CD, DVD, communications sans fi l, encodages, langages...)

- www.ecma-international.org

- Norme ECMA 262-3 : ECMAScript, communément JavaScript 1.5, publiée en 1999 - Normalisation en cours pour lʼextension dʼECMAScript à lʼenvironnement XML.

Normalisation = pérènité du langage.

(6)

JavaScript / ECMAScript - ENSAM

Langage orienté objet

- Objets prédéfi nis par le client : window, document, frame, image, etc...

- Création dʼobjet suivant des constructeurs pédéfi nis : new Array() - Manipulation dʼobjet par des méthodes

- Lecteur et modifi cation des propriétés (attributs)

- Création de nouveaux constructeurs et de nouveaux objets spécifi ques Typage faible

- le type des variables est défi ni par défaut à la première attribution - le type dʼune variable est adapté à son contexte dʼutilisation

- le type dʼune variable peut être modifi é par une instruction

(7)

JavaScript / ECMAScript - ENSAM

Insertion au langage HTML - Balise <script>

<script type=”text/javascript”>

...

</script>

<script type=”text/javascript”><!-- ...

// --></script>

- Commentaire <script>

// ligne de commentaire

/* Début d’un bloc de commenatires ...

Fin du bloc commentaire */

(8)

JavaScript / ECMAScript - ENSAM Insertion au langage HTML

- Appel externe <script>

<script type=”text/javascript” src=”myScript.js”></script>

- Insertion de la balise <script> dans lʼen-tête <head>

- Défi nition dʼune fonction

<html>

<head>

<script type=”text/javascript”><!-- function myFunction {

...

}

// --></script>

</head>

<body>

...

<a href=”javascript:myFunction()”>Clic here</a>

</body>

</html>

(9)

JavaScript / ECMAScript - ENSAM Insertion au langage HTML

- Appel externe <script>

<script type=”text/javascript” src=”myScript.js”></script>

- Insertion de la balise <script> dans lʼen-tête <head>

- Défi nition dʼune fonction

<html>

<head>

<script type=”text/javascript”><!-- function myFunction {

...

}

// --></script>

</head>

<body>

...

<a href=”javascript:myFunction()”>Clic here</a>

</body>

(10)

JavaScript / ECMAScript - ENSAM

Opérateurs

- Standards (Java, C)

+ - * /

% (modulo)

myVar++ (incrémentation) myVar-- (décrémentation)

&& (ET logique)

|| (OU logique)

! (NON logique)

== (égal - comparaison)

!= (différent - comparaison)

<= (inférieur ou égal - comparaison)

>= (supérieur ou égal - comparaison)

< (strictement inférieur - comparaison)

> (strictement supérieur - comparaison)

(11)

JavaScript / ECMAScript - ENSAM

Affectations

- Standards (Java, C)

var myVar = 0; (A noter le ; est une fi n dʼinstruction)

myVar = 3;

myVar += 5; (Ajoute 5 à la variable -> nouvelle valeur 8)

myVar -= 5; (Ôte 5 à la variable -> nouvelle valeur 3)

myVar *= 5; (Multiplie par 5 la variable -> nouvelle valeur 15) Bien différencier affectation et comparaison

affectation : = comparaison : ==

(12)

JavaScript / ECMAScript - ENSAM Structure de condition if

if (expression1) { ...

} else if (expression2) { ...

} else { ...

}

if (myVar == 0) { ...

} else if (myVar > 0) { ...

} else { ...

}

(13)

JavaScript / ECMAScript - ENSAM Structure de condition switch

switch (expression){

case label : ...

break;

case label : ...

break;

...

default :

...

}

(14)

JavaScript / ECMAScript - ENSAM Structure itérative boucle for

for ([initial-expression]; [condition]; [increment-expression]) { ...

}

for (k=1; k<=100; k++) { ...

}

Structure itérative boucle for...in

myArray = new Array(”poisson”,”poulet”,”boeuf”);

for (k in myArray) { ...

}

(15)

JavaScript / ECMAScript - ENSAM

Structure itérative boucle while et do...while

var k = 1;

while (k<=100) { ...

++k;

}

var k = 1;

do

...

++k;

while (k<=100);

Références

Documents relatifs

Le papier contribue au développement théorique et empirique sur le technostress dans la littérature IS (système d'information) et dans le monde des affaires. Théoriquement, il

A l'heure actuelle, les deux implémentations les plus utilisées de Javascript, respectent la spécification d'ECMAScript, tout en y ajoutant des spécificitées

Ce type possède quelques valeurs notables, comme Infinity pour l'infini positif, NaN pour désigner ce qui n'est pas un nombre (le résultat d'une division par zéro par exemple), ou

élément parmi les autres éléments contenus dans cet objet jQuery. Le premier élément contenu dans l'objet jQuery est le.. Expression Numéros des éléments sélectionnés par

• AJAX n’est pas un nouveau langage de programmation, mais une nouvelle façon d’utiliser les standards existants.. • AJAX est basé sur JavaScript

[r]

Utiliser les boucles &#34; &#34; pour répéter une suite d'instructions un pour répéter une suite d'instructions un nombre de fois donné.. nombre de

Vous pouvez aussi utiliser le mot clé this pour référencer window (à condition qu'on ne soit ni dans une fonction de définition d'objets comme une fonction de création de tableau,