Des notes destinées à éclaircir certains points
ou à apporter d'intéressants suppléments d'information
sont programmées pour apparaître lorsqu'on passe le curseur de souris
sur des icônes telles que           
Pour des raisons de sécurité, certains navigateurs
bloquent l'apparition de ces notes (programmées en JavaScript) .
Des précieuses informations, exercices, réponses, aidant à comprendre,
à se repérer, à étendre ses connaisances sont alors perdues.
AUTORISEZ DONC VOTRE NAVIGATEUR A OUVRIR CES SCRIPTS !
Ce site n'a aucun but commercial !

JAVASCRIPT
00 - Qu'est-ce JavaScript ?
Préliminaires - Méthode de travail
Accueil
du Site
Vous trouverez un cours plus direct,
sans explications des principes du langage,
basé uniquement sur des exercices commentés
sur ce même site, en cliquant ici :

De toutes manières, le cours des principes débutant ici,
se continue naturellement à sa fin
par ledit cours applicaitf.

 
Choix par Menu ou Parcours Séquentiel
Avant :
Sommaire JavaScript
  
Suite :
Le codage machine.
Interpréteurs Compilateurs

Visiteurs sur cette page :

Sujets traités dans cette page
Lien local
Qu'estce-que JavaScript ? A quoi peut-il servir ?
Des exemples.
JavaScipt et HTML
Une vue succincte du codage HTML -
Comment écrire facilement des pages HTML
pour mettre en oeuvre des programmes en JavaScript
Comment écrire un script et où le placer dans une page HTML ?
Un exemple simple de de script - Balises de script <script>...</script>


Qu'est-ce que JavaScript ?

C'est un langage de programmation employé surtout pour ajouter de l'interactivité aux pages HTML.

Deux raisons d'apprendre JavaScript :

  • Pour ceux, débutants en programmation, c'est un excellent moyen d'apprendre à créer tout type de programmes, tout en expérimentant à chaque pas leurs effets.
    Comment expérimenter soi-même avec les "moyens du bord" ......C'est expliqué ici :

    En effet, quel que soit le langage de programmation (JavaScript, Basic, Langage C C++, etc. )
    les mêmes structures algorithmiques sont mises en oeuvre.
    Tous les langages ont en commun ces structures de base.

  • Et, bien sûr, pour ceux qui désirent en particulier animer des pages HTML qu'ils créent.

  • Voici deux exemples de réalisations programmées entièrement commentées dans ce site :

    • Des traceurs de courbes : Vous entrez une équation ( y = f(x) ou y =f(t) )
      et vous voyez apparaître la courbe correspondante. Cliquer ici :

    • Des simulations des lois de l'attraction universelle :
      expression de dérivées (v = ds/dt) ( a= dv/dt ) et deleurs intégrales ? Cliquer ici :

Pages HTML
( HyperText Markup Language : langage codé pour l'hypertexte)
(Hypertexte : possibilité de naviguer d'une page à l'autre en cliquant sur des liens)

On les appelle aussi "Pages Web"
Il s'agit des fichiers que les explorateurs Internet tels que "Internet Explorer" ou "Mozilla Firefox" etc...
ouvrent pour y puiser les informations qui leur permettent d'afficher à l'écran
du texte, des images, des vidéos, des liens vers d'autres pages (hypertexte) etc.

Vous êtes en train de visualiser la page Web (page HTML)
ayant, sur le réseau mondial, l'adresse didentificattion ( URL ) suivante :


Observez l'extension .htm ou .html qui suit le nom de ce fichier.
Note
L'apparition, dans le cadre ci-dessus, de l'URL et du nom de fichier correspondant
est dûe à un JavaScript que j'ai inséré dans le code HTML de la présente page.
Nous en apprendrons plus dans la suite.

Les pages HTML contiennent un codage particulier
fait de caractères alphanumériques habituels (lettres et chiffres)
destiné à être déchiffré par un logiciel dit "navigateur", parfois "explorateur"
du type "Windows Explorer" ou "Mozilla Firefox Explorer".


L'identification que nous fournit le navigateur avec lequel vous la visualisez actuellement est :

Version :

Le codage HTML permet à lui tout seul une présentation avenante de ces pages,
avec des polices et tailles de caractères diverses, des couleurs variées, des images animées ou non.
etc.

Mais en ajoutant un langage de programmation tel que JavaScript,
vous augmentez prodigieusement ses possibilités !

Exemple
Voici une application programmée en JavaScript et implantée dans cette page.
Son fonctionnement complet sera décrit plus loin dans ce site.
Elle permet de convertir les nombres en divers formats décimal binaire hexadécimal.
Cours sur la numération décimale, binaire et hexadécimale dans ce site, ici :

Conversions croisées

Choisissez d'abord vos formats d'entrée et de sortie.
Entrez le nombre (entier) à convertir dans la fenêtre de saisie.
Puis cliquez sur le bouton du bas.

Format d'origine
Format final
Décimal
Décimal
Hexadécimal
Hexadécimal
Binaire
Binaire

Saisie & Résultat:
Formats hexadécimaux admis : Ab3cE ; #aB89C ; 0xAb3D (0x = zéro lettre x)

HTML seul ne peut pas réaliser une telle application.
Il a fallu ajouter une séquence programmée (ici en JavaScript).
Une telle séquence s'appelle un script

Un ou plusieurs scripts peuvent être annexés au code HTML.
La suite du cours précise comment il faut procéder.

A titre d'exemple, voici quelques programmes réalisés en JavaScript et étudiés dans ce cours.

Attention ! Ne tentez pas de comprendre dès maintenant les fichiers sources de ces programmes.
Ils sont assez complexes.
Lancez-les, faites-les fonctionner et constatez qu'avec JavaScript on peut faire des choses assez sophistiquées.

Conversions entre unités anglo-saxones et unités du système métrique.
Degrés Celsius Fahrenheit
Gallons US - litres - milles - km
Grapheur cartésien
Grapheur paramétrique
Grapheur Polaire
Images pas-à-pas
Résolutions d'équations par encadrements successifs
Simulation gravitationnelle

Bref, grâce à HTML et JavaScript vous pouvez réaliser des applications de toute sorte, à votre guise,
et ne nécessitant pour "tourner" qu'un ordinateur muni d'un navigateur internet.

HTML et JavaScript

Pour implanter de scripts JavaScript dans une page HTML il faut connaître le codage HTML

L'un des trois cas peut vous concerner :

  • Vous connaissez le codage HTML : passez à la suite :

  • Vous souhaitez le connaître de manière approfondie.
    Alors faites un détour par toute une suite de pages de ce même site
    consacrées au codage HTML. Ici

  • Vous souhaitez le connaître tout juste suffisamment pour créer des applications JavaScript.

    Alors, vous trouverez ci-dessous :

    • Un bref résumé des connaissances minimales en HTML pour débuter.

    • Une méthode vous permettant de créer simplement des pages HTML
      avec les "moyens du bord" sans logiciels sophistiqués et chers.

    • Et tout au long de ce cours d'initiation, des images :
      sur lesquelles vous pourrez passer le curseur de souris,
      ce qui fera apparaître une note explicative à votre intention.
      Essayez avec celle qui apparaît ci-dessus.

      Ceci, bien entendu, si votre Navigateur ne refuse pas
      d 'exécuter des JavaScripts par mesure de sécurité.
      Si c'est le cas déverrouillez-le momentanément pour
      pouvoir suivre les exemples de ce cours.

Codage HTML (en bref)

Le codage HTML se fait par des BALISES. ( Tags)

Tout le code HTML doit être contenu entre les deux balises : <html>....</html>
Une balise ouvrante au début, par exemple : <html> et une fermante à la fin :</html>.
La balise fermante a le même nom que l'ouvrante mais une barre"/" indique la fermeture du 'container'.

On appelle "container" tout ce qui est compris entre deux balises de même nom l'ouvrante et la fermante,

<html> ...</html> ne sont pas les seules balises et le seul container du codage HTML

Exemple
Cette image représente le contenu d'un fichier que j'ai créé :
avec le "traitement de texte" nommé "Bloc-notes" de "Windows" : icône : ("NotePad.exe")
J'ai donné le nom de "MonPremierHTM.htm" à ce fichier.
(Ce nom apparaît dans le bandeau supérieur de l'image du bloc-notes ci-dessus)

C'est une page très simple pour débuter...

Explications
  • <head>...</head> : container de l'en-tête ( header)
    Contient généralement le titre de la page : <title>Mon Titre</title>
    (à ne pas confondre avec le nom du fichier .htm)
    <head>...</head> peut contenir bien d'autres containers que celui du titre.
    Nous les découvrirons progressivement au besoin.


  • <body>...</body> : le Corps ( body) de la page
    C'est là que l'on place les textes, des images, vidéos, etc... que doit afficher la page lorsqu'elle sera lue par un navigateur.
    Ici le seul contenu est le texte : "Bonjour !"

    bgcolor="#FFFFFF" : couleur d'arrière plan (ici blanc)
    text= "#000000 : couleur du texte : (ici noir)
    Explication sur les couleurs ici :

J'ai enregistré le fichier "MonPremierHTM.htm" dans mon site.
Si vous souhaitez le visualiser cliquez ici :

Résultat sur l'écran :

Bonjour !

 

 

C'est simpliste, mais ce n'est qu'un début...

Important pour votre formation

Une formation est plus intéressante et efficace quand elle est active.
Pour cela, vous devez pouvoir expérimenter au fur et à mesure que vous apprenez de nouvelles notions.
Par exemple, refaire les programmes que je vous propose et constater de vous-même les résultats.
Inventer vous-meme de nouveaux exemples. Essayer d'autres formules.
Vous ne risquez nullement de casser votre machine par vos erreurs de programmation en JavaScript !

Comment réaliser simplement des pages HTML ?
"Si vous savez, sautez cette rubrique en cliquant ici :

Il est certes plus commode d'utiliser un logiciel éditeur spécialisé dans le codage des pages HTML
tels que "Dreamweaver" par exemple.

Cependant, notre but ici n'est pas de réaliser des pages Web avec seulement de jolies présentations,
mais de faire "tourner" un programme écrit en JavaScript dans des buts utilitaires.

Nous nous contenterons donc d'un, logiciel simple et à la portée de tous
voué à l'écriture de textes simples.
Par exemple, le "Bloc-notes" de "Windows" : icône : ("NotePad.exe")

Surtout n'utilisez pas "Word" ou un traitement de texte sophistiqué !
Ses concepteurs ont ajouté des caractères invisibles de positionnement, de polices de caractères etc...
qui perturbent le code que vous écrivez sur ces pages.

J'ouvre Bloc-Notes et y écris ceci :

J'enregistre ce fichier quelque part dans l'arborescence de mes fichiers
avec un nom facilement mémorisable et "parlant".
J'ai choisi : "MonPremierHTM" avec OBLIGATOIREMENT l'extension "htm"
"MonPremierHTM.htm".

J'ai écrit le code précédent dans un fichier de mon site qui vous est accessible.
Si vous souhaitez le visualiser cliquez ici :



Si vous avez créé votre propre fichier HTML
et que vous l'avez enregistré sous un nom et dans un emplacement que vous avez mémorisés,
(son nom indiffère mais son extension doit être ".htm")
cliquez sur le nom de ce fichier à l'endroit où vous l'avez enregisté.

Vu son extension "htm" c'est votre explorateur qui l'ouvrira...
et non plus le Bloc-notes (qui ouvre, lui, les fichiers d'extension "txt")

Voici le résultat qui apparaîtra à l'écran pour un fichier identique à celui écrit ci-dessus.

Bonjour !

 

 

Comment écrire un script JavaScript et où le placer ?
Voici le code HTML d'une page presque vide.

<html>

<head> //En-tête (invisible à l'écran)
<title>Exemple HTML simplissime</title>
</head> //Fin d'en-tête


<body bgcolor="#FFFFFF" text="#000000"> // Début de la page visible à l'écran
                                        // <body> = corps .
<div align="center">
<h1><font face="Times New Roman, Times, serif">Bonjour !</font> </h1>
</div>
</body> //Fin de page
</html>
Note : (Placez le texte assez haut pour que la note apparaisse entière en bas)

Voir l'effet lorsqu'on lance ce code HTML avec un navigateur, en cliquant ici :

Insérons maintenant un script JavaScript.

<html>
<head>
<title>Exemple HTML simplissime</title>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div align="center">
<h1><font face="Times New Roman, Times, serif">Bonjour !</font> </h1>
</div>

<script language="JavaScript">
alert("Comment allez-vous ?")
</script>

</body>
</html>

Vous pouvez visualiser dans votre navigateur la page HTML écrite dans le cadre ci-dessus en cliquant ici :

Vous avez observez qu'une fenêtre s'est ouverte avec, en son centre,
le texte "Comment allez vous ?" et un bouton "OK".

Il suffit de cliquer sur "OK" pour qu'elle disparaisse.
Apparaît alors le texte "Bonjour !" avec la police de grands caractères dite "h1"

L'effet du script a été d'envoyer automatiquement un message : "Comment allez- vous ?" au lecteur de la page.
En fait ce n'est pas le script mais le code écrit dedans qui en est responsable.
Ce code est : alert("Comment allez-vous ?")

Nous analyserons ce code un peu plus loin. Voyons le positionnement du script.

Observez que le code d'un script doit être obligatoirement inséré entre deux balises de script
<script language="JavaScript"> ... et ... </script>
dont la première fait état du type de langage employé dans le script : ici "JavaScript"
(notez les orthographes : langage = language )

Où place-t-on les scripts ?
Lors de la lecture du fichier par l'explorateur, ce que vous être en train de faire,
ni les balises de script ni le code qu'elles contiennent n'apparaissent à l'écran .

Seuls les effets du code deviennent effectifs quand on les sollicite.

Donc en principe on pourrait placer ces scripts n'importe où dans la page HTML...
mais le "n ' impote où" n 'a jamais été une méthode de travail très efficace.

Il faut distinguer deux cas :

  • Le script ne concerne que la page en cours.
    On le place alors dans le container d'entête : <head>...</head>.
    On y regroupe tous les scripts à usage local. C'est une simple mesure d'ordre et de méthode.
    Nous pouvons appeler ce script "script local".

  • Les fonctions écrites dans le script peuvent être utiles dans plusieurs autres pages
    (script d'intérêt général)
    On le place alors dans un fichier externe ayant pour extension "js". (Ex : MonFichierDeScripts.js)
    Et on devra annexer ce fichier dans l'en-tête de chacune des pages concernées.
    Nous verrons comment.

    Ce sera le cas, par exemple, des fonctions de conversion numérique que nous verrons plus loin.
    Que j'ai écrites en JavaScript et dont j'ai groupé les scripts dans un fichier du site nommé conversions.js :
    "Monsite/Communs/javascripts/conversions.js"

    Dans ce cas, il est indispensable d'indiquer dans l'en-tête de la page HTML :

    • OUBIEN le chemin d'accès local à ce fichier de scripts
      <head>
      ............
      <script language="JavaScript" src="C:/MesDocuments/MesScriptsJS/conversions.js"></script>
      ............
      </head>

    • OUBIEN l ' URL de ce fichier de scripts.

      <head>
      ............
      <script language="JavaScript" src="Site/Communs/javascripts/conversions.js"></script>
      ............
      </head>

Nous allons maintenant nous intéresser à la ligne de code :
alert("Comment allez-vous ?")
Ce sera à la page suivante.

ORDRE
Chapitres du cours initial de JavaScript
LIENS
0
 Préliminaires - Qu'est-ce que JavaScript ? - Méthodes de travail - Pour Débutants -
1
 Code machine Code exaécutable Compilateurs ? Interpréteurs ? - Pour Débutants -
2
 FONCTIONS : Définition - Déclaration - Appels -
3
 VARIABLES & CONSTANTES
4
 CHAINES de caractères
5
 TABLEAUX
6
 ALTERNATIVES
if(...) {...} else {...} ( condition ? expr1 : expr 2)
7
 BOUCLES for(... ; ... ; ... ) { ...} While (...){...}
8
 FORMULAIRES
9
 TEMPORISATIONS
10
 GRAPHIQUE -1- Canevas - Tracé de courbes diverses - Courbes de Bézier -
11
 GRAPHIQUE - 2 - Graphes d'équations mathématiques -
Séries d'exercices graduels d'entraînement.
Thèmes : Formulaires entrée/effichage. Conversions numériques

 

Choix par Menu ou Parcours Séquentiel
Avant :
Sommaire JavaScript
  
Suite :
Le codage machine.
Interpréteurs Compilateurs

PAGE D'ACCUEIL
DU SITE
.
.
.
.
.
.
.
.