Before we dive into jQuery and Angular, we'll take a detour and learn how to program with JavaScript. JavaScript is the language that jQuery and Angular are built with, so it's important to have an understanding of its syntax.
In this checkpoint, we're going to take you on a tour of JavaScript basics. You'll be coding JavaScript inside of a Node REPL .
In the subsequent JavaScript checkpoints, you'll be implementing solutions to challenges contained in our JavaScript exercises repository. After your solutions pass the tests, your mentor will review your code and check it for style and quality.
A JavaScript REPL is a tool that can read, interpret, and execute code on the fly. The REPL allows you to test JavaScript snippets and syntax by providing immediate feedback.
To start the REPL, type the following in the command line of your virtual machine:
$ node
Inside of the REPL, we can write JavaScript code. The last line of output after you press enter is the result of the evaluated code.
> 1 + 1 // Type 1+1 and enter. The REPL will evaluate '1 + 1' and print the result, '2', after you press enter
We exit the REPL by typing .exit in the prompt.
> .exit
A good place to start learning a new programming language is to write a "hello world" program. To create this program, we'll need to use something called a "string". A string is created by placing quotes around characters.
To create a string, start the REPL and type the following:
$ node
"hello world"
After you enter the text and the REPL interprets your command, you'll notice that the JavaScript interpreter merely re-printed what you entered.
Try something else:
"stop repeating me"
Try not to get into a juvenile "stop repeating me" battle with your REPL, it's unbecoming for programmers.
A command is needed to instruct the computer to do something with the "hello world" string. JavaScript has a function named console.log that will print a string to the console. The console.log function is very handy when debugging code, which we'll discuss soon. Run the following code:
console.log("hello world");
You should see hello world printed to the console, followed by undefined. We'll learn more about functions later, but for now just think of it as a command that receives data, does something with the data, and then returns a result. In our example, console.log received a string ("hello world"), printed it to the console, and then returned undefined.
Strings are one of the built-in data types in JavaScript. Data types define the characteristics of values. For example, "hello world" is a value of the string data type. There are other data types in JavaScript, like booleans and numbers, which we'll learn about as well.
A variable is an object that holds a value. Variables can be named almost anything and be used to hold any JavaScript object. In your REPL you can create a variable named myString and assign it to have a value of "hello world" like so:
var myString = "hello world";
If you call console.log with the myString variable in the REPL, you'll see myString's value ("hello world") printed to the console.
console.log(myString);
Create a myBoolean variable, assign it to true, then log it:
var myBoolean = true;
console.log(myBoolean);
We won't talk much about booleans here, but for now, just understand that a boolean is a data type that represents one of two values:
trueorfalse. We'll get more into booleans later in the JavaScript exercises.
Notice the format we use for variables. The format is known as "camel-case", which looks like: thisIsCamelCase. Basically, multiple words are concatenated and differentiated by their case.
JavaScript provides traditional mathematical operations with numbers. Try entering some basic operations in the REPL:
1 + 2
5 - 1
6 / 2
4 * 3
Math operations can also be used on variables that hold numbers:
var x = 10;
console.log(x);
x = x + 5;
console.log(x);
JavaScript has a shorthand syntax to reassign variables that already have values. For example, instead of writing x = x + 5 you can use the += operator:
x += 5
Basic math operations like + and * return numbers, but the > and < operators return boolean values. Type the following and keep your eyes on the return values:
4 > 5
3 < 6
5 > 5
> and < are comparison operators, and therefore return true or false. Another comparison operator is ==. Whereas the single = sign assigns a value, the == compares two values for equality. Type the following to see how == works.
4 == 5
3 == 3
Now try the logical opposite of ==, which is !=. You can also think of this as comparing two values for inequality:
4 != 5
To this point, you've written code as individual and standalone lines of syntax. If you wanted to reuse a line of code in this respect, you'd have to type it in again. A function is a thing in programming where you can write code, and reuse it by calling the function rather than retyping the lines of code.
Functions have a defined structure. Let's write our first function to allow us to say "hello" to anyone:
var hello = function(word) {
console.log("hello " + word);
};
This function begins, innocently enough, as a variable. Above, we define a variable (var) named hello. Then we set the hello variable to a function, and this is where the fun begins.
Our hello function takes an argument, which we named "word." We'll see that the word argument can be used to say "hello" to anything we want.
The function officially begins and ends with curly braces: { }. We state what the function does inside the braces, and in the hello function, we're simply logging a string to the console.
The cool thing is that we're logging a string and using the word argument. Let's give it a try. After you've declared your function using the code above, run it by typing:
hello("to you!!!");
You should see a friendly greeting printed in your REPL!
Let's modify our function to take 2 arguments:
var hello = function(first, last) {
console.log("hello " + first + " " + last);
};
Run it:
hello("Bill", "Gates");
Arguments don't have to be strings, like they are above. Let's write a new function to calculate numbers.
var squareMe = function(num) {
console.log(num * num);
};
Run it:
squareMe(5);
And voila! You now have a function that you can use to square any number.
- Keep experimenting with the
helloandsquareMefunctions in your REPL. What else can you do with them? Try creating some new functions to execute basic calculations as well. Message your mentor with the results of your experiments and any questions you have.