Libellés

Affichage des articles dont le libellé est javascript. Afficher tous les articles
Affichage des articles dont le libellé est javascript. Afficher tous les articles

dimanche 14 août 2011

Javascript et les objets : héritage, prototype, constructor, ...


Javascript n'est pas un langage orienté objet, mais à l'aide des
prototypes nous pouvons quand même nous en sortir.


### Création d'un objet

Le Js est un langage fonctionnel, ce qui signifie que les fonctions
sont au centre du langage. Et donc, pour créer l’équivalent d'une
classe en js, nous allons commencer par créer son constructeur : une fonction.

   var myClass = function(){
     this.name = 'Romain';
   }


Puis ensuite nous allons instancier cet objet :

   var o = new myClass();
   console.log(o.name);


L'instanciation va se dérouler en plusieurs étapes. Tout d'abord un
objet o tout vide va être créé. Ensuite le constructeur myClass va
être appelé sur cette objet. Le this.name va permettre de créer
l'attribut name dynamiquement.


### Le prototype

Le prototype est le dénominateur commun entre toute les instances d'une même classe.

Si j'ajoute un attribut(ou une méthode) sur le prototype de myClass, alors cet attribut (ou méthode) sera present sur toute les instances de myClass.

   myClass.prototype.age = 25;
  
   console.log(o.age);



### Lien entre le prototype et le constructor.

Comme nous l'avons vu tout à l'heure myClass est une fonction qui va permettre de créer l'objet. C'est le constructeur.

  console.log(typeof myClass) //function


A partir de cette fonction nous pouvons accéder au prototype :

  console.log(myClass.prototype) //{ age: 25 }



Et à partir du prototype nous pouvons retrouver le constructeur. Ce qui signifie qu'à partir de n'importe quel objet, nous pouvons retrouver le constructeur car comme nous l'avons vu précédemment toutes les methodes et attributs d'un prototype sont accessible dans les instances.

   console.log( myClass.prototype.constructor === myClass)
   console.log( o.constructor === myClass)



### L'héritage en javascript

Comme chaque instance hérite de son prototype, il suffit de chainer les prototypes pour faire de l'héritage.

Voici un exemple complet :

    /*
     * On créé le constructeur de l'objet A.
     * Ce constructeur va ajouter automatiquement un attribut name à l'objet.
     */
    var A = function(){
      this.name="Romain";  
    };

    A.prototype.sayHello = function(){
       return "Hello "+this.name;  
    };

    /* On fait de même pour l'objet B */
    var B = function(){
      this.age= 25;  
    };

    /* Maintenant on dit que B hérite de l'objet A */
    B.prototype = new A();

    /* Pour ne pas perdre la référence vers constructeur de B */
    B.prototype.constructor = B;


    /* On vérifie que ça marche */
    var o = new B();
    console.log(o.name);             //Romain
    console.log(o.age);              //25
    console.log(o.sayHello());       //Hello Romain
    console.log(o instanceof B);     // true
    console.log(o instanceof A);     //true
    console.log(o instanceof Object);//true

    /* Et pour le fun, on vérifie que les constructeurs sont logiques */
    console.log(B.prototype.constructor === B);  //true
    console.log(A.prototype.constructor === A);  //true


    /* On peut même recréer un objet à partir d'un autre */
    var p = new o.constructor();
    console.log(p.name);  //Romain
    console.log(p.age);   //25

mercredi 10 août 2011

getter et setter avec nodeJs : EcmaScript 5


NodeJs permet d'écrire du code en ECMA Script 5, nous pouvons donc profiter des getter et setter :


/*jslint es5: true */

function MyClass() {
    var name;

    return {
        get name() {
            return name;
        },
        set name(value) {
            name = 'Mr ' + value;
        }
    };
}

var obj = new MyClass();

obj.name = "Romain";   //call the setter
console.log(obj.name); //call the getter

/* print 'Mr Romain' */

jeudi 7 juillet 2011

UglifyJs en Java

UglifyJS est une librairie javascript qui permet de minifier des fichiers javascripts.

Normalement UglifyJs est utilisé avec Node.js, mais si vous voulez appeler UglifyJs depuis un environnement Java vous pouvez le faire à l'aide du projet Wro4J

Vous allez surement me demander pourquoi utiliser UglifyJS en Java alors que Google Closure répond exactement à ce problème ? Vous auriez raison, mais c'est tellement plus drôle d'essayer de faire tourner du Javascript dans une JVM !!!

Aller je vous un bout de code codé en Groovy qui utilise UglifyJS :


@Grab(group = 'ro.isdc.wro4j', module = 'wro4j-extensions', version = '1.3.8')

import ro.isdc.wro.extensions.processor.algorithm.uglify.*

def uglify = UglifyJs.uglifyJs()
uglify.process(new File("/home/romain/plugin/web/web-app/lib/route.js").text);


Wro4J utilise Rhino pour exécuter le Javascript.
Les sources sont ici :
https://github.com/alexo/wro4j/blob/master/wro4j-extensions/src/main/java/ro/isdc/wro/extensions/processor/algorithm/uglify/UglifyJs.java

dimanche 23 janvier 2011

Template (Layout) en HTML / Javscript avec AngularJS

Récemment j'ai découvert sur DZone un nouveau framework MVC javascript. Et je me suis dit que c'était l'occasion de tester.

Mon idée était de faire quelque chose de très simple, par exemple un système de layout.

Je crée un layout HTML contenant :
  - le titre de mon site
  - un menu
  - un emplacement pour le contenu

Et pour chaque contenu, je crée un nouveau fichier HTML.

Ainsi, les éléments statiques de mon site (menu, titre, ...) ne seront écrit qu'à un seul endroit. Mon site sera donc plus facile à maintenir.

Il me faut également un contrôleur (route mapping), qui, en fonction de l'URL choisira le bon contenu.plate

Voici le résulat final en HTML + angularJS

<!DOCTYPE HTML>
<html xmlns:ng="http://angularjs.org">
    <head>
        <script type="text/javascript"
        src="http://angularjs.org/ng/js/angular-debug.js" ng:autobind></script>
    </head>
    <body>
        <script>
            angular.service('myApplication', function($route){
                $route.when("",          {template:'./pages/toto.html'});
                $route.when("/titi", {template:'./pages/titi.html'});
            }, {inject:['$route']});
        </script>

        <h1>Your App Chrome</h1>
        [ <a href="#">Welcome</a> | <a href="#/titi">Settings</a> ]
        <hr/>
    <ng:include src="$route.current.template" scope="$route.current.scope"></ng:include>
</body>
</html>


Et les deux pages utilisant ce layout (je ne me suis pas foulé pour le contenu :-p )
cat pages/titi.html                       
TITI TITI TITI
cat pages/toto.html                       
TOTO


Et pour info, voici la structure des fichiers
tree
.
|-- pages
|   |-- titi.html
|   `-- toto.html
`-- template.html


toto.html est défini comme la page par défaut.
titi.html est accessible via /template.html#/titi 







Si on décortique angularJS, on se rend compte qu'il y a principalement deux fonctions utilisées : 
  - la fonction route pour faire le lien entre l'URL et le contenu
  - et la balise  pour injecter le contenu dans le document HTML.





Pour tester, vous devrez utiliser un serveur web, c'est à dire via une url du type http://localhost:port/xxxxx






Si vous testez directement a partir des fichiers, c'est à dire avec une URI du type file:///home/romain/Bureau/site/template.html ,le système de layout ne marchera pas. (XMLHttpRequest cannot load file:///home/romain/Bureau/site/pages/toto.html. Origin null is not allowed by Access-Control-Allow-Origin.) 




Mais bon pour utiliser très facilement un serveur web, il suffit d'ouvrir un shell et de saisir : 


cd /home/romain/Bureau/site
python -m SimpleHTTPServer  



Puis ensuite de se rendre sur : http://localhost:8000/template.html


Source : http://www.pinoytech.org/question/4208530/xmlhttprequest-origin-null-is-not-allowed-access-control-access-allow-for-file