JavaScript Overview

JavaScript Overview

Java-Script Placement:

Generally, All the Java-Script code is placed inside <script> tag or using an external link.

1

2

3

<script>

alert("hello world");

</script>

Java-Script Variables:

Java-Script is not a Type-Language. So it has no issue of variable type. Whatever the value of the variable is, the variable automatically changes to that type. “var” keyword is used to declare Java-Script variables. All JavaScript variables must be identified with unique names. These unique names are called identifiers. Names can contain letters, digits, underscores, and dollar signs. Names must begin with a letter. Names can also begin with $ and _. Names are case sensitive (y and Y are different variables). Reserved words (like JavaScript keywords) cannot be used as names.

1

2

3

4

<script>

varx=5;

alert("value of x="+x);

</script>

Java-Script function:

A function is a block of code design to perform a particular task. A js function is executed when something invokes it. A js function is defined with the “function” keyword followed by a name and parentheses ().

1

2

3

4

<script>

functionhey(){

alert("this is a function");}

</script>

Java-Script Outputs:

To display dialog box in java script we use:

1

alert();

To display anything on screen we use:

1

document.write();

document.value and document.innerHTML is also used to show output in HTML tags.

Java-Script Styles:

Suppose we have a string “I love my Country” and we want to apply different styles like on its font, alignment or color, etc. We can do all in java-Script. Consider the following code.

1

<h1>My country isPakistan</h1>

Above is an HTML heading one tag containing a string. We use HTML id attribute to access HTML tag in Java-Script so give an id to this <h1> and set a value of that id.

1

<h1 id=”head”>My country isPakistan</h1>

Now to get that element in Java-Script we consider it as a document and getting that element by its ID.

1

document.getElemetByID();

The full code for above description is:

1

2

3

4

<script>

varx=document.getElementByID("head");

</script>

<h1 id=”head”>My country isPakistan</h1>

Now the JS variable x contain all the properties and attributes of h1 having id head. And for our further use we use x.

So first we just try to change the value of <h1> so we use innerHTML object to change the content of <h1>.

1

x.innerHTML="I am Pakistani";

But if we put that line to the code above it has no effect because the script is executing before HTML tag and that’s why it has no effect on the tag. So we put script after body.

1

2

3

4

5

6

7

<Body>

<h1 id="head">mycountryisPakistan</h1>

<Body>

<script>

varx=document.getElementById("head")

x.innerHTML="I am Pakistani";

</script>

Now when the code executes first it writes “My country is Pakistan” and when it reach on JS script then it changes it to “I am Pakistani”.

If we want to change the color or style of string then JS provide couple of functions for it. Like font(), bold(), big(), small(), italic(), fontcolor(), fontsize(), subscript and superscript etc.