Full Circle Magazine FR

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== 1 ======

**In the first part, I talked about how JavaScript has evolved over the years, what is the current status of the language, and why it is so widely adopted by developers. In this part, I will focus on JavaScript Objects and functions. Since I received an email from Ray (one of our readers, thank you for contacting me) with some questions, I will address these at the end of the article in the Questions and Solutions section.

JavaScript Objects

In JavaScript, everything is an object, even functions are objects, which, if you are familiar with other programming languages, may seem a little odd. But, don’t worry, this gives JavaScript some real power.

JavaScript is a dynamic programming language, which means objects can have different values assigned during runtime, without any problem. For example:

var myName = “Greg”;
myName = 123;

In the first case, the myName stores a string value; in the second case it should store an integer, 123, but JavaScript has a special type, Number (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number) to hold numerical values.**

Dans la première partie, je vous ai montré comment JavaScript a évolué au fil des ans, l'état actuel du langage, et pourquoi il est si largement adopté par les développeurs. Dans cette partie, je vais me concentrer sur les Objets et les fonctions JavaScript. J'ai reçu un courriel de Ray (un de nos lecteurs, merci de m'avoir contacté) avec quelques questions et j'aborderai celles-ci à la fin de l'article dans la section Questions et Solutions.

Les Objets JavaScript

En JavaScript, tout est un objet, même les fonctions sont des objets, ce qui, si vous avez l'habitude d'autres langages de programmation, peut sembler un peu étrange. Mais, ne vous inquiétez pas, cela donne un réel pouvoir à JavaScript.

JavaScript est un langage de programmation dynamique, ce qui signifie que, sans aucun problème, les objets peuvent avoir différentes valeurs attribuées lors de l'exécution. Par exemple :

var monNom = "Greg";
monNom = 123;

Dans le premier cas, la variable monNom stocke une chaîne de caractères ; dans le second cas, elle stocke un nombre entier, 123, mais JavaScript a un type spécial, Number (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number) pour contenir des valeurs numériques.

====== 2 ======

**Since JavaScript is a dynamic language, I can extend objects in any way I want. For example, if I create a new object:

var myHouse = { nrOfRooms:3, size:100 };

It creates an object:

Object {nrOfRooms: 3, size: 100}

Let’s extend this with a couple of properties:

myHouse.price = 1500;
myHouse["currency"] = "USD";

These result is the following object:

Object {nrOfRooms: 3, size: 100, price: 1500, currency: "USD"}**

Puisque JavaScript est un langage dynamique, je peux étendre des objets comme je le souhaite. Par exemple, si je crée un nouvel objet :

var maMaison = { nbDePieces:3, taille:100 };

Il crée un objet :

Object {nbDePieces: 3, taille: 100}

Étendons-le avec quelques propriétés :

maMaison.prix = 1500;
maMaison["devise"] = "USD";

Cela nous donne pour résultat l'objet suivant :

Object {nbDePieces: 3, taille: 100, prix: 1500, devise: "USD"}

====== 3 ======

**As you can see, there are three ways to create custom objects:
• The first, also called JSON (JavaScript Object Notation), defines objects using the curly braces and specifies the properties and their values separated by a colon.
• The second option is to use the . (dot) operator, and write the name of the new property and assign a value to it.
• The third option is to use the index [] operator, which receives a string as a parameter and a value to assign. If you know other programming languages, you can imagine JavaScript objects as a kind of special dictionaries or maps.

Functions may or may not have return values. In the case of the isBiggerThan() function, I have not specified a return type, nor that it will have a return value, but I could easily return a boolean value (true or false), JavaScript permits this.

As an exercise, you can create other objects which simulate real life objects, like a forest which has a function called plantTrees, and receives a parameter nrOfTrees, and it sums up the number of trees in the forest. Or it may store the different types of animals which live in the forest; the topic does not really matter, the idea is to get you familiarized with object notation and function creation, we will use this a lot.**

Comme vous pouvez le voir, il y a trois façons de créer des objets personnalisés :
• La première, appelée aussi JSON (JavaScript Object Notation), définit des objets en utilisant les accolades et spécifie les propriétés et leurs valeurs séparées par deux points.
• La deuxième option est d'utiliser l'opérateur . (point) et d'écrire le nom de la nouvelle propriété et lui attribuer une valeur.
• La troisième option consiste à utiliser l'opérateur index [], qui reçoit une chaîne comme paramètre et une valeur à attribuer. Si vous connaissez d'autres langages de programmation, vous pouvez imaginer les objets JavaScript comme des sortes de dictionnaires spéciaux ou des « maps ».

Les fonctions peuvent ou avoir des valeurs de retour ou pas. Dans le cas de la fonction isBiggerThan(), je n'ai pas spécifié de type de retour, ni qu'elle aura une valeur de retour, mais je pourrais facilement retourner une valeur booléenne (vrai ou faux) ; JavaScript le permet.

Comme exercice, vous pouvez créer d'autres objets qui simulent des objets de la vie réelle, comme une forêt qui a une fonction appelée planterArbres, qui reçoit un paramètre nbDArbres, et résume le nombre d'arbres dans la forêt. Ou elle peut stocker les différents types d'animaux qui vivent dans la forêt ; le sujet n'a pas vraiment d'importance, l'idée est de vous familiariser avec la notation objet et la création de fonction, que nous utiliserons beaucoup.

====== 4 ======

**Questions and Solutions

Question: Ray asked how we can select some information from a file, especially a SQLite database using JavaScript.

Solution:
There are two approaches, two scenarios. The first one is when you have the SQLite database available on the client machine, where the browser is running. In this case you can use the SQL.js (https://github.com/kripken/sql.js/) library to load the SQLite files. Even more, you can do queries and create data schemas using JavaScript. The page on GitHub has good code examples; you can start using those for loading your database and querying data.

The second scenario is when the SQLite database is available only on the web server and the client is accessing the web server through the Internet. In this case, you need to have a server-side component (this can be node.js based) which reads the SQLite database, and, using HTTP requests, sends the data back to the client’s browser. In this case, the client side JavaScript is more complex, because it needs to use AJAX calls to load the data. Here is a sample node.js code which connects to a SQLite database, creates a new table if it does not exist, and inserts two new entries in the table. After the insert it queries the table and writes the data to the console.**

Questions et solutions

Question : Ray a demandé comment on peut sélectionner certaines informations à partir d'un fichier, en particulier une base de données SQLite, en utilisant JavaScript.

Solution : Il y a deux approches, deux scénarios. Le premier est lorsque la base de données SQLite est disponible sur la machine cliente, là où le navigateur s'exécute. Dans ce cas, vous pouvez utiliser la bibliothèque SQL.js (https://github.com/kripken/sql.js/) pour charger les fichiers SQLite. Et vous pouvez même faire des requêtes et créer des schémas de données à l'aide de JavaScript. La page sur GitHub a de bons exemples de code ; vous pouvez commencer à utiliser ceux-ci pour le chargement de votre base de données et l'interrogation des données.

Le deuxième scénario est lorsque la base de données SQLite est uniquement disponible sur le serveur Web et que le client y accède par Internet. Dans ce cas, vous devez avoir un composant côté serveur (qui peut être basé sur node.js) qui lit la base de données SQLite, et, en utilisant des requêtes HTTP, envoie les données au navigateur du client. Dans ce cas, le Javascript côté client est plus complexe, car il a besoin d'utiliser les appels AJAX pour charger les données. Voici un exemple de code node.js qui se connecte à une base de données SQLite, crée une nouvelle table si elle existe pas, et insère deux nouvelles entrées dans le tableau. Après l'insertion, il interroge la table et écrit les données sur la console.

====== 5 ======

**To execute the code on the previous page, you will need to have node.js (https://nodejs.org/) and npm installed, and install sqlite3 through npm using this command:

npm install sqlite3 –save

When all is set up, you can run the program using:

node sqlite_reader.js 

Supposing you named your file sqlite_reader.js.

The output should look something like that shown above in the command line (I was executing under Windows, but the output is the same under Linux too, since node.js runs the same way in both environments).

In future articles, I will present how to create a new HTTP server using node, and how to transfer data from the server side to the client side – everything using JavaScript.

I would be happy to hear from you; what are the topics in JavaScript which you would be interested in. Please feel free and email me your topic ideas, the same way as Ray did. Thanks again, Ray!**

Pour exécuter le code de la page précédente, il vous faudra installer node.js (https://nodejs.org/) et npm, ainsi que sqlite3 au travers de npm en utilisant cette commande :

npm install sqlite3 -save

Quand tout est en place, vous pouvez exécuter le programme en utilisant :

node sqlite_reader.js

En supposant que vous avez nommé votre fichier sqlite_reader.js.

La sortie devrait ressembler à celle représentée ci-dessus dans la ligne de commande (je l'exécutais sous Windows, mais la sortie est la même sous Linux, puisque node.js fonctionne de la même manière dans les deux environnements).

Dans les prochains articles, je vous dirai comment créer un nouveau serveur HTTP à l'aide de node et comment transférer des données depuis le côté serveur vers le côté client - le tout en utilisant JavaScript.

Je serais heureux de vous entendre ; dites-moi quels sont les sujets qui vous intéresseraient autour de JavaScript. Sentez-vous libres de m'envoyer vos idées de sujet, comme Ray l'a fait. Merci encore, Ray !

====== encadré page 21 ======

Regardons le code ci-dessous :
maMaison.getInformation = function() {
     console.log("La maison fait " + this.taille + " m2
et a " + this.nbDePieces + " pieces.");
}

Si vous appelez cette fonction ainsi :
maMaison.getInformation();
cela affichera : La maison fait 100 m2 et a 3 pieces.

Les fonctions peuvent avoir des paramètres:
maMaison.estPlusGrandeQue = function(autreMaison) {
     return this.taille > autreMaison.taille;
}

Nous pouvons appeler la fonction :
maMaison.estPlusGrandeQue({taille:98});
ou
maMaison.estPlusGrandeQue({taille:198});

Dans le premier cas, cela retourne vrai et dans le second faux.
Remarquez que j'ai passé un simple objet avec une propriété, taille,
et le code a pu s'exécuter correctement, mais j'aurais pu aussi écrire :
maMaison.estPlusGrandeQue({taille:198, nbDePieces:5, prix:8500,
devise:"EUR"})
ou
var maisonDeMonAmi = {taille:198, nbDePieces:5, prix:8500,
devise:"EUR"};
maMaison.estPlusGrandeQue(maisonDeMonAmi);
Le résultat sera le même.

====== commentaires de l'encadré page 22 (ne pas mettre d'accents sinon problèmes de compilation Python) ======

create the db instance : ouvrir la base de donnees

create the table if the database file was missing : creer la table si le fichier est absent

create a parameterized, prepared statement : creer une requete preparee, parametree

run the statement twice : executer deux fois la requete
each ? in the statement is substituted with the parameter : chaque ? dans la requete est remplace par un parametre

close the statement : fermer la requete

query the database and log the result to the console : requeter la base et afficher le resultat sur la console