Last month we started our CRUD off strong. We didn't go into details by design. I am very fond of teaching by example, and everything in part 1 will start making complete sense now that we are starting to get into JavaScript/JQuery and CSS. I strongly suggest you learn as much as you can about JavaScript. It is a very powerful language, and I guarantee you cannot get away with being a web developer without a strong understanding of it. I am going to give you what I can, but your learning of this language cannot involve just me. 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 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 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).
var answer = 42; Declaring variables is a pretty simple idea. The above shows an example of the variable “answer” being declared and set to the number 42. The text 'var' is telling JavaScript (JS) that this is a variable declaration happening here, and that the next word is the name of the variable which we are declaring. The equal '=' sign here is very important. The following sentence should be read a few hundred times until it is pounded into your head. The single equal sign '=' is a setting operator. Anything to right of the '=' operator, is now being stored in the variable declared on the left side of it. The last character of this line, and by far one of the most important things to learn, is the semi-colon “;”. The semi-colon is an identifier for JS that this is the end of the line. At this point, we have just been talking about a number, what if we want to declare other things? var answer = 42; var connection = true; var swVersion = 1.3432 yar imageType = “jpg”; var message = “This is a longer string message”;
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 ?
var reponse = 42; var connexion = true; var swVersion = 1.3432 yar typeImage = “jpg”; var message = “Voici un plus long texte”;
Now as you can imagine, this can get really repetitive and somewhat annoying. It also allows for more room for typos. I purposely left two mistakes in the above example and want you to look closely at finding them. Notice that each of these lines ends with a semi-colon. Each line is a statement, and therefore it needs to be ended. JS allows us to clean up our variables by declaring them all at once in one var statement, with one end. Let's clean up this code (shown below) and declare these same variables, then go over what is going on. If you didn't catch the two typos, it was a missing semi-colon on the swVersion declaration and a yar instead of var in the imageType declaration. Debugging your code is very important, and, later on, you’re going to appreciate learning this skill. As for the cleaned up example, we start off the declaration with a var as normal, but instead of ending it on the first line, we have a comma “,”. the comma tells JS that there are more declarations coming. When using the comma, you may (but are not required to) have the next declaration on a new line. However, you may not make the new line after anything other than the comma. For example, the following code will not work: var answer = 42, connection = true;
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 :
var reponse = 42, connexion
= true;
Declaring variables this way makes JS interpret each line as the first example when we only declared one variable. Therefore, it allows us to put the semi colon on a new line as well so we can clean up and see that the declaration of variables has clearly ended. This also allows us to not worry about where the semi-colon is when adding more variables. The next thing I want to go over is how to make sure your variables are set. This will also help in debugging, and just making sure your code is doing what you expect it does. I am going to show you two ways you can go about this, but the end goal is displaying your information so you can “fact check” as your program moves along. alert(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 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 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); console.log(reponse);
Both of the lines above are displaying information to you. Even though they are doing two very different things to give you the information, they are both giving you that information nonetheless. I know a lot of developers who prefer the alert route. However, I believe it is better practice if you use console.log. Both of these functions are native to JS, and both of them are acceptable means of checking your code. Whichever one works for you, stick with it. From here on out, I will be using console.log and will be showing you how to use it. 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 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. 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. 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. 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 les envoyer via twitter: @aliendev2.