Basic JavaScript Tutorial for Beginners

Basic JavaScript Tutorial for Beginners

Hi, I am Surekha Madaan, a web designing student of ADMEC Multimedia Institute today I am writing a very easy and step by step tutorial on JavaScript for those who just started learning JavaScript or for beginners. This article is completely focused on JavaScript basics and contains useful information about the introduction of JavaScript, importance of JavaScript and how to write JavaScript programs etc. Besides explaining JavaScript, I will introduce the basic principles of programming and why language matters?

Basic Principles of Programming

Programming is a very innovative process to instruct a computer to do a task done by the programmer. A program is many things. It is a piece of text typed by a programmer. It is the data which is stored in the computer memory, and used as information for other processes.

We can say that writing computer programs is like a playing game. Because it is a building of thoughts and all the control is in our hands. If we make a program with proper care then program’s size and complexity can be under controlled. But without care, a program’s size and complexity will grow out of control. The main problem of programming is to keep it in under control.

For writing a good program we should have proper knowledge of programming. We have good programming skills so that we can run a program in a very efficient manner.

Why Language Matters

In the very beginning of computing, there was no programming language. Programs are simply written in the form of bits i.e. (zero’s and one’s) by the programmer like 00001101 which is equal to 13. If we want to add numbers from 1 to 10 we had to do this in the form of series of bits. So that’s why this was not an efficient method for computing

It could be written in English like this:

  • Store the number 0 in memory location 0000.
  • Store the number 1 in memory location 1111.
  • And so on…

Again it is not a good method because it is more readable. After that a new method comes which uses names instead of numbers for the instructions and memory locations. Like this:

  • Set “”total to 0.
  • Set “”count to 1.
  • And so on…

It is still not an appropriate method.

Here is the same program in JavaScript:

var total = 0 , count = 1;
while (count <= 10)
{
    total += count ;
    count += 1;
}
console.log (total);
// ! 55

A good programming language helps the programmer to create a good program which is understandable to computer. With its help a programmer can create its own building blocks.

Programming is very important for a programmer without programming a programmer cannot make a good and an efficient program. That’s why a programming language matters. In the early time there was no efficient method for instructing the computer. But now there are many programming languages exist. Like C, C++,Java, .NET, JavaScript etc

Introduction of JavaScript

  • Netscape and Sun Microsystems developed JavaScript in 1995. However, JavaScript is not the same thing as Java.
  • It is cross platform, object-oriented scripting language.
  • It is small, light weight language, it is not useful as a standalone language, but is designed for easy embedding in other products and applications such as web browsers.
  • It is the most popular programming language on the web.
  • All the modern HTML pages are using java script and it is easy to learn.
  • JavaScript code is case sensitive

Importance of JavaScript

  • Add Multimedia Elements

With JavaScript we can show, hide, change, resize images, and create image rollovers. You can create scrolling text across the status bar.

  • Dynamically in Nature

It is universally adopted by every web browsers for its support which allows dynamic content to get execute in a webpage

  • Interactive and User Friendly

It can do some processing of forms and can validate user input when the user submits the form. It allows easy navigation with some additional effects.

Syntax of JavaScript

  • A JavaScript consists of JavaScript statements that are placed within the <script>… </script> HTML tags in a web page.
  • You can place the <script> tag containing your JavaScript anywhere within you web page.
  • There are two important Scripting Attributes:
  • Language: This attribute specifies that which scripting language we are going to use. Typically, its value will be JavaScript.
  • Type: It means the value should be set to “text/JavaScript”.

Example

Let us write our class example to print out “Hello World”.

<html>
<body>
<script language="JavaScript" type="text/JavaScript">
    document.write("Hello World!")
</script>
</body>
</html>

Above code will display following result:

Hello World!

JavaScript Placement in HTML File

There is a flexibility given to include JavaScript code anywhere in an HTML document. But there are following most preferred ways to include JavaScript in your HTML file.

  • Script in <head>…</head> section.
  • Script in <body>…</body> section.
  • Script in <body>…</body> and <head>…</head> sections.
  • Script in and external file and then include in <head>…</head> section.

The best way to link your JavaScript to your HTML document is that always link your JavaScript file just before the closing <body> tag of your html document.

JavaScript Values

Imagine a sea of bits. A typical modern computer has more than 30 billion bits in its volatile data storage. Nonvolatile storage (the hard disk or equivalent) tends to have yet a few orders of magnitude more. To be able to work with such quantities of bits without getting lost, you can separate them into chunks that represent pieces of information. In a JavaScript environment, those chunks are called values or JavaScript Values. Though all values are made of bits, they play different roles. Every value has a type that determines its role.

There are 5 basic types of values in JavaScript: numbers, strings, booleans, null, and Undefined values.

Number

Numbers are numeric in nature or numeric value. In a JavaScript program, they are written as follows:

Example: 15

String

The next basic data type is the string. It is used to represent text. It is written in quotes.

Example: “I purchased the Laptop.”
                  “I am feeling good.”

Both the single and double quotes can be used to represent string.

Boolean values

Often, we will need a value that distinguishes between two possibilities, like “yes” and “no”, or “on” and “off”. For this, JavaScript has a Boolean type, which has just two values: true and false (which are written simply as those words).

Undefined value

In JavaScript, undefined means a variable has been declared but has not yet assigned a value, such as:

Example

var testVar;
alert (testVar); // shows undefined 
alert (typeOfTestVar); // shows undefined also

Null value

Null is an assignment value. It can be assigned to a variable as a representation of no value:

Example

var TestVar = null;
alert(TestVar); // shows null
alert(typeOfTestVar); // shows null

JavaScript Variable

Like other languages, JavaScript has variables. Variables can be used as containers. You can place data into these containers and name the container for refereeing the data.

Before you use a variable in a JavaScript program, you must declare it. Variables are declared with the var keyword as follows:

Example

var num = 50;

JavaScript Variable Scope

The scope defines the declaration of variables. JavaScript variable has two types of scope:

Global Variables: A global variable has global scope which means it is defined everywhere in your JavaScript code.

Example

var imgName = "Camera";
function myFunction(){
   document.getElementById("demo").innerHTML = "I can display " + imgName;
}

Local Variables: A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.

Example

function myFunction(){
   imgName = "Camera";
   document.getElementById("demo").innerHTML ="I can display " + carName;
}

myFunction();

JavaScript Popups

There are three types of popups in JavaScript.

Alert Dialog Box

This is mainly used for a warning message to the users. Suppose if one input field requires entering some text but user does not enter text in that field then we can use an alert box to give warning message as follows:

Example

<html>
<head>
<title>JavaScript</title>
<style type="text/css">
   body{ color: #f0f; font-size: 30px;}
</style>
</head>
<body style="background:#00f;">
   <p onclick="my_func1()"><strong>clickk meee</strong></p>
   <script type="text/javascript">
      function my_func1()
      {
         alert('i m function')
      }
   </script>
</body>
</html>

Confirmation Dialog Box

This method displays a dialog box with a specified message, along with an OK and a Cancel button. A confirm box is used if we want that the user to verify or accept something.

Example

<html>
<head>
   <title>JavaScript</title>        
</head>
<body>
   <p onclick="myFunc2()">Click Me</p>
   <script type="text/javascript" >
      function myFunc2()
      {
         confirm('Are u sure to do it');
      }
   </script>
</body>
</html>

Prompt Dialog Box

This dialog box works as:

Example

<html>
<head>
   <title>JavaScript</title>
</head>
<body>
   <p onclick="myFunc3()">Click Me</p>
   <script type="text/javascript" >
      function myFunc3()
      {
         prompt('Enter your age please');
      }
   </script>
</body>
</html>

Summary

In this section we discuss the introduction of javascript, importance of javascript, various values, how javascript placed in html, defining the scope of variable, and all the the dialog boxes with example. I hope after going through this article you would be able to understand the basic structure and working of  JavaScript.

About The Author

Hello friends…

My name is Surekha Madaan. I am doing web designing course from ADMEC. I gave my best efforts to make it best hope you liked it. Please share your views and doubts in comments.

Leave a Reply

You must be logged in to post a comment.

Copy link