| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| issue66:tutoriel_-_webdev [2012/12/16 21:47] – fredphil91 | issue66:tutoriel_-_webdev [2012/12/17 17:11] (Version actuelle) – auntiee |
|---|
| Just about everything we do inside programs involves data. Different types of data have different declarations. For example: 42 is a number, "answer to life" is a string of text, and "TRUE" is a boolean. These types of data will normally be seen in something we call variables. You can think of variables like your old pre-algebra math classes. x = 42, y = 13, solve for z (x + y = z).** | Just about everything we do inside programs involves data. Different types of data have different declarations. For example: 42 is a number, "answer to life" is a string of text, and "TRUE" is a boolean. These types of data will normally be seen in something we call variables. You can think of variables like your old pre-algebra math classes. x = 42, y = 13, solve for z (x + y = z).** |
| |
| Le mois dernier, nous avons commencé notre application en CRUD. Nous ne sommes pas entrés dans les détails de la conception. J'aime vraiment l'enseignement par l'exemple, et toute lla partie 1 va commencer à prendre tout son sens maintenant que nous commençons à entrer dans la partie JavaScript/jQuery et CSS. | Le mois dernier, nous avons bien commencé notre application en CRUD. C'est exprès que nous ne sommes pas entrés dans les détails. J'aime vraiment l'enseignement par l'exemple et toute la partie 1 commencera à prendre tout son sens maintenant que nous commençons à entrer dans la partie JavaScript/jQuery et CSS. |
| |
| Je vous suggère fortement d'apprendre autant que vous pouvez JavaScript. Il s'agit d'un langage très puissant, et je vous garantis que vous ne pouvez pas sortir en tant que développeur web sans l'avoir bien compris. Je vais vous montrer ce que je peux, mais l'apprentissage de ce langage ne dépend pas que de moi. | Je vous suggère fortement d'apprendre autant que vous pouvez de JavaScript. Il s'agit d'un langage très puissant et je vous garantis que vous ne pouvez pas vous en sortir en tant que développeur web sans l'avoir très bien compris. Je vais vous montrer ce que je peux, mais l'apprentissage de ce langage ne dépend pas que de moi. |
| |
| Tout ce que nous faisons dans des programmes traite des données. Les différents types de données ont des déclarations différentes. Par exemple : 42 est un nombre, « réponse à la vie » est une chaîne de caractères, et VRAI est un booléen. Ces types de données seront habituellement rencontrés dans ce qu'on appelle des variables. Vous pouvez penser à des variables comme dans vos anciens cours de mathématiques pré-algébriques. x = 42, y = 13, trouvez z (x + y = z). | Tout ce que nous faisons dans des programmes traite des données. Les différents types de données ont des déclarations différentes. Par exemple : 42 est un nombre, « réponse à la vie » est une chaîne de caractères, et VRAI est un booléen. Ces types de données seront habituellement rencontrés dans ce qu'on appelle des variables. Vous pouvez penser à des variables comme dans vos anciens cours de mathématiques pré-algébriques. x = 42, y = 13, trouvez z (x + y = z). |
| var reponse = 42; | var reponse = 42; |
| |
| La déclaration des variables est une idée assez simple. La ligne précédente montre un exemple de déclaration de la variable « reponse » et une initialisation à la valeur 42. Le mot-clé « var » indique à JavaScript (JS) qu'il s'agit d'une déclaration de variable, et que le mot suivant est le nom de la variable que nous déclarons. Le signe d'égalité « = » est ici très important. Vous devriez lire la phrase suivante quelques centaines de fois jusqu'à ce qu'elle soit imprimée dans votre tête. Le signe égal seul '=' est un opérateur d'initialisation. Tout ce qui se trouve à droite de l'opérateur '=' est maintenant stocké dans la variable déclarée à sa gauche. Le dernier caractère de cette ligne, et de loin l'une des choses les plus importantes à apprendre, est le point-virgule « ; ». Le point-virgule est un identificateur pour indiquer à JS que c'est la fin de la ligne. À ce stade, nous avons juste parlé d'un nombre, mais comment faire pour déclarer d'autres choses ? | La déclaration des variables est une idée assez simple. La ligne précédente montre un exemple de déclaration de la variable « reponse » et une initialisation à la valeur 42. Le mot-clé « var » indique à JavaScript (JS) qu'il s'agit d'une déclaration de variable et que le mot suivant est le nom de la variable que nous déclarons. Le signe d'égalité « = » est ici très important. Vous devriez lire la phrase suivante quelques centaines de fois jusqu'à ce qu'elle soit imprimée dans votre tête. Le signe égal seul '=' est un opérateur d'initialisation. Tout ce qui se trouve à droite de l'opérateur '=' est maintenant stocké dans la variable déclarée à sa gauche. Le dernier caractère de cette ligne, et de loin l'une des choses les plus importantes à apprendre, est le point-virgule « ; ». Le point-virgule est un identificateur pour indiquer à JS que c'est la fin de la ligne. À ce stade, nous avons juste parlé d'un nombre, mais comment faire pour déclarer d'autres choses ? |
| |
| var reponse = 42; | var reponse = 42; |
| = true;** | = true;** |
| |
| Maintenant, comme vous pouvez l'imaginer, cela peut être vraiment répétitif et un peu ennuyeux. On risque également de faire des fautes de frappe. J'ai volontairement laissé deux erreurs dans l'exemple ci-dessus et je vous demande de regarder de près pour les trouver. Notez que chacune de ces lignes se termine par un point-virgule. Chaque ligne est une instruction et par conséquent elle doit être terminée. JS nous permet de nettoyer nos variables en les déclarant toutes à la fois dans une instruction var, avec une seule fin. Nous allons nettoyer ce code (ci-dessous) et déclarer ces mêmes variables, puis expliquer ce qui se passe. | Maintenant, comme vous pouvez l'imaginer, cela peut être vraiment répétitif et un peu agaçant. On risque également de faire des fautes de frappe. J'ai volontairement laissé deux erreurs dans l'exemple ci-dessus et je vous demande de regarder de près pour les trouver. Notez que chacune de ces lignes se termine par un point-virgule. Chaque ligne est une instruction et par conséquent elle doit être terminée. JS nous permet de nettoyer nos variables en les déclarant toutes à la fois dans une instruction var, avec une seule fin. Nous allons nettoyer ce code (ci-dessous) et déclarer ces mêmes variables, puis expliquer ce qui se passe. |
| |
| Si vous n'avez pas trouvé les deux fautes de frappe, il manquait un point-virgule sur la déclaration swVersion et il y avait un yar au lieu de var dans la déclaration typeImage. Le débogage de votre code est très important et, plus tard, vous allez apprécier l'apprentissage de cette compétence. Comme pour l'exemple corrigé, nous commençons la déclaration par un var comme d'habitude, mais au lieu de la terminer sur la première ligne, nous avons une virgule « , » qui indique à JS qu'il y a encore des déclarations. Lorsque vous utilisez la virgule, vous pouvez (mais ce n'est pas obligé) avoir la déclaration suivante sur une nouvelle ligne. Cependant, vous ne pouvez pas passer à la ligne après autre chose que la virgule. Par exemple, le code suivant ne fonctionnera pas : | Si vous n'avez pas trouvé les deux fautes de frappe, il manquait un point-virgule sur la déclaration swVersion et il y avait un yar au lieu de var dans la déclaration typeImage. Le débogage de votre code est très important et, plus tard, vous allez apprécier l'apprentissage de cette compétence. Comme pour l'exemple corrigé, nous commençons la déclaration par un var comme d'habitude, mais au lieu de la terminer sur la première ligne, nous avons une virgule « , » qui indique à JS qu'il y a encore des déclarations. Lorsque vous utilisez la virgule, vous pouvez (mais ce n'est pas obligé) avoir la déclaration suivante sur une nouvelle ligne. Cependant, vous ne pouvez pas passer à la ligne après autre chose que la virgule. Par exemple, le code suivant ne fonctionnera pas : |
| console.log(answer);** | console.log(answer);** |
| |
| Déclarer des variables de cette façon fait que JS interprète chaque ligne comme dans le premier exemple où on ne déclare qu'une variable. Par conséquent, il nous permet de mettre le point-virgule sur une nouvelle ligne, si bien que nous pouvons nettoyer et voir que la déclaration de variables a clairement pris fin. Cela nous permet également de ne pas nous inquiéter de savoir où se trouve le point-virgule lors de l'ajout d'autres variables. | Déclarer des variables de cette façon fait que JS interprète chaque ligne comme dans le premier exemple où on n'a déclaré qu'une variable. Par conséquent, il nous permet de mettre le point-virgule sur une nouvelle ligne aussi, pour que nous puissions nettoyer et voir que la déclaration de variables a clairement pris fin. Cela nous permet également de ne pas nous inquiéter de savoir où se trouve le point-virgule lors de l'ajout d'autres variables. |
| |
| Le sujet suivant que je veux aborder est comment vérifier que vos variables sont initialisées. Cela aidera également dans le débogage, et vous assure que votre code fait ce que vous avez prévu qu'il fasse. Je vais vous montrer deux façons de faire cela, mais l'objectif final est d'afficher vos informations afin que vous puissiez « cocher » pendant que votre programme se déroule. | Le sujet suivant que je veux aborder est comment vérifier que vos variables sont initialisées. Cela aidera également dans le débogage et vous permettra de vous assurer que votre code fait ce que vous avez prévu qu'il fasse. Je vais vous montrer deux façons de faire cela, mais l'objectif final est d'afficher vos informations afin que vous puissiez « les valider » pendant que votre programme se déroule. |
| |
| alert(reponse); | alert(reponse); |
| The alert function will bring up a dialog box for your attention, requiring you to press "ok" to see the next one or move forward with your program. However, the console.log function will run your code, throwing anything in that function right to a JS Console. The JS console can be found in most of the major browsers. In Chrome, simply press the wrench button, click on tools, and then click on JavaScript console.** | The alert function will bring up a dialog box for your attention, requiring you to press "ok" to see the next one or move forward with your program. However, the console.log function will run your code, throwing anything in that function right to a JS Console. The JS console can be found in most of the major browsers. In Chrome, simply press the wrench button, click on tools, and then click on JavaScript console.** |
| |
| Les deux lignes ci-dessus vous affichent des informations. Même si elles font deux choses très différentes pour vous donner l'information, les deux vous la donnent tout de même. Je connais beaucoup de développeurs qui préfèrent la méthode de l'alerte. Cependant, je pense que c'est une meilleure pratique d'utiliser console.log. Ces deux fonctions sont natives en JS, et les deux sont des moyens acceptables pour vérifier votre code. Quelle que soit celle qui fonctionne pour vous, tenez vous-y. Pour la suite, je vais utiliser console.log et vous montrer comment vous en servir. | Les deux lignes ci-dessus vous affichent des informations. Même si elles vous donnent l'information de deux façons très différentes, les deux vous la donnent tout de même. Je connais beaucoup de développeurs qui préfèrent la méthode de l'alerte. Cependant, je pense que c'est une meilleure pratique d'utiliser console.log. Ces deux fonctions sont natives en JS et les deux sont des moyens acceptables pour vérifier votre code. Quelle que soit celle qui fonctionne pour vous, tenez vous-y. Pour la suite, je vais utiliser console.log et vous montrer comment vous en servir. |
| |
| La fonction d'alerte fera apparaître une boîte de dialogue à votre attention, vous obligeant à appuyer sur « ok » pour voir la suivante ou continuer avec votre programme. Alors que la fonction console.log exécutera votre code, en écrivant ce qu'elle contient dans une console JS. La console JS peut être trouvée dans la plupart des principaux navigateurs. Dans Chrome, appuyez simplement sur le bouton clé à molette, cliquez sur Outils, puis cliquez sur la console JavaScript. | La fonction d'alerte fera apparaître une boîte de dialogue à votre attention, vous obligeant à appuyer sur « ok » pour voir la suivante ou continuer avec votre programme. En revanche, la fonction console.log exécutera votre code, en écrivant ce qu'elle contient dans une console JS. La console JS peut être trouvée dans la plupart des principaux navigateurs. Dans Chrome, appuyez simplement sur le bouton clé à molette, cliquez sur Outils, puis cliquez sur la console JavaScript. |
| |
| **The console.log function can take just about anything in its parameter and display all sorts of data in a variety of different ways. I want you to use your main.js script to add variables, and console.log the answers to the JS Console. Play with the alert function as well to give yourself the freedom of choice. So, you will be adding variables to main.js, and opening your HTML file in a browser, while watching what happens in the console. Be sure to do your homework; next month we will be using variables pretty hard core in comparisons, if's, and loops. | **The console.log function can take just about anything in its parameter and display all sorts of data in a variety of different ways. I want you to use your main.js script to add variables, and console.log the answers to the JS Console. Play with the alert function as well to give yourself the freedom of choice. So, you will be adding variables to main.js, and opening your HTML file in a browser, while watching what happens in the console. Be sure to do your homework; next month we will be using variables pretty hard core in comparisons, if's, and loops. |
| If you have any questions regarding variables, alert, or console.log, feel free to send it to me via twitter: @aliendev2.** | If you have any questions regarding variables, alert, or console.log, feel free to send it to me via twitter: @aliendev2.** |
| |
| La fonction console.log peut prendre à peu près n'importe quoi en paramètre et afficher toutes sortes de données de nombreuses façons différentes. Je vous demande d'utiliser votre script main.js pour ajouter des variables, et les envoyer à la console JS avec console.log. Jouez aussi avec la fonction d'alerte pour vous laisser la liberté de choix. Donc, vous allez ajouter des variables à main.js, et ouvrir votre fichier HTML dans un navigateur, tout en regardant ce qui se passe dans la console. Assurez-vous de faire vos devoirs ; le mois prochain, nous allons utiliser des variables de façon assez compliquée dans des comparaisons, des tests et des boucles. | La fonction console.log peut prendre à peu près n'importe quoi en paramètre et afficher toutes sortes de données de nombreuses façons différentes. Je vous demande d'utiliser votre script main.js pour ajouter des variables, et les envoyer à la console JS avec console.log. Jouez aussi avec la fonction d'alerte pour vous laisser la liberté de choix. Ainsi, vous allez ajouter des variables à main.js et ouvrir votre fichier HTML dans un navigateur, tout en regardant ce qui se passe dans la console. Faites bien vos devoirs ; le mois prochain, nous allons utiliser des variables assez compliquées dans des comparaisons, des tests et des boucles. |
| |
| Si vous avez des questions concernant les variables, les alertes ou console.log, n'hésitez pas à me l'envoyer via twitter: @aliendev2. | Si vous avez des questions concernant les variables, les alertes ou console.log, n'hésitez pas à me les envoyer via twitter: @aliendev2. |
| |
