JavaScript Introduction

JavaScript, also known as ECMAScript is a client-side powerful web programming language used to add JavaScript functionality to a web page and create rich web applications.

There is no need for an external program to run JavaScript. All you need is your web browser to interpret JavaScript code and display the results.

The most significant advantages of JavaScript is its ability to produce the same result on all modern browsers.

HTML is a great tool for displaying content. JavaScript is a great way of adding interactions.

JavaScript is used to manipulate, automate and dynamically customize the web page data.

JavaScript is case-sensitive language. var data = 10; and var Data = 10; are different variables. So you need careful when you write JavaScript.

JavaScript is an object-oriented programming language. JavaScript has dynamic data types, operators, objects, and methods. It's syntax comes from C and Java languages. JavaScript use semicolons to terminate its statements.

What can I do with JavaScript?
You can do anything with JavaScript that you can do with any other programming language.

What can JavaScript do?

A following examples of what you can do with JavaScript:

Giving a feedback and Detect user activity

JavaScript can give feedback to the user and detect when they do certain things. JavaScript has pop-up boxes, alert() to notify something to a user, confirm() to ask a user is it OK to continue, and prompt() to get some input from the user.

var name = prompt('Enter your name','name');
alert('Hello, ' + name);
confirm('Are you sure?');

Run it...   »

Manage Browser Windows

JavaScript gives you the ability to open a new browser window and add content dynamically, it also determine window size and close a JavaScript opened window.

The most common JavaScript document object write() method is used to write content to the browser. writeln() method break the line at the end of text content. document.open() opens a document for writing on the browser screen. and document.close() closes the document after a writing session.

<script type='text/javascript'>
    document.open();
    document.writeln('Hello World...!');
    document.writeln('<br />');
    document.writeln('Press <kbd>Close</kbd> button to close this window...!');
    document.writeln('<form><input type='button' value='Close' onclick='window.close();'/></form>');
    document.close();
</script>

window.open() to open browser window, window.close() to close opened browser window.

window.open('content_write.html', '_blank',  'height=300, width=700, resizable=yes');

Run it...   »

Manage HTML Elements/Attributes

JavaScript give you control to completely manage HTML Elements/Attributes using HTML DOM(Document Object Model).

HTML DOM is employed to retrieve and modify existing HTML Elements/Attributes. It also gives you control to create new Elements/Attributes dynamically.

JavaScript cloneNode() method is used to create copy/duplicate node of this node.

Here are some frequently used HTML DOM methods to find HTML elements:

• getElementById()
• getElementsByTagName()
• getElementsByClassName()

JavaScript innerHTML property sets or gets content between opening or closing tag.

document.getElementById('text').innerHTML = 'Hello World!';
document.getElementById('set_text').innerHTML = document.getElementById('text').innerHTML;

Run it...   »

HTML DOM provide following method to manage HTML attributes:

• getAttribute()
• setAttribute()
• removeAttribute()

Manage CSS Styles

HTML DOM element.style.property to change style of HTML elements.

document.getElementById('text').style.fontSize = '28px';
document.getElementById('text').style.color = '#FF21DD';

Run it...   »

Find Elements using CSS selector

querySelector() and querySelectorAll() methods to select CSS selector as a parameter and return the selected elements as DOM elements.

document.querySelector('#text');                // return element id='text'  
document.querySelector('#text, #set_text');     // either '#text' or '#set_text' depend on first found
document.querySelectorAll('#text, #set_text');  // returns both elements '#text' and '#set_text'

Validate Data

Using the DOM you can validate user input. If the data is not valid an alert will be given as an error message.

if(document.getElementById('uname').value.length < 5){
    document.getElementById('uname').style.border = '1px solid #FF0000';
    alert('Enter at least 5 character!');
} else {
    document.getElementById('uname').style.border = '1px solid #41B353';
    alert('You entered 5 or more then 5 character!');
}

Run it...   »

Catching a Mouse/Keyboard event

DOM Mouse Events occurs when someone performs a mouse related activity like: click, dblclick, mousedown, mouseup, mousemove, mouseover and mouseout.

DOM KeyboardEvent interface catch keyboard events. JavaScript follows 3 keyboard events keypress(), keydown(), and keyup().

Create Cookies

JavaScript Cookies were originally invented by Netscape.
Cookies are small text files that are stored on a user's browser.
Cookies are created when you visit a site that keeps track of a user's movement. Its effect is that when you revisit that site there is no need to login again. All customized preferences are automatically restored.

JavaScript Limitations

The following are a few things you can't do with JavaScript.

• JavaScript can't access databases.
• JavaScript can't write anything to a server without using a server side script.
• If you do not open a browser window using JavaScript you can't close that browser window with JavaScript. You can only close an opened JavaScript window.

Java and JavaScript are they the same?

No, Java and JavaScript are two completely different languages in both concepts.

Java is a most powerful, popular, and complex programming language (such as C, C++, Objective C). Whereas JavaScript is a web programming language that executes its functions on a client's browser.

• « Previous
• Next »