Welcome to Web Design Guide
|
|
Web Page Design Instruction Article
HTML is not the end! You can take things further with html and here are some
important such components used in web design.
This article details how to use Javascript with your web design. Many people
think little of web design, but there definitely lots more about it.
Taking HTML Further with Javascript.
Once you've built your HTML pages, you might need them to do something a little
more interactive on the client-side (that is, in the visitor's web browser). How
can you do that? Javascript is the answer.
How Does Javascript Work?
To add Javascript to your HTML, you simply insert it between <script> tags (or
refer to the .js file that contains it, also using script tags). Overall,
Javascript is quite a C-like language, but manages to be relatively simple in
spite of it.
To insert Javascript on your web pages while doing web design is a very simple
process. Just insert the tags where you want the event to appear in the HTML.
The Javascript you write should have functions that are tied to events on the
page, meaning that when the visitor does something with your page, the
Javascript executes.
Here are some events that you can use to trigger Javascript functions:
onload. Runs the code when the page loads.
onclick. Runs when the mouse is clicked. You can also use ondblclick for a
double-click.
What you are seeing here is some simple codes of Javascript that you can use in
your web design. These can make your web site come alive!
Ignorance is bliss they say. However, you will find this very practical when you
do web design?
onmouseover. Runs when the mouse pointer is over a certain part of the page.
onkeypress. Runs when you press a specific key on the keyboard.
onchange. Runs when the contents of part of a form changes.
onblur. Runs when you press the tab key to switch between part of a form.
onsubmit. Runs when the form's submit button is pressed.
What are these events useful for? All sorts of things. The onmouseover function,
for example, can be used to rewrite parts of the page's code when the user
hovers over something – useful for providing pop-up help 'tooltips'. Onkeypress
lets you give the user keyboard shortcuts to do things on your web page. Onblur
and onsubmit can be used very effectively to spot errors in a user's form input,
and let the user know how to correct them before they're ever even sent back to
the server.
Once you know which event you want to tie some Javascript to, you have to say so
in your code. You can do this in one of two ways. The first way is to directly
attach it to the HTML element in question, like this:
<form onsubmit="javascript:submitCheck();">
This works well, but has the disadvantage of polluting your HTML with Javascript
function names. The second, better, way, is to do it like this in the Javascript
itself:
onload = function() { }
This creates a function directly from an event (in this case, the onload event),
without ever touching the HTML itself.
Javascript Commands.
Here's a quick reference to the most useful commands in Javascript.
Maintaining the value of web design was the main reason for writing this
article. Only in this way will the future know more about web design.
alert. Pops up a dialog box giving the user a message. Useful, but sometimes
considered annoying – it might be better to put the message on the page instead.
confirm. Gives the user an alert box, but with buttons for Yes and No. Useful
for asking 'are you sure?'
document.write. Writes things into the current HTML document. Often-used, but
not the best way of doing things.
getElementByID. Allows you to get an HTML element (that is, a tag) using its ID
and manipulate it. Very useful for changing the text contained within tags, or
their background colours, but can be used to do just about anything.
Math.random. Produces a random numb
navigator.userAg. Returns the name of the web browser. Useful to check if a
certain browser is being used, although it's often better to check for functions
instead of browsers and decide which code to run that way.
parseInt. Looks through some text and gives you only the numbers from it.
window.location. Allows you to change the current URL that the web browser is
at, as if the user had clicked a link.
var. Defines variables.
These can attached with your HTML code as mentioned above. Javascripts are
actually a god given boon to the web design profession.
For more on Javascript, take a look at
www.javascriptkit.com
.
Javascript's Problems.
The biggest problem Javascript has is that it just doesn't work on all browsers:
if you thought HTML support was erratic between them, wait until you start using
Javascript. This will often put you in the position of having to check whether a
function is available on the browser the code is running in (using an if
statement), and then running some alternative code as a workaround if it
doesn't. In most cases, this isn't as big a problem as it might seem, but it
still requires you to have some knowledge of each browser's limits, and do more
testing than you would otherwise need to do.
Javascript is used extensively now in web design projects. Most webmasters use
it carry out simple events on their web sites.
Javascript is also, unfortunately, a pain to test and debug, as most browsers
don't give you any sort of reason why your code didn't run – if it's wrong, they
just ignore it.
We sincerely hope that this article on web design and Javascript furnished you
with enough materials you were seeking about it. More articles on web design can
be found on this site. Enjoy!
|
|
|
Web Page Design Instruction Best products
Web Page Design Instruction News
Briefly in Tompkins (The Ithaca Journal)
The Share the Warmth campaign is about to start distribution to those in need and are facing a shortfall of coats, especially children's coats. The community is being asked to donate gently used or new winter coats, hats, gloves, mittens, boots, and blankets.
Read more...Briefly in Tompkins (The Ithaca Journal)
The Community Foundation has announced an investment of nearly $11,000 to further protect and support the natural environment. Grants were approved to the Finger Lakes Land Trust, the Nature Conservancy of Central and Western New York, and the National Audubon Society. One grant to the Finger Lakes Land Trust was given in honor of long time volunteer Betsy Darlington. The Community Foundation ...
Read more...Tyler Green's modern & contemporary art blog (Arts Journal)
Oodles of research reveals just how important arts education is when it comes to developing young minds.
Read more...Benchmarks: AMD's 45nm 'Shanghai' Opteron (ZDNet)
AMD's 'Shanghai' processors are the company's first chips to utilize the improved performance and efficiency of 45nm technology. ZDNet Germany tests show that they have made up important ground on Intel Xeon chips. AMD's 'Shanghai' processors are the company's first chips to utilize the improved performance and efficiency of...
Read more...Is it smarter to barter? (Provo Daily Herald)
SAN FRANCISCO -- In this tough economy, Valerie Whitlock uses two forms of currency: money and barter.
Read more...Bartering booms as crisis crimps cash and credit (Honolulu Advertiser)
As the financial crisis makes cash and credit increasingly scarce, the ancient custom of bartering is booming. Cost-conscious consumers are getting creative to make every dollar count.
Read more...