JavaScript is a programming language that allows you to create 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.

<script>

//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.