...

View Full Version : Best way to learn javascript properly?



moneysharma
05-16-2012, 02:54 PM
I am just a beginner..can u please suggest me how to learn it properly..any book(must not be lengthy and complicated) or document.

Philip M
05-16-2012, 04:22 PM
I don't think that there are any Javascript books which are short and simple, which is what you are requesting. :) It is not a trivial subject, and the books are rather specialised with a limited market - hence expensive.

"Eloquent JavaScript" This book, by Marijn Haverbeke, is available freely online, but you can also get it on Amazon if youd like a hard copy.

There are many free resources on the web, not least this forum and Javascript Kit. W3Schools is mostly fine as well, although sometimes not entirely up-to-date. You could also consider www.lynda.com.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Peeyush
05-16-2012, 04:41 PM
i would suggest w3schools if you want to learn online. You can learn almost everything there, and if any doubts you can get help on these forums. These are several other online resources too, such as javascript kit. One thing i would suggest is dont start any big projects without proper knowledge of javascript and dom.

felgall
05-16-2012, 07:58 PM
i would suggest w3schools if you want to learn online.

The JavaScript taught at w3schools is mostly a history class on how JavaScript was written back in the 20th century. The two guys that run that site are trying to cover so many different topics on their site they haven't had time to keep them all up to date and JavaScript has changed so much over the past 15 years that what they have on their site for JavaScript is of historical interest only.

The other subjects they cover haven't changed anywhere near as much and so might be considered medieval rather than prehistoric.

Anyone suggesting w3schools as a place to learn JavaScript should consider learning JavaScript themselves.

Philip M
05-16-2012, 08:03 PM
Anyone suggesting w3schools as a place to learn JavaScript should consider learning JavaScript themselves.

I do not see why you say that. W3Schools is indeed somewhat dated, but it seems to me that it is fine for beginners. There is no point in trying to teach advanced concepts until the basics have been mastered. At that point the student can discover that there are sometimes better ways of doing things.

People who live in glass houses ....

http://javascriptexample.net/
Line: 95
Error: Unable to get value of the property 'form': object is null or undefined

rnd me
05-16-2012, 09:36 PM
I agree that w3schools does more harm than good.

It's harder to unlearn bad advice than it is to learn proper techniques in the first place.

i can't tell you how many terrible cut and pasted try/catch ajax routines from w3schools i've stumbled across, but if i had a nickel for each....

i think the only place worse than w3schools is sitepoint.

these sites are both misguided portrayals of seemingly decent learning material.

MDN's javascript (https://developer.mozilla.org/en/JavaScript) section is everything w3schools wants to be, but the best way to learn is by doing and teaching.

felgall
05-16-2012, 10:21 PM
I do not see why you say that. W3Schools is indeed somewhat dated, but it seems to me that it is fine for beginners. There is no point in trying to teach advanced concepts until the basics have been mastered.

I agree but there is also no point in teaching them obsolete commands that they then have to unlearn when there are just as simple ways to do it that they need to learn anyway. Why teach document.write or alert when innerHTML is just as simple to understand? Anyway pages that use document.write work completely differently from pages done properly.

Whe w3schools site was created and is maintained by just two people who got lucky with the domain name. There are lots of sites around that have a far more professional basis than that one - and more people per topic to maintain them.

innerHTML - a basic JavaScript command for use by beginners

document.write - a command where the only legitimate use now is in advanced JavaScript.

Therefore it is totally inappropriate to teach document.write to JavaScript beginners as it belongs in the advanced course.

The OP asked where they can learn JavaScript properly and you can't learn JavaScript properly from the w3schools site.

felgall
05-16-2012, 10:49 PM
i think the only place worse than w3schools is sitepoint.

The JavaScript reference at SitePoint is more of a detailedJavaScript DOM reference for intermediate to advanced JavaScript users. There isn't really aything there to actually teach JavaScript in the first place and many of the tings they cover are rather obscure and would seldom need to be used - exactly what you'd expect from an advanced reference and completely useless to beginners.

CodeAvengers
05-17-2012, 06:07 AM
go to http://codeavengers.com it's the best way to learn javascript

Peeyush
05-17-2012, 07:39 AM
You learn best from trial and error, and of course experience. i do not think that w3schools is a bad place to learn. Ofcourse when a person sees that using document.write() makes his whole page disappear, and everytime he uses alert, it consumes more time, he will simply move to innerHTML . But yes, if you want to learn javascript 'properlly' and that too using w3schools, then you might have to go in a lil detail, not going chapter wise.. and once the person masters the basics he will be able to understand examples then only, so javascriptexample.net shall not be good for total beginners, but for ones with atleast some basic knowledge. also just now i came across this website: http://www.codeavengers.com/ and it also seems okay to me.

Philip M
05-17-2012, 08:02 AM
go to http://codeavengers.com it's the best way to learn javascript

As lesson 1 is about using alert, felgall will not approve of that! :D

I think that you are much too dismissive of w3schools - as Voltaire remarked, "The best is the enemy of the good". document.write() is indeed quite obsolete, but what else at w3schools is inappropriate (at beginner level) or incorrect?

The beginner will wish to output/display some result almost from the very beginning of his studies. So long as he understands the limitations of document.write() I don't see why he has to be burdened by DOM methods at such an early stage. I think the fault is not document.write() as such but the failure of teachers to point out its severe limitations. I agree that this may well be because they are working from obsolete textbooks.

Peeyush
05-17-2012, 08:29 AM
Btw What software do you guys recommend is best for learning javascript? i think dreamweaver is quiet good as it provides syntax highlighting....
<offtopic class="Offtopic">

go to http://codeavengers.com it's the best way to learn javascript

code avengers' robot lesson (7th) is quite interesting and fun! :P

<offtopic class="totallyOfftopic">

Where to set up a signature? i searched forums, saw a thread or two but could not find. all i found was you need to have 5+posts and a member of forums since a week or so. i visited my profile page also but could not find it anywhere :(

</offtopic>
</offtopic>

CodeAvengers
05-17-2012, 08:31 AM
Btw What software do you guys recommend is best for learning javascript? i think dreamweaver is quiet good as it provides syntax highlighting....
<offtopic class="Offtopic">


code avengers' robot lesson (7th) is quite interesting and fun! :P

<offtopic class="totallyOfftopic">

Where to set up a signature? i searched forums, saw a thread or two but could not find. all i found was you need to have 5+posts and a member of forums since a week or so. i visited my profile page also but could not find it anywhere :(

</offtopic>
</offtopic>

Thanks, we appreciate that :)

Philip M
05-17-2012, 09:11 AM
Btw What software do you guys recommend is best for learning javascript? i think dreamweaver is quiet good as it provides syntax highlighting....



Aaarrrggghhhh! Dreamweaver is not highly thought of in this forum. :( It has received a lot of criticism from developers because of bloated and messy code created by its automatic coding engine. Dreamweaver will not help you to learn Javascript coding but it may help you cobble something together. Avoid it!

You set your signature by using your control panel and going to "Edit Signature".

Peeyush
05-17-2012, 09:30 AM
Aaarrrggghhhh! Dreamweaver is not highly thought of in this forum. :( It has received a lot of criticism from developers because of bloated and messy code created by its automatic coding engine. Dreamweaver will not help you to learn Javascript coding but it may help you cobble something together. Avoid it!

You set your signature by using your control panel and going to "Edit Signature".

Why do you guys dont like dreamweaver? :(

Anyways please tell me if there is any other software you suggest or know of which provides syntax highlighting, code hinting, live view for mainly JS, HTML and CSS and can provide a live view option so i can test my code as i code....

i liked notepad++ but it dosent highlight JS syntax very well... and i like dreamweaver because it has support for languages i know/work on such as HTML, XML, JS, CSS... and you can validate your code as you work, and preview it using live view... else you have to save it, then open in browser and test it, it takes up a lot of time. also i dont know why but my wamp dosent work and i am working with XML so i can preview it in dreamweaver or else i have to upload all files and then check....

Philip M
05-17-2012, 10:12 AM
Why do you guys dont like dreamweaver? :(



If your goal is to avoid learning some simple HTML and CSS in favor of tackling Dreamweaver, you might be taking on a massive task to avoid a small one! To be fair, coders can use Dreamweaver too, but Im not alone in thinking that its much easier, faster and cleaner to simply code by hand. You will be a much better programmer if you do that! :thumbsup:

felgall
05-17-2012, 10:23 AM
ITo be fair, coders can use Dreamweaver too, but I’m not alone in thinking that it’s much easier, faster and cleaner to simply code by hand.

Most of the professionals that I know of who use Dreamweaver use the codeview option to code all their pages by hand. They only use the alternative view for getting an approximate idea of how their page will look.

One alternative that does a reasonable job of colour coding HTML, CSS JavaScript etc and which also has an HTML validator built in is called "CSE HTML Validator Lite". It is a free download and is primarily a plain text editor with colour coding based on the file type and a validate button at the top so that you can check and fix most of the errors in your code without having to go online. The errors it misses would be the same ones the online W3C validator misses such as checking that input tags are not direct children of the form tag and have an appropriate block level tag such as div or fieldset in between.

For a partial list of some of the things wrong with the w3schools web site see http://w3fools.com/

Peeyush
05-17-2012, 10:27 AM
What about JS? i also preferr notepad++ for HTML and CSS as it is only syntax highlighting, it tells you where you are wrong, but does not tell you what are you doing wrong or correct you, etc... but when it comes to JS, notepad++ does not support syntax highlighting in JS and unfortunately i dont have knowledge of any other software which does except for dreamweaver... what do you think of DW for JS editing?...

felgall
05-17-2012, 11:02 AM
what do you think of DW for JS editing?...

Judging by the garbage it generates that it claims is JavaScript I'd say it is probably the worst possible choice you could make.

low tech
05-17-2012, 11:06 AM
Hi


#Peeyush
but when it comes to JS, notepad++ does not support syntax highlighting in JS

Absolutely not true.

I use notepad++ for javascript and php and it has excellent syntax highlighting for both. Loads of other language options available.

You can set the colors you prefer and the font size. Make your settings via preferences and the style configurator. Turn on highlighting options in preferences and in MISC.

You can also make notepad++ dreamweaver's default editor if you wish.

Too many options to mention.

You obviously have not got it configured properly.

LT

Philip M
05-17-2012, 11:11 AM
For a partial list of some of the things wrong with the w3schools web site see http://w3fools.com/

w3Fools.com states "Professional web developers do not recommend the use of WYSIWYG editors." :D

There are indeed many imperfections in w3schools - but as I say, "the best is the enemy of the good" and the strident tone of w3fools.com makes me suspect that it is written by balanced people carrying a chip on both shoulders. I am not impressed by the statement "An oft-repeated mantra (and a critique we've already received) is that you shouldn't criticise something unless you're willing to put your money where your mouth is and build something better. It's an admirable ethos, but not really applicable here." Far too dismissive. The sort of lame and evasive thing bull**t might say!

There is no way that you are going to become a Javascript expert overnight. Like a spoken language, it takes many years of constant practice to become fluent. In the early days you will make ludicrous mistakes. Mistakes by students should be corrected - but not vilified or castigated. We were all beginners once. The world will not come to an end if some learner uses document.write().

"A man would do nothing, if he waited until he could do it so well that no one at all would find fault with what he has done." - Cardinal Newman

“A man ceases to be a beginner in any given science and becomes a master in that science when he has
learned that he is going to be a beginner all his life.” Robin G. Collingwood (English Philosopher, 1889-1943)

Peeyush
05-17-2012, 11:19 AM
Hi



Absolutely not true.

I use notepad++ for javascript and php and it has excellent syntax highlighting for both. Loads of other language options available.

You can set the colors you prefer and the font size. Make your settings via preferences and the style configurator. Turn on highlighting options in preferences and in MISC.

You can also make notepad++ dreamweaver's default editor if you wish.

Too many options to mention.

You obviously have not got it configured properly.

LT

i turned on all 3 options in highlighting section in misc. are you talking of comment highlighting and it sets the color of content between quotes as grey and it colors var and if and else commands as blue? is there more than what i stated just now??

low tech
05-17-2012, 11:47 AM
@peeyush

notepad++


Go
settings

style configurator (you can also select themes here if you into that)

choose language (javascript, PHP etc)

then select what to style

style:
default
number
word
keyword
doublestring
etc etc etc

make sure you understand what the color choices mean
ie my leywords are in orange bold italic and font size 12.


-----------
also might be of interest

preferences

backup auto completion

I have these 'checked'
1) enable auto-completion on input
2) and function completion
3) and function parameters hint on input

LT

not sure if any of that helps

Peeyush
05-17-2012, 12:03 PM
@low tech

thanks dude. just what i wanted :P btw ironically their 'twillight' theme is real good (Y) and yeah i had auto completion enabled

low tech
05-17-2012, 12:25 PM
@peeyush

yep some cool themes

I set my own colors --- and a larger font size because it makes it easier to read code and to spot missing , ; as well as typos etc etc.


One last thing

style configurator

language--> global styles

style--> whatever

Make fine tune adjustments here

LT
good luck

marqui678
05-17-2012, 01:02 PM
"Eloquent JavaScript" This book, by Marijn Haverbeke, is available freely online, but you can also get it on Amazon if youd like a hard copy.


All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Thank you, this a valuable piece of information.

felgall
05-17-2012, 08:38 PM
There is no way that you are going to become a Javascript expert overnight. Like a spoken language, it takes many years of constant practice to become fluent. In the early days you will make ludicrous mistakes. Mistakes by students should be corrected - but not vilified or castigated. We were all beginners once. The world will not come to an end if some learner uses document.write().

That they used document.write is fairly likely to be related to the problem they are asking about though. I'd say that close to half of the problems that JavaScript beginners ask for help with are caused by their using inappropriate commands such as document.write. Not that using innerHTML is trouble free but it has far fewer issues and is no harder for beginners to use (given that they are not being taught how either statement actually works at that point in the course - they are just presented with them as a way to interact with the page). The list of situations where innerHTML doesn't work is far shorter than that for document.write so beginners are far less likely to run into those problems and the command is as simple for them to use.

With over 35 years of programming experience, over 12 years of using JavaScript and eight years of teaching JavaScript (both online and in the classroom) I have seen all the types of issues that JavaScript beginners can have when they are taught the wrong commands without being taught all of the issues associated with those commands so as to know when not to use them. In the case of document.write there are issues with using it in any script that is directly attached to a web page and so it should only ever be used in JavaScript not attached to web pages. There are just as simple solutions without all the issues when it comes to using JavaScript within the web page.

Also it is far easier to teach students the right way to do things from the start rather than them having to unlearn something. While there are better ways of interacting with a web page than using innerHTML, they are only better in certain situations so it isn't necessary to unlearn innerHTML the way it would be to unlearn document.write.

The best way to attach JavaScript to a web page is to place it entirely in an external script attached to the very bottom of the web page. While you can't expect all beginners to put all their JavaScript in an external file from the start you can at least start them off with placing what JavaScript that they don't have embedded in HTML tags in a script at the bottom of the page - as long as they are not using document.write. By giving then a cross browser function for attaching events properly at the point in the beginners course where events are first covered you provide them with a way to put all their JavaScript at the bottom instead of cluttering up their HTML.

It takes just as long if not longer to teach someone who thinks they already "know" JavaScript to get them to the point where they can code properly at a beginner level (with the JavaScript separate from the HTML) as it does to teach someone who hasn't written any JavaScript at all before. Teaching them to not use the commands that they shouldn't be using adds significantly to the time it takes to teach javaScript properly.

It isn't the fault of the beginner that they have learnt all those wrong ways to write JavaScript. It is the fault of those who are still teaching JavaScript history as if it were a programming class. Many of those teaching JavaScript really ought to consider taking a beginners JavaScript course themselves so as to unlearn all the obsolete and bad coding methods that they are continuing to teach others.

JavaScript has changed significantly over the years. If you look at the pages I wrote for javascript.about.com during the seven years that I provided content for that site you will find four different series of articles teaching JavaScript for beginners with each using a different approach as JavaScript developed and the browsers that required the older approach died out. The first series did use document.write because Netscape 4 was still relatively popular when it was written and that browser didn't understand any of the alternatives. The second version used alert instead for the initial outputs - that was back before browsers started adding checkboxes to it to make it a more user friendly debugging tool and also only some browsers supported innerHTML at that time. The last two series both use innerHTML as the way they teach beginners to interact with the page (one difference with my latest course is that I realised that it is just as easy to teach how to attach events from within JavaScript by placing an id on the tag instead of cluttering the HTML with any JavaScript at all).

Peeyush
05-18-2012, 06:00 AM
^^ woa man thats too long to read. btw you have 8 years JS teaching xperience - nice (y)

EDIT:

btw w3schools does have some Note: (s)

Note: The entire HTML page will be overwritten if document.write() is used inside a function:

Note: The JavaScript is placed at the bottom of the page to make sure it is not executed before the <p> element is created.

and they have introduced innerHTML method at chapter 5

and i also remember when I started learnin JS from w3schools, there was one more warning like

The entire HTML page will be overwritten if document.write() is used, but you will see the use of this in our examples as its easier to demonstrate examples using document.write()

^^something like that

rnd me
05-18-2012, 05:04 PM
if i were starting out just now, i would pretend that IE7 doesn't exist. by the time i learned the language, IE7 would be gone completely.

If you are reading something and it uses the phrase "cross-browser", read something else. don't double-learn half as much stuff like i had to "back in the day"...

mrwwalmsley
06-01-2012, 12:08 PM
I am the CodeAvengers.com creator.


As lesson 1 is about using alert, felgall will not approve of that! :D


He admitted himself that he originally use alerts on his site in his early examples... but not anymore. I think it ain't any worse than document.write().

I know you would not use them in production apps/sites but system alerts, prompts can be good testing/debugging tools... so why not teach them up front? I found learners related to them easier than printing stuff in a console.

My goal was to have learners read as few words of text before they start coding!! Hence I went with alerts in the first lesson.

Also I agree about w3schools not being any worse than most other sites. Ok maybe moz dev has less minor errors, but moz dev certainly ain't for beginners. I got great use out of w3schools 3 years ago when I was revising html and learning Javascript.

But the reason I created CodeAvengers was people I talked to just found w3schools and other sites a bit boring. So I had a go at trying to create something fun... It is not that easy and takes a lot of work! I now have an even greater respect for the guys that created w3schools and other similar sites.

felgall
06-01-2012, 08:30 PM
He admitted himself that he originally use alerts on his site in his early examples... but not anymore. I think it ain't any worse than document.write().

document.write became an obsolete JavaScript command (apart from specialised use in userscripts) when Netscape 4 died - after that there was no reason whatever for document.write to be used in web pages since it is OBTRUSIVE and there are far better alternatives that are unobtrusive - such as innerHTML. So I stopped using document.write in my beginner tutorials in 2006 when Netscape 4 died and started using alert instead.

When browsers started adding extra options into alert to make it easier to use it for debugging it became inappropriate to use it in live web pages. In about 2009 I wrote the third version of my tutorials for learning JavaScript using innerHTML in place of alert. The use of alert for anything at all has become obsolete now that all browsers except Firefox have a built in debugger - and Firefox offers multiple debugger extensions such as Venkmann and Firebug to give you more choice as to how you want the debugger to work. So alert really has even less uses than document.write - with no uses whatsoever why even mention it - apart from telling people that it used to be a useful JavaScript command before it was completely replaced by better ones.

The biggest problem with the W3Schools web site is that the two guys who run it have not taken all the changes to the way JavaScript can be written into account in their updates. They have added the new commands but the old examples are still the same old OBTRUSIVE 20th Century code they started with. Anyone learning JavaScript now from W3Schools needs to take another JavaScript class to UNLEARN all the history that the site taught them that they have mistaken for how to code. The site simply covers too many different subjects for two people to maintain it properly in their spare time so it's no surprise that the subjects that have undergone lots of changes now show history lessons rather than coding lessons. The more people who keep learning JavaScript from that site, the more antiquated JavaScript keeps appearing on the web written by people who think they know JavaScript but don't - because if they did they wouldn't be writing such antiquated error prone code.

Of course W3Schools isn't the only place mistakenly teaching the history of JavaScript because the teachers themselves haven't learnt how to write modern JavaScript. The vast majority of beginner questions clearly demonstrate that they are being taught JavaScript history because most of the problems they have can't occur in modern JavaScript.

felgall
06-01-2012, 08:41 PM
He admitted himself that he originally use alerts on his site in his early examples... but not anymore. I think it ain't any worse than document.write().

document.write became an obsolete JavaScript command (apart from specialised use in userscripts) when Netscape 4 died - after that there was no reason whatever for document.write to be used in web pages since it is OBTRUSIVE and there are far better alternatives that are unobtrusive - such as innerHTML. So I stopped using document.write in my beginner tutorials in 2006 when Netscape 4 died and started using alert instead.

When browsers started adding extra options into alert to make it easier to use it for debugging it became inappropriate to use it in live web pages. In about 2009 I wrote the third version of my tutorials for learning JavaScript using innerHTML in place of alert. The use of alert for anything at all has become obsolete now that all browsers except Firefox have a built in debugger - and Firefox offers multiple debugger extensions such as Venkmann and Firebug to give you more choice as to how you want the debugger to work. So alert really has even less uses than document.write - with no uses whatsoever why even mention it - apart from telling people that it used to be a useful JavaScript command before it was completely replaced by better ones.

The biggest problem with the W3Schools web site is that the two guys who run it have not taken all the changes to the way JavaScript can be written into account in their updates. They have added the new commands but the old examples are still the same old OBTRUSIVE 20th Century code they started with. Anyone learning JavaScript now from W3Schools needs to take another JavaScript class to UNLEARN all the history that the site taught them that they have mistaken for how to code. The site simply covers too many different subjects for two people to maintain it properly in their spare time so it's no surprise that the subjects that have undergone lots of changes now show history lessons rather than coding lessons.

So yes document.write was a part of my 2004 learn JavaScript course and alert was in both the 2004 and 2006 courses - but both had gone by the time I wrote the third version of the course in 2009 and in the current fourth version they only appear in the "bad bits" section where there are explanations of why they should no longer be used.

Philip M
06-02-2012, 08:28 AM
I think that everyone would agree that document.write(), alert() and prompt() are obsolete and ought not to be used in a live site. But they still have their uses for simple demonstartion and teaching purposes as in this forum. There are many disciplines where the student is initially taught a simple way to a achieve something (without introducing too many complications at once), and it is explained later on that better/more effective methods exist which would be used by experts/professionals. If I were teaching physics I would not start with quantum field theory.

Personally, I think that too much is made of the concept of obtrusiveness, especially for students. There is a big difference between a complex site involving several/many programmers and the simpler applications more usually discussed here.

felgall
06-02-2012, 09:17 AM
At least one in ten newbie questions relates to their being unable to get two scripts to run in the same page - simply because the scripts they are using are obtrusive enough to conflict with one another.

Newbies commonly want to add lots of scripts to the one page and so using unobtrusive scripts is far more important for them than it is for more professional sites that limit their use of JavaScript.

Also if the script is obtrusive then it is more likely to result in a broken page for those with JavaScript disabled.

Anyway it takes about five minutes longer to teach beginners how to write unobtrusive code than it does to teach them the antiquated obtrusive way. It takes far longer to convince beginners not to use the antiquated code any more and to use the more modern less obtrusive equivalents - often many years.

Philip M
06-02-2012, 09:34 AM
At least one in ten newbie questions relates to their being unable to get two scripts to run in the same page - simply because the scripts they are using are obtrusive enough to conflict with one another.


Yes, but they did not write the scripts! In my experience the most common reason why two scripts will not run on the same page is multiple onload statements. That is easily rectified.

felgall
06-02-2012, 10:38 PM
In my experience the most common reason why two scripts will not run on the same page is multiple onload statements. That is easily rectified.

Yes that is often the cause and it is easily rectified in most cases by moving the script tag and deleting the onload references completely.

The problem is that the scripts they are using are either really old ones OR have been written by others who are not far in advance of them in learning JavaScript and who have not had that five minute lesson on how to write unobtrusive scripts.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum