Historique et environnement de JavaScript

de : La formation complète sur JavaScript

Acheter

À propos de cette vidéo

En découvrant comment est apparu JavaScript, nous allons comprendre d'où viennent les incompatibilités entre navigateurs.

Un extrait de : La formation complète sur JavaScript

JavaScript est un langage devenu plus que jamais incontournable sur le web. Souple et facile à appréhender, c´est aussi un langage particulièrement méconnu, car beaucoup de développeurs considèrent qu´ils peuvent s´abstenir de son apprentissage avant de l´utiliser sur leurs pages. C´est pourquoi cette formation s´attache à présenter les bases de JavaScript. À travers l´apprentissage de ses éléments principaux, vous découvrirez comment intégrer vos scripts dans une page web et comment le code peut interagir avec vos documents en fonction des actions de l´utilisateur. Au fur et à mesure des exemples, vous verrez le fonctionnement de ce langage atypique, tout en respectant les bonnes pratiques habituellement admises.

EUR 49,80

Acheter

Formations similaires

Ce chapitre va présenter JavaScript de façon générale : quel est son cadre d'utilisation, quelles sont ses limites et quelle est sa place actuellement sur Internet ? Nous verrons ensuite les différents logiciels permettant de développer en JavaScript.

Présentation de JavaScript
- Dans ce chapitre, nous allons voir comment est apparu JavaScript, puis nous verrons quelle place il occupe actuellement sur Internet et quelles sont les limites de ce langage.
  
  Historique et actualité de JavaScript
  - En découvrant comment est apparu JavaScript, nous allons comprendre d'où viennent les incompatibilités entre navigateurs.
    
    Historique et environnement de JavaScript
    
    06:24
  - JavaScript est devenu depuis quelques années un langage incontournable du développement web. On s'en rend particulièrement compte lorsqu'on essaie de naviguer en désactivant JavaScript.
    
    Place de JavaScript actuellement sur Internet
    
    05:29
  - Il s'agit ici de bien comprendre l'environnement de JavaScript ainsi que la portée de ses données.
    
    L'environnement de JavaScript
    
    02:01
- Il existe de nombreux outils pour programmer en JavaScript, des plus simples aux plus complexes. Nous allons voir les différentes gammes.
  
  Outils pour développer en JavaScript
  - JavaScript est interprété et exécuté directement par le navigateur ; un simple bloc-notes peut suffire pour créer des scripts.
    
    La solution minimaliste : le bloc-notes et un navigateur
    
    02:49
  - Les fautes de frappe et de syntaxe sont courantes en programmation, un bloc-notes permettant de repérer ces erreurs est alors indispensable.
    
    Une solution intermédiaire : un bloc-notes évolué
    
    05:04
  - Un environnement de développement intégré permet de gérer l'ensemble du code d'un projet.
    
    Une solution complète : un EDI
    
    10:36
- L'environnement de JavaScript étant le navigateur, c'est essentiellement au niveau de celui-ci que vont se faire le test et le débogage des scripts.
  
  Déboguer et tester JavaScript
  - Tous les navigateurs récents possèdent des outils de débogage destinés aux développeurs.
    
    Outils de débogage des navigateurs
    
    04:31
  - Firefox propose de nombreuses extensions d'aide au développement. En voici quelques-unes parmi les plus utiles.
    
    Modules complémentaires de Firefox
    
    06:48
  - L'intérêt des éditeurs de texte avancés ou des EDI est qu'on peut voir les erreurs directement.
    
    Déboguer dans l'éditeur de texte
    
    08:56
  - Malgré les diverses extensions existantes, il peut être utile de se créer une page de test afin de tester des portions de code.
    
    Se créer une page de test 1/2
    
    13:49
  - Malgré les diverses extensions existantes, il peut être utile de se créer une page de test afin de tester des portions de code.
    
    Se créer une page de test 2/2
    
    07:55
  - Même si la compatibilité entre navigateurs n'est pas optimale, elle reste néanmoins globalement correcte, si ce n'est le cas particulier d'Internet Explorer.
    
    Les navigateurs et le cas Internet Explorer
    
    07:39
  - La sécurité sur Internet est une donnée fondamentale. Elle dépasse le cadre de cette formation, mais il est important d'en donner certains principes.
    
    Quelques aspects concernant la sécurité sur Internet
    
    05:18
Ce chapitre va permettre d'aborder les bases du langage JavaScript ainsi que des conseils de bonnes pratiques de codage.

Débuter avec JavaScript
- Ici vous sont présentées des erreurs habituelles commises par les débutants.
  
  Partir sur de bonnes bases
  - JavaScript est un langage de programmation. À ce titre, il est important d'en connaître les bases avant de commencer.
    
    Commencer par apprendre les bases
    
    01:53
  - Beaucoup de scripts sont disponibles, en particulier sur Internet, mais tous ne sont pas de bonne qualité ou suffisamment récents.
    
    Se méfier des scripts récupérés
    
    01:54
  - De nombreuses erreurs de débutants sont dues à une mauvaise connaissance du processus d'affichage d'une page web.
    
    Bien comprendre la chronologie d'affichage d'une page web
    
    03:18
  - JavaScript est réputé pour être un langage particulièrement permissif et pour laisser passer certaines erreurs de syntaxe. Utiliser cette permissivité constitue une erreur.
    
    Se méfier de la permissivité de JavaScript
    
    04:29
- Comme dans tout langage de programmation, les variables sont un des principaux éléments de JavaScript. Il est important de connaître les types possibles de variables et d'adopter des conventions de nommage.
  
  Les variables en JavaScript
  - Nous verrons dans cette partie comment déclarer, affecter et nommer une variable.
    
    Généralités et nommage des variables
    
    08:52
  - Voici une liste des mots réservés en JavaScript.
    
    Mots réservés en JavaScript
    
    01:52
  - JavaScript permet de déclarer des constantes qui se différencient des variables en ne pouvant pas changer de valeur.
    
    Définir une constante
    
    01:42
  - Bien que JavaScript soit faiblement typé, il est important de connaître les différents types de valeurs existant dans ce langage.
    
    Types des variables
    
    06:09
  - En dehors des types nombre, chaîne et booléen, il existe d'autres types de valeurs dérivées du type object.
    
    Types de variables complémentaires
    
    04:28
  - Il existe différentes façons de déclarer des variables : de façon littérale ou à l'aide d'un constructeur.
    
    Déclaration des variables
    
    12:03
  - Les variables peuvent avoir une portée globale ou locale, mais les créations de contextes différents sont très limitées en JavaScript.
    
    La portée des variables
    
    07:31
  - JavaScript permet de nommer des variables de façon dynamique et de préciser la portée que l'on veut leur donner.
    
    Nommer des variables dynamiquement
    
    06:13
- Les opérateurs vont permettre d'effectuer des traitements sur les variables. Ils permettent notamment d'effectuer des opérations, de concaténer ou de comparer des valeurs.
  
  Les opérateurs
  - Les opérateurs sont des éléments du langage qui vont permettre la manipulation des données, que ce soit pour les affecter, les modifier ou les comparer.
    
    Généralités sur les opérateurs
    
    02:50
  - Les opérateurs d'affectation vont être utilisés pour affecter et / ou modifier des valeurs.
    
    Les opérateurs d'affectation
    
    11:09
  - Les opérateurs de comparaison vont permettre de comparer des expressions et de retourner la valeur booléenne de la comparaison.
    
    Les opérateurs de comparaison
    
    07:48
  - Les opérateurs logiques vont évaluer l'équivalent booléen de deux expressions et retourner le résultat de leur comparaison.
    
    Les opérateurs logiques
    
    10:56
  - Les opérateurs binaires servent à effectuer des comparaisons bits à bits des représentations binaires de valeurs numériques.
    
    Les opérateurs binaires
    
    03:06
  - Il s'agit d'opérateurs présents dans le langage mais n'appartenant à aucune catégorie précise.
    
    Les opérateurs spéciaux
    
    08:18
Les structures de contrôle vont permettre d'effectuer ou non certaines actions en fonction de tests logiques. Elles peuvent être de forme conditionnelle ou itérative.

Les structures de contrôle
- Ici une présentation rapide vous est proposée des différentes structures de contrôle ainsi que la notion de bloc d'instructions.
  
  Généralités sur les structures de contrôle
  
  01:58
- La déclaration if / else permet de conditionner l'exécution d'un bloc d'instructions en fonction de la réussite d'une condition.
  
  Déclaration if / else
  
  05:54
- La syntaxe de if / else peut présenter certains pièges qu'il est bon de connaître pour les éviter.
  
  Exemples et pièges à éviter avec if / else
  
  10:22
- L'opérateur ternaire offre une syntaxe compacte pour remplacer une déclaration if / else.
  
  L'opérateur ternaire
  
  04:13
- La déclaration switch permet de comparer une expression à différentes valeurs possibles afin de traiter uniquement certains cas. Elle est utilisée comme alternative à de trop nombreux if / else.
  
  Déclaration switch / case
  
  06:34
- Switch est une instruction particulière en JavaScript dont le comportement est plutôt inhabituel.
  
  Comportement de switch / case
  
  04:57
- La boucle for est la plus commune des structures de boucle en JavaScript. Son utilisation est relativement simple et intuitive.
  
  La boucle for
  
  04:18
- La boucle for / in va permettre de créer une boucle pour chaque propriété d'un objet.
  
  Une variante de for : for / in
  
  05:30
- La boucle while est souvent préférée par les développeurs un peu expérimentés car elle est plus souple dans son utilisation. Ceci dit, cette souplesse est susceptible d'introduire plus facilement des boucles infinies.
  
  La boucle while
  
  05:13
- La boucle do / while est presque identique à while sauf qu'elle oblige à passer au moins une fois dans le bloc d'instructions.
  
  Une variante de while : do / while
  
  02:03
- JavaScript donne la possibilité de tester des expressions et d'intercepter les éventuelles erreurs.
  
  Intercepter les erreurs avec try / catch
  
  05:16
- En complément de ces structures de contrôle, certaines instructions permettent de modifier le comportement initial.
  
  Instructions relatives aux structures de contrôle
  
  04:40
- Les fonctions récursives ne s'appuient pas sur des boucles for ou while, mais s'appellent elles-mêmes tant qu'une condition n'est pas remplie.
  
  Un type de boucle particulier : les fonctions récursives
  
  06:58
Le core JavaScript, par opposition au client-side JavaScript, regroupe toutes les parties accessibles dans n'importe quel environnement utilisant JavaScript.

Le tronc commun : core JavaScript
- Les objets sont les données fondamentales de JavaScript : c'est à partir d'eux que l'on va pouvoir créer nos scripts. Les objets du core JavaScript se retrouvent dans tous les types d'environnement JavaScript.
  
  Présentation des différents objets généraux de JavaScript
  
  04:23
- Les booléens sont essentiels en programmation, mais ne nécessitent pas de méthodes ni de propriétés particulières.
  
  L'objet Boolean
  
  06:09
- La gestion des nombres est particulière en JavaScript et il faut se méfier des opérations sur les nombres décimaux.
  
  Généralités et propriétés de l'objet Number
  
  05:18
- Nous verrons ici les principales méthodes utiles applicables aux nombres.
  
  Méthodes de l'objet Number
  
  03:53
- Les chaînes de caractères utilisent le format Unicode et ne posent pas de problème particulier concernant l'encodage.
  
  Généralités sur l'objet String
  
  04:58
- Découvrons ensemble les principales méthodes utiles applicables aux chaînes de caractères.
  
  Méthodes de l'objet String : partie 1
  
  06:48
- Nous apprendrons dans cette partie à récupérer des portions d'une chaîne de caractères.
  
  Méthodes de l'objet String : partie 2
  
  02:34
- Cette partie s'intéresse aux méthodes de l'objet String permettant de récupérer des motifs de caractères.
  
  Méthodes de l'objet String : partie 3
  
  05:32
- L'objet Array est assez restrictif en JavaScript, mais il est très simple à utiliser.
  
  Généralités et propriétés de l'objet Array
  
  03:23
- Certaines méthodes de l'objet Array modifient le tableau initial.
  
  Méthodes de l'objet Array modifiant sa structure
  
  06:41
- Object est en fait un conteneur global qui dispose de très peu de méthodes intéressantes.
  
  Les objets Objects
  
  07:27
- Il n'existe pas de type date en JavaScript. Malgré tout, l'objet Date permet de nombreuses manipulations sur les formats de date.
  
  Généralités sur l'objet Date
  
  05:49
- L'objet Date dispose de très nombreuses méthodes plus ou moins utiles ou faciles à utiliser.
  
  Méthodes utiles de l'objet Date
  
  08:51
- L'objet Math est aussi un objet particulier : il ne possède pas de constructeur et sert uniquement à fournir des fonctions mathématiques.
  
  L'objet Math
  
  08:02
- JavaScript utilise principalement des méthodes d'objets pour effectuer ses traitements. Cependant, il existe quelques fonctions considérées comme globales et donc accessibles partout.
  
  Les fonctions globales de JavaScript 1/2
  
  09:51
- JavaScript utilise principalement des méthodes d'objets pour effectuer ses traitements. Cependant, il existe quelques fonctions considérées comme globales et donc accessibles partout.
  
  Les fonctions globales de JavaScript 2/2
  
  09:09
JavaScript est particulièrement adapté au développement web et fournit une interface très complète pour manipuler les éléments d'une page web via le Modèle Objet du Document.

Le client-side JavaScript et le DOM
- Le DOM est la représentation de la structure XML d'un document (X)HTML sous forme d'objets imbriqués.
  
  Qu'est-ce que le DOM ?
  - Le format XHTML se base sur le XML et doit respecter certaines normes.
    
    Rappels sur le format (X)HTML
    
    04:46
  - Nous verrons comment utiliser les outils de développement pour visualiser le DOM.
    
    Visualisation du DOM
    
    04:24
  - Le DOM est créé en même temps que la page, et est perdu lorsqu'on la quitte.
    
    Construction du DOM
    
    07:10
  - L'environnement de JavaScript et son accès aux éléments extérieurs à la page sont limités pour des raisons de sécurité.
    
    Limites de l'utilisation de JavaScript
    
    04:46
  - Maintenant que les bases sont posées, nous pouvons mieux cerner ce que l'on va pouvoir faire ou non avec JavaScript.
    
    Ce que l'on peut faire ou non avec JavaScript
    
    08:39
- Pour commencer à se familiariser avec la modification du DOM, nous allons créer un premier script fonctionnel : le classique Hello World que l'on va un peu améliorer.
  
  Un premier exemple fonctionnel : afficher l'heure
  - Nous avons déjà vu la méthode alert. Celle-ci va nous aider à mieux comprendre la chronologie d'affichage de la page.
    
    La méthode alert()
    
    07:49
  - La méthode alert() n'est pas satisfaisante pour ce que l'on veut réaliser, on va donc préférer écrire dans la page.
    
    Écrire dans la page
    
    09:13
  - Pour permettre de séparer le contenu JavaScript du contenu HTML, il est nécessaire d'utiliser les événements comme propriétés d'objets et non comme attributs HTML.
    
    Gérer les événements
    
    09:49
  - Pour rendre le script totalement indépendant du contenu HTML, on va créer les éléments directement en JavaScript.
    
    Générer le contenu HTML
    
    06:16
  - La méthode appendChild permet d'insérer du contenu dans une balise après les éléments existants. D'autres méthodes permettent d'insérer à un endroit spécifique ou des éléments non HTML.
    
    Définir où insérer le contenu
    
    09:33
  - Au final, nous allons afficher l'heure plutôt que Hello World.
    
    Insérer l'heure dans la page
    
    05:55
  - Afficher l'heure n'a d'intérêt que si l'heure se met à jour ; on va donc utiliser un timer pour ajuster l'affichage.
    
    Ajuster l'affichage de l'heure à l'aide d'un timer
    
    09:09
  - Après quelques derniers ajustements, notre script sera entièrement fonctionnel.
    
    Derniers ajustements
    
    07:26