 |
Chapitre 1 SURCOUCHE A JAVASCRIPT |
| Précédent | Suivant | |
Surcouche à JavaScript
HTML et programmation
* HTML n'est pas un langage de programmation
* Langage de structuration de l'information
* Séparation des données et de l'apparence
* HTML contient l'information seulement
* CSS contient la présentation de l'information
* Scripts côté serveur (PHP) ==> dynamisme du contenu
* Génération de documents HTML
* Interaction avec des bases de données
* Contenu actualisé: ajout de données via interface, collaboration...
* Scripts côté client (JavaScript) ==> dynamisme de l'apparence
* Modification de la structure d'un document HTML déjà chargé
* Réaction aux actions de l'utilisateur
* Application interactive: navigation améliorée, didacticiels, jeux...
Langage JavaScript
* Langage de programmation interprété
* Programme directement traduit à son exécution
* Possibilité d'insérer du JavaScript dans un document HTML
* Balise: <script>
* Implique que le navigateur comprend / interprète ce langage
* JavaScript est le langage côté client utilisé par défaut
* Permet une interaction avec l'utilisateur
* Exemple: <button onclick="code">
* Permet de modifier dynamiquement un document HTML
* Accès balise via identifiant: p = document.getElementById("id")
* Modification contenu: p.innerHTML = "texte";
* Modification apparence: p.style.color = "couleur";
Exemple de JavaScript
<html>
<head>
<script>
var compteur = 0;
function incrementer() {
compteur++;
var par = document.getElementById("message");
par.innerHTML = "Compteur = " + compteur;
}
</script>
</head>
<body>
<button onclick="incrementer()">Incrémenter</button>
<p id="message"></p>
</body>
</html>
Langage TypeScript
* Programmation en JavaScript "délicate"
* Débuggage difficile
* Peu de contrôle du code avant exécution
* Structuration du code limitée
* Langage interprété ==> détection des erreurs à l'exécution
* Même s'il s'agit d'une erreur de syntaxe
* Programmation via TypeScript plus fiable
* TypeScript = surcouche à JavaScript pour combler les "défauts"
* Outil de traduction TypeScript vers JavaScript nécessaire
* Car le navigateur ne reconnaît pas TypeScript
* L'API JavaScript pour manipuler un document HTML reste valide
* A condition de respecter les règles de syntaxe de TypeScript
Avantages de TypeScript
* Phase de compilation ==> détection d'erreurs plus tôt
* Compilation = analyse + traduction du code
* Génération d'un code JavaScript (sans erreur de syntaxe !)
* Typage statique ==> plus d'erreurs détectées
* Le type des variables est défini par le développeur
* Et ne peut pas être changé dans tout le programme
* Permet au compilateur plus de contrôle du code
* Programmation orientée objet ==> code mieux structuré
* Structure procédurale (i.e. avec fonctions) limitée
* Structure objet plus adaptée à des projets ambitieux
* Maintenance et évolution du logiciel plus facile
* Programmation orientée objet particulièrement bien adaptée
au développement d'applications interactives
* Assimilation "naturelle" des éléments visuels à des objets
* Interactions entre éléments plus simples à écrire
Outils de développement pour TypeScript
* Plusieurs solutions libres et multiplateformes disponibles
* Compilateur TypeScript
* Développé en JavaScript
* Nécessite un interpréteur JavaScript ==> Node.js
* Node.js = environnement d'exécution de programmes JavaScript
* Proposition d'éditeur: Visual Studio Code
* Environnement de développement complet
* Gestion de projet
* Analyse de code et complétion en temps réel
* Lancement de la compilation dans l'éditeur