Welcome to Web Design Guide
|
|
Free Web Page Design Program 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!
|
|
|
Free Web Page Design Program Best products
Free Web Page Design Program News
98 Meg Graphics Pack.
A Unique Combination Of Web Graphics.
Read more...Fruity Plugins - The Fruitiest Wordpress Plugins Ever!
With A Fruity Plugin Installed, Every Visitor Automatically Creates One Way Do Follow Links And Unique Content. Sticky Too! One Of The Top Wordpress...
Read more...7 Fast Ways To Get Great Links To Your Website.
A Great Way To Create Fantastic Links To Your Website And Get Huge Traffic And High Ranking.
Read more...Small Sites, Big Money.
Home To The Only E-book About Online Earning That Does Not Promise To Make You A Millionaire Overnight. Instead It Is A No Fluff, Proven Approach To...
Read more...Affiliate Video Brander - Make Money With Online Videos.
Affiliate Video Brander - Forget everything you've heard about making money with video and read this... We made over $45852.00 just by showing simple...
Read more...SoundStreamer.
Easily Add Streaming Audio To Your Website Today With SoundStreamer!
Read more...