Why and what in javascript??

Hi all.

I am pretty quick with xhtml and css, getting there on PHP but really don't have much of a clue in javascript.

I guess it is an essential tool to have as it is the only way of server-side prgramming?

But it is used in so many situations for bad things like annoying pop ups and sutff.

hat is it actual uses? Is it worth my time learning it. What is AJAX? Is this more worth learning than JS?

I think you get the drift of what I'm asking...let me know your thoughts.

Mike

It's an invaluable tool, Mike. It allows you the sort of control over page behaviour that you don't have otherwise. It is, as a rule for behaviour but has many different uses. Take suckerfish dropdowns, an almost perfect css solution but requires the aid of just a little JS to get it working. All you use in the case of the dropdowns is a simple show/hide function.

The important thing to bear in mind when thinking about using JS is that it can cause problems and has a bit of a poor reputation because of it's past in the form of DHTML. JS is there to add functionality. Look at lightbox, it makes viewing images more pleasant, more professional and a lot easier for the viewer. It is an ideal solution. However, if JS is switched off then a little of the functionality is gone but everything still works.

AJAX basically allows you load things into a page (search results for example) without reloading the page. Again, this simply adds functionality, makes things quicker, less troublesome for the user. You could make it so that as something is typed into a search field results are automatically displayed underneath. The AJAX makes a request on every keystroke and displays the matches without reloading the page; it simply reloads a part of the page. Again it's important that if JS is switched off that the search feature works just like a traditional search feature. Another good use is when people are start rating products or favouriting articles. This can all be done without reloading the page, so the user experience is slicker.

CSS can do a lot of the things that JS was traditionally used for. Rollovers, hover effects, even remote rollovers and CSS looks as though it will continue to provide clean accessible solutions. There are things that CSS can't do though. When you make a quick post, on these forums it doesn't reload the page, click on someones username, next to their avatar, and a little box opens up with even more options.

JS and AJAX are exciting technologies (or methodologies) but with great power comes great responsibility. You can do a lot of damage with these tools, you could end up actually removing functionality. You see this all too often and it simply shouldn't happen.

Graceful degradation, progressive enhancement. These are things that are spoken of occasionally (and not often enough in my opinion) but to many they mean very little. Progressive enhancement means that everything should work perfectly and you site should be totally accessible to all and then you should progressively enhance you sites functionality with small carefully considered bits of Javascript. Graceful Degradation is similar to this but the reverse, almost, your site should basically work perfectly well with JS switched off and should be thoroughly tested for this eventuality. Just like if you turn CSS of then you page should still display, well if JS is switched off then you site should still be viewable and all it's content accessible. No inline event handlers, in fact no inline JS at all, the DOM allows you to add all the functionality you could need by using the same sort of hooks that you use to apply CSS. Element names, classes and ids.

So I think JS and AJAX is worth bothering as long as it is done correctly. It has a similar syntax to PHP so yo should get along quite well. I suggest you seek out anything that Jeremy Keith has said on the matter and buy his books DOM Scripting and Bulletproof AJAX. You won't go far wrong with them. You should also read this and this and this on the matter of accessible AJAX (or HIJAX).

Did I go on, or what?

Pete.

Haha yea you went on but it was all useful knowledge so cheers!

What is this? I keep reading about it and everytime I see the word I just skip right past it as if it wasn't there!

Cool i've bpookmarked all those links and will hunt down those books. Its annoying how people make stupid use of it cos when I type javascript learning resources it just comes up with all soprts of crap like flashing text and stuff like that. I don't want to know that - but I do want to learn how to use it effectively because up till now I have just knocked it off a cheap mans web scripting language.

but now I see it actually has a lot of use and I really should have it available as a tool.

While researching this question I found this quote:
haha!

Thanks for all the info.

Mike

Nice quote, as for the DOM it stands for Document Object Model. It is a way of accessing every element with a page. The mechanics of it are fairly complex but once you understand how it works it basically means that you can access and modify and element on a page on-the-fly. So the DOM is another standard that most modern browser support, unlike in years gone by where you would have to do lots of browser sniffing and supply different JS to different browser there is relatively good support for the DOM. As a rule I test for support of a DOM method before I use it rather than running convoluted browser checking code. If the method isn't supported then it simply falls back to the perfectly functional non-JS version.

The DOM practically speaking can be used in many ways. Four very useful DOM methods are getElementById, getElementsByTagName, getAttribute and setAttribute.

These elements work exactly as they appear to, it's quite simple and a very efficient way to select a specific part of a page or element.

Code: Select all

document.getElementById("navigation")

This would select any element with the id of "navigation". You could then do all manner of things with it and add all sorts of effects.

Similar to this is:

Code: Select all

document.getElementsByTagName("li")

This would get element with the tag name of li, so it would select your list items from within an ul. You would probably want it to create an array containing all of you li's and do something with them that way but this would be how you selected them. You could go on to narrow it down and ass in some code that only applied the behaviour/effect to li's with a certain class name.

These two are also very handy:

Code: Select all

object.getAttribute("title")

This gets the title attributes of an element. You would probably use this in conjunction with one of the above methods and is probably how the lightbox script displays the contents of your title attribute as a caption, so it can be very useful.

Another handy DOM method is this one:

Code: Select all

object.setAttribute("title","a link to a page")

This would set the title attribute as "a link to a page". Again, it would be used in conjunction with other methods as part of a complete function but this really is very useful when you want set attributes dynamically dependent on user behaviour.

As you can see, using the DOM you can do all manner of things but not only that you can do them without sprinkling inline javascript all over your pages as you can access the full contents of your page via external .js files and just link them as you do css.

I'm no expert and this is very basic stuff but it is one of the reasons why the use of both javascript and the DOM should be pushed big time; you can increase usability without compromising accessibility.

Pete.

Another point is that a lot of stuff that can be done with CSS really shouldn't. I love CSS Play but what Stu Nicholls is doing is pushing the boundaries of what can be done, he's not saying that you should do it that way. I love his image galleries but I would much rather layout the image gallery with css and then add things like hover effects, remote rollover effects and show/hide effects afterwards using JS. Some people will disagree but I prefer to do my presentational stuff with CSS and leave the behavioural features to JS. One big exception is text/nav rollovers. CSS support is so good and the solutions available so accessible that it makes sense to use CSS but other things seem over complex for me and are basically hacks as CSS was never meant for that sort of thing.

Pete.

I want to learn JS. But I look at the code and syntax and I just can't be bothered.
But I'm going to force myself to learn
Do you reckon I should start at w3schools? I like their tutorials but are they any better ones?
Thanks