SlideShare a Scribd company logo
The Best Way to Learn JavaScript
http://net.tutsplus.com/tutorials/javascript-ajax/the-best-way-to-learn-javascript/
Learning something new is scary. For me, the biggest issue with picking up a new skill is that I don’t know what I don’t know. Given that, it’s often useful to find a plan for learning whatever you’re interested in.
That’s what this post is: your blueprint, your roadmap, your plan of action for learning JavaScript! You don’t have to worry about finding the best resources, sorting out the bad ones, and figuring out what to learn next. It’s all here.
Assignment 0: Understand what JavaScript Is and Isn’t
JavaScript is the language of the browser (not exclusively these days, though).  It’s primary purpose is to add interactivity to an otherwise static page.  In the browser, it’s not going to replace PHP or Ruby for you.  It’s not even going to replace your HTML or CSS; you’ll use it in conjunction to them. 
you’ve heard about jQuery, which is probably the most widely-used JavaScript library. Or maybe you’ve heard about one of the other popular JavaScript frameworks, like Mootools, YUI, Dojo, and others.   Consider them a collection of JavaScript helper utilities
Assignment 1: Work Through the Courses at Codecademy.com
Codecademy  is a relatively new website that bills itself as “the easiest way to learn how to code.”
Assignment 2: AppendTo’s  Screencasts
http://learn.appendto.com/
Assignment 3: Read A Good JavaScript Introduction
A Re-introduction to JavaScript  – This introduction is on the Mozilla Developers Network, and certainly does the language justice. It’s a dense work, with almost as many code examples as paragraphs. Eloquent JavaScript  – This book, by Marijn Haverbeke, is available freely online, but you can also get it on Amazon if you’d like a hard copy. It goes beyond the MDN intro, because it covers not only the JavaScript language, but also coding style and using JavaScript in the browser. Also, “eloquent” isn’t an overstatement. Getting Good with JavaScript  – Okay, yes, this is my own book, but there’s another reason I’m including it here. It’s really pretty different from the other two intros I’ve listed here; I only cover what you’ll need to know to get up and running as quickly as possible. Also, it comes with over 6 hours of screencasts, so if that you’re thing, check it out. (And yes, this one costs.)
Assignment 4: Install and Learn Firebug (or the Developer Tools)
Firebug Firebug website and wiki Introduction to Firebug  on  CSS-Tricks 10 Reasons Why You Should Be Using Firebug  here on Nettuts+. Firebug: White to Black Belt  by me, on the Tuts+ Marketplace. Developer Tools Developer tools website Google I/O 2011: Chrome Dev Tools Reloaded  by Paul Irish Google Chrome Developer Tools: 12 Tricks to Develop Quicker  by Paul Irish
Assignment 5: Read a Book
Professional JavaScript for Web Developers  – Written by Nicolas C. Zakas, this book could hardly cover more than it does. If you’ve seen any of Zakas’ work before, you’ll know he’s incredibly thorough. Besides covering the JavaScript language, this book will give you a good handle on using JavaScript in the browser. JavaScript 24-hour Trainer  – This awesome resource was put together by  Jeremy McPeak , who writes for Nettuts+ as well. It’s not just a book: it comes with over 4 hours of video tutorials on DVD. There are 43 lessons, covering everything from syntax to coding guidelines and code optimization. JavaScript Patterns  – Written by Stoyan Stefanov. I just finished reading this book, and, boy, do I wish I had read it sooner. After reading the resources above, you’ll know how to write JavaScript, but this book will teach you how to organize it, an important skill that isn’t as common as you’d think. JavaScript: The Good Parts  – Written by Douglas Crockford. This little gem will explain what’s good and what’s bad about the JavaScript language.
Assignment 6: Build Something!
A Photo Gallery : Display a set of photo thumbnails and a main photo. When a user clicks a thumbnail, have the larger version of the thumbnail (not the thumbnail itself) replace the current main photo. Bonus points if you can overlay a caption coming from the thumbnail alt tag, or loop through the photos if the user hasn’t clicked one for a minute. A To-do List : This might sound tougher than it is; but I’m not suggesting you build a full-fledged to-do application. Just have a text box with a button beside it; when you click the button, the entered text becomes an item in an unordered list below. Clicking on a list item removes it. It sounds simple enough, but there are several gotchas that it will be good for you to think about as a beginner. An Animating Box : Animation is always tricky, but it doesn’t have to be complex. Have a div with some text in it, and several buttons above. One button can adjust the width; one, the height; and one, the background colour. The key is not to have the changes happen immediately, but over the course of, say, a second. Remember, Google is your friend, especially if you haven’t done any animation in JavaScript thus far.
Assignment 7:Begin Learning a JavaScript Library
jQuery Dojo YUI MooTools Prototype
Assignment 8: Keep up with the Masters
33 Developers you MUST Subscribe to as a JavaScript Junkie   http://javascriptshow.com/
John Resig   Find his musings on JavaScript at his  blog . Creator of the  jQuery library ,  Sizzle  selector engine and the  JavaScript port  of  Processing . Author of  Pro JavaScript Techniques  and  JavaScript Secrets . Works at Mozilla. Tweets at  @jeresig
Douglas Crockford   Find his musings on JavaScript at his  blog . Author of  JavaScript: The Good Parts Popularized  JSON . Works at Yahoo. Lectures on JavaScript
Brendan Eich   Find his musings on JavaScript at his  blog . Inventor of the  JavaScript language . Works at Mozilla. Remember to check out his  podcast , as well. Tweets at  @BrendanEich

More Related Content

What's hot (19)

PDF
Java script basics for beginners
Ketan Raval
 
PPTX
Mob Testing
Maaret Pyhäjärvi
 
DOCX
Question 6 - Draft
benpainter221
 
PPTX
What have you learnt about technologies from the process of constructing this...
chloe-rhodes
 
PPTX
Drupal Block Test Module - Diner with Drupal
taccie
 
DOCX
What have you learnt about technologies from the process of constructing this...
chalk94
 
PPTX
Session on mockups
Abdul Dibosh
 
PPTX
Evaluation 6
andrew_boardy
 
PPTX
Q6 media
saraavra
 
PPTX
Evaluation – question 6
deanna_rose
 
PPT
Question 6
guest128bb5
 
PPTX
Question 6
jasminealleyne
 
PDF
Spaghetti gate
Jon Bachelor
 
DOC
Technology evaluation 6
sophiewagstaff
 
PDF
Testbash Philly: A Mob Testing Experience
Maaret Pyhäjärvi
 
PPT
Isotope
Sayed Ahmed
 
PPTX
Media 6
guest016d19
 
PPTX
5
oluus
 
Java script basics for beginners
Ketan Raval
 
Mob Testing
Maaret Pyhäjärvi
 
Question 6 - Draft
benpainter221
 
What have you learnt about technologies from the process of constructing this...
chloe-rhodes
 
Drupal Block Test Module - Diner with Drupal
taccie
 
What have you learnt about technologies from the process of constructing this...
chalk94
 
Session on mockups
Abdul Dibosh
 
Evaluation 6
andrew_boardy
 
Q6 media
saraavra
 
Evaluation – question 6
deanna_rose
 
Question 6
guest128bb5
 
Question 6
jasminealleyne
 
Spaghetti gate
Jon Bachelor
 
Technology evaluation 6
sophiewagstaff
 
Testbash Philly: A Mob Testing Experience
Maaret Pyhäjärvi
 
Isotope
Sayed Ahmed
 
Media 6
guest016d19
 

Similar to The best way to learn java script (20)

PPTX
Resources for Learning JavaScript
Leora Wenger
 
PPTX
Learning About JavaScript (…and its little buddy, JQuery!)
Julie Meloni
 
PPT
JavaScript Workshop
Pamela Fox
 
PPTX
00 JavaScript Part 1 Course - Introduction
Tommy Vercety
 
PPTX
Monster JavaScript Course - 50+ projects and applications
Laurence Svekis ✔
 
PPTX
Coding 101: A hands-on introduction
Bohyun Kim
 
PPTX
JavaScript lesson 1.pptx
MuqaddarNiazi1
 
PDF
Java script core
Vaishnu Vaishu
 
PPTX
Javascript note for engineering notes.pptx
engineeradda55
 
PDF
15 Experts on the Art of JavaScript Programming
FusionCharts
 
PDF
Js basics
TranTom1
 
PDF
Intro to javascript (6:27)
David Coulter
 
ODP
Projects In JavaScript And JQuery | Eduonix
Rakhi Lambha
 
PPT
Applied component i unit 2
Pramod Redekar
 
PPTX
Introduction to react js
MunirMahmud3
 
PDF
Thinkful - Intro to JavaScript
TJ Stalcup
 
PDF
4 websites for learning javascript, j query, python, html, and css help des...
Trường Tiền
 
PDF
4 websites for learning javascript, j query, python, html, and css help des...
Trường Tiền
 
PDF
Intro to javascript (6:19)
Thinkful
 
Resources for Learning JavaScript
Leora Wenger
 
Learning About JavaScript (…and its little buddy, JQuery!)
Julie Meloni
 
JavaScript Workshop
Pamela Fox
 
00 JavaScript Part 1 Course - Introduction
Tommy Vercety
 
Monster JavaScript Course - 50+ projects and applications
Laurence Svekis ✔
 
Coding 101: A hands-on introduction
Bohyun Kim
 
JavaScript lesson 1.pptx
MuqaddarNiazi1
 
Java script core
Vaishnu Vaishu
 
Javascript note for engineering notes.pptx
engineeradda55
 
15 Experts on the Art of JavaScript Programming
FusionCharts
 
Js basics
TranTom1
 
Intro to javascript (6:27)
David Coulter
 
Projects In JavaScript And JQuery | Eduonix
Rakhi Lambha
 
Applied component i unit 2
Pramod Redekar
 
Introduction to react js
MunirMahmud3
 
Thinkful - Intro to JavaScript
TJ Stalcup
 
4 websites for learning javascript, j query, python, html, and css help des...
Trường Tiền
 
4 websites for learning javascript, j query, python, html, and css help des...
Trường Tiền
 
Intro to javascript (6:19)
Thinkful
 
Ad

More from Wei Sun (20)

PPT
Using google appengine_final2
Wei Sun
 
PPT
Using google appengine_final
Wei Sun
 
PPT
Using google appengine_1027
Wei Sun
 
PPT
Using google appengine (2)
Wei Sun
 
PPT
Python with dot net and vs2010
Wei Sun
 
PPTX
Gc algorithm inside_dot_net
Wei Sun
 
PPT
Code review
Wei Sun
 
PPT
Windbg dot net_clr2
Wei Sun
 
PPT
Asynchronous in dot net4
Wei Sun
 
PPT
Code quality
Wei Sun
 
PPT
Visual studio 11 developer preview
Wei Sun
 
PDF
Using google appengine
Wei Sun
 
DOC
老友记
Wei Sun
 
DOC
Lua gc代码
Wei Sun
 
PPT
Windbg dot net_clr2
Wei Sun
 
PPT
Dotnetintroduce 100324201546-phpapp02
Wei Sun
 
PPT
Code rule
Wei Sun
 
PDF
Web development overview
Wei Sun
 
PPT
Lua
Wei Sun
 
PPT
DotNet Introduction
Wei Sun
 
Using google appengine_final2
Wei Sun
 
Using google appengine_final
Wei Sun
 
Using google appengine_1027
Wei Sun
 
Using google appengine (2)
Wei Sun
 
Python with dot net and vs2010
Wei Sun
 
Gc algorithm inside_dot_net
Wei Sun
 
Code review
Wei Sun
 
Windbg dot net_clr2
Wei Sun
 
Asynchronous in dot net4
Wei Sun
 
Code quality
Wei Sun
 
Visual studio 11 developer preview
Wei Sun
 
Using google appengine
Wei Sun
 
老友记
Wei Sun
 
Lua gc代码
Wei Sun
 
Windbg dot net_clr2
Wei Sun
 
Dotnetintroduce 100324201546-phpapp02
Wei Sun
 
Code rule
Wei Sun
 
Web development overview
Wei Sun
 
Lua
Wei Sun
 
DotNet Introduction
Wei Sun
 
Ad

Recently uploaded (20)

PDF
Building Real-Time Digital Twins with IBM Maximo & ArcGIS Indoors
Safe Software
 
PDF
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
PPTX
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
PDF
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
PPTX
Mastering ODC + Okta Configuration - Chennai OSUG
HathiMaryA
 
PDF
How do you fast track Agentic automation use cases discovery?
DianaGray10
 
PPTX
Designing_the_Future_AI_Driven_Product_Experiences_Across_Devices.pptx
presentifyai
 
PDF
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
PPTX
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
PDF
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
PDF
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
PDF
Jak MŚP w Europie Środkowo-Wschodniej odnajdują się w świecie AI
dominikamizerska1
 
PDF
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
PDF
"AI Transformation: Directions and Challenges", Pavlo Shaternik
Fwdays
 
PPTX
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
PDF
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
PDF
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
PDF
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
PPTX
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
PDF
Smart Trailers 2025 Update with History and Overview
Paul Menig
 
Building Real-Time Digital Twins with IBM Maximo & ArcGIS Indoors
Safe Software
 
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
Mastering ODC + Okta Configuration - Chennai OSUG
HathiMaryA
 
How do you fast track Agentic automation use cases discovery?
DianaGray10
 
Designing_the_Future_AI_Driven_Product_Experiences_Across_Devices.pptx
presentifyai
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
Jak MŚP w Europie Środkowo-Wschodniej odnajdują się w świecie AI
dominikamizerska1
 
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
"AI Transformation: Directions and Challenges", Pavlo Shaternik
Fwdays
 
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
Smart Trailers 2025 Update with History and Overview
Paul Menig
 

The best way to learn java script

  • 1. The Best Way to Learn JavaScript
  • 3. Learning something new is scary. For me, the biggest issue with picking up a new skill is that I don’t know what I don’t know. Given that, it’s often useful to find a plan for learning whatever you’re interested in.
  • 4. That’s what this post is: your blueprint, your roadmap, your plan of action for learning JavaScript! You don’t have to worry about finding the best resources, sorting out the bad ones, and figuring out what to learn next. It’s all here.
  • 5. Assignment 0: Understand what JavaScript Is and Isn’t
  • 6. JavaScript is the language of the browser (not exclusively these days, though). It’s primary purpose is to add interactivity to an otherwise static page. In the browser, it’s not going to replace PHP or Ruby for you. It’s not even going to replace your HTML or CSS; you’ll use it in conjunction to them. 
  • 7. you’ve heard about jQuery, which is probably the most widely-used JavaScript library. Or maybe you’ve heard about one of the other popular JavaScript frameworks, like Mootools, YUI, Dojo, and others.  Consider them a collection of JavaScript helper utilities
  • 8. Assignment 1: Work Through the Courses at Codecademy.com
  • 9. Codecademy  is a relatively new website that bills itself as “the easiest way to learn how to code.”
  • 12. Assignment 3: Read A Good JavaScript Introduction
  • 13. A Re-introduction to JavaScript  – This introduction is on the Mozilla Developers Network, and certainly does the language justice. It’s a dense work, with almost as many code examples as paragraphs. Eloquent JavaScript  – This book, by Marijn Haverbeke, is available freely online, but you can also get it on Amazon if you’d like a hard copy. It goes beyond the MDN intro, because it covers not only the JavaScript language, but also coding style and using JavaScript in the browser. Also, “eloquent” isn’t an overstatement. Getting Good with JavaScript  – Okay, yes, this is my own book, but there’s another reason I’m including it here. It’s really pretty different from the other two intros I’ve listed here; I only cover what you’ll need to know to get up and running as quickly as possible. Also, it comes with over 6 hours of screencasts, so if that you’re thing, check it out. (And yes, this one costs.)
  • 14. Assignment 4: Install and Learn Firebug (or the Developer Tools)
  • 15. Firebug Firebug website and wiki Introduction to Firebug  on  CSS-Tricks 10 Reasons Why You Should Be Using Firebug  here on Nettuts+. Firebug: White to Black Belt  by me, on the Tuts+ Marketplace. Developer Tools Developer tools website Google I/O 2011: Chrome Dev Tools Reloaded  by Paul Irish Google Chrome Developer Tools: 12 Tricks to Develop Quicker  by Paul Irish
  • 17. Professional JavaScript for Web Developers  – Written by Nicolas C. Zakas, this book could hardly cover more than it does. If you’ve seen any of Zakas’ work before, you’ll know he’s incredibly thorough. Besides covering the JavaScript language, this book will give you a good handle on using JavaScript in the browser. JavaScript 24-hour Trainer  – This awesome resource was put together by  Jeremy McPeak , who writes for Nettuts+ as well. It’s not just a book: it comes with over 4 hours of video tutorials on DVD. There are 43 lessons, covering everything from syntax to coding guidelines and code optimization. JavaScript Patterns  – Written by Stoyan Stefanov. I just finished reading this book, and, boy, do I wish I had read it sooner. After reading the resources above, you’ll know how to write JavaScript, but this book will teach you how to organize it, an important skill that isn’t as common as you’d think. JavaScript: The Good Parts  – Written by Douglas Crockford. This little gem will explain what’s good and what’s bad about the JavaScript language.
  • 19. A Photo Gallery : Display a set of photo thumbnails and a main photo. When a user clicks a thumbnail, have the larger version of the thumbnail (not the thumbnail itself) replace the current main photo. Bonus points if you can overlay a caption coming from the thumbnail alt tag, or loop through the photos if the user hasn’t clicked one for a minute. A To-do List : This might sound tougher than it is; but I’m not suggesting you build a full-fledged to-do application. Just have a text box with a button beside it; when you click the button, the entered text becomes an item in an unordered list below. Clicking on a list item removes it. It sounds simple enough, but there are several gotchas that it will be good for you to think about as a beginner. An Animating Box : Animation is always tricky, but it doesn’t have to be complex. Have a div with some text in it, and several buttons above. One button can adjust the width; one, the height; and one, the background colour. The key is not to have the changes happen immediately, but over the course of, say, a second. Remember, Google is your friend, especially if you haven’t done any animation in JavaScript thus far.
  • 20. Assignment 7:Begin Learning a JavaScript Library
  • 21. jQuery Dojo YUI MooTools Prototype
  • 22. Assignment 8: Keep up with the Masters
  • 23. 33 Developers you MUST Subscribe to as a JavaScript Junkie http://javascriptshow.com/
  • 24. John Resig Find his musings on JavaScript at his  blog . Creator of the  jQuery library ,  Sizzle  selector engine and the  JavaScript port  of  Processing . Author of  Pro JavaScript Techniques  and  JavaScript Secrets . Works at Mozilla. Tweets at  @jeresig
  • 25. Douglas Crockford Find his musings on JavaScript at his  blog . Author of  JavaScript: The Good Parts Popularized  JSON . Works at Yahoo. Lectures on JavaScript
  • 26. Brendan Eich Find his musings on JavaScript at his  blog . Inventor of the  JavaScript language . Works at Mozilla. Remember to check out his  podcast , as well. Tweets at  @BrendanEich