Pages

Tuesday, March 20, 2012

Javascript essentials for beginners


 
 FREE Job Requirement posting on www.allwalkin.blogspot.com. Please forward to softwarewalkins@gmail.com

FREE Resume posting for the Job Seekers in this site,  you can send your resume with experience and qualification dont send the projects and personal details please write the heading ex: 3+ years of expe in IT to this mail id softwarewalkins@gmail.com it is open database of the resumes if any objections dont send your resume.

 Do you have any material in any Technology in IT please send the soft copy to this mail id softwarewalkins@gmail.com



 Window.close( )- will close the window.


 Window.open( )- will opens a new window.

 Window.history. back()- will move the browser to previous window.

 Window.history. go(-2)- changes ur screen to 2 screen back.

 Window.history. forward() - will make the burron as Forward

 window.navigate( ) - method that also loads a document into a window,
but you can’t use it for crossbrowser applications.

 Math.random( )- will generates you a Random Numebr

 alert('Message goes here')- To generate an alert message

 if (confirm("Your question))- To generate an OK/Cancel box

 prompt('Prompt text','Suggested input')- To generate a user prompt

 navigator.appName – Gives Browser name

 navigator.cookieEna bled will give you true/false based on the
browser support for cookies. This property is read only.

 document.all. tags("input" );- will returns all “input” tags.

 All the variables declared between <script> and </script> tags that
are independent of any functions defined are initialized before *onLoad*()
function of the page. These are nothing but the *Global Variables*.

 <INPUT TYPE=IMAGE SRC=images/login1. GIF ALT=SignIn> - *makes an
Image act as a submit button*

 <body oncontextmenu= "return false">- will avoid right mouse popups.

function click() {if (event.button= =2) {alert('Disabled' )}}

document.onmousedow n=click

 Use the "size" parameter to the select tag. size=2, size=10- to get
the Scroll bar for Select.

 parent.frameName. print()- to print the contents of a different frame

if (window.navigator. userAgent. indexOf(' MSIE 6.0') != -1 &&
window.navigator. userAgent. indexOf(' SV1') != -1) {
i=35; //This browser is Internet Explorer 6.x on Windows XP SP2
} else if (window.navigator. userAgent. indexOf(' MSIE 6.0') != -1) {
i=60; //This browser is Internet Explorer 6.x
} else if (window.navigator. userAgent. indexOf(' Firefox') != -1 &&
window.navigator. userAgent. indexOf(" Windows") != -1) {
i=25; //This browser is Firefox on Windows
} else if (window.navigator. userAgent. indexOf(' Mozilla') != -1 &&
window.navigator. userAgent. indexOf(" Windows") != -1) {
i=45; //This browser is Mozilla on Windows
} else {
i=80; //This is all other browsers including Mozilla on Linux
}

------------ --------- --------- --------- --------- --------- -

<HTML>

<SCRIPT LANGUAGE=”JavaScript”>

function *isEnterKey* (evt) // Event object processor for NN4, IE4+, NN6

{

if (!evt)

{

evt = window.event // grab IE event object

}

else if (!evt.keyCode)

{

evt.keyCode = evt.which // grab NN4 event info

}

return (evt.keyCode == 13)

}

function *processOnEnter* (fld, evt)

{

if (isEnterKey( evt))

{

alert(“Ready to do some work with the form.”)

return false

}

return true

}

</SCRIPT>

<FORM>

*document.** formObject. textObject*

Field 1: <INPUT TYPE=”text” NAME=”field1” onKeyDown=”return *processOnEnter
*(this,event)”>

Field 2: <INPUT TYPE=”text” NAME=”field2” onKeyDown=”return *processOnEnter
*(this,event)”>

</FORM>

</BODY>

Things however can get more complicated if you need the hyperlink click do
something other than redirecting the user to another page. For example, you
want to pop up a message, populate a field, syntax-check the user's input,
or other client-side tasks. You know, dynamic html (dhtml) stuff. Enter the
javascript:void( 0) function. I ran into this feature years ago while
searching for something, and I've been a loyal user ever since. The
javascript:void( 0) function basically neuters the hyperlink while allowing
you to carry out some dhtml activity within the onClick event, i.e.:

*<a href="javascript: void(0)" onclick="alert( 'You clicked.')" >www.abcd.com
</a>*

The void() function causes the browser to take no redirection action upon
clicking. In most modern, javascript-literate browsers you can accomplish
the same disarming task by adding a "return false;" at the end of the
onClick event code, but you'd still need to provide something in for the
href property, so might as well make it javascript:void( 0).

------------ --------- --------- --------- --------- --------- -

*How do I change my mouse pointer with JavaScript*

Your mouse pointer (cursor) is just another element on a web page. You can
control many aspects of how it looks in response to different events on your
web page.

Let's say you have a form that takes a few seconds to process and you want
to let your users know not to keep clicking the "submit" button. You can
very simply add the following to the *<FORM>* HTML tag:

<FORM ... onsubmit="document. body.style. cursor='wait' ">

Here is a list of possible cursors you can use:

-

auto
-

crosshair
-

default
-

pointer (hand in IE 5.x)
-

help
-

move
-

text
-

wait
-

e-resize, w-resize, n-resize, s-resize, ne-resize, nw-resize, se-resize,
sw-resize

------------ --------- --------- --------- --------- --------- -

*checking date format*

function isLeap(year) {
if(year % 400 == 0){
return true;
} else if((year % 4 == 0) && (year % 100 != 0)){
return true
} else return false;
};

function days_in(month, year){
if(month == 4 || month == 6 || month == 9 || month == 11){
return 30;
} else if(!isLeap(year) && month == 2){
return 28;
} else if(isLeap(year) && month == 2){
return 29;
} else return 31;
};

function checkDate(myItem) {
var myArrayDate, myDay, myMonth, myYear, myString, myYearDigit;
myString = myItem.value + "";
if (myString == "" || myString == "mm/dd/yyyy" ){
myItem.value = "mm/dd/yyyy" ;
return true;
}
myArrayDate = myString.split( "/");

myDay = Math.round(parseFlo at(myArrayDate[ 1]));
myMonth = Math.round(parseFlo at(myArrayDate[ 0]));
myYear = Math.round(parseFlo at(myArrayDate[ 2]));
myString = myYear + "";
myYearDigit = myString.length;

if (isNaN(myDay) || isNaN(myMonth) || isNaN(myYear) || (myYear < 1) ||
(myDay < 1) || (myMonth < 1) || (myMonth > 12) || (myYearDigit != 4) ||
(myDay > days_in(myMonth, myYear))){
alert("Please check your Date format. (mm/dd/yyyy) ");
myItem.value = "mm/dd/yyyy" ;
return true;
} else{
return false;
}
};

You can easilly change this script to check another date format by changing
the split method

*How can I disable the back button in a web browser ?*

We can use onLoad="if(history. length>0) history.go( +1)"

<a href="somwhere. asp" onclick="location. replace(this. href);return
false;">TEST< /a>

Or

<meta http-equiv=refresh content="0, URL=page2.html" >

*Can I include JavaScript code from external JS files, rather than
embedding all my scripts within HTML pages? *

*Answer:* Yes. To do so, create a new file with the extension myscript.js.
Put your JavaScript code in this file; do not include opening and closing
SCRIPT tags in the myscript.js into your Web page, use these tags in your
HTML file: .js files containing JavaScript functions that you reuse on many
different HTML pages.

*Question: How do I code a select menu with hyperlinks to different pages?*

*Answer:*

<form>

<select

onChange="if( this.selectedInd ex!=0)

self.location= this.options[ this.selectedInd ex].value" >

<option value="" selected>Select a page

<option value="startpag. htm">JavaScript FAQ

<option value="numbers. htm">Numbers

<option

value="strings. htm">Strings

<option value="navigati. htm">Navigation

<option value="colors. htm">Colors

<option value="http://www.javascripter.net/">JavaScripter. net

</select>

</form>

*Question: Can I make a button on my page work as a hyperlink to another
page? *

Top of Form

*Answer:* To create a button that works as a hyperlink you can use this
code:

<form>

<input type=button

value="insert button text here"

onClick="self. location= 'Your_URL_ here.htm' ">

</form>

*Question: How do I disable a radio button in a form (making it not
selectable)? *

*Answer:* To make a radio button not selectable, in the button's INPUT tag
you can use an onClick event handler like this:

<INPUT type="radio" name="myButton" value="theValue"

onClick="this. checked=false;

alert('Sorry, this option is not available!') ">

Bottom of Form

*Question: How do I insert quotes in strings? *

*Answer:* Quotes in strings should be preceded by a backslash. This allows
the JavaScript interpreter to distinguish a quote within the string from the
quotes that serve as string delimiters. Here's an example:

string1='It\ 's five o\'clock!';

string2="<A HREF=\"index. htm\">";

Alternatively, if your string includes single quotes only, then you can use
double quotes as string delimiters, and vice versa. Here's an example:

string1="It' s five o'clock!";

string2='<A HREF="index. htm">';

*Question: Can I display an external HTML file as part of my page? *

*Answer:* Yes, you can display an external HTML file on your page by using:

 LAYER or ILAYER tags with SRC=FILENAME. HTM (in Netscape 4)

 IFRAME tag with SRC=FILENAME. HTM (in Explorer 4+ and Netscape 6)

In order to insert an external file, we called insertExternalFile( ) passing
the file name as a parameter. The function also takes two other parameters:
the width and height of the area where you'd like to display the inserted
file. Thus, each of the external files *inserted_file1. htm* and *
inserted_file2. htm* was embedded in the page using the following code:

insertExternalFile( "inserted_ file.htm" ,layer_width, layer_height)

The JavaScript code of the function insertExternalFile( ) is contained within
the HEAD section of the page:

<script language="JavaScrip t">

<!--

function insertExternalFile( fname,W,H) {

if (navigator.appName. indexOf(" Microsoft" )!=-1

||

navigator.appName= ="Netscape"

&& parseInt(navigator. appVersion) >4

)

{

document.write( ''

+'<IFRAME src="'+fname+ '" scrolling="no" frameborder= 0 border=0'

+(W==null ? '' : ' width='+W)

+(H==null ? '' : ' height='+H)

+'></IFRAME> '

)

}

if (navigator.appName= ="Netscape"

&& parseInt(navigator. appVersion) ==4) {

document.write( ''

+'<ILAYER>'

+'<LAYER src="'+fname+ '" '

+(W==null ? '' : ' width='+W)

+(H==null ? '' : ' height='+H)

+'></LAYER>< /ILAYER>'

)

}

}

//-->

</script>

*Question:* How do I create a new layer from JavaScript?

*Answer:* Normally, you create layers by using DIV tags in the HTML source
code of your page. However, you can also create layers programmatically with
JavaScript! Here's an example:

<form>

<input type=button value="Create layer"

onClick="makeLayer( 'LYR1',200, 10,100,100, 'red',1,1) ">

<input type=button value="Delete layer"

onClick="deleteLaye r('LYR1') ">

</form>

function makeLayer(id, L,T,W,H,bgColor, visible,zIndex) {

if (document.layers) {

if (document.layers[ id]) {

alert ('Layer with this ID already exists!')

return

}

var LR=document. layers[id] =new Layer(W)

LR.name= id

LR.left= L

LR.top = T

LR.clip.height= H

LR.visibility= (null==visible || 1==visible ? 'show' :

'hide')

if(null!=zIndex) LR.zIndex=zIndex

if(null!=bgColor) LR.bgColor=bgColor

}

else if (document.all) {

if (document.all[ id]) {

alert ('Layer with this ID already exists!')

return

}

var LR= '\n<DIV id='+id+' style="position: absolute'

+'; left:'+L

+'; top:'+T

+'; width:'+W

+'; height:'+H

+'; clip:rect(0, '+W+','+H+ ',0)'

+'; visibility:' +(null==visible || 1==visible ? 'visible':'hidden' )

+(null==zIndex ? '' : '; z-index:'+zIndex)

+(null==bgColor ? '' : '; background-color: '+bgColor)

+'"></DIV>'

document.body. insertAdjacentHT ML("BeforeEnd" ,LR)

}

}

*Question:* *Can I suppress JavaScript error messages?*

*Answer:* Yes. To suppress all JavaScript error messages on your HTML page,
you can put the following code fragment in the HEAD section of your page:

<SCRIPT language="JavaScrip t">

<!--

function silentErrorHandler( ) {return true}

window.onerror= silentErrorHandl er()

//-->

</SCRIPT>

*I want to launch a new window, BUT the contents of the new window IS NOT an
HTML file or CGI script. It is rather, just "document.write" statments
executed by the parent window ?*

var handle = window.open( "", ...);

then

handle.document. open();

handle.document. write(... );

*How do I get a print preview window to display from JavaScript?*

<html>
<head>
<title>Print Preview</title>
<script>
function printpr()
{
var OLECMDID = 7;
/* OLECMDID values:
* 6 - print
* 7 - print preview
* 1 - open window
* 4 - Save As
*/
var PROMPT = 1; // 2 DONTPROMPTUSER
var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0
CLASSID="CLSID: 8856F961- 340A-11D0- A96B-00C04FD705A 2"></OBJECT> ';
document.body. insertAdjacentHT ML('beforeEnd' , WebBrowser);
WebBrowser1. ExecWB(OLECMDID, PROMPT);
WebBrowser1. outerHTML = "";
}
</script>
</head>
<body>
<form>
<input type='button' value="Print Preview" onclick="printpr( );">
</form>
</body>
</html>
-- 

No comments:

Receive All Free Updates Via Facebook.