Arrowat | JavaScript Studio | JavaScript Tutorial

Search JavaScript help

Follow JavaScript Studio

JavaScript Tutorial

Welcome, You are about to start learning JavaScript, this beginner tutorial will teach you how to write code. In this tutorial we write code using JavaScript Studio app that is available on all platform you can Download JavaScript Studio from any device.

JavaScript is a programming language that allows you to creata web apps (web pages, website), to show content to users it needs to be used with HTML Elements, to style the elements we use CSS, in other words you need to know 3 languages to create web apps HTML, CSS, JavaScript in this tutorial we are focused on JavaScript Language, and we will introduce HTML, CSS to use it with JavaScript.
You write JavaScript code inside of <script></script> as following.

//JavaScript code goes here.

</script>

Variables

Variables are the first we need to learn, variables help you to declare type of information you want to store, you can store, Numbers, Text, Objects, you declare variables using var or let (lower case) Keywords.

String:
Stores a text data type. the following is an example of String data type.

var fullName = "Melvin Hernandez";

let country = "United States";

Number:
The following are examples of Number data type.

var productQty = 10;

var productPrice = 2.50;

Boolean:
Boolean is a true or false decision, you can use it when a decision is required. the following are examples of Boolean data type.

var isValid = true;

var isDone = false;

Object:
Object is uses to store others reference content like arrays properties. the following is an example of Object data type.

var Product = {
"Name": "Apple",
"Price": 1.50,
"Quantity": 2,
}

In the object variable example we describe as following:

Product is a variable.

Name, Price, Quantity are properties followed by their value separated by :

Comments

JavaScript comments are part of text that can be inside on any part of you code to describe content or describe the code usage. you can use // to comment a single line of text on your code or /* */ to comment multiple lines. The comment won't be executed even if code is on it, JavaScript ignores the comments block, the syntax is as following.

//This is a comment in a single line.

/*
This is a comment in multiple lines,
comments are useful to describe
what your code does.
*/

Operators

Operators can be defined as Numeric, Boolean, String, Assignment operators

Numeric operators

Numeric operators are used in math calculation + - * / the + is also used as string concatenation, the following are examples of numeric operators

var addiction = 5 + 2;
var subtraction = 6 - 2;
var multiplication = 8 * 3;
var division = 4 / 2;
var increment +=1;
var decrement -=1;

String concatenation

String concatenation is used when we need to make to text value from different variables into one, we use + to concatenate the text value as following.

var concatenation = "Sky is blue " + " with many white clouds";
var firstName = "Melvin";
var lastName = "Hernandez";
var fullName = firstName + " " + lastName;
document.write(fullName);

Relational operators

Relational operators are used when we need to make a decision between two values from variables, we use == (equal) or != (not equal)

The following example returns true because the price and inputPrice are not equal

var price = 20.5;
var inputPrice = 10.50;
document.write(inputPrice != price );

The following example returns false because the price and inputPrice are not equal

var price = 20.5;
var inputPrice = 10.50;
document.write(inputPrice == price );

Comparison operators

Comparison operators are used when we need to compare numbers values or string values, we use
< (less than)
<= (less than or equal)
> (greater than)
>= (greater than or equal)

The following example compares num1 with num2 and num3 the ouput value is true or false depend on the comparison requested.

var num1 = 20;
var num2 = 12;
var num3 = 20;

document.write(num1 > num2);
document.write(num1 >= num2);
document.write(num1 > num3);
document.write(num1 >= num3);

document.write(num1 < num2);
document.write(num1 <= num2);
document.write(num1 < num3);
document.write(num1 <= num3);

Logical operators

Logical operators are used when we need to compare values between 2 or more values.
&& (described as "AND")
|| (described as "OR")
! (described as "NOT")

Example when to use logical operators can be done as following: You have a list of products with their respective prices:
product1 = "Apple", Price = 1.99
product2 = "Mango", Price = 1.29
product3 = "Grape", Price = 1.99
product4 = "Watermelon", Price = 1.69
product5 = "Lemon", Price = 1.39
You want to find all products that their price are 1.99 and 1.29 but don't include product with the name "Apple", the code can be written as following.

var products = [];
products[0] = ["Apple", 1.99];
products[1] = ["Mango", 1.29];
products[2] = ["Grape", 1.99];
products[3] = ["Watermelon", 1.69];
products[4] = ["Lemon", 1.39];
document.write("<h1>Found products</h1>");
for (var prod in products) {

var productName = products[prod][0];
var productPrice = products[prod][1];
if (productName != "Apple" && productPrice == 1.99 || productPrice == 1.29) {
document.write(productName + " $" + productPrice + "<br>");
}

}

In the previous example we created an advanced JavaScript code that includes Array, Loop, Flow control, and Logincal operators, while that was an example to show how to use Logical operators, you will almost need to use if, else any time when comparison comes to the game in your code.

Flow control

Flow control statements are based on conditional, loop iterations and jumps out of loops. in the example we ceated on logical operators, we used flow control, conditional and loop iteration.

Conditional statements

Conditional statement are based on if, if/else, switch we use this statement when we need to meet a condition between values in a block of code.

The if, if/else statement

The if, if/else statement help us to verify if some criteria is met, if the criteria is met we can perform other actions or exit the code. The if, if/else statement syntax is used as following.

if (condition) {
// block of code to be executed if the condition is true:
}

if (condition) {
// block of code to be executed if the condition is true:
} else {
// block of code to be executed if the condition is false
}

The following example executes the if block of code and returns the The product price is high message.

var price = 99;
if (price > 70) {
document.write("The product price is high");
} else {
document.write("The product price is lower");
}

The following example executes the else block of code and returns the The product price is lower message.

var price = 99;
if (price < 70) {
document.write("The product price is high.");
} else {
document.write("The product price is lower.");
}

The switch statement

The switch statement allows you to select value from many possible result of code you want to analize. the syntax is as following.

switch (expression) {

case value1:
value1_Return;
break;
case value2:
value2_Return;
break;
case value3:
value3_Return;
break;
default:
default_value_Return;
break;

}

You can use the switch statement as the following example.

var selection = 1;
var answer;
switch (selection) {

case 0:
answer = 'Red';
break;
case 1:
answer = 'Blue';
break;
case 2:
answer = 'Yellow';
break;
case 3:
answer = 'Green';
break;

};
document.write(answer);

You can change the value from selection variable to see different result.

Loops

Loops are used to retrive a list of items and exit when a conditional is met

The while statement

If the evaluation met the expression condition it stop and exit the loop. the while syntax is as following

while (expression) {
//code to execute
}

The following example demostrate how to use while statement, if the variable i is less than 10 it continues loop, if i reaches 10 it will exit.

var text = "";
var i = 0;
while (i < 10) {

text += "<br>The number is " + i;
i++;

};
document.write(text);

The do/while statement

The do/while statement is almost the same as while the different is that the while executes first then performs the condition, the do/while syntax is as following.

do {
//code to execute
}
while (expression);

The following example demostrate how to use while statement, if the variable i is less than 10 it continues loop, if i reaches 10 it will exit.

var text = "";
var i = 0;
do {

text += "<br>The number is " + i;
i++;

}
while (i < 10);
document.write(text);

The for statement

The for statement work based on steps looping on known count of list items or from start number to end number, the for is most used when you need to get all items from a list of items from an array, the syntax is as following.

for (int_start; expression; increment){
//code to execute
};

The following example demostrate how to use for statement.

var fruits = ['Apple', 'Melon', 'Mango'];
var text = "";
for (var i = 0; i < fruits.length; i++){

text += fruits[i] + "<br>";

};
document.write(text);

Usually you can write many lines you want.

var write1000lines = "";
for (var i = 0; i <= 1000; i++){

write1000lines += "I don't have to forget my homework <br>";

};
document.write(write1000lines);

The for/in statement

The for/in statement is almost the same as for statement, but the for/in doesn't require start number, end nunber, increment, instead it uses the in where it goest to count the number of elements are on array the syntax is as follow.

for (variable in elements_array) {
//code to execute
};

The following example demostrate how to use the for/in statement

var fruits = ['Apple', 'Melon', 'Mango'];
var text = "";
for (var i in fruits) {

text += fruits[i] + "<br>";

};
document.write(text);

You can use the for/in to count letters in a string and get each one at the time.

var abc = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
var text = "";
for (var i in abc) {

text += abc[i] + "<br>";

};
document.write(text);

Objects

Object are collection of names known as Properties any property can have their own data type, you declare object the same way as you declare variables objects are usually referenced as namespace, you access the properties by their declaration, they can be nested into other objects, the syntax is as following.

var namespace = {
"oject1":value,
"oject2":value,
"oject3":value,
}

The following example creates an object with properties, and we retrieve the properties value.

//Object
var Product = {

"Name":"Apple",
"Price":2.99,

}
//Get product information
document.write(Product.Name +" is priced at "+ Product.Price);

Objects with nested objects

The following example creates an object and has a nested object with properties, and we retrieve the properties value.

//Object
var Product = {

"Name":"Apple",
"Price":2.99,
//Nested object
CannedFruit:{
"UPC":123456789101,
"Description":"Pineapple",
"Price":5.99
}

}
//Get the first product information
document.write(Product.Name +" is priced at "+ Product.Price);

//Get the Canned fruit information
document.write("<br>" + Product.CannedFruit.Description + " with UPC "+ Product.CannedFruit.UPC +" is priced at "+ Product.CannedFruit.Price);

Objects with arrays

//Object
var GroceryStore = {

Departments : {
Deli:["Yougurt","Juice","Milk"],
Produce:["Vegetables","Fruits"],
}

}
for(var i in GroceryStore.Departments.Deli){

document.write(GroceryStore.Departments.Deli[i] +"<br><br>");

}
for(var i in GroceryStore.Departments.Produce){

document.write(GroceryStore.Departments.Produce[i] + "<br><br>");

}

Objects with methods

//Object
var Customer = {

Name:"Melvin",
LastName:"Hernandez",
GetFullName:function(){
return this.Name + " " + this.LastName;
}

}
//Get full name
document.write(Customer.GetFullName());

Dynamic objects properties

You can add properties to object after the object has been declared, the following example creates an object named Device and we add 3 properties Name, Description, Type

//Object
var Device = {}

//Add properties with values
Device.Name ="Surface Book 3";
Device.Description = "Silver with 500GB Hard drive";
Device.Type = "Laptop";

//Get property value
document.write("Name: " + Device.Name);
document.write("<br><br>");
document.write("Description: " + Device.Description);
document.write("<br><br>");
document.write("Type: " + Device.Type);

Object constructor

Object constructor is created with the keyword new, the following example creates a Car Object and we add Brand, Color, Doors properties and a GetDescription() method.

//Object
var Car = new Object();
//Add properties
Car.Brand = "Tesla";
Car.Color = "Black";
Car.Doors = 4;
//Add property as method
Car.GetDescription = function(){

return "The " + Car.Brand + " car is color " + Car.Color + " and has "+ Car.Doors + " doors.";

}
//Get the car description by calling the "GetDescription()" method.
document.write(Car.GetDescription());

//Object
var Car = function(brand, color, doors){

this.Brand = brand;
this.Color = color;
this.Doors = doors;
this.GetDescription = function(){
return "The " + this.Brand + " car is color " + this.Color + " and has "+ this.Doors + " doors.";
}

};

var teslaCar = new Car("Tesla","Red","2");
var bmwCar = new Car("BMW","Blue","4");

document.write(teslaCar.GetDescription());
document.write("<br><br>");
document.write(bmwCar.GetDescription());

Arrays

Arrays are list of items indexed by numeric position. Arrays can be declared as following.

var fruits = ["Apple", "Melon", "Mango"];

var fruits = new Array("Apple", "Melon", "Mango");

You can add more items to Array by using the push() method as following

var fruits = ["Apple", "Melon", "Mango"];
//Adds new item to Array
fruits.push("Grape");

You can remove items from Array by using the splice() method as following

var fruits = ["Apple", "Melon", "Mango"];
// splice syntax splice(remove_item_position, item_count_to_remove)
//Removes "Apple" item from Array
fruits.splice(1,1)

You can learn more about Arrays and their full members at MDN web docs

Methods/functions

Function are sometimes called methods, function are useful and any programming language includes it. Functions are block of code that is executed when is called. you can call function you create from any part of your code. The syntax is as following.

function functionName(){
//Block of code
}

function functionName(parameter1, parameter2,..){
//Block of code
}

The following examples demostrate how to use functions

function programmingLanguages(){

document.write("JavaScript, C#, VB.NET");

}
//Call the function
programmingLanguages();

var prog = function(languages){

return languages;

}
//Call the function;
document.write(prog ("JavaScript, C#, VB.NET"));

functions also return value

function programmingLanguages(languages){

return languages;

}
//Call the function
document.write(programmingLanguages("JavaScript, C#, VB.NET"));

We hope you this tutorial helps you on your JavaScript learning, keep visiting this page, we will add more help and tutorials.

About the author

Melvin Dev

This documentation has been written by Melvin Dev, Melvin Dev is a founder and developer of Arrowat LLC.