java script - a new look
DESCRIPTION
TRANSCRIPT
JavaScript – A New Look
Mr. Geek
Interpreted language what makes a static
webpage dynamic. Is not complied but interpreted by the
browser. Browser downloads the code and run it. Manipulates HTML object also known as DOM,
such as form items, anchors.
What is JavaScript?
Developed by Brendan Eich of Netscape,
originally under the name mocha. Became livescript before renaming into
JavaScript. Unrelated to Java, despite the name. It was developed to create a dynamic website. AJAX has given a brand new look to JavaScript;
Now JavaScript has become more important than ever.
History of JavaScript
Different browsers implements different
versions of JavaScript. Some browsers like Internet Explorer even add
their own functions to enhance the code. Every JavaScript codes does not work in every
browser; therefore code should be written with the user demographic in mind.
Newer browsers are adopting standard JavaScript; also known as “Class A” browsers.
Browser Issues
To make static page more interactive by adding dynamic
functions. Validate form before submitting. Since the data can be validated or cleaned up before
sending to the server, JavaScript helps lessen the burden on the server.
JavaScript can dynamically create and manipulate DOM objects, hence HTML pages can be created and changed programmatically without refreshing the page.
JavaScript can fetch HTML objects as needed, so that unnecessary data does not transfer – this makes the page/data load faster.
Why use JavaScript?
JavaScript can be implemented in three basic styles.
Embed in Body of the document. Embed in Header of the document. Load from an external (.js) file.
Embed in Body of the document This is the easiest way to implement JavaScript. Embed where needed using <script>…</script>. This is very poor way of implementation as the functions
cannot be easily reused. Script is not available for the part of the document which
is above the implantation. Difficult to manage codes.
How to use JavaScript?
Embed in Header of the document
Here <script>…</script> is implemented before the <body> tag.
This ensures that JavaScript functions are available for all the parts of the documents (DOMs).
Cannot be applied across multiple documents (webpages).
Changes have to be replicated across multiple documents manually.
Does not make the JavaScript code independent. More codes.
How to use JavaScript?
Load from an external (.js) file
Most efficient way of implementing JavaScript Codes. Multiple documents can reference single JavaScript files using
<script src=“JSPATH”></script>. Changes in the script file with automatically reflected to all the
documents that references it. This enables true separation of header components. One weakness of this implementation is that a page has to load
all the JavaScript codes regardless it uses it or not. This is helped by caching; but what if the js file becomes multiple megabytes in size (this has become true in newer AJAX-enabled website).
One way to overcome this weakness is that breaking up the file into multiple files and load dynamically only when a function is needed. AJAX makes this possible.
How to use JavaScript?
With the explosion of AJAX enabled components like JavaScript
trees and grids, JS files tend to become very large – often in multiple megabytes.
Large files makes the web application slow due to net transfer and browser processing of large files.
An ideal solution will be only download only the part of the file, whose function is called.
This can be accomplished by creating multiple files with relevant piece of the code.
When the function that resides in a file is called; dynamically download the JS file with that function and load it to the browser – after it loads to the browser then only execute the function.
All this process should happen within few seconds.
Dynamic Load of JavaScript File
Previously JavaScript was restricted to form
validation and interaction with HTML objects. Now AJAX (which is basically a JavaScript
implementation) enables us to do more than just validation.
It is used to fetch data without refreshing the page. It is used to fetch only the required data and
modify only the part of the webpage. If you have a high traffic website, JavaScript is a
must for form validation so that it is less burden for the server.
When to Use JavaScript?
Since all the codes of JavaScript is available to the
public; it is advisable not to put confidential business logic in the JavaScript code.
As JavaScript runs in client machine you cannot use it to interact with the files and databases in the server. You would need an intermediary language like ASP.Net, PHP and CGI to do the server functions.
If you need some of your data to be indexed by Search Engines; it is advisable to fetch data in static manner, instead of using AJAX. Till date Search Engines are not very AJAX friendly.
When NOT to use JavaScript?
JavaScript follows basic rules of programming; and the codes are
similar to c++ and Java. Every statement should end in “;” (Although many browsers do
not enforce it).
Variable variables can be public or private. Variables are case sensitive. All the variables that are defined outside a function are public. Variables that are defined inside a function but with out a “var”
keyword is also a public variable. Since JavaScript code is read and interpreted top to bottom;
variables defined at the bottom are not available to the top. Eg: var firstName=“santosh”;
Anatomy of JavaScript - Variable
Array
Array helps store and manipulate multiple values at multiple location in the memory.
You can sort through an array. Array always have index number; can also have
keyword. Array index starts with zero. Array can be single or multiple dimension. Eg: var animals = new Array(“Tiger”, “Fish”,
“Snake”); document.write(animals[0]) prints Tiger.
Anatomy of JavaScript - Array
Functions
Functions in JavaScript can be used in two ways: As a regular function. As a signature of a class. This means any function in JavaScript can
instantiate an object with new keyword. This is UNLIKE any other programming language. This is a very powerful feature, at the same time can make things very confusing.
Just like in Class you can extend property of any function by using prototype keyword. This makes inheritance possible in JavaScript – which makes JavaScript truly object oriented programming.
Functions can be nested; meaning you can define a function within a function.
A JavaScript functions can be used as: function, method, constructor, class and modules
Anatomy of JavaScript - Functions
JavaScript is an event driven language. Initiation of any class and method is done by a
user clicking (or other interaction) any part of the document or a program initiating an event.
Each object can listen to various types of events.
Once an event is fired other functions work in harmony to accomplish relevant task.
Example: <input type=button onClick=“doSomething();”> Here a button is capturing a click event. Once it captures,
a function called doSomething is executed.
Anatomy of JavaScript - Events
Example of a function:
function Call(number){ phone_dial(number)
} Example of pseudo function:
Call: function(number){ phone_dial(number)
} Extending a Class:
Call.prototype.hangup(){phone_onhook();} Now the Call class has a hangup function.
Instantiating an object from function: var c = new Call(); c.hangup(); //this is valid since we extened Call using prototype.
Nesting functions: Call: function(number){
Home: function(){ dial:function(){}}
} Not it is possible to call the nested function dial.
var c=new Call();c.Home.dial();
Anatomy of JavaScript - Functions
JavaScript and HTML’s implementation got out of control as new browsers did not follow the
standard. A need for Standard implementation arose; which gave birth to XHTML, which follow the
strict guidelines as in XML. This give rise to Document Object Modal (DOM) which treats every element and nodes in the
XHTML as an object. Like in XML you can manipulate XHTML via programming languages like JavaScript. You can
reference to any node using XPATH. One can even use XQUERY to get and manipulate one or collection of similar nodes. This gave documents more structure and flexibility of manipulate. Since JavaScript was already doing some manipulation; it was an ideal choice of language for
DOM Scripting. CSS plays a vital role in formatting the DOM objects. JavaScript can manipulate CSS as well.
It can apply CSS formatting to one or multiple objects in the DOM. Example:
var elements = document.getElementsByTagName("body")[0].childNodes;for(i=0;i<elements.length;i++){
if(elements[i].nodeType == 1 && elements[i].id) alert(elements[i].id);}
DOM Scripting
Invention of AJAX has revolutionize the way JavaScript is implemented. Even though basic AJAX means fetching the data asynchronously from
the server (without refreshing the whole page), DOM Scripting has become synonymous to AJAX implementation.
Combination of DOM Scripting and AJAX has truly made a webpage a rich, dynamic and powerful medium to share information.
AJAX has made the webpage very efficient by enabling it to download data in parts when needed and render only part of the webpage which is changed due to the new data.
Different browsers have different implementation of AJAX but their basic concept is the same.
AJAX tries to make stateless HTTP protocol seem stateful. …More about AJAX in next slideshow
Reborn of JavaScript with AJAX