Window Properties
1.The status Property
One of the most useful (and most abused) properties is the window’s status.
The value of this property defines what appears in the window’s status bar. One common status is the URL of a link you are mousing over.
You can use the status property to change what appears in the status bar. You may have noticed that some people put a kind of marquee in this area, scrolling across the bottom with messages like Buy our stuff! Buy our stuff! I don’t want to encourage status bar abuse, so I’m not going to teach you exactly how to do that, but you can use these JavaScript techniques to create a similar effect. To change what appears in the status bar of a window, use a <body> tag like this:
<body onLoad = "window.status = 'hi there!';">
This tag tells JavaScript to change the contents of the window’s status bar after the page has been fully loaded into the browser.
You might want to use the status property to inform visitors about the site they’ll see if they click a link. For example, if you have a link to a very graphics-intensive site, the words Warning: This site has a lot of graphics could appear in the status bar when the visitor mouses over the link. You can set this up with an onMouseOver:
<a href = "http://www.myheavygraphicsite.com/" onMouseOver =
"window.status='Warning: This site has a lot of graphics'; return true;">
My Heavy Graphic Site</a>
2. The opener PropertyThe opener Property
When one window opens a new window, the new window remembers its parent (the original window) using the opener property. An opened window can access its parent through this property and then manipulate the parent. For example, if you want a link in the new window to change the contents of the status bar in the original window, you’d include the following code inside a link in the new window:
<a href = "#" onClick = "var my_parent = window.opener; my_parent.status='howdy'; return false;">put howdy into the status bar of the original window</a>
The first statement inside the onClick says, “Find the window that opened me, and set the variable my_parent to point to that window.” The second statement changes the status property of that window to howdy.
Or you can make this simple
put howdy into the status bar of the original window
3. More Window Methods :
You’ve seen four window methods so far: open(), close(), focus(), and blur().
Let’s look at two more that come in handy from time to time: resizing and moving windows.
Resizing Windows
Modern browsers provide two different ways your JavaScript can resize a window. The window.resizeTo() method resizes a window to a given width and height. To change a small window into one that’s 500 pixels wide and 200 pixels high, you’d use the following script:
window.resizeTo(500,200);
Alternatively, you can change the size of a window by a specific amount using window.resizeBy(). The window.resizeBy() method takes two numbers: how much the width of the window should change and how much the height should change.
The code window.resizeBy(10, -5);makes a browser 10 pixels wider and 5 pixels shorter.
Moving Windows
The window.moveTo() method moves a window to an absolute position on the screen. If you want the window in the upper-left corner of the user’s screen, you’d type:
window.moveTo(0,0);
The first number is the number of pixels from the left border of the screen you want the window’s upper-left corner to appear, and the second number is the number of pixels from the top of the screen.
An alternative to window.moveTo() is window.moveBy(). If you want to move a window 5 pixels to the right and 10 pixels down from its current position, you’d type:
window.moveBy(5,10);
The first number is the number of pixels to the right you want to move the window, and the second is the number of pixels down. If you want to move the window 10 pixels up and 5 to the left, just use negative numbers:
window.moveBy(-5,-10);
Be careful not to move a window entirely off a user’s screen. To ensure
against this possibility, you have to know the size of the user’s screen. The two
properties that indicate this are:
window.screen.availHeight
window.screen.availWidth
TO calculate a particular point in a page we can use
var left_point = parseInt(width / 2) - parseInt(window_width / 2);
Saturday, February 21, 2009
Monday, February 16, 2009
Working with Window Objects
Because windows are objects, you manipulate them just as you would any object.by using
JavaScript’s dot notation to apply one of the available methods to the window object you name:
window_name.method_name();
1. Opening Windows :
To open a window, use the open() method, which opens a window that has the characteristics you specify as parameters inside its parentheses:
var window_name =window.open("some_url", "html_name",feature1,feature2,feature3,...");
In this example, I’ve set up a variable called window_name to refer to the window we’re opening. When I want to use JavaScript to change or manipulate what’s inside the window, I’ll refer to this window as window_name. Here window_name is just a variable—you could use any valid JavaScript variable name, such as fido, in its place if you so desired
2.Manipulating the Appearance of New Windows :
The three parameters of the window.open() command control the new
window’s characteristics.
a) The URL Parameter : The first parameter is the URL of the page you want to appear inside the window when the window opens. If you’d like to open a window with the Book of JavaScript website, inside the <script> tags you’d write:
var window_name = window.open("http://www.bookofjavascript.com/", "html_name");
b) The HTML Name Parameter : The HTML name of the window (the second parameter inside the parentheses) is useful only if you want to load a page into the window when the user clicks an HTML link on a different page. For example, if you open a window using window.open() and use the second parameter to name the window my_window, you can then use an HTML link to load a page into your new window. To do this, put the HTML name of the new window into the
target attribute of the link. For example, clicking the following link loads the Webmonkey site into my_window:
<a href = "http://www.webmonkey.com/" target = "my_window">Put Webmonkey into my new window!</a>
You can also use the target element of the link tag to open windows without using JavaScript. For example, if a visitor clicks a link like the one above and you haven’t already opened a window named my_window with JavaScript, your browser opens a new window and loads the link. The downside to opening a window without using JavaScript is that you have no control over what the window looks like, and you can’t change it once you’ve opened it (except by loading another page into it from a link).
c) The Features Parameter : The third parameter in the window.open() command is a list of features that let you control what the new window will look like. This is where things start to get fun.
The features parameter lets you open a new window that includes all, some, or none of these features. If you leave out the third parameter (that is, you list just the first two parameters and nothing more—not even empty quotes), the window you open will have all the features you see and will be the same size as the previous window. However, if you list any of the features in the third parameter, only the listed features appear in the window you open. So if you open a window with the command
var book_of_javascript_window =window.open("http://www.bookofjavascript.com/","book_of_javascript", "resizable");
you’ll get a resizable window with the Book of JavaScript site in it. This window
will be the same size as the window from which you opened it, but will lack
the menu bar, status bar, scroll bars, and other features
If you want more than one feature, you can list them inside the quotes, separated by commas. Make sure to leave all spaces out of this string. For some reason, spaces inside a feature string cause some browsers to draw your windows incorrectly.
var pictures =window.open("http://bookofjavascript.com", book_of_javascript","width=605,height=350" );
Feature Effect
directories Adds buttons such as What’s New and What’s Cool to the menu bar. Some
browsers ignore this feature. Others add different buttons.
height = X Adjusts the height of the window to X pixels.
left = X Places the new window’s left border X pixels from the left edge of
the screen.
location Adds a location bar, where the site visitor can enter URLs.
menubar Adds a menu bar.
resizable Controls whether the visitor can resize the window; all Mac windows are
resizable even if you leave this feature out.
scrollbars Adds scroll bars if the contents of the page are bigger than the
window.
status Adds a status bar to the bottom of the window. Use the status
property of the window object, discussed later in this chapter, to
define what will be displayed in the status bar.
Toolbar Adds a standard toolbar with buttons such as back, forward, and stop.
Which buttons are added depends on the browser being used.
top = X Places the window’s top border X pixels from the top edge of the
screen.
width = X Adjusts the window width to X pixels.
JavaScript’s dot notation to apply one of the available methods to the window object you name:
window_name.method_name();
1. Opening Windows :
To open a window, use the open() method, which opens a window that has the characteristics you specify as parameters inside its parentheses:
var window_name =window.open("some_url", "html_name",feature1,feature2,feature3,...");
In this example, I’ve set up a variable called window_name to refer to the window we’re opening. When I want to use JavaScript to change or manipulate what’s inside the window, I’ll refer to this window as window_name. Here window_name is just a variable—you could use any valid JavaScript variable name, such as fido, in its place if you so desired
2.Manipulating the Appearance of New Windows :
The three parameters of the window.open() command control the new
window’s characteristics.
a) The URL Parameter : The first parameter is the URL of the page you want to appear inside the window when the window opens. If you’d like to open a window with the Book of JavaScript website, inside the <script> tags you’d write:
var window_name = window.open("http://www.bookofjavascript.com/", "html_name");
b) The HTML Name Parameter : The HTML name of the window (the second parameter inside the parentheses) is useful only if you want to load a page into the window when the user clicks an HTML link on a different page. For example, if you open a window using window.open() and use the second parameter to name the window my_window, you can then use an HTML link to load a page into your new window. To do this, put the HTML name of the new window into the
target attribute of the link. For example, clicking the following link loads the Webmonkey site into my_window:
<a href = "http://www.webmonkey.com/" target = "my_window">Put Webmonkey into my new window!</a>
You can also use the target element of the link tag to open windows without using JavaScript. For example, if a visitor clicks a link like the one above and you haven’t already opened a window named my_window with JavaScript, your browser opens a new window and loads the link. The downside to opening a window without using JavaScript is that you have no control over what the window looks like, and you can’t change it once you’ve opened it (except by loading another page into it from a link).
c) The Features Parameter : The third parameter in the window.open() command is a list of features that let you control what the new window will look like. This is where things start to get fun.
The features parameter lets you open a new window that includes all, some, or none of these features. If you leave out the third parameter (that is, you list just the first two parameters and nothing more—not even empty quotes), the window you open will have all the features you see and will be the same size as the previous window. However, if you list any of the features in the third parameter, only the listed features appear in the window you open. So if you open a window with the command
var book_of_javascript_window =window.open("http://www.bookofjavascript.com/","book_of_javascript", "resizable");
you’ll get a resizable window with the Book of JavaScript site in it. This window
will be the same size as the window from which you opened it, but will lack
the menu bar, status bar, scroll bars, and other features
If you want more than one feature, you can list them inside the quotes, separated by commas. Make sure to leave all spaces out of this string. For some reason, spaces inside a feature string cause some browsers to draw your windows incorrectly.
var pictures =window.open("http://bookofjavascript.com", book_of_javascript","width=605,height=350" );
Feature Effect
directories Adds buttons such as What’s New and What’s Cool to the menu bar. Some
browsers ignore this feature. Others add different buttons.
height = X Adjusts the height of the window to X pixels.
left = X Places the new window’s left border X pixels from the left edge of
the screen.
location Adds a location bar, where the site visitor can enter URLs.
menubar Adds a menu bar.
resizable Controls whether the visitor can resize the window; all Mac windows are
resizable even if you leave this feature out.
scrollbars Adds scroll bars if the contents of the page are bigger than the
window.
status Adds a status bar to the bottom of the window. Use the status
property of the window object, discussed later in this chapter, to
define what will be displayed in the status bar.
Toolbar Adds a standard toolbar with buttons such as back, forward, and stop.
Which buttons are added depends on the browser being used.
top = X Places the window’s top border X pixels from the top edge of the
screen.
width = X Adjusts the window width to X pixels.
Monday, February 9, 2009
Triggering Events in Javascript
JavaScript we’ve seen is triggered when a web page loads into a browser. But JavaScript can also be event driven. Event-driven JavaScript waits for your visitor to take a particular action, such as mousing over an image, before it reacts. The key to coding eventdriven JavaScript is to know the names of events and how to use them.
Event Types
With JavaScript’s help, different parts of your web page can detect different
events. For example, a pull-down menu can know when it has changed, a window when it has closed and a link when a visitor has clicked on it. In this chapter I’ll focus on link events.
A link can detect many kinds of events, all of which involve interactions with the mouse. The link can detect when your mouse moves over it and when your mouse moves off of it. The link knows when you click down on it, and whether, while you’re over the link, you lift your finger back off the button after clicking down. The link also knows whether the mouse moves while over the link
1. Onclick:
Before adding JavaScript:
<a href = "http://www.bookofjavascript.com/">Visit the Book of JavaScript
website</a>
After adding JavaScript:
<a href = "http://www.bookofjavascript.com/"
onClick = "alert('Off to the Book of JavaScript!');">Visit the Book of
JavaScript website</a>
Try putting the link with the onClick into one of your own web pages.When you click the link, an alert box should come up and say Off to the Book of JavaScript!. When you click OK in the box, the page should load the Book of JavaScript website.
Notice that, aside from the addition of onClick, this enhanced link is
almost exactly like the normal link. The onClick event handler says, “When
this link is clicked, pop up an alert.”
2. onMouseOver and onMouseOut
Two other link events are onMouseOver and onMouseOut. Moving the mouse over
a link triggers onMouseOver,
<a href = "#" onMouseOver = "alert('Mayday! Mouse overboard!');">board</a>
As you can see, moving the mouse over the link triggers onMouseOver. The
code for onMouseOut looks like the onMouseOver code (except for the handler
name) and is triggered when the mouse moves off of the link. You can use
onMouseOut, onMouseOver, and onClick in the same link.
<a href = "#"
onMouseOver = "alert('Mayday! Mouse overboard!');"
onMouseOut = "alert('Hooray! Mouse off of board!!');"
onClick = "return false;">
board
</a>
Mousing over this link results in an alert box showing the words Mayday! Mouse overboard!. Pressing ENTER to get rid of the first alert and moving your mouse off the link results in another alert box that contains the words Hooray! Mouse off of board!! If you click the link instead of moving your mouse off it, nothing will happen, because of the return false, code in the onClick.
3. onMouseMove, onMouseUp, and onMouseDown
The onMouseMove, onMouseUp, and onMouseDown event handlers work much like the others. Try them yourself and see. The onMouseMove event handler is called whenever the mouse is moved while it is over the link. The onMouseDown event handler is triggered when a mouse button is pressed down while the mouse is over a link. Similarly, the onMouseUp event handler is triggered when the mouse button is lifted up again. An onClick event handler is triggered whenever an onMouseDown event is followed by an onMouseUp event.
4. Quotes in JavaScript
<script>script</> The only exception to this rule is when JavaScript is inside the quotes of an event. Your browser will assume that anything within these quotes is JavaScript, so you shouldn’t put <script> and </script> tags
in there.
Also note that the quotes in the alert are single quotes ('). If these were
double quotes ("), JavaScript wouldn’t be able to figure out which quotes go
with what. For example, if you wrote
onClick = "alert("Off to the Book of JavaScript!");"
JavaScript would think that the second double quote closed the first one, which would confuse it and result in an error. Make sure that if you have quotes inside quotes, one set is double and the other is single.
Problem with Apostrophes
Apostrophes can also pose problems.
Example:
onClick = "alert('Here's the Book of JavaScript page. You're gonna love it!');"
Unfortunately, JavaScript reads the apostrophes in Here's and You're as single quotes inside single quotes and gets confused. If you really want those apostrophes, escape them with a backslash (\), like this:
onClick = "alert('Here\'s the Book of JavaScript page. You\'re gonna love it!');"
Putting a backslash before a special character, such as a quote, tells
JavaScript to print the item rather than interpret it.
Change Background color
A simple script to change the background color is
<a href = "#"
onClick = "var the_color = prompt('red or blue?','');
window.document.bgColor = the_color;
return false;">
When you click this link, a prompt box asks whether you want to change
the background to red or blue. When you type your response, the background
changes to that color. In fact, you can type whatever you want into that prompt
box, and your browser will try to guess the color you mean. (You can even do
a kind of personality exam by typing your name into the prompt and seeing
what color your browser thinks you are. When I type then This example demonstrates two new facts about JavaScript.
First, notice that the onClick triggers three separate JavaScript statements. You can put as many lines of JavaScript as you want between the onClick’s quotes, although if you put too much in there, the HTML starts to look messy.
Second, notice that you can change the background color of a page by setting window.document.bgColor to the color you desire. To make the background of a page red, you’d type:
window.document.bgColor = 'red';
Event Types
With JavaScript’s help, different parts of your web page can detect different
events. For example, a pull-down menu can know when it has changed, a window when it has closed and a link when a visitor has clicked on it. In this chapter I’ll focus on link events.
A link can detect many kinds of events, all of which involve interactions with the mouse. The link can detect when your mouse moves over it and when your mouse moves off of it. The link knows when you click down on it, and whether, while you’re over the link, you lift your finger back off the button after clicking down. The link also knows whether the mouse moves while over the link
1. Onclick:
Before adding JavaScript:
<a href = "http://www.bookofjavascript.com/">Visit the Book of JavaScript
website</a>
After adding JavaScript:
<a href = "http://www.bookofjavascript.com/"
onClick = "alert('Off to the Book of JavaScript!');">Visit the Book of
JavaScript website</a>
Try putting the link with the onClick into one of your own web pages.When you click the link, an alert box should come up and say Off to the Book of JavaScript!. When you click OK in the box, the page should load the Book of JavaScript website.
Notice that, aside from the addition of onClick, this enhanced link is
almost exactly like the normal link. The onClick event handler says, “When
this link is clicked, pop up an alert.”
2. onMouseOver and onMouseOut
Two other link events are onMouseOver and onMouseOut. Moving the mouse over
a link triggers onMouseOver,
<a href = "#" onMouseOver = "alert('Mayday! Mouse overboard!');">board</a>
As you can see, moving the mouse over the link triggers onMouseOver. The
code for onMouseOut looks like the onMouseOver code (except for the handler
name) and is triggered when the mouse moves off of the link. You can use
onMouseOut, onMouseOver, and onClick in the same link.
<a href = "#"
onMouseOver = "alert('Mayday! Mouse overboard!');"
onMouseOut = "alert('Hooray! Mouse off of board!!');"
onClick = "return false;">
board
</a>
Mousing over this link results in an alert box showing the words Mayday! Mouse overboard!. Pressing ENTER to get rid of the first alert and moving your mouse off the link results in another alert box that contains the words Hooray! Mouse off of board!! If you click the link instead of moving your mouse off it, nothing will happen, because of the return false, code in the onClick.
3. onMouseMove, onMouseUp, and onMouseDown
The onMouseMove, onMouseUp, and onMouseDown event handlers work much like the others. Try them yourself and see. The onMouseMove event handler is called whenever the mouse is moved while it is over the link. The onMouseDown event handler is triggered when a mouse button is pressed down while the mouse is over a link. Similarly, the onMouseUp event handler is triggered when the mouse button is lifted up again. An onClick event handler is triggered whenever an onMouseDown event is followed by an onMouseUp event.
4. Quotes in JavaScript
<script>script</> The only exception to this rule is when JavaScript is inside the quotes of an event. Your browser will assume that anything within these quotes is JavaScript, so you shouldn’t put <script> and </script> tags
in there.
Also note that the quotes in the alert are single quotes ('). If these were
double quotes ("), JavaScript wouldn’t be able to figure out which quotes go
with what. For example, if you wrote
onClick = "alert("Off to the Book of JavaScript!");"
JavaScript would think that the second double quote closed the first one, which would confuse it and result in an error. Make sure that if you have quotes inside quotes, one set is double and the other is single.
Problem with Apostrophes
Apostrophes can also pose problems.
Example:
onClick = "alert('Here's the Book of JavaScript page. You're gonna love it!');"
Unfortunately, JavaScript reads the apostrophes in Here's and You're as single quotes inside single quotes and gets confused. If you really want those apostrophes, escape them with a backslash (\), like this:
onClick = "alert('Here\'s the Book of JavaScript page. You\'re gonna love it!');"
Putting a backslash before a special character, such as a quote, tells
JavaScript to print the item rather than interpret it.
Change Background color
A simple script to change the background color is
<a href = "#"
onClick = "var the_color = prompt('red or blue?','');
window.document.bgColor = the_color;
return false;">
When you click this link, a prompt box asks whether you want to change
the background to red or blue. When you type your response, the background
changes to that color. In fact, you can type whatever you want into that prompt
box, and your browser will try to guess the color you mean. (You can even do
a kind of personality exam by typing your name into the prompt and seeing
what color your browser thinks you are. When I type then This example demonstrates two new facts about JavaScript.
First, notice that the onClick triggers three separate JavaScript statements. You can put as many lines of JavaScript as you want between the onClick’s quotes, although if you put too much in there, the HTML starts to look messy.
Second, notice that you can change the background color of a page by setting window.document.bgColor to the color you desire. To make the background of a page red, you’d type:
window.document.bgColor = 'red';
Thursday, February 5, 2009
Functions in Javascript
There are so many functions in Javascript, I am describing which are used most in common
1. alert(): One handy function is alert(), which puts a string into a little announcement box
Basic Syntax is alert("string value"); which is defined in the javascript declaration to display a pop up with your selected value.
2. prompt(): The built in function, which asks your visitor for some information and then sets a variable equal to whatever your visitor types.
Example:
<html>
<head>
<title>A Form Letter</title>
< script type="text/javascript" language="javascript">
var the_name = prompt("What's your name?", "Enter your name here");
</script>
</head>
<body>
<h1>Dear
<script type = "text/javascript">
document.write(the_name);
</script>
</body>
</html>
3. Date():
The syntax to call the date in the javascript is
var now = new Date();
It creates an Object that store data that require multiple pieces of information, such as a particular moment in time. For example, in JavaScript you need an object to
describe 2:30 PM on Saturday, January 7, 2006, in San Francisco. That’s because it requires many different bits of information: the time, day, month, date, and year, as well as some representation (in relation to Greenwich Mean Time) of the user’s local time.
Using this object we can retrieve all the values we need
a. For Year : get the year of the date stored in the variable now.
Example: var the_year = now.getYear();
b. For Date : Returns the day of the month as an integer from 1 to 31
Example: var the_Date = now.getDate();
c. For Day : Returns day of the week as an integer where 0 is Sunday and 1 is
Monday
Example: var the_Day = now.getDay();
d. For getHour : Returns the hour as an integer between 0 and 23
Example: var the_hours = now.getHours();
e. For Minutes : Returns the minutes as an integer between 0 and 59
Example: var the_minutes = now.getMinutes();
f. For Month : Return the month as an integer between 0 and 11 where 0 is January
and 11 is December
Example: var the_month = now.getMonth();
g. For Seconds : Returns the seconds as an integer between 0 and 59
Example: var the_seconds = now.getSeconds();
h. For Time : Returns the current time in milliseconds where 0 is January 1, 1970,
00:00:00
Example: var the_time = now.getTime();
i. For Year : Returns the year, but this format differs from browser to browser
Exampe: now.getYear();
4. navigator.appName: This function determines which browser you are using
Example:
var browser_name = navigator.appName;
If you are using mozilla then browser_name outputs "mozilla"
If you are using netscape then browser_name outputs "netscape"
It also uses another function to determine the browser properties getBrowser();
Example:
var browser_info = getBrowser();
var browser_name = browserInfo[0];
var browser_version = browserInfo[1];
5. For Redirecting the Users:
Using javascript we can redirect users from one page to another page.
Syntax:
window.location.href ="http://www.mywebsite.testpage.html";
1. alert(): One handy function is alert(), which puts a string into a little announcement box
Basic Syntax is alert("string value"); which is defined in the javascript declaration to display a pop up with your selected value.
2. prompt(): The built in function, which asks your visitor for some information and then sets a variable equal to whatever your visitor types.
Example:
<html>
<head>
<title>A Form Letter</title>
< script type="text/javascript" language="javascript">
var the_name = prompt("What's your name?", "Enter your name here");
</script>
</head>
<body>
<h1>Dear
<script type = "text/javascript">
document.write(the_name);
</script>
</body>
</html>
3. Date():
The syntax to call the date in the javascript is
var now = new Date();
It creates an Object that store data that require multiple pieces of information, such as a particular moment in time. For example, in JavaScript you need an object to
describe 2:30 PM on Saturday, January 7, 2006, in San Francisco. That’s because it requires many different bits of information: the time, day, month, date, and year, as well as some representation (in relation to Greenwich Mean Time) of the user’s local time.
Using this object we can retrieve all the values we need
a. For Year : get the year of the date stored in the variable now.
Example: var the_year = now.getYear();
b. For Date : Returns the day of the month as an integer from 1 to 31
Example: var the_Date = now.getDate();
c. For Day : Returns day of the week as an integer where 0 is Sunday and 1 is
Monday
Example: var the_Day = now.getDay();
d. For getHour : Returns the hour as an integer between 0 and 23
Example: var the_hours = now.getHours();
e. For Minutes : Returns the minutes as an integer between 0 and 59
Example: var the_minutes = now.getMinutes();
f. For Month : Return the month as an integer between 0 and 11 where 0 is January
and 11 is December
Example: var the_month = now.getMonth();
g. For Seconds : Returns the seconds as an integer between 0 and 59
Example: var the_seconds = now.getSeconds();
h. For Time : Returns the current time in milliseconds where 0 is January 1, 1970,
00:00:00
Example: var the_time = now.getTime();
i. For Year : Returns the year, but this format differs from browser to browser
Exampe: now.getYear();
4. navigator.appName: This function determines which browser you are using
Example:
var browser_name = navigator.appName;
If you are using mozilla then browser_name outputs "mozilla"
If you are using netscape then browser_name outputs "netscape"
It also uses another function to determine the browser properties getBrowser();
Example:
var browser_info = getBrowser();
var browser_name = browserInfo[0];
var browser_version = browserInfo[1];
5. For Redirecting the Users:
Using javascript we can redirect users from one page to another page.
Syntax:
window.location.href ="http://www.mywebsite.testpage.html";
Tuesday, February 3, 2009
Monday, February 2, 2009
JavaScript’s Limitations
JavaScript does have limitations, but these limitations are natural and unavoidable by-products of its main purpose: to add interactivity to your web pages.
JavaScript Can’t Talk to Servers
One of JavaScript’s drawbacks is also its main strength: It works entirely
within the web browser. As we’ve seen, this cuts down on the amount of time
your browser spends communicating with a webserver. On the other hand,
this also means that JavaScript can’t communicate with other machines and
therefore can’t handle some server tasks you may need to do.
JavaScript Can’t Create Graphics
Another of JavaScript’s limitations is that it can’t create its own graphics. Whereas more complicated languages can draw pictures, JavaScript can only manipulate existing pictures (that is, GIF or JPEG files). Luckily, because JavaScript can manipulate created images in so many ways, you shouldn’t find this too limiting.
JavaScript Works Differently in Different Browsers
The most annoying problem with JavaScript is that it works somewhat differently in different browsers. JavaScript was introduced in 1996 by Netscape in version 2 of Netscape Navigator. Since then, JavaScript has changed, and every browser implements a slightly different version of it—often adding browser-specific features. Luckily, starting in the late 1990s, the European Computer Manufacturers Association (ECMA) began publishing standards for JavaScript, which they call ECMA Script. About 99 percent of all browsers being used today comply with at least version 3 of the ECMA standard. These include Internet Explorer version 5.5 and later, Netscape version 6 and later, Mozilla, Firefox, all versions of Safari, and Opera version 5 and later. Because almost all browsers currently in use adhere to version 3 of the ECMA standard.
JavaScript Can’t Talk to Servers
One of JavaScript’s drawbacks is also its main strength: It works entirely
within the web browser. As we’ve seen, this cuts down on the amount of time
your browser spends communicating with a webserver. On the other hand,
this also means that JavaScript can’t communicate with other machines and
therefore can’t handle some server tasks you may need to do.
JavaScript Can’t Create Graphics
Another of JavaScript’s limitations is that it can’t create its own graphics. Whereas more complicated languages can draw pictures, JavaScript can only manipulate existing pictures (that is, GIF or JPEG files). Luckily, because JavaScript can manipulate created images in so many ways, you shouldn’t find this too limiting.
JavaScript Works Differently in Different Browsers
The most annoying problem with JavaScript is that it works somewhat differently in different browsers. JavaScript was introduced in 1996 by Netscape in version 2 of Netscape Navigator. Since then, JavaScript has changed, and every browser implements a slightly different version of it—often adding browser-specific features. Luckily, starting in the late 1990s, the European Computer Manufacturers Association (ECMA) began publishing standards for JavaScript, which they call ECMA Script. About 99 percent of all browsers being used today comply with at least version 3 of the ECMA standard. These include Internet Explorer version 5.5 and later, Netscape version 6 and later, Mozilla, Firefox, all versions of Safari, and Opera version 5 and later. Because almost all browsers currently in use adhere to version 3 of the ECMA standard.
Sunday, February 1, 2009
Alternatives to JavaScript...
Several other programming languages can add interactivity to web pages, but
they all differ from JavaScript in important ways. The four main alternatives
are CGI scripting, Java, VBScript, and Flash.
CGI Scripting
Before JavaScript, using CGI scripts was the only way to make web pages do
more than hyperlink to other web pages containing fixed text. CGI stands for
Common Gateway Interface. It’s a protocol that allows a web browser running on
your computer to communicate with programs running on webservers. It is
most often used with HTML forms—pages where the user enters information
and submits it for processing. For example, the user might see a web
page containing places for entering the length and selecting the type of a
fish, as well as a Compute button. When the user keys in the length, selects
the type, and clicks the button, the information is sent to a CGI script on the
server. The CGI script (which is probably written in a programming language
like Perl, PHP, or C) receives the information, calculates the weight of the
fish, and sends the answer, coded as an HTML page, back to the browser.
Drawbacks: CGI scripts are very powerful, but because they reside on webservers
1. The Need for Back-and-Forth Communication : The connection between your web browser and the webserver limits the speed of your web page’s interactivity Ex: You’re filling out an order form with a dozen entry fields including name, address, and phone number but you forget to fill out the phone number and address
fields. When you click the Submit button to send the information across the
Internet to the webserver, the CGI script sees that you didn’t fill out the form
completely and sends a message back across the Internet requesting that you
finish the job. This cycle could take quite a while over a slow connection. If you
fill out the form incorrectly again, you have to wait through another cycle.
2. Server Overload by Concurrent Access :webserver running a CGI program can get bogged down if too many people call the script simultaneously.Serving up HTML pages is pretty easy for a web server. However, some CGI scripts take a long time to run on a machine, and each time someone calls the script, the server has to start up another copy of it. As more and more people try to run the script, the server slows down progressively.
3. Security Restrictions :A third problem with CGI scripts is that not everyone has access to the parts of a webserver that can run CGI scripts. Since a CGI script can conceivably crash a webserver or exploit security flaws, system administrators generally guard these areas, only allowing fellow administrators access. If you have Internet access through an Internet service provider (ISP), you may not be allowed to write CGI scripts.
VBScript
The language most similar to JavaScript is Microsoft’s proprietary language,
VBScript (VB stands for Visual Basic). Like JavaScript, VBScript runs on your
web browser and adds interactivity to web pages. However, VBScript works
only on computers running Internet Explorer (IE) on Microsoft Windows, so
unless you want to restrict your readership to people who use IE on Windows
Java
Although JavaScript and Java have similar names, they aren’t the same. Netscape, now a part of AOL, initially created JavaScript to provide interactivity for web pages, whereas Sun Microsystems wrote Java as a general programming language that works on all kinds of operating systems.
Flash
Flash is a tool from Macromedia developed to add animation and interactivity
to websites. Almost all modern browsers can view Flash animations or can
easily download the Flash plug-in. Flash animations look great, and a basic
Flash animation requires no programming skills at all. To create Flash animations,
however, you must purchase a Flash product from Macromedia.
Web page designers will often blend the two, using Flash for animations and JavaScript for interactivity that does not involve animations. Flash animations can also be made more interactive using a language called ActionScript, which is almost exactly like JavaScript.
they all differ from JavaScript in important ways. The four main alternatives
are CGI scripting, Java, VBScript, and Flash.
CGI Scripting
Before JavaScript, using CGI scripts was the only way to make web pages do
more than hyperlink to other web pages containing fixed text. CGI stands for
Common Gateway Interface. It’s a protocol that allows a web browser running on
your computer to communicate with programs running on webservers. It is
most often used with HTML forms—pages where the user enters information
and submits it for processing. For example, the user might see a web
page containing places for entering the length and selecting the type of a
fish, as well as a Compute button. When the user keys in the length, selects
the type, and clicks the button, the information is sent to a CGI script on the
server. The CGI script (which is probably written in a programming language
like Perl, PHP, or C) receives the information, calculates the weight of the
fish, and sends the answer, coded as an HTML page, back to the browser.
Drawbacks: CGI scripts are very powerful, but because they reside on webservers
1. The Need for Back-and-Forth Communication : The connection between your web browser and the webserver limits the speed of your web page’s interactivity Ex: You’re filling out an order form with a dozen entry fields including name, address, and phone number but you forget to fill out the phone number and address
fields. When you click the Submit button to send the information across the
Internet to the webserver, the CGI script sees that you didn’t fill out the form
completely and sends a message back across the Internet requesting that you
finish the job. This cycle could take quite a while over a slow connection. If you
fill out the form incorrectly again, you have to wait through another cycle.
2. Server Overload by Concurrent Access :webserver running a CGI program can get bogged down if too many people call the script simultaneously.Serving up HTML pages is pretty easy for a web server. However, some CGI scripts take a long time to run on a machine, and each time someone calls the script, the server has to start up another copy of it. As more and more people try to run the script, the server slows down progressively.
3. Security Restrictions :A third problem with CGI scripts is that not everyone has access to the parts of a webserver that can run CGI scripts. Since a CGI script can conceivably crash a webserver or exploit security flaws, system administrators generally guard these areas, only allowing fellow administrators access. If you have Internet access through an Internet service provider (ISP), you may not be allowed to write CGI scripts.
VBScript
The language most similar to JavaScript is Microsoft’s proprietary language,
VBScript (VB stands for Visual Basic). Like JavaScript, VBScript runs on your
web browser and adds interactivity to web pages. However, VBScript works
only on computers running Internet Explorer (IE) on Microsoft Windows, so
unless you want to restrict your readership to people who use IE on Windows
Java
Although JavaScript and Java have similar names, they aren’t the same. Netscape, now a part of AOL, initially created JavaScript to provide interactivity for web pages, whereas Sun Microsystems wrote Java as a general programming language that works on all kinds of operating systems.
Flash
Flash is a tool from Macromedia developed to add animation and interactivity
to websites. Almost all modern browsers can view Flash animations or can
easily download the Flash plug-in. Flash animations look great, and a basic
Flash animation requires no programming skills at all. To create Flash animations,
however, you must purchase a Flash product from Macromedia.
Web page designers will often blend the two, using Flash for animations and JavaScript for interactivity that does not involve animations. Flash animations can also be made more interactive using a language called ActionScript, which is almost exactly like JavaScript.
Subscribe to:
Posts (Atom)