JavaScript Tutor


Lessons:

What is JavaScript?

What is a Variable?

What is Data and its Types?

What are some operations you can do with data?

What is JavaScript?

Note: some of the instructional content are borrowed from W3schools

JavaScript is a programming language, meaning that it allow people who know about it to tell the computer to do things. Most of the time, code written in JavaScript is executed in a web-browser like Chrome, Safari, Firefox, Internet Explorer (or EDGE), etc.

JavaScript Syntax

JavaScript syntax is the set of rules, how JavaScript programs are constructed. Syntax in programming (human-to-computer) language is like grammar in our natural (human-to-human) language. If you type with bad grammar, people will misunderstand you. If you type with bad syntax, the computer will not understand you. Capiche?

Syntax Sample

Below you can find a short computer program. Computer program is a list of “instructions” to be “executed” by the computer. Each instruction in the list is called a statement. A program’s statement is like a paragraph’s sentence. Like how all sentences end with a period, all statements end with a semicolon.

// This sentence is a comment, and will not be executed.
// Comments are for human, so the computer will ignore it
// Numbers on the left are line-numbers, its a feature of this
// code-editor and shouldn't be confused with the code below
var string = "Hello";
var string2 = " World!";
var output = string + string2;
console.log(output);

More syntax will be introduced as you learn about what can you tell the computer to do with JavaScript

What is a Variable?

Variable is an important concept in programming and computer science. In JavaScript, and other programming languages too, variables are containers for storing data values.

var x = 5;
var y = 6;
var z = x + y;

From the example above, you can expect:

    x stores the value 5
    y stores the value 6
    z stores the value 11

Much Like Algebra

In this example, price1, price2, and total, are variables:

var price1 = 5;
var price2 = 6;
var total = price1 + price2;

In programming, just like in algebra, we use variables (like price1) to hold values. In programming, just like in algebra, we use variables in expressions (total = price1 + price2). From the example above, you can calculate the total to be 11.

Remember JavaScript variables are containers for storing data values.

JavaScript Identifiers

All JavaScript variables must be identified with unique names. These unique names are called identifiers. Identifiers can be short names (like x and y), or more descriptive names (age, sum, totalVolume).

The general rules for constructing names for variables (unique identifiers) are:

    Names are case sensitive (y and Y are different variables)
    Names can contain letters, digits, underscores, and dollar signs.
    Names must begin with a letter
    Names can also begin with $ and _ (but we will not use it in this tutorial)
    Reserved words (like JavaScript keywords) cannot be used as names

Declaring (Creating) JavaScript Variables

Creating a variable in JavaScript is called “declaring” a variable. You declare a JavaScript variable with the var keyword:

var carName;

After the declaration, the variable has no value. (Technically it has the value of undefined). To assign a value to the variable, use the equal sign:

var carName;
carName = "Volvo";

You can also assign a value to the variable when you declare it:

var carName = "Tesla";

What is Data and its Types?

Information the computer stored in its memory is called Data.

JavaScript variables can hold numbers like 100, and text values like “John Doe”. In programming, text values are called text strings.

Data Types

JavaScript can handle many types of data, but for now, just think of numbers and strings. To the computer, data in its memory are all the same, represented as 0s and 1s. However, to us human, the programmers, it is important to know the difference between the data types because there are different operations we can do with them.

Note that Strings are written inside double or single quotes. Numbers are written without quotes. If you put quotes around a number, it will be treated as a text string.

var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';

What are some operations you can do with data?

A typical thing to do with numbers is arithmetic.

Arithmetic Operators

Arithmetic operators perform arithmetic on numbers (literals or variables)

Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus

A typical arithmetic operation operates on two numbers. The two numbers can be literals:

var x = 100 + 50;

or variables:

var a = 100;
var b = 50;
var x = a + b;

or expressions:

var x = (100 + 50) * a;

Operators and Operands

The numbers (in an arithmetic operation) are called operands. The operation (to be performed between the two operands) is defined by an operator.

Operand Operator Operand
100 + 50

Operator Precedence

Operator precedence describes the order in which operations are performed in an arithmetic expression. Similar to Algebra’s Order of Operation, reading from left to right, parenthesis has the highest priority, then multiplication or division, then addition or subctraction.

Example

var x = 100 + 50 * 3;
// x is now 250
var x = (100 + 50) * 3;
// x is now 450