Unit 2: Introduction to JavaScript
This unit starts with a brief history of JavaScript. Then, we will cover how JavaScript works with HTML and CSS and the options for writing, editing, and debugging JavaScript code.
Completing this unit should take you approximately 3 hours.
Upon successful completion of this unit, you will be able to:
- identify basic elements of JavaScript and how they are used;
- explain the use of JavaScript in HTML;
- utilize the steps of debugging and validating code;
- identify the tools to write JavaScript programs; and
- create a simple webpage using HTML, CSS, and JavaScript.
2.1: JavaScript Overview
JavaScript (which began as Netscape's Mocha) was created in 1995 by Brendan Eich to allow HTML developers to write scripts in their webpages. Read this article to learn about features and functionality that supported the early development of the language. These included a Java-like syntax, basic data types, and objects with classes.
If you are taking this course, you know that JavaScript is a popular client-side programming language. Client-side programs run on your computer's web browser. So, where can you see JavasScript on the web? When you visit a website and submit a form, that's JavaScript. The language is easy to use and learn. This article introduces several features of the language and some of the things you can do with it.
- Watch this video to learn about the inventor's origins and the future of JavaScript. It describes the development in 10 days as a scripting language for HTML developers and how it has evolved since then. The first ten minutes give the backstory of how JavaScript became an early JS engine.
2.2: Getting Started
As a JavaScript developer, you will need tools to enter your program code. A text editor is the simplest way to enter code. IDEs (Integrated Development Environments) simplify and speed up development by checking syntax, running, and debugging code. Here are some of them:
Integrated Development Environments
- Komodo IDE
- NetBeans
- Visual Studio IDE
- WebStorm
Text Editors
- Atom
- Komodo Edit
- Notepad++ (Windows)
- Sublime Text
- TextEdit (Mac)
- Visual Studio Code
Online JavaScript Editors
An alternative to loading software on your computer is to use an online editor. A benefit of using an online editor is learning from and sharing code with other JavaScript developers. Most online editors are also free, and you can use an online editor in this course.
- CodePen
- Glitch
- ideone.com
- Js.do Online Editor
- JS Editor
- JSFiddle
- mycompiler.io
- Playcode
- Replit Online Editor
2.3: Adding JavaScript to a Webpage
Now that we've reviewed some of the tools for programming JavaScript, let's look at adding code to HTML and running it in a web browser. JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses
<link>elements to apply external stylesheets and<style>elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML: the<script>element. Let's learn how this works.The second way is to place JavaScript code in an external file and import it into the document. The second method is preferred because, with large programs, it is hard to maintain everything in an HTML document. JavaScript files have the file extension ".js". An example is:
<script src="myprogram.js"></script>
Although all JavaScript code should be in a .js file because our programs are short, we'll place code directly within a
<script>tag. We'll use external .js files in the next course.Watch this video to see the "internal" and "external" use of the
<script></script>tag on an HTML page using an editor. JavaScript can be coded directly in your HTML document (internal) or in a separate document (external). The external file will have a .js extension.Now, let's run your first JavaScript program. You can use an online editor or an editor of your choice. You'll create a page that displays the text "Hello World" in an alert box.
2.4: Debugging JavaScript
It does not matter if you are a beginner or an experienced JavaScript developer; sometimes, there are execution errors or "bugs" in our code. Debugging is the process of locating and fixing bugs such as syntax errors and it is an important part of programming. Debugging tools help you step line by line through code to find and fix errors or set "breakpoints" at specific lines of code. Watch this video to see how to debug JavaScript using Dev Tools in the Chrome browser.
A debugging tool like Chrome Developer Console runs when you are executing your code. A "linter" is a program that analyzes code without executing it. Linters look for syntax errors and then fix the code. This is known as "static code analysis". The main goal of using a linter is to increase the quality and consistency of your JavaScript program. Watch this video to learn how linters are used, and then explore some popular lint applications.
- JSLint was the first "linter" program developed by Douglas Crockford.
- ESLint is a lint program that is built into many code editors, such as Visual Studio Code, Atom, and Sublime.
- JSHint is a widely used program by companies like Facebook and Twitter.
- Flow is an open-source static type checker developed by Facebook.
- TypeScript is developed by Microsoft.
Watch this video to learn how to install and use the JSHint JavaScript validation tool in the Sublime editor.
Study Session Review Video
Unit 2 Assessment
- Receive a grade
Take this assessment to see how well you understood this unit.
- This assessment does not count towards your grade. It is just for practice!
- You will see the correct answers when you submit your answers. Use this to help you study for the final exam!
- You can take this assessment as many times as you want, whenever you want.