Search within TutorialsPark

Javascript Introduction


An Introduction to Javascript, its uses , applications and modes.


What is Javascript?

1. Javascript is a general purpose programming language used to add interactivity and life to an otherwise static webpage.

2. Technically, Javascript is one implementation of the specification called as ECMAScript , it was developed by Brendan Eich at Netspace in the year 1995, then called as LiveScript.

3. For marketing reasons, it was later renamed as Javascript(not associated with Java). Javascript runs on all major platforms and is hardware dependent, Javascript programs are executed by Javascript interpreter built into the browser.

4. When a HTML page is loaded by a browser, as soon as the <script> element is encountered, the javascript interpreter takes over and the script is parsed line by line.

Note: Javascript is not the only client side script, Microsoft has its owns client side language called as VB Script.

Java v/s Javascript?

1. The most common misconception is that Javascript is "Java". Javascript was developed at Netscape while Java was developed at Sun Microsystems. Hence, there is no association between the two.

2. Java programs can run independent of a Webpage, while Javascript programs are associated with a webpage and can only be executed within a browser window.

3. Java programs are strongly typed with strict guidelines and syntax, while javascript is flexible though it does have an optional strict mode and object oriented feature.

4. Java programs need to be compiled before execution, while javascript is executed using Javascript engine that resides within the browser


What are the uses of Javascript?

1. Javascript programs enables the webpage to detect and react to user initiated events like movement of mouse pointer , keypress etc.

2. It adds life to webpage by making them interactive by adding features like scrolling messages, rollovers, navigational aids, dialog boxes, dynamic images, client-side form validation, audio/video player etc..

3.Javascript is used to create cookies and read and write values to it.


What javascript cannot do?

1. Javascript cannot write files on server machines, you need to use server side languages like java, perl, php, CGI etc.

2. It cannot close browser windows which it did not open, it even cannot read information from webpages that originated from another server..

3. Javascript is a client side language, and requires a host which is usually the clients browser(user agent). The client has an option to disable javascript and it cannot be forced on the client.This might be for security purpose or to avoid annoyances from ads or popups..

4. Javascript cannot provide data security, as client can perform all kinds of manipulation on data before its send back to the server, hence client side validation by javascript is not trustworthy..


Look and feel of Javascript

Education is the best friend. An educated person is respected everywhere. Education beats the beauty and the youth.

display:

Note: In the above demo, the bordered text is an inline element <span>, we can toggle with it display from block to inline

CSS Block Level Elements

1. With display property set as block, the element always begins on a new line and occupies all the horizontal available space on that line, pushing all successive elements to next line.

Some elements like <p> , <h1-h6>, <hr> etc are block-level elements by default, but even inline elements like <span> , <imd> can be made to behave like block-level elements by altering their display property to block

Example: CSS Display - block

Give it a TRY! » Note: When the display is changed from inline to block, the element begins on a new line and occupies the complete line.


CSS Inline Level Elements

1. With display property set as inline, the element occupies space within the normal flow of the document (i.e in between the previous and succesive elements) and does not begin on a new line.

2. Inline elements have the display property as inline as default, but even block level(or any other type) elements can be made to behave like inline by setting their display property as inline

Example: CSS Display - inline

Give it a TRY! » Note: By default, <ol> is a block level element, but it behaves as inline after setting the display as inline.


CSS Display : Inline-Block

Education is the best friend. An educated person is respected everywhere. Education beats the beauty and the youth.

display:

1. With display property set as inline-block, the element gets characteristics of both inline and block level element.

2. The element is treated like a block element, but displayed like an inline element.

3. That is, the content appears alongside other content within the document flow(like inline elements), but properties like width, height and margin are applicable(like block level elements).

Example: CSS Display - inline-block

Give it a TRY! » Note: The element is displayed as an inline element, but margin and padding can be applied (possible only for block-level elements.)


CSS Display: Hidding Elements

Education is the best friend. An educated person is respected everywhere. Education beats the beauty and the youth.

display:

1. With display property set as none, no box is created for the element or its child elements and the element does not occupy a space within the page layout(i.e completely hidden).

Example: CSS Display - none

Give it a TRY! » Note: The element with display set as none is removed from the layout of the page hence hidden.