JavaScript Document 1 — Basic Programming

The first document in this series, related to getting started with programming

Table of contents:

Basic Concepts:

Here are a few concepts that you should know before getting started with programming.

Basic Interaction: Output:

First of all, you should know how you can print stuff to the user. Every language has some sort of printing function. For JavaScript, it's the console.log function. Here's how to use it:


					// Syntax:
					console.log(text);

Where text is a string, which represents your choice of text. Your text must be enclosed in quotes ("" or ''):


					console.log("I'm learning JavaScript :)");

					console.log('Hello, "World"!'); // Using single quotes

You can try running the above lines and modify them however you want from the Console.

Displaying an alert box:

This may seem a bit complicated when you hear it, but it is in fact really simple:


					// Syntax:
					alert(text);

Where text text is a string of the text you want to be displayed.


					alert("I am in an alert box! :D");

This will display a popup box above the webpage, and gives an OK option with it.

Task to do : Show an alert

Use the alert function to alert out the text: I love JavaScript (even if you don't).

Use the console to run your code.

Variables:

The entities that hold data in a program are called variables. Variables can contain various kinds of data, like numbers, strings, arrays, objects, and more. Variables have lots of data types, and are the first concept that you learn in programming.

Variables are like math variables; a name which holds a value. Like x contains a value of 2. With variables your program can keep track of the current state of the program. Variables are a concept in every language. In JavaScript, variables are declared like this:


					var x = 2;
					// Now x holds a value of 2

When the above line is executed, a section in your memory is allocated for this variable to sit, and hold it's value. Different langauges have different methods of storing their variables, but you don't need to care about that at this stage.

The value of a variable can be changed by this:

					
					var cars = 4; // Say you have 4 cars,

					// But now you have another one,
					// You can change its value

					cars = 5 // Now the cars variable will have the value 5

Since variables are basically values, you can also use console.log to print the value of a variable as well:


					var greetings = "Welcome!";

					console.log(greetings); // Will print "Welcome!"
					alert(greetings); // Will show "Welcome!" in an alert box

The definition of a variable can have a number of variations, made by different requirements. They are explained below:

Concatenation:

Concatenation simply means to join values together. It's a really simple process, but sometimes gets a bit confusing. Here's a few combinations in practice:

  • String Concatenation:

    String values can easily be concatenated by using the + symbol:

    
										var name = "Thomas";
										console.log("Hello " + name); // Prints out "Hello Thomas"

    The concatenated value can be stored into a variable as well:

    
										var name = "Thomas";
										var greetings = "Hello " + name; // Storing the joined value
										console.log(greetings); // Prints out "Hello Thomas"

    Multiple values can be concatenated too:

    
										var name = "Thomas";
										var age = 10;
										var favouriteFruit = "Apple";

										console.log("Hi, I am " + name + ", " + age + " years old, and my favourite fruit is " + favouriteFruit + ".");

										// "Hi, I am Thomas, 10 years old, and my favourite fruit is Apple."

  • Number Concatenation:

    Concatenating numbers can be a little confusing, since the + operator is used for adding numbers and concatenating. If you try to concatenate numbers like strings:

    
var num1 = 5;
var num2 = 7;
console.log(num1 + num2); // Prints 12

    We get their sum. How do we concatenate them now?

    An easy way that I use is this; First, convert each of them into a string, then do normal string concatenation. The conversion can be achieved in a number of ways:

    
var num1 = 5;
var num2 = 7;
console.log( (num1 + "") + (num2 + "") ); // Prints 57

    What is happening here?

    • In JavaScript, like maths, bracketed expressions are prefered over the other ones.
    • In the third line, look at the expressions in brackets. Both of the numbers are concatenated with a string first.
    • This converts both of the number values into a string, since concatenating a string with anything makes that value a string too. (1 + "" will be a string "1", which is friendly for concatenating.)
    • This way, the numbers are converted to strings, and string concatenations are applied.

    A shortcut for this will be:

    
										var num1 = 5;
										var num2 = 7;
										console.log(num1 + "" + num2); // Also prints 57

Task to do : Count the fruits

There are 4 apples and 6 bananas in the bag. Such that var apples = 4; and var bananas = 6;.

Print a statement, which shows the total number of fruits using addition, somehting like "There are 10 fruits in the bag."

Winding up...

You learned:

Make sure that you understand most of the stuff in the document (if you don't, it's okay, you'll get it later) and try to practice these as much as you can. Try new things, like concatenating an undefiend with a string and see what happens, or try to find the difference of using var and declaring a variable without any prefix. Once done, you are welcome to move to the next document :)

 

Task to do answers:

    Please try to do them yourself before consulting these answers :(

  1. 
						alert("I love JavaScript");
					

  2. 
						var name = "Thomas";
						console.log(name);
					

  3. 
						var a = 12;
						console.log(a / 0); // Prints Infinity
					

  4. 
						var apples = 4;
						var bananas = 6;
						var totalFruits = apples + bananas;

						console.log("There are " + totalFruits + " fruits in the bag.");

Next: JavaScript Document 2