Scripting language is of two types, client side scripting and server side scripting language. The difference between the client side scripting and server side scripting language is that client side scripting programs could be executed on any client computer and server scripting programs could be executed only on the server. Javascript and Vbscript are client side scripting languages.
For example, if there is a contact form of the website with few fields. Email is one of the fields in that contact form so now if a user enters some number only or character only or email in invalid format and send to server then the server will have to process an email in invalid format. To process, the server will check and verify the format of the email and when it will find that email is in invalid format then it will tell back to client computer that the email is invalid format so enter the email in correct format. This was only one client computer that send the wrong data but when a website is running globally, there might be thousands of users logged on at the same time and what would be happen to server if all clients send wrong data at the same time. To prevent this mishappening, it would be better if the format of email is checked at the client computer only and if the email is in the correct format then only it is send to the server for processing.
Javascript is a popular scripting language and has been in use for many years. Days when flash was not popular and not used by many designers, Javascript was used to give nice effects to webpages. Javascript is still better than flash in minor designing needs because javascript pages are ranked better than flash pages in search engines. Some of the powerful features of this scripting language are described as below.
1. Nearly all browsers support javascript and you dont need to install any plugin to execute javscript codes whereas to run flash pages, flash plugin should be installed in your browser.
2. Javascript is same as any other functional programming language that can handle objects also. Variables could be declared and functions could be created. Property like inheritance of OOPS is also supported in Javascript but it is not same as inheritance in Java. Javascript programs be executed on both server and the client.
Javascript codes enhance your web design skills. Now to know more about javascript, learn these 20 Javascript codes to make your web design look excellent.
1. Javascript alerts
Javascript alerts are very important and used to display a message or warning to the user in a dialog box. Now see this code that will display an alert message on a webpage.
<script language=javascript>
alert(‘My name is John);
</script>
Copy this code and paste in notepad or any text editor and save it in .html format. As soon as you run this page, it will display a box with the message “My name is John ”. So using these lines, you can display any message. In this code, first line is used to open Javascript tag, last line is used to close Javascript tag and the middle line has alert function that is used to display any message in Javascript.
2. Opening New Window
A new window can be opened in any page using Javascript code. There are two ways to open a new page. A new page can be made to open by clicking a link or by clicking a button. Now see both these codes below.
<Script Language=”JavaScript”>
function load() {
var load=
window.open(‘http://www.webdesignerdepot.com’,”,’scrollbars=no,menubar=no,height=600,width=
800,resizable=yes,toolbar=no,location=no,status=no’);
}
// –>
</Script>
<a href=”javascript:load()”>Open Window</a>
Now in the above lines of code, the part of code in the script tag should be placed in the head section where as the last line should be copied in the body tag wherever you want to display the link. After clicking the link, it will open the site that is written in the window.open function.
<form>
<input type=”button” value=”Open Window”
onclick=”window.open(‘http://webdesignerdepot.com ‘)”>
</form>
The above lines of code can be placed anywhere in your html page wherever you want to display the link. Clicking the link will open the site that is written in window.open function.
3. Set as Users homepage
Many sites provide a button in their webpage and if you click on that button then that site will be set as your homepage that means whenever you open your browser that site will be opened automatically. You can also provide a button in your webpage that if clicked on the client computer then your site will be made as home page on the client computer. See these lines of code below.
<FORM>
<INPUT TYPE=”button” VALUE=”Make This Site Your Home Page”
onClick=”this.style.behavior=’url(#default#homepage)’; this.setHomePage(‘ http://webdesignerdepot.com’);”>
</FORM>
Copy this code and paste in your browser wherever you want to display the button.
4. Close Window
In many sites you must have seen that when you logout from your account then a message box is displayed asking to close the window and if you click “OK” then the browser is closed. This is done to avoid reuse of that window. You can do so in your website also just by placing one line code in your page wherever you want to display the message. See the line of code below.
<a href=”javascript: self.close()”>Close Window</a>
Self.close closes the window. One more function is used for the same purpose that is Window.close.
5. Statusbar Message
In some sites you must have seen some message displayed in statusbar. Its not a difficult job and you could also do this just by placing few lines of code in your html document. See the lines of code below.
<SCRIPT language=”JavaScript”>
var current = 0
var x = 0
var speed = 100
var speed2 = 100
function initArray(n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ‘ ‘
}
}
typ = new initArray(4)
typ[0]=”My name is Nitesh.”
typ[1]=”I am a freelancer.”
typ[2]=”I am a programmer.”
typ[3]=”Article writing is my hobby.”
function typewrite() {
var m = typ[current]
window.status = m.substring(0, x++) + “”
if (x == m.length + 1) {
x = 0
current++
if (current > typ.length – 1) {
current = 0
}
setTimeout(“typewrite()”, speed2)
}
else {
setTimeout(“typewrite()”, speed)
}
}
typewrite()
// –>
</SCRIPT>
The above lines of code will display your desired message in status bar of your webpage.
6. Clock in Status bar
You can also display clock in status bar as you displayed message in the previous code. To do so use the lines of code written below.
<script Language=”JavaScript”>
var timerID = null;
var timerRunning = false;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = “” + ((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? “:0″ : “:”) + minutes
timeValue += ((seconds < 10) ? “:0″ : “:”) + seconds
timeValue += (hours >= 12) ? ” P.M.” : ” A.M.”
window.status = timeValue;
// you could replace the above with this
// and have a clock on the status bar:
//
timerID = setTimeout(“showtime()”,1000);
timerRunning = true;
}
function startclock () {
// Make sure the clock is stopped
stopclock();
showtime();
}
// –>
</script>
The above lines of code have initialized the clock in your webpage and now see this line.
<BODY onLoad=”startclock()”>
The function startclock() that is made in the above script can be added in the body tag of your page to display the clock in your status bar.
7. Clock in webpage
The above clock was displayed in the status bar only but we may also need to show the clock in webpage. To show the clock in webpage see the code below.
<script type=”text/javascript”>
var imageclock=new Object()
//Enter path to clock digit images here, in order of 0-9, then “am/pm”, then colon
image:
imageclock.digits=["c0.gif", "c1.gif", "c2.gif", "c3.gif", "c4.gif", "c5.gif", "c6.gif", "c7.gif",
"c8.gif", "c9.gif", "cam.gif", "cpm.gif", "colon.gif"]
imageclock.instances=0
var preloadimages=[]
for (var i=0; i<imageclock.digits.length; i++){ //preload images
preloadimages[i]=new Image()
preloadimages[i].src=imageclock.digits[i]
}
imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into
string of images instead
var sections=timestring.split(“:”)
if (sections[0]==”0″) //If hour field is 0 (aka 12 AM)
sections[0]=”12″
else if (sections[0]>=13)
sections[0]=sections[0]-12+”"
for (var i=0; i<sections.length; i++){
if (sections[i].length==1)
sections[i]=’<img src=”‘+imageclock.digits[0]+’” />’+'<img
src=”‘+imageclock.digits[parseInt(sections[i])]+’” />’
else
sections[i]=’<img
src=”‘+imageclock.digits[parseInt(sections[i].charAt(0))]+’” />’+'<img
src=”‘+imageclock.digits[parseInt(sections[i].charAt(1))]+’” />’
}
return sections[0]+’<img src=”‘+imageclock.digits[12]+’” />’+sections[1]+’<img
src=”‘+imageclock.digits[12]+’” />’+sections[2]
}
imageclock.display=function(){
var clockinstance=this
this.spanid=”clockspan”+(imageclock.instances++)
document.write(‘<span id=”‘+this.spanid+’”></span>’)
this.update()
setInterval(function(){clockinstance.update()}, 1000)
}
imageclock.display.prototype.update=function(){
var dateobj=new Date()
var
currenttime=dateobj.getHours()+”:”+dateobj.getMinutes()+”:”+dateobj.getSeconds() //create
time string
var currenttimeHTML=imageclock.imageHTML(currenttime)+’<img
src=”‘+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+’” />’
document.getElementById(this.spanid).innerHTML=currenttimeHTML
}
</script>
Now write the above code within the head tag of your html document. This code will need 13 gif images. 10 images are used to display the numbers from 0 to 9, 2 images are used to display the time in AM and PM and the remaining image is used to display the colon between hours, minutes and seconds. You can design the gif images yourself simply in paint or advanced images in Photoshop if you know to use photoshop. The names of images should start from c0 to c9 for the numbers, cam for AM, cpm, for PM and colon for writing colon. Remember if you are giving different names to your images then you should change the name of images in “imageclock.digits” in the code also to display the images. Now after this see this code below.
<script type=”text/javascript”>
new imageclock.display()
</script>
Now write the above three lines of code in your body tag anywhere you want to display the clock.
8. Protect Content
Sometimes you need to protect the content of your site from copying. Matrimonial sites such as Jeevansathi.com used to protect the images of their profiles from being copied. You can also do so by using just few lines of code.
<SCRIPT language=”JavaScript”>
var message=”Copyright 2009 to www.allaboutwebsite.com. WARNING! All content contained
within this site is protected by copyright laws. “;
function click(e) {
if (document.all) {
if (event.button==2||event.button==3) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// –>
</SCRIPT>
Now the above code will protect the text or images from being copied. This method prevents the right click on your webpage and if someone right clicks, then the warning written in variable “message” is displayed in a dialog box. Though this method prevents right click but this is not a full secure method because more experienced users can copy the content either by taking
screenshots or by opening view source.
9. Protect page by Password
The above method can be used only for beginners but cannot stop experienced users so to stop experienced you can protect a page by password. See these lines of code below.
<SCRIPT language=”JavaScript”><!–
var statusMsg = “Password Protected Area”
function gateKeeper() {
var password = prompt(“Password required:”, “”);
this.location.href = password + “.htm”;
}
</SCRIPT>
Place the above lines of code within the head section of your html document. Then see more lines of code below.
<A HREF=”javascript:gateKeeper()”
onMouseOver=”self.status=statusMsg; return true”
onMouseOut=”self.status=”; return true”
onClick=”gateKeeper(); return false”>Open my Home page</A>
Now place the above four lines of code in body tag of your html document. If the user will click on the link “Open my Home page”, then the password prompt will be displayed. Now entering the password correctly the user will be redirected to the password.htm page and on your password.htm page you can open your home page in header.
10. Close Alert
You can also place close alert on your page. It means that when you close your page then you get close message such as “Good bye”. Read the code below.
<BODY onUnload=”window.alert(‘ Good Bye ‘)”>
</BODY>
Place this code in your HTML page and a dialog box saying “Good Bye” will be displayed when you close the webpage. The message displayed is written in window.alert function.
11. Checking if compulsory field is filled or not
You must have registered in many sites or created email in hotmail, yahoo etc and you must have noticed that registration forms of such sites have some compulsory fields. The compulsory fields are necessary to be filled but what if someone try to register without filling compulsory fields. So there must be some procedure or mechanism to check the compulsory fields of such forms. Javascript provides the facility to write such codes. Read the code below.
<script language=javascript>
function fun(){
if(document.form1.name.value==”){
alert(‘[Please enter your Name]‘);
document.form1.name.focus();
return false;
}
}
</script>
The above code should be written in the head section of your HTML page. This code checks if the value of the variable name initialized in the form is empty or not. If the variable “name” doesn’t have any value then on clicking the submit button, the error message “Please enter your Name” is displayed and if the value of this variable is not empty then the click on the submit will take you to the next page. Now read this code for the body section.
<form method=”POST” name=”form1″ action=”registrationprocess.php” script
language=”javascript” onsubmit=”return fun();”>
<tr>
<td align=”right” width=”265″><b><span class=”form_required”>Name:</span></b></td>
<td width=”401″>
<input maxLength=”50″ name=”name” size=”35″></td>
</tr>
</form
The above code should be there in the body section of your HTML page. onsubmit=”return fun();” -> This line in the form tag tells the browser that the function named “fun” will be called from the above javascript code. The name of the field in the form part of body section should be same as the name of the field written in the fun function. The name of the form should also be same at both places. In the above code, the name of the form is “form1” at both places. Finally on the execution of this code, if the user try to submit the registration details without filling anything in the textbox named “name” then a dialog box will be displayed asking the user to fill the name in the name field.
12. Matching the value of password and confirm password
Apart from checking the value of compulsory fields, sometimes you may also need to confirm that the value of two fields is same or not. Read the code below.
<script language=javascript>
function fun(){
if(document.form1.password.value!=document.form1.confirmpassword.value){
alert(‘[Please enter same Password]‘);
document.form1.email.focus();
return false;
}
}
</script>
This code will check if the value of password and confirm password is same or not. If the value of password and confirm password is unequal then the error message “Please enter same Password” is displayed and if the value of both fields is same then on clicking the submit button you are taken on to the next page. The name of both these fields should be same in the form part of the body section of your HTML document.
Comments
Post a Comment