Learning Web Design - Ch 21 - Intro to JavaScript

This chapter provides an introduction to the building blocks of JavaScript and serves as a good starting point for further exploration. Complete training in scripting is beyond the scope and scale of an overview book like this one, so the goal here is to become familiar with JavaScript syntax — variables, functions, operators, loops, and events — so you can look at existing scripts and have a general understanding of what they do. There are also examples that demonstrate the types of things JavaScript can be used for. Many web developers have learned JavaScript by adapting existing scripts to meet their needs, then expanding their knowledge from there as needed. Resources for further learning are (as provided at the end of the chapter):

Here are a few resources to take you to the next step:

JavaScript Resources at MDN Web Docs

https://developer.mozilla.org/en-US/docs/Web/JavaScript

The folks at MDN Web Docs have assembled excellent tutorials as well as thorough documentation on all the components of JavaScript. It’s a great site to visit when you’re just starting out, and it is likely to be a go-to reference even after you have years of experience.

JavaScript for Web Designers by Mat Marquis (A Book Apart)

I can say a lot more in a book than in a chapter, so if you’re looking for a little more depth in a beginner-level manual, I wrote this book for you.

Learning JavaScript by Ethan Brown (O’Reilly)

For a deeper dive into JavaScript, this book will take you to the next level..

Takeaways

In Chapter 21, you will learn the following:

That JavaScript is a client-side scripting language, which means it runs on the user’s machine and is dependent on the capabilities of the browser.
That JavaScript is said to add a behavioral layer to the HTML structural layer. All the elements, attributes, styles, and text on a web page can be accessed and manipulated with JavaScript.
The types of things JavaScript can do, such as validate forms, show and hide content based on clicks, test for browser features, and more.
Embedding a script directly in the source document by putting it in a script element.
Linking a standalone .js file to the document with the src attribute in the script element.
That scripts are composed of a series of statements (a command that tells the browser what to do).
About variables, containers for information that you can reuse throughout a script by calling them by name. Variables are defined with the var keyword. You can change the value of a variable at any time in a script.
The data types of variables including undefined, null, numbers, text strings, and Boolean (true/false).
About arrays, lists of values provided for a single variable.
If/else statements, a way to ask a true/false question and execute commands based on the results. They form the foundation of the logic that can be written with JavaScript.
Loops that allow scripts to run through every item in an array sequentially without needing to type out each one individually.
A function is code for performing a task that is set up but doesn’t run until it is called or referenced. It is like a variable that has executable code rather than a static value. Functions allow code to be reused as needed in the script without writing it multiple times.
Some functions are built in to JavaScript (for example, alert()); others are custom functions that you write yourself using the function keyword.
Paying attention to whether variables are globally scoped (available to all the scripts on the page) or locally scoped (available only to its parent function).
Accessing and manipulating the browser itself (known as the window object).
JavaScript listens for events, actions that can be detected such as loading the page or hovering over an element with the pointer. Events can be used as triggers functions. Examples of events in JavaScript include onload, onmouseover, and onclick.

Key Terms in Chapter 21

client-side scripting

Scripts that are processed on the user’s machine, and not the server.

dynamic programming language

Scripts can be delivered and interpreted directly by the browser without needing to be compiled as some programming languages require.

loosely typed language

A language for which you do not need to specify what type of information will be stored in a variable in advance. JavaScript assigns a type to a variable based on what kind of information you provide for it. For example, the variable value 5 is interpreted as a number type.

case-sensitive

Capitalization matters, so myVariable, myvariable, and MYVariable would be treated as three different objects.

statement

A command within a script that tells the browser what to do.

variable

A variable is used to store, retrieve, and manipulate values in code.

data types

Describes the type of variable value.

array

A group of multiple values (called members) that can be assigned to a single variable.

indexed values

Values in an array that can be referred to by number according to the order in which they appear in the list.

comparison operator

Special characters that evaluate and compare values (for example, the == operator means “is equal to”).

loop

Syntax for instructing a script to run through all the values in an array sequentially.

function

A reusable bit of code that is defined once and only runs when it is called by name.

argument

A value or data that a function uses when it runs. You can pass arguments to functions on the fly so the function can be used with different data throughout the script.

scope

Refers to the availability of a variable in the script.

globally scoped

A variable that can be used by any of the scripts on your page.

locally scoped

A variable that’s available only within its parent function.

event

An action that can be detected with JavaScript, such as when the document loads or someone clicks an element.

Exercises in Chapter 21

21-1: English-to-JavaScript translation

This exercise walks you through the steps for writing a script that adds a title with a counter to the browser window tab.

Test Yourself

1. Name one good thing and one bad thing about linking to external .js files.

2. Given the following array

var myArray = [1, "two", 3, "4"]

write what the alert message will say for each of these examples:

2.a. alert( myArray[0] );

2.b. alert( myArray[0] + myArray[1] );

2.c. alert( myArray[2] + myArray[3] );

2.d. alert( myArray[2] – myArray[0] );

3. What will each of these alert messages say?

3.a.

var foo = 5;

foo += 5;

alert( foo );

3.b.

i= 5;

i++;

alert( i );

3.c.

var foo = 2;

alert( foo + " " + "remaining");

3.d.

var foo = "Mat";

var bar = "Jennifer";

if( foo.length > bar.length ) {

alert( foo + " is longer." );

} else {

alert( bar + " is longer." );

}

3.e.

alert( 10 === "10" );

4. Describe what this does:

for( var i = 0; i < items.length; i++ ) { }

5. What is the potential problem with globally scoped variables?

6. Match each event handler with its trigger.

a. onload

b. onchange

c. onfocus

d. onmouseover

e. onsubmit

1. The user finishes a form and hits the submit button.

2. The page finishes loading.

3. The pointer hovers over a link.

4. A text-entry field is selected and ready for typing.

5. A user changes her name in a form field.

Additional Supplemental Resources

1. Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:

1. HTML to define the content of web pages.

2. CSS to specify the layout of web pages.

3. JavaScript to program the behavior of web pages.

The class text does a great job covering JavaScript. But JavaScript can be a difficult subject for some, as it isn't just code markup like HTML, but rather an actual programming language. To help with this subject, the following are great supplemental JavaScript FREE online lessons.

And here are some articles you might find interesting:

2. Make a Star Wars Game with Hour of Code

This is really fun. Be sure to watch the entire introduction video.

3. Free online JavaScript training

FreeCode Camp online Basic Javascript lesson

This is a great website for learning JavaScript.

(If you like this method of instruction, you might be interested in all of their courses.)

w3Schools.com JavaScript tutorial

NOTE: To advance in the sections of this tutorial, click on the green Next buttons at the top and bottom of each page.

https://www.edx.org/course/javascript-introduction

4. Textbook JavaScript Training with Online Applications and Exercises

"JavaScript: Third Edition”, by Marijn Haverbeke

- The book is available for free online here.
- The exercises that go with this book are here.
- This book is also available on Amazon. (but why buy it when you can download it for free)

5. JavaScript Exercises

Memory Game in Vanilla JavaScript

This is a short course that uses a memory game (try it below) to teach the basics of JavaScript for beginners.

2D breakout game using pure JavaScript

Follow the lessons to make the breakout game as shown below:

To check your work, here is the completed website.

Canvas Clock

Build an analog clock using HTML canvas and basic JavaScript.

To check your work, here is the completed website.

6. Other JavaScript Sources

Firefox has lots of JavaScript information here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript

And they have online JavaScript training for absolute beginners:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript

“JavaScript for Cats”, by Max Ogden

Chapter Exercises

Report abuse