javascript
Brief description  about Online courses   join in Online courses
OR

Java script - What is JavaScript?

Chinmay  Hegde
Chinmay Hegde
JAVA/ J2EE Developer

JavaScript is the most widely used scripting language in internet and works in all major browsers. A scripting language is a lightweight programming language

JavaScript..?

- JavaScript was designed to add interactivity to HTML pages. So that you can make your HTML page much more attractive, dynamic and you can validate your html forms.
- JavaScript is usually embedded directly into HTML pages
- JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
- Everyone can use JavaScript without purchasing a license.
- JavaScript can be used to detect the visitor's browser

            Before starting JavaScript you should have basic knowledge of HTML. If you're ready, then, let's start with javascript. JavaScript is an Object Oriented Programming (OOP) language. An OOP language allows you to define your own objects and make your own variable types.

Note:

-           Java and JavaScript are two completely different languages in both concept and design.
-           Javascript is case sensitive.

JavaScript's official or Real name is ECMAScript. ECMAScript is developed and maintained by the ECMA organization. ECMA-262 is the official JavaScript standard.

The language was invented by Brendan Eich at Netscape (with Navigator 2.0), and has appeared in all Netscape and Microsoft browsers since 1996.The development of ECMA-262 started in 1996, and the first edition of was adopted by the ECMA General Assembly in June 1997.The standard was approved as an international ISO (ISO/IEC 16262) standard in 1998.


Let's go through bit of code.

<HTML>
<HEAD>
<TITLE>A First Script</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="javascript">
document.write("Welcome to SiliconIndia");
</SCRIPT>
</BODY> </HTML>

Output: Welcome to SiliconIndia
Let's explain what is going on:

When you're writing your scripts, you enclose them between two <SCRIPT> tags, an opening <SCRIPT> and a closing </SCRIPT>. The opening <SCRIPT> should tell the browser in which language the script is written in:

<SCRIPT language=”javascript”>

The closing Script tag is just the word SCRIPT in between two angle brackets with a forward slash:

</SCRIPT>

Most of your JavaScript will go between these two tags.
 
Using an External JavaScript:
<script type="text/javascript" src="xxx.js"></script>

Note: Javascript code can be placed both in head and body section.

So what is "document.write" then,
document.write command is a standard JavaScript command for writing output to a page.

eg: document.write("Welcome to SiliconIndia")

’document’ is part of something called the Document Object Model.

Now, What is Document Object Model(DOM)?

DOM defines the objects and properties of all HTML elements, and the methods (interface) to access them.
DOM is a standard for how to get, change, add, or delete HTML elements.
Document refers to all the text and HTML elements between the two BODY tags. And that includes any attributes inside the BODY tag itself. Like table, div bgcolor... The write( ) method writes text (and numbers as well) between the two BODY tags on your page. Javascript is case sensitive.
Don't worry if you don't understand some of that - the main point is that you are up and running, and you've written your first script. The journey has just started.

At the moment, we have our script between the two BODY tags. And it works perfectly well here. Best practice is to kept  SCRIPTS  in the HEAD section of your HTML. This is because any code in the HEAD section will be dealt with first by the browser. And besides, it's neater up there. You're not cluttering up your HTML code with lots of JavaScript.

<HTML>
<HEAD>
<TITLE>A First Script</TITLE>
<SCRIPT LANGUAGE ="JavaScript">
document.write("Welcome to SiliconIndia");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML> 

Did it make a difference? No, it did not. But rest assured that your script was dealt with browser before anything in the BODY section.
You can also put your scripts into HTML tags. Here's the document.write() code inserted into a Form's Button code:
<BODY>
<INPUT TYPE = Button VALUE = "Click Me" OnClick = "document.write('Welcome to SiliconIndia')">
</BODY>

Welcome to SiliconIndia is now in single quotes! That's because we used up our double quotes surrounding the document.write() part. And JavaScript doesn't like you using two sets of double quotes in the same bit of code.

So what have we learnt so far? We've learnt this:
    * Scripting code is written between a pair of <SCRIPT> </SCRIPT> tags
    * You can refer to the two BODY tags by using the word "document"
    * You can use the write( ) method of document to insert stuff onto your web pages
    * JavaScript is very picky about the way you spell things.

The Pop-up message box:

We've seen one way to display text - with the write() method of document. Another way to display text (and numbers) is with a little pop-up box. These are called Alert boxes in JavaScript, and they are ideal for reminding your users when they don't fill  your forms correctly.

The code for an Alert box is quite simple. It's this:

alert("That was not a proper email address")

Notice the  use of "alert" for an alert box? The message you want to get over to your users goes between the two brackets. Surround your text message with double quotes, or single quotes if you're putting it after an equals sign in a HTML element.

OnClick = "alert('That was not a proper email address')"

Note: Even on any event you can do 2 or more  task together, like, "on click of button show alert message and also change the background color of web page."
example:
<input type="button" onclick="alert('hello'), document.bgColor = 'Blue'">

All right, now that we know how to remind our users with pop-up boxes and written messages, what else can we do? Lots, actually. Let's have a look at that document thing again.

As was mentioned, document is a part of the Document Object Model. We saw a method that can be used with document, but here's a couple more (Properties and Methods).

Properties

    * bgColor
    * fgColor
    * title
    * location
    * images
    * forms

Methods


    * open()
    * close()
    * write()
    * writeln()

There are quite a few more Properties and Methods you can use with document. Let's see how you can use them in your own scripts.

<BODY>
<INPUT TYPE = Button VALUE = "Colour One" Onclick = "document.bgColor = 'Red'">
<INPUT TYPE = Button VALUE = "Colour Two" Onclick = "document.bgColor = 'Blue'">
<INPUT TYPE = Button VALUE = "Colour Three" Onclick ="document.bgColor='Green'">
</BODY>

When you're done, save your work and view the results in your browser. Click the button and see what happens.

The background color of your web page should have changed color when you clicked a button. It did this because of the bgColor poperty of the document object.

document.bgColor

After the equals sign, you can either type a name of a colour, or better use an Hexadecimal value:

document.bgColor = #FF0000
document.bgColor = #0000FF
document.bgColor = #00FF00

The fgColor property is similar to the bgColor property. Except it will change the colour of any foreground text on your page. Try it out and see how it works. You only need to change the "b" of "bgColor" to an "f". And type some text.
The document Title Property

The Title of a web page appears at the very top of the browser window. You set it by typing some text between the two <TITLE> tags. You can use JavaScript to either get the Title or to set a new one. Here's a script that pops up the Title in an alert box. Try it out and see it in action:

<HTML>
<HEAD>
<TITLE>Tilte of the web page</TITLE>
<SCRIPT language="javascript">
alert(document.title);
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

You can also reset the title of the web page. Change you alert code to this:

alert(document.title = "Now I've changed it")

The equals sign in there doesn't actually mean equals. It means "assign the value". So what we're saying is "Assign the value of 'Now I've changed it' to the title of the document."

Any direct text that you type after the "assignment operator" (the equals sign) needs to go inside double quotes.

Location property:

Javascript location property is used for control the web page displayed by the browser. The Location object contains information about the current URL.
properties of location object are: hash, host, href
location.hash will return value of the the #.
location.host is used for setting or returning host name.
location.href is used for set or return href.

Date object in JavaScript:

The Date object is used to work with dates and times.
Date objects are created with the Date() constructor.
Lots of information can be extracted from a date object. In this tutorial, we'll extract only what we'll need:

var now   = new Date();
var hour   = now.getHours();
var minute = now.getMinutes();
var second  = now.getSeconds();
var monthnumber = now.getMonth();
var monthday = now.getDate();
var year = now.getFullYear();

for example if you want to display current date on browser:

document.write("<b>" + monthday + "/" + monthnumber + "/" + year + "</b>")
And same way if you want to display current time:

document.write("<b>" + hours + ":" + minutes + " " + "</b>")

Write your comment now