You have learned how to print something using JavaScript on console in the previous chapter. Now, let's see the fundamentals behind JavaScript syntax, variables, arithmetic operators, and comments.
In the computer world, there is nothing but data. You can read, modify, and create new data; however, anything that isn't data simply does not exist. In JavaScript, we need to handle data to develop a website.
To understand the basic syntax of JavaScript, first of all you need to know that JavaScript is case sensitive. You cannot interchange lower case and upper case letters in JavaScript. Therefore, when dealing with the JavaScript syntax, you need to remember that writing the code is not the only important task, you must also watch the syntax whether it's written correctly.
Let me show you an example. In the previous chapter, you have successfully printed Hello World on your browser using the document.write(); syntax.
What would happen if you wrote Document.write("Hello World");? Yes! It won't run successfully. You will get an error message. This kind of errors is known as Uncaught SyntaxError.
A JavaScript statement is typically written on one line. You may finish your statement with a semicolon or not. It is not mandatory to end a statement with a semicolon. However, it is a good practice to add a semicolon after each statement.
Let's consider the following example:
document.write("Hello");
document.write("World");
document.write("!");Its output will be as follows:
We already know that the computer world has nothing but data.
There are different types of data (we call them data types), as follows:
- Your name is a kind of data
- Your age is data
- Your grade is also data
Yet, they all are different. What is the difference between them? Your name only contains a group of characters or, as some people also call it, string. Your age is an integer type data. Your grade is a float type data. The wonderful thing in JavaScript is that you do not have to specify the data type before writing a variable's name.
Did we discuss variables? Well, you already know the data types. You will need something to store your data. This something is called variable. In JavaScript, we use var before the variable names. Remember that var starts with small letter.
Let's consider the following example:
var x; var y; var sum; var name;
Let's say that we have 14 apples and 6 oranges. To store them in variables we will use the following:
var apples = 14; var oranges = 6;
The following example is not the same. Can you tell why?
var Apples = 14; var apples = 14; var APPLES = 14; var appleS = 14;
Yes, JavaScript is case sensitive. All the variables are different here, though the values of the variables are the same.
Now, let's do some coding. Previously, on console, you printed your name as homework. I hope you did it without any trouble. How about we now print your name differently using a variable? Assume that your name is Sherlock Holmes. What kind of data is it?
You are right, it is string type. Usually for string type data, we put the string between two quotes.
Let's consider the following example:
var name = "Sherlock Holmes"; var occupation = "Detective"
To print them using console, you need to type each statement and press Enter. Take a look at the following image:
You will see an extra line appearing after you hit Enter, stating undefined. Don't worry about this for now. It just returned a console log.
You stored the Sherlock Holmes string on the name variable and you stored Detective on occupation. Every time you access name or occupation, you can access the stated strings.
Consider that you want to print Sherlock Holmes on your screen. Just type the following:
document.write(name);
After typing, hit Enter. You will see Sherlock Holmes is printed on the screen, as follows:
Type document.write(occupation); and hit Enter, as shown in the following screenshot:
You may be wondering why is there no space between Sherlock Holmes and Detective. As, on the console, the history is not automatically removed from the web page on the left-hand side and after you hit Enter for your second output (occupation), the string places itself right after the previous string. This will always happen, unless you clear your console using the Ctrl + L keyboard shortcut and reload the web page pressing the key F5.
If you want to join two (or multiple) variables, you add a plus sign (+) between the two variables, as follows:
document.write(name+occupation); document.write(occupation+name);
Can you tell me what will be output of these commands?
Yes, you are right. The output will be as follows:
Sherlock HolmesDetective
DetectiveSherlock Holmes
If you want to add any string (for example, a space) between the two strings other than any variables, just type the following:
document.write(name+" "+occupation);
The output will be as follows:
Sherlock Holmes Detective
What will happen when you type the following code and hit Enter?
document.write("My name is "+name+" and I am a "+occupation);Yes! You are absolutely right. The output will be as shown in the following:
My name is Sherlock Holmes and I am a Detective
Now, add another variable on the console. Consider that Sherlock Holmes is 24 years old. Do you remember what kind of data age is?
Yes, it is an integer type of number. Therefore, type the following code and hit Enter:
var age = 24;
You have the following three variables now:
- Name
- Occupation
- Age
Let's print the following output on the web page:
My name is Sherlock Holmes, I'm 24 years old and I am a Detective
What will our code be on the console?
The code is as follows:
document.write("My name is "+name+", I'm "+age+" years old and I am a "+occupation);The output can be seen as follows:
Tip
Printing quotations/inverted commas
If you want to print Shakespeare said, "To be, or not to be: that is the question!" using the document.write(); syntax, you will probably type the following code:
document.write("Shakespeare said, "To be, or not to be: that is the question!"");However, this will give you an error known as SyntaxError. To get rid of this error, you need to use a backward slash () before the two inverted commas. The correct code will be as follows:
document.write("Shakespeare said, "To be, or not to be: that is the question!"");The output will be as shown in the following:
Shakespeare said, "To be, or not to be: that is the question!"
The same rule applies for single inverted comma (').
Here is a quick exercise for you:
- Suppose
Tomhas a cat (Lucy). The cat,Lucy, is2.4years old. Store the name, cat's name, and its age on three different variables and print the following output using console:Tom's cat Lucy is 2.4 years old.
- Assume that you bought
4pounds of apples. Each pound costs you$1.2. Store the price and quantity of apples on two different variables and print the following output using console:I bought 4 pounds of apples. I had to pay $1.2 for each pound.