| Topic | Name | Description |
|---|---|---|
| Course Syllabus | ||
| 1.1: Introduction to HTML | The Hypertext Markup Language (HTML), developed in the 1990s, is a language for transmitting global hypertext documents. HTML is a "markup language" that defines the structure of a document using information such as tags and text. A web browser reads this information and displays a webpage. In this article, we look at a brief introduction to HTML. Then, we will focus on the structure of an HTML document, mandatory and optional tags, and attributes. As you read these sections, pay attention to the rules for writing HTML. For example, an HTML5 document must contain four basic tags enclosed in open "<" and closed ">" brackets. |
|
This article continues our discussion on writing HTML and describes how to structure a webpage. Start by downloading and viewing the unstructured Quick Hummus Recipe. Then, use the Active Learning sections to learn how to structure the document using interactive examples. You will see that there are several reasons why the structure of a webpage is essential, including use by screen readers and locating pages using a search engine. The complete solution is located here. |
||
This article gives a good overview of best practices for organizing this information on your computer, server, or an online repository such as GitHub. After reading this article, consider the following questions:
|
||
This video demonstrates how to develop a simple webpage using an editor and view the page in a browser. This demonstration uses the Atom code editor and creates a file named index.html. You should see the following nesting of tags in creating this document: <html><head><meta><title><body>. After watching this video, consider the following questions:
|
||
Try this practice exercise to see how well you understood this unit. Read this article to review the concepts of elements, tags, links, and images. Then, follow the instructions to create an idex.html webpage. You can copy the HTML code for each section and paste it into Notepad (Windows), TextEdit (Mac), or an editor of your choice. Be sure to create a folder structure on your computer modeling the Working with Files section, and you can use your own image. Your completed index.html file contains:
This exercise does not count towards your grade. It is just for practice! Make sure you complete all parts of this example before you continue to the next section, "Introduction to CSS". |
||
| 1.2: Introduction to CSS | Ever wonder how web pages have a specific look and feel with color, fonts, and layout? These features are part of the Cascading Stylesheet (CSS) language. It provides for the separation of the data in HTML from the styling of the data. Thus, developers can define the look of a webpage separately from the text it contains. There are three ways to write CSS:
We'll look at each type in the following sections. |
|
In the HTML section, you created an "index.html" file that contained an image and list. This article explains how to add CSS to that document. You will define styles for the |
||
In the previous example, the CSS used rules to define the styling for elements. This video demonstrates how to use "inline" CSS applied to individual elements in an HTML document. Here, the CSS code uses a "style" attribute on each element. The use of inline CSS, while regularly used in HTML, is not efficient because of the styling of each element. |
||
Now it's time to practice developing a small webpage using HTML and CSS. In this example, you'll create a biography webpage using font, color, and text-decoration styles. Watch what happens to the biography text by changing the style. You can also try this example using an editor and a web browser. The HTML file to start this exercise can be found at this link. |
||
| Study Session Review Video | ||
| 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.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 |
|
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 |
||
Watch this video to see the "internal" and "external" use of the |
||
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.
|
||
Watch this video to learn how to install and use the JSHint JavaScript validation tool in the Sublime editor. |
||
| Study Session Review Video | ||
| 3.1: Data Types and Values | We'll start with an article that describes how a computer stores values and some primitive types such as numbers and strings. You can think of the "type of a value" as defining how it is stored, named, and manipulated. For example, a calculator program uses the type "number", which holds "numeric values" and supports "arithmetic operations". JavaScript has two types: "primitive" and "object". Examples of primitive types include numbers, strings, and Booleans. Object types include arrays, objects, and functions. Here are some things to remember when using JavaScript data types:
|
|
We'll work with some of the primitive and object data types in this course. There are seven primitive types:
Watch this video to see how to define them in JavaScript programs. You'll use the "typeof" operator to check each type. After watching the video, consider these questions:
|
||
Understanding the concept of mutable and immutable in JavaScript is vital to prevent programming errors. For example, we know that numbers are immutable. This article presents examples that you can try to understand this concept. This exercise does not count towards your grade. It is just for practice! |
||
| 3.2: Variables and Strings | A JavaScript program needs to use values, and that is where variables come into play. A program stores data in variables and assigns a name to refer to them in your program. In this section, we'll look at how to "declare", "initialize", and "update" variables in JavaScript. After reading this section, consider these questions:
|
|
This article describes best practices when using identifiers. Identifiers are "names" that identify variables, constants, properties, and other elements in a JavaScript program. For example, when creating a variable in a program to store your age, you might give it the identifier "age". Here are some things to remember when using identifiers:
|
||
This video provides a quick introduction to using string literals. String literals in JavaScript are enclosed in single or double quotes. You can try this example using an editor of your choice. |
||
| 3.3: JavaScript Operators | Expressions in JavaScript evaluate to produce values. Operators used with them perform operations that return values. For example, using the addition operator (+), the expression x + y returns the sum of the numbers. Note that some expressions do not use operators; we'll cover this later in the course. This section presents a list of operators used in the JavaScript language. We will not use all of them in this introductory course. However, this is a great interactive reference, and you can run the examples. Pay special attention to the relational operators because you will use them in Unit 4. |
|
Read this article to learn more about using operators in JavaScript. We will not use all of them in this introductory course. However, this is a condensed reference that contains tables of all operator categories. JavaScript categorizes operators by the task (such as arithmetic, comparison, or assignment). Operators execute in a particular order. This is called operator precedence and tells JavaScript which part to evaluate first, second, third, and so on. This is an important concept. For example, consider how a program calculates a price using arithmetic operators: Multiplication first the result is: $18 = 4 + 2 * 7 ( 2 * 7 = 14 + 4) |
||
One of the common errors in programming is misusing the assignment ( |
||
| 3.4: Introduction to JavaScript Statements | So far, we've seen some components that make up the vocabulary for a programming language, such as variables, operators, and keywords. JavaScript uses this vocabulary to form "statements" or instructions that run in a web browser. This article describes several of the types and groups of keywords used in JavaScript statements. We'll drive into JavaScript keywords in the next section. If you have programmed in another language, you will notice that statements in JavaScript use a similar syntax to Java, C++, or Python. Most statements contain one or several lines of code that perform a task. For example, a "declaration-statement" creates a variable, a "conditional-statement" handles a decision, and a "looping-statement" executes code many times. JavaScript statements written on one line do not require a semicolon (";"), but it is best practice to end each line with one. |
|
JavaScript statements begin with a "reserved keyword" and perform a specific task. For example, the "var" keyword instructs the browser to create a variable. This article provides a list of the keywords used in JavaScript. It is important to remember that a "variable" or "function" cannot use keywords. This is another interactive reference to use as you learn to write JavaScript statements. |
||
JavaScript has "statement blocks" that combine multiple lines into a compound statement. Block statements are enclosed in curly brackets { } and do not require an ending semicolon. We'll use block statements when writing conditional statements in Unit 4. |
||
This article discusses JavaScript syntax. The syntax for a programming language defines "rules" or "guidelines" for creating error-free programs. For example, we've seen that reserved keywords define rules with variables and functions. After reading this article, consider these questions:
|
||
Try this exercise to practice writing statements using numbers, strings, and Boolean values. The code defines three variables (using the 'var' keyword) and uses assignment statements. Copy and paste the code into each program and run it to validate the output. You can use the Replit online editor at https://replit.com/languages/nodejs or any editor you choose. This exercise does not count towards your grade. It is just for practice! |
||
Try this exercise to see how well you understood this unit. Read this article while opening a Developer Console in your browser. The sequence is ctrl+shift+J on Windows and cmd+option+J on the Mac. Type in each statement and examine the output using the Console tab. After reading this article, consider these questions:
This exercise does not count towards your grade. It is just for practice! |
||
| Keywords (3.4) | break Keyword |
|
case Keyword |
||
catch Keyword |
||
class Keyword |
||
const Keyword |
||
continue Keyword |
||
debugger Keyword |
||
default Keyword |
||
delete Keyword |
||
do...while keyword |
||
else Keyword |
||
export Keyword |
||
extends Keyword |
||
finally Keyword |
||
for Keyword |
||
function Keyword |
||
if Keyword |
||
import Keyword |
||
in Keyword |
||
instanceof Keyword |
||
new Keyword |
||
return Keyword |
||
super Keyword |
||
switch Keyword |
||
this Keyword |
||
throw Keyword |
||
try Keyword |
||
typeof Keyword |
||
var Keyword |
||
void Keyword |
||
while Keyword |
||
with Keyword |
||
yield Keyword |
||
| Study Session Review Video | ||
| 4.1: Introduction to Conditional Statements | A fundamental skill in programming is controlling how a program executes. The control of program execution is categorized using three control structures. They are "sequential", "selection", and "repetition". So far, you've written straightforward code that uses sequential JavaScript statements that execute one after another. More complex decision-making programs use selection and repetition. Programs also implement different types of looping structures, such as looping until some condition is met (sentinel) or looping a specific number of times (counter control). As you read through this section, you should notice that control structures in JavaScript use "reserved keywords" (if, else, switch). |
|
| 4.2: Selection Control Statements | This section will focus on the syntax (rules) for the "if...else" statement and provide some examples. The "if...else" statement is often used to test if something has happened. We can use it with the "Boolean" and "equality" operators we learned in Unit 3. Notice that an open and closed curly bracket { } is used if there is an "else" statement or more than one line. |
|
Watch this video on the "switch...case" statement that is used to obtain the current day. This statement is a variant of the "if... else" statement. However, the "switch" statement does not use "Boolean" or "equality" operators. Remember, when using the "switch" statement, the "break" statement must be at the end of each condition, and case labels must be unique. |
||
| 4.3: Looping Statements | First, we'll look at the "while" statement. This statement creates a loop that executes as long as the test condition evaluates to "true". For example: while x is less than 7, execute the loop. Remember, when using the "while" statement, you must always increase the value of the condition, and the loop will not execute if the condition is false in the beginning. |
|
There are also times when you want a program to execute the same code many times. Looping statements are analogous to running laps around a track until some condition is met. Watch this video to see how the "for loop" runs a series of statements multiple times based on a condition.
|
||
Now we'll look at the syntax for the "do...while" statement. We discussed the "while" statement in a previous section. How do these statements differ? The "do...while" statement is executed until the test condition is false. Remember, when using the "do...while" statement, you must always use brackets in a "do...while" statement, and the body of the loop will always be executed at least once. |
||
Let's see how well you understand the syntax for the "switch" statement in this practice exercise. In Unit 2, we described validating code using linters. First, copy the following code into the left pane of the JSHint window. Then, examine the errors and fix the code. This exercise does not count towards your grade. It is just for practice!
|
||
| Study Session Review Video | ||
| 5.1: Functions to Perform a Task in Action | This video provides an introduction to functions. Functions eliminate the need to write the same code repeatedly, which saves time. Functions also make your code much more manageable by segmenting a huge program into a number of functions, which makes modification efficient. |
|
Functions are objects in JavaScript and can be used as variables in expressions, passed to other functions, or treated like numbers or strings. The traditional function declaration has several parts:
Functions may have "parameters", values passed to the function from a calling program, but they are not required. To execute a function, it must be "called". This will run the statements in the body of the function. Read this article about how functions are defined and used. After reading this article, consider these questions:
|
||
| 5.2: Declaring Functions | There are several ways to define a function in JavaScript. We'll start by looking at the syntax (rules) for the traditional function declaration or function statement. It uses function name, parameters, and statement(s). Notice that function declarations can be hoisted, which means they can be called before they are declared. |
|
| 5.3: Additional Function Declarations | JavaScript supports additional ways to define a function. This article describes the syntax for a "function expression". A function expression declares a variable and then assigns it to the function. That is, it is defined within the statement and does not need to be "called". Function expressions do not support hoisting. |
|
Another way to define a function is by using the fat arrow ( |
||
Watch this video that uses the function by expression notation to output a person's name. Try this example using an online editor or an editor of your choice. Remember to use one of the Linter programs if you have syntax errors in the program. |
||
Try this exercise to see how well you understood working with functions and conditionals. Copy the code into your favorite editor and display an "interactive" web page that uses a function and a "while" statement to compute the current speed. This exercise does not count towards your grade. It is just for practice! |
||
| Study Session Review Video | ||
| 6.1: JavaScript Objects | In Unit 3, you learned about JavaScript primitive data types such as strings, numbers, and Booleans. In addition, this unit introduces the "array" and "object" data types. Why use objects?
|
|
This video shows how objects store data and how to access the properties of an object (such as height or weight) using dot ( |
||
In this section, you'll use JavaScript to create a "person" object. The code can be run in any browser and uses the Developer Console. This practice exercise does not count towards your grade. It is just for practice! Here are the contents of the file: <!DOCTYPE html> |
||
| 6.2: The DOM (Document Object Model) | The power of JavaScript is its use in dynamically displaying and manipulating elements on a webpage written in HTML. We know that an HTML page consists of elements such as <head><body> <h1> tags or text fields and buttons. The DOM or Document Object Model represents the structure of these elements as a "tree" data structure after your web browser reads a page. The DOM Application Programming Interface (API) contains methods that provide JavaScript access to these elements. Start by reading this article to learn about the document structure of the DOM and how to find, create and change elements. |
|
We'll dive deeper into the DOM by discussing DOM data types and the properties and methods used to access DOM elements using JavaScript. Read this article and locate the methods used with the "window" and "document" objects. For example, when a program uses an alert, it uses the "window.alert" method. JavaScript uses the "window.onload" method when a page is loaded. When a user clicks an element on a page, the "onclick" method is called. Remember that calling a method for an object uses dot (.) notation. |
||
As we continue to look at the DOM, this article contains an interactive tutorial to show how to view and interact with the DOM using the Developer Console. We are using the Chrome browser, but it will work the same in other browsers. This exercise does not count towards your grade. It is just for practice! Before starting this tutorial:
The tutorial demonstrates how to inspect the <ul> and <li> elements on the page, navigate the DOM tree using the keyboard, and inspect the properties of DOM objects. Close the Dev Console when you are finished with the tutorial. |
||
In this exercise, we'll use JavaScript to output data to a webpage using the |
||
| 6.3: JavaScript Best Practices | We've covered several introductory concepts for JavaScript programming in this course and how to debug your code. We'll review some coding guidelines and best practices you'll use as a JavaScript developer to ensure consistency, readability, security, and accessibility. Read this article to learn about some of the best practices for developing programs. |
|
Review this section to see how to avoid common mistakes when writing your code, such as spelling errors or not calling a function. Remember that some of the errors can be found and fixed using a linter program, as we discussed in Unit 2. |
||
This article describes using "strict mode" in JavaScript programs. Strict mode helps developers to avoid errors and write cleaner code. For example, an undeclared variable will cause an error in strict mode. Note that not all browsers support this functionality. |
||
Exception handling is responding to unexpected errors in your program, which is a best practice. For example, if a program expects to open a file and the file is missing. The program should contain an "exception handler" to process this error (such as by sending an error message to the console). Exception handling is essential because the program continues running once the exception code executes. JavaScript has a "try...catch" statement that performs error handling. This video shows how to add exception handling to your applications. Looking at some of the applications on the web, which do you think would benefit from exception handling? |
||
| 6.4: Final Practice Exercises | Congratulations! You've finished the course and have mastered the beginning concepts. We've covered a lot of material, and now it's time for two final practice exercises where you will see how to use JavaScript to solve real-world problems. The first exercise reviews "assignment", "declaration", and "conditional statements" like if/else and switch, and "comparison" and "logical" operators using interactive examples. |
|
Now you've learned something about the theory of JavaScript and what you can do with it, we will give you an idea of what the process of creating a simple JavaScript application is like by guiding you through a practical tutorial. In the last practice exercise, you'll build up a simple Guess the Number game step by step. The game uses "variables", "conditionals", "functions", "events", and "loops". It is essential to practice "reading" a lot of code and running it when learning a new language. In addition, reading well-written code helps you write well-structured code. Don't worry about knowing events and built-in objects such as Math; we'll cover them in more detail in another course. This is a practice exercise, and if you can't get the game to work, check it against the source code. |
||
| Study Session Review Video | ||
| Course Feedback Survey | ||
| Raw Files | ||
icon on the top left.