Scribd
Upload
130 views

Java Script

JavaScript is a scripting language that can be embedded within HTML pages to add interactivity. It allows HTML designers to add programming logic without needing to learn complex languages. JavaScript can react to events, modify HTML elements, validate data, and more. Functions are reusable blocks of JavaScript code that perform tasks. Events trigger functions, like clicking a button, and common events include loading, hovering, selecting, and keystrokes. If/else statements allow conditionally executing blocks of code depending on boolean expressions.

Uploaded by

Shivam Dua
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
130 views

Java Script

JavaScript is a scripting language that can be embedded within HTML pages to add interactivity. It allows HTML designers to add programming logic without needing to learn complex languages. JavaScript can react to events, modify HTML elements, validate data, and more. Functions are reusable blocks of JavaScript code that perform tasks. Events trigger functions, like clicking a button, and common events include loading, hovering, selecting, and keystrokes. If/else statements allow conditionally executing blocks of code depending on boolean expressions.

Uploaded by

Shivam Dua
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 36

Java Script

What is JavaScript?

JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight programming language 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

Are Java and JavaScript the same?


NO! Java and JavaScript are two completely different languages in both concept and design! Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++.

What Can JavaScript do?

JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- Beginning of JavaScript -

function MsgBox (textstring) { alert (textstring) } // - End of JavaScript - --> </SCRIPT> </HEAD>

<BODY>
<FORM> <INPUT NAME="text1" TYPE=Text> <INPUT NAME="submit" TYPE=Button VALUE="Show Me" onClick="MsgBox(form.text1.value)"> </FORM> </BODY> </HTML>

<HTML> <HEAD>

<SCRIPT LANGUAGE="JavaScript"> <!-- Beginning of JavaScript function changecolor(code) {

document.bgColor=code }
// - End of JavaScript - --> </SCRIPT> </HEAD> <BODY> <form> <input type="button" name="Button1" value="RED" onclick="changecolor('red')"> <input type="button" name="Button2" value="GREEN" onclick="changecolor('green')"> <input type="button" name="Button3" value="BLUE" onclick="changecolor('blue')"> <input type="button" name="Button4" value="WHITE" onclick="changecolor('white')"> </form> </BODY> </HTML>

<HTML> <HEAD> <TITLE>Chapter 3, If-then statements</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Beginning of JavaScript function password() {

Ret = prompt('Type the word castle',""); if(Ret=="castle") { location = 'ch03_1.htm';

} else { alert("Please try again") } }


// - End of JavaScript - --> </SCRIPT> </HEAD> <BODY> <A HREF="javascript:password()"> <IMG SRC="pict1.gif" NAME="pic1" ALT="about us!" BORDER="0" align="left"></A> <H3>Click the image to enter a password protected document. Try a wrong entry first.</H3> </BODY> </HTML>

<html> <body> <h1>My First Web Page</h1> <script type="text/javascript"> document.write("<p>" + Date() + "</p>"); </script> </body> </html>

<html> <head> <script type="text/JavaScript"> <!-function popup() { alert("Hello World") } //--> </script> </head> <body> <input type="button" onclick="popup()" value="popup"> </body> </html>

Pup.js
function popup() { alert("Hello World") }

<html> <head> <script src="myjs.js"> </script> </head> <body> <input type="button" onclick="popup()" value="Click Me!"> </body> </html>

avascript arithmetic operator chart


Operat English Exampl

or + Addition Subtraction Multiplicati on Division Modulus

e 2+4 6-2

5*3

/ %

15 / 3 43 % 10

Modulus % may be a new operation to you, but it's just a special way of saying "finding the remainder". When you perform a division like 15/3 you get 5, exactly. However, if you do 43/10 you get an answer with a decimal, 4.3. 10 goes into 40 four times and then there is a leftover. This leftover is what is returned by the modulus operator. 43 % 10 would equal 3.

javascript operator example with variables


Performing operations on variables that contain values is very common and easy to do. Below is a simple script that performs all the basic arithmetic operations.

HTML & JavaScript Code:


<body> <script type="text/JavaScript"> <!-var two = 2 var ten = 10 var linebreak = "<br />" document.write("two plus ten = ") var result = two + ten document.write(result) document.write(linebreak) document.write("ten * ten = ") result = ten * ten document.write(result) document.write(linebreak) document.write("ten / two = ") result = ten / two document.write(result) //--> </script>

</body>

Display:
two ten ten / two = 5 plus * ten ten = = 12 100

comparison operators
Comparisons are used to check the relationship between variables and/or values. A single equal sign sets a value while a double equal sign (==) compares two values. Comparison operators are used inside conditional statements and evaluate to either true or false. We will talk more about conditional statements in the upcoming lessons.

Operat or == != < > <=

English Equal To Not Equal To Less Than Greater Than Less Than or Equal To Greater Equal To Than or

Exam ple x == y x != y x<y x>y x <= y

Resul t false true true false true

>=

x >= y

false

javascript using variables


A variable's purpose is to store information so that it can be used later. A variable is a symbolic name that represents some data that you set. To think of a variable name in real world terms, picture that the name is a grocery bag and the data it represents are the groceries. The name wraps up the data so you can move it around a lot easier, but the name is not the data!

a variable example
When using a variable for the first time it is not necessary to use "var" before the variable name, but it is a good programming practice to make it crystal clear when a variable is being used for the first time in the program. Here we are showing how the same variable can take on different values throughout a script.

HTML & JavaScript Code:


<body> <script type="text/JavaScript"> <!-var linebreak = "<br />" var my_var = "Hello World!" document.write(my_var) document.write(linebreak) my_var = "I am learning JavaScript!" document.write(my_var) document.write(linebreak) my_var = "Script is Finishing up..." document.write(my_var) //--> </script> </body>

Display:
Hello I Script is Finishing up... am learning

World! JavaScript!

what's a function?
A function is a piece of code that sits dormant until it is referenced or called upon to do its "function". In addition to controllable execution, functions are also a great time saver for doing repetitive tasks. Instead of having to type out the code every time you want something done, you can simply call the function multiple times to get the same effect. This benefit is also known as "code reusability".

example function in javascript


A function that does not execute when a page loads should be placed inside the head of your HTML document. Creating a function is really quite easy. All you have to do is tell the browser you're making a function, give the function a name, and then write the JavaScript like normal. Below is the example alert function from the previous lesson.

HTML & JavaScript Code:


<html> <head> <script type="text/javascript"> <!-function popup() { alert("Hello World") } //--> </script> </head> <body> <input type="button" onclick="popup()" value="popup"> </body> </html>

events in javascript
The absolute coolest thing about JavaScript is its ability to help you create dynamic webpages that increase user interaction, making the visitor feel like the website is almost coming alive right before her eyes. The building blocks of an interactive web page is the JavaScript event system. An event in JavaScript is something that happens with or on the webpage. A few examples of events: A mouse click The webpage loading Mousing over a hot spot on the webpage, also known as hovering Selecting an input box in an HTML form A keystroke

a couple of examples using events


JavaScript has predefined names that cover numerous events that can occur, including the ones listed above. To capture an event and make something happen when that event occurs, you must specify the event, the HTML element that will be waiting for the event, and the function(s) that will be run when the event occurs. We have used a JavaScript event in a previous lesson, where we had an alert popup when the button was clicked. This was an "onclick" JavaScript event. We will do that same example again, as well as the mouseover and mouseout events.

HTML & JavaScript Code:


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

function popup() { alert("Hello World") } //--> </script> </head> <body> <input type="button" value="Click Me!" onclick="popup()"><br /> <a href="#" onmouseover="" onMouseout="popup()"> Hover Me!</a> </body> </html>

javascript if statement syntax


There are two major parts to an If Statement: the conditional statement and the code to be executed. The conditional statement is a statement that will evaluate to be either True or False. The most common type of conditional statement used checks to see if something equals a value. An example would be checking if a date equals your birthday. Below is a segment of JavaScript code that will be executed only if the If Statement's conditional statement is true. In this simple If Statement example, we print out a message if the variable we are checking is equal to 7.

JavaScript Code:
<script type="text/javascript"> <!-var myNum = 7; if(myNum == 7){ document.write("Lucky 7!"); } //--> </script>

javascript else if example


Imagine that you want to have a small "student" script that will print out a customized message depending who is accessing the webpage. If you have more than two custom messages, you could use the Else If extension to solve this programming problem.

JavaScript Code:
<script type="text/javascript"> <!-var visitor = "principal"; if(visitor == "teacher"){ document.write("My dog ate my homework..."); }else if(visitor == "principal"){ document.write("What stink bombs?"); } else { document.write("How do you do?"); } //--> </script>

javascript while loop explained


There are two key parts to a JavaScript while loop:

1. 2.
is True.

The conditional statement which must be True for the while loop's code to be executed. The while loop's code that is contained in curly braces "{ and }" will be executed if the condition

When a while loop begins, the JavaScript interpreter checks if the condition statement is true. If it is, the code between the curly braces is executed. At the end of the code segment "}", the while loop loops back to the condition statement and begins again. If the condition statement is always True, then you will never exit the while loop, so be very careful when using while loops!

creating a simple while loop


This example shows how to create a basic while loop that will execute adocument.write 10 times and then exit the loop statement.

JavaScript Code:
<script type="text/javascript"> <!-var myCounter = 0; var linebreak = "<br />";

document.write("While loop is beginning"); document.write(linebreak); while(myCounter < 10){ document.write("myCounter = " + myCounter); document.write(linebreak); myCounter++; } document.write("While loop is finished!"); </script>

Display:
While myCounter myCounter myCounter myCounter myCounter myCounter myCounter myCounter myCounter myCounter While loop is finished!

loop = = = = = = = = = =

is

beginning 0 1 2 3 4 5 6 7 8 9

javascript for loop


The JavaScript For Loop resembles the for loop you may have seen in many other programming languages. It is used when you need to do a set of operations many times, with an increment of some kind after each run through the block of code.

javascript for loop explained


There are four important aspects of a JavaScript for loop:

1.

The counter variable is something that is created and usually used only in the for loop to count how many times the for loop has looped. i is the normal label for this counter variable and what we will be using. 2. The conditional statement. It is what decides whether the for loop continues executing or not. This check usually includes the counter variable in some way.

3. 4.

The counter variable is incremented after every loop in the increment section of the for loop. The code that is executed for each loop through the for loop.

This may seem strange, but 1-3 all occur on the same line of code. This is because the for loop is such a standardized programming practice that the designers felt they might as well save some space and clutter when creating thefor loop.

javascript for loop example


This example will show you how to create a simple for loop that prints out the value of our counter until the counter reaches 5. Pay special close attention to the three different items that are on the first line of the for loop code. These are the important for loop parts 1-3 that we talked about earlier.

JavaScript Code:
<script type="text/javascript"> <!-var linebreak = "<br />"; document.write("For loop code is beginning"); document.write(linebreak); for(i = 0; i < 5; i++){ document.write("Counter i = " + i); document.write(linebreak); } document.write("For loop code is finished!"); </script>

Display:
For Counter Counter Counter Counter Counter

loop i i i i i

code

is = = = = =

beginning 0 1 2 3 4

For loop code is finished!

javascript array
An array is a variable that can store many variables within it. Many programmers have seen arrays in other languages, and they aren't that different in JavaScript. The following points should always be remembered when using arrays in JavaScript: The array is a special type of variable. Values are stored into an array by using the array name and by stating the location in the array you wish to store the value in brackets. Example: myArray[2] = "Hello World";

Values in an array are accessed by the array name and location of the value. Example: myArray[2]; JavaScript has built-in functions for arrays, so check out these built-in array functions before writing the code yourself!

creating a javascript array


Creating an array is slightly different from creating a normal variable. Because JavaScript has variables and properties associated with arrays, you have to use a special function to create a new array. This example shows how you would create a simple array, store values to it, and access these values.

JavaScript Code:
<script type="text/javascript"> <!-var myArray = new Array(); myArray[0] = "Football"; myArray[1] = "Baseball"; myArray[2] = "Cricket"; document.write(myArray[0] + myArray[1] + myArray[2]); //--> </script>

Display:

FootballBaseballCricket Notice that you set values and get values from an array by specifying the position, in brackets, of the value you want to use.

javascript array sorting


Imagine that you wanted to sort an array alphabetically before you wrote the array to the browser. Well, this code has already been written and can be accessed by using the Array's sort method.

JavaScript Code:
<script type="text/javascript"> <!-var myArray2= new Array(); myArray2[0] = "Football"; myArray2[1] = "Baseball"; myArray2[2] = "Cricket"; myArray2.sort(); document.write(myArray2[0] + myArray2[1] + myArray2[2]); //--> </script>

Display:
BaseballCricketFootball

javascript alert - what is it?


If you do not have JavaScript enabled on your web browser, then you may have been able to avoid "alerts" in your internet adventures. The JavaScript alert is a dialogue box that pops up and takes the focus away from the current window and forces the web browser to read the message.

when to use popups / alerts


JavaScript alerts are ideal for the following situations: If you want to be absolutely sure they see a message before doing anything on the website. You would like to warn the user about something. For example "the following page contains humor not suitable for those under the age of 14." An error has occurred and you want to inform the user of the problem. When asking users for confirmation of some action. For example, if they have just agreed to sign over the deed to their house and you want to ask them again if they are absolutely positive they want to go through with this decision! Even though the above situations would all be valid times to use the alert function, you could also skip the alert popup and just have the error message, confirmation, etc displayed in plain HTML. More and more bigger sites are opting to lose JavaScript alerts and instead keep everything in HTML.

coding a simple javascript alert


Just for fun, let's suppose that we are making an alert for some website that asks people to hand over the deed to their house. We need to add an alert to be sure these people are in agreement. The following code will add an alert by using an HTML button and the onClick event.

HTML & JavaScript Code:


<form> <input type="button" onclick= "alert('Are you sure you want to give us the deed to your house?')" value="Confirmation Alert"> </form>

javascript confirm
The JavaScript confirm function is very similar to the JavaScript alert function. A small dialogue box pops up and appears in front of the web page currently in focus. The confirm box is different from the alert box. It supplies the user with a choice; they can either press OK to confirm the popup's message or they can press cancel and not agree to the popup's request. Confirmation are most often used to confirm an important actions that are taking place on a website. For example, they may be used to confirm an order submission or notify visitors that a link they clicked will take them to another website.

javascript confirm example


Below is an example of how you would use a confirm dialogue box to warn users about something, giving them the option to either continue on or stay put.

HTML & JavaScript Code:


<html> <head> <script type="text/javascript"> <!-function confirmation() { var answer = confirm("Leave tizag.com?") if (answer){ alert("Bye bye!") window.location = "http://www.google.com/"; } else{ alert("Thanks for sticking around!") } } //--> </script> </head> <body> <form> <input type="button" onclick="confirmation()" value="Leave Tizag.com"> </form> </body> </html>

javascript prompt
The JavaScript prompt is a relic from the 1990's that you seldom see being used in modern day websites. The point of the JavaScript prompt is to gather information from the user so that the information can be used throughout the site to give the visitor a personalized feel.

simple javascript prompt


You can use a prompt for a wide variety of useless tasks, but below we use it for an exceptionally silly task. Our prompt is used to gather the user's name to be displayed in our alert dialogue box.

HTML & JavaScript Code:


<head> <script type="text/javascript"> <!-function prompter() { var reply = prompt("Hey there, good looking stranger! What's your name?", "") alert ( "Nice to see you around these parts " + reply + "!") } //--> </script> </head> <body> <input type="button" onclick="prompter()" value="Say my name!"> </body>

javascript print script - window.print()


The JavaScript print function window.print() will print the current webpage when executed. In this example script, we will be placing the function on a JavaScript button that will perform the print operation when the onClick event occurs.

HTML & JavaScript Code:


<form> <input type="button" value="Print This Page" onClick="window.print()" /> </form>

javascript redirect
You're moving to a new domain name. You have a time-delay placeholder on your download site. You have a list of external web servers that are helping to mirror your site. What will help you deal with and/or take advantage of these situations? JavaScript redirects will.

javascript window.location
Control over what page is loaded into the browser rests in the JavaScript property window.location. By setting window.location equal to a new URL, you will in turn change the current webpage to the one that is specified. If you wanted to redirect all your visitors to www.google.com when they arrived at your site, you would just need the script below:

HTML & JavaScript Code:


<script type="text/javascript"> <!-window.location = "http://www.google.com/" //--> </script>

javascript time delay


Implementing a timed delay in JavaScript is useful in the following situations: Showing an "Update your bookmark" page when you have to change URLs or page locations For download sites that wish to have a timed delay before the download starts To refresh a webpage once every specified number of seconds

The code for this timed delay is slightly involved and is beyond the scope of this tutorial. However, we have tested it and it seems to function properly.

HTML & JavaScript Code:


<html> <head> <script type="text/javascript"> <!-function delayer(){ window.location = "../javascriptredirect.php" } //--> </script> </head> <body onLoad="setTimeout('delayer()', 5000)"> <h2>Prepare to be redirected!</h2> <p>This page is a time delay redirect, please update your bookmarks to our new location!</p> </body> </html>

javascript popups
Chances are, if you are reading this webpage, then you have experienced hundreds of JavaScript popup windows throughout your web surfing lifetime. Want to dish out some pain of your own creation onto unsuspecting visitors? I hope not! Because websites with irrelevant popups are bad!

javascript window.open function


The window.open() function creates a new browser window, customized to your specifications, without the use of an HTML anchor tag. In this example, we will be making a function that utilizes the window.open() function.

HTML & JavaScript Code:


<head> <script type="text/javascript"> <!-function myPopup() { window.open( "http://www.google.com/" ) } //--> </script> </head> <body> <form> <input type="button" onClick="myPopup()" value="POP!"> </form> <p onClick="myPopup()">CLICK ME TOO!</p> </body>

javascript window.open arguments


There are three arguments that the window.open function takes: 1. 2. 3. The relative or absolute URL of the webpage to be opened. The text name for the window. A long string that contains all the different properties of the window.

Naming a window is very useful if you want to manipulate it later with JavaScript. However, this is beyond the scope of this lesson, and we will instead be focusing on the different properties you can set with your brand spanking new JavaScript window. Below are some of the more important properties: dependent - Subwindow closes if the parent window (the window that opened it) closes fullscreen - Display browser in fullscreen mode height - The height of the new window, in pixels width - The width of the new window, in pixels left - Pixel offset from the left side of the screen top - Pixel offset from the top of the screen resizable - Allow the user to resize the window or prevent the user from resizing, currently broken in Firefox. status - Display or don't display the status bar Dependent, fullscreen, resizable, and status are all examples of ON/OFF properties. You can either set them equal to zero to turn them off, or set them to one to turn them ON. There is no inbetween setting for these types of properties.

upgraded javascript popup window!


Now that we have the tools, let's make a sophisticated JavaScript popup window that we can be proud of!

HTML & JavaScript Code:


<head> <script type="text/javascript"> <!-function myPopup2() { window.open( "http://www.google.com/", "myWindow", "status = 1, height = 300, width = 300, resizable = 0" ) } //--> </script> </head> <body> <form> <input type="button" onClick="myPopup2()" value="POP2!"> </form> <p onClick="myPopup2()">CLICK ME TOO!</p> </body>

javascript date today (current)


To warm up our JavaScript Date object skills, let's do something easy. If you do not supply any arguments to the Date constructor (this makes the Date object) then it will create a Date object based on the visitor's internal clock.

HTML & JavaScript Code:


<h4>It is now <script type="text/javascript"> <!-var currentTime = new Date() //--> </script> </h4>

get the javascript time


The Date object has been created, and now we have a variable that holds the current date! To get the information we need to print out, we have to utilize some or all of the following functions: getTime() - Number of milliseconds since 1/1/1970 @ 12:00 AM getSeconds() - Number of seconds (0-59)

getMinutes() - Number of minutes (0-59) getHours() - Number of hours (0-23) getDay() - Day of the week(0-6). 0 = Sunday, ... , 6 = Saturday getDate() - Day of the month (0-31) getMonth() - Number of month (0-11) getFullYear() - The four digit year (1970-9999)

Now we can print out the date information. We will be using the getDate,getMonth, and getFullYear methods in this example.

HTML & JavaScript Code:


<h4>It is now <script type="text/javascript"> <!-var currentTime = new Date() var month = currentTime.getMonth() + 1 var day = currentTime.getDate() var year = currentTime.getFullYear() document.write(month + "/" + day + "/" + year) //--> </script> </h4>

javascript current time clock


Now, instead of displaying the date we, will display the format you might see on a typical digital clock -- HH:MM AM/PM (H = Hour, M = Minute).

HTML & JavaScript Code:


<h4>It is now <script type="text/javascript"> <!-var currentTime = new Date() var hours = currentTime.getHours() var minutes = currentTime.getMinutes() if (minutes < 10){ minutes = "0" + minutes } document.write(hours + ":" + minutes + " ") if(hours > 11){ document.write("PM") } else { document.write("AM") } //--> </script> </h4>

javascript form validation


There's nothing more troublesome than receiving orders, guestbook entries, or other form submitted data that are incomplete in some way. You can avoid these headaches once and for all with JavaScript's amazing way to combat bad form data with a technique called "form validation". The idea behind JavaScript form validation is to provide a method to check the user entered information before they can even submit it. JavaScript also lets you display helpful alerts to inform the user what information they have entered incorrectly and how they can fix it. In this lesson we will be reviewing some basic form validation, showing you how to check for the following: If a text input is empty or not If a text input is all numbers If a text input is all letters If a text input is all alphanumeric characters (numbers & letters) If a text input has the correct number of characters in it (useful when restricting the length of a username and/or password) If a selection has been made from an HTML select input (the drop down selector) If an email address is valid How to check all above when the user has completed filling out the form This lesson is a little long, but knowing how to implement these form validation techniques is definitely worth the effort on your part. Remember to check out Tizag's HTML forms lesson if you need to brush up on your form knowledge.

form validation - checking for non-empty


This has to be the most common type of form validation. You want to be sure that your visitors enter data into the HTML fields you have "required" for a valid submission. Below is the JavaScript code to perform this basic check to see if a given HTML input is empty or not.

JavaScript Code:
// If the length of the element's string is 0 then display helper message function notEmpty(elem, helperMsg){ if(elem.value.length == 0){ alert(helperMsg); elem.focus(); // set the focus to this input return false; } return true; }

The function notEmpty will check to see that the HTML input that we send it has something in it. elem is a HTML text input that we send this function. JavaScriptstrings have built in properties, one of which is the length property which returns the length of the string. The chunk of code elem.value will grab the string inside the input and by adding on length elem.value.length we can see how long the string is. As long as elem.value.length isn't 0 then it's not empty and we return true, otherwise we send an alert to the user with a helperMsg to inform them of their error and return false.

Working Example:
<script type='text/javascript'> function notEmpty(elem, helperMsg){ if(elem.value.length == 0){ alert(helperMsg); elem.focus(); return false; } return true; } </script> <form> Required Field: <input type='text' id='req1'/> <input type='button' onclick="notEmpty(document.getElementById('req1'), 'Please Enter a Value')" value='Check Field' /> </form>

form validation - checking for all numbers


If someone is entering a credit card, phone number, zip code, similar information you want to be able to ensure that the input is all numbers. The quickest way to check if an input's string value is all numbers is to use a regular expression /^[0-9]+$/ that will only match if the string is all numbers and is at least one character long.

JavaScript Code:
// If the element's string matches the regular expression it is all numbers function isNumeric(elem, helperMsg){ var numericExpression = /^[0-9]+$/; if(elem.value.match(numericExpression)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } }

What we're doing here is using JavaScript existing framework to have it do all the hard work for us. Inside each string is a function called match that you can use to see if the string matches a certain regular expression. We accessed this function like so: elem.value.match(expressionhere). We wanted to see if the input's string was all numbers so we made a regular expression to check for numbers [0-9] and stored it as numericExpression. We then used the match function with our regular expression. If it is numeric then match will return true, making our if statement pass the test and our functionisNumeric will also return true. However, if the expression fails because there is a letter or other character in our input's string then we'll display our helperMsg and return false.

Working Example:
<script type='text/javascript'> function isNumeric(elem, helperMsg){ var numericExpression = /^[0-9]+$/; if(elem.value.match(numericExpression)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } </script> <form> Numbers Only: <input type='text' id='numbers'/> <input type='button' onclick="isNumeric(document.getElementById('numbers'), 'Numbers Only Please')" value='Check Field' /> </form>

form validation - checking for all letters


This function will be identical to isNumeric except for the change to the regular expression we use inside the match function. Instead of checking for numbers we will want to check for all letters. If we wanted to see if a string contained only letters we need to specify an expression that allows for both lowercase and uppercase letters: /^[a-zA-Z]+$/ .

JavaScript Code:
// If the element's string matches the regular expression it is all letters function isAlphabet(elem, helperMsg){ var alphaExp = /^[a-zA-Z]+$/; if(elem.value.match(alphaExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } }

Working Example:
<script type='text/javascript'> function isAlphabet(elem, helperMsg){ var alphaExp = /^[a-zA-Z]+$/; if(elem.value.match(alphaExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } }

</script> <form> Letters Only: <input type='text' id='letters'/> <input type='button' onclick="isAlphabet(document.getElementById('letters'), 'Letters Only Please')" value='Check Field' /> </form>

form validation - checking for numbers and letters


By combining both the isAlphabet and isNumeric functions into one we can check to see if a text input contains only letters and numbers.

JavaScript Code:
// If the element's string matches the regular expression it is numbers and letters function isAlphanumeric(elem, helperMsg){ var alphaExp = /^[0-9a-zA-Z]+$/; if(elem.value.match(alphaExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } }

form validation - restricting the length


Being able to restrict the number of characters a user can enter into a field is one of the best ways to prevent bad data. For example, if you know that the zip code field should only be 5 numbers you know that 2 numbers is not sufficient. Below we have created a lengthRestriction function that takes a text field and two numbers. The first number is the minimum number of characters and the second is the maximum number of a characters the input can be. If you just want to specify an exact number then send the same number for both minimum and maximum.

JavaScript Code:
function lengthRestriction(elem, min, max){ var uInput = elem.value; if(uInput.length >= min && uInput.length <= max){ return true; }else{ alert("Please enter between " +min+ " and " +max+ " characters"); elem.focus(); return false; } }

Here's an example of this function for a field that requires 6 to 8 characters for a valid username.

Working Example:
<script type='text/javascript'> function lengthRestriction(elem, min, max){ var uInput = elem.value; if(uInput.length >= min && uInput.length <= max){ return true; }else{ alert("Please enter between " +min+ " and " +max+ " characters"); elem.focus(); return false; } } </script> <form> Username(6-8 characters): <input type='text' id='restrict'/> <input type='button' onclick="lengthRestriction(document.getElementById('restrict'), 6, 8)" value='Check Field' /> </form>

form validation - selection made


To be sure that someone has actually selected a choice from an HTML select input you can use a simple trick of making the first option as helpful prompt to the user and a red flag to you for your validation code. By making the first option of your select input something like "Please Choose" you can spur the user to both make a selection and allow you to check to see if the default option "Please Choose" is still selected when the submit the form.

JavaScript Code:
function madeSelection(elem, helperMsg){ if(elem.value == "Please Choose"){ alert(helperMsg); elem.focus(); return false; }else{ return true; } }

Working Example:
<script type='text/javascript'> function madeSelection(elem, helperMsg){ if(elem.value == "Please Choose"){ alert(helperMsg); elem.focus(); return false; }else{

return true;

} </script> <form> Selection: <select id='selection'> <option>Please Choose</option> <option>CA</option> <option>WI</option> <option>XX</option> </select> <input type='button' onclick="madeSelection(document.getElementById('selection'), 'Please Choose Something')" value='Check Field' /> </form>

form validation - email validation


And for our grand finale we will be showing you how to check to see if a user's email address is valid. Every email is made up for 5 parts: 1. 2. 3. 4. 5. A combination of letters, numbers, periods, hyphens, plus signs, and/or underscores The at symbol @ A combination of letters, numbers, hyphens, and/or periods A period The top level domain (com, net, org, us, gov, ...)

Valid Examples: [email protected] [email protected] [email protected]

Invalid Examples: @deleted.net - no characters before the @ [email protected] - invalid character ! shoes@need_shining.com - underscores are not allowed in the domain name

The regular expression to check for all of this is a little overkill and beyond the scope of this tutorial to explain thoroughly. However, test it out and you'll see that it gets the job done.

JavaScript Code:
function emailValidator(elem, helperMsg){ var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/; if(elem.value.match(emailExp)){ return true;

}else{

alert(helperMsg); elem.focus(); return false;

Working Example:
<script type='text/javascript'> function emailValidator(elem, helperMsg){ var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/; if(elem.value.match(emailExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } </script> <form> Email: <input type='text' id='emailer'/> <input type='button' onclick="emailValidator1(document.getElementById('emailer'), 'Not a Valid Email')" value='Check Field' /> </form>

validating a form - all at once


If you've made it this far I commend you, but we're not done yet! The final step is to be able to perform all of these validation steps when the user is ready to submit their data. Each form has a JavaScript event called onSubmit that is triggered when itssubmit button is clicked. If this even returns 0 or false then a form cannot be submitted, and if it returns 1 or true it will always be submitted. Wouldn't it be perfect if we could somehow make an if statement that said "If the form is valid submit it (1) else don't submit it (0)"? Well with a master formValidator function we can do just that. formValidator will be somewhat like a list of checks that we want to do before a form is submitted. But before we can decide what we want to check for, we need to have our form!

HTML Form Code:


<form onsubmit='return formValidator()' > First Name: <input type='text' id='firstname' /><br /> Address: <input type='text' id='addr' /><br /> Zip Code: <input type='text' id='zip' /><br /> State: <select id='state'> <option>Please Choose</option> <option>AL</option> <option>CA</option> <option>TX</option> <option>WI</option> </select><br /> Username(6-8 characters): <input type='text' id='username' /><br />

Email: <input type='text' id='email' /><br /> <input type='submit' value='Check Form' /><br /> </form>

That's a lot of data to verify and the first thing we would probably want to check is that each field was at least filled out. To check for completion we will ensure no fields are empty and that the SELECT field has a selection. Here are the starting pieces of our master validation function formValidator.

JavaScript Code:
function formValidator(){ // Make quick references to our fields var firstname = document.getElementById('firstname'); var addr = document.getElementById('addr'); var zip = document.getElementById('zip'); var state = document.getElementById('state'); var username = document.getElementById('username'); var email = document.getElementById('email'); // Check each input in the order that it appears in the form! if(isAlphabet(firstname, "Please enter only letters for your name")){ if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){ if(isNumeric(zip, "Please enter a valid zip code")){ if(madeSelection(state, "Please Choose a State")){ if(lengthRestriction(username, 6, 8)){ if(emailValidator(email, "Please enter a valid email address")){ return true; } } } } } } return false; }

all together now


Below we have taken the HTML form code and the new function formValidatorand plugged in all the other form validation functions taught in this lesson that are referenced in formValidator.

HTML & JavaScript Code:


<script type='text/javascript'> function formValidator(){ // Make quick references to our fields

var var var var var var

firstname = document.getElementById('firstname'); addr = document.getElementById('addr'); zip = document.getElementById('zip'); state = document.getElementById('state'); username = document.getElementById('username'); email = document.getElementById('email');

// Check each input in the order that it appears in the form! if(isAlphabet(firstname, "Please enter only letters for your name")){ if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){ if(isNumeric(zip, "Please enter a valid zip code")){ if(madeSelection(state, "Please Choose a State")){ if(lengthRestriction(username, 6, 8)){ if(emailValidator(email, "Please enter a valid email address")){ return true; } } } } } } return false; } function notEmpty(elem, helperMsg){ if(elem.value.length == 0){ alert(helperMsg); elem.focus(); // set the focus to this input return false; } return true; } function isNumeric(elem, helperMsg){ var numericExpression = /^[0-9]+$/; if(elem.value.match(numericExpression)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } function isAlphabet(elem, helperMsg){ var alphaExp = /^[a-zA-Z]+$/; if(elem.value.match(alphaExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } function isAlphanumeric(elem, helperMsg){

var alphaExp = /^[0-9a-zA-Z]+$/; if(elem.value.match(alphaExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } function lengthRestriction(elem, min, max){ var uInput = elem.value; if(uInput.length >= min && uInput.length <= max){ return true; }else{ alert("Please enter between " +min+ " and " +max+ " characters"); elem.focus(); return false; } } function madeSelection(elem, helperMsg){ if(elem.value == "Please Choose"){ alert(helperMsg); elem.focus(); return false; }else{ return true; } } function emailValidator(elem, helperMsg){ var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/; if(elem.value.match(emailExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } </script> <form onsubmit='return formValidator()' > First Name: <input type='text' id='firstname' /><br /> Address: <input type='text' id='addr' /><br /> Zip Code: <input type='text' id='zip' /><br /> State: <select id='state'> <option>Please Choose</option> <option>AL</option> <option>CA</option> <option>TX</option> <option>WI</option> </select><br /> Username(6-8 characters): <input type='text' id='username' /><br /> Email: <input type='text' id='email' /><br /> <input type='submit' value='Check Form' /> </form>

javascript string functions


This may be old news to you, but inside every JavaScript string are several functions that are just waiting to do your bidding. This is because strings in JavaScript are actually objects with a bunch of properties and functions (also called methods) that can be accessed in the following general way:

Pseudo JavaScript Code:


<script type="text/javascript"> var myString = "Hello Thur!"; //This is how you would access a property var myProperty = myString.property; //This is how you would access a function var myFunctionResult = myString.function(argument1, argument2); </script>

As you can see, the most important part to accessing string properties and functions is to first create them. In this case, myString was our guinea pig.

what's a string property?


A property is just some basic information about the object. For example, a string object has a length property which stores the number of characters in the string.

what's a string function?


The string's functions are useful for finding out more about your string. For example, the string function split lets you take a string and chop it into pieces whenever characters that you supply, appear. It is important to note that these functions do not actually change the string itself. Rather, they return new strings that you can store for use elsewhere. In our example, we stored the result of our makebelieve function into myFunctionResult.

string functions and properties


The following lessons will teach you how to manipulate, count, reorder, replace, search and do just about anything else to your JavaScript strings. These advanced topics will open up a whole new world of choices for the dynamic webpages you have yet to build!

string length property


The length property returns the number of characters that are in a string, using an integer. Below is the basic code for accessing this property.

JavaScript Code:

<script type="text/javascript"> var myString = "123456"; var length = myString.length; document.write("The string is this long: " + length); // Same thing, but using the property inside the write function document.write("<br />The string is this long: " + myString.length); </script>

string changed? length might change


If you were to reference the length property after concatenating (adding) some characters to the string, then the length property will reflect these changes. Think of this as a friendly reminder to only check the length of the string after you are sure it isn't going to be changed.

JavaScript Code:
<script type="text/javascript"> var myString = "123456"; document.write("The string is this long: " + myString.length); myString = myString + "7890"; document.write("<br />The string is now this long: " + myString.length); </script>

simple split function example


Let's start off with a little example that takes a string of numbers and splits when it sees the number 5. That means the delimiter for this example is 5. Notice that the split function returns an array that we store into mySplitResult.

JavaScript Code:
<script type="text/javascript"> var myString = "123456789"; var mySplitResult = myString.split("5"); document.write("The first element is " + mySplitResult[0]); document.write("<br /> The second element is " + mySplitResult[1]); </script>

larger split function example


Below we have created a split example to illustrate how this function works with many splits. We have created a string with numbered words zero through four. The delimiter in this example will be the space character " ".

JavaScript Code:
<script type="text/javascript"> var myString = "zero one two three four"; var mySplitResult = myString.split(" "); for(i = 0; i < mySplitResult.length; i++){ document.write("<br /> Element " + i + " = " + mySplitResult[i]); } </script>

string search function


This string function takes a regular expression and then examines that string to see if there are any matches for that expression. If there is a match , it will return the position in the string where the match was found. If there isn't a match, it will return -1. We won't be going into great depth about regular expressions, but we will show you how to search for words in a string.

search function regular expression


The most important thing to remember when creating a regular expression is that it must be surrounded with slashes /regular expression/. With that knowledge let's search a string to see if a common name "Alex" is inside it.

JavaScript Code:
<script type="text/javascript"> var myRegExp = /Alex/; var string1 = "Today John went to the store and talked with Alex."; var matchPos1 = string1.search(myRegExp); if(matchPos1 != -1) document.write("There was a match at position " + matchPos1); else document.write("There was no match in the first string"); </script>

string search function: alternative searches


Another basic tool for regular expressions is the pipe character "|" (it's below the Backspace key on standard keyboards) which allows you to search for alternative words /RegExp1|RegExp2/. Instead of just searching for just one word, we can now use the pipe character to search for multiple words.

JavaScript Code:
<script type="text/javascript"> var myRegExp = /Alex|John/; var string1 = "Today John went to the store and talked with Alex."; var matchPos1 = string1.search(myRegExp); if(matchPos1 != -1) document.write("There was a match at position " + matchPos1); else document.write("There was no match in the first string"); </script>

advanced search function examples


The following examples play around with the names a little so you can clearly see how the search function operates.

JavaScript Code:
<script type="text/javascript"> var myRegExp1 = /Tom|Jan|Alex/; var string1 = "John went to the store and talked with Alexandra today."; var matchPos1 = string1.search(myRegExp1); if(matchPos1 != -1) document.write("The first string found a match at " + matchPos1); else document.write("No match was found in the first string"); var myRegExp2 = /Tom|Jan|Alex /; var string2 = "John went to the store and talked with Alexandra today."; var matchPos2 = string2.search(myRegExp2); if(matchPos2 != -1) document.write("<br />The second string found a match at " + matchPos2); else document.write("<br />No match was found in the second string"); var myRegExp3 = /Tom|Jan|Alexandra/; var string3 = "John went to the store and talked with Alexandra today."; var matchPos3 = string3.search(myRegExp3); if(matchPos3 != -1) document.write("<br />The third string found a match at " + matchPos3); else document.write("<br />No match was found in the third string"); var myRegExp4 = /Tom|Jan|Alexandra/; var string4 = "John went to the store and talked with Alex today."; var matchPos4 = string4.search(myRegExp4); if(matchPos4 != -1) document.write("<br />The fourth string found a match at " + matchPos4); else document.write("<br />No match was found in the fourth string"); </script>

javascript document.getelementbyid
If you want to quickly access the value of an HTML input give it an id to make your life a lot easier. This small script below will check to see if there is any text in the text field "myText". The argument that getElementById requires is the id of the HTML element you wish to utilize.

JavaScript Code:
<script type="text/javascript"> function notEmpty(){ var myTextField = document.getElementById('myText'); if(myTextField.value != "") alert("You entered: " + myTextField.value) else alert("Would you please enter some text?") } </script> <input type='text' id='myText' /> <input type='button' onclick='notEmpty()' value='Form Checker' />

<html> <head> <script type="text/javascript"> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> </head> <body> <h1>My First Web Page</h1> <p id="demo"></p> <button type="button" onclick="displayDate()">Display Date</button> </body> </html>

You might also like