jeudi 26 mars 2020

UE5: Fondamentaux du JavaScript


Compétences : à la fin de cette leçon, chaque apprenant doit être capable de :

  • Donner la structure minimale d’un code javascript
  • Inclure un code javascript dans un code html
  • Manipuler les variables et les instructions de base en javascript

Introduction

Nous avons appris à utiliser le html pour créer des pages web. Si nous souhaitons qu’une page web puisse interagir avec un utilisateur, cela nous est impossible si nous n’utilisons que du code html. Il devient donc impératif d’intégrer du code javascript   dans le code html. Dans cette leçon, nous verrons la structure minimale d’un code javascript, l’intégration du code javascript dans un code html, l’utilisation des variables en javascript les instructions de base en javascript et les objets.

I-                 INCLUSION DU CODE JAVASCRIPT DANS UNE PAGE HTML

Javascript est un langage de script incorporé dans le html. Il est donc dépendant su langage html qui est le langage de base du web.
1-   Structure minimale d’une page html
Bien que le javascript soit dépendant du navigateur, la façon d’intégrer un code javascript dans un code html reste la même. Elle consiste à utiliser la balise <script> en l’enrichissant de l’attribut language ayant pour valeur javascript ou encore l’attribut type avec pour valeur text/javascript. 


<script language="javascript">

</script>
<script type="text/javascript">

</script>

1-   Où inclure le code JavaScript dans le code html

Il existe plusieurs manières d’utiliser JavaScript dans une page Web. On peut mettre un script :
-          Dans l’en-tête de la page (entre les balises <head></head>)
-          Dans le corps de la page (entre les balises <body></body>)
-          Directement dans la balise (par des évènements que nous verrons plus tard)
-          A l’extérieur de la page en faisant référence au fichier contenant le script avec l’attribut src ayant pour valeur le chemin absolu vers le fichier script.
Exemple : <script language="javascript" src="mon_code.js"></script>


2-   Les commentaires en JavaScript

Les commentaires permettent d’enrichir le code d’explication. On distingue deux types de commentaire en javascript :
  • Les commentaires sur une ligne : //ceci est un commentaire sur une ligne
  • Les commentaires sur plusieurs lignes : /* ceci est un commentaire sur
Plusieurs ligne */

I-                 LES VARIABLES EN JAVASCRIPT

1-   Définition

Une variable est un objet repéré par son nom pouvant contenir des données qui peuvent changer au cours de l’exécution du programme. C’est donc un objet dont le contenu peut varier au cours de l’exécution du programme. Une variable en réalité est un espace mémoire réservé pour le stockage d’informations de type différents. Javascript manipule principalement 05 types de variables :
  • Number : ce sont des variables qui contiennent des nombres
  • String : elles contiennent des chaines de caractères
  • Boolean : elles contiennent des valeurs booléennes (true ou false)
  • Array : elles contiennent des tableaux
  • Date : elles contiennent des dates au format AAAA-MM-JJ
NB : lorsqu’une variable ne contient aucun élément, sa valeur est NULL

2-   Déclaration des variables

La déclaration d’une variable peut être explicite ou implicite
  • Une déclaration explicite se fait en précédant le nom de la variable par le mot clé var  EX : var ville = "Bertoua";
  • Une déclaration implicite se fait sans utiliser le mot clé var. C’est le navigateur qui détermine qu’il s’agit d’une variable. EX : ville = "Bertoua";
NB : - pour la clarté du script, il est conseillé d’utiliser le mot var à chaque déclaration
-lorsqu’une variable est déclaré de façon explicite sans affectation elle de type « chaine de caractère(String) » par défaut c’est pourquoi si on doit utiliser des nombre entiers, il faut toujours les convertir avec la fonction parseInt() avant de le réutiliser.
Ex :

<script type="text/javascript">
  var n = parseInt(prompt("entrer le nombre à multiplier par 2"));
  alert("le résultat est "+n*2);
</script>


-certains mot ne peuvent pas être utilisés comme nom de variable :ce sont des mots réservés (goto, while, package, void, long...)
-Le JavaScript est un langage non typé : c’est lorsqu’on affecte une valeur à une variable qu’on détermine son type

1-   L’affectation

Une affectation consiste à donner une valeur à une variable. Elle se fait par le symbole =. La syntaxe d’une affectation est la suivante nom_variable = valeur ; EX : nom = "justine";

I-                 LES INSTRUCTIONS DE BASE ET LES OBJETS

Une instruction est un ordre élémentaire adressé à la machine.

1-   L’instruction de lecture ou de saisie ou d’entrée

Une instruction de lecture permet de récupérer une information saisie par l’utilisateur et d’attribuer une valeur ou le résultat d’une expression à une variable. La lecture en javascript se fait à l’aide de la fonction prompt() ; de la manière suivante :
var nom_variable = prompt("texte à afficher", "valeur_par_défaut") ;
EX :
 
<script type="text/javascript">
  var nom = prompt("Entrez votre nom ", "AU-INFO")
</script>

 
Ce code fait apparaitre la boite de dialoguer suivante avec une fenêtre de saisie ayant pour valeur par défaut AU-INFO. 
boite de dialogue de saisie prompt javascript 
NB: Il n'est pas obligatoire de mettre la valeur par défaut.
Exemple : var nom = prompt("veillez entrer votre nom");

1-   Les instructions d’écriture ou de sortie ou d’affichage

Une instruction d'écriture peut permettre :

  • D'afficher une expression sur une boite de dialogue avec la fonction alert() EX: alert("bonjour");
EX :
<script type="text/javascript">
  alert("Bienvenue dans le site AU-INFO");
</script>
Affiche la boite de dialogue suivante
  boite de dialogue alert javascript
  •   D'écrire sur le document html avec l'instruction document.write(expression);
Remarque : expression peut être le contenu d'une variable, un message (texte) ou le résultat d'un calcul.

1-   La concaténation

Une concaténation consiste à ajouter une chaîne de caractères à la fin d'une autre. L’opérateur utilisé pour la concaténation est le +. Il est aussi possible de concaténer une chaine à une variable
Exemple :
var salutation = 'Bonjour', nom = ' toi', result = salutation + nom; alert(result);
Ce code Affiche : « Bonjour toi »
Pour concaténer une chaine de caractère à une variable, à chaque limite de la chaine avec la variable, on y ajoute un +
Exemple :
var ville = "Bertoua";
alert("vous êtes dans la ville de "+ville); ce code  affiche vous êtes dans la ville de bertoua

2-   Les objets en javascript

Un objet est un contenant qui permet de stocker des valeurs utilisées par un programme. Une variable est un objet. La création d’un nouvel objet se fait par l’instruction new.
EX : var nb = new Number(45) ; ici, on crée un nouvel objet de type Number (nombre) de valeur 45 et on le stocke dans la variable nb.
En javascript on peut également accéder à des objets contenus dans la page web. Ces objets sont appelés variables du navigateur. On distingue :
  • L’objet Windows : il représente une fenêtre du navigateur

  • L’objet Document : il représente une page web affichée dans une fenêtre du navigateur. Il contient des objets image ; Anchor(liens), Form(formulaire)

Un objet form peut également contenir des éléments (texte, boutons, zone de saisie…)
 

Précédent

Suivant
- Aucun commentaire:
Libellés :

UE4 : Introduction au JavaScript


Compétences : à la fin de cette leçon, l’élève sera capable de :

  • Définir javascript et citer quelques langages de script
  •  Donner les outils nécessaires à la programmation javascript  
  • Donner l’importance et les limites du javascript

Introduction

Développé par Netscape, javascript est un langage de programmation lié au html. Historiquement il s’agit du premier langage de script pour le web. Il permet de créer des pages interactives pouvant réagir aux actions de l’utilisateur. C’est un langage qui s’exécute coté client (navigateur) et ne nécessite donc pas une transmission des données vers le serveur.

I-                 DEFINITION ET OUTILS DE PROGRAMMATION JAVASCRIPT

1-   Définition

Le javascript est un langage de script incorporé dans les documents html. C’est un langage de programmation orienté objet utilisé pour améliorer la présentation des pages web et faciliter l’interaction entre l’utilisateur et la page web. Il existe d’autres langage de script tels que Apple Script, VBScript, PHP, python etc.
Un script est un petit programme en langage interprété pouvant s’insérer dans un autre. Un script s’exécute ligne par ligne sans aucune compilation préalable.

2-   Outils nécessaire pour programmer en javascript

Tout comme le html, pour programmer en javascript, on a besoin d’un éditeur de texte (Notepad++, bloc note…) et d’un navigateur web (Firefox, google Chrome…). Il existe deux types d’éditeur de texte :

  • Les éditeurs simples (standard) comme NotePad++, bloc note 
  • Les éditeur de type WYSIWYG (what you see is what you get (Ce que vous voyez c’est ce que vous obtenez)) comme  CKEditor, Trumbowyg, XStandard, TinyMCE et autres.

II-            IMPORTANCE, LIMITES ET SECURITE DU JAVASCRIPT

1-   Importance de javascript

Grace à javascript, on peut créer des pages web pouvant interagir avec l’utilisateur ainsi on peut :

  • Répondre aux actions de l’utilisateur (clic sur un lien, survol de la souris …)
  • Réaliser des animations graphiques
  • Créer et lire des cookies
  • Récupérer des valeurs entrées par l’utilisateur
  • Effectuer des calculs et des tests

2-   Limites de javascript

Les principales limites de ce langage sont :

  • Il ne permet pas de se connecter à une base de données
  • Il ne permet pas de lire et écrire sur un disque dur
  • Il est très dépendant du navigateur
  • Il n’échange pas avec d’autres machines connectées

3-   Sécurité du javascript

Javascript présente une grande sécurité du fait qu’il ne permette pas d’écrire ou de lire un fichier sur le disque dur du client, Ce qui annule le risque de fuite d’informations confidentielles.

Précédent

Suivant
- Aucun commentaire:
Libellés :
Inscription à : Articles (Atom)

Chapitre 1 : Introduction au langage Java et premier programme

1. Historique du langage java Java est un langage de programmation orienté objet développé par Sun Microsystems. Il est créé par James Go...