Welcome to Web Design Guide
|
|
Personal Web Page Design 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!
|
|
|
Personal Web Page Design Best products
Personal Web Page Design News
Long Island Web Designers, Benjamin Marc Recently Launches New Webpage Explaining The Step by Step Process of Hiring A ...
Long Island Website Design Company Benjamin Marc explains a step by step process to design & development.Lake Grove, NY (PRWEB) February 01, 2012 Long Island Web Designers, Benjamin Marc recently launches new webpage explaining step by step what to expect when hiring them.The new web page starts off explaining the process of being a new client of Benjamin Marc. It always begins with a free ...
Read more...Profit By Outsourcing, the Web Development India Company Set To Create An Umbrella B2B Social Networking Website
The website will contain company profiles and the profile of the users. Besides having a separate page for a personal blog, users will be able to upload video media, documents, images and they will be able to comment and rate the uploaded media too. The registered companies will be able to access the Wiki and Forum of the library. ...
Read more...Creativity International Awards Partners With TYPO International Design Talks
Creativity International Awards is proud to announce their new partnership with TYPO International Design TalksLouisville, KY (PRWEB) February 09, 2012 Creativity International Awards is proud to announce their new partnership with TYPO International Design Talks, one of Europe's most prestigious design conferences. This partnership will allow Creativity's top-tier award winners to showcase ...
Read more...clevermethod Takes a Creative Approach
clevermethod, a full-service web agency housed in an unassuming former furniture store on Maple Road, may be surrounded by farmland on the outside, but inside it seems to belong somewhere else entirely.
Read more...Town of Holland Unveils New Website
With tulips, memorials and historic images on the home page, the Town of Holland has a new website that town officials hope will be more useful than previous editions.
Read more...'Green button' key to making sense of smart meters
A small green button on a Pacific Gas and Electric Co. Web page will let customers download detailed information on their personal energy use and give it to whomever they want. The button will also, federal officials...
Read more...