This JavaScript article tutorial is going to show us some JavaScript tips and tricks, simple JavaScript solutions and practices for JavaScript beginners to learn JavaScript programming language better. This article basically is written for JavaScript starters but it still contains many helpful JavaScript references for all JavaScript coders, web developers. Please go to the full post page for details and JavaScript code examples.

Other JavaScript article tutorials for JavaScript beginners:
- JavaScript Form Validating Tips, Code and Examples
- 5 Good JavaScript Habits for Better Improvement
- 10 Tiny JavaScript Snippets for Good Beginners
- Top 10 Best JavaScript eBooks that Beginners should Learn
- The basics of Javascript for beginners

• Demo
• Enlarge
• Reload
• New window

In his seminal article Style Versus Design Jeffrey Zeldman wrote The web used to look like a phone book . What he should have written is: The web used to look like a phone book sitting in a tacky 70s disco. Thanks to the combined garishness of animated GIFs, Java applets and JavaScript, many web pages were distinctly vulgar.

Fast forward to 2011 and animated GIFs and Java applets have been thrown into the dustbin of history; but, surprisingly, JavaScript has enjoyed a renaissance of epic proportions. So much so that you can't call yourself a web designer today without some knowledge of JavaScript under your belt.

This state of affairs has come about through a number of different reasons. The introduction of AJAX as a means of updating web pages without a manual refresh, much more powerful browsers that can cope with a large amounts of scripting and the widespread use of JavaScript libraries such as jQuery, Dojo and Mootools.

At the beginning of last year I placed learning JavaScript on My Things To Do In 2010 list. A year later, I’ve made substantial progress. I would now classify my skills as intermediate. And with every new website I create, I learn more.

Below are some tips that you may find of use if you too are considering learning JavaScript.

Why You Should Learn JavaScript

If you are a web designer then knowledge of JavaScript will open up a myriad of new design possibilities for you. It’s going to be eye candy a go go! Not only that but you’ll be able to create some genuinely interesting form validation methods that would not be possible with just CSS and server-side script alone.

If you do not have a programming or development background then you will need to set aside some serious learning time as JavaScript will be quite a shock to your senses.

For all intents and purposes JavaScript is (almost) like using a fully functioning programming language, while HTML and CSS are anything but. As I was already familiar with PHP and ASP, diving into the big J wasn’t such a enormous step, but if this is your first introduction to functions, loops and variables then be prepared to suffer.

Become an expert HTML and CSS Coder First

Lets get this clear, it is unthinkable to tackle JavaScript without a sound knowledge of HTML and CSS. The three now go together like a brotherly triad.

You will need an awareness of HTML to use the DOM (more of which below) and most major JavaScript libraries now use CSS as a method of applying the script on the web page. For instance, Dojo and jQuery have incorporated the Sizzle Selector Engine to harness the power of basic and advanced CSS for their libraries.

If you know how to push CSS to its limits then you’ll be equipped to do the same to jQuery.

Use a JavaScript Library

Occasionally I read an opinion on the web that jQuery isn’t proper JavaScript, and so consequently the developer isn’t a proper JavaScript user. This argument is complete rubbish.

jQuery, and all the others, are 100% JavaScript. They primarily exist not to solve problems in the scripting language itself but to rectify inconsistencies between browsers.

If you consider CSS issues between the legacy Internet Explorer versions and the rest of the pack to be a headache then, oh boy, you just wait for JavaScript to send you crazy.

As an example below is the code that Andy Langton uses to find the viewport width and height. Note the three different methods that are necessary for multi-browser support.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

   var viewportWidth;

    var viewportHeight;
 
    /* the more standards compliant browsers (mozilla/netscape/opera/IE8) use window.innerWidth and window.innerHeight*/
    if (typeof window.innerWidth != 'undefined') {

 
        viewportWidth = window.innerWidth;
        viewportHeight = window.innerHeight;

        /* IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) */
    } else if (
 
    typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth !== 0) {

 
        viewportWidth = document.documentElement.clientWidth;
        viewportHeight = document.documentElement.clientHeight;

 
    } else {
        viewportWidth = document.getElementsByTagName('body')[0].clientWidth;

        viewportHeight = document.getElementsByTagName('body')[0].clientHeight;
    }

Alright, so after the slow death of IE6 the above code will be redundant, but there are a multitude of similar examples that could be given because the differences between Internet Explorer and the rest can be quite maddeningly bonkers.

JavaScript libraries will provide to you an easy way of dealing with issues that affect versions of older versions of Microsoft’s browser.

Freely using them is about understanding how Open Source works. The principles behind this programming philosophy is about finding a solution to a problem, and then allowing others to replicate the solution for their own purposes. This is why the Open Source approach is so effective. It doesn’t make you a lesser developer by relying on an Open Source library.

I started my educational quest at the beginning of 2010 with a copy of David Flanagan’s ‘JavaScript: the Definitive Guide’ and enrolment on a UK Open University course. After a few months of trying learn raw JavaScript it become apparent to me that I needed the help of a library.

However, those first few formative months were extremely important as it gave me an appreciation of the DOM (Document Object Method) and problems associated therewith.

The DOM is, if you don’t know, how JavaScript interacts with the HTML page.

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comment's title

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

• Sent (0)
• New