Les Filtres AngularJS

Les Filtres AngularJS :

AngularJs contient des Filtres pour formater les données, ci-dessous quelques exemple :

- currency : Formater un nombre en format devise

- date : Formater une date

uppercase : Afficher une chaine de caractére en majuscule

lowercase : Afficher une chaine de caractére en miniscule

- orderBy : Ce filtre, o va l’ajouter dans une directive, il est utilisé pour modifier l’ordre en choisissant un critére

- filter : on l’utilise pour filtrer dans les tableaux, par exemple on veux filtrer un liste et chercher les noms qui contient la lettre ‘r’

– On va utiliser une zone de texte pour donner la main à l’utilisateur de faire la recherche, pour ce faire on va utiliser ng-model :

 

Développer un portfolio en HTML, CSS et JavaScript

Dans cette serie de vidéos, nous allons développer ensemble un portfolio en HTML, CSS et JavaScript.

La première vidéo sera consacrée à la mise en place de l’environnement et la strcture du projet :

La deuxième vidéo vous montre comment installer les fonts à utiliser dans la création du portfolio ainsi que font awesome:

Dans cette troisième vidéo, nous allons développer la page d’accueil de notre portfolio :

L’objet History

L’objet History :

L’objet History représente un tableau d’URLs visitées par l’utilisateur. En utilisant cet objet, vous pouvez naviguer entre les pages, par exemple(aller à la page précédente, suivante, etc…).

N.B : vous pouvez accéder à l’objet History soit en utilisant l’objet window ou bien directement, ci-dessous un exemple :

– Les propriétés de l’objet History : en fait on a qu’une seule propriété, c’est la propriété length, cette dernière nous permet de retourner la longueur des URLs.

– Les méthodes de l’objet History :

  • back(); : la méthode back nous permet d’aller à la page précédente.

  •  forward(); : cette méthode nous permet d’aller à la page suivante.

  • go(3); : si cette méthode prend un nombre positif, par exemple 3 dans ce cas, on va aller à la page suivante numéro 3.

  • go(-3); : si cette méthode prend un nombre négatif, par exemple 3 dans ce cas, on va aller à la page précédente numéro 3.

 

L’objet Window

L’objet Window

Window est un objet qui correspond à la fenêtre dans laquelle s’affiche une page Web. Un objet window est créé automatiquement par le navigateur. Notez qu’un objet window est un objet du navigateur et non un objet javascript(les objets javascript sont : array, date, string, number…).

Nous allons voir certaines méthodes de l’objet window  :

Alert

Affiche un texte dans un message d’alerte u d’information, la boite de message n’est pas modifiable.

  • Exemple :

Confirm

Affiche le paramètre texte dans un message d’alerte avec 2 boutons de confirmation. Retourne true si l’utilisateur clique sur Ok, retourne false si l’utilisateur clique sur Annuler ou appuye sur la touche Echap.

  • Exemple :

Open

Ouvrir une nouvelle fenêtre.

  • Exemple :

Close

Fermer les fenêtres. Si la fenêtre est ouverte par la méthode open aucune confirmation ne sera demandée pour fermer la page sinon une demande de confirmation vous sera demandée.

  • Exemple :

Prompt

Une boite de dialogue est affichée avec une zone de texte saisissable, et deux boutons valider et annuler, si l’utilisateur clique sur valider la méthode retourne le texte saisi et si on clique sur annuler elle retourne null.

  • Exemple :

 

JavaScript Array

JavaScript Array :

JavaScript Array est une collection qui regroupe des éléments de même type, nous avons 3 méthodes pour créer un array :

1 – Initialisateur d’objet (Array) :

  • Syntaxe :

  • Exemple :

  • Résultat :

2 – le mot clé new :

Nous allons voir comment faire pour créer une instance array en utilisant le mot clé new.

  • Syntaxe :

  • Exemple :

  • Résultat :

3 – En utilisant un constructeur :

La troisième et dernière méthode pour créer une instance, c’est l’utilisation du constructeur.

  • Syntaxe :

  • Exemple :

  • Résultat :

 

JavaScript String

JavaScript String :

Javascript String est un objet qui représente une séquence de caractère.

1- Comment créer un objet string en javascript :

Il y a en fait deux méthodes pour créer un objet javascript string :

       – Initialisateur d’objet (String) :

un objet string en javascript  est crée en utilisant les guillemet (doubles quotes).

Syntaxe : 

Exemple :

Résultat :

      – En utilisant le mot clé New :

Syntaxe :

Exemple :

Résultat :

2- Les méthodes String en javascript :

Nous allons voir quelques méthodes string qui nous permet de manipuler les chaines de caractères.

  • charAt(position) : retourne le caractère dans la position demandée.

Résultat :

  • toUpperCase() : retourne la valeur en majuscule.

Résultat :

  • toLowerCase() : retourne la valeur en minuscule.

Résultat :

 

Comment créer des objets en javascript

Comment créer des objets en javascript :

Un objet JS est une entité qui se compose des priorités et méthodes, il y a 3 façons pour créer un objet javascript.

1- Initialisateur d’objet :

Un initialisateur d’objet est une liste contenant plusieurs propriétés et leurs valeurs associées, cette liste étant entourée d’accolades ({}).

Syntaxe :

Exemple :

Résultat :

2- En utilisant le mot clé New :

Syntaxe :

Exemple :

Résultat :

 3- En utilisant un constructeur :

Tout d’abord, nous avons besoin de créer une fonction avec des arguments, Chaque valeur d’argument peut être attribuée dans l’objet actuel en utilisant le mot-clé this.

Exemple :

Résultat :

 

Les fonctions JS

Les fonctions JS :

javascript2

Les fonctions en général sont utilisées pour éviter la redondance et avoir un code bien structuré et organisé, du coup on aura deux principaux avantages : la réutilisation du code et ne pas avoir beaucoup de lignes de code.

Syntaxe (fonction sans paramètres) :

Exemple :

Syntaxe (fonction avec paramètres) :

Exemple :

 

Les structures répétitives

javascript2

Les structures répétitives :

Une structure répétitive, également appelée structure itérative ou encore boucle, permet de répéter plusieurs fois l’exécution d’une ou plusieurs instructions.

La boucle for :

Elle est utilisée dans le cas ou le nombre d’itération est connu

Syntaxe : 

Exemple :

La boucle While :

Il est recommandé d’utiliser la boucle while dans le cas ou le nombre d’itérations est inconnu.

Syntaxe :

Exemple :

La boucle Do…While :

Il est recommandé d’utiliser la boucle while dans le cas ou le nombre d’itérations est inconnu, la seule différence entre cette boucle et la boucle while c’est que la boucle do…while exécute le code au moins une fois même si la condition d’arrêt n’est pas vérifiée.

Syntaxe :

Exemple :

 

Les structures conditionnelles en JavaScript

Les structures conditionnelles en JavaScript :

javascript2

if…else :

les structures conditionnelles sont utilisées pour exécuter le code si la condition est vraie ou fausse . Il existe trois formes de if en JavaScript

1- If :

Syntaxe

Le code sera exécute si la condition est vraie, ci-dessous un exemple :

2- if…else :

Syntaxe

Si la condition IF n’est pas vraie, le code dans le bloc ELSE sera exécuté, ci-dessous un exemple :

3- if…else if :

Syntaxe

c’est ce qu’on appelle les conditions imbriquées, ci-dessous un exemple :

Switch :

Exécute un traitement au choix en fonction de la valeur d’une expression conditionnelle.

Syntaxe :

Exemple :