Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Introduction to Javascript and basic concepts

This article will discuss about the introduction of javascript language.

Software requirement:


JavaScript is a scripting language which aim to make web pages more interactive and dynamic .

It allows to create applications that run over the web and it's free “no need to buy a license, so it's open standards”, also it can act as Object-Oriented Language.

JavaScript is a language?

Yes, not strange at all. It's scripting language which is interpreted by the browser command by command without changing it's original form “means no files are produced through this process , no .class like in Java or .obj like in c”.

So, what are other languages that exists?

The following comparison show up the different branches of language that we usually see.

Scripting Language Programming Language Markup Language
As mentioned before, it's interpreted line by line by an interpreter, and remains as it is, no change occurs. As long as it's human readable languages, so machines don't understand it, so it's compiled to binary code “0s and 1s” so it can be understood by machines and run. Consider that you want to organize your document, so all what you need to do it to markup it. Exactly that's why markup languages do, it's designed to transform raw text into structured documents by adding descriptive tags to the text.
Ex: Javascript, php,perl, python C,C++,Java,C# HTML, XML, XHTML

Now , the concept of scripting language is well understood, and distinguishing between different branches of languages are clear, so , let's go deeper in Javascript.

So, why using Javascript?

The following is some reasons why javascript is used:

  • Can dynamically generate HTML elements in runtime
  • Can read and change contents of HTML elements
  • Can Handle Events
  • Is used for Client side validation
  • Can detect visitor browser and settings
  • Can create cookies
  • Can directly access files on the web server
  • Can directly access files on the user's system

Now we see that JavaScript is sufficient enough , so let's go in more details in the language itself.

Steps to JavaScript writing:

Where does JavaScript code is written?

It can be written implicitly or explicitly:


Means that it can be written in one of two places in the web page:

  • In Head Section: which will be loaded before the rest of the document and if it's written in a function it will be loaded upon request.
  • in Body section: which will be loaded in it's turn on the page .

You can write any number of scripts inside the page, code is written between <script> tag as follow:

Listing 1: Where write Javascript code

                       <script type=”text/javascript”>
                                 // code goes here

So, browser can detect JavaScript code and interpret it as it should be.

Where write Javascript code

Figure 1: Where write Javascript code


Means that code will be written in separate file and linked to the desired page.

Code os written in separate file with .js extension and is included in the head of the web page as follow :

Listing 2: Linking an separate javascript file

                      <script src=”myfile.js”/>

Code written outside a function will be invoked dynamically, without waiting to event to occur.

External Javascript file

Figure 2: External Javascript file

JavaScript variables

As other languages, data needs to be stored in some holder for different manipulation operations, so variables are needed to maintain that.

Variable declaration:

Variable can be declared in one of two ways:

  • by direct value assignment. Ex: sum=10 ; val=”Hello Javascript”;
  • using the keyword var. Ex: var sum=10.

If you didn't assigned a value to a variable and tried to use it,it will produce a value undefined which is considered to be an error in case of variables declared without keyword var which will be runtime error and undefined value or NaN in other case.

Variables Scope:

Like in other programming languages, variables have scopes “local and global”.

Global scope is declared out of any {} in <script> tag and can be seen anywhere inside the tag, in other hand local scope, it's just seen inside its local.

Listing 3:Working with variables

                        var sum=10 //Global Variable

                                   function getSum()
                                           var x=sum //Local variable
                        sum=x //Wrong assignment cause x is local Variable

Variable Types:

Three main types:

  • Primitive data types:
    • Numbers : integers or float (Ex: var x=1 , var z=2.3)
    • Booleans : true or false(Ex: var flag=true)
    • Strings : (Ex: var val=”hello world”)
  • Reference data types:
    • Objects : myObj=new Object();
    • Arrays : var myArray=new Array(2);
  • Special data types:
    • null : no value
    • undefined : known before

JavaScript Expressions and operators

Since JavaScript is a language so everything is applied to different language exists here. So, it gets Expressions and operators.

Javascript Expressions are as traditional, Arithmetic to evaluate numbers, String to evaluate or operate on string or logical which results in true or false.

About operators, Javascript got 5 groups of operators which will sum up in the following tables.

Arithmetic Operators

Operator Name Example Result
- Unary Operator, as it operate on single variable X=10 y=-10
+ Addition X=2 z=7
- Subtraction X=3 z=2
* Multiplication X=2 Z=8
/ Division X=2 z=1
% Modulus arithmetic “division remain” X=2 z=1
++ increment X=2 x=3
-- Decrement X=2 x=1

Assignment Operators

Operators Example AS
= X=Y X=Y
+= X+=Y X+Y=Y
-= X-=Y X-Y=Y
*= X*=Y X*Y=Y
/= X/=Y X/Y=Y
%= X%=Y X%Y=Y

Comparison Operators

All of them returns true or false.

Operators Example Result IS
< 9<8 false Less Than
> 9>8 true Greater Than
<= 8<=8 true Less Than or equal
>= 9>=1 true Greater Than or equal
== 1 == 1 true Equality
!= 1 != 1 false Inequality
  X=5 //it's integer   It's restricted equality
=== y=”5” // it's string   Means that value and data type must be identical otherwise it return false
  x===y False  
  x==y True  

Logical Operators

Are used in comparison statements.

&& Logical AND
|| Logical OR
! Logical Not

Conditional Operators

Consider to be “if” and it operate on 3 operand, like you say I will get out, if it's raining I will put on a jacket otherwise I will wear casual wears.

It's syntax is as follows:

Condition? Expr1 if true: Expr1 if false


evaluate=(value>20) “Evaluation Done” : “Evaluation Fail” , this will return Evaluation Fail.

Statements in JavaScript:

Also as a language, flow control is very important to get correct and fully controlled code.

So, Statements are the survivors always in any language even in JavaScript.

There are two types of statements in JS:

Conditional Statements:

if .. else

Which is branching conditioning, check on condition if not true so continue or go to else if exists.

Listing 4: Simple If


    do something

if(x >10) 

    alert(“it's 10”)

Listing 5: if.. else

    do something
    do another thing

    alert(“its > 10”)
    alert(“less than 10”)

switch / case

Consider as if you are dealing with button box, you turn on electricity and pick only one button.

The same here, you pass expression and pick one case to be performed and in case of failure default is done.

Listing 6: switch / case

            switch (expression)


                case label1:



                case label2:



                default :



Very important note, break is optional, but use with caution if will not be put, because if you ignored it it will perform the case without it and the next case(s) until it get break;

Loop Statements

Which are repeating of actions till something stop it all loops got three essential steps: initial condition, stopping condition.


The code below will print on web page from 1 to 9.

Listing 7: For-loop

for(initial expression;stopping condition;step)

    { statements}



do .. while

Another looping technique which perform the operation at least one time before checking the condition.

Listing 8: do .. while




    x=1 //initial condition.
                x++; // step
          }while(x<=10); //condition


Easily it's loop that evaluate condition before work.

Listing 9: While

while (condition)



Commenting in JavaScript:

If I want to tell the browser to ignore a certain part of code so I have to comment it, use (//) to comment on a single like, while using (/* */) to comment multiple lines to force the browser to ignore the whole thing just use (<!-- -->)

That's all about session One, wish it's useful, see you next time.

My main area of specialization is Java and J2EE. I have worked on many international projects like Recorders,Websites,Crawlers etc.Also i am an Oracle Certified java professional as well as DB2 certified

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login