Introduction to Javascript Programming

Want to learn the concept of Javascript Programming? In this post, we will teach you the fundamental concept of Javascript.

The Programming language  of the HTML and the Website pages is JavaScript.It is a cross-platform and open language.

Features of Javascript

  • Easy to compile
  • Used for validation purpose
  • Used to build user interactive UI to make the website look appealing to viewers.
  • JavaScript is a lightweight programming language.
  • Intended for making system driven applications.
  • Corresponding to and incorporated with JAVA.
  • Corresponding to and incorporated with HTML.
  • Open and Cross-stage.

 

The Script can be written both in head section (Script in the external fine and then call it in), as well as the body section and you can mention any number of scripts.

 

 

JavaScript in head section :

 

If the script has to run on some event handlers then you mention the script tag in the head section.

 

Example:

<head><script type=”text/javascript”>
function banner(){
alert(“Welcome to JavaScript”)}
</script>
</head>
<body>
<input type=”button” onclick=”Banner()” value=”Click here” />
</body>

JavaScript in the Body section :

 

If the script has to run on page loads so the script generates content to the page, then the script is written in the <body> section.

 

<head><script type=text/javascript>

 function banner(){

alert(Welcome to JS)

}

</script>

</head>

 <body>

<script type=text/javascript>

 document.write(Hello Viewers)

 </script>

<input type=button onclick=Banner() value=Click here / >

 </body>

 

JavaScript in External File :

 

Demo to show how you can include an external JavaScript file in the HTML Code using the Script tag.

The Script tag allows us to store the javascript in an outside file and then include in at the head section.

 

Example:

<html><head><script type=text/javascript scr=Demo.js >

</script>

<body>

</html>

 

JAVASCRIPT ARRAY

To store multiple values in JavaScript we can make use of Arrays.

Where we can add multiple values of the same type in a single variable.

 

Ex:

var cars = [“jazz”, “ritz”, “punto”];

Arrays are special kind of variables which can insert more than one value in it at a time. An array is majorly for the storage of the collection of data.

 

There are three ways you can create an array:

  • Empty Array
  • Consturctor Array and
  • Array with value.

 

Consturctor array example:

document.write(“CONSTRUCTOR ARRAY EXAMPLES”);
var cars = [“jazz”, “ritz”, “punto”];
document.write(“List of cars:-“+cars);

Array with Elements:

 

document.write(“Array with Elements:”);
var points = new Array(); 
points.push(10,20,30,40);
document.write(“List of points:-“+points+”<br>
before push:<br>”);
document.write(points+”<br>”);
points.pop();

 

document.write(“after push:<br>”)

 

document.write(points+”<br>”);

Methods Used in ARRAYS :

  • push() and pop() methods:

 

In JavaScaript it is easy to add and remove elements from the array using the push and pop methods.

Pop means removing the element out of the array list.

Push means adding the element into the array list.

The elements are added and removed in first in last out(FILO) manner.

 

Example for pop method :

 

var points = new Array(); 

 

points.push(10,20,30,40);

 

document.write(“List of points:-“+points+”<br>

 

before pop:<br>”);

 

document.write(points+”<br>”);

 

points.pop();

 

document.write(“after pop:<br>”)

 

document.write(points+”<br>”);

Example to show push() method :

 

document.write(“CONSTRUCTOR ARRAY EXAMPLES”);

document.write(“<br>”);

document.write(“<br>”);

var cars = [“jazz”, “ritz”, “punto”];

document.write(“List of cares:-“+cars);

document.write(“<br>”);

 

cars.push(“alto 800”)

document.write(“List of cares:-“+cars);

document.write(“<br>”);

 

  • shift() and unshift() methods :

 

The pop() and push() methods uses First in Last Out methodology

So in javascript if we want to deal with the starting array elements use make use of the shit() and unshift() methods.

 

The shift() method is similar to the pop() method in function but it deals with the first element in the array list instead of the last.

 

The unshift() method is very similar to push() mehtond in working but it acts on the starting element of the array unlike targeting the last elements.

 

Example showing shift() and unshift() methods :

 

 

 

document.write(“<br>

 

Using SHIFT and UNSHIFT<br><br>”)

 

var course = [“C”, “C++”, “Java”, “Python”];

 

document.write(“Before Shift – >”,fruits,”<br>”);

 

fruits.shift();

 

document.write(“After shift – > <br>”,fruits,”<br><br>”);

 

 

   var course = [“C”, “C++”, “Java”, “Python”];

 

document.write(“Before UnShift – >”,vegies,”.<br>”);

 

vegies.unshift(“Ruby”);

 

document.write(“After UnShift – >”,vegies,”.<br><br>”);

  • Element Changing in Array :

 

In JavaScript array elements can be accessed using the array index, Here the array index starts from 0 for the first element of the array and 1 for the second element in the array and so on.

 

Example to Change the array element using the Index:

var course = [“C”, “C++”, “Java”, “Python”];

 

document.write(“Before changing the values ->”,fruit,”<br>”);

 

fruit[0] = “Python”;

document.write(“After changing the values ->”,fruit,”<br><br>”);

 

4.Array Splice() method :

 

Another useful method to add elements into the array at any position is the Splice method this simply used two values in it, one value to specify the position of the new element to be added onto.
The second value parameter define the index position of the element to be removed from the list.

 

And the new elements can be mentioned between the ”new element” double quotes.

 

Syntax for splice() : Var arrayName = [Element1, ………. Element n];

Fruits(value 1,Value 2,New Element 1”……. New Element n);

 

Example:

var course = [“C”, “C++”, “Java”, “Python”];

 

document.write(“USING SPLICE TO ADD ELEMENTS INTO                                        ARRAY WITH INDEX VALUES<BR><BR>”);

 

document.write(“Before splice of array – >”,course ,”<br>”);

fruit.course (2, 0, “Ruby”, “JaveScript”);

 

document.write(“After splice of array ->”,course ,”<br><br>”);

You can also remove the array elements using the splice() method :

 

var course=[“C”,”C++”,”Java”,”Python”,Ruby,JaveScript];

 

document.write(“Splicing to remove elements

 from the array – >”,course,”<br>”);

 

fruitss.course(0, 1);

 

 

document.write(“After Splicing ->”,course,”<br><br>”);

  • Array Slicing Method :

 

The slice() method is used to take a part of the array list element and make a new array out of it.

 

The silce() method does not delete elements from the source array but takes them and makes a new array with the newly imported elements.

 

Example :

Single element-

Var course=[“C”,”C++”,”Java”,”Python”,Ruby,JaveScript];

 

document.write(“USING SLICE TO CREATE NEW ARRAY LIST                      ELEMENTS<br><br>”);

 

document.write(“Before slice of array – >”,course,”<br>”);

 

var java = course.slice(3, 5);

 

document.write(“After splice Java  ->”,java ,”<br><br>”);

 

Multiple element-

Var course=[“C”,”C++”,”Java”,”Python”,Ruby,JaveScript];

 

document.write(“USING SLICE TO CREATE NEW ARRAY LIST ELEMENTS<br><br>”);

 

 

document.write(“Before slice of array – >”,course,”<br>”);

 

Var javar = course.slice(3, 5);

 

document.write(“After splice of array All Java Related courses >”,javar,”<br><br>”);                  

  • Deleting Array Elements :

 

JavaScript deals with arrays as an object the array elements can be deleted using the OPERATOR delete

 

After the delete operation is performed the element will be undefined in the array list.

 

Example :

var course=[“C”,”C++”,”Java”,”Python”,Ruby,JavaScript];

document.write(“USING DELETE OPERATOR<br><br>”);

document.write(“Before Deletion an element – >”,course,”<br>”);

delete course[3];

document.write(“After deleting the element->”,course,”<br><br>”);

The output show that the 3rd element in the array list to be deleted and changed to undefined when printed next time.

Leave a Reply

Your email address will not be published. Required fields are marked *