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.
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.
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.
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.
Watch this video to learn how to install and use the JSHint JavaScript validation tool in the Sublime editor.
Take this assessment to see how well you understood this unit.