Ceci est une ancienne révision du document !
aLast 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).
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”;
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;
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);
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.
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.