Let's take a break for a minute to get familiar with the console. The console is an excellent tool for testing the code and teaching yourself, so it's worth learning. After this, you can start testing ideas while you learn.
With the browser window active, hit F12 on the keyboard, or go to your browser's developer tools menu and open the console from there. The console, along with the JavaScript "console.log()" command, is very useful for learning how JavaScript works.
console.log("Hi!");
Put this code between your html script tags, save the file, and open the file. Then look in your browser's console. It should be saying "Hi!". If it is then you now know how to use the console. If not, you may need to use the Internet to do research or ask questions to figure out why it isn't working. Now that we've been over that, let's pick back up where we left off.
Now that you know what the console does, let's create an object! Type the code above for the car object and hit enter, then type "car" and hit enter again. You should see the object displayed in the console. Click on it to see the list of properties and values.
What if you wanted to get the console to display an object without typing it in and hitting enter, by just using JavaScript code?
You'll need an HTML file.
If you include " console.log() " in your script, any part of the code between the parentheses will be sent to the console for inspection. Such as: " console.log('Hello there!'); " (notice the semicolon?) You'll need either double or single quotes in the parentheses to get the direct text. Text with quotation marks around them in JavaScript code are called "strings". If you leave the quotation marks off you'll get an error because it's reading the words " Hello there! " as JavaScript code. So if you type " console.log("document"); " or " console.log('document'); " you'll just see the word "document" in the console. But if you want to send the document object to the console, you would put " console.log(document); " into your code. You'll find it helpful to use this method temporarily in your code to help you troubleshoot errors.
Parenthesis are used to enclose parameters. Parameters are values, or represented values through variables, that are being
let hello = "hello!";
console.log(hello);
Either as a value or variable, it's considered to be the first parameter. Parameters are separated by commas. If we had two variables called "like" and "this" they would be input as parameters into someFunction(like, this). The values are then sent to be used by the function.
let hello = "hello!";
console.log(hello);
Let's review. In the code above, the first hello is the variable, and the second hello is the value. The use of a variable sets up a place in memory to store a value. Typing "let" or "const" in JavaScript means you're about to create a variable. The single "=" (equal sign) is used to assign values to variables. The value "hello!" is assigned to the variable hello. The variable is then placed as a parameter into the "log" function, which is a method of the object "console". The value of "hello!" gets logged to and shows up in the web browswer's console.
If you console log a lot of variables, you might get confused on which one is coming from where. Fortunately, you can type what you want to show directly in quotes and combine that with variables by using a "+" (plus, or addition sign). Doing this allows you to print a description of the result to the console. A series of characters inside quotation marks is called a "string", as in a string of text. Remember to leave a space after to colon to print that space to the console.
var someThing;
someThing = 32;
console.log("First someThing: " + someThing);
someThing = 64;
console.log("Second someThing: " + someThing);
Talk about scope for variable purposes.
In addition to "var", there is also "let" and "const", which are newer types of variables. You declare them the same way you do with "var", by typing it in front of your variable. [describe differences]
var x = 3;
console.log(x + 2);
console.log(x + x);
The "x" isn't special, it could be any variable name. The code above is the same as the code below.
var numberThree = 3;
console.log(numberThree + 2);
console.log(numberThree + numberThree);
let hello = "hello!";
console.log(hello);
Either as a value or variable, it's considered to be the first parameter. Parameters are separated by commas. If we had two variables called "like" and "this" they would be input as parameters into someFunction(like, this). The values are then sent to be used by the function.
let hello = "hello!";
console.log(hello);
Let's review. In the code above, the first hello is the variable, and the second hello is the value. The use of a variable sets up a place in memory to store a value. Typing "let" or "const" in JavaScript means you're about to create a variable. The single "=" (equal sign) is used to assign values to variables. The value "hello!" is assigned to the variable hello. The variable is then placed as a parameter into the "log" function, which is a method of the object "console". The value of "hello!" gets logged to and shows up in the web browswer's console.
The code below is a declaration of a variable called "someThing". This variable was not assigned a value. A variable without an assigned value is considered "undefined".
var someThing;
console.log(someThing);
Once you use a variable keyword (like "var" or "let") to create a variable, you can then use the variable without the keyword. In otherwords, you don't have to keep declaring the variable by using "var" if you've already done it, you can just use the variable name. For example, you can first declare the variable without assigning it, and then assign it later:
var someThing;
someThing = 32;
console.log(someThing);
Or, you can assign the variable and then later re-assign it:
var someThing;
someThing = 32;
console.log(someThing);
someThing = 64;
console.log(someThing);
If you console log a lot of variables, you might get confused on which one is coming from where. Fortunately, you can type what you want to show directly in quotes and combine that with variables by using a "+" (plus, or addition sign). Doing this allows you to print a description of the result to the console. A series of characters inside quotation marks is called a "string", as in a string of text. Remember to leave a space after to colon to print that space to the console.
var someThing;
someThing = 32;
console.log("First someThing: " + someThing);
someThing = 64;
console.log("Second someThing: " + someThing);
The code below is a declaration of a variable called "someThing". This variable was not assigned a value. A variable without an assigned value is considered "undefined".
var someThing;
console.log(someThing);
Just as with objects, we could do condense everything, like this...
function functionName(){var hello="hello";console.log(hello);hello="goodbye";console.log(hello);};function functionGoodbye(){var goodbye="hello";};
The above code actually works, however, notice just how difficult it is to pull everything apart. It all blends together and is very hard to read. That's why it's written over multiple lines, for the sake of clarity, like this...
function functionName() {{ '{' }}
var hello = "hello";
console.log(hello);
hello = "goodbye";
console.log(hello);
}
function functionGoodbye() {
var goodbye = "hello";
}
Now we can tell we were looking at two separate functions and only the first function is using "console.log()" (which sends information to the browser's console. The curly brackets act as frames for the function's commands. They function a lot like html opening and closing tags. The commands are inset so it's easier to tell they belong to that function. We still have one small problem to deal with. If we place this code in the script, it's error free, but nothing will happen.
functionName();
The above command will run the functionName function's commands.
Let's take a closer look at this function to see what's happening with it.
function functionName() {
var hello = "hello";
console.log(hello);
hello = "goodbye";
console.log(hello);
}
functionName();
You can put this code into your script, save the file, and reload the file in your browser. Either open the file, or if you have it loaded already, with the file's tab active refresh the page by hitting F5 on your keyboard. Now look at the console to see what happend. It should say "hello" and then "goodbye". However, if you look at the code, "console.log()" is used twice with the same variable, hello. The first command declared the variable, the second sent the information to the console, the third reassigned the variable to represent "goodbye", and the fourth sent that information to the console.