- JavaScript:Moving to ES2015
- Ved Antani Simon Timms Narayan Prusty
- 564字
- 2021-07-09 19:07:31
How to use this module
This module is not going to help if you are looking to get things done quickly. This module is going to focus on the correct ways to code in JavaScript. We are going to spend a lot of time understanding how to avoid the bad parts of the language and build reliable and readable code in JavaScript. We will skirt away from sloppy features of the language just to make sure that you are not getting used to them—if you have already learned to code using these habits, this module will try to nudge you away from this. There will be a lot of focus on the correct style and tools to make your code better.
Most of the concepts in this module are going to be examples and patterns from real-world problems. I will insist that you code each of the snippets to make sure that your understanding of the concept is getting programmed into your muscle memory. Trust me on this, there is no better way to learn programming than writing a lot of code.
Typically, you will need to create an HTML page to run an embedded JavaScript code as follows:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="script.js"></script> <script type="text/javascript"> var x = "Hello World"; console.log(x); </script> </head> <body> </body> </html>
This sample code shows two ways in which JavaScript is embedded into the HTML page. First, the <script>
tag in <head>
imports JavaScript, while the second <script>
tag is used to embed inline JavaScript.
You can save this HTML page locally and open it in a browser. On Firefox, you can open the Developer console (Firefox menu | Developer | Web Console) and you can see the "Hello World" text on the Console tab. Based on your OS and browser version, the screen may look different:

You can run the page and inspect it using Chrome's Developer Tool:

A very interesting thing to notice here is that there is an error displayed on the console regarding the missing .js
file that we are trying to import using the following line of code:
<script type="text/javascript" src="script.js"></script>
Using browser developer consoles or an extension such as Firebug can be very useful in debugging error conditions in the code. We will discuss in detail the debugging techniques in later chapters.
Creating such HTML scaffolds can be tedious for every exercise in this module. Instead, we want to use a Read-Eval-Print-Loop (REPL) for JavaScript. Unlike Python, JavaScript does not come packaged with an REPL. We can use Node.js as an REPL. If you have Node.js installed on your machine, you can just type node
on the command line and start experimenting with it. You will observe that Node REPL errors are not very elegantly displayed.
Let's see the following example:
EN-VedA:~$ node >function greeter(){ x="World"l SyntaxError: Unexpected identifier at Object.exports.createScript (vm.js:44:10) at REPLServer.defaultEval (repl.js:117:23) at bound (domain.js:254:14) …
After this error, you will have to restart. Still, it can help you try out small fragments of code a lot faster.
Another tool that I personally use a lot is JS Bin (http://jsbin.com/). JS Bin provides you with a great set of tools to test JavaScript, such as syntax highlighting and runtime error detection. The following is a screenshot of JS Bin:

Based on your preference, you can pick the tool that makes it easier to try out the code samples. Regardless of which tool you use, make sure that you type out every exercise in this module.
- Spring 5.0 By Example
- Effective C#:改善C#代碼的50個有效方法(原書第3版)
- Visual Basic編程:從基礎到實踐(第2版)
- Python自動化運維快速入門
- 零基礎學Java(第4版)
- Java深入解析:透析Java本質的36個話題
- 重學Java設計模式
- RealSenseTM互動開發實戰
- Learning Nessus for Penetration Testing
- 超簡單:Photoshop+JavaScript+Python智能修圖與圖像自動化處理
- Apache Solr PHP Integration
- C# 7.1 and .NET Core 2.0:Modern Cross-Platform Development(Third Edition)
- Java Web開發基礎與案例教程
- 和孩子一起學編程:用Scratch玩Minecraft我的世界
- C++服務器開發精髓