Web Design - a task that requires the creativity and a lot of time, to create the high quality products. However, in the environment of modern web nowadays, the Internet produced a lot of libraries, utilities and tools to help the web designers finishing their tasks faster. And this is the subject of this JavaScript article: shows some reliable destinations that have the web designer's works finished faster.

• Demo
• Enlarge
• Reload
• New window

Learn-JavaScript-Tutorial.com

This site contains front-line examples and begginer JavaScript experiences for the novice of users. Tutorials showcase several useful scripts and images that aid you in the advancement of your skills as a designer.

Walk Before You Can Run

Let's try it ourselves! In Javascript, the word 'document' refers to the current page. The word 'write' allows me to write text on the page. In the majority of cases, your scripts will be included in a script tag - this is how the browser identifies that you've switched gears. It's just like the style tag, but it happens whenever you need javascript (even in the body tag) and uses a type of text/javascript instead of the more familiar text/css. So, if I wanted to build a script to put my name on the screen it would look like this...

document.write("My name is Matt");

It's that simple - as you learn more, you'll do more impressive things, but, hey, we all have to start somewhere, right? Consider 'document.write' like the fast food job you had in high school. It's probably not something you will impress your friends with, but once you're an investment banker, you'll look back on it with nostalgia.

Head out to w3schools.com, get into their Javascript tutorial, and choose the first example - use this and build your first script for yourself! Replace the text with whatever text you want, or add additional 'document.write' commands to put more text in your page.

Subtleties of JS

Keep in mind that Javascript is like an oompa loompa in your web factory - its not building the page, its helping you build the code. So, when you put text on the screen, the script you wrote is not putting text directly on the screen... its putting text in the code, and the browser is displaying it as it normally would. Don't believe me? Try this:

Add a second 'document.write' command. You should notice that the two pieces of text follow directly after one another on your webpage.

Now, between the "quotes" where your text is, add HTML tags. Add a paragraph tag on each command. You should have something like this:

document.write("<p>My name is Matt</p>");
document.write("<p>This is my first script</p>");

Because the Javascript will write this directly into the code, you can use things like HTML tags because the browser will be able to interpret and display them!

As you get to more and more complicated topics, the value of being able to code alongside the tutorials on w3schools.com will be invaluable to your ability to learn Javascript fast and feel comfortable doing so.

Put It to Use

The best way to motivate yourself is to see what you could do if you put the time into learning Javascript. While there are a ton of ways to enhance your HTML, I've included some tutorials and demos below that will show you how Javascript can play nice with your CSS to create some pretty impressive results, relying a lot on your current skill to help enhance the Javascript you are learning.

Suckerfish Dropdowns

As you learn Javascript, you should know about suckerfish dropdowns. Essentially, these dropdowns use a lightweight combination of both CSS and Javascript to create accessible menus that can be used to add additional links to your navigation.

What's interesting about this is that the Javascript is literally adding a class to the elements - so, think about it like this - you've set up a class that determines a specific look and feel... but Javascript plays the role in 'invoking' that class - creative uses of such a trick like this could yield some very interesting results. Here it is being used to apply hover effects to specific elements, but the application of this technique could be limitless.

Switching Stylesheets

You probably already know that you can use alternate style sheets on a page, but didn't know how to switch them on the fly - Javascript will help you do this. If you had different colored themes that you wanted your users to be able to customize, you could use Javascript to switch between the two. You could even get creative - create a different theme for different times of day (morning, day, night) and display a stylesheet based on the user's local time.

• Code
• Print

• Comment (1)
• Write

by Mini projects for ece, 14/06/2011 07:06 PM
Reply

All the tutorial you mentioned are useful. Thanks for sharing your blog...........

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New