Using Webstorm Effectively to Learn Javascript Properly

Using Webstorm Effectively to Learn Javascript Properly

Posted by paul on 2013.11.07

Using Webstorm Effectively to Learn Javascript Properly

This blog will explain how you can use WebStorm effectively to Learn JavaScript Properly. If you haven’t, I suggest that you read 1st part of this series, Bitbucket, WebStorm and Learning Javascript Properly, which explains how to use BitBucket/SmartGit/WebStorm while learning JavaScript. I wrote the 1st part in response to the excellent writeup by Richard Bovell. In this 2nd part I will explain in more detail how you can use WebStorm for learning JavaScript (aka js) effectively. This 2nd part was requested by Richard. Please note that following the 1st part is not required, but recommended. Hopefully it will be of value to anyone trying to learn JavaScript. Please leave comments with any questions/corrections. Thanks for your time, definitely one of your most valuable assets.

Required stuff

  1. Mac computer. Windows should work but I wrote my tutorial on a Mac.
  2. Book: Professional JavaScript for Web Developers, 3rd edition
  3. Patience. Quiet place. Comfortable working environment.

Download source code

First download the example source code in the book from,descCd-DOWNLOAD.html. In case the link does not work, just google for professional javascript for web developers 3rd edition source code. Download Full Code Download which is about 3.5MB. The file is named Unzip the file and you will end up with 9781118026694_download. Rename 9781118026694_download as professional-javascript. The resulting folder will show a bunch of subfolders (ex. Ch03, Ch04, etc).
**You can manage example source code with either SmartGit or simply Finder. Follow Option 1 if you are using SmartGit. If you are NOT using SmartGit, follow Option 2.

Option 1: If you have followed my previous post on setting up SmartGit/WebStorm/bitbucket

  1. So you have set up SmartGit/Webstorm/bitbucket by following the 1st part. You’ve created a text file for test and checked it into with SmartGit successfully.
  2. In Finder, copy or move the folder professional-javascript to ~/code/javascript-proper/ so that you end up with ~/code/javascript-proper/professional-javascript/.
  3. Switch to SmartGit and you will see the folder.
  4. Stage and then commit the files.
  5. Switch to WebStorm. If you’ve followed the previous tutorial exactly, WebStorm will now open the project javascript-proper automatically. If not, open the project. This WebStorm project was created in my earlier tutorial. In the left pane of WebStorm, you will see javascript-proper. Expand and you will see professional-javascript, which is the folder you just copied in. Expand it and you will see the subfolders like Ch03, Ch04, etc.
  6. Skip to View, run, tweak and run an example source code.

Option 2: If you are NOT going to use SmartGit/WebStorm but manage the files as regular files on your Mac’s HD.

  1. You do not have directory ~/code/ yet. This was created earlier in my previous post on setting up SmartGit/WebStorm/bitbucket. So create directory ~/code/. You do not have to use the same name or path but I recommend doing so to make it easy for following the rest of the tutorial.
  2. Copy or move the folder professional-javascript to ~/code/javascript-proper/ so that you end up with ~/code/javascript-proper/professional-javascript/.
  3. Now you are going to create a project in WebStorm. Open WebStorm.
  4. File -> New Project from Existing Files
  5. For this scenario, I picked Source files are in a local directory…. This has not been a problem for me yet and I don’t think it will. And it is the easiest method.
  6. Choose directory where the files are located at. In this tutorial, it’s ~/code/javascript-proper/professional-javascript/.
  7. Click on Finish.
  8. After a minute, WebStorm will finish creating the project.
  9. Move on to View, run, tweak and run an example source code.

View, run, tweak and run an example source code

  1. Now open the book, yes the book, Professional JavaScript for Web Developers and go to page 31. The 1st code example is labeled as TypeofExample01.htm.
  2. In WebStorm look for javascript-proper/professional-javascript/Ch03/TypeofExample01.htm. Double click TypeofExample01.htm and the file will be opened in WebStorm.
  3. Move your cursor to top right corner of the editor window (about 1 inch from top edge and 2 inches from right edge of editor window) and keep it still for a second or so.
  4. You will then see a row of small icons representing some web browsers. The options are Chrome, Firefox, Safari, and Chrome. Click on the icon representing Firefox.
  5. If above doesn’t work, go to View > Web Preview. Click on one of the icons representing the different web browsers.
  6. Firefox will start (if not open already) and open the htm file, TypeofExample01.htm. The htm file has a small javascript which you can see executing in Firefox.
  7. In WebStorm, edit an alert with something else. Save the file.
  8. You can refresh the Firefox to see the result. However I prefer staying in WebStorm and clicking on the browser icon to test in a web browser.
  9. Again, move your cursor to near top right corner of the editor, and keep it still for a second or so. You will see a row of small icons representing web browsers present on your Mac. Click the icon representing Firefox. FireFox should open TypeofExample01.htm with the change you added just now.
  10. Close out TypeofExample01.htm.

Create a new HTM file with js code

  1. At this point you may think you know how to create an htm file with js code. If you are new to web development, I can tell you with confidence that you probably don’t yet. I certainly didn’t. Let’s test it.
  2. Try to create a new htm file that does similar task as TypeofExample01.htm. It don’t have to open all 3 alert windows. Just one will do. It’s important that you try to do it from memory.
  3. In WebStorm’s project window, find javascript-proper/professional-javascript/Ch03/. Right click on Ch03.
  4. Go to New -> File. Don’t pick HTML File yet. You can certainly use it when you are more experienced but if you are new to web development, pick File. You need to feel the pain of coding from scratch at least initially. No pain, no gain.
  5. Give TypeofExample01-my.htm for file name. Important to use the file name as shown. When asked to add file to Git, click No. Remember to check ‘Remember, don’t ask again’. If you are accessing Git repo in my tutorial, you should do so with SmartGit, NOT WebStorm. And if you are not using any Git repo, than no reason to try to add the file to Git.
  6. Double click TypeofExample01-my.htm to open it.
  7. Try to type in the html code and javascript code so that TypeofExample01-my.htm works like TypeofExample01.htm.
  8. If you are new to web dev, I’m pretty sure you won’t be able to type out a complete code.
  9. Don’t simply go and copy/paste the code. Try to TYPE in the code manually as much as possible. At this point you will realize you can’t do it. Don’t despair. We were all rookies at one point.
  10. You will reopen TypeofExample01.htm and have it side by side with TypeofExample01-my.htm.
  11. To view 2 files simultaneously easily, you can split Editor Tab vertically. Here’s how. Double click TypeofExample01.htm to open it.
  12. In WebStorm, go to Window > Editor Tabs > Split Vertically.
  13. Now you will see 2 Editor windows. In the left side, you will see TypeofExample01-my.htm and TypeofExample01.htm. In right side, you will see TypeofExample01.htm.
  14. You can close TypeofExample01.htm in the left side.
  15. In TypeofExample01-my.htm, start typing in the code that will do similar tasks that TypeofExample01.htm does. Try to look at the example code in TypeofExample01.htm just a line or 2 at a time. This exercise will help you learn how to actually create the code manually.
  16. Try peeking and coding a few times to memorize the building blocks of html. It seems to work for me when learning more complicated stuff like JavaScript also.
  17. Remember to open the completed TypeofExample01-my.htm by opening it in a web browser. Remember about hovering the mouse cursor in the top right corner of the editor window to open TypeofExample01-my.htm with one of the web browsers on your Mac.
  18. In my case, when I see an example code, I try to create another copy from scratch and save it with -my at end. Thus I have TypeofExample01-my.htm, next to TypeofExample01.htm.

Don’t feel discouraged

By now, the challenge of typing each line in each example code in the book may seem too much. While you don’t have to type out each line in each example in the whole book, I think you should definitely take the time to type out the examples as much as possible as at the beginning stage of studying JavaScript. Once you feel comfortable with the new language called JavaScript, you probably can just start copy/paste in most of the code and just focus on manually typing in the specific part you are trying to learn in JavaScript.