JavaScript

Les Filtres AngularJS

Posted by OpenTuto
mars 27, 2017 Non classé Leave a Comment

Les Filtres AngularJS :

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

- currency : Formater un nombre en format devise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<div ng-app="myApp" ng-controller="Ctrl">
<p>le montant est :  {{montant | currency}}</p>
</div>
 
<script>
var app = angular.module('myApp',[]);
app.controller('Ctrl',function($scope){
$scope.montant=200;
 
});
 
</script>
 
</body>
</html>

- date : Formater une date

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<div ng-app="myApp" ng-controller="dateCtrl">
 
<p>Date = {{ dateJour | date }}</p>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('dateCtrl', function($scope) {
    $scope.dateJour = new Date();
});
</script>
 
 
 
</body>
</html>

– uppercase : Afficher une chaine de caractére en majuscule

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<div ng-app="myApp" ng-controller="Ctrl">
<p>Votre site préféré est {{nomSite | uppercase}}</p>
</div>
 
<script>
var app = angular.module('myApp',[]);
app.controller('Ctrl',function($scope){
$scope.nomSite="opentuto";
 
});
 
</script>
 
</body>
</html>

– lowercase : Afficher une chaine de caractére en miniscule

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<div ng-app="myApp" ng-controller="Ctrl">
<p>Votre site préféré est {{nomSite | lowercase}}</p>
</div>
 
<script>
var app = angular.module('myApp',[]);
app.controller('Ctrl',function($scope){
$scope.nomSite="OPENTUTO";
 
});
 
</script>
 
</body>
</html>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<div ng-app="myApp" ng-controller="namesCtrl">
 
<p>Les noms ci-dessous sont triés par age:</p>
<ul>
  <li ng-repeat="x in names | orderBy:'age'">
    {{ x.name + ', ' + x.age }}
  </li>
</ul>
 
</div>
 
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Rachid',age:'31'},
        {name:'Jhon',age:'25'},
        {name:'Reda',age:'10'},
        {name:'Toto',age:'40'},
        {name:'Mehdi',age:'28'},
        {name:'Badre',age:'30'},
        {name:'Fred',age:'36'},
    
        ];
});
</script>
 
</body>
</html>

- 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’

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<div ng-app="myApp" ng-controller="namesCtrl">
 
<p>Les noms ci-dessous contienent la lettre "r":</p>
<ul>
  <li ng-repeat="x in names | filter : 'r'">
    {{ x }}
  </li>
</ul>
 
</div>
 
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Rachid',
        'Jhon',
        'Reda',
        'Toto',
        'Mehdi',
        'Badre',
        'Fred'
    
        ];
});
</script>
 
</body>
</html>

– 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 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<div ng-app="myApp" ng-controller="namesCtrl">
 
<ul>
  <input type="text" ng-model="fil" placeholder= "tapez quelque chose pour filtrer..." size="30">
  <li ng-repeat="x in names | filter : fil">
    {{ x }}
  </li>
</ul>
 
</div>
 
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Rachid',
        'Jhon',
        'Reda',
        'Toto',
        'Mehdi',
        'Badre',
        'Fred'
    
        ];
});
</script>
 
</body>
</html>

 

Synchronisation des données entre la vue et le model (binding des données)

Posted by OpenTuto
mars 21, 2017 AngularJS, Non classé Leave a Comment

Synchronisation des données entre la vue et le model (binding des données) :

Dans ce tuto, nous allons voir comment faire pour synchroniser les données entre la partie vue (html) et model (controller).

Qu’est-ce que le data-binding ?

Tout simplement, c’est la liason entre la partie vue de votre application (view) et la partie logique (model). Donc, pour bien comprendre le principe, nous allons les directives suivantes.

 1. ng-bind :

Cette directive est utilisée pour faire la liason entre un élément HTML (view) et une propriété dans la partie logique (model).
N.B : Cette directive est utilisée juste pour l’affichage des propriétés, on peut l’utiliser par exemple dans une balise <p>

Exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
 
<div ng-controller="ctrl">
<p ng-bind="nom"></p>
<p>on a récupéré le nom depuis le model et l'afficher en utilisant la directive ng-bind</p>
 
</div>
 
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller("ctrl", function($scope){
$scope.nom="toto";
      
 
});
</script>
 
</body>
</html>

Remarque :

On peut utiliser l’expression {{}} au lieur de la directive ng-bind, cidessous un exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Exemple :
 
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
 
<div ng-controller="ctrl">
{{nom}}
<p>on a récupéré le nom depuis le model et l'afficher en utilisant l'expression {{}}</p>
 
</div>
 
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller("ctrl", function($scope){
$scope.nom="toto";
      
 
});
</script>
 
</body>
</html>

2. ng-model :

On peut dire que la directive ng-model joue le rôle inverse de la directive ng-bind, cette dernière nous permet de lire une donée entrante par un utilisateur et l’envoyer au model pour traitement, on peut l’utiliser avec les balises (input, select, textarea,…).

Exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
 
<div ng-controller="ctrl">
<input ng-model="nom"/>
Vous avez écrit : {{nom}}
 
</div>
 
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller("ctrl", function($scope){
$scope.nom="toto";
      
 
});
</script>
 
</body>
</html>

 

 

Développer un portfolio en HTML, CSS et JavaScript

Posted by OpenTuto
Projets HTML CSS JavaScript Leave a Comment

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

Posted by OpenTuto
octobre 10, 2016 JavaScript Leave a Comment

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 :

1
2
3
4
5
window.history
 
ou
 
history

– 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.

1
2
3
4
5
var resultat = window.history.length;
 
ou
 
var resultat = history.length;

– Les méthodes de l’objet History :

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

1
history.back();

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

1
history.forward();

  • 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.

1
history.go(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.

1
history.go(-3);

 

L’objet Window

Posted by OpenTuto
septembre 22, 2016 JavaScript Leave a Comment

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 :

1
2
3
4
5
6
<script type="text/javascript">  
function afficher(){  
alert("Hello world!");  
}  
</script>  
<input type="button" value="click" onclick="afficher()"/>

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 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">  
function afficher(){  
var test= confirm("confirmez-vous");  
if(test==true){  
alert("c'est ok:");  
}  
else{  
alert("annuler");  
}  
  
}  
</script>  
  
<input type="button" value="delete record" onclick="msg()"/>

Open

Ouvrir une nouvelle fenêtre.

  • Exemple :

1
2
3
4
5
6
<script type="text/javascript">  
function afficher(){  
open("http://www.opentuto.com");  
}  
</script>  
<input type="button" value="opentuto" onclick="afficher()"/>  

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 :

1
2
3
4
<script language=javascript>
   var test=window.open("http://www.opentuto.com");
</Sscript>
<a href="javascript:test.close()">Fermer</a>

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 :

1
2
3
4
5
6
7
8
9
<script type="text/javascript">  
function afficher(){  
var test= prompt("quel est votre site préféré?");  
alert(test);  
  
}  
</script>  
  
<input type="button" value="click" onclick="afficher()"/>

 

JavaScript Array

Posted by OpenTuto
septembre 19, 2016 Non classé Leave a Comment

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 :

1
var nom_array=[valeur1,valeur2,.....,valeurN];

  • Exemple :

1
2
3
4
5
6
<script>  
var site =["open","tuto"];  
for (i=0;i<site.length;i++){  
document.write(site[i] + "<br/>");  
}  
</script>

  • Résultat :

1
2
open
tuto

2 – le mot clé new :

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

  • Syntaxe :

1
var nom_array=new Array();

  • Exemple :

1
2
3
4
5
6
7
8
9
10
<script>  
var i;  
var site = new Array();  
site[0] = "open";  
site[1] = "tuto";  
  
for (i=0;i<site.length;i++){  
document.write(site[i] + "<br>");  
}  
</script>

  • Résultat :

1
2
open
tuto

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 :

1
var nom_array=new Array("valeur1","valeur2","valeurN");

  • Exemple :

1
2
3
4
5
6
<script>  
var site=new Array("open","tuto");  
for (i=0;i<site.length;i++){  
document.write(site[i] + "<br>");  
}  
</script>

  • Résultat :

1
2
open
tuto

 

Première Application Angular 2

Posted by OpenTuto
septembre 15, 2016 AngularJS Leave a Comment

Dans cette exemple, nous allons voir comment développer et exécuter une petite application Angular 2 et TypeScript.

Il est aussi possible de développer en Angular 2 avec JavaScript et Dart

Introduction:

Cette application respecte la structure d’une application Angular 2 réelle et affiche un message simple :

Voir le résultat final de l’application ici.

Développement de l’application

  • prérequis: Installer Node.js et npm.
  • Etape 1: Créer et configurer le projet.
  • Etape 2: Créer votre application.
  • Etape 3: Create et ajouter un composant à votre application.
  • Etape 4: Démarrer votre application.
  • Etape 5: Define the web page that hosts the application.
  • Etape 6: Développez et executer l’application.
  • Etape 7: Make some live changes.
  • Conclusion

Installer Node.js et npm

Si Node.js et npm ne sont pas installés dans votre machine, installez-les. Pour notre exemple, nous aurons besoin de la version node v5.x.x ou plus et npm 3.x.x ou plus.

Pour verifier quelle version utilisez-vous, exécuter node -v et npm -v dans le terminal (Invite de commande pour Windows).

npm est installé avec Node.js

Etape 1: Créer et configurer le projet

Créer le dossier du projet:

Utilisez le terminal/invite de commande pour créer le dossier/répertoire du projet et deplacez-vous à ce dernier.

1
2
mkdir angular2-quickstart
cd    angular2-quickstart

Créer les fichiers de configuration

Notre projet Angular a besoin de plusieurs fichiers de configurations:

  • package.json ce fichier contient les dépendances du projet (fichier de configuration de NPM).
  • tsconfig.json ce fichier définit la façon dont le compilateur de TypeScript génère du JavaScript à partir des fichiers du projet.
  • typings.json
  • systemjs.config.js

 

Créez chacun de ces fichiers dans le répertoire de votre projet. Copier/coller le contenu ci-dessous :

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.2",
    "typings":"^1.3.2"
  }
}

tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

typings.json

1
2
3
4
5
6
7
{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160909174046"
  }
}

systemjs.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                       'npm:rxjs',
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular2-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

Pour plus de détails sur les fichiers de configuration, lisez les deux guides Npm Package Configuration et TypeScript Configuration.

en cours de construction …

 

 

JavaScript String

Posted by OpenTuto
Non classé Leave a Comment

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 : 

1
var str="valeur";

Exemple :

1
2
3
4
<script>  
var site="opentuto";  
document.write(site);  
</script>

Résultat :

1
opentuto

      – En utilisant le mot clé New :

Syntaxe :

1
var str=new String("valeur");

Exemple :

1
2
3
4
<script>  
var site=new String("www.opentuto.com");  
document.write(site);  
</script>

Résultat :

1
www.opentuto.com

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.

1
2
3
4
<script>  
var str="valeur";  
document.write(str.charAt(3));  
</script>

Résultat :

1
e

  • toUpperCase() : retourne la valeur en majuscule.

1
2
3
4
5
<script>  
var str_1="opentuto";  
var str_2=s1.toUpperCase();  
document.write(str_2);  
</script>

Résultat :

1
OPENTUTO

  • toLowerCase() : retourne la valeur en minuscule.

1
2
3
4
5
<script>  
var str_1="OPENTUTO";  
var str_2=s1.toLowerCase();  
document.write(str_2);  
</script>

Résultat :

1
opentuto

 

Comment créer des objets en javascript

Posted by OpenTuto
Non classé Leave a Comment

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 :

1
objet={proprieté1:valeur1,proprieté2:valeur2...proprietéN:valeurN}

Exemple :

1
2
3
4
<script>  
personne={id:10,nom:"toto"}  
document.write(personne.id+" "+personne.nom);  
</script>

Résultat :

1
10 toto

2- En utilisant le mot clé New :

Syntaxe :

1
var personne=new Object();

Exemple :

1
2
3
4
5
6
<script>  
var personne=new Object();  
personne.id=10;  
personne.nom="toto";  
document.write(personne.id+" "+personne.nom);  
</script>

Résultat :

1
10 toto

 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 :

1
2
3
4
5
6
7
8
<script>  
function personne(id,nom){  
this.id=id;  
this.nom=nom;  
}  
p=new personne(10,"toto");  
document.write(p.id+" "+p.nom);  
</script>

Résultat :

1
10 toto

 

Les fonctions JS

Posted by OpenTuto
JavaScript Leave a Comment

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) :

1
2
3
function functionName(){  
//code
}

Exemple :

1
2
3
4
5
6
<script>  
function message(){  
alert("Salut");  
}  
</script>
<input type="button" onclick="message()" value="afficher"/>

Syntaxe (fonction avec paramètres) :

1
2
3
function functionName(param1, param2, ...paramN){  
//code
}

Exemple :

1
2
3
4
5
6
7
8
<script>  
function add(num){  
alert(num+num);  
}  
</script>  
<form>  
<input type="button" value="ajouter" onclick="add(5)"/>  
</form>