JavaScript Beginner's Series : Part 1

JavaScript Beginner's Series : Part 1

Written by .NET Online Instructor , Thursday, February 25, 2016 at 8:24 PM

Welcome to the JavaScript Beginner’s Series.

Topics we’ll be covering

Part 1

JavaScript Overview
Ways to add JavaScript code on a HTML page
Variables, DataTypes, Operators and Expressions

Part 2 (Coming Soon)

Conditional Statements : if, else, if else if, switch
Looping Statements : while, do..while, for, for..in

Part 3 (Coming Soon)

Functions
Arrays
Understanding the Scope : Availability of variables globally or locally

Part 4 (Coming Soon)

Understanding Objects Literals
Objects in JavaScripts : Number, Boolean, String, Date, Math
Understanding the DOM : Document Object Model

JavaScript Beginner’s Series : Part 1

JavaScript Overview

JavaScript is the assembly language of the Web. JavaScript is a high-level, dynamic, untyped, and interpreted programming language. Do not confuse JavaScript with Java.

In this beginner’s series, we’ll be learning the basic building blocks of JavaScript that every beginner or a newbie needs to know.

Ways to add JavaScript code on a HTML page

Adding JavaScript Code using the <script></script> tag with the type attribute

<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> // your javascript code will go here </script> </head> <body> </body> </html>

Adding JavaScript file using the src attribute of the <script></script> tag in the <head></head> section

<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="/Scripts/custom.js"></script> </head> <body> </body> </html>

JavaScript code or file is placed in the <head> section when you want to run some code on a click event somewhere on your web page.

Adding JavaScript code or file using the <script></script> tag in the <body></body> section

<!DOCTYPE html> <html> <head> <title></title> </head> <body>  <script type="text/javascript"> </script>  <script type="text/javascript" src="/Scripts/custom.js"></script> </body> </html>

JavaScript code or file is placed in the <body> section when you want to generate some content on the web page using some JavaScript code as soon as the page loads.

Variables, DataTypes, Operators and Expressions

Variables

var keyword is used to declare a variable in JavaScript. You should always use the var keyword to declare a variable in JavaScript.

Types of variables in JavaScript :

Global variables (Global Scope)
Local and Block level variables (Local Scope)

Variables in JavaScript are written in CamelCase for ex: isItGlobal.

Let’s look at some code.

isItGlobal = "variable with global scope"; // this variable is global function localFunction() { var isItGlobal = "variable with local scope"; // this variable is local to the local Function document.write(isItGlobal + "<br/>"); } document.write(isItGlobal + "<br/>"); localFunction();

Data Types

Numbers : eg: 157, 457
Strings : eg: “This is string”, ‘This is string’
Booleans : eg: true or false
Undefined

In JavaScript, datatype is inferred by the type of data or value assigned for a variable.

For ex: If we assign 124 value to a variable var myValue = 124. The data type for myValue will be Number.

Let’s look at some code and find out the data type of a variable (using the typeof keyword).

// Let's declare 4 variable and print it on a web page var myVariable = "I'm a variable"; var myVariable2 = 1234; var myVariable3 = true; var myVariable4; // we haven't assigned a value for this variable. Lets see what happens document.write(myVariable + "<br/>"); document.write(myVariable2 + "<br/>"); document.write(myVariable3 + "<br/>"); // Now let's look at the type of a given variable by using the typeof keyword document.write("myVariable is of type : " + typeof myVariable + "<br/>"); document.write("myVariable2 is of type : " + typeof myVariable2 + "<br/>"); document.write("myVariable3 is of type : " + typeof myVariable3 + "<br/>"); document.write(typeof myVariable4); // Output //I'm a variable //1234 //true //myVariable is of type : string //myVariable2 is of type : number //myVariable3 is of type : boolean //undefined

Operators

Operators allows us to compute data in a programming language.

JavaScript support the following types of operators :

Arithmetic
Comparison
Logical
Assignment
Ternary

In order for an operator to work it needs two operands.

For ex:

4 + 5 = 9 Here, 4 and 5 are the two operands and + is the operator.

Arithmetic Operator

var a = 50; var b = 20; document.write("add : ", a + b); document.write("<br/>"); document.write("sub : ", a - b); document.write("<br/>"); document.write("mul : ", a * b); document.write("<br/>"); document.write("div : ", a / b); document.write("<br/>"); document.write("modulus : ", a % b); document.write("<br/>"); document.write("increment : ", ++a); document.write("<br/>"); document.write("decrement : ", --b);

Comparison Operator

var a = 50; var b = 20; document.write("greater than : ", a > b); document.write("<br/>"); document.write("less than : ", a < b); document.write("<br/>"); document.write("not equal : ", a != b); document.write("<br/>"); document.write("equal too : ", a == b); document.write("<br/>"); document.write("greater than or equal too : ", a >= b); document.write("<br/>"); document.write("less than or equal too : ", a <= b); document.write("<br/>"); // OutPut //greater than : true //less than : false //not equal : true //equal too : false //greater than or equal too : true //less than or equal too : false

Logical Operator

var a = true; var b = false; document.write("a && b : ", a && b); document.write("<br/>"); document.write("a || b : ", a || b); document.write("<br/>"); document.write("logical not : ", !(a && b)); document.write("<br/>"); // OutPut //a && b : false //a || b : true //a | b : true

Assignment Operator

The Assignment assigns values from the right side operand to the left side operand.

+= (Add & Assignment) : adds the right operand to the left operand and assigns the result to the left operand.

-= (Subtract & Assignment) : subtract the right operand to the left operand and assigns the result to the left operand.

*= (Multiple & Assignment) : Multiples the right operand to the left operand and assigns the result to the left operand.

/= (Division & Assignment) : Divides the right operand to the left operand and assigns the result to the left operand.

%= (Modulus & Assignment) : Modulus operation happens from right operand to left operand and assigns the result to the left operand.

var a = 50; var b = 20; document.write("a = b = > ", a = b); document.write("<br/>"); document.write("a = a + b = > ", a += b); document.write("<br/>"); document.write("a = a - b = > ", a -= b); document.write("<br/>"); document.write("a = a * b = > ", a *= b); document.write("<br/>"); document.write("a = a / b = > ", a /= b); document.write("<br/>"); document.write("a = a % b = > ", a %= b); document.write("<br/>"); // Output //a = b = > 20 //a = a + b = > 40 //a = a - b = > 20 //a = a * b = > 400 //a = a / b = > 20 //a = a % b = > 0

Ternary Operator

The Ternary operator first checks the expressions for a true or false value and then executes the given statements.

For ex:

var someValue = 25; var myResult = ""; var myResult1 = ""; myResult = (someValue == 24) ? "equal" : "not equal"; myResult1 = (someValue == 25) ? "equal" : "not equal"; document.write(myResult); document.write("<br/>"); document.write(myResult1);

Part 2 coming soon

Thank you for reading.

Stay tuned!

Take care

Abhishek Luv

About author

.NET Online Instructor

Hello! My name is Abhishek Luv and I am an online trainer for C# & ASP.NET MVC from Mumbai, India. I provide my online training services in India and overseas. I have successfully done a lot of online training for clients from USA (Chicago, Pennsylvania, Texas, Oklahoma, Seattle, Florida, Michigan), Dubai, UK(Wales, London, Birmingham), Ireland(Dublin), Panama City, Colombia(Bogota), Denmark(Hjørring), Afghanistan, Switzerland(Zurich), Sri Lanka(Colombo), New Zealand, India(Hyderabad, Mumbai, Bangalore, Delhi, Faridabad, Kolkata, Chennai, Madurai, Gujarat).