JavaScript Beginner Tutorial: Steps to learn JavaScript

Source: Internet
Author: User
Tags object comments manual key mootools mozilla developer network

Article Introduction: finally undefined thank you for reading this article! Sincerely hope it will help you become a JavaScript enthusiast. If you are already familiar with JavaScript, you can recommend any other relevant resources in the comments.

It's a terrible thing to learn something new. For me, the biggest problem with mastering a new skill is that I don't know what I understand. In view of this, a plan to learn what you are interested in should be useful. The gist of this article is: The blueprint, route, and action plan you have developed for learning JavaScript! You don't have to worry about finding the best resources, sorting out the bad resources, and deciding what to learn next. Follow it, take it one step at a step. Task 0: Learn what JavaScript is


before you really start learning JavaScript, take a minute to find out what JavaScript is and what it does. JavaScript is not jquery, Flash, or Java. Unlike them, it is a stand-alone programming language. JavaScript is the browser language (although it is not entirely now). The main purpose is to add interactivity to static pages. In the browser, it won't change PHP or Ruby for you, nor will it alter your HTML or CSS; You can use them together. Plus, it's not as hard to learn as you think. Supplemental Note: You should have heard of jquery, which is probably the most widely used JavaScript library. Maybe you've heard of other popular JavaScript frameworks, such as Mootools,,yui,dojo and more. You can think of them as a JavaScript auxiliary toolset; When you use them, you're still writing JavaScript, but they're all abstract JavaScript. It will make you more effective. "You might even hear someone say you should learn jquery (or some other library) before you learn JavaScript." I have great respect for them but I totally disagree with this statement. Learn JavaScript first and then use other libraries, you will find that you will do better, and as a result, you will write better JavaScript. "

Task 1: Learn through the codecademy.com site course

Codecademy is a relatively new website whose advertising language is "the easiest way to encode". Currently, the site has only two courses, "primary programming" and "JavaScript Quick Start Guide". It's a good experience to immerse yourself in JavaScript. Very similar to Try Ruby practice, you'll learn a short course, code in a browser, and see the results. Get all the points and open the badge of achievement. (Ruby, a scripting language created for simple and quick object-oriented programming (object-oriented programming). If you are already familiar with another programming language, you may be able to learn the JavaScript QuickStart guide First, and if this is your initial programming (except HTML and CSS), you will find that the "primary programming" course is quite useful. Codecademy is a free website but needs to be registered.

Task 2:appendto Screen cutting method

The Appendto video has a screen-cutting method that is especially suitable for beginners. If you want to learn JavaScript in the right (easy) way, it's absolutely useful to learn these lessons. Visual training is always effective! "To upgrade our skills with the content and practical training solutions we offer." No registration, no bindings, no flicker. "

Task 3: Read a good manual about JavaScript

Once you've learned through the Codecademy, you'll want to get a detailed description of JavaScript-describe all types, operators, control schemas, and so on. If you can, let me introduce you to a few good instructions: "JavaScript Again" – This manual can be found on the Mozilla Developer Network, language justice. This book is rich in content, there are a lot of code examples and paragraphs introduced. "Eloquent JavaScript" – The book is written by Marijn Haverbeke and can be read online for free, if you want to get a hard copy to buy on the Amazon website. It is more detailed than the MDN description because it covers not only the JavaScript language, but also the coding style and the use of JavaScript in the browser. Of course, "eloquent" is not exaggerated. (Eloquent-eloquent, eloquent) "getting Good with JavaScript" – yes, I wrote the book, but I introduced it for another reason. It differs from the two instructions I introduced earlier, and in this book I only describe the parts that programmers need to quickly master programming skills. In addition, it comes with a screenshot of more than 6 hours, so you want to take a look. (This is not free, of course.) )

Task 4: Install, learn Firebug (or developer tools)

Once you start using JavaScript in your browser, you need to install Firebug and familiarize yourself with its performance. Firebug is a plug-in for Firefox that can help you create and debug Web pages: For Web developers, it's like a surgeon's scalpel. What if you don't use Firefox? Like Safari or Chrome? No problem: You can find built-in developer tools similar to Firebug. "You can open the Design tool panel in the MAC address bar by pressing the OPTION + command +i or by pressing the shortcut key control + Shift + I." "By opening the tools you choose, you can learn a lot by clicking on just one of the sites you like." Here are some resources to speed up your learning: the Firebugfirebug Web site and the css-tips of Wikipedia firebug illustrate the 10 reasons you should use Firebug on nettuts+. Firebug: from Leucorrhea to Black belt, tuts+ Marketplace website (http://marketplace.tutsplus.com/... o-black-belt/118795) design tools Web site Google I/O 2011: Browser Designer by Paul Irish Google Browser design tool: Paul Irish's quick development 12 tips

Task 5: Read a book about JavaScript

now that you are familiar with the basics, there is still a lot to learn. Although some of the books I recommend may cause you to ' go bankrupt ', you will find that I recommend 4 high quality books at any time:
The first two are general, more in-depth JavaScript resources that will allow you to get a deeper understanding from the introduction to the deep level; Of course, there are some overlapping explanations, but not many: it just makes you look comfortable. (Note: Although these books are available on the Amazon site, I have linked the publishers ' websites, so you can look at the sample chapters.) "JavaScript Advanced Programming"-written by Nicolas C. Zakas, which covers everything it can cover. If you've seen any of Zakas's works before, you'll find him a real genius. In addition to covering the JavaScript language, this book allows you to use JavaScript well in your browser. "JavaScript 24-hour Trainer" was compiled by Jeremy McPeak, who also wrote nettuts+. It's not just a book: It comes with a four-hour teaching CD. The book is a total of 43 classes, involving coding syntax guidance and code optimization. While these books are perfect for programmers to learn the JavaScript language and how to use them in a browser, there is no learning. Although these books do go into some patterns and practice, I recommend two books that I think are useful. 1 "JavaScript Patterns"-Stoyan Stefanov. I have just finished reading this book, I really hope to read it as soon as possible. After reading the resources above, you can learn how to write JavaScript, but this book will teach you how to restructure your resources, and this skill is important, not as simple as you might think. 2) "Javascript:the good Parts"-Douglas Crockford. This book introduces the pros and cons of JavaScript.

Task 6: do something!

after learning the above resources, you should have tried some code samples: modify the code, integrate the code to see what happens. But it's time to give yourself a break and do something. What can you do? You can do a lot of things. Here are some comments. 1 Photo gallery: Display a set of picture thumbnails and the main image. When the user clicks on the thumbnail, replace the current master image with a larger thumbnail (not the original thumbnail). If you can override the title of the thumbnail alt tag, reward the points, or do a picture loop when the user does not click in a minute. 2 to-do list: It sounds a bit hard, and I'm not going to recommend you to make a complete to-do list. Just make a text box and put a button next to it; When you click the button, the text you have entered becomes an item under an unordered list. Click on the list item to remove it. It sounds easy, but there are a few pitfalls that are good for beginners to think about. 3 Animation box: Animation is actually a trick, do not need to make too complex. Make a div that contains a little text and have several buttons on it. A button is used to adjust the width, one to adjust the height, and one to adjust the background color. The key is not to let the change happen too fast, but within a second. Remember, Google is your friend, especially if you haven't used JavaScript to do any animations so far. I'm sure you can think of other good practice plans. Of course, the only way to learn is to pull yourself out of your comfort zone. "In addition, at all skill levels, make sure that the JavaScript category has a large list of tutorials on nettuts+." (Nettuts is a Web site dedicated to providing tutorials on web development.) )

Task 7: Start learning how to use the JavaScript library

If you learn this, you'll realize that some JavaScript authoring tasks are hard (or simply not) implemented in a cross-browser fashion. The most likely violations are excessive dom manipulation, Ajax, and animation. That's why we need JavaScript libraries. As I mentioned earlier, the details of a JavaScript library are like the pain-relieving honey. Therefore, it is necessary to look at it now. There are a lot of libraries for you to choose from, and I'll let you decide which to start with. Whether it's jquery or Mootools,yui or dojo, their respective websites provide you with all the information you need to start learning. Try it if you feel you need it. The most popular library: although it is easy to get a large number of libraries, you should choose a popular-at least ranked first. JQuery Dojo YUI MooTools Prototype

Task 8: Follow the footsteps of the master

There are a lot of incredibly javascript geniuses who have been doing cool things that you don't want to miss. Thankfully, our workaholic Siddharth has got a list of 33 designers that you must subscribe to to be a JavaScript enthusiast. Drop the work at hand and subscribe/follow these designers. This is something that has to be done. But there are more things you can do. This fair site often publishes information about JavaScript, so don't go away. Also, focus on JavaScript show, one of the world's most recent podcasts on JavaScript. You may also want to sign up for a JavaScript weekly newsletter. Do you want more? Focus on tuts+marketplace JavaScript classes.
finally undefined thank you for reading this article! Sincerely hope it will help you become a JavaScript enthusiast. If you are already familiar with JavaScript, you can recommend any other relevant resources in the comments.


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.