Every language (natural and computer) possesses a syntax, that is, rules it must follow in order to be correctly processed by the computer. The JavaScript syntax is what we will be learning today in order to create the functionality we desire.
Understanding the Console
Web browsers have a feature where the developer can type JavaScript commands directly into the browser. This feature is called the Console.
JavaScript is primarily a client-side language. This means that not only do JavaScript files get sent unprocessed from the server, but that all browsers have a built-in JavaScript interpreter, that is, a module that understands and runs the JavaScript file.
Since web browsers have JavaScript interpreters built-in, we can use a web browser to test our JavaScript files without having to send them to a web server first. The Console will be a great sandbox for us to begin learning some basic JavaScript syntax.
Opening the Web Browser's Built-in Console
Each desktop web browser has a Console, so it doesn't matter which one we choose. We'll go with Firefox today.
Step 1. To bring up the developer tools, press:
F12 key
NOTE for MacOS Users: To open the developer tools directly to the Console, press: Option key+Command key+K.
Step 2. To show the Console window, if necessary,
Click
Understanding Expressions
Now that we have the Console open, we can start testing some JavaScript code. We'll start by understanding expressions.
An expression is any segment of code that possesses a value. For example, the expression 10 + 10 possesses the value of 20. The process the interpreter takes to get a value out of an expression is called evaluation.
Let's type a couple of expressions into the Console prompt now.
Step 1. To select the Console Input field, if necessary,
Click
Step 2. To use the Console to write and evaluate an expression, in the Console Input field, type:
2+2, press: Enter
Step 3. To try a different expression, type:
4+8/2, press: Enter
Understanding Variables
Immediately after an expression is evaluated, the value is discarded unless it is stored in memory. We store values in memory through the use of variables. These values can be recalled or changed later in the script.
In JavaScript, we define a variable with the var keyword, followed by the name we want to give the variable. Creating a new variable is called variable definition. For example:
var myVariable
This code would create a variable with the name myVariable. However, in order for the variable to be useful, we must give it a value.
Valid variable names follow the same rules as valid class names in HTML, namely the name:
- must not have spaces
- must not start with a numeral
- must not use special characters such as the plus sign (+) or minus sign (-)
Assigning Variables
In order to assign a value to myVariable, we must use the assignment operator, which is coded with the = sign. When we give a variable a value, it is called variable assignment. For example:
myVariable = 10
This code assigns the value of 10 to the variable we already defined. We can now use myVariable within other expressions, and it will evaluate to 10.
We can combine variable definition with variable assignment in the same command. This is called variable instantiation. For example:
var newVariable = 15
Let's practice this in the Console now.
Step 1. To instantiate a variable, in the Console, type:
var num = 10, press: Enter
Step 2. To check the variable's value, type:
num, press: Enter
Step 3. To use num in an arithmetic expression, type:
num + 1, press: Enter
Step 4. To verify the value of num, type:
num, press: Enter
Step 5. To increase the value of num, type:
num = num + 1, press: Enter
Step 6. To verify the new value of num, type:
num, press: Enter
Using the Increment and Decrement Operators
The task of increasing a numeric variable's value by 1 is a very common operation, and so there is a special operator in JavaScript and many other languages that is designed purely to accomplish this. It is called the increment operator and it appears as two consecutive plus signs (++) preceded by the variable you wish to increment:
newVariable++
Similarly, we can use the decrement operator (--) to decrease a numeric variable's value by 1.
Step 1. To increment num, type:
num++, press: Enter
Step 2. To see the current value of num, type:
num, press: Enter
Step 3. To decrement num, type:
num--, press: Enter
Step 4. To check the new value of num, type:
num, press: Enter
Understanding Types
So far, we have only stored numbers inside variables. Numbers aren't the only type of data that can be processed by JavaScript.
In this workshop, we will be going over two other data types, string and boolean, which are used to store text and true/false values respectively.
NOTE: In other programming languages, there are multiple types of numbers, such as integers, floating point numbers, and double-precision floating point numbers, to name a few. JavaScript doesn't bother with this, and is simplified to just a generic number data type.
Using Strings
In addition to using numbers, we will most certainly want to create and manipulate text content. We do this with the string data type.
Strings are created by wrapping any series of text (including numerals) in quotation marks (") or apostrophes (‘).
Step 1. To store a string in a variable, type:
var adage = "Home is where", press: Enter
Step 2. To see the value of the variable, type:
adage, press: Enter
var hal = "I can't do that, Dave.";
var obi = 'Obi-Wan said, "Use the Force, Luke."';
Concatenating Strings
It is useful to be able to combine multiple strings into a single string. This process is called string concatenation and it is done by putting the string concatenation operator between two strings. The plus sign (+) is designated as the string concatenation operator.
Step 1. To concatenate strings, type:
adage + " the heart is", press: Enter
Step 2. To see the value of adage, type:
adage, press: Enter
Understanding Weakly Typed Versus Strongly Typed Languages
You may have noticed that the addition and string concatenation operators use the same symbol, specifically, the plus sign. We know that the addition operator adds numbers and the string concatenation operator combines strings. However, it's not immediately obvious what would happen if we used a plus sign between a number and a string. If we were to attempt this in most languages, the program would break because of what is called a data mismatch error, i.e., the program would determine that you cannot add a number to a non-number. This is an example of the primary characteristic of a strongly-typed language.
In a strongly-typed language, if the program is expecting a particular type of data and it instead receives a different type, then the program will break.
JavaScript is not strongly typed, but rather, it is considered weakly typed. When JavaScript code faces such a data mismatch scenario, the interpreter will fix the mismatch in some way, and continue running without breaking.
Let's find out how JavaScript deals with the data mismatch with a number and string surrounding a plus sign.
Step 1. To add our string variable to a number, type:
adage + 10, press: Enter
NOTE: Static and dynamically typed is a concept that is different than strongly or weakly typed. It is a frequent misconception to equate the two relationships. In a static typed language, the programmer must declare the data type when a variable is defined. JavaScript is dynamically typed because the var keyword doesn't imply any specific data type.