Tutorials

Javascript is a very popular scripting language for web browsers. Its basic features include browser support, support of objects, and increased functionality.

How to avoid mistakes in java script programming

One will normally encounter problems such as getting an error message when Javascript is running. To avoid mistakes, you should always go back to your code and check for possible errors. One major error could be mismatched braces. To avoid this, make sure that for every { brace used, there is a corresponding } brace. Another usual programmer oversight is an open quote lacking the corresponding closing quote. Another possible cause for this error is when a text contains an actual apostrophe and you forgot to escape it with a backslash. Without this, the apostrophe will be treated as the end of the text. Another syntax error is forgetting to put a semi-colon at the end of each statement.

Rules in Javascript programming

Programmers who are using this software must be fully aware of the basic codes in running a script. This is the most basic and essential rule for those who are starting out as web developers. Mastering the basics will lead to less errors and can serve as a good foundation to create more complex and animated script for web browsers.

It is therefore necessary to look into guides and tutorials to learn more about the basics of Javascript programming. There are lots of reference materials available on the internet as well as comprehensive guide books that can assist a beginner with this software.

Javascript is very popular as a client side scripting language for web browsers. It is simple to use and can be used to implement simple to complex features in a website. The basic features of this programming language are browser support, support of objects, and increased functionality.

Browser support

All browsers accept Javascript as a scripting language. This means that you don’t need to use any plugin in your browser if you want to access flash content. You just have to manage the tasks that are dependent on the DOM of your particular browser.

Support of objects

Javascript is a programming language that is object-oriented. Compared to other object-oriented programming language, it handles objects and inheritance differently, making it simpler to learn and use.

Increased functionality

Javascript is indeed the best place to start for those who want to learn computer programming. Its increased functionality feature allows you to assign function to variables. It can also allow a function to accept another function as parameter and return a function as well.

If you want to improve your online presence such as adding interactive features, graphics, and other gimmicks to your website but do not have any background in computer programming, Javascript is the right tool for you. It is an easy to learn and use programming language even for non-techies.

Online Javascript tutorials

There are a lot of sites where you can begin learning Javascript. Online Javascript tutorials are available and even some are free. Just search through the Internet until you find the site that you feel is most helpful.

Short courses on Javascript programming

If you prefer to have the traditional classroom setting over self-study, there are a lot of schools and foundations that offer short courses on Javascript programming. These do not come for free, but are more comprehensive and extensive.

Whatever way you decide to learn Javascript, it is always best to have Javascript programming books as reference. Popular books are "JavaScript Bible, Fifth Edition by Michael Morrison" and "JavaScript Examples Bible: The Essential Companion to JavaScript Bible by Danny Goodman."

When someone asks what is the commonly used scripting language in the web, many would instantly answer JavaScript programming. I agree on such claim, since Java program is used by non-pro and professional web designer to validate forms, improve web design, create cookies, as well as detect browsers. Known as the most popular scripting language in the Internet, JavaScript is also very easy to learn and its application is fun and enjoying.

As most web designers know by now, JavaScript features a number of built-in-objects, including Array, String, Date, and a lot more. With the featured built-in objects of Java, web developers can also create their own objects. To those newbie web developers, a Java object is a unique kind of data that has a selection of methods and properties. The Internet offers a lot of instructions and tutorials regarding the methods on how to create Java objects.

Let us assign an example for a Java object. For instance, an animal is the object. Associated with the object are essential animal properties, such as name, weight, height, breed, etc. All animals have such properties. However, the values of the stated properties will vary from animal to animal. In addition, Java objects also features methods. The methods are the various actions that can be applied to the objects. An animal's methods could be eat, play, sleep, and many others.

The modern digital world has brought about so many changes when it comes to conventional animation design and creation. Now we have all sorts of tools to do graphical movies. We even have web designers and developers who could do a Flash movie as good as any film director, you know. But did you know that there are even web developers and designers who could work at Disney just by using JavaScript? Yes, and the secret to this trick is controlling animated GIFs thorugh JavaScript programming.

Many web programmers would choose Flash over JavaScript. But if you're in the field of web design, chances are, you know what good JavaScript programming skills would do to your career. This because animations on the pages of internet sites nowadays must also be as interactive as possible. If it's interactivity we're talking about, then JavaScript comes into play. That's right, 'cause this is the prime web development language when it comes to animated interactivity!

But animated GIFs on a page of any internet site usually run with speed differences. Such animations could either blind you with its speed or tire you out with its immobility! But with JavaScript, controlling those animated GIFs on the pages of your internet site can be actually done rather easily. You first have to define variables which pertain to the number of digital images you would be using, as well as the functional delay time to be used in interchanging each digital image with one another. Next is for you to load up an array, or rather preload it. The codes below are a good sample of this trick.

< - start of code - >



delay = 100; <-- delay time of the animations (.1 sec.)

imgNumber = 0; <-- number of the image in the animation

totalimgNumber = 8; <-- total number of images

anim = new Array(); <-- images array



for (i = 0; i < totalimgNumber; i++) {

anim[i] = new Image (239, 390);

anim[i].src = 'wave' + (i + 1) + '.gif';

}



< - end of sample - >

< - start of code - >

var boardNum = 0;
var transNum = 0;
var boardSpeed = 2000;
var transSpeed = 150;

< - end of sample - >

If you combine arrays, image replacement via JavaScript, and a link, what you get is a damn JavaScript billboard! Now this JavaScript function is very useful for those web developers and designers who want the pages of their internet site as visually appealing and interactive as possible. Now that fast mobile computing is a possibility, more and more people should be able to access the pages of your internet site. Thus, the codes above are there so as for you to have an idea what the most important aspects of building a damn JavaScript billboard are. After all, if more and more people can now view your internet site, wouldn't it be polite to at least give them an experience they'll tend to remember?

The codes above are composed of two important portions to consider in creating an actual JavaScript billboard, namely the actual lull time and the damn transition. Of course, the transition is what you get when you see images being replaced every so often on your JavaScript billboard. On the other hand, the actual lull time is the moment an internet site viewer could click on a specific image shown on the billboard. I use this trick to advertise the services that I offer through my internet site, and I have made quite a few bucks more with it! I think you should also exploit how people regard visual appeal and interactivity when it comes to internet surfing.

The interactivity of the internet is what makes internet surfers more and more enthusiastic in accessing the information they could gain from navigating and browsing through the internet sites on the world wide web. Plus, faster internet connections now make it possible for even faster reaction time intervals between users and the functions and features of internet sites. With this, JavaScript programming has become a prime necessity when it comes to the design and development of internet sites. This is because JavaScript promotes heightened interactivity levels on the pages of internet sites. With JavaScript, it can even provide the web designer with the necessary optimization options for the menu systems on the pages of internet sites.

Menu optimization using JavaScript is a tediously long process of coding work, but the results would evidently be more rewarding than not using it at all. Thus, I have given the codes below, which is quite a long set, in order for you to have an idea how menus can be optimized for maximum performance and interactivity. After all, the development of the internet took quite an equally long coding work process to become what it is today. Plus, it is continuously being developed, so the codes below would have its share of evolution processes as time passes by and the needs of internet surfers change and develop as well.

< - start of code - >

window.onload=rollup;

function rollout(objMenuitem, objEvent)
{
var iKeyCode;

// Check if from a keyboard - non IE, but
// irrelevant as tab doesn't trigger the
// keypress event in IE
if (objEvent && objEvent.type == 'keypress')
{
if (objEvent.keyCode)
iKeyCode = objEvent.keyCode;
else if (objEvent.which)
iKeyCode = objEvent.which;

// If it's not the enter key or space key,
// pass control back to the browser
if (iKeyCode != 13 && iKeyCode != 32)
return true;
}

// Work out what we need to do
if (objMenuitem.nextSibling.style.display == 'block')
var strDisplay = 'none'
else
var strDisplay = 'block';

// Close any nested lists that are open
var objMenu = document.getElementById('mainnav');
var objNested = objMenu.getElementsByTagName('ul');

for (var i=0; i if (objNested[i].style.display == 'block')
objNested[i].style.display = 'none';

objMenuitem.nextSibling.style.display = strDisplay;

// Keep any parent menus for this item open
while (objMenuitem.parentNode.parentNode.id != 'mainnav')
{
objMenuitem = objMenuitem.parentNode.parentNode;
objMenuitem.style.display = 'block';
}

// Stop the browser requesting the link
return false;
}

function rollup()
{
var bRollup, objLinks, objNode, objAnchor;

// Check we're working with a DOM compliant browser
if (document.getElementById && document.createElement)
{
var strLocation = window.location;

var objMenu = document.getElementById('mainnav');

var objNested = objMenu.getElementsByTagName('ul');

// Hide each of the nested unordered list
for (var i=0; i {
// Only hide, if the current location is not found in the list
bRollup = true;
objLinks = objNested[i].getElementsByTagName('a');

for (var j=0; j {
if (objLinks[j].href == strLocation)
{
bRollup = false;

// Added by John Hunter
// remove link for current page
objNode = objLinks[j];
strContent = objNode.firstChild.data;
var objCurrentPage = document.createElement('strong');
objCurrentPage.appendChild(document.createTextNode(strContent));
objNode.parentNode.replaceChild(objCurrentPage, objNode);

// Add an id so we can keep the parents open
objCurrentPage.id = 'jsKeepOpen';
}

}

if (bRollup == true)
objNested[i].style.display = 'none';
else
objNested[i].style.display = 'block';

// Place the top-level text in an anchor tag
objNode = objNested[i].parentNode;

strContent = objNode.firstChild.data;

objAnchor = document.createElement('a');
objAnchor.href = '#';
objAnchor.onclick = function(event){return rollout(this, event);}
objAnchor.onkeypress = function(event){return rollout(this, event);}
objAnchor.appendChild(document.createTextNode(strContent));

objNode.replaceChild(objAnchor, objNode.firstChild);
}

// Keep any parent menus for the current item
if (document.getElementById('jsKeepOpen'))
{

ar objKeepOpen = document.getElementById('jsKeepOpen');
while (objKeepOpen.parentNode.id != 'mainnav')
{
objKeepOpen = objKeepOpen.parentNode;
objKeepOpen.style.display = 'block';
}
}
}
}

< - end of sample - >

Digital information technology is starting to be highly interactive these days. You have artificial intelligence game design, game playability increased a hundredfold, websites in which to transact your business affairs, electronic databases which could give you the information you need, etc. Then, there are these forms in which would not be able to process itself if you do not give the proper information that is required for processing.

With JavaScript programming, the internet sites of the world wide web have dramatically improved in terms of interactivity. Now you could even have a printing feature on any page of your internet site! No, this is not wherein you have a link that could give the viewer a printer friendly version of the page on your internet site. With JavaScript, you could have a fully functional print button on any page of your internet site! In addition, this print button is able to print the page without accessing the browser's page printing feature! Well, I think it makes use of interactive features of JavaScript wherein the internet site communicates with the viewer upon accessing the JavaScript print button.

So go check out this very neat trick. It would evidently please your viewers as much as your clients. After all, if your internet site is as interactive as this, it just wouldn't be overlooked by most of your viewers.

If you want to create time delays in your JavaScript code, there are two approaches you can take. The first one is more simple, it makes use of the setTimeout () window method. This method allows your code to wait for a set number of milliseconds before being executed. There are two ways to write this.

One, setting a reference direct to a function:

window.setTimeout(referenceToFunction,timeInMilliseconds);

or it could be written as a string that will be read like it has a source code:

window.setTimeout('runMoreCode()',timeInMilliseconds);

It is recommended that you use the direct reference because it is much more efficient before the string could be processed, the browser is required to create a script environment. Once you formulate the timeout, it will continue to run after the code processes the setTimeout. After the delay, the timeout will create a new thread and the code that is specified in the call to setTimeout will be processed in the new thread. You can use either of the two if you want to pass variable to a timeout, but still, the direct approach is much easier and it is also able to accept any variable. Although some web browsers pass an extra parameter to the function which causes it the delay too roughly because of the error in millisecond.

Here is an example where you can use setTimeout to create a delay before the alert box appears:

<! - Code Sample - !>

<HTML>
<head>
<script>
<!--
function wait(delay){
string="pauseforalert("+delay+");";
setTimeout(string,delay);
}
function pauseforalert(delay){
alert("After "+delay/1000+" second/s this will appear");
}
// -->
</script>
</HEAD>
<BODY>
<a href="javascript:void()" onClick="wait(1000);">1 second before the alert</a><BR>
or<BR>
<a href="javascript:wait(2000)">2 seconds before the alert</a><BR>

</BODY>
</HTML>

<! - End Sample - !>

The redirecting feature in the JavaScript language is very useful when a web developer changes to a new domain name. Of course, the frequent visitors of the site won't know that you have moved to a different domain unless they pay a visit to the web site. Now, to save some time, you could just redirect them to your new domain once they access your web site.

Web pages that have moved to different locations place a redirect page at their old location to transfer their visitors to their new site. That's not the only instance where redirects are used. Sometimes, it is also used to redirect visitors to a download site or when web servers mirror another site.

The page that will be loaded into the browser is set on the window location property of the JavaScript code. When you set a URL on this property, the web page will change into the location you have specified. A time delay takes place before the old page is redirected to the location you have placed in your code. The implementation of time delay in your JavaScript code is useful to refresh the page every specified moment, for download sites that want to have a few seconds or before download begins, and to show a message to the visitors before the URL is changed.

Here is a sample code if you wish your visitors to be moved to the web site you have specified:

<! - Code Sample - !>

<html>
<head>
<script type="text/javascript">
<!--
function delayer(){
window.location = "http://www.javascript-programming.com"
}
//-->
</script>
</head>
<body onLoad="setTimeout('delayer()', 5000)">
<h2 >You will now be redirected</h2>
<p>You can put additional messages here</p>

</body>
</html>

<! - End Sample - !>

An array is simply defined as a list of objects. The objects or items in your array can be virtually anything you want although typically, they are related to one another. Let's make use of students in a class as our example, if you want to keep track of them, make an array of the students:

var students= new Array();

students[0] = 'George';
students[1] = 'Michael';
students[2] = 'Kristine';
students[3] = "Jane';

See, there's really nothing to it, it's pretty simple to assign the elements of each variable. The example above is just one of the ways you can formulate the code. As you may already be aware of, there are many ways in which you can create a code in the JavaScript language, creating an array is no different. Here is another more compact and less tedious example:

var students = ['George', 'Michael', 'Kristine', 'Jane'];

This works exactly the same ways as the first example but as you can see, it is more compact and is easier to read. The brackets that contain the name tell your code that you are creating an array. By writing "var students = [];" you get the same effect as writing "var students = new Array();". You may prefer one over the other so use whichever method you want. You will see that JavaScript language is easy to understand.

Now that we have an array, what should we do with them? Before you can access the items in your array, you need to know its index. See those number in between the bracket in the first example? Those are the index of the item. Arrays in JavaScript start from 0 instead of 1, so the first item in an array is students0] and so on. Also, you should check how long your array is so you can loop through it and perform tasks on each item.

<html>
<body>

<script type="text/javascript">
var students = ['George', 'Michael', 'Kristine', 'Jane'];
var suffixes = ['1st', '2nd', '3rd', '4th'];

for(var i=0; i alert('The '+suffixes[i]+' student is '+students[i]);
}
</script>

</body>
</html>

Form validation is used by web developers to avoid receiving incomplete information submitted to them. This is especially useful for forums, blog sites, and other web sites that ask for user information before letting them create an account. The JavaScript form validation uses a method to check the information given by the user before they can submit it. Use can also use JavaScript to alert the user that he has missed filling up a field or that he has given false information and how to fix it.

The simplest method of form validation is check for non-empty fields. This ensures you that the visitors of your site have entered data in your required field before submitting a form. This is a code that performs basic check:

<! - Code Sample - !>

function notEmpty(elem){
var str = elem.value;
if(str.length == 0){
alert("Please fill up required fields");
return false;
} else {
return true;
}
}

The code reads the lenght of the string that the visitor inputs in a field. If it returns to 0, it means that the visitor did not enter any data on the field. If that happens, then an alter box with a message will appear. One of the occassions when validation checks are necessary is when a user submits data and the JavaScript system calls this event as onSubmit. Since validation checks is commonly seen on this case, we are going to use onSubmit event as our master function:

function formValidation(form){
if(notEmpty(form.req1)){
if(notEmpty(form.req2)){
return true;
} } else {
return false;
}
}

The name of our master function is "formValidation" and it represents the form that will be checked for its validity. We will be validation two required fields and if one them did not pass the non-empty validation function, it will return false and an error alert box will pop in the screen. If both fields return true, then the data is submitted.

<head>
<script type="text/javascript">
<!--

function formValidation(form){
if(notEmpty(form.req1)){
if(notEmpty(form.req2)){
return true;
}
}
return false;
}
function notEmpty(elem){
var str = elem.value;
if(str.length == 0){
alert("You must put data on the required fields");
return false;
} else {
return true;
}
}

//-->
</script>
</head>
<body>
<form name="example" onSubmit="return formValidation(this)">
Required Field 1:<input type="text" name="req1" /> <br />
Required Field 2:<input type="text" name="req2" /> <br />
<input type="submit" />
</form>

</body>

<! - End Sample - !>

JavaScript switch statement is basically just an enhanced version of an "if statement". The "if" statement usually just involve two option, the true or false values, so it’s quite limited. However if you have more variables in your equitation, you should use a switch statement. The switch statement checks the expression against the number of case options and executes a statement to match the first case. If a match is not found, it will look for another statement to execute. If no match is found, it will execute the code and the end of the switch statement. One of the basic elements used in switch statements is the day of the week.

<! Code Sample !>

<html>
<body>
<script type="text/javascript">
var d = new Date()
theDay=d.getDay()
switch (theDay)
{
case 5:
document.write("<b>It's Friday, I'm in love!</b>")
break
case 6:
document.write("<b>Saturday: A day full of fun</b>")
break
case 0:
document.write("<b>It's family day today</b>")
break
default:
document.write("<b>Finally, the weekends!</b>")
}
</script>

</body>
</html>

<! End Sample !>

In this case, the JavaScript will produce a different message on your web page depending on what day it is. The variable included in your statement is preceded by the word "case." A colon is used after the value. If a text is going to be used as a case, use quotation marks. If it’s a number, you don’t need to use quotes. Sunday's case is 0, Monday's is 1, Tuesday's is 2 and so on. An optional break statement is used to prevent the code to run to the next case immediately.

We’ve already briefly tackled the topic of pop up dialogue boxes. In a previous post, I said that there are three types of dialogue boxes available in the JavaScript. The last one was the alert pop up dialogue box, the simplest and most common of the three. Now, we will talk about the second type of the triumvirate of pop up boxes, the JavaScript confirm. Unlike the alert box where the user is presented only with one option, the OK button, the confirm box has an OK and a Cancel button.

A confirm box is used to if you want to ask the user to accept or reject something. This allows you to ask a yes or no type of question to the visitors of your site. When the web browser activates the code that triggers the confirm box, it will be displayed on the screen and all operations will be halted until the user clicks on either of the buttons displayed on the box. Booleans are used to formulate the code in a confirm box; if the user replies OK or hits the Enter button, the Boolean "true" is returned, and if the user replies Cancel or hits the Escape button, the Boolean "false" is returned.

Here is a sample code for a confirm dialogue box:


<! - sample code - !>

<html>
<head>
<script type="text/javascript">
function disp_confirm()
{
var name=confirm("You are presented with 2 choices")
if (name==true)
{
document.write("You can also use the Enter key")
}
else
{
document.write("You can also use the Esc Key!")
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_confirm()" value="Display a confirm box">
</form>
</body>
</html>
<! - end sample - !>
</textarea>

Pop up dialogue boxes should not be confused with pop-up windows. The latter is often seen as an annoyance by most web users. They are used to advertise all sorts of products you don’t really need and also brings the risk of sheltering spywares on your system. Popup dialogues, however, are used to add interaction in your web page. There are three kinds of pop up dialogue boxes and one of them is the alert pop up dialogue box.

The alert dialogue box is the simplest and is the most widely used of the three JavaScript pop up dialogue boxes. Its use is to simply alert, just as the name implies, the user that the information he has given has come through by displaying a message. When the browser activates the script for the alert dialogue box, a small box will appear and all operations in the webpage are suspended until it is confirmed that the user has read the information. Usually, when the user clicks on the OK button, the box will disappear and all operations are resumed.

Here is a sample code of an alert pop up dialogue box:

<! - sample code - !>
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("This is an example of an alert box")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_alert()" value="Display alert box">
</form>
</body>
</html>
<! - end sample - !>
</textarea>

All that there really is to JavaScript is to encode scripts in an HTML document to manipulate the data to perform the tasks you want done and produce your desired results. JavaScript is a loosely written language, one in which you don’t have to specify the data type you use in a variable. You really don’t have to worry about specifying the data because the JavaScript interpreter will do that for you. Anyway, there are four basic types of data used in writing JavaScript codes: Booleans, nulls, numbers, and strings.

Booleans are used to formulate true or false statements, usually used in "if()" statements. Null, as the name implies, have no value and is only used to test the input on a script. There are two types of numbers: integers and floating points and the JavaScript is able to read both of these. Integers are whole numbers and floating points are numbers with decimal points. A string is a word or the combination or words and numbers grouped together. There really is no limit to the amount of characters you can use in a string but older browser versions have a 225 character limit. A string in enclosed using quotation marks to distinguish it from other statements.

Java Script is regarded as web page's statement in the form of scripts utilized in the internet world which has become more interactive because of it. In writing the scripts you will use codes that are pure text. The codes in Java Script are embedded in the pages of HTML, that is why the knowledge in HTML or XHTML is needed but you do not need to be a wiz. You can place elements in your scripts. Furthermore, you can exchange images in your script with the help of the cursor. With JavaScript you are not required to have a very good software. But you should have web browser and the text editor like the NoteTab. However, the web server is not needed when you are making your project.

JavaScript codes are placed by web designers in their web page to be able to make their web page appear better. The codes are texts that are being typed in the text editor which is embedded in the HTML in the SCRIPT tag.

JavaScript can handle events that is why it is called the power tool and it is also interactive. It can do a lot functions which includes loading pages, passing the cursor to the link and others all in just a click of a button. These codes can also be placed in your personal computers if you want to.

If your business centers on your company website, then you should make sure that you have designed the best site possible. However, this is the time where you usually get stuck. You then ask yourself how can you make a site that can stand out among other sites found on the World Wide Web. If this is your dilemma, the there is no more need to worry. You are advised to just use the Java Script to do this. This is the computer scripting language which helps your site load new windows or changes the focus of these windows. The Java is truly one helpful tool to be able to maximize your internet sites.

When you are using Mozilla, you have the option of enabling or disabling you Java Script on your computer. Do not worry, this is not a hard thing to do. You just need to follow a few easy and simple steps. To enable your Java in the Mozilla 1x version, simply select edit and preferences buttons from your menu. After this, you can now click on the preferences button and choose the buttons advanced before select and plugins.

An observant person will notice that some URLs of sites have the letters "RSS" in them. Some people do not care for these letters. Others actually know what these letters stand for. RSS is short for Really Simple Syndication. RSS users will be glad to know that it lives up to its name. RSS is a really simple software to use. It doesn't take a genius to understand what RSS is all about. This program is used for sharing of links and headlines. Short descriptions for the aforementioned data may also be shared with the use of RSS.

RSS should be used by webmasters who frequently update their websites. Sites that contain information about news, companies, and calendars are advised to employ RSS in their systems. There are literally thousands and thousands of websites using the RSS. This is because RSS loads easily. It can even be used on PDA's or mobile cellular phones. Truly, RSS can make it easier for people to find several kinds of information from internet. It is hoped that the future will see a better RSS than it already is. Probably, more fields can be added to RSS so that internet experience will be a breeze.

JavaScript as its name, indicates is the statement of the clients as well as the servers. It is utilized by web designers to upgrade the web page design. Javascript has two classifications. The JavaScript that are intended for the clients is called the Navigator JavaScript while the Live Wire JavaScript is for the servers.

It permits the users to put minute applications in their web pages and enables the website to perform more than what a usual HTML can do. But it is normally instilled in the pages of HTML. This can be used to check any data before sending it to the server which will spare the server from doing other procedures which is a great advantage because the server will be able to conserve time. Further, it can write as well as discern and revise HTML components. This new feature in the web is also used to certify forms and make cookies.

JavaScript is considered the most famous scripting language in internet specifically to those using the Internet Explorer, Mozilla, Firefox, Netscape and Opera. Like in HTML, JavaScript also uses objects or symbols such as ampersand and semicolon to represent names and numbers in a script.