Initiation à la création de site Web

A. Caractéristiques clefs:

• Syntaxe: ressemble à Java, C, Php etc.
• Langage basé objets (pas orienté objets)
• Des objets "browser", "HTML", etc. sont "built-in" et permettent la manipulation de contenus "Web" (notamment formulaires et liens/images).
• aucune fonctionnalité graphique
• langage non typé ("loose typing"); une variable est implicitement déclarée dès son apparition et typée par son contexte d'utilisation
• ressemblance avec Java uniquement en nom

  Concept	Java	JavaScript
  accès aux fichiers	oui	non
  langage typé	oui	non
  possibilités graphiques	oui	non
  peut contrôler le fonctionnement d'un navigateur	non	oui
  accès aux objets contenus dans un document html	non	oui

B. Variables

• peuvent être créées à l'aide du mot réservé var ou simplement au moment d'une affectation
  

    var i
    j = 10
    i = "abc"
    var k = "defg"

• deux catégories: locales et globales
• noms (variables, fonctions) sensibles à la casse

C. Les objets

• JavaScript est un langage "basé objets":
  • le programmeur peut "utiliser" des objets "JavaScript" pré-définis
  • il peut définir des objets simples (sans héritage)
  • il peut utiliser les objets du DOM (Document Object Model).

    Le DOM est une recommandation du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d'accéder ou de mettre à jour le contenu, la structure ou le style de documents.

    Tout élément conceptuel utilisé, affiché etc. dans le navigateur est représenté par un objet qui s'insère dans une structure DOM.

• un objet est une structure informatique qui:
  • possède des propriétés (variables contenant de l'information);
  • possède des méthodes (procédures permettant de manipuler les informations contenues dans l'objet);
  • (parfois) possède des "event handlers" associés.

Instructions liées aux objets

• une propriété ou une méthode d'un objet est invoquée par:

    objectName.propertyName
    objectName.methodName(arguments...)

  Méthodes (fonctions) ou propriétés (variables attachées aux objets) vous permettent de traiter une page HTML (essentiellement des formulaires), créer des boites de dialogues, de nouvelles pages, faire du DHTML etc.

• this

    "this" réfère à l'objet courrant.

Types primitifs

• Number : 42, 3.14159

    alert(Number.MAX_VALUE)
    alert("abc" * 2)  // NaN (Not a Number)
    alert(1 / 0)  // Infinity

• Boolean : false, true
• String

    maChaine="Le dîner sera prêt"
    alert(maChaine)
    nouvelleChaine = maChaine + " à l'heure"
    alert(nouvelleChaine)
    alert(nouvelleChaine.length)
    alert('aaa'.italics())

• null (seule valeur dans le type)
• undefined (seule valeur dans le type)

Types composés

• Array

    monTableau = new Array("INF4533", "INF4093", "MAT1003");
    monTableau.sort();
    for (var i=0; i<monTableau.length; i++) {
      document.write(monTableau[i] + "<br>")
    }

• Date

    aujourdhui = new Date()
    alert(aujourdhui);
    finDuMonde = new Date(3000,0,1,10,30) // le mois va de zéro à 11
    alert(finDuMonde)
    heure = finDuMonde.getHours()
    alert(heure)
    finDuMonde.setYear(4000)
    alert(finDuMonde)

• Math
• RegExp
• Fonctions

L'objet "document"

Le DOM présente les documents comme une hiérarchie d'objets Node qui mettent également en oeuvre d'autres interfaces plus spécialisées. Certains types de noeud peuvent avoir des noeuds enfants de divers types, d'autres sont des noeuds terminaux qui ne peuvent avoir de descendants dans la structure du document.

• L'objet "document" représente toute information attachée au contenu d'une page HTML, par exemple:
  • le contenu des formulaires
  • le "title" du document
• descendants d'un objet (des propriétés ou des objets) :

  Niveau1	Niveau2	Niveau3	Description
  navigator			Informations sur le browser utilisé
  window			Gestion de la fenêtre d'affichage
  	parent, frames, self, top		Désignation de la sous-fenêtre
  	location		Informations sur l'emplacement de la page
  	history		sites précédemment visités
  	document		Informations sur le contenu de la fenêtre (éléments qui composent la page)
  		images	Référence des images présentes dans la page
  		forms	Référence des formulaires présents dans la page
  		links	Référence des liens présents dans la page
  		anchors	Référence des ancrages présents dans la page

Grace à ces structures et méthodes on peut créer dynamiquement des documents ou encore obtenir quelques informations sur le contenu d'un document.

Exemple (JavaScript en noir, DOM en brun) :

  var anchorTags = document.getElementsByTagName("a")
  aff = ""
  for (var i = 0; i < anchorTags.length; i++) {
    aff += "L'attribut href du " + i + "e élément est : " + anchorTags[i].href + "\n";
  }
  alert(aff)

Voici une page (http://jacques-guizol.developpez.com/javascript/Objets/Exos_objets/Page.html) qui illustre les relations entre les objets couramment utilisés.

D. Opérateurs arithmétiques et logiques

• à peu près comme dans C, Java, Php

E. Instructions de contrôle

• if, if else, switch, while, do while, for, break comme en C ou Java
• le retour à la ligne vaut le ";" (sauf quand l'instruction n'est pas syntaxiquement finie).

F. Fonctions

• la déclaration d'une fonction constitue l'ajout de cette fonction aux méthodes de l'objet dans lequel elle est définie
• une fonction peut retourner une valeur ou non
• la syntaxe :

    function <ident> ([<par1> [,<par2> [..., <parn>]...]){
      <corps de function>
    }

  Exemple :

    function Hello(x) {
      alert ("Salut " + x + " !");
    }
    Hello("Marc")

G. Commentaires:

• Toute ligne qui commence par un // est un commentaire:

  <script type="text/javascript">
    // CECI EST UN COMMENTAIRE
    // faites des commentaires pour documenter votre code !