Vidéo-tutoriel : apprendre JavaScript et jQuery

Bienvenue au cours ultime de JavaScript et jQuery.

Cette vidéo explique ce qu'est JavaScript et ce qu'il nous apporte.

Dans cette vidéo, tu apprendras quel éditeur nous allons utiliser, et nous l'installerons ensemble.

Dans cette vidéo, il est expliqué comment utiliser les clics avec JavaScript et comment fonctionnent les variables.

L'instruction If. If (traduit en français: si) est très fréquemment utilisé en programmation. Par exemple, lorsque l'on souhaite exécuter quelque chose uniquement si une condition spécifique est remplie.

Dans cette vidéo, il est question des tableaux (arrays) en JavaScript. Ils nous permettent de stocker plusieurs informations au sein d'une seule variable.

Dans cette vidéo, tu apprendras à connaître les boucles For. Ils nous permettent d'exécuter un code spécifique plusieurs fois de suite.

Les fonctions sont une sorte de mini-programme que nous pouvons réutiliser à tout moment après les avoir créées. Par exemple, lorsque vous appuyez sur le bouton Accueil de votre téléphone, une fonction est appelée pour vous ramener à votre écran d'accueil. Les fonctions rendent le travail beaucoup plus facile.

Ici, le résultat du défi (à savoir un quiz) est affiché, et en plus les bases HTML sont créées.

Ici, le CSS (l'apparence) du quiz est programmé.

Ici, le JavaScript de notre quiz est programmé et expliqué.

Tu as déjà vu comment les fonctions avec un paramètre fonctionnent. Maintenant, regardons les fonctions avec plusieurs paramètres. Plusieurs paramètres sont utilisés lorsque l'on veut utiliser une fonction avec plusieurs variables différentes. En mathématiques, par exemple, lors de l'addition de plusieurs valeurs.

Il y a des variables globales et locales. En résumé : les variables globales sont celles créées en dehors des fonctions, et les variables locales sont celles créées à l'intérieur des fonctions. Ici, nous allons examiner en détail comment cela fonctionne.

En langages de programmation, il est possible de définir des fonctions de manière à ce qu'elles aient une valeur de retour. Jusqu'à présent, nous avons seulement eu des fonctions qui exécutaient des tâches mais ne renvoyaient rien avec quoi nous aurions pu travailler. C'est pourquoi nous allons maintenant regarder le mot-clé "return".

Dans cet article, nous abordons les opérateurs mathématiques et les opérateurs d'affectation. Les opérateurs mathématiques sont des choses assez simples comme l'addition, la soustraction, etc., tandis que les opérateurs d'affectation permettent de réaliser assez facilement des opérations simples telles qu'une augmentation de 5. Comme les deux sont importants en programmation, ces deux thèmes sont abordés ici.

Il y a trois (ou quatre) types différents de boucles en programmation : la boucle Do-while, la boucle While et la boucle For. Nous avons déjà appris la boucle For. Maintenant, nous nous intéressons à la boucle Do-while (à contrôle en pied) et à la boucle While (à contrôle en tête).

Cet article traite d'une alternative aux conditions If. Il s'agit de Switch (interrupteur) et Case (cas). Vous avez en quelque sorte un interrupteur qui passe par les différents cas et reste sur celui qui est actif.

Nous avons déjà traités les tableaux, mais sans entrer dans les détails. Il y a encore beaucoup plus à savoir sur les tableaux. La propriété la plus importante d'un tableau JavaScript est le nombre d'éléments (length). Cependant, le tableau a d'autres propriétés comme par exemple l'index, qui nous donne des informations sur la position 0 du tableau.

Les objets sont un concept extrêmement important et intéressant dans de nombreux langages de programmation. En principe, on peut décrire tout comme un type d'objet. Prenons un objet que nous voyons généralement dans les rues: une VOITURE. Une voiture a certaines propriétés/caractéristiques et peut effectuer certaines actions.

Regardons comment nous pouvons créer des objets en JavaScript. Pour ce faire, nous créons une fonction constructeur et deux instances de notre objet dans la balise Head de notre page. Dans la fonction constructeur, qui porte le même nom que notre objet, nous indiquons au programme que les paramètres passés à la fonction constructeur lors de la création d'une instance de l'objet doivent être les valeurs de l'objet.

Comme base pour les fonctions des objets, nous commençons avec le code du dernier tutoriel, dans lequel nous avons créé des variables qui sont générées lors de chaque instance de notre objet.

Dans ce tutoriel, tu apprendras à connaître l'objet Math. Il s'agit d'un objet basé sur la classe Math et qui vient avec plein de propriétés et de fonctions intéressantes.

Dans cette vidéo, il est question de l'objet Date ou de la classe Date. Il s'agit d'objets que l'on peut utiliser pour intégrer le temps dans un programme. Il ne s'agit pas nécessairement de l'heure ou de la date, mais cela peut aussi concerner une période de temps. Un objet Date contient le temps écoulé depuis le 01-01-1970 00:00:00. Il existe différentes façons de passer des paramètres au constructeur Date.

Dans cette vidéo, tu apprendras comment construire une horloge interactive avec JavaScript.

Dans cette vidéo, il est question de l'héritage et du polymorphisme. Deux concepts de la programmation orientée objet.

Dans cet article, nous traitons la question : Qu'est-ce que jQuery ? jQuery est une bibliothèque JavaScript qui nous permet de rendre nos sites web encore plus cool.

Ici, tu apprends comment traiter les clics beaucoup plus facilement avec jQuery.

Dans ce tutoriel, vous apprendrez comment modifier l'apparence d'un site web avec jQuery. Pour cela, nous pouvons par exemple aisément écraser un attribut d'un champ. Dans cet exemple, nous pouvons modifier le lien de l'iframe (c'est-à-dire la src/source) en survolant le carré. On pourrait modifier le code sans problème et par exemple agrandir le carré en remplaçant les attributs Height et Width lorsque l'on survole. En général, on peut désormais utiliser cette méthode pour modifier l'apparence d'un site web sans difficulté.

Une des caractéristiques cool de jQuery est de faire disparaître un élément. Dans cet exemple, nous faisons disparaître un bouton dès que nous cliquons sur un autre bouton. Nous utilisons la fonction FadeOut (« Fonction de disparition ») pour cela. Pour afficher à nouveau l'élément, nous utilisons la fonction FadeIn.

Dans cette vidéo, nous traitons de l'animation en jQuery. Il s'agit de quelque chose qui bouge. Nous nous assurons donc qu'un élément sur notre site web se déplace ou change. Pour cela, il y a une fonction en jQuery. Celle-ci s'appelle animate() et attend trois paramètres.

Regardons ce qu'est jQuery UI.

L'accordéon est un widget qui nous permet, comme un accordéon, de voir seulement certaines parties de l'ensemble. Cela est particulièrement utile lorsque l'on souhaite transmettre de nombreuses informations, mais qu'elles seraient bien trop confuses sous forme de gros texte.

Ce tutoriel porte sur les objets triables dans jQuery UI. Il s'agit d'éléments triables. Tu connais ça si tu utilises des sites de productivité comme Wunderlist ou Trello. La possibilité de rendre les éléments triables est une fonctionnalité très cool que tu peux utiliser dans de nombreuses applications différentes.

Parfois, il arrive qu'on veuille rendre la taille d'un élément modifiable par l'utilisateur. Dans ce cas, les redimensionnables sont exactement ce qu'il faut. En effet, ils permettent précisément cela. En bas à droite de l'élément, on voit un petit triangle que l'on peut cliquer, puis, en maintenant le curseur de la souris enfoncé, on peut agrandir ou réduire l'élément.

En jQuery UI, il est très facile de construire un élément à l'aide de Draggables, avec lequel on peut le déplacer de manière bidirectionnelle. Voyons comment faire ici.

Les barres de progression ou les barres d'avancement sont un excellent moyen de montrer à l'utilisateur à quel point il est avancé dans un processus spécifique. Dans le processus de vente d'une boutique en ligne par exemple, ou dans une enquête, cela aide l'utilisateur à savoir où il en est dans l'exécution des étapes.

Dans ce tutoriel, je veux aborder brièvement les effets dans jQuery UI. Il existe en effet des effets assez cool qui permettent d'améliorer l'apparence de votre site web et en plus, de surprendre complètement vos utilisateurs.

Dans cette vidéo, tu verras le résultat du défi. Une page FAQ.

Ici, nous mettons en place la page FAQ.

Dans cette vidéo, le jeu cérébral est présenté, qui est programmé dans ce chapitre.

Tout d'abord, nous nous occupons de la structure et de l'apparence du jeu.

Maintenant, nous nous occupons de certaines fonctionnalités du jeu.

Le joueur peut déjà effectuer les premières actions dans le jeu, maintenant nous allons nous assurer que le jeu peut être correctement redémarré et arrêté.

Maintenant, il s'agit seulement d'intégrer le minuteur dans le jeu pour calculer correctement le score et pour limiter le temps du jeu. De plus, nous effectuerons quelques petites étapes supplémentaires pour terminer le jeu.

Ici, l'application du chapitre est présentée. Il s'agit d'une application/site web de liste de tâches à faire.

Maintenant, créons les fondations et voyons comment nous pouvons créer et modifier le thème correspondant avec jQuery Mobile.

Comme nous suivons une approche orientée objet, nous devons mettre en place l'architecture correspondante. C'est ce dont nous nous occupons ici.

Dans cette vidéo, nous ajoutons les pages et nous nous occupons de la page sur laquelle nous créons des tâches.

De la même manière que la page de création, la page d'édition doit être remplie et recevoir la fonctionnalité correspondante.

Maintenant, nous pouvons nous occuper à nouveau de l'architecture et de créer la structure de données.

Maintenant que nous avons notre structure de données, nous pouvons facilement l'appeler dans notre interface utilisateur.

Lors de la programmation, il a été nécessaire de faire quelques étapes dans "le flux d'explication" que nous pouvons maintenant corriger. En plus, nous nous occupons de la sauvegarde permanente des données et finalisons l'application.