title

author

date created

date last editted

output

W3Cx-5of5-JS.0x: Coursera - Front-End Web Development - JavaScript Introduction

bbauska

7/07/2024 Sun 12+pm

9/19/2024 Thu 2+pm

markdown
with some style

W3Cx Front-End Web Developer

W3Cx-5of5-JS.0x - JavaScript Introduction

Table of Contents - W3Cx-5of5-JS.0x - JavaScript Introduction

Syllabus

Course Information

a1. Welcome to JavaScript Introduction

a2. Course forums

a3. Course tools

a4. Why accessibility is important

a5. Why internationalization is important

a6. About W3C and the Web

Module 1: Introduction to JavaScript

1.1 Intro Module 1: Introduction to JavaScript

1.1.1 Intro - Module 1: Intro to JavaScript

1.1.2 Module 1 outline

1.2 JavaScript, HTML and CSS

1.2.1 HTML is for structure

1.2.2 CSS is for style

1.2.3 JavaScript is the 'interactive glue'

1.2.4 JavaScript history

1.2.5 Discussion and project

1.3 JavaScript Overview

1.3.1 The best way to learn JavaScript

1.3.2 What can be done with JavaScript?

1.3.3 Where to put JavaScript code?

1.3.4 How to debug JavaScript

1.3.5 Discussion and projects

1.4 Your first HTML/CSS/JS page

1.4.1 Creating an HTML/CSS/JS project

1.4.2 Using CodePen

1.4.3 Using Sublime Text

1.5 Variables, values, functions, operators and expressions

1.5.1 JS variables and values

1.5.2 Scope of JS variables

1.5.3 JS data types

1.5.4 Numbers

1.5.5 JS operators and expressions

1.5.6 Number Operators

1.5.7 Strings, part 1

1.5.8 String operators, part 2

1.5.9 Objects, part 1

1.5.10 Arrays, part 1

1.5.11 Functions, part 1

1.6 Simple JavaScript examples to play with

1.6.1 Intro: Simple JS example to play with

1.6.2 The devtool console

1.6.3 Modifying an HTML document

1.6.4 Modifying CSS styles on the fly

1.6.5 Adding interactivity with events

1.6.6 Using built-in HTML5 APIs

1.6.7 Using third-party JS APIs/libraries

1.6.8 Working with remote data

Module 2: Adding Interactivity to HTML Documents

2.1 Intro Module 2: Adding Interactivity to HTML Documents

2.1.1 Intro: Adding Interactivity to HTML documents

2.1.2 Module 2 outline

2.2 Conditional Statements, Loops and Logical Operators

2.2.1 Boolean values and logical operators

2.2.2 Conditional statements

2.2.3 Loop statements

2.2.4 Discussion and projects

2.3 Functions and Callbacks

2.3.1 Functions and callbacks

2.4 Handling Events

2.4.1 Intro: Adding Interactivity to a Web App

2.4.2 Adding and removing event listeners to a document

2.4.3 The event object

2.4.4 Page lifecycle events

2.4.5 Key events

2.4.6 Dealing with different keyboard layouts

2.4.7 Key and code properties

2.4.8 Mouse events

2.4.9 Form and input field events

2.4.10 Reference tables

2.4.11 Discussion and projects

2.5 The DOM API

2.5.1 Introducing the DOM

2.5.2 A warning about the DOM API

2.5.3 Accessing HTML elements

2.5.4 Changing the style of selected HTML elements

2.5.5 Modifying selected HTML elements

2.5.6 Adding new elements to the DOM

2.5.7 Moving HTML elements in the DOM

2.5.8 Removing elements from the DOM

2.6 Let's write a small game

2.6.1 Drawing

2.6.2 Animating

2.6.3 Animating multiple objects

2.6.4 Mouse interactions

2.6.5 Moving a player with the mouse

2.6.6 Adding collision detection

2.6.7 Adding input fields

2.6.8 Discussion and projects

Module 3: Standard HTML5 APIs

3.1 Intro Module 3: Standard HTML5 APIs

3.1.1 Intro: Standard HTML5 APIs

3.1.2 Module 3 outline

3.2 Arrays and Iterators

3.2.1 Arrays

3.2.2 Strings are arrays of characters

3.2.3 Iterating on array elements

3.2.4 Discussion and projects

3.3 HTML5 Multimedia and JavaScript

3.3.1 Playing audio and video streams

3.3.2 Audio and video player JavaScript API

3.3.3 Examples using the JavaScript API

3.3.4 Using the webcam

3.3.5 Extended examples

3.3.6 Discussion and projects

3.4 Displaying a map with the Geolocation API

3.4.1 The Geolocation API

3.4.2 Geolocation and maps

3.4.3 Reverse gecoding

3.4.4 Discussion and projects

3.5 Playing sound samples and music

3.5.1 Background music (streamed)

3.5.2 Sound effects using howler.js

3.5.3 Adding music and sound effects

3.5.4 [Advanced] a multiple image, sound and music loader

3.5.5 Discussion and projects

Module 4: Structuring Data

4.1 Intro Module 4: Structuring Data

4.1.1 Intro: Module 4: Structuring Data

4.1.2 Module 4 outline

4.2 Objects: properties and methods

4.2.1 Intro: Structuring Data

4.2.2 From objects to arrays

4.2.3 Property declaration syntax

4.2.4 An object can contain another object

4.2.5 Elements, properties and methods

4.2.6 "this": accessing properties

4.2.7 Adding/deleting properties and methods

4.2.8 "this": some final thoughts

4.3 Creating multiple objects

4.3.1 Classes: definition

4.3.2 The "new" keyword

4.3.3 Creating objects using modern JavaScript classes

4.3.4 Declaring a class before using it

4.3.5 Creating objects with functions (factories)

4.3.6 Static properties and methods

4.3.7 [Advanced] Modern JavaScript getters and setters
4.3.8 Discussion and projects

4.4 Organizing the code in separate files

4.4.1 Class and constructor

4.4.2 Adding methods classes

Module 5: Working with Forms

5.1 Intro Module 5: Working with Forms

5.1.1 Intro: Working with Forms

5.1.2 Module 5 outline

5.2 Built-in JavaScript Objects

5.2.1 References and objects

5.2.2 Comparing two objects

5.2.3 The "global" window object

5.2.4 Built-in JS class: Object

5.2.5 Built-in JS class: Array

5.2.6 The most useful methods of the class Array

5.2.7 Built-in JS class: Number

5.2.8 Built-in JS class: String

5.2.9 The most useful methods of the class String

5.2.10 Built-in JavaScript class: Math

5.2.11 Built in JS class: Date

5.3 HTML5 tables, forms and input fields

5.3.1 The HTML table basics

5.3.2 The HTML table JavaScript API

5.3.3 HTML forms: best practices

5.3.4 HTML forms and JavaScript

5.3.5 Discussion and projects

5.4 The JSON notation

5.4.1 What is JSON?

5.4.2 Consuming JSON remote data

5.4.3 The LocalStorage API

5.4.4 Discussion and projects

5.5 A small application

5.5.1 A contact manager (part 1)

5.5.2 Persistence (part 2)

5.5.3 Display contacts in an HTML5 table (part 3)

5.5.4 Use a form to enter new contacts (part 4)

5.5.5 Discussion and projects

5.6 Where to from here?

5.6.1 Where now?

Introduction JavaScript - git

a1. Course Outline:

js.0x-w3cx - W3Cx-5of5-JS.0x JavaScript Introduction

HTML5, CSS and JavaScript are the "classic three" for Web developers and designers. JavaScript lets you add interactive features to your Web sites, including dynamically updated content, controlled multimedia, animated images, and much more.

In Module 1, we present the basics of JavaScript by the way of many examples. We also show how to use the browser devtools, a powerful, built-in set of tools that represent the Swiss army knife of any Web developer.
In Module 2, you'll learn about conditional statements, logical operators, loops and how to detect events. We will introduce the DOM API and the selector API (for selecting elements in the DOM). At the end of this module, armed with this new knowledge, we'll write a small game together.
Module 3 is more "project oriented", and less focused on fundamental concepts. Discover the audio and video APIs, and other cool HTML5 APIs. You will play with sound samples and music, and this is going to be useful to put a music background and/or sound effects to the game you started to develop in Module 2!
Module 4 is about structuring data with a focus on JavaScript Object Oriented Programming. As with many other programming languages, JavaScript objects can be compared to real-life objects. Learn how to create your own classes and multiples objects from the same class. And experiment it all by doing one or more optional projects!
Module 5 is the last module of the course! Let's enhance interactivity of past projects by adding forms. To put into practice, let's develop a mini contact manager that load/save its data using the JSON format.

This course is designed for anyone who is comfortable with programming concepts. No prerequisites are required though we encourage you to follow these two other W3Cx courses: HTML5 and CSS Fundamentals and CSS Basics.

During this course, you will learn:

How to add JavaScript code in your Web site/Web app, and how to debug it.
How to make interactive Web sites through the DOM API.
How to change the CSS styles of HTML5 elements from JavaScript.
How to deal with HTML5 forms.
How to make basic graphics and animations using the HTML5 canvas.

You will make good use of your JavaScript skills in the other 2 W3Cx courses included in the "Front-End Web Developer" W3Cx Professional Certificate program: HTML5 Coding Essentials and Best Practices and HTML5 Apps and Games.

In the meantime, have fun in this course!

Professional Certificate programs are series of courses designed by industry leaders and/or top universities to build and enhance critical professional skills needed to succeed in today's most in-demand fields.

W3C has designed a "Front-End Web Developer" (FEWD) Professional Certificate where you will learn all of the necessary skills needed to build interactive and responsive user experiences on the Web. This program will deepen your knowledge of the 3 foundational languages that power the Web: HTML5, CSS and JavaScript.

The W3C FEWD program is composed of 5 courses:

CSS Basics
HTML5 and CSS Fundamentals
HTML5 Coding Essentials and Best Practices
HTML5 Apps and Games
This course: JavaScript Introduction

To get a W3C FEWD professional certificate, you must successfully pass and receive a Verified Certificate in the five courses above.

Foreword:

Michel Buffa, author of this course:

“When I work locally, with files located on my computer hard drive, I use the Sublime Text source code editor, Visual Studio Code, WebStorm, NetBeans, depending on the size of the project I'm working on.

For testing simple examples, I mainly use the JSBin.com online code editor.

For embedding online examples in this course, I use the CodePen.io online code editor.

For choosing a CSS color, shadow, text-shadow, gradients, etc. I use the LiveWeave online code editor.”

Web editors

Traditional source code editors

You can use any source code editor that has good support for HTML, CSS and JavaScript files. For this course, you are free to use whichever you prefer. However, there are some in particular that we recommend.

Sublime Text is a very powerful, multi-platform source code editor, it's semi-free (you can use it without paying, it will pop up a dialog asking you to buy it once in a while, but not very often). Sublime text supports hundreds of plugins to enhance its features.

Visual Studio Code is a free, open source, multi-platform editor by Microsoft.

Other tools

Free of charge:

Atom source code editor (note that Visual Studio code is based on Atom).
Brackets source code editor.
NotePad++ (Windows only)
NetBeans and Eclipse: very powerful IDEs (integrated development environments), but heavier than all the "lightweight" source editors that we've talked about so far. More dedicated to "mid-size/large-size projects", more for pro developers that are also looking for good support for server-side languages such as Java, Python, PHP, etc.

Not free of charge:

IDEs by JetBrains.com have a very good reputation and can be obtained for free if you are an academic customer (student or teacher). The WebStorm IDE is a very good mid-weight tool for developing HTML/CSS/JS/NodeJS code.
BBedit (for Macs): source code editor for mac with support for Web languages.

a3. Online editors/IDEs

To help you practice for the duration of the course, you will use the following tools:

JS Bin is an open-source collaborative Web development debugging tool. Most of the examples you will find in this course are either on JSBin or on CodePen.

Tutorials can be found on the Web (such as these ones) or on YouTube. The tool is really simple: just open the link to the provided examples, look at the code, look at the result, etc. And you can modify the examples as you like, you can also modify / clone / save / share them. Keep in mind that it's always better to be logged in (it's free) if you do not want to lose your work.

In our opinion, JSBin is the best online IDE for "live coding": typing and seeing what you are doing in real time, monitoring error messages in the console tab, and debugging your code. We will mainly use this tool for the live coding videos.

CodePen is similar to JSBin except that its Web site includes a search engine, which is very useful for finding out what others have developed. Looking for a nice HTML5/CSS button style? Just search for "button", etc. It's also easier for us to embed HTML/CSS/JS examples in this course with CodePen than with other online IDEs; this is why so many "pens" are embedded in the course pages.

This is a great service to get you started quickly as it doesn't require you to download anything and you can access it, along with your saved projects from any Web browser. Here's an article which will be of-interest if you use CodePen: Things you can do with CodePen [Brent Miller, February 6, 2019].

Plunker allows us to work online with separate files. So, when we have no choice but to use separate files, we might use this tool.

LiveWeave is great for writing CSS code or for embedding SVG Graphics in an HTML document, as it includes online wizards and interactive editors. We use it when we have problems with CSS shadows, CSS colors or gradients, or when we want to include an SVG arrow in a document.

JSFiddle is very similar to JSBin and CodePen in terms of features.

Other tools

There are many other online IDEs and new ones appear each year. If you want a real, heavyweight online IDE that has nearly all the features offered by "big IDEs" such as Eclipse, NetBeans and WebStorm, take a look at the Cloud9 IDE. It's free and will enable you to develop huge projects, that can include many files, it supports uploaded assets such as images, videos and sound files. Furthermore, like Google Docs, it will support multiple users working at the same time on the same project, even on the same file. It's a real collaborative environment.

Michel Buffa, author of this course, developed a whole multitrack audio player this way. This application is available online. (See also screenshots below:)

100% of the development was done in a Web browser, by Michel Buffa and two friends, using the c9.io (Cloud 9) IDE (to see if online IDEs were a valuable approach):

JavaScript debuggers

Here is a selection of tools to help debug JavaScript code. The instructor will indicate other tools in module 1 of the course.

Firefox JS debugger (debugger shipped inside Firefox) - all other browsers have integrated debuggers as well.
JS Lint - The JavaScript Code Quality Tool
CodeBeautify - JavaScript Validator
Check also other JavaScript debugging tools

Browser compatibility

The term browser compatibility refers to the ability of a given Web site to appear fully functional on the browsers available in the market.

The most powerful aspect of the Web is what makes it so challenging to build for: its universality. When you create a Web site, you're writing code that needs to be understood by many different browsers on different devices and operating systems!

To make the Web evolve in a sane and sustainable way for both users and developers, browser vendors work together to standardize new features, whether it's a new HTML element, CSS property, or JavaScript API. But different vendors have different priorities, resources, and release cycles --- so it's very unlikely that a new feature will land on all the major browsers at once. As a Web developer, this is something you must consider if you're relying on a feature to build your site.

We are then providing references to the browser support of HTML5 features presented in this course using 2 resources: Can I Use and Mozilla Developer Network (MDN) Web Docs.

Can I use

Can I Use provides up-to-date tables for support of front-end Web technologies on desktop and mobile Web browsers. Below is a snapshot of what information is given by CanIUse when searching for "CSS3 colors".

MDN Web Docs

To help developers make these decisions consciously rather than accidentally, MDN Web Docs provides browser compatibility tables in its documentation pages, so that when looking up a feature you're considering for your project, you know exactly which browsers will support it.

External resources

For over 20 years, the W3C has been developing and hosting and open source tools used every day by millions of Web developers and Web designers. All the tools listed below are Web-based, and are available as downloadable sources or as free services on the W3C Developers tools site.

W3C Validator

The W3C validator checks the markup validity of various Web document formats, such as HTML.

CSS Validator

The CSS validator checks Cascading Style Sheets (CSS) and (X)HTML documents that use CSS stylesheets.

Unicorn is W3C's unified validator, which helps people improve the quality of their Web pages by performing a variety of checks. Unicorn gathers the results of the popular HTML and CSS validators, as well as other useful services, such as RSS/Atom feeds and http headers.

Link Checker

The W3C Link Checker looks for issues in links, anchors and referenced objects in a Web page, CSS style sheet, or recursively on a whole Web site. For best results, it is recommended to first ensure that the documents checked use valid HTML Markup and CSS.

Internationalization Checker

The W3C Internationalization Checker provides information about various internationalization-related aspects of your page, including the HTTP headers that affect it. It also reports a number of issues and offers advice about how to resolve them.

W3C cheatsheet

The W3C cheatsheet provides quick access to useful information from a variety of specifications published by W3C. It aims at giving in a very compact and mobile-friendly format a compilation of useful knowledge extracted from W3C specifications, completed by summaries of guidelines developed at W3C, in particular Web accessibility guidelines, the Mobile Web Best Practices, and a number of internationalization tips.

Its main feature is a lookup search box, where one can start typing a keyword and get a list of matching properties/elements/ attributes/functions in the above-mentioned specifications, and further details on those when selecting the one of interest.

The W3C cheatsheet is only available as a pure Web application.

Help build the Web Platform!

Most of the technologies you use when developing Web applications and Web sites are designed and standardized in W3C in a completely open and transparent process.

In fact, all W3C specifications are developed in public GitHub repositories, so if you are familiar with GitHub, you already know how to contribute to W3C specifications! This is all about raising issues (with feedback and suggestions) and/or bringing pull requests to fix identified issues.

Contribute

Contributing to this standardization process might be a bit scary or hard to approach at first, but understanding at a deeper level how these technologies are built is a great way to build your expertise.

If you're looking to an easy way to dive into this standardization processes, check out which issues in the W3C GitHub repositories have been marked as "good first issue" and see if you find anything where you think you would be ready to help.

<h4">First steps in Web accessibility

As steward of global Web standards, W3C's mission is to safeguard the openness, accessibility, and freedom of the World Wide Web from a technical perspective.

W3C's primary activity is to develop protocols and guidelines that ensure long-term growth for the Web. The widely adopted Web standards define key parts of what actually makes the World Wide Web work.

Shape the future

Another approach is to go and bring feedback on ideas for future technologies: the W3C Web Platform Community Incubator Group was built as an easy place to get started to provide feedback on new proposals or bring brand-new proposals for consideration.

Happy Web building!

a6. About W3C and the Web

As steward of global Web standards, W3C's mission is to safeguard the openness, accessibility, and freedom of the World Wide Web from a technical perspective.

W3C's primary activity is to develop protocols and guidelines that ensure long-term growth for the Web. The widely adopted Web standards define key parts of what actually makes the World Wide Web work.

A few history bits

Tim Berners-Lee at his desk in CERN, 1994

Tim Berners-Lee wrote a proposal in 1989 for a system called the World Wide Web. He then created the first Web browser, server, and Web page. He wrote the first specifications for URLs, HTTP, and HTML.

In October 1994, Tim Berners-Lee founded the World Wide Web Consortium (W3C) at the Massachusetts Institute of Technology, Laboratory for Computer Science [MIT/LCS] in collaboration with CERN, where the Web originated (see information on the original CERN Server), with support from DARPA and the European Commission.

In April 1995, Inria became the first European W3C host, followed by Keio University of Japan(Shonan Fujisawa Campus) in Asia in 1996. In 2003, ERCIM took over the role of European W3C Host from Inria. In 2013, W3C announced Beihang University as the fourth Host.

As of January 2023, W3C is a public-interest non-profit organization incorporated in the United States of America, led by a Board of Directors and employing a global staff across the globe.

A few figures

As of July 2023, W3C:

Is a member-driven organization composed of over 360 companies, universities, start-ups, etc. from all over the world.
Holds 52 technical groups, including Working and Interest Groups where technical specifications are discussed and developed.
Published over 13585 published technical reports, including 510 Web standards (or W3C Recommendations) - since January 1st,1995.
Runs a translation program to foster the translation of its specifications: see the translation matrixcurrently listing 312 available translations of W3C recommendations.
Hosts 143 Community and Business Groups, where developers, designers, and anyone passionate about the Web have a place to hold discussions and publish ideas.
Gathers over13860active participants constituting the W3C community.
Has a technical staff composed of 46 people, spread on all five continents.

W3C's core values

Committed to core values of an open Web that promotes innovation, neutrality, and interoperability, W3C and its community are setting the vision and standards for the Web, ensuring the building blocks of the Web are open, accessible, secure, international and have been developed via the collaboration of global technical experts.

The Web is amazing!

Level 2 headings may be created by course providers in the future.

People often use the words "Internet" and "Web" interchangeably, but this usage is technically incorrect.

The Web is an application of the Internet. The Web is the most popular way of accessing the Internet, but other applications of the Internet are e-mail and ftp for example. One analogy equates the Internet to a road network where the Web is a car, the email is a bicycle, etc. Read this article for more details about the difference between Internet and the Web.

Check also this reminder ;)

First photo: Tim Berners-Lee is on the left wearing a black shirt that says "I didn't invent the Internet" and Vint Cerf on the right wearing a black shirt that says "I did not invent shit. DARPA did.". Second photo: Both facing backwards, Tim Berners-Lee is on the left wearing a black shirt that says "I invented the Web" and Vint Cerf on the right incorrectly wearing a black shirt that says "I invented the Internet".

The W3C community is passionate about creating free and open Web standards. The next video, created in partnership with Microsoft, explains why standards are important to maintain a royalty-free, Open Web Platform, as well as to help shape the Web of the future.

a4. Why accessibility is important

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, W3C Director and inventor of the World Wide Web

When websites and web tools are properly designed and coded, people with disabilities can use them. However, currently many sites and tools are developed with accessibility barriers that make them difficult or impossible for some people to use.

Accessibility is essential for developers and organizations that want to create high-quality websites and web tools, and not exclude people from using their products and services.

Making the web accessible benefits people with and without disabilities, businesses, and society. Accessibility is an important aspect of diversity, equity, and inclusion (DEI).

Video Introduction to Web Accessibility and W3C Standards is a 4-minute video with descriptive transcript and subtitles in over 20 languages.

Who is impacted?

Web accessibility addresses all disabilities, including hearing, learning and cognitive, neurological, physical, speech, and visual disabilities. Some examples of Web accessibility features include:

Captions on audio and multimedia content for people who are hard of hearing;
Clear and consistent layout for people with learning and cognitive disabilities;
Keyboard support for people with physical disabilities and do not use a mouse;
Text alternatives for people with visual disabilities and using screen readers;

Web accessibility benefits people with and without disabilities

Web accessibility features also benefit many more users, such as:

People with temporary situational limitations, such as a broken arm;
People using mobile devices, televisions, and other access channels;
People using older computers, with low bandwidth, and other limitations;
People who are new to computers, to the Web, or to your own website;
People who are not fluent in the language of your particular website;

The Web is an increasingly important resource in many aspects of life: education, employment, government, commerce, health care, recreation, and more. When Web pages, Web technologies, Web tools, or Web applications are badly designed, they can create barriers that exclude people from using the Web. More information is available in the W3C Accessibility overview.

First steps in Web accessibility

There are many simple Web accessibility improvements that you can implement and check right away, even when you are new to this topic. Two example excerpts are provided below on this page but you can find more tips and information from W3C/WAI:

Example 1: page title

Good page titles are particularly important for orientation --- to help people know where they are and move between pages open in their browser. The first thing screen readers say when the user goes to a different Web page is the page title. In the Web page markup, they are the <title> within the <head>.

Check #1: There is a title that adequately and briefly describes the content of a page, and that it distinguishes the page from other Web pages.

Example:

1. <head>
2.   …
3.   <title>Web Accessibility Initiative (WAI) - home page</title>
4.   …
5. </head>

Example 2: image text alternatives ("alt text")

Text alternatives ("alt text") are a primary way of making visual information accessible, because they can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. For example, a person who cannot see a picture can have the text alternative read aloud using synthesized speech.

Check #2: Every image has alt with appropriate alternative text.

Example: See the W3C logo below. It contains a link that points to the W3C Web site. The text alternative is going to be a brief description of the link target.

<a href="https://w3.org">
  <img src="https://w3.org/Icons/w3c_home.png" width="72" height="48" alt="W3C Web site">
</a>

a5. Why internationalization is important

Access to the Web for all has been a fundamental concern and goal of the W3C since the beginning. It is easy to overlook the needs of people from cultures different to your own, or who use different languages or writing systems, but you have to ensure that any content or application that you design or develop is ready to support the international features that they will need.

'Internationalization' is sometimes abbreviated to 'i18n' in English, because there are 18 characters between the 'i' and the 'n'.

The W3C Internationalization Activity works with W3C working groups and liaises with other organizations to make it possible to use Web technologies with different languages, scripts, and cultures.

During this course you will learn about some basic internationalization features, such as character encoding and language declarations. If you don't use those features you will create barriers for people from different cultures who are trying to access your content. This is important even if you think you are only designing for a specific community -- communities are made up of diverse individuals, and the Web stretches worldwide.

Unicode

Text in a computer or on the Web is composed of characters. Characters represent letters of the alphabet, punctuation, or other symbols.

Unicode is a universal character set, ie. a standard that defines, in one place, all the characters needed for writing languages in use on computers. It is a superset of all other character sets that have been encoded.

As a content author or developer, It is important to clearly distinguish between the concepts of a character set versus a character encoding. You should nowadays always choose the UTF-8 character encoding for your content or data. This Unicode encoding is a good choice because you can use a single encoding to handle any character you are likely to meet. This greatly simplifies things.

Essential steps in Web i18n

You find below three examples (and checks!) to help you to ensure that your Web page works for people around the world, and to make it work differently for different cultures, where needed. Let's meet the words 'charset' and 'lang', soon to become your favorite markup ;)

Example 1: Character encoding declaration

A character encoding declaration is vital to ensure that the text in your page is recognized by browsers around the world, and not garbled. You will learn more about what this is, and how to use it as you work through the course. For now, just ensure that it's always there.

Check #1: There is a character encoding declaration near the start of your source code, and its value is UTF-8.

Example 1:

<head>
  <meta charset="utf-8"/>
  …
</head>

Example 2: Primary language declaration

For a wide variety of reasons, it's important for a browser to know what language your page is written in, including font selection, text-to-speech conversion, spell-checking, hyphenation and automated line breaking, text transforms, automated translation, and more. You should always indicate the primary language of your page in the <html> tag. Again you will learn how to do this during the course. You will also learn how to change the language, where necessary, for parts of your document that are in a different language.

Check #2: The HTML tag has a lang attribute which correctly indicates the language of your content.

Example 2: This indicates that the page is in French.

<!doctype html>
<html lang="fr">
  <head>
  …

Example 3: Cultural bias

People around the world don't always understand cultural references that you are familiar with, for example the concept of a 'home run' in baseball, or a particular type of food. You should be careful when using examples to illustrate ideas.

Also, people in other cultures don't necessarily identify with pictures that you would recognize, for example, hand gestures can have quite unexpected meanings in other parts of the world, and photos of people in a group may not be representative of populations elsewhere. When creating forms for capturing personal details, you will quickly find that your assumptions about how personal names and addresses work are very different from those of people from other cultures.

Check #3: If your content will be seen by people from diverse cultures, check that your cultural references will be recognized and that there is no inappropriate cultural bias.

Don't worry!

The following 7 quick tips summarize some important concepts of international Web design. They will become more meaningful as you work through the course, so come back and review this page at the end.

Encoding: use the UTF-8 (Unicode) character encoding for content, databases, etc. Always declare the encoding.
Language: declare the language of documents and indicate internal language changes.
Navigation: on each page include clearly visible navigation to localized pages or sites, using the target language.
Escapes: use characters rather than escapes (e.g. á á or á) whenever you can.
Forms: use UTF-8 on both form and server. Support local formats of names/addresses, times/dates, etc.
Localizable styling: use CSS styling for the presentational aspects of your page. So that it's easy to adapt content to suit the typographic needs of the audience, keep a clear separation between styling and semantic content, and don't use 'presentational' markup.
Images, animations & examples: if your content will be seen by people from diverse cultures, check for translatability and inappropriate cultural bias.

You will find more quick tips on the Internationalization quick tips page. Remember that these tips do not constitute complete guidelines.

Internationalization checker

When you start creating Web pages, you can also run them through the W3C's Internationalization Checker. If there are internationalization problems with your page, this checker explains what they are and what to do about it.

1.1.1 Introduction - Module 1: Intro to JavaScript (1:46)

Hello everyone, welcome to the wonderful world of JavaScript!

In this module, after giving a brief history of JavaScript and Web browsers, we will explain how HTML, CSS and JavaScript are related to one another. We will see JavaScript in action through numerous interactive examples. We have made sure that all examples can be run directly in the course's Web pages.

Hey, we're teaching Web technologies, after all! We will do that throughout the course, as you will be asked to change some code, tweak this or that example, even if the code details are not fully explained at first. Because, this is how we recommend beginners to learn JavaScript: first look at examples, then tweak some code and see the results of the changes. You will certainly encounter error messages, but no worries, as I will teach you how to debug JavaScript code using your browser's devtool console.

In this first module, you will also learn about JavaScript variables, operators and expressions, and have a first lesson about functions, objects, arrays and strings.

These are the basic concepts of JavaScript and are shared by many other programming languages. We'll then develop together, and step by step, an interactive graphic tool that will use many different features from JavaScript, HTML and CSS. Let's start having fun with JavaScript, now :-)

1.1.2 Module 1 outline

If you thought that a Web browser could only display HTML documents, you were mistaken! ;)

Behind the scenes, an HTML document is nearly always associated with two other standard languages of the Web: CSS and JavaScript. Before looking at the guts of JavaScript, we introduce the basics and play with many examples. We will also have a first look at the browser devtools, and discover how JavaScript is useful.

First, let's briefly discuss the roles of HTML, CSS and JavaScript, and how they work together.
We show examples of what can be done with JavaScript: a showcase of very small examples through to impressively complex ones.
Then we look at a dozen different - very small - examples of typical uses of JavaScript.
Finally, we learn how to use the browser devtools, a powerful, built-in set of tools that represent the Swiss army knife of any Web developer. Without the devtools, you would not be able to debug your code, find errors, print traces of what a JavaScript program is doing etc.

A word of caution: you will not learn JavaScript in full detail in this course! This is an introductory course designed to help you understand the basic concepts of the language.

1.2.1 HTML is for structure

The "Hyper Text" part: links!

A fundamental key to the World Wide Web is the concept of "hypertext". Hypertext is built on the idea of linking information together, not unlike using footnotes, but far easier and more flexible. The idea is to "mark up" your document with links and define how to break it down into different segments (chapters, sections, paragraphs, tables, figures, etc.)

That's why, in 1989, Tim Berners-Lee began to create a definition of HTML: Hypertext Markup Language, to provide a simple, uniform way to incorporate hyperlinks into a text document.

He envisioned a technology that would facilitate thoroughly interconnected documents. He wanted authors to be able to connect an idea in one document to the source of the idea in another, or connect a statement with the data that backs up that statement. Traditionally this kind of thing was done with footnotes and bibliographies, which can be cumbersome. This information should be easily transferable from one place to another, so that in reading one document, it is easy to access everything related (linked) to it. Tim Berners-Lee imagined a "Web" of interconnected documents.

He used the metaphor of a Web to emphasize the importance of connections between documents. It was not just a long list of details, but rather a sea of information stretching out in all directions. This sea of information was navigated by a new tool called a "browser".

The "Markup" part: elements, tags and attributes!

The "M" in HTML stands for "Markup", but what does Markup really mean? Essentially it means to annotate a document with extra information: things like where different sections and paragraphs begin and end, which part is the title, which things should be emphasized and so on.

There are many ways to markup a document, but HTML borrows a technique from an ancestor language, SGML (Standard Generalized Markup Language), which uses angle brackets ("<" and ">") to separate the annotations from the regular text. In HTML these annotations are called "tags".

For example, consider the following chunk of HTML code (note: you can edit the source code and see the resulting Web page updating in real time):

CodePen: A Tale of Two Cities.

HTML:

<body>
  <h1>A Tale of Two Cities</h1>
  <p>
  It was the best of times, it was the worst of times, . . . .
  </p>
  . . .
  <p>
  . . . it is a far, far better rest
  that I go to than I have ever known.
  </p>
</body>

If you eliminated everything in between the angle brackets from the text, for most purposes it would still read the same:

A Tale of Two Cities It was the best of times, it was the worst of times . . . . . . . . . . it is a far, far better rest that I go to than I have ever known.

Once you know that everything in angle brackets is "meta-information", it gives you a lot of flexibility. You can put a lot of different things in between those brackets without any of it showing up (directly) in your finished document. And though you don't usually see directly what's in those angle brackets, they can often have a big effect on how your Web page looks, as well as how it responds and interacts with you.

Here is another, more generic example:

Notes:

Remember that the first line of your HTML5 page should start by <!DOCTYPE html>. CodePen does not force you to add a DOCTYPE on CodePen, but be assured that you have to specify the DOCTYPE in all your Web documents.
You can modify the source code in CodePen, and see the results in real time.

CodePen: Who Am I?

Try it out!

It's time to write your first HTML code :-)

You can use a source code editor like Sublime Text, Atom,brackets or any lightweight text editor. You can also use more "professional" tools such as Visual Studio Code, NetBeans, Eclipse WebStorm, jetbrains, etc.

To try out the simple examples from this course, I'd suggest using an online IDE such as JSBin, CodePen, Plunker, etc.

During the course, we will show you how to test out simple code snippets in online IDEs, but we will also teach you how to organize your code with folders and files.

The next lesson shows how you can use JSBin, CodePen, and SublimeText in order to test the HTML code provided earlier in this section.

1.2.1 Live coding video: using the course's tools (6:25)

In this lesson, I will show you how to try and tweak the HTML example from the Web page, the one from the course.

I propose first to show you two online tools that are very practical for editing some HTML, CSS and JavaScript code, and seeing in real time the result of your modifications.

In the second time, I will show you how to use the regular source code editor for editing HTML5 files directly on your hard disk.

In order to use the JSBin.com tool, that is the first one I recommend, you will open a new tab with your browser and you go to JSBin.

For the moment, we are going to use only HTML code. If you want to try the example from the course, just copy and paste the code in the HTML part on JSBin, and you see the result instantly. This is very practical because then you can modify the content, you can change the different values, the different elements… You can type your own text or your own HTML elements and attributes, and so on.

You can also save your work using the "Save snapshot" menu, and if you created an account, it's completely free. And you will be able to find your work the next time. You can share the URL; you can share the Web addresses of your work with friends. They won't to be able to break what you've done because it will be create a new version or clone your own work so that your friends can work on what you've done.

The other online tool, that is very practical, is codepen.io. This one is maybe nicer but I think that JSBin is more practical for typing code. This one is interesting because it's got a search engine, and you can look for existing examples made by others.

I just typed "button", and here I can see an example that create buttons. I can see the HTML code; CSS code and I can learn by looking at these examples.

In our case, if you want to create a new example, you just open codepen.io, you click on the "New Pen" button and you copy the HTML code in the HTML part on the editor, and you see the result. Don't forget to save to create an account also. And here, you can download the result for editing that offline if you would like using the "export" option (bottom right of screen in 'edit CodePen' mode).

"Export.zip". With CodePen, I've got a zip file and in the zip file, I've got index.html here. And if I look at the source, it's exactly the source from the example.

With JSBin, you can also download your result: "Download". And in that case, the name of HTML file will be built using the name of your example in the address bar of your browser. But if you click on it, you've got the same result. You've got an HTML file that is local in your hard disk that you can edit later on. You can see that the source code is nearly the same. The only difference is some comments that have been inserted at the top of the file. And if you want to create this example locally on your hard disk, I recommend to install some source code editor. In the course, we propose different ones.

The one I use is "Sublime Text". You go to SublimeText.com Web site. You download, it's free. You can also buy an enhanced version but the free version is ok. You download it. And once it's installed, you can work with it locally. I'm going to show you how to do that. What I recommend is that you create a directory somewhere.

Here, I'm creating a directory on my desktop… so, a new directory: "Example 1". And inside that directory, I will create the HTML file. I use the "New file" option from Sublime Text. I copy and paste the code. I use "Save as" and i will save the page as index.html file… you can name it as you like. "index" is very common for the main page of Web site. I then go to the desktop to the « Example 1" directory and i save the file.

And from Sublime Text, you can use the right click "Open in browser" and you can see the result. If I change the code here, my home page "Hello W3Cx students" and I want to see the result, I just save 'CTRL s' or command s on my Mac. I do "Open in the browser" or I can just reload the page, and I can see that I changed the content of the HTML file.

This is how you can work. Or you can also directly open an example you downloaded from JSBin or from CodePen. My download directory, I can find back the file that I downloaded when I was working with CodePen.io. And here, I have got HTML file. This is the code I prototyped, I tested first using an online environment.

1.2.2 HTML elements

If you are sitting at a coffee shop next to a table of Web developers, you will probably often hear these three words: "Elements", "Tags" and "Attributes".

"Elements" are the pieces themselves, i.e. a paragraph is an element, a header is an element, even the body is an element. Most elements can contain other elements, as the body element would contain header elements, paragraph elements, in fact pretty much all of the visible elements of the Document Object Model (that developers refer to as the "DOM").

As an example, let's look at a simplified version of the last HTML code we presented earlier:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Your first HTML page</title>
    <meta charset="utf-8"/>
  </head>
  <body>
    <h1>My home page</h1>
    <p>Hi! Welcome to my Home Page! My name is Michel Buffa, I'm a
      professor at the University of Côte d'Azur, in France, and I'm also
      the author of three W3Cx MOOCS.</p>
  </body>
</html>

Click the red circle next to HTML to unfold this HTML document structure (we can also say "see its DOM structure"):

Consider the figure above. It contains a single html element. It turns out this includes within it the entire content of your html file. If you click on the "html" red node, you'll find that it contains two components, a head and a body.

Clicking on each of those will reveal their respective contents. This structure is what we computer scientists call a "tree". Any given element (except for the outermost "html" element) is wholly contained inside another element, referred to as the "parent" element. Not surprisingly, the elements contained within a given element are its "child" elements. And, yes, children of a common parent are often referred to as "siblings".

Thus, in the example above, the top element is the html element, which contains just two elements, the head and body. The head element contains a title element and the body contains an h1 element and a p element. In a more typical example, the body would contain many more children, but for our purpose this is enough. p is for "paragraph" (the text between <p> and </p> will be separated by some space before the next element is displayed in the final HTML page rendering), h1 means "heading level 1", and will be rendered by default in bold with a bigger char size than any other text element, etc.

That may be a great picture, but how do we represent such a structure in a text file? Well, that's where "tags" come in.

1.2.3 HTML tags

<html>

<BODY>

<p>

<em>

<i>

<b>

"Tags" are what we use to organize a text file (which is just a long string of characters) such that it represents a tree of elements that make up the html document. Tags are not the elements themselves, rather they're the bits of text you use to tell the computer where an element begins and ends. When you "mark up" a document, you generally don't want those extra notes that are not really part of the text to be presented to the reader.

HTML borrows a technique from another language, SGML, to provide an easy way for a computer to determine which parts are "MarkUp" and which parts are the content. By using "<" and ">" as a kind of parentheses, HTML can indicate the beginning and end of a tag, i.e. the presence of "<" tells the browser "this next bit is markup, pay attention".

Whatever that tag (or "open tag") does, it applies to the content following the tag. Unless you want that to be the entire rest of the document, you need to indicate when to stop using that tag and do something else, so "<" and ">" are used again. Since elements are typically nested within other elements, the browser needs to be able to distinguish between the end of the current tag and the beginning of a new tag (representing a nested element). This is done by adding a "/" right after the "<" to indicated that it's a "close tag". To indicate the beginning and end of a paragraph (indicated by the single letter "p") you end up with something like this:

> <p>This is my first paragraph!</p>

The browser sees the letters "<p>" and decides "A new paragraph is starting; I'd better start a new line and maybe indent it". Then when it sees "</p>" it knows that the paragraph it was working on is finished, so it should break the line there before going on to whatever is next.

For example, the "<em>" tag is used for element that needs Emphasis. The "<" and ">" indicate that this is a tag, and the "little bits of text" in between tell us what kind of tag it is. To completely describe the element, it needs an open and close tag, and everything in between the tags is the contents of the element:

Most tags have open and close versions, but there are a few strange ones. For more info, we strongly recommend that you follow the W3Cx HTML5&CSS Fundamentals course, but we generally refer to the strange ones as "self closing" tags. Usually these tags represent an element that is completely described by its attributes, and thus there is no need for other content. So if you see something like this:

> <img src="https://goo.gl/pVxY0e" alt="Floating Flower"/>

… then you should know that the slash at the end of the open tag is sort of a shorthand for a close tag, so you won't see any other indication that this element is now complete. There are also a few tags that don't even use the "/" at the end, they just don't have any close tag at all. This works because all of the information this tag needs is declared in an "attribute".

The <img> tag is one of them, the "/" at the end is optional and can be removed entirely, this will still be valid HTML5.

> <img src="https://goo.gl/pVxY0e" alt="Floating Flower">

These elements, without a "/" at the end, are called "void elements". They are : area, base, br, col, embed, hr, img, input, link, menuitem, meta, param, source, track, wbr.

1.2.4 HTML attributes (6:01)

Most of what you can learn about HTML attributes is presented in the three W3Cx MOOCs about HTML5 (fundamentals, coding essentials, and advanced techniques), but we can introduce the idea briefly in this JavaScript course. Basically, a given element on your Web page can be distinguished by any number of unique or common attributes. For example, we've already seen how an image can be inserted in your Web page, and in that example we used the width attribute of the <img> tag in order to constrain the width of the image:

> <img src="https://pbs.twimg.com/profile_images/110455194/n666194627_2302_400x400.jpg"
>   width=200 alt="Michel Buffa plays rock&roll">

As you might guess, the <img> tag also has a height attribute, as well as others. Different HTML tags share some common attributes that we'll meet in the next section, which are particularly useful when coupled with CSS (id and class) for applying graphic styles (color, shadow, etc.), but can also have specific attributes (for example: the src attribute can be found in the <video>, <audio>, <img> tags but not on a <p> or on an <h1> tag!)

Try changing the value of the width attribute in the example below, or add a height attribute, and see the result:

<img
  src="https://pbs.twimg.com/profile_images/110455194/n666194627_2302_400x400.jpg" 
  width=200 
  alt="Michel Buffa plays rock and roll">

In this lesson, I will show you how to create from scratch an HTML page using some of the most common HTML tags. I will use an online tool for doing that. Like that, you will see some live preview of what I'm doing. I'm using "jsbin.com", and I will work on the HTML part of the editor, and you will see in the output part the results of what I'm doing. JSBin created for me a first template. Most common HTML5 starts with <!DOCTYPE html>, that tells the browser that the file is going to render will be an HTML5 file.

Then, you've got a first element that is called <html> and you've got the closing corresponding element that is </html>. It's a common way with markup languages to have opening and closing tags. And as you saw earlier in the course, when you've got such elements, they will have children. In the HTML tag, we will have a head element and a body element.

We've got a head element, and an empty body element, here.

In the <head>, usually, we specify the title: "First HTML page". And this title is what will be displayed when you put the cursor on a tab in your browser. Then, it is a good practice to indicate the language: "lang=en" (English). Like that, you will be better indexed by search engines. And then in the body of the document, we will add some really visible content. I start with the very common element, a very common tag.

The tag is the notation between < and > signs and the element is the conceptual thing - like, I'm writing a heading. "This is my first page". This is a heading 1, and you've got 6 levels for typing titles. And also very common, is a paragraph: <p>, </p>, I typed the opening and closing tags. And I enter "this is a paragraph". I write a subheading h2: "My hobbies are:". Ok, you see that the size of headings is different here. And if, in the paragraph, if I go to the next line, this doesn't have an effect here.

The only return to the next line I can do is, either write another paragraph inside the paragraph, or I can use another tag that is useful just for going to the next line without letting some space between paragraphs, it's called <br>. And <br> in that case, I can go to the next line.

If I want to enumerate my hobbies, a very common practice is to use lists. In HTML, you've got an unnumbered list that are composed of list items. For example: "I play guitar", "I code video games". These are my hobbies. "I like movies", etc. If I want, instead of an unnumbered list, a numbered list, I can use an order list.

With <ol> instead of <ul>. In that case, you can see numbers. Another very common element is the "img" tag that is useful for inserting an image in your Web page. The tag "img /" is a self-closing element, so you don't have an opening tag and a closing tag. And you will use different attributes for specifying the size of the image. For example, I want an image of 100 pixels width. You can indicate a description of an image, and this is a good practice. I'm going to insert a picture of Leonardo Di Caprio in this example.

And you've got other different attributes that will not be detailed this time but I recommend you to follow the HTML5 intro. Course and the other course about HTML5 provided by the W3Cx. In order to indicate which image, I want in this page, I need to use the "src" attribute that will take as a value the URL of the image.

For this example, I'm using the images.google.com for finding an image of Leonardo. I pick an image of Leonardo. I display the image and I've got the URL, here, in the address bar. I just copy and paste it and I've got Leonardo Di Caprio in my document.

1.2.2 CSS is for style (1:34)

Hi!

In this short video, I will show you quickly the principle of CSS. I recommend you follow the CSS Basics course from W3Cx if you want to learn this technology more deeply.

HTML is for structure. CSS is another language, by W3C, that it's useful for specifying the look and feel of these elements. How do they fit together…How many spaces between them…What color to use, and so on …

I'm just going to copy and paste some examples here, and you saw that the look and feel of the document changed. And it's, now, using shadows, borders, background colors, different character fonts and so on.

The CSS file, here, is just using what we call "rules". A rule is a selector, so this means for all "h1" elements in the page, I want to apply these properties.

And each property has a name 'color', and a value 'red'. So, you indicate, for each different elements you selected (the "h1", the "h2", the "p" the paragraph, for the image). You then indicate what you want to change. For example, for the image in the document, you indicate a box-shadow.

CSS, or Cascading Style Sheets, is a style sheet language used to describe the way an HTML or XML document should look to a user. CSS is where you specify the color, size, spacing, font and other visual aspects of the content that you create in your markup language document.

Usually, you see CSS used alongside HTML to describe the way a Web page looks and feels. You can have a Web page without CSS, but it would be very difficult to make it look the way you want with just HTML. This is why almost every Web page is a combination of HTML and CSS.

CSS • /si-ɛs-ɛs/ • noun

Stands for "Cascading Style Sheets". A style sheet language for describing how to display an HTML document.

Let's look at an example!

Let's take the (ridiculous) Michel Buffa home page again: Notice the use of some HTML tags: h1, img, p, body etc.

Now, we can add some "CSS rules" to the HTML, and see that the appearance of the resulting HTML page rendering is rather different (click on the HMTL/CSS buttons to see alternatively the HTML or the CSS code, remember you can always make changes to the code: change the color in the CSS part, etc.):

CodePen: My Home Page.

If you click on the CSS button on the top left of the previous codepen example, you see the CSS rules that have been applied to the HTML document. Let's look at the first one:

1. h1 {
2.   color:red;
3.   background-color:lightGreen;
4.   border:12px solid violet;
5.   padding: 5px;   
6.   border-radius: 15px;
7.   text-align: center;
8. }

This rule turns all the h1s in the document into red text, centered horizontally, on a light green background, with a violet border of 12 pixels (a solid border, not a dashed one), and this border has rounded corners made of arcs of a circle whose radius is 15 pixels.

The part before the opening brace (line 1) is the "CSS selector", it indicates the elements that have their properties changed according to what is inside the braces.

The part inside the braces is a set of properties and values that are useful for setting the look and feel of the selected elements.

Line 2 for example, says that all h1s are colored in red.

CSS rules are applied in sequence

After the previous rule is applied, then the second rule is taken into account, then the next, etc. In this way, you can see that all h2s is in brown (second rule).

The third rule uses what is called "a multiple selector":

1.  p, h1, h2 {
2.    font-family: cursive
3.  }

This one says that all p, h1 and h2 uses a cursive font character. The "," means "and also".

This is also how we indicate in the last rule that images and paragraphs should be moved to the right 50 pixels (property margin-left: 50px).

The id and class attributes

Basically, any given element on your Web page can be identified uniquely with an 'id' attribute, or grouped with a class of other elements by setting the 'class' attribute.

1. <p id="paragraph-1" class="regular-paragraphs">
2.   Call me Ishmael . . .
3. </p>

The paragraph above has a unique identifier: the id attribute whose value is "paragraph-1" and is part of a class of "regular-paragraphs". The letters inside the quotes have no meaning to the computer, they just need to be consistent. They are actually strings.

Again, the fact that the computer does not care what we put in those strings (except for some restrictions) means we can use them to convey meaning to a human developer. I could just as easily have said id='x' and class='y', but anyone looking at that would have no hint what the significance of x and y are. Best practice is to name these things to increase clarity, consistency and brevity.

Let's look at a modified version of Michel Buffa's home page example:

CodePen: Update CSS Rule

The last two rules first target the element whose id is 'hobbyTitle', in our case it's the second h2 element:

1. <h2 id="hobbyTitle">My Hobbies</h2>

And here is the CSS rule:

1. #hobbyTitle {
2.   font-family: 'caveat';
3.   font-size:40px;
4.   text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
5. }

Line 1 uses the "#" character in the selector, meaning that we're going to select an element by its id attribute. In this case, the selector equal to #hobbyTitle, selects the element that has an attribute id="hobbyTitle".

In that case, we use a funny char font called 'caveat' we took from the Google font service (see fonts.google.com), and in order to be able to use it in a font-family CSS property, we included its definition using a <link> tag in the HTML part of the document:

1. <head>
2.   <title>Your first HTML page</title>
3.   <meta charset="utf-8"/>
4.   <link href="https://fonts.googleapis.com/css?family=Caveat"
5.   rel="stylesheet">
6. </head>

The last rule targets all elements that have an attribute class="funny". Notice they can be different elements, we can have a p and an h3 element that have the class="funny" attribute:

1. .funny {
2.   color:purple;
3.   font-family: 'caveat';
4.   font-size:40px;
5. }

This rule changes the color, font family and size of two out of three paragraphs in the HTML element:

1. …
2. <p class="funny">I also play electric guitar and love
     coding WebAudio applications…</p>
3.   …
4. <p class="funny">Music, Movies, Video Games, Traveling, Family, etc.</p>

There are many, many, many different CSS properties in existence, and many different ways to select elements. We recommend that you follow the W3Cx CSS Basics and HTML5&CSS Fundamentals courses to learn more about CSS and about HTML5 basics.

Where can we put the CSS rules: in the HTML file? in another file?

You can do both!

You can embed the CSS rules between a <style>…</style> tag, located inside the <head>…</head> of the HTML documents, like in this example:

CodePen: Update CSS Rule.

This is OK if you do not have too many CSS rules. In general it's better to put the CSS rules in one or more separate .css files, like this ( open this example in Plunker)

Note that when you use an online IDE, you usually type/paste the CSS rules in a "CSS tab" in the online editor, and it hides all the "plumbing" for you (except the more complete ones such as Plunker or AWS Cloud9 that enable you to manage files in the cloud).

1.2.6 Live coding video: mixing HTML and CSS (3:49)

In this lesson, I will show you how you can include CSS in your HTML file, because we used online tools that hide, in a way, the location of the different languages.

If you take this example we described in the previous video, and if I export it using CodePen…and if I look at the zip file that has been downloaded, you can see CSS file are located in the subdirectory and in a .css file. This is a common way for organizing source code when you make a project with HTML and CSS.

And if we open the "index.html" file, you can see that, what is really going on if we look at the source code. Actually, in order to include CSS file in an HTML file, we use the "link" tag with the attribute "rel = "stylesheet" and "href" = the name of the file.

Here, it means the "style.css" file located in the "css" subdirectory. If I open this project with Sublime Text … I go to the directory I've just downloaded, and if I open the directory, I can see my hierarchy, here. The "index.html" file that includes the .css file.

And if I open the "style.css". I can see the CSS content here. And it's interesting to use a real source code editor because you've got auto-completion on the name of the properties: "background-color". You can use also some wizard for indicating or choosing the colors. If I take this color, it will give me directly the value and so on. You can edit your CSS, edit your HTML and when you save the result, you can open directly in your browser the file and see the result.

Here, I change the background-color of the heading 1. You can also use directly in your HTML, the CSS rules. In that case, instead of using the "link" element, you use the "style" element. <style>, </style>, and like that you can directly include, in the HTML file, the style. I've got "h1" CSS rule, that will indicate how the "h1" will be rendered and I'm no more including an external file.

If I save this and "Open in the Browser", I've got the same result here for the "h1". And if I look at the source code, I will see directly in the HTML, the CSS rule.

To sum up, you can have your CSS in external file or inside the HTML file using the "style" element.

1.2.3 JavaScript is the "interactive glue" (4:22)

Hello, your Web browser can only understand three different languages when you ask for a Web page to be rendered in the browser.

Let's take this document for example. We type the URL here, and the document arrives from a remote machine. And this document is a HTML source code that has been interpreted and rendered to give you a nice-looking document.

In this HTML, you can have CSS rules for specifying the look and feel of the document as we saw in the previous example. But you can also have Javascript code and Javascript when its run inside the browser can act as a glue between HTML and CSS. We will use Javascript to provide interactivity to the documents.

In this example, the first one on this page, I can click to change the content of the document. We modify what we call the document object model. It's exactly the set of elements that compose the page. When I click, I change the content of the heading. That was previously equal to 'My home page', and then when I clicked on the button, (this is an HTML button), this is how in Javascript we can indicate that we are going to do something when you click on it. In that case, it means call the function named "changeTitle" and the function is here defined between <script> and </script> elements.

In this example, the Javascript lies inside the HTML file and the function is a piece of code that can be run on different conditions. A click on the button executes these two lines of code here. 1st use: interact with the document object model, interact with the HTML elements of the page, add new ones, modify some existing ones, remove some elements.

It can be also use for interactive for the CSS styles of the page. In this example, I click on the button. And instead of modifying the content of the page, I just change the look and feel. I change the CSS style of the heading. If we look at the code quickly without going into details: when I click on the button "button onclick", I call the "changeTitleCSSStyle" function.

In this function will use the "style" attribute of some elements that correspond to the heading 1 and it will indicate that we want the text to be black, the background color to be yellow and the border to be 5 px wide, dashed and colored in red. This was just an example. What we can do with Javascript goes much further than this simple example. We can work with remote data, upload and download data from a remote server. We can use it for making multimedia players, for writing video games, for making music, for building tables on the fly to display some dynamic data that you came after, for example, we enter some text in the search form, etc.

During week 1, we will see other examples with different sort of applications of JavaScript. And, we will first give some explanations about variables, functions, some basics events handling: how to detect a click? how to debug the code? What tools we're going to uses for writing Javascript code, and so on. JavaScript is the third of the "magic trio": HTML5/CSS/JavaScript. It is the only programming language a browser can run (without installing any plugins or extensions), and it's a real standard of the Web (even if not standardized by the W3C).

Why do we call it "the interactive glue between HTML and CSS"?

Actually, this description does not do justice to JavaScript, which can do far more than just act as glue. JavaScript can be run outside of the browser (on a nodeJS interpreter on a remote server, or in scripts run by the operating system), but for this intro course, we focus on "JavaScript" in the browser.

In the browser, JavaScript lies between HTML and CSS and will be used together with these two languages. Let's take a look at two small examples:

Example #1: push the button to modify the heading of the page.

CodePen: Use JS to Modify CSS

Example #2: push another button to modify the CSS style (color, background-color, border) of a paragraph in the page.

CodePen: example JS update button to modify CSS style.

We have a closer look at how these examples work in the subsequent parts of the course. These examples are just here to show you how JavaScript can interact with the HTML content and the CSS styles of a Web document. Finally, note that, in these examples, the JavaScript code is located in the HTML of the document.

1.2.4 JavaScript history

JavaScript remains the most commonly used programming language with 67.7% of developers employing it in 2020 (see this survey's results).

How and why JavaScript was created

Created out of necessity, it is used to build 97.4% of websites, including some of the world's largest, like Facebook and YouTube. Without it, we would not have popular and useful web apps such as Google Maps and eBay.

JavaScript was born in 1995 as part of the work of Brendan Eich's team at Netscape (the ancestor of Mozilla). At that time, Netscape (a hero), in association with Sun MicroSystems (another hero), provided popular server and client-oriented solutions (Netscape Navigator, ancestor of Firefox) which depended on Java. (Sun Microsystems, the company that created the Java programming language, no longer exists, having been bought by Oracle Corporation in 2009.)

dotJS 2017 - Brandan Eich - A Brief History of JavaScript

But Netscape realized that Java wasn't a suitable language for in-browser use. Netscape thought of JavaScript at the beginning, as a lightweight Java.

JavaScript was initially inspired by Java, but in fact only some naming conventions remained the same. We highly recommend not even trying to look for similarities - this is actually a bad way to start learning JavaScript! We'd rather just say that the only real commonality between these two languages is their names. If you are coming to this course from Java, leave the Java thinking behind!

JavaScript quickly became a success following its first appearance in Netscape Navigator 2 in March 1996, and it was quickly integrated into other popular browsers. Microsoft also created its own version named JScript (and shipped it with Internet Explorer 3 in 1996 -- It was a dud).

Netscape Navigator 2 in 1996, with big buttons and plain HTML pages. CSS did NOT exist at that time!

Internet Explorer 3 in 1996 - look at the official Yahoo page :-) CSS did NOT exist at this time!

Towards the end of 1996, JavaScript was standardized by ECMA as the EcmaScript standard. So no matter whether you see it called JavaScript or EcmaScript, don't worry, it's the same thing. EcmaScript has continued to be released right up to the present day. MS still didn't play ball.

The present: what is the current version? What about ES6/ES2015/ES2016/ES2017/ ES2018/ES2019/ES2020/ES2021/ES2022? Are these the new names of JavaScript?
Since 1996, multiple versions of JavaScript have appeared. For a long time, the stable version supported by all major browsers deployed on computers and smartphones was EcmaScript version 5 from 2010, but in 2015, a new version known first as EcmaScript 6 or ES 2015 came out with lots of new features (classes, etc.). Since then, every year a new version is published, with some adjustments/novelties. The latest official version is ES2021.
Back in 2015, ES2015 was a pseudonym for the 6th version of the JavaScript programming language to be approved by ECMA International, the standards group responsible for vetting and approving different versions of the language. In June 2015, ECMA International approved the 6th edition of the language. The name, ES2015, was used because the latest version of JavaScript is identified as the 2015 version of ECMAScript (the alternative name for JavaScript). Read this blog post about all these naming incongruities!
At the beginning, ES2015 was referred to as ES6 and before that, Harmony. Moving forward, ES suffixed with the year of the latest approved standard is the naming convention. The next version was called… ES2016, etc.!

Browser vendors do not wait that ECMA standardizes a version as they start implementing it during the standardization process, which can take months or years (they also contribute to the standardization process all along its life cycle).

The new open development process adopted by the ECMA TC39 committee decided that every year, a new version will occur. This annual publication rate has been effective since 2015.

The current edition of the ECMA-262 standard is the 13th edition, published in June 2022 and is known as ES2022.

Beware: even on recent Web browsers the whole supported feature sets of the latest versions are generally not completely implemented, as it takes time for browser vendors to follow the standards!

Current support for ES2020/ 11th version (June 2020):

There is no easy-to-read table of current browser global support, but caniuse.com can be used to check feature by feature which browsers support them. For example, this link shows the support for the new "javascript private class fields" feature.

Up to date browsers usually support more than 90% of the features from the version corresponding to the previous year. For example, in 2020, there is good support for ES2019, while certain features from ES2020 won't be implemented before some months.

Which version will we learn?

First of all, this is an introductory course! Not all features of JavaScript need to be covered, in particular the ones that you cannot run in your browser without using advanced tools (there are tools, such as Babel, that can turn ESxxxx source code into ES5 code that can be run in nearly any browser, but they are tricky to use and not for beginners).

We will cover all the important features of the last version that are relevant for an intro course.

Is JavaScript an important language to learn? What about Java, PHP, C#, Python, Ruby and all the others?

JavaScript is the only programming language you can run in your browser. Without JavaScript there would be no games, no fancy dynamic HTML forms, no interactive maps, no Gmail, no YouTube, no Twitch TV, no Netflix….

JavaScript is integrated into nearly every popular Web browser and is probably the most frequently used language in the world. More than 90% of Web documents now use JavaScript too.

Every computer, smartphone, and tablet uses JavaScript many times a day within the browser and even as native code! Indeed, some applications are compiled from their JavaScript/HTML/CSS version into "classic" applications that can be run without a browser. This compilation step can give an extra performance boost, the NetFlix application, or Office 365 are such applications.

In the beginning, JavaScript was invented to work not only on the client side (in Web browsers) but also on the server side (on the Netscape HTTP Web server back in 1995).

In recent years this trend has returned, thanks to the appearance of the Node.js server/JavaScript interpreter. It's common to see JavaScript applications running on a remote Web server. Mastering JavaScript basics is highly recommended before trying to learn JavaScript server-side programming.

JavaScript is an interpreted language

JavaScript is an interpreted (or just-in-time compiled) language, which means that the code is converted into a machine language at, or just before, runtime. The most popular JavaScript engines are:

SpiderMonkey (included in Mozilla Firefox)
JavaScriptCore (included in Apple Safari)
Chrome V8 (included in Google Chrome, in the Node.js server)

External resources

History of JavaScript on a timeline

1.2.5 Discussion and project

Here is the discussion forum for this part of the course. Please either post your comments/observations/questions or share your creations.

a2. Suggested topics

Did you know about JavaScript history? Do you have stories to share?
What online tools do you know about, that could be useful for other students?
Do you prefer trying small examples using an online IDE or using a source code editor and working with files located on your hard disk?
Do you know a good service for hosting Web sites made with HTML/CSS/JS files?

Optional project

Try to make a simple home page and add some interactivity to it, adapting the examples provided in the course (change the HTML content by clicking on a button, change the CSS style of some parts of the document).

1.3.1 JavaScript Overview (the best way to learn JavaScript) (8:42)

What it the best method for learning Web Development?

Take a look at one of my websites; 'Web Programming with JavaScript and Python'.

Now, what it the best method for learning JavaScript?

When you are a complete beginner, I will recommend to look at examples, tweak them, change small things, try to understand what the syntax looks like. Even without deep explanations, without reading a book, or studying in details the different concepts of language, you can learn a lot.

To learn everything, a great start is W3Cx. Google it.

In this section, I propose that you look at a small example without understanding the details, and try to tweak it.

Here is the example we provide. It's just an example that draws, that plots, a mathematical function. You can use the mouse wheel to zoom in, zoom out, and you can look at the HTML code.

There is only very few CSS and very few lines of JavaScript. How can we do the such a complex result? Complex thing drawing the grid with axes, with labels, with a curve, and interact with the mouse.

With only 10 lines of code: it's because we are using what we call an external JavaScript library. Actually, we are using 2 of them here. Because, this one: the "function-plot" JavaScript library, is using internally another one you must include also in the document.

What I propose is that we will start looking at this example. The best way is to click on "Edit on CodePen" label here, it will open the code in the CodePen.io online editor. And… just look at the HTML part here.

CodePen; D3 Plotting.

Okay, we can just look at the HTML part and zoom in a little bit. What do we see? We can see that it uses 2 libraries here between <script> and </script> elements. This is how we can insert in the document an external JavaScript file. In that case, it's a remote JavaScript file because we are downloading it using http. It uses this "d3js" JavaScript library that is located at "d3js.org".

You can open this in another tab and you will see the documentation and the Web site, the homepage of the Web site, for the "d3js" library. By the way "d3js"is one of the most popular JavaScript libraries for visualizing data.

Let's go back to our example, so you can just tweak the different elements.

If I want to plot a cosine instead of a sine, I don't need to understand the whole syntax here, but I guess that by just typing "cos" here, it will do something.

And indeed, I have just drawn a cosine. If I change this from red to "green", it changes the color. If I change the grid, that is by default "true", if I say "false", I don't have a grid anymore. Okay let's put it back. And I've got some "xAxis" domain: "-1, +1". If I change that for "-10, +10", I can see the result. It's more interesting, if you change this for the x values… instead of going from PI to 2 PI.

I went from 0 to 10 PI. I can see the result here, and so on… Now that you tweak the example, you can try to understand what is going on. Okay, this thing is a name followed by a parenthesis. An open parenthesis with a closing parenthesis. It's a function call. When you've got something like that, in JavaScript, function parenthesis with something in the middle, it's called a "function call".

We're going to call a function, that, in this case, we haven't written, so it's coming from one of the external libraries. In that case, it's the "function-plot" library. What is inside? There are the parameters.

And I can use an external name. I can declare that, here, it's equivalent. You see that it works the same here, but I've just separated the two things. If I put directly this thing inside here, like it was before, it still works. Okay, so what is this syntax? In JavaScript, when you've got braces like that, opening braces and closing braces, it's called an object.

And inside an object, you've got properties and values. The properties have names: target, data, function, color, grid. And the values are after a column characters. The target is my function. The data is this thing. The grid is true, and so on…

You separate the different properties of the object using a comma and sometimes, you can have some properties that in turn, have a value that is an object. The xAxis property is equal to an object that has a property domain, that has for values: "-1, 1".

And when you've got brackets, opening and closing brackets, it's like that… That will define arrays of things in JavaScript. And an array of things is a list of enumerable elements. In that case, the domain has two elements: the minimum value and the maximum value.

And here you can see that the data that is plotted, the cosine function, is also an array. If I use the comma and I introduce a second element here. For example, the sine function, and if I change the color, let's make it pink…

Look at the result: I've got 2 different functions that have been plotted in my graph. I can, instead of using this, I can maybe plot x2 (x square 2), like this, okay. It should work. Ok, we can see a little bit of it here.

Maybe we will change the domain, so instead of stopping at 1, we go to 10. And if we look at the values, we see the x square function that is a bit better, and if we just plot it for x=0 to x=2… …In that case, I've got another scale for looking at the functions.

In this first example, you saw how to use an external library, what is the syntax to call a function, and how we can define objects in JavaScript by using a set of properties and values, separated by a comma. And we also had a first encounter with what we call arrays, that are elements separated by commas inside brackets.

FIRST: learn by looking at and tweaking the code in the examples

Well, there is no definitive answer to this question, but I'd recommend firstly looking at small examples, tweaking them and trying to guess what they do. You will rapidly discover that you can learn a lot just by modifying a few lines of JavaScript code, even if you do not understand the whole thing.

During module 1, we give you some basics:

How to write a simple HTML/CSS/JS page,
Suggest some regular source code editors to use,
How to use online environments that run in the browser, and offer an "instant preview" of your creations. These tools are generally not suited for full scale projects, but are really valuable for testing and learning.
We present many examples (some short and some bigger ones) that will show what can be done with JavaScript. We strongly encourage you to tweak them, look at the code, download them on your hard disk, etc. Even if you do not understand everything, have a go at modifying them; further down this page we outline such an exercise.
In further modules, we will be revisiting the examples, and discussing them in greater detail and with fuller explanations.

SECOND: take some time to carefully read the sections titled "What you've learnt / let's detail …."

During the course, we provide extra "reference pages" that detail some important parts of the language. For example, in a later section, we explain the concepts of "variables", "values", "operators", "output", etc.

Here is an example - we provide some clues, but it's your job to tweak it!

Here is an example that uses an external JavaScript library useful for plotting math functions. Look at the JavaScript code (click on the JS button) and try to guess where the function is specified, where the range for the x and y values is set, etc. Notice that you can use your mouse wheel to zoom in/out the function plot.

CodePen: D3 JS Graph

By looking at this example (HTML and JS code), you note a few things:

Two lines in the HTML code that correspond to the inclusion in the document of some external JavaScript code:

1. <script src="https://d3js.org/d3.v3.min.js"></script>
2. <script src="https://mauriciopoppe.github.io/function-plot/js/function-plot.js"></script>

We will examine this soon in a later section of the course, but, in brief, it means that we will use the d3js plotting library and another from github (a famous repository for open source contributions), and located in the github account of a person named "mauriciopoppe", the repository is named "functionPlot" ( "functionPlot JavaScript library").

Then, looking at the JavaScript code of the example (click the JS button on the CodePen example), we see:

1.  functionPlot({
2.    target: '#myFunction',
3.    data: [{<
4.      fn: 'sin(x)',
5.      color: 'red'
6.    }],
7.    grid: true,
8.      yAxis:{domain: [-1, 1]},
9.      xAxis:{domain: [0, 2*Math.PI]}
10. });

Ok, the syntax looks strange if you are not used to JavaScript, but I bet that you guessed that the function plotted is "sin(x)", that the color of the curve is "red", that the range of the x values is [0, 2*PI], and the range of the y values is [-1, 1].

Your job:

try to plot sin(x^2),
try to change the domain for the x and y values,
try to change the color of the curve, etc.

To do this:

Edit directly the JS code in the embedded example, after a few seconds, you should see the updated result in the "Results" tab,
…or just click on the "Edit on CodePen" title on the top right of the embedded example, then change the code. Normally you should see the results of your modifications as soon as you stop typing (we call this "live coding"). (Here is an example of what you can obtain as a result).

What can you guess from this example?

A function call

You can think of this code in this way:

1. functionPlot(…);

Where the "…" corresponds to some sort of parameter. When you see a name followed by two parentheses (maybe with something in between) followed by a ";", this is "a function call".

A function is a piece of code defined somewhere else, that can accept parameters (the "thing" between the parentheses), and that will do something. In our case the function's name is "functionPlot" and we can assume (or we read the documentation of the library) that the goal of this function is to plot a mathematical function, as its name tells us.

Function parameters

The "thing" between parentheses is what we call "the parameters of the function": the data we pass to the function so that it can plot different math functions, with different colors, with different ranges for the x and y values, with or without a grid, etc.

Let's have a look at the parameters we used in our example (the ones you tweaked). They are in bold in the source code we saw earlier:

1.  {
2.    target: '#myFunction',
3.    data: [{
4.      fn: 'sin(x)',
5.      color: 'red'
6.    }],
7.    grid: true,
8.    yAxis: {
9.      domain: [-1, 1]
10.   },
11.   xAxis: {
12.     domain: [0, 2*Math.PI]
13.   }
14. }

JavaScript object

In JavaScript you can have simple values like: 2, 5, "hello", "3.14", and you may also encounter more "structured" values that we call "objects". In Module 3 we will address JavaScript objects, but for the moment we will just present them through examples, without too much detail.

A JavaScript object can be defined by two braces with a set of properties/values inside, separated by a comma. Here is a simple object:

1.  {
2.    givenName: "Michel",
3.    familyName: "Buffa"
4.  }

We use the ":" separator between the property name and its value. We use a comma between two properties, and we omit the comma after the last property (or before the ending brace).

In our examples, the properties of the object that is passed as a parameter to the functionPlot(…) call are in bold.

They are respectively:

target: the CSS selector that corresponds to the HTML element that will contain the plot. Look at the HTML code (<div id="myFunction"></div>), the id value corresponds to target: "#myFunction" in the object.
data: this is where we indicate the value of the function(s) to be plotted. We talk about this in greater detail below.

grid: this can be true or false (we call these "boolean values") and indicates whether or not we want a grid to be drawn in the background.
xAxis: the value specifies the domain (range) for the x values…
yAxis: the value specifies the domain (range) for the y values…

Notice that after each property (color, grid, etc.) there is a ",". Notice that between the name of the properties and the value there is a ":", etc…

Embedded objects

If we look at the values of the xAxis and yAxis properties, they are also objects.

1.  xAxis: {
2.    domain: [0, 2*Math.PI]
3.  }

The data object is even more complicated:

1.  data: [{
2.    fn: 'sin(x)',
3.    color: 'red'
4.  }],

Instead of containing another object like xAxis or yAxis, it contains another sort of object, but inside brackets! In JavaScript, brackets are used to create arrays of "things" (multiple, enumerable things). In this example, the array contains one single object that has two properties:

fn: the value of the function to be plotted, in this case sin(x),
color: the color of the curve

In arrays, the different elements are separated by commas. Let's try to plot an additional function in our example. We will add f(x) = cos(x) to our example, with a different color:

1.  data: [
2.    {
3.      fn: 'sin(x)',  // First function
4.      color: 'red'
5.    },
6.    {
7.      fn: 'cos(x)',  // Second function
8.      color: 'blue'
9.    }
10. ]

CodePen: D3 JS Graph, #2

Conclusion

Just by looking at one example, and without going into the boring details, you saw:

How to plot a function using a third party library and how to include it in your code,
How to change some parameters without knowing JavaScript in depth,
You had a first encounter with concepts such as: "a function call", "function parameters", simple objects, embedded objects and arrays (we will discuss them as we move through the course).

1.3.2 What can be done with JavaScript (2:23)

Live coding transcript what can be done with JavaScript.

Hello! What can be done with JavaScript? Let me show you some examples that are the most common ones.

First, you can change dynamically the content of a Web page.

Here I've got a Web page, I click on the button and I change the content of the page.

Another thing we can do is to change dynamically the CSS style of some part of the document. I click on the button and I change the style of the title.

You can also use, from your JavaScript code, different objects, methods and functions that are defined in your browser, in what we called standard HTML or standard JavaScript APIs. HTML5 comes with many of these APIs for the geolocation, for animation, for making music, and so on. In this example, we use the standard W3C geolocation API that comes with HTML5. You can get from your browser, your current latitude and longitude.

And here, we also use the Google Map APIs; we pass it the longitude and latitude and it displays the map centered on the current position and also displays the surface address. Here we go. I'm located near Antibes in the south of France.

You can also work with remote data. So in this code, I'm just sending what we call an Ajax request to a remote server to get a list of users… and once I get this list of users, I just use the HTML table JavaScript API for building dynamically tables. And I use this API to display the data that just came from a remote server.

There is another example, that uses another database, another online database, for getting the members of a rock band. So, I type "The Beatles". I got from the remote server the list of the members of The Beatles. So, these were the most typical uses of JavaScript Web sites.

What can be done with JavaScript:

1) Interact with the HTML and CSS content of a document, respond to events

We have already seen three examples in previous parts of this week's course material.

CodePen: Change HTML using JS

This first example used the selector API for selecting a particular element in the document (the main title) and the DOM API for modifying its content.

An API is an application programming interface. In the case of JavaScript, the DOM API is implemented natively by the browser, and you can call several functions/methods or access properties of the DOM: an object that represents the document (the Web page).

It uses the selector API to target a particular part of the DOM (in our case, the main title of the page), the HTML element with an id attribute equal to "mainTitle". The selector API uses the same syntax as CSS to select elements in the document. In our case, "#mainTitle" is a selector value that means "the element whose id is equal to mainTitle".

var title = document.querySelector("#mainTitle");

It uses the DOM API to change the HTML content of the selected element:

title.innerHTML = "This new title has been changed from JavaScript!";

It listens to click events in order to call the changeTitle() function when we click on the button:

1.  <button onclick="changeTitle();">Click me to change the
    title of the page</button>

And it executes the whole action (changing the title text) in a function (a block of code that is executed only when we call it by adding a parenthesis after its name, followed by a semi colon):

function changeTitle() {
  var title = document.querySelector("#mainTitle");
  title.innerHTML = "This new title has been changed from JavaScript!";
}

CodePen: Interactivity between JS & HTML

The second example is nearly the same except that we changed the name of the function, and instead of using the DOM API to update the text content of the main title, we use its style property to change its look and feel. Using the style property is a way of altering the CSS property values of this HTML element.

function changeTitleCSSStyle() {
  var title = document.querySelector("#mainTitle");
  title.style.color = 'black';
  title.style.backgroundColor = "yellow";
  title.style.border = "5px dashed red";
}

title is in reality what we call "an object" and style is a property of the title object. The style is an object as well and has attributes that correspond to the different CSS properties we set. For example, style.color returns the color that element has set on it. By calling title.style.color = "yellow"; you can apply the style change dynamically.

Some of you may be wondering what happens when the CSS property being set has a hyphen. The syntax has to be different here, because, for example, if you write title.style.background-color, JavaScript will try to subtract color from the title.style.background notation, which is not what you want to happen. To stop this problem from occurring, all the CSS properties are written out in CamelCase: the CSS name background-color becomes backgroundColor, text-size becomes textSize, border-color becomes borderColor etc.

Don't worry, we will return to this later in this course, these first examples are just here as an introduction.

The third example (outlined in the previous section), which showed how to plot math functions, illustrated that with a few lines of code you can reuse code from others (a third party JavaScript library).

2) Use numerous APIs in addition to the DOM and selector APIs: multimedia, drawing, animating, geolocation, webcam, etc.

Your browser comes with a lot of different "libraries" that are called "standards APIs" for "application programming interfaces". Such APIs are "W3C standards" and are present in all Web browsers that follow the Web Standards. You will have APIs for manipulating multimedia (audio and video), geolocation (getting the longitude and latitude), orientation (on mobile devices), accessing the webcam or the microphone, etc. In a later section we will provide a set of examples that use some of the most useful APIs provided by your Web browser.

Example of an HTML page that embeds an interactive OpenStreet Map (you need to click the CodePen logo on top right to run this example. For security reasons it cannot be run inside this course page).

CodePen: example geolocation mapping

3) work with remote data / speak with a remote HTTP Web server

You can also download or upload data from your browser to a remote Web server. When this is done from JavaScript the popular term to describe such operations is "AjaX" (Asynchronous JAvascript and Xml), even though XML is not used in any examples you'll see in this course (XML is a language for describing structured data that was very popular a few years ago).

Here is an example that will display the current and past members of famous rock bands:

CodePen: database lookup band members

1.3.3 Where to put JavaScript code (7:13)

Welcome!
In this lesson, we will just look at the different locations where we can put JavaScript code. The first place where you can put JavaScript code is inside an HTML document, using the <script> and </script> tags.

We've prepared an example, it's called the "Example 1" in the page, that shows how we can display the value of a variable. A variable is a location in the memory of the computer where we are going to store some values. And the variable has a name and it's declared using the "var" keyword. There are others possibilities we will see later.

CodePen: Example 1: JS in the .html file

Here we've got the variable called "x" that has the value of 2. And, we use some strange instruction "document.body.innerHTML" for adding to the body of the document some HTML code. "document.body" corresponds in JavaScript to the body element of the document, and the "innerHTML" property corresponds to its HTML content. By doing this, we are adding a bold element JavaScript code executing the value of the variable x=2 and we display the value of the x variable in bold.

CodePen: JS in the .html file.

This is the result of the execution of this code. And this code is not in a function, so it's executed as soon as the page is rendered. When the browser receives this document, it will first display the "h1" then display this paragraph, then executes this code. It will define the variable x, assign the value "2" to it, and then add this string, with the value of "x" inside, to the body of the document.

And finally, we display in the dev tool console: "console.log("JavaScript code executed")". We can open it by clicking on the console button in CodePen, or we can also open the devtools using the "F12" key or "ctrl+alt+i" or "cmd+alt+i" on a Mac. And you see that the "console.log" message has been displayed in the devtool console of your browser.

Here, notice that we use the "script" element directly into the body of the document. Another possibility is to a put this code in the head of the document. It's also common practice because it separates clearly the JavaScript code from the HTML body of the document. In that case, the result is the same, except that the JavaScript code is displayed before the rest of the page.

Here we defined the variable x, we added it to the body of the document, and later on we display the body, where the browser renders the body of the document. Okay, what is better? It depends on your application. For the moment, just stay with knowing that you can put scripts in the body or in the head of a document.

Another possibility is to use an external JavaScript file. In that case, the same way we showed you how to use an external file for storing the CSS code, we can use the "script" tag with the "src" attribute to include in the HTML document an external JavaScript file.

Notice than we can include more than one JavaScript file if we like, like this. In that example, we are including 3 different JavaScript files sequentially.

I prepared for you an example you can download - it's called "Example_3.zip". I click on it, download it, unpack it, and inside this element, I've got an HTML file. And I open it with my Sublime Text editor.

And what I've got here, is that you can see in the HTML header in that case but you can also put this in the body if you like, we included a "script.js" file located under the "js" directory.

I can also open this file. I can see that I display the message called "Function executed" and a function "addSomeText" directly in the script. When is this executed? It's executed when we click on a button. Let's have the button "onclick" call the function "addSomeText".

Let's execute this, here is the result: "Click me to call a JavaScript function that will add some content to this document". I click and you see that the function have been executed. And finally, the last thing you can do, is to include an external JavaScript source code.

You've got an example here, where we use the "paper.js" library and the "paper.js" library, if I open the "paper.js" Web site, is a library for making graphic animations in JavaScript, so you can have plenty of funny things you can do. Things like that, or things like this… Just to be able to use what this library proposes, you need to include the library. If you read the documentation, they will tell that you what you need to include…

Okay -let's open it in CodePen- …you need to include this JavaScript file. And once you included this JavaScript file… a bit the same way we used the external library for plotting functions… then you can use some functionalities that come from the "paper.js" library. You need to read the documentation to learn how to use it, but here is an example: a set of squares, animated squares, that follow the mouse.

JavaScript code can be located in different places

In your HTML code between <script> and </script> tag
In local files, usually ending with the .js suffix (i.e: in a script.js file), and included using, for example, a syntax such as: <script src="style.js"></script> tag
In external files located on the Web, using their URLs, also using the <script src="https://www.aserver.com/…./js/script.js"></script> tag

Here are some examples:

Example #1: the JavaScript code is included in an HTML file using the <script>…</script> tag

First variant: in the <body>..</body> of the HTML document

Typically:

1.  <body>
2.    …
3.    <script>
4.      var x = 2;
5.      // show a message in the body of the html document
6.      document.body.innerHTML += "JavaScript code executed. The value of the variable x is: 
          "+ x + "";
7.      // also print a message in the devtool console
8.      console.log("JavaScript code executed");
9.    </script>
10.   …
11. </body>

Here is this first example on CodePen:

CodePen: JS in HTML

Old JavaScript examples may use a type attribute: <script type="text/javascript">. The type attribute is now obsolete and should be ignored.

Second variant: in the <head>…</head> of the document

In this example, the <script>…</script> element is placed in the <head>..</head> section of an HTML page.

This time, we placed a JavaScript function that is invoked (called) when a button is clicked:

1.  <head>
2.    <script>
3.      function addSomeText() {
4.        // append a message in the body of the html document
5.        document.body.innerHTML += "
Function executed!";
6.      }
7.    </script>
8.  </head>
9.  <body>
10.   <button onclick="addSomeText();"Click me to call a JavaScript function that will add
11.     some content to this document
12.   </button>
13. </body>

Here is this second example on CodePen:

CodePen: Plotting Functions in JS.

Example #2: put the JavaScript code in local .js files

Putting JavaScript code in external scripts files is easy, and offers many advantages:

It separates HTML and code (and also CSS code, if you use external CSS files)
It makes HTML and JavaScript easier to read and maintain
JavaScript files can be reused more easily in other projects
Cached JavaScript files can speed up page loads

A typical example:

1.  <head>
2.    …
3.    <link rel="stylesheet" href="css/style.css">
4.    <script src="js/script.js"></script>
5.  </head>

To use an external JavaScript file:

In the HTML, put the name of the script file in the src (source) attribute of a <script> tag, like in the typical example above,
JavaScript files must end with the .js extension,
Do no use any <script>…</script> tag in a .js file!
Using an external JavaScript file with <script src="…"></script> is 100% equivalent to using <script>…</script> with the file content between the opening and closing tags.
It's possible to use more than one JavaScript file, just use multiple <script src="…"></script>

Example that uses more than one JavaScript file:

1.  <head>
2.    …
3.    <link rel="stylesheet" href="css/style.css">
4.    <script src="js/script1.js"></script>
5.    <script src="js/script2.js"></script>
6.    <script src="js/anotherOne.js"></script>
7.    …
8.  </head>

A typical HTML/CSS/JS project folder structure, when working with external local files

It is good practice to locate CSS files in a css subfolder, and JavaScript files in a js subfolder.

In this example, we have just one CSS file and one JavaScript file:

Contents of the index.html file:

1.  …
2.  <head>
3.    …
4.    <link rel="stylesheet" href="css/style.css">
5.    <script src="js/script.js"></script>
6.  </head>
7.  <body>
8.    <h1>Example 3: JavaScript and CSS in local files!</h1>
9.    <button onclick="addSomeText()">Click me to call a
        JavaScript function that will add some content to this
        document</button>
10. </body>
11. </html>

Content of the js/script.js file (JavaScript file):

1.  function addSomeText() {
2.    document.body.innerHTML += "<p>Function executed!</p>";
3.  }

Content of the style.css file:

1.  p {
2.    color:green;
3.  }

How to run this example:

Download the zip file of this project: Example_3.zip
Unzip/unarchive it somewhere
Double click the index.html file, this will open your Web browser and load the index.html file.
Click on the button in the page

Example #3: use external references to JavaScript files/libraries located on the Web

External JavaScript libraries (they are just big JS files) can be also referenced with a full URL, like in this example:

1.  <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js"></script>

Here, we just included in our HTML document the excellent paperJS library that can be used to make fancy animations in the HTML canvas element - we will use it later in the course.

Once the library is included, the JavaScript code you will write can call functions located in this library. This "reuse existing" work made by others is really common when working on JavaScript projects.

Here is a running example that uses the paperJS library, included using an external URL:

CodePen: Example paperJS

1.3.4 How to debug JavaScript

Hi, every programmer will make errors. It is very important that you learn how to debug your JavaScript programs, how to see your errors, how to write messages for debugging, tracing what is going on, etc.

Every browser comes with a very powerful set of tools called the devtools.

With my Mac, I can use command "alt + I". So the thing we will going to use the most is the console. A console loads problems or errors. So, if I can clear the messages from here and this is the place where I will see the different error messages I've got in my code.

Here is an example in JsBin. So, you can click here to see the console or it’s the same thing you can get here.

If I type something here: console.log("hello"). So this is the instruction you will use the most for printing error messages in the dev toolconsole. If I execute it, it prints "hello", and I can see also in the browser built in console: "hello".

This just a comfortable way to display error messages. If I make some errors, here I've got a script that will display, as soon the page is loaded, "Some JavaScript code has been executed".

If I run the code, here, it displays "Some JavaScript code has been executed".

If there is a mistake, if I make an error here, for example, I write console with two "l". I can see, in red, some messages: "consolle is not defined", bla, bla, bla…

When you use some online tools like JsBin or CodePen, and so on, it's a bit difficult to debug your code because you are debugging at the same time the code of the tool itself that is written in JavaScript too. Each these tools comes with a way to run your code in what we decode ‘standalone mode’ or ‘debug mode’.

With JsBin, I click on the small black arrow, here. And if I open the built-in browser console, I can see the error message.

And here, if I click on the link on the right, it will just show the line where my program made a mistake display, as an error. Here, I can see that console needs only one "l", I can fix that.

Another interested thing is that when you use "console.log", you can use it to display some variable values. If I declare a variable named x with a value of 10, I can use «console.log" to display the value of x, using the "+" operator. In that case, if I run my code it will help me by displaying the value of different variables when “console.log” is executed.

With CodePen, another tool we use a lot in the course, you've got the debug mode. Just save your work and click on "change view mode" we’ve got "debug mode" here. And you can also open the console. If you click on the console button here, you can have a console here, and see what is going on. CodePen does not display the error messages, so is better for debugging to click on the "debug mode", here.

You've got the page in standalone mode, and you can open the dev tool console. With local files, I’ve got another example here with HTML code that uses it some JavaScript code from a "script.js" file. If I make an error here, an error in the name console, I save. I can run the result: "Open in browser". I click, it does nothing. I open the dev tool console and I see where the problem is and I can click on the link on the right and it shows the line with the error.

Let's introduce what is debugging.

You will make errors!

When you are developing a Web Application that contains JavaScript code, you will make errors.

Repeat after me: "I WILL MAKE ERRORS!" ; "I WILL MAKE ERRORS!"

There will be error messages, and you will need to print messages for debugging your code. We will see more advanced debugging techniques at different points in this course, but for the moment, let's see the basics of JavaScript debugging: seeing error messages in the devtool console, or in the "console tab" of your source code editor.

We will not look at the JavaScript syntax here, but more at "JavaScript in the browser", how it works, how to start writing code, etc.

First of all, you need to find a way to debug your code and see errors. If your work does not produce any results, you need to know why!

Your Swiss army knife: your browser devtools, especially the devtool console!

For this you will use the dev. tools of your browser. Press F12 (or ctrl-shift-i) in Windows or cmd-option-i in MacOS to open the dev. tools, then go to the console tab: this is where errors will be displayed, or messages of your own (use the console.log(string) JavaScript function in the JavaScript code embedded in your html page). In the console, you will be able to type any JavaScript command.

Let's look at this example below (or online as a JS Bin):

1.  <!DOCTYPE html>
2.  <html lang="en>
3.  <head>
4.    <meta charset=utf-8 />
5.    <title>Web Audio API</title>
6.    <script>
7.      console.log("Some JavaScript code has been executed");
8.    </script>
9.  </head>
10. <body>
11.   <h1>JavaScript debugging using the dev tool console</h1>
12. </body>
13. </html>

The simplest way to add JavaScript code in an HTML page is to use the <script>…</script> element.

The code in this example is executed sequentially when the page is loaded: the JavaScript code is executed before the browser could see the rest of the page (as the <script></script> is located before the <body>).

The H1 element, for example, does not exist in the Document Object Model, and has not yet been displayed when the JavaScript code is executed. If we move the <script></script> at the end of the document, then the H1 would have been built before the JavaScript code is executed.

The only line of code we have is console.log("Some JavaScript code has been executed");

This means "display in the JavaScript console the message…". If we open the console tab provided by jsbin.com in a dedicated tab (that redirects all console.log() messages), and re-execute the page (just type a space at the end of a line to re-render the page and display the message in the console), we see the message in the console tab, as well as in the dev. tools console. This is illustrated by the image below (or online):

It is also possible to use the "real dev. tool console", and for this, I recommend running the application in a single window, not in the Js Bin editor. Press the black arrow on the top right of the output window - this will render the page as a standalone Web page, then press F12. You should see:

Ok, now, let's make an error: change console.log() into consollle.log(). Let's see what happens:

And if we run it standalone and use the dev. tool console:

And if we click on the line number to the right, the dev. tool shows the source code centered on the line that caused the error:

Without such tools, debugging JavaScript code is impossible. You need to look at some basic tutorials on how to use the dev. tools of your browsers, since they differ from one another in the way they work - although the principles remain the same.

1.3.5 Discussion and projects

Here is the discussion forum for this part of the course. Please either post your comments/observations/questions or share your creations.

Suggested topics

Which source code editor(s) do you use?
If you use a source code editor that supports plugins/extension modules, which one do you recommend? Please share your experience with us in the forum!

Optional projects

Share your versions of the examples from the course with improvements and changes!
We are pretty sure that you can do something better with the "rock band member example". Share your best work(s) ;)
Try to experiment further our "best way to learn JavaScript" and try to tweak an example of your own that uses the paperJS library. Start from a simple example from the paperJS Web site, modify it and share it in the forum. You can look at the example from the course if you want to include paperJS in a shareable CodePen example (we use a version of paperJS located on a Content Delivery Network, a "CDN", no need to download it, and it's very easy to use it in online IDEs such as CodePen, JSBin, etc.).

1.4.1 Creating Your First HTML/CSS/JS project

Let's create a small HTML/CSS/JS project together.

It's time for you (and me) to create a small HTML/CSS/JS project, step by step, following some best practices. We will do this using different tools: source code editors + files but also two online IDEs (JsBin.com and CodePen.io). We will see how to write/debug the code and also how to migrate a project prototyped with online tools to a project you can run and edit on your hard drive using regular source code editors.

Many things we use in this example may be new to you. Don't worry. We will cover them either later on this week or over the following weeks. It's time to throw you in the deep end of the JavaScript world, getting you to write code, and look at examples etc. And from time to time, we will take a break and have a "real", "academic", look at the concepts of the language you have been using. We think this is the best way for you to learn!

Topic

We will write a small, interactive HTML page that will use some HTML input fields for indicating the name of a math function we'd like to plot, the ranges for the x and y values, the color of the curve etc.

We will first write this application online, using the JsBin.com editor, then we will do the same thing using the CodePen online editor, then, using a regular source code editor and .html, .css and .js files.

Here is what the resulting Web page will look like:

Demo (CodePen: Interactive Function Plotter)

1.4.2 Using CodePen (6:46)

We're going to work from an example we already saw in the course: the math function plotter. In this version, you can see that we added some input fields for changing the color of the curve, for changing the range of the x values, changing interactively the functions we are going to plot, and so on.

Let's start from the very basic example we saw earlier on the course. We saw that, the function is located in a "div". And we just added a "section" tag from HTML5, just to identify the part of the document where the function is plotted.

Later on, we'll add another "section" about the input fields and the different controls. You've got also a

At first, we can add some CSS code to make this nicer. I'm going to change the view with CodePen. Let's resize that, and let's work on the CSS part: "Maximize CSS Editor". What I can do, is that I can indicate that the div that contains this function wil have a rounded border, some shadows and so on. Now it's rounded, you can have add some shadows, height, margin and so on. Let's me just copy and paste some code I’ve prepared. Here we are. Now, what I've got, is a nicer presentation of the function itself.

Now, I'm going to add a section that will contain the different controllers that are input fields from HTML5. Let's do it. I add a section called "plotSettings" that will contains all these controllers. Let's start for example with a controller for the color. Here we go. What we added here is a label color value and the color input field from HTML5. If I click here, it asks for a color. And we can also add an event listener: "onchange="plot();. That means: "when the color has been selected, call the plot() function". And you remember that this function is the one that plots the mathematical function, here. The plot function is here.

What we are going to do in this change color function? It changes the property of the parameters here. Let's add some code for that… How can we get the value of the color from JavaScript before plotting the function? We are going to use the selector API: "document.querySelector(…)" for the input field whose id is "color".

The value, here, is the color itself.

What we do is that we are going do use the color for changing this, here. So "parameters.data"… it's an array. 0 is the first index, the first element that corresponds to the part that I highlight now. .color=color

If I change the color, this line is executed and the color changes. We can use the same principles with other input fields. Let me just copy and paste some code I prepared, that will add all these different controllers.

Now I've got all the different controllers, and if you look at them, they all have an "onchange" or "oninput" event listener. Now, we’ve got 2 sections, 2 HTML sections: one with an "id="plotSettings"" that corresponds to the different input fields.

And one with an "id="plot"" that corresponds to the function itself (the drawing here). If I want to have a nice look and feel, what I can do is to share the same borders and shadow properties from CSS, put the first section with the different input fields on the left and the plot on the right.

Let me just cut and paste some CSS rules here, that will factorize the common properties for both sections in a section selector. OK, what I've got now, is that I've got a nice balanced view of the whole application.

CodePen example with the starting code used in the video

If you want to code while watching the video, please open this CodePen. It contains the source code of the example we started coding from.

And here is the same version with the polyfill for the <input type="color"> input field, not yet supported by Safari.

In case you have a hard time to follow the video, here is the full example (this link points to the example from the previous course page).

1.4.3 Using Sublime Text (4:22)

Now, I'm going to show you how we can do the same application using files and a regular source code editor, and working on your local hard disk. I'm going first to create a directory for storing the files on my desktop. "Math plotter app" and I will work inside.

In this folder, I will create a subfolder named "js" for the js files and a subfolder named "css" for the CSS files, and the HTML file will lie in the current directory.

With Sublime Text, I can open this folder, the one I just created. And I can start saving the current file as "index.html". I will copy the HTML, CSS and JavaScript source code from the previous example. I just took the previous application.

And I will copy it in the index.html file. I create a "style.css" and a "script.js" file for holding the JavasCript and CSS files. I copy the source code from the js part of the previous example. I create a new file with the CSS code.

"Save as" … I include the JavaScript code :<script src="js/script.js">

Remember that the script tag has always a closing tag at this end.

It is not an auto-closing tag. And I use a "link" tag for importing the CSS file.

I can check that my files are located at the right place and now I can "Open in Browser". Another way to do what we've done manually would have been to use the "Export" button from CodePen.

It will download a zip file, that will contain the whole architecture, the whole folder and subfolder I've already prepared for you. And it will also make the HTML file for you, that will include the JavaScript, but in the end, instead of at the beginning of the source file, like what I did manually.

Using generated code can be useful, but most of the time for a big project or a serious project, you will use a source code editor like Sublime Text.

1.5.1 JS variables and values (5:28)

Live coding lesson: JavaScript variables

In JavaScript, a variable is a container for a value. And a value can be many things: a number, or a string, an object or a complex function.

With variables, the value in the container can change, and to use a variable you first have to declare it. Let's see some examples! You can declare a variable using the keyword "var", and followed by the name of the variable, or you can also use the keyword "let", that came with ES6, with JavaScript version 6.

Before ES6, you could only use "var". There are small differences that I will explain later, but for the moment you can use "var" or you can use "let". Once a variable is declared, you must initialize the variable, this is where you give it a value. And this is done by using the equal sign.

As you can see, the console.log will display in the console the value of the variable "myName". You can also initialize and declare a variable at the same time.

You see, I declare a variable called myDog and I gave it a name: Rex. Also, you can use these variables in instructions, in expressions like: "the name of my dog is".

You can use the "+" operator for concatenating strings, because "myDog" is a string, and in that case you will see: "the name of my dog is" …followed by the value of the "myDog" variable.

There are also naming rules and conventions for variables. You can give to variables names like "x", "y", "z". If they are just single, one-word names, you use lowercase. But the convention, when you start using composed words, is to use the "lower camel case" syntax.

If your variable name is made of two or more words, write the first one in lowercase, and capitalize every other words. Example: "myFastCar", "my" is lowercase, "Fast" and "Car" are capitalized.

Also, variables are case sensitive: do not mix a variable name in lower case and in uppercase. For example, if I give to the small "x" a value of "2", and to big "X" a value of "4", and if I display the value of big "X", then the JavaScript interpreter will know that big "X" is different than small "x".

If you need to use different names like if I've got two fast cars, just, my recommendation: use "myFastCar1", "myFastCar2", etc. Also, you should not use JavaScript reserved words such as "var", "let", "if", "for", "function", etc.

So, var function = 2; will raise an error, I can show that to you in the devtool console, this raises an error. This also raises an error. That's all for the moment about the variables.

We will next talk about variable values and variable scopes, and you will see that there is a small difference between "var" and "let" when you declare variables.

In most of the examples seen earlier, we've used the concept of "variable", and we have used them to "store values". It's time to take a break and talk about them :-)

Variables

In order to remember a value, programming languages share the concept of "variables". When you write programs, you will need to store values in the computer's memory. By saving these values in "variables", by giving them a "name" (we call it an identifier), you can reuse them later for display, for computations, etc.

Create (declaring) a variable

With JavaScript versions < 5 (prior to 2015), there was a single way to create (we say "declare") a variable: using the var keyword. But with the subsequent versions (called ES2015/ES2016 or JavaScript 6/7), we can also use the keyword let (this has some subtle differences, which we'll explain later in the course when we will talk about "functions").

JavaScript is weakly typed. Each variable is declared with the keyword var or let. You are not required to specify the type of variable you are creating. After the keyword "var" and a space, just give the name of the variable.

Example:

1.  var myVar;
2.  let x;

The first letter of a variable can only be "$", "_", "a" to "z", or "A" to "Z". The other characters in a name must be any of these, or numeric digits. The name is case sensitive. Variables "myVar" and "MyVar" are different variables.

There are some reserved names that you can't use as a variable name: boolean, if, delete, var, function, etc. as they are reserved words of the JavaScript language.

Give a value to a variable (assign a value to a variable)

A value can be assigned to a declared variable, or even directly in the variable declaration. For this, we use the equal character, also called "the assignment operator".

Example:

(notice at line 4 one way to introduce comments in your code: start a line with "//"!)

1. var myValue;
2. myValue = 78;
3. // With the ES2015 syntax. BTW, lines staring with 
4. // are comments!
5. let myNumber = 1.34;

At line 2, we are not saying that "myValue" and "78" are the same, we're saying "hey, I want to store the value 78, and I'm putting it in a variable whose name is "myValue". It's like giving an id to a location somewhere in the memory of the computer.

Using the id "myValue", we store 78 into a memory location identified by the name "myValue": a variable, or if you prefer, a value that can vary over time if we assign a new value to the variable "myValue" (for example by executing myValue = 5;).

You can also declare many variables at once by separating them with a comma. Always end each instruction line with a semi colon.

Example:

1. var myNumber1, myNumber2 = 34, myNumber3;
2. 
3. // Or with the ES2015 syntax, you can also use "let"
4. let x = 1, y = 3, z = 12;

Try the devtool console - you can type code in there too!

Reminder: you can always open the devtool console using F12 on windows, or ctrl-shift i, or cmd-alt-i on other computers.

If we copy and paste the variable declarations from the previous example, and type myNumber2 in the devtool console, it will display 34 (while myNumber1 will have an undefined value):

1.  var myNumber1, myNumber2 = 34, myNumber3;
2.  undefined
3.  // Or with the ES6 syntax you can also use "let"
4.  undefined
5.  let x=1, y=3, z=12;
6.  undefined
7.  x;
8.  1
9.  z
10. 12
11. myNumber2;
12. 34
13. 
14. myNumber1;
15. undefined

Below is an image that explains how you can try JavaScript code in the devtools console:

If you try to use a variable that has never been declared, you get an error message:

Name conventions for variables

The JavaScript community has some conventions about naming variables:

The camelCase notation is preferred: mySpaceShip, sumOfAllGrades, etc.
For a variable, the first letter is lowercase and each first letter of each word is capitalized. Example: var myVariableName

Example:

1.  var myModel;
2.  // ES2015 syntax
3.  let michelBuffaAge = 51;

Most JavaScript examples you will find are written in the camelCase format. For harmony in the code source, it is a good idea to keep this convention. Sometimes, you will see the snake_case naming convention, which separates each word of a variable with an underscore.

Here's an interesting article: CamelCase vs underscores: Scientific showdown.

Constants

Constants are variables that cannot be modified after a value has been set.

The naming convention is to use uppercase letters with underscores.

Example: var TIME_LIMIT = 50;

With JavaScript 5, constants were declared as normal variables, using the var keyword, and there were no verifications by the JavaScript interpreter forbidding you to modify them after you assigned a value to them.

With ES2015/2016 it is recommended that you use the keyword const instead of var to declare them. This means that an error will be raised if you try to change their value in the future.

Example:

1.  var TIME_LIMIT;
2.  // ES2015 Syntax
3.  const MAX_GRADE = 20;

Summary

Here are a set of examples (using the let keyword, but they would also work with var):

1.  let a;
2.  let thisIsAVariable;
3.  let and_this_too; // but does not respect the usual naming convention
4.  let mix12three;
5.  // invalid!
6.  let 2three4five; // can't start with a digit!
7.  let a = 1
8.  let v1, v2, v3 = 'hello', v4 = 4, v5;
9.  // Beware with lowercase / uppercase
10. let case_matters = 'lower';
11. let CASE_MATTERS = 'upper';

1.5.2 Scope of JS variables (4:19)

Let's talk about "variable scopes". The scope of a variable corresponds to the locations in your code where you can use this variable.

When you define… when you declare a variable outside of any functions, it's usable anywhere in your code. It's considered as a "global variable": it belongs to the "global scope". So, the x variable here, can be used inside a function.

The console.log inside f1… if I execute f1… will display the value "1" because the variable here is "global".

If I've got another function… f2, that declares another variable y, and if I try to display this value from outside of the function, then it does not work…I've got an error: y is not defined. So, you've got "local variables", and "global variables". In the case of local variables, when a variable has the same name as a global variable, then the most local one wins.

If I try to display inside F2 the value of x, it will be the closest variable -the local one- that will be displayed. If I execute f2, then it will display "x = 2", it's the value of the local one that is taken into account, not the value of the global one. We call this "masking". The same… if I pass a parameter to a function, and if this parameter has the same name as a global variable, then it acts as a local variable, and it's the value of the local parameter that is taken into account.

This x here, is not the global one: it's the one I passed as a parameter that has the value 10. Now, there are some little variations when I use "let" instead of "var". Let's see some examples.

With JavaScript 6, I can use "let" instead of "var". The global scope does not change. If I declare a global variable, it can be used anywhere. But, if I declare a local variable, it's no more local to the whole function in which it is defined, but it's local to the block of instructions that is defined by an opening brace and a closing brace.

If I try to use this variable here, that is defined in the block, outside of the block but inside of the function, the "a"…, the value of the variable "a" here, will not be the value of the local variable here, because this one does not exist, it's not usable here. It will be the global variable "a" that will be used.

This is why the printed value here, when I execute "f" is "1" and not "4".

If the variable was named "b" and if I tried to display it, then… I've got an error: "b is not defined".

Remember that if I used "var" in that case it works, because "var" will define a variable local to the whole function, not just to the block of instructions.

Scope of JavaScript variables

1) JavaScript 5 / ES5 scopes, with the var keyword

JavaScript 5 / ES5 has the var keyword for declaring variables.

JavaScript 5 / ES5 has two scopes: 1) a global scope for declaring global variables, and 2) a function scope for declaring variables that are local to a function.

Furthermore, like in most programming languages, inside a function, a local variable masks a global variable that has the same name.

See examples below.

1.1) Global scope / global variable

Global variables are variables declared outside of functions. They can be used anywhere in the code.

Here is an example:

CodePen: global scoping of variables.

1.2) Local scope / local variable (also called function scope)

Variables declared with the keyword var in a function, are said to be "local to the function". They "mask" any global variable that may have the same name.

When a variable is declared in a function, we also call it simply "a local variable", as opposed to "a global variable". In JavaScript 5 (and this is not common in programming languages), local variables are local to the function. They can be used anywhere inside the function.

Most programming languages have local variables that are limited to the block of instructions between '{' and '}' that contains the variable declaration. We call these variables "block variables". This is the case with variables declared with the let keyword introduced by JavaScript 6 / ES6. See examples at the end of this section.

Example of a local variable declared in a function, that is NOT local to the block, but to the whole function:

CodePen; example global and local variables.

Here is another example that shows the differences between global and local variables, and highlights the "masking" of global variables by local variables when they share the same name.

CodePen: example variables, global and local.

1.3) Never declare a variable without the keyword var!

JavaScript is sometimes an overly permissive language. We can make stupid errors that turn out to be very hard to detect. One such error occurs when we forgot to use the var keyword while declaring a local variable.

In JavaScript 5 / ES5, a variable declared in a function without the var keyword, makes it a global variable.

BEST PRACTICE: in JavaScript 5 / ES5, always use the keyword var when declaring a global or a local variable.

Better: use the keyword let if you target browsers that support JavaScript 6 or above.

Here is an example that shows what happens when you forget to use var or let while declaring a local variable:

CodePen: local and global variable scoping.

2) Since 2015 and ES2015, there are new scopes, with the let keyword

Modern JavaScript has the let keyword for declaring variables, and the const keyword for declaring constants.

Modern JavaScript has two scopes: 1) a global scope for declaring global variables, and 2) a block scope for declaring variables between { and }. This is similar to what we find in many other programming languages such as Java, C# etc.

Furthermore, like in most programming languages, inside a block, a local variable masks other variables located in higher scopes (global or in another block that contains the current block).

Example of a local variable declared with the let keyword. Its scope is the block:

CodePen: example let keyword.

3) Recommended way to declare variables: var or let?

Well, all modern browsers support the let and const keywords, however, you might find lots of examples that still use the var keyword…

Anyway, we highly recommend to use let and const instead of var, for declaring variables and constants!

1.5.3 JS data types (5:27)

Let's talk about JavaScript data types. The data type of variable is the kind of value you can give to this variable. With JavaScript, there are many possibilities: even if when you declare a variable, you don't type if data type: "var x=10", the value you give to this variable will help JavaScript figure out the data type of this variable.

And there is an operator named "typeof" that you can use for visualizing the internal data table of variable. So "var x=10", this corresponds to a number.

If I give to "x" a string value like my name, then the type of "x" will be "string". It changed its internal type on the fly, we call this "dynamic typing".

What kind of data types can we get? String, number, we've got also boolean value: "var x = true" or "x = false" corresponds to a boolean value: "typeof x"… boolean.

And I can say "if (x)" then… do something… "console.log("it's true!!!")" and the boolean data types is useful for "if" statements or some other statements that will test boolean value.

In that case, it printed "it's true!!!" because "x" was "true". If I give to "x" the value "false", then if I execute this code, it will do nothing because "x" is false.

We've got also some special values… but "typeof y": undefined. I can test if y is undefined then .…And in that case, you can test if a variable is defined or not.

There is a special data type called "null" that corresponds to "no value". The difference with the null defined variable is that the variable that has the value of null is still defined. Like "y" is not defined here… but if I say "z = null" then "z" is defined.

Ok, this has not been printed because "z" was not undefined. OK, another common value we give to variable is object. An object is something like this: property, value. And if I look at the type of "person", it will say: object. And object is a structured variable, I can use the "." operator to check the value of some property.

So, "person.familyName" will print the value "Buffa" .… "person.name" will print my given name. There is a particular case for arrays. Arrays are defined using "brackets". If I define an array with two names of days in a week: Monday and Tuesday, then, its type is also "object". There is no type that is called "array". Arrays are objects in JavaScript. To sum up, we've got: number, string, Boolean, undefined, and null and object.

Nothing else. And the "typeof" operator can be used to display the type of an object.

What kind of values can we assign to a variable?

Well, there are multiple possibilities: What we call "primitive data types": for example a number, a string, etc. ex: var x = 3; var name = "Buffa";

1.  var x = 3; var name = "Buffa";
2.  <a href="" target="_blank" rel="noopener noreferrer">a set of playing cards</a>

Objects (everything that is not a "primitive data type" is an object):

1.  var michel = {firstName:'Michel', lastName:'Buffa'};

There is a set of "predefined objects" in JavaScript (arrays, functions, etc). We will come back on these later in the course.

JavaScript has a small set of primitive data types

number: 1,2,105,3.14 …
string: 'a', "one", 'two' , 'World Wide Web' …
boolean: true / false
undefined: absent or unknown value
null: special keyword, meaning no value or empty. The difference from undefined is that when a variable is null, it is still defined.

These are the simplest forms of data we can use in programming.

Anything that is not listed above is an object (JavaScript objects are covered later in Module 3).

You said JavaScript does not have types for variables?

No! I said that JavaScript is weakly typed; you do not declare the type of variable. In some other languages (Java language syntax, for instance) instead of var x=2; or let name="Buffa"; you would write int x=2; or String name = "Buffa";, with the datatype explicit in the variable declaration.

Knowing the type of a JavaScript variable: the typeof operator

The next section of the course talks about "operators" but there is one that is better introduced in this section: the typeof operator, that is useful for knowing the type of a variable depending in its value (possible values: number, string, boolean, undefined, object, or function)

We will use it in lots of examples in the next three sections.

This operator is not often use in JavaScript programs, but it's useful for us, for explaining the data types.

1.5.4 Numbers

Number values can be:

Integer: 1, 4, 274929

Type 343 in the devtool console, and after you press the Enter key, the corresponding value (343) will be displayed.

Signed integer: -17
Decimal: 3.46, -466.8770

Examples of integer and decimals:

1.  var n=1;
2.  undefined
3.  > typeof n;
4.  "number"
5. 
6.  > n=1234;
7.  1234
8. 
9.  > typeof n;
10. "number"
11. 
12. > n=1.23;
13. 1.23
14. 
15. > typeof n;
16. "number"
17. 
18. > typeof 123;
19. "number"

Scientific notation: 3.46e4, 5.3e+6, 5344000e-5

3.46e4 equals 3.46 x 10^4 equals 34600

Examples:

1.  > 1e1;
2.  10
3.  
4.  > 1e+1;
5.  10
6. 
7.  > 2e+3;
8.  2000
9. 
10. > typeof 2e+3;
11. "number"
12. 
13. > 2e-3;
14. 0.002
15. 
16. > 123.456E-3;
17. 0.123456
18. 
19. > typeof 2e-3;
20. "number"

Octal: 010

Be careful with this, don't start an integer with 0 (zero), JavaScript will understand it as an octal value.

1.  010 equals 8 which means 1 * 8^1 + 0 * 8^0

1.  The number 0456 means 4 * 8^2 + 5 * 8^1 + 6 * 8^0

Question 1: What's the result, as an integer, of the operation: 24 - 024?

Explanation 1: 24 is an integer which equals 24 but 024 is an octal value which equals 20.

Question 2: Which value will be displayed in the devtool console if you type 098 followed by the Enter key?

Explanation 2: 9 and 8 don't exist in base 8 (only 0 to 7), the typed number will be considered as an integer.

Hexadecimal: 0xF3

0xFF equals 255, 0xF3 means 15 * 16^1 + 3 * 16^0 and the resulting
value is 243

Examples of octal and hexadecimal data types:

1.  > var n3 = 0377;
2.  undefined
3.  
4.  > typeof n3;
5.  "number"
6.  
7.  > n3;
8.  255
9.   
10. > var n4 = 0x00;
11. undefined
12.  
13. > typeof n4;
14. "number"
15.  
16. > n4;
17. 0
18.  
19. > var n5 = 0xFF;
20. undefined
21.  
22. > typeof n5;
23. "number"
24.  
25. > n5;
26. 255

Special values:

+Infinity
-Infinity
NaN (Not a Number)

The value Infinity (or +Infinity) represents all number values greater than 1.79769313486231570e+308 and -Infinity represents values smaller than -1.79769313486231570e+308.

Finally, Nan represents not-a-number values, for example if you try to divide 0 by 0 (type 0/0 in the devtool console).

1.  > 0 / 0;
2.  NaN
3.  
4.  > 3 / 0;
5.  Infinity

Examples:

Any operation with Infinity gives Infinity as a result:

1.  > Infinity;
2.  Infinity
3.   
4.  > typeof Infinity;
5.  "number"
6.   
7.  > 1e309;
8.  Infinity
9.   
10. > 1e308;
11. 1e+308
12.  
13. > var a = 6 / 0;
14. undefined
15.  
16. > a;
17. Infinity
18.  
19. > var i = -Infinity;
20. undefined
21.  
22. > i;
23. -Infinity
24.  
25. > typeof i;
26. "number"
27. > Infinity - Infinity;
28. NaN
29.   
30. > -Infinity + Infinity;
31. NaN

1.  > Infinity - 20;
2.  Infinity
3.   
4.  > -Infinity * 3;
5.  -Infinity
6.   
7.  > Infinity / 2;
8.  Infinity
9.   
10. > Infinity - 9999999999999;
11. Infinity

Examples with NaN:

NaN is a special value and its type is "Number"!

1.  > typeof NaN;
2.  "number"
3.   
4.  > var a = NaN;
5.  undefined
6.   
7.  > a;
8.  NaN 
9.
10. > var a = 10 * "f";
11. undefined
12.  
13. > a;
14. NaN 
15.  
16. > 1 + 2 + a;
17. NaN

[ADVANCED] Optional explanations about numbers

In JavaScript, numbers are represented with a double-precision 64-bit format (IEEE 754). These 64 bits are used with this table:

Total bits	Sign	Exponent	Significant
64	1	11	52

What does it mean?

First, each number is represented as a float. For example, 1 equals 1.0. But there are approximation errors that are well-known in float calculations. One common example of errors due to the approximation of floating point numbers is that 0.1 + 0.2 does not equal 0.3.

1.  > 0.1 + 0.2;
2.  0.30000000000000004

Second, an integer has 2^52 relevant bits, the biggest integer is 2^53. There is one bit that determines the sign of the number, so the smallest signed integer is -2^53.

Note: Some arithmetic functions use only numbers with a 32-bit format. Larger numbers will be converted…

For more information about floating point numbers, follow this link at Wikipedia.

1.5.5 JS operators and expressions

An expression is a small piece of code used to produce a value.

For example, the expression 3 + 5 produces the value 8, and the value 11 alone is also an expression. Within an expression, we can find values, variables, operators, and expressions. The first two have been already described above, all that's left are operators.

In JavaScript, an operator can be unary or binary (plus one ternary operator). A unary operator is applied to one expression. It can be prefixed or suffixed.

Unary operator example:

1.  typeof 'world';

A binary operator is applied to two different expressions, and is both prefixed and suffixed.

Binary operator example:

1.  var x = 45 / 32;

The division operator is binary

Within an expression, we can also use parentheses to force the execution of the expression inside. Parentheses can be used to indicate precedence.

For example, this is an expression: (3 + 2). And the expression (3 + 2) * 4, which equals 20, depends on the expression within the parentheses.

In JavaScript, expressions can evaluate to four types, which are: numbers, strings, booleans, and objects. For example, an expression with the operator - will evaluate to a number. But an expression with the operator + can evaluate to a number or a string (for addition or concatenation).

1.5.6 Number Operators (4:12)

Live coding video: number operators

Welcome to a short video about JavaScript number operators. The different operators you can use in numerical mathematical expressions are:
" + ", " - ", " / ", " * " and modulo, the percent sign (" % ").

You can use these operators in what we call mathematical expressions. An expression is something where you use "12 * 20". And you got a result. You can assign this to a variable: "var x =12 * 20" You can see that you can group different values or ….like this. And then, you can start building some more complex expressions. You've got the "*“ operator for multiplying, "/" for dividing, "+" and "–" for addition and subtraction.

There’s also an operator called modulo for example: "22 % 20". We display the rest of the division "22 % 20". "42 % 20" will display the same value. You can also regroup expressions within parentheses like: "var z = (12*20)/(x+10)".

This will work. It will first compute what is within the parentheses, then use the result for the final computation.

Nothing special to say here, but there are strange operators that are we called the prefix and suffix increment operators. So, if I declare variable "x" that has the value of "10". And if I display it, but I use “–- “ at this end, this will display the value of “x” and after that, it will decrement the value of "x" It will remove 1 from "x ". This is equivalent to writing: "var x= 10" … "console.log(x)"… and "x = x –1".

As you saw, it's longer to type all these instructions, but if I do just "console.log(x--)", it will do the same thing. It will display the current value of “x", but its final value is one less that. You can also post increment or post decrement values: " console.log(++x)". You remember that "x" was equal to "8". In that case, it will display "9" because "x" will be first incremented by one then displayed. If I display the value of "x" it’s "9"… Z= ++x … "z" will be "9 + 1"… "10".

And "x" will be 10 because it's been incremented. This is equivalent to "x= x+1 … Z= x". That's all we can say about number operators, nothing special. It's the same syntax you can find in the Java programming language or in c#, Python, or Ruby.

The following arithmetic operators are binary:
+, - , /, *, % (modulo)

Example: 7 % 5 equals 2, which is the remainder of the integer division of 7 by 5

Note: (7 / 5 = 5 * 1 + 2 ).

And there are also unary operators:

++, --, - (the opposite of a number)

++ and -- operators increment or decrement the value of a variable. They can be both prefixed or suffixed, which have different effects:

Suffixed ++ adds one to the value of the variable, then returns the old value.
Prefixed ++ also adds one to the value, but returns the new value. Both of these must be used with variables.

Examples typed in the devtool console of a browser

Example #1: simple operator use

1.  > 1 + 2;
2.  3
3.  
4.  > var a = 1;
5.  undefined
6.
7.  > var b = 2;
8.  undefined
9.  
10.  > a + 1;
11.  2
12.  
13.  > b + 2;
14.  4
15.  
16.  > a + b;
17.  3
18.  
19.  > var c = a + b;
20.  undefined
21.  
22.  > c;
23.  3

Example #2: more operators

1.  > 1 + 2;
2.  3
3.  
4.  > 99.99 - 11;
5.  88.99
6.  
7.  > 2 * 3;
8.  6
9.  
10.  > 6 / 4;
11.  1.5

Example #3: pre and post increments

1.  > var m = 0;
2.  Undefined
3.
4.  > m;
5.  0
6.  
7.  > // regular use of the + operator
8.  m = m + 1;
9.  1
10.  
11.  > m;
12.  1
13.  
14.  > m = m + 1;
15.  2
16.  
17.  > m;
18.  2
19.  
20.  > // post increment
21.  m++;
22.  2
23.  
24.  > m;
25.  3
26.  > console.log(m++); // will display 3 but after that m is incremented
27.  3
28.  
29.  > m;
30.  4

Below is snapshot with explanations:

Example #4: other versions of post and pre increments

1.  > var a = 123; var b = a++;
2.  Undefined
3.  
4.  > b;
5.  123
6.  
7.  > a;
8.  124
9.  
10.  > var a = 123; var b = ++a;
11.  Undefined
12.  
13.  > b;
14.  124
15.  
16.  > a;
17.  124
18.  
19.  > var a = 123; var b = a--;
20.  undefined
21.  
22.  > b;
23.  123
24.  
25.  > a;
26.  122

Example #5: short variant that mixes assignment and execution of an operator

Binary operators can be used with a shorter syntax when we want to assign the resulting value to a variable at the same time.
Code below (try it in the devtool console of your browser):

1.  > var a = 10;
2.  > a *= 5; // equivalent to a = a * 5;
3.  > console.log(a);
4.  > 50

Example #6: more with pre operators +=, -=, *=, /=

There are good chances you will encounter such code:

1.  > var a = 5;
2.  Undefined
3.  
4.  > a += 3 // equivalent to a = a + 3;
5.  8
6.  
7.  > a -= 2; // equivalent to a = a - 2;
8.  6
9.  
10.  > a *= 10; // equivalent to a = a * 10;
11.  60
12.  
13.  > a /= 5; // equivalent to a = a / 5;
14.  12
15.  
16.  > a %= 2; // equivalent to a = a % 2;
17.  0
18.  
19.  > // this is normal, as it is even

1.5.7 Strings, part 1

General use

To declare or manipulate strings you must write them with single quotes ' or double quotes " around them. Single quotes or double quotes are both accepted, and there is no difference between them in JavaScript. However, the community prefers to use single quote for string - this is not a convention, but a recommendation.

And finally, you cannot start a string with a single and end with a double quotes, or the opposite.

1.  > "Hello World";
2.  "Hello World"
3.   
4.  > "JavaScript Course";
5.  "JavaScript Course"
6. 
7.  > 'With single quotes';
8.  "With single quotes"
9.  
10. > "Do not mix double and single quotes'; // here we opened the string
with double and closed with single quotes
11. VM24763:1 Uncaught SyntaxError: Invalid or unexpected token

Image from the devtool console, from the example above:

There are many reasons to use single quotes when possible:

Double quotes are used in HTML
You must hold the Shift key to type "
Single quotes are easier to read and to type
To output HTML in JavaScript, single quotes are more useful

1.5.8 String operators, part 2 (6:44)

Live coding video: string and string operators

Strings can be defined using double quotes, or single quotes. Don't mix double and single quotes, it's not going to work. You can mix them, but inside a string defined with single quotes, you can use "hello my name is Michel…". This works because I used double quotes inside a string defined with single quotes. I can do the reverse: use single quotes inside a string defined with double quotes.

But if I wanted to use the single quote like for "I'm your teacher", you see that the color changes because this is not correct. In that case you must use the antislash (\)… Like this… you escape the single quote that confuses the JavaScript interpreter, and you can, in that case, display single quotes inside a string that has been defined using single quotes.

The \ character is also useful for printing special characters. For "s1 = My\n" … it means "go to the next line"… if I print "s1 = My\\nName\\Is\\Michel". You saw the carriage return here, I came to the next line. Ok, let me fix it by adding \\n
In that case each word is on a different line. You can use also \\t for inserting a tab, and \\\\ for displaying the \\ character itself. In that case, you can display the \\ character itself using double antislash.

Let's talk about string operators. The "+" operator is the most common one, it's useful for concatenating values to any string. Let's look at one example.

If I say 'my name is' + 'Michel Buffa', then you see that the result here is the concatenation of the string 'my name is' and the string 'Michel Buffa'. You can also use variables of different types, that will be converted to strings, if some parts of the + operator, some sides of the operator, are strings.

You see that the value of s is the concatenation of the string "value of x " and the number value of x (that was 10), has been converted and concatenated to it.

There are also some ways to convert variables to strings. x here, is a number, but x = "" + 10; in that case, x is a string. You can also concatenate string values… s1 = "one", s2 = "two", if I concatenate these values here, s is equal to the concatenation of s1 and s2.

There is also an assignment operator called += that can be very useful when concatenating values to a string. Like var s=Hello; s+="My friend", you give a value of s="Hello my Friend".
The += means s = s+something, it adds to the end of s. I can also use strings in mathematical operations, and they can be converted automatically.

I've got s2 that is 10. s2 is a string, and if I do s2=s2 * 2; in that case, s2 has been converted automatically. The value "10" as a string became 10 as a number. And s2 now is a number that is worth twice its previous value.

If I try to use a string that is not a number, not a value that can be converted to a number, like "hello"… in that case - if do the same operation - the result is NaN that means "Not a Number", you cannot convert "hello" to a number that can be used in a mathematical expression or multiplied by two.

Introduction to string operators

The concatenation operator (+)

The operator (+) used with strings is called the concatenation operator, and it allows you to concatenate strings.

1.  //the operator (+)
2.  var s1 = 'one';
3.  var s2= 'two';
4.  var s = s1 + s2;
5. 
6.  s;
7.  // returns 'onetwo'
8.
9.  typeof s;
10. //'string'

The shorthand assignment operator (+=)

The shorthand assignment operator (+=) can also be used to concatenate strings.

1.  //the assignment operator (+=)
2.  var s1 = 'one';
3.  var s2 = 'two';
4.  s1+= s2; // or directly s1+='two'
5.  s1;
6.  //returns 'onetwo'

The method concat()

Another way to concatenate strings is the method concat():

1.  //the 'concat' method
2.  var s1 = 'one';
3.  var s2 ='two';
4.  var s = s1.concat(s2);
5.  s;
6.  //returns 'onetwo'

All the methods shown above can be used with a variable number of arguments:

1. var s1 = 'Hello';
2. s1 = s1 + ' World' + ' JavaScript';
3.  
4. var s2 = 'Hello';
5. s2+= ' World ' + ' JavaScript';
6.
7. var s3 = 'Hello';
8. s3.concat(' World' , ' JavaScript' );
9. 
10. //s1,s2 and s3 return 'Hello World JavaScript'

Converting strings

A String number in an arithmetic expression is converted to Number, unless the formula is a pure addition.

1.  > var s = '1'; s = 3 * s; typeof s;
2.  "number"
3.  
4.  > s;
5.  3
6.  
7.  > var s = '1'; s++; typeof s;
8.  "number"
9.
10. > s;
11. 2
12.
13. > var s = "100"; typeof s;
14. "string"
15.
16. > s = s * 1;
17. 100
18. 
19. > typeof s;
20. "number"
21. 
22. > var d = "101 dalmatians";
23. Undefined
24. 
25. > d * 1;
26. NaN

The above example is shown in the devtools console:

How to convert a Number into a String

There is trick for converting a Number into a String: we concatenate with an empty string, at the beginning of expression (type this in the devtools):

1.  var n = 1;
2.  typeof n;
3.  // returns "number"
4.  n = "" + n;
5.  // returns "1"
6.  typeof n;
7.  // returns "string"

Special character: the "\\"

The \\ is useful for "escaping" special characters. Here are a few examples:

1.  var s = 'I don't know';
2.  var s = "I don't know"; // here the \ is useless
3.  var s = "I don't know";  // same result as previous line
4.  var s = '"Hello", he said.'; // ok, double quotes inside single one will be displayed
5.  var s = "\"Hello\", he said."; // double quotes inside double quotes need to be escaped

Escaping the escape! Use a double "\"

1.  var s = "1\\2"; s;
2.  // returns "1\2"

Special characters starting with "\"

"\n" for "next line":

1.  var s = '\n1\n2\n3\n';
2.  s
3.  // returns "
4.  1
5.  2
6.  3
7.  "

"\r" for "carriage return":

1.  var s = '1\r2';
2.  var s = '1\n\r2';
3.  var s = '1\r\n2';
4.  // the three previous lines give :
5.  "1
6.  2"

"\t" for "insert a tabulation":

1.  var s = "1\t2"
2.  // s is equal to
3.  "1 2"

1.5.9 Objects, part 1

We have already encountered objects in different examples. You can easily recognize these objects:

They are declared using "{" and "}", such as in var p = , givenName and familyName are called "properties" and Michel and Buffa are their respective values.

We are using the "." operator to access their properties or methods. Example : daysOfTheWeek.length (arrays are objects too - special ones, but objects), or document.body or window.innerWidth (try typing that in the devtool console). There are plenty of predefined objects in JavaScript (window, document, navigator, etc.). We have also used console.log(…), and indeed console is a predefined JavaScript object. With the object var p = {givenName:'Michel', familyName: 'Buffa'}, we can access the properties the same way, with: p.givenName and p.familyName.

Take a look at some common objects and properties!

Open your devtool console (F12 or ctrl-alt-i or cmd-alt-i on Mac), go to the console tab and type "window" followed by a ".", normally you should see an auto-completion menu. Start typing "inne" and you should see some possible completions.

Try looking at the values of the size of the current browser window (type window.innerWidth followed by the "enter/return" key, type window.innerHeight, etc.).

Try looking at the vendor of your browser: type "navigator.vendor", try looking at the current URL displayed in your window: type window.location, etc.

We will study these objects later, but for the moment, just play with objects :-)

1.  > window.innerHeight
2.  217
3.  > window.innerWidth
4.  1704
5.  > navigator.vendor
6.  "Google Inc."

You can define your own objects

There are many ways to create your own JavaScript objects. For the moment, let's stick to the simplest one, "singleton objects", and for now all you need to know is that they can have properties that hold values. We will return to objects in Week 4 and cover them in further detail.

1.  var student1 = {
2.    fullName:'John Doe',
3.    age: 23,
4.    city: 'New York',
5.    ssn: "11-22-33-44" // no comma at the end of the last property
6.  }                      // declaration

Accessing an object's properties: we use the operator "."

1.  > student1.ssn
2.  "11-22-33-44"
3.  > student1.age
4.  23
5.  > student1
6.  [object Object] {
7.    age: 23,
8.    city: "New York",
9.    fullName: "John Doe",
10.   ssn: "11-22-33-44"
11. }

1.5.10 Arrays, part 1

Definition: arrays are containers with indexes

Arrays are a special datatype. You declare arrays using brackets, like this:

var daysOfWeek = [];

You can fill them at declaration time:

1.  var daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
2.  var gradesInMaths = [12, 7, 14, 18, 9, 11];

Elements in an array can be accessed using indexes>

Each element in an array has an index. The first element's index is 0, the second element's index is 1 etc.

To access an element, you use the array variable and "[" followed by the index value followed by "]", as shown in these examples:

1.  var daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
2.  undefined
3.  daysOfWeek[0]
4.  "Monday"
5.  daysOfWeek&lback;1]
6.  "Tuesday"
7.  daysOfWeek[2]
8.  "Wednesday"
9.  daysOfWeek.length
10. 7

Use the length property of an array to know its length

1.  var daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday','Friday', 'Saturday', 'Sunday'];
2.  undefined
3.  daysOfWeek.length
4.  7

Indeed, there are seven days in a week and the daysOfWeek array has seven elements, indexed from 0 to daysOfWeek.length -1

This way of enumerating all elements (from 0 to the length of the array -1) is very, very common, and will prove to be very useful when you learn how to iterate on an array's elements (Week 2).

You can add elements to an array using a new index

If you want to add a new element at the end of an array, use the index equal to the length of the array.

1.  var daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 
    'Thursday', 'Friday';, 'Saturday'];
2.  undefined
3.  daysOfWeek.length
4.  6
5.  daysOfWeek[6]
6.  undefined
7.  // NO ELEMENT AT INDEX 6 in an array of 6 elements, first index is
    0 // last 6-1 = 5
8.  > daysOfWeek[6] = 'Sunday'
9.  "Sunday"
10. daysOfWeek.length
11. 7
12. // Sunday, the 7th day of week is at index 6 !

Arrays are JavaScript objects!

Well, this is not so important for the moment, but look:

1.  > var a [];
2.  > typeof a;
3.  "object"
4.  > var a = [1,2,3];
5.  > a
6.  [1, 2, 3]
7.  > a[0]
8.  1
9.  > a[1]
10. 2

And indeed, when you write daysOfWeek.length, you are using the array as an object, and you are using the length property of array objects.

Add an element at the end of an array using the push method

Since arrays are objects, we can do much more with them - in particular, they have more properties and more methods than the push method. You will learn more about this in a later lesson (Arrays part 2), but for the moment, let's focus on the most useful features…

1.  > var daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
2.  undefined
3.  > daysOfWeek.length
4.  6
5.  daysOfWeek.push('Sunday');
6.  7
7.  > daysOfWeek
8.  ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
9.  > daysOfWeek.length
10. 7

Arrays and Strings

Strings are arrays of characters!

Consequence:

They are objects too!
They have a length property,
Each individual character can be accessed using an index.

Examples:

1.  > var s = 'one';
2.  > s[0]
3.  "o"
4.  > s[1];
5.  "n"
6.  > s[2];
7.  "e"
8.  > s.length;
9.  3

1.5.11 Functions, part 1

Definition of a function

A function allows you to group code, give it a name and be able to execute it by calling it by name.

Functions always return a value:

Explicitly, using the keyword return followed by the value (line 3 of the next example),
Implicitly, in which case the return value is undefined.

Declaring a function

1.  function sum(a, b) {
2.      var c = a + b;
3.      return c;
4.  }

Calling a function

1.  var result = sum(1, 2);
2.  //result is equal to 3
3.  console.log(result)
4.  > 3

Function parameters

If parameters are omitted during the call, JavaScript gives them the value undefined:

1.  > sum(1)
2.  NaN

Functions with a variable number of parameters

An array named "arguments" is created automatically in each function, it contains all the call parameters of the function:

1.  function f() {
1.    return arguments;
1.  }
2.  …
3.  f();
4.  // returns []
5.  …
6.  f( 1, 2, 3, 4, true, ';Michel Buffa';);
7.  // returns [1, 2, 3, 4, true, "Michel Buffa"]

Example of the sum with a variable number of arguments

1.  function newSum() {
2.    var i, res = 0;
3.    var numberOfParameters = arguments.length;
4.    for (i = 0; i < numberOfParameters; i++) {
5.      res += arguments[i];
6.    }
7.    return res;
8.  }
9.  …
10. >>> newSum(1, 1, 1);
11. 3
12. >>> newSum(1, 2, 3, 4);
13. 10

1.6.1 Intro: Simple JS Examples to play with

This section does not detail the examples presented. Some of them are studied later in the course, some won't.

The examples are just here to bring some fun whilst making you play with some various uses of JavaScript. You are invited to look at their source code, and to tweak the examples. Do not worry if you don't understand how they work. We are just giving you "a taste" of JavaScript. There will be no graded exercises about them.

1.6.2 The devtool console

Using the console.log(…) instruction, you can write messages to the devtool console of your browser. This is a common way to debug your code!

For example, let's say you added a button to your Web page, but nothing happens when you click on it. It can be very difficult to spot your error without using the devtool console and console.log(…)!

Example

Let's check that some parts of the code you wrote are executed correctly.

CodePen: button 'click me' to display value of x var.

Normally, when the button is clicked, we should call the addXToThePage() function, which in turn should display the value of the variable x inside an HTML paragraph.

Let's check if the function is really executed. We need to add a console.log("In the addXToThePage function"); as the first instruction of the function:

CodePen: write messages to devtools console.

And let's execute this with the devtool console open (use F12 on Windows, or Cmd-Alt-i on a Mac, or control-shift-i). First, as the provided example is located on CodePen, an online IDE, it's better to execute it in "debug mode". The online IDE will just display a page (see snapshot below) with the code running:

This action opens a new tab with only your code running in it (not the whole codepen IDE + your code!). Open the devtool console (F12 or control-shift-i or cmd-alt-i on Mac), and you should see this:

Now, press the button! An error message appears:

Apparently the function name is wrong, addXToToThePage does not exist. We can check the source code by clicking on the YNbvoX:40 link on the right:

Our first error was that we typed the wrong name in the onclick="…", the name we used : AddXToToThePage has "ToTo" instead of "To". Let's fix that now and try again:

After we've changed the name of the function to the correct one, let's go in debug mode, open the devtool console and click the button. Here is what we get:

Ok, you understand the principle… by using console.log(…) with a string message as parameter, you can make the message appear in the devtool console, confirming that you have executed your code without error at least to this point…

Let's fix this "X"! We'll replace it with an "x" and everything should be ok now:

CodePen; write messages to the devtool console.

You can click on the button now….

Going further with console.log

Displaying variable values

Instead of just displaying pure string messages, you can also use the "+" operator to concatenate variable values to the pure character strings.

Example:

1.  var x = 2;
2.   
3.  console.log("The value of x is " + x + " and it';s ok like
    that.");

We typed this code in the devtool console to check what it does:

You can use as many "+" as you like, the part right after the "+" will be turned into a string if the part in front is a string…

You can also use parentheses in order to display results of simple calculations:

1.  var x = 2;
2.  var y = 4;
3.  console.log("x = " + x);
4.  console.log("y = " + y);
5.   
6.  console.log("The value of (x+y) is " + (x+y) + " and it';s ok like that.");

Result:

You can use any operator (+, -, /, *, etc.), you are not limited to using the "+" operator. And of course, you can use such code in your programs, not only in the devtool console :-)

1.6.3 Modifying an HTML document

Don't worry if we do not explain all the details of this example. In the first module, we're giving you "a taste" of what we can do with JavaScript. Over the following modules, we'll delve deeper into the details…

We've already seen some examples that modify the content of the document dynamically. We changed a title by clicking on a button, we displayed the value of a variable named x in the previous section, etc.

The browser comes with some very powerful APIs (Application Programming Interfaces - a set of predefined objects/functions/variables you can use):

"The selection API" is used for "selecting elements in the document". It uses the same syntax as CSS selectors.
The "DOM API" for "Document Object Model" API. When we used document.body.innerHTML += "<p>The value of x is " + x + "</p>"; in a previous example, we used the DOM API for adding content to the body of the page (page = document).
Another API is called the HTML Table JavaScript API, and is useful for building tables on the fly.
etc.

CodePen: contact list.

Just click the button to build the HTML table dynamically. You should see this:

1.6.4 Modifying CSS styles on the fly

We've already seen some examples in which we modify the style of some parts of a document using JavaScript. Here we show another example of what can be done.

Examples

Example #1: change common properties (color, border, background color)

CodePen; change common properties.

Example #2: change the background image property using an external image

CodePen; change the background image.

Example #3: Use the background image as a sprite sheet - animate Mario!

CodePen; use background image as a sprite sheet.

Notice how the CSS properties change when we use them from JavaScript:

background-color (CSS) becomes backgroundColor (JS)
margin-left (CSS) becomes marginLeft (JS)
etc.

And the positions, widths and heights are always string values. In our example we used pixel units and a percentage, so we need to add the "px" and "%" character(s) when we manipulate these properties from JavaScript.

1.6.5 Adding interactivity with events

With JavaScript, you can react to user interactions (keyboard, mouse, gamepad), to changes in the lifecycle of your document (page has just loaded or resized, screen has been rotated on a mobile device), or to be notified when a long process has been completed (loading a large image or sound from the network).

We've already seen how we can make a <button> react to a mouse click with <button onclick="…">Click me</button>

Below, we outline some extra examples. In the next course module, we will go into detail about events, and in the following modules, we will study some of the most useful events in even greater depth.

Examples

Example #1: use input events on an HTML input field

CodePen: use input events on HTML input field.

Example #2: listen to mouse events in an HTML5 canvas

The HTML5 canvas is useful for drawing and animating at 60 frames/second. Very detailed tutorials are provided in the W3C HTML5 Coding Essentials and Best Practices course, while the W3Cx HTML5 Apps and Games MOOC addresses how to write video games using the canvas 2D API.

In this JS introductory course, we use HTML5 canvas to draw curves, to make a small game, etc. Small and diverse examples for illustrating some JavaScript data structures such as Arrays or Objects are going to be presented.

CodePen: listen to mouse events in HTML canvas.

Example #3: a paint program - click and drag mouse, then release

CodePen: a paint program.

Example #4: move a monster in an HTML5 canvas using left and right arrow keys

CodePen: move a monster in HTML canvas.

1.6.6 Using built-in HTML5 APIs

Your browser comes with a lot of standard W3C APIs. By standard, we mean "parts of HTML5" or real Web standards that will still work in 10 years. In contrast to "industry standards", W3C standards are meant to be supported by browsers for years to come. These standards are a joint effort by the industry, the community, and W3C to develop stable, reliable standards.

The following example uses some of these APIs, simply to "show the possibilities". Others will be discussed later on in the course, or in other W3Cx courses.

Examples

Example #1: using the WebCam

CLICK ON THE TOP RIGHT OF THE BELOW WINDOW (on the "Codepen" logo) to see this example running. Due to security restrictions, the webcam image cannot be seen in this embedded example anymore.

Look at the JavaScript tab! The W3Cx HTML5 Coding Essentials and Best Practices course provides many other examples that use the webcam.

CodePen: example Webcam.

If you want to spend some time having fun with the WebCam, don't forget to try the WebCam Toy demo!

Example #2: using the WebAudio API to build a small synthetizer

Click on the piano keyboard. Use the different buttons, sliders, etc. This example uses the WebAudio API in order to synthesize sounds.

CodePen: using the webaudio API to build a small sythesizer.

HTML:

I Hope you enjoy this pen, it was a lot of fun to make. Both mouse and keyboard is supported. However, make sure you click onto the preview window before using keyboard.

1.6.7 Using third-party JS APIs/libraries

Thousands of JavaScript libraries exist. Their purposes range from making it easier to plot a math function, playing chiptune music, animating objects, through to visualizing data and much more.

Examples

We provide some examples below, but feel free to look on the Web for other external libraries.

Example #1: plot mathematical functions using the function plot JavaScript library

There are numerous libraries for plotting math functions, but this one is pretty easy to use and very powerful. Here is an example that plots f(x) = x^2, then f(x) = sin(x) and finally a mix of fours functions : f(x) = x^2 (in red), f(x) = 3*x (in green), f(x) = cos(x) (in blue) and f(x) = -3*x^2 + x^2 (dashed)

CodePen: plot mathematical functions.

Here is another much simpler example, please edit the code (click on "edit on codepen") and change the function for something like f(x) = x^3 and look at the result (don't forget to change the xRange and yRange values). If you have trouble, look here for a solution.

CodePen: plot force directed graph using d3.js.

Example #2: plot a force directed graph using the d3.js JavaScript library

Try to click and drag nodes… All the graphics, animation and force repulsion, is done using the very powerful d3.js plotting library. Look at the HTML source code to see how we included this library in our HTML page. Look at the JS part; it seems complicated, but hey! I guess you can make your own graph with your own colors and your own node labels, without mastering JavaScript ;-) The beauty of this language is that you can find so many examples on the Web that you can easily learn by copying and pasting, tweaking code you haven't even written, etc. Go to codepen.io and use the search button for "d3" and you will find plenty of examples that use that library.

CodePen: force-directed draggable graph.

Example #3: play chiptune songs using the chiptune.js library

I really like this example, as it takes me back to my youth playing games on the Commodore 64, the Nintendo NES console, etc. In that prehistoric age, there weren't a lot of kilobytes available in the memory, and most sounds were synthesized, not audio samples. The audio resolution in the past was lower than it is today. Audio chips utilized simpler DSP algorithms with less accuracy, and the sample rate was not the familiar 44.1 kHz that we are accustomed to now. Musicians used tools called "mod players/editors" for creating the music score (you can try a re-creation on the browser of a mod editor to see how it looked in the late 80's).

To try the example below, click on "load demo song", then on the play button. If you want to try other compatible songs, look for any .mod, .it, .xm song on the Web and drag and drop it into the example page. A good resource for such files is The Mod Archive, you can download plenty of chiptune files from there.

CodePen: chiptune - load demo song.

Example #4: animate a sprite in an HTML5 canvas using the sprite.js library

This is just a small example of the use of the sprite.js library, which makes it easier to animate sprites (sub images from a big image called a "sprite sheet") in an HTML5 canvas. We will see how to use the HTML5 canvas later on in this course. The example is just here to illustrate what can be done using external libraries.

CodePen: animate a green sprite.

1.6.8 Working with remote data

Let's see a few examples on how to work with remote data.

Examples

Example #1: use remote structured data

This example downloads and displays a list of users in a table (see remote data):

CodePen: use remote structured data.

Example #2: load and decode remote sounds for use in a video game

This example just shows how to use the HowlerJS external library to load remote sounds, decode them and play them as samples in memory (useful for video games):

CodePen: load and decode remote sounds.

2.1.1 Intro Module 2: Adding Interactivity to JS Documents

Lesson: Introduction to Module 2

In this module, you will learn how to handle events (using a keyboard, a mouse, or a game pad), detect which button has been pressed, what is the position of the mouse pointer, what key has been pressed, etc.

You will discover the DOM API, as this is the standard application programming interface that will be used for interactive with the content of an HTML document.

In addition, we will introduce some new fundamental JavaScript bricks, such as conditional statements, logical operators (if, then, else), and loops. How to display multiple rows in a table, how to draw multiples graphical objects on the screen.

Finally, we will write together a small JavaScript game using the HTML5 canvas API. Animating and drawing shapes at 60 frames/second is a lot of fun, and we'll make you play with the most of the language elements seen so far. And please, as I like video game, don't forget to share your project in the forum. And let other students enjoy your creation :D

2.1.2 Outline: Interactivity with JS

What you will learn in Module 2: Interactivity with JavaScript

Conditional statements and logical operators: if…then…else, etc.
Loops: iterate on collections, do things repeatedly
Events: detect keys, mouse clicks or moves, window resize events, etc.
DOM: interact with the content of the HTML page (by selecting elements, modifying them, adding and removing new ones)
HTML5 canvas: learn how to draw and animate simple shapes

2.2.1 Conditional Statements, Loops and Logical Operators (7:33)

Live coding video: boolean value, if…else statement and comparison operators

Comparison operators and the if, else statements.

First, let's look at some code… We've got a "JavaScriptCourse" variable that we're gonna set to true, it's a boolean variable. And we're gonna see how this variable can be tested in a "if" statement. In order to use the "if" statement, we type "if", followed by parentheses, and by a block of instructions, that will be executed only if what is between the parentheses here, is true.

I'm gonna put this variable that we set to true, and add an instruction inside. We can see in the console that the instruction in the block has been executed, and "This is a JavaScript course" has been printed to the console log. This is because when the thing we test -the expression we test between the parentheses-is true, the block of instructions that follows the "if" statement, is executed.

If I set the variable to false and run the example again, then nothing is executed because the expression is false and the block of instructions is completely avoided. We can improve this example using an else statement. "This is NOT a JavaScript course!" I run it again. And the thing that is executed is the else block of instructions "This is NOT a JavaScript course!". If I set it back to true, you can see that it's a bit like a switch. It prints: "This is a JavaScript course!"

Ok, let's see now comparison operators. They are: less than, more than, less or equals to, more or equals to, equals equals (that means "equals"), not equals (that means "different"), and a different version of these last two operators, that are called strict equals and strict not equals operators. And they are written === and !== . These last two syntaxes are preferred because they will avoid you a lot of errors.

I will show the differences in a minute, but consider these last with the three equals (===) and not equals equals (==), to be the ones you must use.

Let's see some code now… I declared the variable "age" with a value of 1, and I added some if… else statements. If "age" is less than 2, print "I'm a baby", and you can see that this has been executed, because the variable is 1, 1 is less than 2. It's been executed… I can add some "else…if" statements.

If age is 10, then in that case I'll go to the else statement and I will test again if in this case, age is less than 18. I'll print "I'm a child". And this works too. Only the second case has been executed.

The "if" block of instructions has been ignored, and the second "if" block of instructions has been executed. I can chain the "else…if" statements like that. And you can notice that I added at the end only an "else" statement, without an "if" behind. This means: "when all the other cases are false, please come here!".

If I set my age to be 70, then in that case, all the tests will be false, and I will execute the block of instructions that is just after the last "else", and it prints "I'm old".

I can also try… if the variable has some exact value using the == operator. If I set the variable to be 72, then this test is true and it prints "I'm 72" in the devtool console.

We can also use more than one test at once using logical operators. The double ampersand (&&) here is the AND operator. This will be true only is age is more than 12 and less than 14. If I set the variable to 13, it will print "I'm a young teenager" because both tests here, > 12 and < 14, are true.

I can use also the OR operator. In that case, it will be true if one of the two are true. Let's try with age = 8. With age equals to 8, this is false, age > 12, but age < 14 is true, it prints "I'm a young teenager".

Finally, let's have a look at the === operator. If I set the age to be "72", but as a string, like this… it prints… let me clear the devtool console and execute it again… it prints "I'm 72" because the age variable, that is a string, has been converted implicitly to a number. If I use the triple equal sign, then it does not print anymore "I'm 72" because age, as a string, has not been converted to a number. And thrust me, it's much better to use the triple equals operator, it will avoid you many errors like considering a string as a number, and so on.

Source code of the example shown in the video

This example is available on CodePen

Before talking about how your JavaScript program can make decisions, such as "if this condition is fulfilled then I'll do this, otherwise I'll do that…", we need to define a few more concepts.

Let's start with "boolean values" and "logical operators".

Boolean values

The boolean type represents a logical entity having two values: true and false.

Use of the keywords true and false:

1.  var b = true; 
2.  var b = false;

A boolean variable should not be enclosed in quotation marks, otherwise it becomes a string variable:

1. var b = 'true'; // b is not a boolean but a string

Undefined and null values

Undefined

undefined is returned when a variable has not been assigned:

1.  var foo;
2.  > foo
3.  undefined
4.   
5.  > typeof foo;
6.  'undefined'
7.   
8.  > if (foo === undefined) {
9.    console.log('The variable foo has no value and is undefined');
10. }
11. 'The variable foo has no value and is undefined'

The above example shows how we can test whether a variable has a value (line 8 uses a conditional statement).

The keyword "undefined" is part of the JavaScript language, so you can assign the undefined value to a variable:

1.  > var foo = undefined; // equivalent to var foo; without giving any value
2.  undefined
3.   
4.  > foo;
5.  undefined

var foo; and var foo = undefined; are equivalent but we recommend that you use the first version to declare the variable (it is shorter, and that reduces the code).

If you try to access a variable that has not been declared before, a ReferenceError will be raised. But the typeof operator will return "undefined":

1.  > bar;
2.  ReferenceError
3.   
4.  > typeof bar;
5.  'undefined'

Logical operators

The logical operators are:

&& (AND)
usage example:
if ((x > 0) && (x < 10)) { console.log('x is strictly positive and less than 10'); }
|| (OR)
usage example: if ((x > 0) || (x == -5)) { console.log('x is positive or equal to -5'); }
! (NOT)
usage example: if (!(x > 0)) { console.log('x is not positive (x is less or equal to 0'); }
&&, || operators are binary, ! is unary.

1.  var b = !true; 
2.  b; //false
3.   
4.  var b = !!true;
5.  b; //true
6.   
7.  var b = "one"; 
8.  !b;   false // implicit conversion of "one" to a boolean value
9.   
10. var b = "one"; // implicit conversion of "one" to a boolean value
11. !!b; //true

In an expression with logical operators, as shown in lines 8 and 11 of the previous example, non-boolean values are implicitly converted to boolean.

Lazy evaluation or short-circuit evaluation

Logical expressions are evaluated from left to right. JavaScript uses a mechanism known as "short-circuit evaluation" to prevent the second, third, and nth conditions from being tested in certain cases:

false && something (an expression) is always false, and the part to the right of && operator is not tested.
true || something (an expression) is evaluated to true, and the part to the right of the || operator is not tested.

Examples:

1.  var b = 5;
2.  var c = 6;
3.   
4.  if ((b === 5) || (b === 6))  { //the second part is never tested
5.    console.log('b is equal to 5 or equal to 6');
6.  }
7.   
8.  if ((b === 5) && (c === 6)) {  // second part is evaluated
9.    console.log('b  is equal to 5 and c is equal to 6');
10. }
11.  
12. if ((b === 15) && (c === 6)) {  // second part is never evaluated
13.   console.log('b  is equal to 5 and c is equal to 6');
14. } else {
15.   console.log('b not equal to 15 or c not equal to 6');
16. }

Implicit conversions of non boolean values in expressions

Used with logical operators or within statements, non-boolean values are implicitly converted to booleans.

All the following values are evaluated as false:

false
undefined
null
0
NaN
the empty string ''

Everything else is evaluated as true!

1.  var boo = 'hello' && 'world'; // boo is equal to 'world' that is 'true'.

In the above example, 'hello' && 'world' is evaluated as true but will return a value! Indeed, boo will equal 'world' because 'hello' is a string value that is evaluated as true. And 'world' is in also true as it's not one of the value cited in the previous paragraph. If we do : if (boo) then…. we will enter the if statement.

The rule is that both && and || result in the value of (exactly) one of their operands:

A && B returns the value A if A can be coerced into false; otherwise, it returns B.
A || B returns the value A if A can be coerced into true; otherwise, it returns B.

External resource: The && and || Operators in JavaScript

TO SUM UP: it works "normally" if you just think true/false, but the real value affected is not true false, it's one of the operands, that can be seen as true/false.

1.  var boo2 = (0/0) || 43.2 ;

boo2 equals 43.2 because the expression 0/0 equals NaN, which is evaluated as false.

Question:

What is the value of the variable myNumber after the execution of this code?

1.  var myNumber = !1;
2. 
3.  if(myNumber == null){
4.    myNumber = 3;
5.  }
6.  
7.  myNumber = myNumber || 2;

Explanation: after the first line, myNumber equals false. In the if statement, at line 3, false does not equal null. Therefore, the value 3 is not assigned to the var myNumber. In the last line, myNumber is evaluated as false, then the value 2 is given to the variable myNumber.

Comparison operators

Equal ==
Not equal !=
Greater than >
Greater than or equal >=
Less than <
Less than or equal to <=
Strict equal ===
Strict not equal !==

What is the difference between == and === in JavaScript?

Equal (==)

Returns true if the operands are strictly equal with type conversion.

Strict equal (===)

Returns true if the operands are strictly equal with no type conversion.

The triple-equals operator never does type coercion. It returns true if both operands reference the same object, or in the case of value types, have the same value.

Some examples:

1.  1 == 1;
2.  //true
3.  
4.  1 == 2;
5.  //false
6.  
7.  /* Here, the interpreter will try to convert the string '1'
8.  into a number before doing the comparison */
9.  
10. 1 == '1';
11. //true :
12.  
13. //with strict equal, no conversion:
14.  
15. 1 === 1;
16. //true
17. 1 === '1';
18. //false

Depending on the context, generally strict equal (or strict not equal) is preferred.

Best practice for beginners: always use === or !== for comparisons.

Here are interesting articles:

Specific case of NaN

As we have already seen, JavaScript has some special values. One of them is NaN: "Not-a-Number".

NaN has this special property:

1.  NaN == NaN;
2.  // false
3.  
4.  NaN === NaN;
5.  // false

Nan is equal to nothing - not even to itself!. But you do have a function to check the NaN value: isNaN(expr).

isNaN: returns true if the argument coerces to NaN, and otherwise returns false.

1.  isNaN(NaN);
2.  // true
3.  
4.  isNaN(0/0);
5.  // true
6.  
7.  isNaN(12);
8.  // false
9.  
10. isNaN('foo');
11. // true

"A reliable way for ECMAScript code to test if a value X is a NaN, is an expression of the form X !== X. The result will be true if, and only if, X is a NaN. " (see the isNan documentation).

A complete example with isNaN:

1.  var num =0/0;
2.  
3.  if(isNaN(num)){
4.    num = 0;
5.  }
6.  //shortened version with the conditional operator
7.  var num = isNaN(num) ? 0 : num
8.  
9.  //version with logical operator (implicit conversion)
10. var num = num || 0;
11.  
12. /*
13.    <=> num = NaN || 0
14.  
15.    <=> num = false || 0
16. */
17.  
18. num;
19. //returns 0 in this three cases

Of course 0/0 rarely happens, but there are other cases where NaN can appear, for example:

parseInt('foo'); returns NaN //parseInt tries to convert a String to a Number
Math.sqrt(-1); return NaN

2.2.2 Conditional statements (5:07)

Live coding transcript: switch statement

Hi! Let's have a look at the switch statement.

I prepared a small example in which we take a day number between 0 and 6, 0 for Monday, 1 for Tuesday, and so on… And to pick a random number that is an integer, we used a formula like this, that uses a predefined object called Math.

Math.random() returns a number between 0 and 1, 6 multiplied by this, will give a number between 0 and 7, and we just return the rounded nearest integer. When we execute this, "picked day number…" you see that it takes some random values each time we execute.

If I clear the console and execute this, it will pick a number. And then, here is a first version that uses "if statements" that is a bit naïve. It says: if day equals 0, then print Monday; if day equals 1 … ; and so on. Why is it naïve? Because we're going to execute all the tests and we all know that only one of them will be true.

Instead of multiplying series the tests, a better version is to use "if… else" statements, like this… so if day equals 0, then print Monday, else if day equals 1, print Tuesday… In that case, we're gonna test just until we find the day, and all the else will be ignored.

A much better version uses a switch. When you've got to make multiple tests, it might be more interesting to use a switch. switch(day). Then you test with the different possible values, using the "case" keyword. "case 0": that means that "if day equals 0, then execute console.log('Monday'). The break here means "ignore all the other cases".

When you put a break after each case, it's a bit like the "if…else" example we saw earlier: only one block of instructions will be executed here…You can see that the 3 different versions with the naive if, the if-else statement and the switch, give the same result.

Be careful because sometimes, if you forget to use a "break", you can enter different case statements. You can make errors if you don't know what to break keyword means, but it can also be useful to regroup cases.

For example, if I want to print "This is a week day, we go to work!", when we've got Monday, Tuesday… any day of the week! And if I want to print "Week end!" for Saturday and Sunday, then I can regroup cases like that.

You see case 0, case 1, case 2, case 3, case 4… and then just use a break after we executed the block of instructions that is related to all these five cases. Doing this, we will print "Week Day…" only if the day has a value of 0, 1, 2, 3 or 4, and we will print "Week end!" if it has a value of 5 or 6.

Be careful because I saw this error a lot of time with beginners: you must use "case" only with a value after it, not an expression! This thing here case "day greater or equal than 0" or "day less than 4" is not valid. You cannot use an expression here, after the case. This is not going to work. Avoid! This… error!

And finally, there is a better solution to the problem I've illustrated. It's not to use any if or any switch…but use an array! If we've got an array that contains all the string values for the days of the week, we can just do a console.log… daysOfTheWeek… brackets, and use the day as an index. And this works too and it's only two lines of code.

Example from the transcript

CodePen example from the lesson above

JavaScript source code is a set of statements. There are a couple of different statement types. We have already seen one of them, the variable statement:

1.  var myVar = 'hello ' + 'world';

We've also seen the expression statement:

1.  3 + 4;
2.
3.  // more often like this
4.  var x = (3 + 4);
5.  var y = (5 + x);

A statement closes with a semicolon, but we will see later that missing semicolons are automatically inserted (for readability reasons, we highly recommend systematically adding a semicolon at the end of all statements).

Statements are generally executed sequentially from top to bottom of the script. However, this flow can be modified by statements such as conditional statements and iteration statements.

The block statement

The block statement is a simple statement which allows us to group a set of statements wrapped in curly braces.

Block statement:

1.  {
2.  var i = 0;
3.  var result = false;
4.  console.log('i = ' + i);
5.  }

The block statement is used by other statements such as the if-statement or for-statement. We will see these statements below.

Conditional statements

All the examples for this section are in this codepen (to run it: click on the "edit on CodePen" label, and once in CodePen, open the devtool console to see the outputs of this program):

CodePen: example devtool console to see output of this program.

(Please look, edit and try whatever you want. There are parts that are commented - please remove comments and try to understand the results).

Conditional statements are used to execute a unit of code only if a condition is evaluated as true.

The if statement

Syntax:

if ( Expression ) Statement else Statement
if ( Expression ) Statement

The expression may include:

logical operators ( ! && || )
comparison operators ( ==, ===, >, >=, <, <= )
any values or expressions which can be converted to boolean

Example #1: if-statement

1.  var num = 10;
2.
3.  if (num === 10) {
4.    num = 20;
5.  }
6.
7.  // num equals 20

Example #2: if-else statement

1.  var num = 10;
2.
3.  if (num >; 10) {
4.    num = 20;
5.  } else {
6.    num = 0;
7.  }
8.
9.  // num equals 0

Reminder:

The following values will evaluate to false:

false
undefined
null
0
NaN
"" (empty string)

All other values, including all objects, evaluate to true when passed to a conditional statement.

The if-then-else ternary operator

This ternary operator is a shortcut version of if…then…else.

Let's look at this code example:

1.  var max;
2.  var min = 2;
3.
4.  if (min < 10) {
5.    max = min + 10;
6.  } else {
7.    max = min;
8.  }

Explanation: You can replace this "if-then-else" statement with the ternary operator that uses a syntax with "?" and ":"

1.  var max;
2.  var min;
3.  max = (min < 10)? min+10 : min;

Line 3 can be read as if (min < 10) then max = min+10, else max = min. The "then" part is after the "?" and the "else" part is after the ":" part.

This "short" version is not recommended except for very simple statements that involve a very obvious block of instructions for the "then" and the "else". Usually this syntax is much harder to read for beginners.

Curly braces

Should we use them in if-then-else statements? There are examples without curly braces on the Web: what does this mean?

Here are two versions of the same code.

Version 1: no curly braces

1.  if (a > 2)
2.    result = 'a is bigger than 2';
3.  else
4.    result = 'a is not bigger than 2';

Version 2: with curly braces for delimiting the "then" and "else" blocks.

1.  if (a > 2) {
2.    result = 'a is bigger than 2';
3.  } else {
4.    result = 'a is not bigger than 2';
5.  }

Version 1 and version 2 are equivalent. Indeed, version 1 is correct: you can omit curly braces if the "then" or "else" blocks are made of only one statement (one line of code).

But version 2 is cleaner and more readable, and, in particular, it is much better for maintainability (because you can add a statement just by pressing the enter key. And you can add some extra lines of code without worrying about adding curly braces because you broke the "1 line statement rule").

It is strongly recommended that you always use if-statements enclosed in curly braces.

Of course, one-line if-statements like this:

1.  if (true) doSomething();

…are fast to write, but if you want to add a second statement later it will become more time consuming.

Conclusion: always use curly braces!

The switch statement

In order to avoid having a series of ifs and elses, it is possible to use a switch statement.

The syntax of the switch statement is:

1. switch (expression) {
2.    case value1:
3.      Statement
4.      break; // break can be omitted in that case
5.             // the second test case will be executed
6.             // most of the time we add a break; at the end
7.             // of a "case"
8.
9.    case value2:
10.      Statement
11.      break;
12.
13.   case value3:
14.     Statement
15.     break;
16.
17.   default: // if no case tested true
18.     Statement
19.     break;
20. }

If the value of an expression equals one of the cases (the equality operator evaluated is ===), all the statements next to this case block are executed sequentially until the keyword break is reached.

Example #1: a common switch/case/default example

1.  var gear = '';
2.   
3.  switch (cloudColor) {
4.    case 'green':
5.      gear = 'spacesuit';
6.      break;
7.
8.    case 'black':
9.      gear = 'boots';
10.     break;
11.
12.   case 'grey':
13.     gear = 'umbrella';
14.     break;
15.
16.   case 'white':
17.     gear = 'jacket';
18.     break;
19.
20.   default:
21.     gear = 'watch';
22.     break; // useless if in the last case
23. }          // end of the switch statement

In this example, if the clouds are grey, then my gear will be just an umbrella. If they are white, I'll wear only a jacket, if they are black I'll be nude with just boots (!), and if they are green I'll get a spacesuit. And if the cloud color is none of these, then I'll only wear a watch. The presence of the break keyword at the end of the different cases make the choices 100% exclusive. Only one case can be executed!

Example #2: a switch without "breaks" at the end of each case

1.  var gear = '';
2. 
3.  switch (cloudColor) {
4.    case 'green':
5.      gear += 'spacesuit';
6.      break;
7.
8.    case 'black':
9.      gear += 'boots, ';
10.
11.   case 'grey':
12.     gear += 'umbrella, ';
13.
14.   case 'white':
15.     gear += 'jacket, ';
16.
17.   default:
18.     gear += 'watch';
19. } // end of the switch statement

Explanation: if the clouds are black, then my gear will be 'boots, umbrella, jacket, watch'. If the clouds are green, my gear is a spacesuit (because of the break keyword, other cases will not be tested). If the cloud color is not in the listed colors, then my gear is only a watch (default case).

Example #3: three ways to do condition statements

To finish up this section, here is a complete example (to run it: click on the "edit on codepen" label and once in codepen, open the devtool console to see the outputs of this program):

CodePen: open devtools to see the outputs.

2.2.3 Loop statements (8:06)

Live coding video: loop statements

Let's talk about loop statements.

There are different loop statements in JavaScript.

One is the "while" loop statement. It starts with some initializations, you give some values to some variables, then you use the keyword "while" followed by an expression that you will test. It will be evaluated as "true" or "false".

When this expression is false, you continue after the block of instructions that is inside the loop. Let's start with an example. We've got here some initialization: "var n = 1, m = 1;". We've got the keyword "while" followed by the condition, "n less than 4", followed by a block of instructions that will be executed as long as the condition is evaluated as true.

With n = 1, n is less than 4, we execute the block of instructions. Inside the block, n is incremented, n += 1, then n = 2, it's still less than 4, we continue, n = 3, it's still less than 4, we continue, n = 4, then the condition is false: 4 is not strictly less than 4, and we continue after the loop and the console.log is executed.

Let's have a look at the execution of this program. While it's executed, it prints in the body of the loop console.log, it prints n = 1, this is the initial value, n = 2, n = 3… when n = 4 the condition is no more true and we go at the next instruction after the block of instructions of the loop. Inside the loop, we also incremented the variable m by adding the consecutive values of n. And m had a starting value of one. 1 + 1 + 2 + 3 + 4 …. the final result is 10 as you can see.

The second kind of loops you can use are called the "do…while" loops.

They are very similar to the while loops except that the first execution of the block of instructions does not depend on any condition. The condition of the loop is at the end, after the keyword "while". Do something… while the condition is true… Let's look at this example: we've got a variable i that has a value of zero, and we increment it in the loop, but before incrementing it we print its value.

The final condition is "i strictly less than 20". We are going to execute this for 0, 1, 2… and when i++ will give a value to i that is 20, then the condition will be no more true, and we will finish the execution of the loop and execute the console.log that is here.

Look at the devtool console:

We executed the loop for i = 0 to i = 19. After the last display of the value, we incremented i, the condition was false, i is 20 now, and we printed its value.

The last sort of loop statements you can use are called "for" loops. The syntax is like that: "for" followed by parenthesis, followed by a block of instructions. And in the parenthesis you've got three different parts separated by semicolons.

The first part is the initialization part, then the "condition ». As long as the condition is true, the block of instructions will be evaluated. And there is something called the "final expression": it's a set of instructions that will be executed like if they were located at the very end of the loop, as the last instruction.

Usually we increment some variables, or decrement some variables that will make, after a certain number of executions of the loop, the condition false.

Let's try a small example: we are going to count one by one from an initial value to an end value. You see: I counted from 0 to 5, not included, because of the "less than" operator here. I counted for i equals 0, 1, 2, 3, 4… then, when i is equal to 5 the condition is no more true and we exit the loop.

We can also use less than or equal to. In this case we counted to the final value and included it.

We can also increment the loop 2 by 2. In that case (let me clear and execute again), we run the loop with a value of i = 0, i=2, i=4, i=6, the condition is no more true, we exit from the loop.

We can also iterate on the elements of an array. This is very common. We've got an array here called "daysOfTheWeek" and we are going to enumerate all the elements inside.

Let's make a "for" loop, and the final value… the number of times we are going to iterate is the number of elements in the array. It's given by the "length" property of the array. What we did: we executed the loop from i = 0, to i = 1, 2, 3, 4, 5, 6, 7! This is the value of "daysOfWeek.length", and we incremented the i variable at the end. We did this for i = 0, 1, 2, 3, 4, 5, 6 and we displayed the element with the index equal to i, inside the loop.

Example from the lesson

Example on CodePen

Loops

A loop is used to run the same block of code several times while a condition is satisfied.

If you have trouble with loops, the online tool slowmoJS can be really useful: you just have to copy and paste an example into it to run it step by step and see how your program executes loops.

The while statement

With a while statement, a block of code is executed repeatedly while the specified condition is satisfied (evaluates to true).

Syntax:

while ( condition ) statement

The condition is an expression, and the statement can be a block statement.

Typical example of a while statement:

1.  var i = 1, j = 1;
2.   
3.  while ( i < 4 ) {
4.    j += i;
5.    i += 1; 
6.  }
7.  …

The block inside the while (lines 4 and 5) will be executed three times:

Line 1 initializes i with a value of 1.
We enter the while statement at line 3. Is the value of i strictly less than 4?
Yes, the variable i is equal to 1, we enter the statement inside the while.
Run 1:

We execute line 4: j += i; (equivalent to j = j + i). As j was set to 1 at line 1, j is now equal to 2.
We execute line 5 and increment i by one. The variable i is now equal to 2.
We go back to the while at line 3. Is i < 4? Yes, we execute lines 3 and 4 again.

Run 2:

Now at the end of line 5, j is equal to "old j value" + "new i value", so j = 2 + 2 = 4, i has been incremented and is now equal to 3.
We go back to the while at line 3. Is i < 4? Yes, we execute lines 3 and 4 again.

Run 3:

Now at the end of line 5, j is equal to "old j value" + "new i value", so j = 4 + 3 = 7, i has been incremented and is now equal to 4.
We go back to the while at line 3. Is i < 4? No! The value of i is now 4, which is not less than 4. We continue the execution of the program at line 7 with i = 4 and j = 7.

Of course, if the condition never evaluates to false, the block will be executed infinitely until the machine crashes… a test like while (i > 0) { …..} will never stop and will eat all the CPU.

Try this example now with slowmoJS!

The do-while statement

The do-while statement is very similar to the while statement, but its syntax is different:

do statement while ( condition )

Typical example:

1.  var i = 0;
2.  do {
3.    console.log('i = ' + i);
4.      i++;
5.  } while(i < 20);
6.  console.log('Value of i after the do-while statement: ' + i);

The do-while statement executes the content of the loop once before checking the condition of the while, whereas a while statement will check the condition first before executing the content.

A do-while is used for a block of code that must be executed at least once.These situations tend to be relatively rare, thus the simple while-statement is more commonly used.

If you want to "see" the difference, look at the "do-while" statement with slowmoJS and the "while" statement slowmoJS.

The for statement

This statement adds some things to the while and do-while statements: an initialization expression and an incrementing expression.

Its syntax is:

for (initialization; condition; incrementation) statement

The three expressions within the parentheses are optional. If the condition is omitted, it is replaced by true (infinite loop).

Typical example (counting from 0 to 10):

1.  for (var i = 0; i <= 10; i++) {
2.    console.log('i = ' + i);
3.  }

We can have more than one instruction in the "initialization part" (var i = 0), and more than one instruction in the "incrementation part" (i++). Here is another example:

1.  for (var i = 1, j = 1; i <= 10; i++, j+=2) {
2.  console.log('i = ' + i + ' j = ' + j);
3.  }

In this example, two variables are defined and assigned within the initialization expression. Before each execution of the block statement, the condition is checked; here we need i <=10. After each execution of the block statement, the incremental expression is executed to increment the variables i by 1 and j by 2.

Open the devtool console of your browser and copy and paste the above code, or look at the slowmoJS execution.

The for-in statement

The for-in statement is used to iterate through an object (or through an array, which is also an object).

Its syntax is:

1. for ( variable in expression ) statement

Typical example:

1.  var michel = {              // michel is an object
2.      familyName:'Buffa',     // familyName, givenName, age
3.                              // are its properties
4.      givenName: 'Michel',
5.      age: 51
6.  }
7.   
8.  for(var property in michel) {   // the for-in will
9.                                  // enumerate properties
10.     console.log(property);      // will print "familyName",
11.                                 // "givenName",
12.                                 // "age"
13.     console.log(michel[property]);  // michel['givenName']  same 
14.                                     // as michel.givenName
15. }

Before each execution of the block statement, the variable named "property" is assigned with the name of one of the properties (the keys) of the object. We will see further examples of this statement in module 4, which is devoted to the study of JavaScript objects.

[ADVANCED] Other statements

The continue statement

The continue statement is used to stop the execution of a block and start the next iteration of the loop. The difference from the "break" statement is that the loop continues.

Syntax:

1. continue [label]

The label is optional.

Typical example:

1. for(var i = 1, k = 0; i < 5; i++) {
2.   if (i === 3) {
3.     continue;
4.   }
5.
6.   k += 2*i;
7.     console.log('k += ' + (2*i));
8. }
9. console.log('Final k value:' + k)

Copy and paste this example in your devtool console, but first, try to guess what the value of k will be!

Hint: lines 2-4 mean that line 6 will never be executed for i = 3. That means that i*2 will only be added to k for i = 1, 2 and 4…

The break statement

The break statement is used to stop an iteration, a switch or a labelled statement.

Syntax:

1. break [label]

Typical example:

1.  var tab = ['michel', 'john', 'donald', 'paul']; // johh at index = 1
2.  
3.  function isNameInTheArray(name, theArray) {
4.    console.log("Number of elements in the array : " + theArray.length);
5. 
6.    for(var i=0; i < theArray.length; i++) {
7.      console.log('comparing with element in the array at pos ' + i);
8.  
9.      if(theArray[i] === name) {
10.       console.log('the name ' + name +
11.       ' is in the array at pos: ' + i);
12.       break;
13.     } else {
14.       console.log(name + ' is not at pos ' + i);
15.     }
16.   }
17. }
18.
19. // Execute the function
20. isNameInTheArray('john', tab);

Copy and paste in the devtool console. You'll see that the function that compares each element in the array passed as the second parameter with the name 'john', will stop looping after 'john' has been found at index = 1.

Detailed explanations:

Line 20 executes the function
Line 6: The for statement loops on all existing indexes in the tab, from 0 to tab.length
Line 9: if the condition is true, we enter the block and execute lines 10-12
The break statement at line 12 will exit from the loop, it "breaks" the loop.
The different console.log(…) will never display the message "comparing with elements…" with indexes greater than 1: the loop exists when 'john' is found at index 1 (i equal to 1).

2.2.4 Discussion and projects

Here is the discussion forum for this part of the course. Please either post your comments/observations/questions or share your creations.

Suggested topic of discussion:

Did you know about the === and !== operators we recommend you to use?

Optional projects:

If not allergic to High School math, please write a piece of code that solves second degree equations. You pass the a, b, c parameters of: ax^2^ + bx + c, and the solve function will compute delta = b^2^ - 4a*c. Test the sign of delta, and if it's equal to zero, then display (in the console, or better, in the page) the roots of the equation.
Try to write a small program that asks you to guess a number. It will choose randomly a number, and will ask you to enter a value in an input field. Then it will display "too small" or "too big", until you find the number.

Hint: use the Math.random and Math.round methods, such as in let randomNumber = Math.round(Math.random() * 10); to get a random value between 0 and 10.

For working with input fields, look at section 1.4 from the first module, the math function plotter example used input fields. Or look at the section about DOM in this module.

Try to make a quiz using the DOM and buttons, checkboxes, etc.
Display a question, for example "Which actor played in Titanic?", and display two or three buttons ("Leonardo Di Caprio", "Christian Bale", "Nicolas Cage"). Then, when the user presses a button, you must check the answer and display the next question, etc.
Use CSS with an image background for the buttons.
Or use images with click listeners - we saw this in the section about the DOM and events.
A bit more challenging: use checkboxes instead of a set of buttons (we've done an example close to this in the section that presented the DOM).

2.3.1 Functions and Callbacks

Let's see how to declare a function and a callback.

Functions

There are two ways to declare a function.

1) Standard function declaration

We've already seen that functions can be declared using this syntax:

1.  function functionName(parameters) {
2.  // code to be executed
3.  }

A function declared this way can be called like this:

1. functionName(parameters);

Notice that we do not add a semicolon at the end of a function declaration. Semicolons are used to separate executable JavaScript statements, and a function declaration is not an executable statement.

Here is an example:

CodePen: sum and displayInPage functions.

In the above example, the sum function returns a value, and the displayInPage function does not return anything.

2) Use a function expression

A JavaScript function can also be defined using an expression that can be stored in a variable. Then, the variable can be used as a function:

Here is a typical example:

CodePen: displayInPage & sum functions.

Notice how the sum and displayInPage functions have been declared. We used a variable to store the function expression, then we can call the functions using the variable name. And we added a semicolon at the end, since we executed a JavaScript instruction, giving a value to a variable.

The "function expression" is an "anonymous function", a function without a name, that represents a value that can be assigned to a variable. Then, the variable can be used to execute the function.

We say that functions are "first class objects" which can be manipulated like any other object/value in JavaScript.

This means that functions can also be used as parameters to other functions. In this case they are called "callbacks".

Callbacks

Indeed, as functions are first-class objects, we can pass a function as an argument, as a parameter to another function and later execute that passed-in function or even return it to be executed later. When we do this, we talk about callback functions in JavaScript: a function passed to another function, and executed inside the function we called.

All the examples of event listeners that you've seen used callback functions. Here is another one that registers mouse click listeners on the window object (the window objects represent the whole HTML document):

CodePen: processClick function.

In this case, the processClick function is passed as a parameter to the addEventListener method/function.

Callback functions are derived from a programming paradigm known as functional programming. They are very common in JavaScript. We'll use them a lot in the next section of the course, called "Handling events".

2.4.1 Intro: Handling Events

Adding interactivity to a Web application can be achieved by using only CSS, such as by using the :hover pseudo CSS class.

For example:

CodePen: :hover.

However, firing a specific action when the button is clicked, knowing which mouse button has been used, computing the (x, y) mouse pointer position in the button system coordinate, or executing more complex tasks can only be done through JavaScript.

With JavaScript, a button click, a move of the mouse, a resized window, and many other interactions create what are called "events". The timing and order of events cannot be predicted in advance. We say that "event processing" is asynchronous. Web browsers detect events as they occur, and may pass them to JavaScript code. They do this by allowing you to register functions as event listeners, also called handlers or callbacks for specific events.

Each time an event occurs, the browser puts it in a "queue of events". Then the browser looks at a list of "Event Listeners" and calls the ones that correspond to the type of event "they listen to".

2.4.2 Adding and removing event listeners to a document

Live coding video: adding an event listener to a document

Hello. Let's see how events work in JavaScript. In this video, I will show you how to add a simple event listener for detecting clicks or mouse moves, and we will start with the simplest example.

It's listening for events that will occur anywhere on the Web page.

When we add an event listener to the whole page, the syntax is this one: you can type "AddEventListener", followed by the name of the event.

Here we are going to listen to mouse clicks. And then indicate the reference of the callback function that will process the event. Let's write this callback…and let's try it! I clicked on the page anywhere, and an alert message appeared.

This is the first syntax, and there is a variant that is very common in JavaScript, when the length of the callback (source code) is small, you can directly add the callback inside the parenthesis of the AddEventListener call.

Let's see this example… I'm going to comment the first example, and this time, instead of just adding as an argument the name of the callback, we directly put the body of the callback.

A function… and we don't have to indicate a name: it's an anonymous function, an anonymous callback. When we click on the page, we will execute this callback that is located exactly as the second argument.

If I click on the page, you can see that it works again. And this syntax is very common! Notice the parenthesis, followed by a semicolon at the end, because this is just like a parameter.

It's an anonymous callback function, that is the second argument.

Finally, there is a first syntax, that uses the the object that will fire the event. The window object is the whole document. We start with "on" followed by the name -in lowercase- of the event, and we assign to this property "onclick", we assign directly the function.

We can directly type the anonymous function, like that. We add a semicolon because this is a an executable statement. And if I click… …it works. Okay, or I could have used the same syntax we saw earlier, with a regular callback function with a name, and we just indicate onclick equal the name of the callback, like this, which is the same name… So if I click, it works.

Online example used in the above lesson

CodePen: Example click event listener

2.4.2 cont'd; Adding and removing event listeners to HTML element

Live coding transcript: adding an event listener to a specific HTML element.

In this lesson, I will show you how to add an event listener to an html element, and not to the whole document, like in the previous lesson.

Let's try with a button. One of the easiest way to detect a click on a button is to use the onclick = name of the function, name of the callback that will process the function. In that case, we can locate the body of this callback anywhere in the script element.

We can, for example, put the script element in the head element at the top of the html document. Let's try like that… In that case, you see, when I click, the processClick callback is called. I always add an argument here, that is not used in this example, but it will be the topic of a next video. Here, I'using just the DOM API for adding some text to the document.

If you want to use the other syntax with addEventListener, you must take some precautions. You will need first to locate the element, so that you can manipulate it from JavaScript. For that, we usually add an id attribute so that we can identify the element. And then we use a script element. I'm putting this one at the end of the document.

There is a good reason for that, that I will explain. And first, I get a reference on the element. For that, we use the selector API: it's a built-in feature that is in your browser, that is very useful for getting references on elements. document.querySelector is the name of the method we are going to use.

And then, we use a CSS3 selector. Notice that the id I use is the same I used in the declaration of the html button.

CodePen: querySelector and addEventListener.

Once I've got the reference on the object, I can add the event listener. Let's try it. I click on the button and I get an alert. You must understand that when you execute document.querySelector, the button must exist in the page and must has been rendered. We say that "the DOM of the page must be ready".

When an HTML page is rendered, it's sequential, it goes from top to bottom, so in that case, the button is created, added to the DOM, then the script is executed, and document.querySelector will return a reference on the button.

If I move this script tag before the button, in that case, it's not going to work because the b variable here will correspond to nothing, it will be null because there is not yet a button in the DOM. And if we look at the devtool console, we see "cannot read property addEventListener of null". This occurs at this line, we try to run addEventListener on a variable that is null. Be very careful, do not try to select an HTML element when the DOM is not yet ready.

Online example used in the above lesson

Example on CodePen

Event listeners: a typical example

Here is one possible syntax for registering an event listener that listens to "click" events on any part of the window (clicks anywhere on a web document will be processed by this event handler):

1. <script>
2.   addEventListener('click', function(evt) {
3.     document.body.innerHTML += 'Button clicked!';
4.   });
5. </script>

Try it below by clicking anywhere on the document:

CodePen: addEventListener function.

The addEventListener function is one possible syntax for registering a function to be called when a given type of event occurs.

1. addEventListener(type_of_event, callback_function)

In the example below, the type of event is a 'click', and the callback function is the part in bold:

1. function(evt) {
2.    console.log("Button clicked!");
3. }

When this function is small (a few lines of code), it's common practice to put its body as the second parameter of the addEventListener function.

In other words, this:

1.  <script>
2.  addEventListener('click', function(evt) {
3.      document.body.innerHTML += 'Button clicked!';
4.  });
5.  </script>

… is the same as this (the function called when a click occurs has its body "outside" of the addEventListener parameters, and we use its name as the second parameter):

1.  <script>
2.    addEventListener('click', processClick);
3.    function processClick(evt) {
4.      console.log("Button clicked!");
5.    }
6.  </script>

Adding an event listener to specific HTML elements

Instead of listening to event on the whole document (using addEventListener is the same as using window.addEventListener), we can listen to specific DOM elements. For example, here is how we can listen to clicks on a specific button (whereas clicks on the rest of the document will be ignored).

CodePen: Click me!

In this example, instead of using the addEventListener method directly, we used it on a DOM object (the button):

Get a reference of the HTML element that can fire the events you want to detect. This is done using the DOM API that we'll cover in detail later in this Module. In this example we used one of the most common/useful methods: var b = document.querySelector("#myButton");
Call the addEventListener method on this object. In the example: b.addEventListener('click', callback)

Every DOM object has an addEventListener method. Once you get a reference of any HMTL element from JavaScript, you can start listening to events on it.

An alternative method for adding an event listener to an HTML element: use an "on" attribute (ex: onclick = "….")

Instead of using b.addEventListener('click', callback), it's possible to use an onclick='doSomething();' attribute directly in the HTML tag of the element:

CodePen: processClick(event) example.

This syntax:

1. <button id="myButton" onclick="processClick(event);">Click me!</button>

… is ok when you only need a single event listener to click events for this button, as there can be only one onclick attribute per element. Using the b.addEventListener('click', callback) syntax, you can register more than one event listener. You'll need rarely to do this, so in my opinion it's fine to choose whichever syntax you like.

Remember that for big projects, it's always better to separate the HTML, CSS and JavaScript code. In this case, I'd recommend that you put all your event listener definitions in a separate JavaScript file, and use the addEventListener syntax in preference to the "on" attributes syntax.

Removing event listeners

When we click on the button, we execute the processClick(evt) callback function, and inside we remove the listener we previously registered. Consequence: if we click on the button again, nothing happens as there is no longer a click event listener attached to it.

CodePen: add and remove event listeners example.

Note that to remove an event listener, you should have added it with its named function, so that we can pass it to both addEventListener and removeEventListener.

2.4.3 The Event Object

The event object is the only parameter passed to event listeners.

Typical example:

1.  function processClick(evt) {
2.      alert("Button clicked!");
3.  }

Each event listener has a single parameter that is a "DOM event object". It has various properties and methods that can be very useful.

For example, with a 'keyup', 'keydown' or 'keypress' event, the event object contains the code of the key that has been pressed/released, with a 'mousemove' listener we can get the relative position of the mouse in the DOM element that has generated the event, etc.

The event object contains some important properties and methods that are common to all types of events:

evt.type: the name of the event
evt.target: for example, is the HTML element that has fired the event. In our previous examples with the click listeners on a button, evt.target in the event listener is the button itself.
evt.stopPropagation(): will not propagate the event to all other elements that listen to it. If several elements are registered for a click event - for example, you have a click listener on a button and on the window (the whole page). If you click on the button, and if in its click event listener you call evt.stopPropagation(); then the click event listener on the window object will never be called.
evt.preventDefault(): the default browser behavior will not be executed. For example, in a 'contextmenu' event listener attached to an object, if you call evt.preventDefault(), instead of having the right click default context menu of your browser displayed, you'll be able to display your own context menu, like in this example.

It also contains properties that are associated with the type of the event, for example:

evt.button: the mouse button that has been used in the case of a mouse event listener
evt.keyCode: the code of the key that has been used
evt.pageX: coordinate of the mouse relative to the page
etc.

In the subsequent sections of this course we will look at the most common types of events in detail.

Reference table

The most useful common properties are:

The most useful common methods are:

2.4.4 Page lifecycle events

Live coding video: page ‘load’ event and the event object

This time let's talk about the event object, and we'll start looking at different types of events.

One of the events you will use is called the 'load' event, and you can apply it on the page using onload equal followed by the name of the callback.

I usually call this callback "init" and this is a good practice: always use a function that will be called when the page is loaded. I'm adding a console.log message just to verify.

I open the console, and you can see that if I save the document and run again the example, or if I clear the console and execute it again, this callback is called when the page is loaded… that means "when the DOM is ready".Then, from this function, I can call any other function, I can execute any kind of code, I will never have to wonder… to think: "is the DOM ready?"

For example, to update this part of the page… I use a span with an id attribute. I can locate the span… and like this… using the querySelector method and a CSS selector on the id… "pageStatus" is the id of the element… Then I can change the content of the page… If you look at what is happening when I execute the code, it says "page loaded". This is a very good practice. I nearly always do this on my own softwares.

Another variant is that instead of using the "onload" syntax, you can just write window.load = init.

This will produce the same result… onload… and in that case, instead of using body onload…you use window.onload. It's a bit better because you do not mix JavaScript and html, it's a better separation of the different parts of your Web application. You may notice that here I haven't typed the event argument. Every event callback will have an event object passed by the browser when the event is processed.

And this event object can be used to guess what type of event has been fired, can be used to get the different properties of the event, such as the x and y positions of the mouse, the button that has been clicked, the target element that fired the event and so on…

If now, for example, I want to listen to events on a button… a bit in a similar way we presented in a previous example… I can add a listener in the init function…and in this listener, I can, for example, display the name of the button that has been used for clicking. Let's try it… here is the console, I clear it, then I click on the button, and it says it's button 0.

You can also try different types of events, like detecting mouse moves. In that case, we are going to detect mouse moves on the button, and you can see in the console that it works.

You can, for example, use the event object to detect the x position of the mouse.

There are different properties for getting the position of the mouse, relative to top of the page, relative to the top of the viewport or relative to the the element that fired the event. This is detailed in the section about mouse events.

But here, I'm just showing you one the most common property, that is called clientX: it gives the position of the cursor, relative to the top of the page. Just as an example of using the different properties of the event element.

In the next sections, for each kind of event, we'll detail the different properties and provide examples that show how to use them.

Online example used in the above lesson video.

Example on CodePen; page lifecycle events.

The page lifecycle events detect when the page is loaded and when the DOM is ready.

Events related to the page lifecycle

There are many other events related to the page life cycle. The most useful ones for an introduction course are shown below:

Page event properties

There are no particular properties that need to be mentioned here. Usually, the load event listener corresponds to a JavaScript function that can be seen as "the main" function of your Web application. It is a best practice to start everything after the page has been completely loaded.

In the resize listener, you get the new size of the window, or the new size of some HTML elements in the page (as they might have been resized too when the window was resized), and then you do something (redraw a graphic in an HTML canvas that takes into account the new canvas size, for example).

Example 1: wait until the page is loaded (when the DOM is ready) before doing something

This first variant that uses <body onload="init();">

This second variant: using window.onload = init; in the JavaScript code…

Example 2: detect a resize of the window

In this example, we're listening to page load and page resize events. When the window is loaded for the first time, or resized, we call the resize() callback function.

The window.innerWidth and window.innerHeight properties are used to display the updated size of the window. We also use screen.width and screen.height to display the screen size.

Example 3: do something as the page is being scrolled up or down

2.4.5 Key events

This has been a bit of a nightmare for years, as different browsers have had different ways of handling key events and key codes ( read this if you are fond of JavaScript archeology). Fortunately it's much better today, and we are able to rely on methods that should work on any browser.

When you listen to keyboard related events (keydown, keyup or keypressed), the event parameter passed to the listener function will contain the code of the key that fired the event. Then it is possible to test which key has been pressed or released, like this:

1.  window.addEventListener('keydown', function(event) {
2.     if (event.keyCode === 37) {
3.       //left arrow was pressed
4.     }
5.  });

At line 2, the value "37" is the key code that corresponds to the left arrow. It might be difficult to know which codes represent which real keyboard keys, so here are some handy pointers:

Try key codes with this interactive example.
And find a list of keyCodes (taken from this CSS Tricks article).

The different key events

Event types related to keyboard

keyboardEvent properties

These are legacy properties, still used by many JavaScript code around the world. However, we do not recommend that you use them if you are targeting modern browsers. keyCode has a more powerful/easy to use replacement called code (not yet supported by all browsers), that comes with a new key property (see the following pages of the course).

Example #1: use keyup and keydown on the window object

CodePen: example using keyup and keydown.

Example #2: see keypress on the window object

See the Pen keyup and keydown events on window by W3Cx ( @w3devcampus)on CodePen

Example #3: detect a combination of keys + modifier keys (shift, ctrl, alt)

Try to type shift-a for example, ctrl-shift-b or alt-f…

CodePen: example detect combination of keys + modifier key.

2.4.6 Dealing with different keyboard layouts

Please do not assume that each key is at the same location on the keyboard in every country!

We've shown how to detect keyup, keydown and keypress events using the DOM API, and how to use the keyCode property of the DOM event.

Be careful when you use the key events in your application, as keyboard layouts vary from one country to another. Most first person shooter games (FPS) use three keys located on the top left of your keyboard to move your character. French AZERTY keyboards will use ZQSD for this (Z = up/move forward, Q and D are for left/right and S is for down/move backward), while US keyboards will use WASD, for example. So keep in mind that keys are not located at the same place on keyboards from different countries.

Extract from the " Internationalize your keyboard controls" article on MDN:

"Recently I came across two lovely new graphical demos, and in both cases, the controls would not work on my French AZERTY keyboard.

There was the wonderful WebGL 2 technological demo After The Flood, and the very cute Alpaca Peck. Shaw was nice enough to fix the latter when I told him about the issue. It turns out the Web browser actually exposes a useful API for this."

One keyboard, many layouts

For details, see Wikipedia's keyboard layout page!

QWERTY layout, used in US, GB, etc.

In addition, QWERTZ keyboards are in use in Germany and other European countries, and DVORAK is another alternative to QWERTY:

DVORAK:

QWERTZ:

Saudi Arabic keyboard layout (see more Arabic keyboards):

Bangla National (Jatiyo) keyboard:

2.4.7 Key and code properties

key and code are new recommended properties you can use with modern browsers.

You may have noticed that in some examples from the previous course page about key events, we used event.key in order to display the character that has been typed. The key property has been introduced with a new W3C API called UI Events (or DOM level 3 events), that has been discussed since 2000. All major browsers have implemented this very practical key property. It comes with another property named code, which is what keyCode should have been. The value of the code property corresponds to a code that is more readable than the value of the old keyCode property.

key: when the pressed key is a printable character, you get the character in string form. When the pressed key is not a printable character (for example: Backspace, Control, but also Enter or Tab which actually are printable characters), you get a multi-character descriptive string, like 'Backspace', 'Control', 'Enter', 'Tab'.

code: Gives you the physical key that was pressed, in string form. This means it's totally independent of the keyboard layout that is being used. So let's say the user presses the Q key on a QWERTY keyboard. Then event.code gives you 'KeyQ' while event.key gives you 'q'.

But when an AZERTY keyboard user presses the A key, he also gets 'KeyQ' as event.code, yet event.key contains 'a'. This happens because the A key on a AZERTY keyboard is at the same location as the Q key on a QWERTY keyboard.

As for numbers, the top digit bar yields values like 'Digit1', while the numeric pad yields values like 'Numpad1'.

List of codes, the reference keyboard

There's no existing keyboard with all the possible keys. That's why the W3C published a specification just for this. You can read about the existing mechanical layouts around the world, as well as their reference keyboard. For instance here is their reference keyboard for the alphanumerical part:

Also, please read through the examples given in the specification. They show very clearly what happens when the user presses various types of keys, both for code and key.

Example that displays the key and code values with your current keyboard

CodePen: display key and code values.

I encourage you to take a look and get at least an overview of this specification.
Please note that the W3C has also published a sibling specification describing the values for the key property.

Current browser support

2.4.8 Mouse events

Important note: Remember that many people do not use the mouse and rely on the keyboard to interact with the Web. This requires keyboard access to all functionality, including form controls, input, and other user interface components (learn more).

Detecting mouse events in a canvas is quite straightforward: you add an event listener to the canvas, and the browser invokes that listener when the event occurs.

The example below is about listening to mouseup and mousedown events (when a user presses or releases any mouse button):

canvas.addEventListener('mousedown', function (evt) {
  // do something with the mousedown event
});
canvas.addEventListener('mouseup', function (evt) {
  // do something with the mouseup event
});

The event received by the listener function will be used for getting the button number or the coordinates of the mouse cursor. Before looking at different examples, let's look at the different event types we can listen to.

Mouse events

Event types related to mouse

MouseEvent properties

Examples

Example #1: detect a click on an element

CodePen: detect a click on an element.

Example #2: see the differences between clientX/clientY and pageX/pageY

The source code is not meant to be understood. It uses the jQuery lib. Please move the mouse pointer, and look at the different properties. Then scroll the page (the table at the top will not move), and look at the properties again; notice how pageX/pageY change, since they are relative to the top of the page, even if they are not visible. Click on the codePen label on top right and run this example! It does not work when embedded in this page!

CodePen: diff between clientX, Y, and pageX, Y.

Example #3: detect a mousemove event and get the mouse position relative to the page

CodePen: detect mousemove and get position.

Example #4: detect a mousemove and get the mouse position relative to the element that fired the event

Here is a first version that does not work well due to a naive use of clientX/PageX and clientY/pageY mouse event properties:

CodePen: detect mousemove and get position relative to fired event.

Here is another version that uses clientX/clientY and the e.target.getBoundingClientRect() method that returns the bounding rectangle that contains the element that fired the event. The return value has top, left, width, and height properties that describe this rectangle. We can use the top and left properties along with evt.clientX and evt.clientY to fix the mouse position and to get a real position relative to the top left corner of the canvas:

CodePen: get position relative to top .

JavaScript source code extract:

1. function processMouseMouve(evt) {
2.   var mousePositions = document.querySelector('#mousePositions');
3. 
4.   // adjust mouse position relative to the canvas
5.   var rect = evt.target.getBoundingClientRect()
6.   var mouseX = evt.clientX - rect.left;
7.   var mouseY = evt.clientY - rect.top;
8.
9.   mousePositions.innerHTML = "mouse pos X: " + mouseX +
10.                             " mouse pos Y: " + mouseY +
11.                             "
"
12. }

Example #5: combine mouseup, mousedown, mousemove to implement a click and drag behavior

CodePen: click and drag behavior.

Example #6: create and attach a right-click context menu to any element

CodePen: create and attach a right-click context menu to an element.

2.4.9 Form and input field events

Events related to forms

FormEvent properties

There are no particular properties that need to be mentioned here. Usually, on a form event listener, we check the content of the different input fields, using their value property. See examples in the part of the course that deals with form events.

Example #1: validating on the fly as the user types in a text input field

First variant: using the 'input' event:

CodePen: simple input field validation.

Second variant: using the 'keyup' event:

CodePen: using the 'keyup' event.

Note that HTML5 forms and the multiple facets of form and input field validation are covered in depth in the W3C

HTML5 Coding Essentials and Best Practices course, which dedicates a whole week to this topic.

Example #2: do something while a slider is being moved

CodePen: do something while a slider is being moved.

Example #3: detect value changes in a number input field

CodePen: detect value changes in a number field.

Example #4: choose a color and do something

CodePen: choose a color and do something.

2.4.10 Reference tables

Quick summary of event management in JavaScript

HTML5 events:

There is no input or output in JavaScript. We treat events caused by user actions as inputs, and we manipulate the DOM structure as output. Usually in a JavaScript application, we will get info such as the key strokes, the mouse button clicks and the mouse position, and we will refer to these variables when determining what action to perform.

In any case, the events are called DOM events, and we use the DOM APIs to create event handlers.

How to listen to events

There are three ways to manage events in the DOM structure. You could attach an event inline in your HTML code like this:

Method #1: declare an event handler in the HTML code

1. <div id="someDiv" onclick="alert('clicked!')"> content of
  the div </div>

This method is very easy to use, but it is not the recommended way to handle events. Indeed, although it currently works, it is deprecated (will probably be abandoned in the future). Mixing 'visual layer' (HTML) and 'logic layer' (JavaScript) in one place is really bad practice and causes a host of problems during development.

Method #2: attach an event handler to an HTML element in JavaScript

1.  document.getElementById('someDiv').onclick = function() {
2.    alert('clicked!');
3.  }

This method is fine, but you will not be able to attach multiple listener functions. If you need to do this, use the version shown below.

Method #3: register a callback to the event listener with the addEventListener method (preferred method)

1.  document.getElementById('someDiv').addEventListener('click', function() {
2.    alert('clicked!');
3.  }, false);

Note that the third parameter describes whether the callback has to be called during the captured phase. This is not important for now, just set it to false or ignore it (you can even pass only two parameters to the addEventListener function call and do not set this boolean parameter at all).

Details of the DOM event are passed to the event listener function

When you create an event listener and attach it to an element, the listener will create an event object to describe what happened. This object is provided as a parameter of the callback function:

1.  element.addEventListener('click', function(event) {
2.    // now you can use event object inside the callback
3.  }, false);

Depending on the type of event you are listening to, you will consult different properties from the event object in order to obtain useful information such as: "which keys are pressed down?", "what is the location of the mouse cursor?", "which mouse button has been clicked?", etc.

In the following lessons, we will remind you how to deal with the keyboard and the mouse.

Further reading

In method 1 (above), we mentioned that "mixing 'visual layer' (HTML) and 'logic layer' (JavaScript) … is bad practice", and this is similarly reflected in many style features being deprecated in HTML5 and moved into CSS3. The management philosophy at play here is called "the separation of concerns" and applies in several ways to software development - at the code level, through to the management of staff. It's not part of the course, but professionals may find the following references useful:

Reference tables for events and properties/methods

These tables are provided as a reference. They are a compilation of the most common event types sorted by domain (key, mouse, forms, etc.). For each domain you will see the most useful event types and their properties. In the following course pages, we will show examples that use most of the events displayed in these tables.

Event object

Most useful common properties:

Most useful common methods:

Page

Events related to the page lifecycle

There are many other events related to the page life cycle. Below are the most useful ones for an intro course:

Page event properties

There are no particular properties that need to be mentioned here. Usually, the load event listener corresponds to a JavaScript function that can be seen as "the main" function of your Web Application. It is good practice to start everything after the page has been completely loaded. In the resize listener, you get the new size of the window, or the new size of some HTML elements in the page (as they might have been resized too when the window was resized) and then you do something (redraw a graphic in an HTML canvas that takes into account the new canvas size, for example).

Keyboard

Event types related to keyboard

keyboardEvent properties

Mouse

Event types related to mouse

MouseEvent properties

Forms

Events related to forms

FormEvent properties

There are no particular properties that need to be mentioned here. Usually, on a form event listener, we check the content of the different input fields, using their value property. See examples in the course, in the part dealing with form events.

2.4.11 Discussion and projects

Here is the discussion forum for this part of the course. Please either post your comments/observations/questions or share your creations.

Suggested topics

Did you know the differences between clientX, pageX, etc. when dealing with mousemove events? Did you know the method we showed for getting the mouse position relative to the elements you're moving the mouse on?
Did you know the different keyboard layouts, and the code and key event properties?

Optional project

Try to write a small game that will display a word taken from an array, randomly, and you will have to type the letters of this word as fast as you can. A bit like the "type of the dead" game (look on YouTube). You can imagine the evolution such as choosing the level, start with 3 letter words, 4 letter words, etc. Choose a topic (medicine, with very difficult words to spell, etc.). If you look at the end of the module, you will see how to work with graphics and animation, you can also imagine a graphic version of this game.

For inspiration, check this cool game "Typing Frenzy" created by learner @AnthonyRKing (ARK)!

CodePen: Typing Frenzy

2.5.1 Introducing the DOM

When a user clicks on a link or enters a URL in the address of your Web browser, it downloads the page's HTML text and builds up a model of the document's structure called the DOM (Document Object Model). This model is used to render the HTML page on the screen.

The DOM is a standard that describes how a document must be manipulated. It defines a "language- and platform neutral interface". So, every browser offers the same JavaScript DOM API.

The DOM API is a programming interface the JavaScript programmer can use to modify the HTML content or the CSS style of HTML elements on the fly.

The DOM API provides the document object as a structured object, a group of nodes represented as a tree. We saw this in Module 1 when we revised the basic principles of HTML.

The document object also exposes a large set of methods to access and manipulate the structured document. Through the DOM, look for nodes (html elements that compose the page), move nodes, delete nodes, modify nodes (attributes, content), and also handle their associated events.

In JavaScript, the DOM is accessible through the property document of the global object window. We rarely manipulate the window object directly as it is implicit: window.document is the same as document.

By using this object, we can access and manipulate our page from JavaScript as a structured document.

Reminder from Module 1: HTML and the DOM

'Elements' are the pieces themselves, i.e., a paragraph, a header, and even the body are elements. Most elements can contain other elements - for example, the body element would contain header elements, paragraph elements, in fact pretty much all of the visible elements of the Document Object Model (developers call it the "DOM").

Let's take, for example, a simplified version of the last HTML code we showed you:

1. <!DOCTYPE html>
2. <html lang="en">
3.   <head>
4.     <title>Your first HTML page</title>
5.     <meta charset="utf-8">
6.  </head>
7.  <body>
8.    <h1>My home page</h1>
9.    <p>Hi! Welcome to my Home Page! My name is Michel Buffa,
10.      I'm a professor at the University of Côte d'Azur, in France,
11.      and I'm also the author
12.      of two other W3CX MOOCS.
13.    </p>
14.  </body>
15. </html>

Click the red circle next to HTML to unfold this HTML document structure (we can also say "see its DOM structure"):

CodePen: html red circle.

Consider the figure above. It contains a single html element. It turns out this includes within it the entire content of your html file. If you click on the "html" red node, you'll find that it contains two components, a head and a body. Clicking on each of these will reveal their respective contents. This structure is what we computer scientists call a "tree". Any given element (except for the outermost 'html' element) is wholly contained inside another element, referred to as the "parent" element. Not surprisingly, the elements that a given element contains are its "child" elements. And, yes, children of a common parent are often referred to as "siblings".

Thus, in the example above, the top element is the html element, which contains just two elements, the head and body. The head element contains a title element and the body contains an h1 element and a p element. In a more typical example, the body would contain many more children, but for our purposes this is enough. p is for "paragraph" (the text between <p> and </p> will be separated by some space before the next element is displayed in the final HTML page rendering), h1 means "heading level 1", and will be rendered by default in bold with a bigger char size than any other text element, etc.

There are different types of nodes in the DOM

There are different types of nodes, but don't worry - the most useful ones are highlighted in bold.

Element (example: <ul></ul>)
Text (example: <p>the text within the element p is a node of type text</p>)
Document, DocumentFragment, DocumentType (example: <!doctype html> for html5), Comment (example: ), ProcessingInstruction (example: <?php echo $name ?>)

Exploring the DOM with the devtool console

You can explore the DOM with the devtool console. This time we used Firefox for exploring the DOM, as it proposes a good structured view of the DOM and of its properties/methods:

If you scroll down the right panel of the devtool console, as in the above screenshot, you will be able to look at all the properties, all the methods, all the event listeners:

You can also use the "DOM inspector" to locate a particular element with the mouse: click the target icon and click on the element on the page that you want to inspect, this time with Google Chrome, but you will find this option in all modern browsers' devtool consoles:

2.5.2 A warning about the DOM API

The DOM and the DOM API can be cumbersome and complicated. There are many methods and properties for manipulating the DOM tree, that are not "very JavaScript". There are historical reasons for this: the DOM wasn't designed exclusively for JavaScript. Rather, it tries to define a language-neutral interface that can be used in other systems as well --- not just HTML but also XML, which is a generic data format with an HTML-like syntax.

HTML5 made some additions that are not in the DOM API but which greatly help the JavaScript programmer (we'll see this in a minute with the "selector API", for example).

We've decided to focus on only 20% of the DOM API and on the selector API (for selecting elements in the DOM). These are the most useful parts and it will give you enough knowledge to solve nearly every problem where you need to manipulate the DOM.

2.5.3 Accessing HTML elements

CodePen: two buttons and four images.

This time, let's look a bit more in depth to the different methods for selecting elements in an HTML page, and then do something with these elements.

CodePen: two buttons and four images.

I prepared here an HTML document that contains two buttons that do nothing for the moment, and it contains also 4 images.

Here are the images… They've got an id: img1, img2, and so on. They've got some URLs and a width.

If we look at the JavaScript code I prepared, I added an init function that is called when the page is loaded.

You remember from a previous video that we can do that using body onload=init. Or we can use (this is an alternative): window.onload=init.

This is what I did here. When the page is loaded, we are going to first check that the init function is executed. And it's executed after the page is loaded, after the DOM is ready. Then we will select all images, and set some CSS properties.

I can have a look at the console, and if I just type anything, it executes again the example, and we see that the console.log in the init function has been executed.

That means that the load event listener has been defined correctly. In order to select all the images, and not only one, we can use the query.SelectorAll method from the document object. I'm using querySelectorAll and by just typing the name of an element, it will select all the elements, the html elements, of this type.

Now, in order to iterate on the collection of elements, you can use the forEach iterator. This one will be detailed later but let's see now a very simple use of it. It takes a single argument that is a callback. Here I'm using just a variable that corresponds to the current image. You can name it as you like. In that case it's "currentImage".

If I do currentImage.style.border… you see that when the page is executed, it will take each element from the list of images, and add to each image a border.

Let's make it larger! You see, we added a border of 10 pixels width. You can also add a margin. In that case I've got the different images with a margin of 10 pixels at top, left, right and bottom.

npsp;npsp;npsp;npsp;npsp;

Let's try to add a border only to the first image. When we click on the first button. If we look at the HTML code, we added an onlick event listener that will call addBorderToFirstImage, a callback defined in the JavaScript code. We can check that the listener works by adding a console.log and clicking on the button. It works!

How to select the first image? We use document.querySelector, and here I can use the id of the image… img1, and then use the style property of the object:

img1.style…, and you see that if I click on the button, then it adds a border. I could have used just "img", in order to select only the first element of type "img". It's the same syntax I used for querySelectorAll, except that in that case it selects just the first one, and you've got the same result.

If I want to resize all the images, I can, in that case, use CSS properties, or you can use the width attribute of the images. In order to select all the images, I'm going to use the same technique I used for adding a border to all the images earlier. I will first select all the images using querySelectorAll, then I will use the foreach iterator, and use the width attribute of each individual image, to set this attribute to a given value…so… if I click here…Oh! The images are only 10 pixels… then maybe this is too small!

Let's try 70 pixels…I click on the button and the images are resized!

I can click on the first button to add a border. You saw the different possibilities.

Accessing HTML elements with the selector API (recommended)

Extract from HTML5 selectors API -- It's like a Swiss Army Knife for the DOM) : "One of the many reasons for the success of JavaScript libraries like jQuery and Prototype, on top of their easing the pain of cross-browser development was how they made working with the DOM far less painful than it had previously been, and indeed how it was with the standard DOM. Being able to use arbitrary CSS selector notation to get matching elements from a document made the standard DOM methods seem antiquated, or at the very least, far too much like hard work.

Luckily, the standards and browser developers took notice. The W3C developed the Selectors API, a way of easily accessing elements in the DOM using standard CSS selector concepts, and browser developers have baked these into all modern browsers, way back to IE8."

The querySelector(CSSSelector) and querySelectorAll(CSSSelector) methods

Ah… these methods owe a lot to jQuery! They introduce a way to use CSS selectors (including CSS3 selectors) for requesting the DOM, like jQuery introduced ages ago.

Any CSS selector can be passed as a parameter for these methods.

While querySelector(selector) will return the first element in the DOM that matches the selector (and you will be able to work with it directly),
querySelectorAll(selector) returns a collection of HTML elements corresponding to all elements matching the selector. To process the results, it will be necessary to loop over each of the elements in the collection.

Typical use:

Looking for an element in the whole document (the whole HTML page): call the querySelector method (or querySelectorAll) on the document object, that corresponds to the whole DOM tree of your web page:

CodePen Example: querySelector & querySelectorAll.

Source code from the above example:

HTML part: we have two buttons that will call a JavaScript function (lines 2 and 6) where we will manipulate the DOM), and we have four images, the first one with an id equal to "img1" (lines 11, 14, 16 and 18).

1.  …
2.  <button onclick="addBorderToFirstImage();">
3.    Add a border to the first image
4.  </button>
5.  <br>
6.  <button onclick="resizeAllImages();">
7.    Resize all images
8.  </button>
9.  <br>
10. <p>Click one of the buttons above!</p>
11. <img src="https://i.imgur.com/Ntvj5rq.png"
12.   id="img1"
13.   width=200>
14. <img src="https://i.imgur.com/yiU59oi.gif"
15.   width=200>
16. <img src="https://i.imgur.com/6FstYbc.jpg"
17.   width=200>
18. <img src="https://i.imgur.com/L97CyS4.png"
19.   width=200>
20. …

JavaScript part: the init function is executed as soon as the page is loaded (and the DOM is ready), in this function we add a shadow and margins to all images (lines 3-21). The two other functions are called when one of the HTML buttons is clicked (line 23 and line 31).

1.  window.onload = init; // run init once the page is loaded
2.
3.  function init() {
4.    // we're sure that the DOM is ready
5.    // before querying it
6.    // this function runs once the page is loaded
7.
8.    // add a shadow to all images
9.    // select all images
10.   var listImages = document.querySelectorAll("img");
11. 
12.   // change all their width to 100px
13.   listImages.forEach(function(img) {
14.     // img = current image
15.     // add a shadow 5px left, 5 pixel down, 15px blur, 5px spread
16.     // grey
17.     img.style.boxShadow = "5px 5px 15px 5px grey";
18.     // add a margin 10px on each side
19.     img.style.margin = "10px";
20.   });
21. }
22. 
23. function addBorderToFirstImage() {
24.   // select the first image with id = img1
25.   var img1 = document.querySelector('#img1');
26. 
27.   // Add a red border, 3px wide
28.   img1.style.border = '3px solid red';
29. }
30. 
31. function resizeAllImages() {
32.   // select all images
33.   var listImages = document.querySelectorAll("img");
34. 
35.   // change all their width to 100px
36.   listImages.forEach(function(img) {
37.     // img = current image, we resize it by changing its
38.     // width attribute
39.     img.width = 100;
40.   });
41. }

Miscellanous examples of use of querySelector(CSSSelector) and querySelectorAll(CSSselector)

Here are some other examples that use more complicated CSS selectors. If you are not familiar with their syntax, we recommend that you follow the CSS basics, and HTML5 and CSS fundamentals courses from W3Cx.

Example #1: get all <li> directly in a <ul> of class nav

CodePen: get all li's within a ul of class nav.

HTML:

1.  <button onclick="firstLiClassRedInUl();">Select first li of
    class red and color it in red</button>
2.  <br>
3.  <button onclick="allLisInUlOfClassNav();">Underline All li in a
    ul of class nav</button>
4. 
5.  <ul class="nav">
6.    <li>Home</li>
7.    <li class="red">Products</li>
8.    <li>About</li>
9.  </ul>
10. Another list:
11. <ul>
12.   <li>Apple</li>
13.   <li class="red">Cherries</li>
14.   <li>Oranges</li>
15. </ul>

JS:

1.  function firstLiClassRedInUl() {
2.    // first li of class="red" in a ul
3.    var elm = document.querySelector("ul li.red");
4.    elm.style.color = 'red';
5.  }
6. 
7.  function allLisInUlOfClassNav() {
8.    // get all li directly in a ul of class nav
9.    var list = document.querySelectorAll("ul.nav > li");
10. 
11.   list.forEach(function(elm) {
12.     elm.style.textDecoration = "underline";
13.   })
14. }

Source code extracts:

Example #2: display all checked <input type="checkbox"> elements located inside an element of a given id.

CodePen: Show Checked items.

HTML:

1.  <button onclick="displayListOfCheckedItems();">
2.    Show Checked items
3.  </button>
4.  <br>
5.  <ul id="fruits">
6.    <li>
7.      <input type="checkbox" name="fruit" value="apples">
8.        Apples
9.    </li>
10    <li>
11.      <input type="checkbox" name="fruit" value="oranges">
12.       Oranges
13.   </li>
14.   <li>
15.     <input type="checkbox" name="fruit" value="bananas">
16.       Bananas
17.   </li>
18.   <li>
19.     <input type="checkbox" name="fruit" value="grapes">
20.       Grapes
21.   </li>
22. </ul>

JavaScript code: we select all elements of type input that have an attribute checked equal to true, and located inside an element whose id is "fruits". Notice the use of document.querySelectorAll, for selecting more than one element (line 6), then, we iterate on the list (line 8) and concatenate to the string variable listOfSelectedValues the value of each element (located in its value attribute). This is done in line 9.

Lines 9-12 use the parentNode property of the selected nodes in order to change the color of the <li> (parents of <input> elements selected) in red. In the DOM tree, we selected input elements that are each a child of a <li> element. The text displayed: "Apples", "Oranges" etc. belong to the <li> element. In order to access it from the <input> child we selected, we use elm.parentNode.

Finally, at the end of the document, line 14 adds a message followed by this list:

JavaScript code:

1.  function displayListOfCheckedItems() {
2.    // all inputs that have been checked
3.    var listOfSelectedValues="";
4.
5.    var list = document.querySelectorAll("#fruits input:checked");
6.    list.forEach(function(elm) {
7.      listOfSelectedValues += elm.value + " ";
8.
9.      // Put the li in red.
10.      // the li is the parent of the current input elem stored
11.      // in the elm variable
12.     elm.parentNode.style.color = 'green';
13.   });
14.   document.body.append("You selected: " + listOfSelectedValues);
15. }

We select all elements of type input that have an attribute checked equal to true, and located inside an element whose id is "fruits". Notice the use of document.querySelectorAll, for selecting more than one element (line 6), then, we iterate on the list (line 8) and concatenate to the string variable listOfSelectedValues the value of each element (located in its value attribute). This is done in line 9.

Lines 9-12 use the parentNode property of the selected nodes in order to change the color of the <li> (parents of <input> elements selected) in red. In the DOM tree, we selected input elements that are each a child of a <li> element. The text displayed: "Apples", "Oranges" etc. belong to the <li> element. In order to access it from the <input> child we selected, we use elm.parentNode.

Finally, at the end of the document, line 14 adds a message followed by this list:

Example #3: change the background of all paragraphs <p> in an element of a given id

CodePen: Change background of p under element id.

HTML code:

1.  <button onclick="changeBackGroundOfPs('firstDiv');">Change
      backgrounds of p under a given element known by id</button>
2.  <br>
3.  <div id="firstDiv">
4.    <p>First paragraph.</p>
5.    <p>Second paragraph.</p>
6.  </div>

JavaScript code: we build a CSS selector using the id passed as a parameter. In this example, the id is 'firstDiv', the id of the div at line 3 in the above code.

The variable CSS selector at line 2 in the JavaScript code below will have a value equal to "#firstDiv p", that means: select all <p> under an element whose id is "firstDiv". The paragraphs variable is a list that contains the paragraphs selected. Then we iterate on this list (this time using a for loop, which is an alternative method to using the forEach method used in previous examples) (lines 5-7), and we change the background of all selected paragraphs (line 6).

1.  function changeBackGroundOfPs(id) {
2.    var paragraphs = document.querySelectorAll("#" + id + " p");
3.
4.    // Another way to iterate on all elements in a collection
5.    for (var i = 0; i < paragraphs.length; i++ ) {
6.      paragraphs[i].style.backgroundColor = "lightGreen";
7.    }
8.  }

Other examples that use more complex selectors:

1.  // all elements li in ul elements in an element of id=nav
2.  var el = document.querySelector('#nav ul li');
3.
4.  // all li in a ul, but only even elements
5.  var els = document.querySelectorAll('ul li:nth-child(even)');
6.
7.
8.  // all td directly in tr in a form of class test
9.  var els = document.querySelectorAll('form.test > tr > td');
10. 
11. // all paragraphs of class warning or error
12. querySelectorAll("p.warning, p.error");
13. 
14. // first element of id=foo or id=bar
15. querySelector("#foo, #bar");
16.
17. // first p in a div
18. var div = document.getElementById("bar");
19. var p = div.querySelector("p");

Accessing HTML elements with the DOM API (old fashioned)

These methods are from the DOM API and can all be replaced by the querySelector and querySelectorAll methods that we've discussed. They are still used in many JavaScript applications, and are very simple to understand.

From the document we can access the elements composing our Web page in a few ways:

document.getElementById(identifier) returns the element which has the id "identifier".

This is equivalent to document.querySelector("#identifier'); (just add a # before the id when using a CSS selector).

Example: var elm = document.getElementById('myDiv'); is equivalent to document.querySelector('#myDiv');

document.getElementsByTagName(tagName) returns a list of elements which are named "tagName".

This is equivalent to document.querySelectorAll(tagName);

Example: var list = document.getElementByTagName('img'); is equivalent to document.querySelector('img');

document.getElementsByClassName(className) returns a list of elements which have the class "className".

This is equivalent to document.querySelectorAll('.className');

Example: var list = document.getElementByClassName('important'); is equivalent to document.querySelector('.important'); (just add a '.' before the class name when using a CSS selector).

Notice that identifier, tagName and className must be of type String.

2.5.4 Changing the style of selected HTML elements

The style attribute

How to modify an HTML element's CSS properties from JavaScript?

The most common way to modify the CSS style of one of several elements you selected using the DOM or Selector API, is to use the style attribute.

Typical use:

1.  // select the paragraph with id = "paragraph1"
2.  var p = document.querySelector('#paragraph1');
3.  // change its color
4.  p.style.color = 'red';

Warning: with the style attribute, you can modify (or read) any CSS property, but be careful: the syntax changes a little due to the fact that in JavaScript the "-" is a math operator, while in CSS it is used to separate properties made of multiple words, such as background-color.

When using such properties from JavaScript, the rule is simple:

Remove the "-" sign,
Capitalize the word after the "-" sign!

Simple, isn't it?

Examples:

text-align becomes style.textAlign
margin-left becomes style.marginLeft
etc.

The most useful CSS properties (we do recommend that you follow the W3Cx courses CSS basics, CSS and HTML5 fundamentals from W3Cx to learn more about CSS):

color: changing the color of the text content of selected element(s),
background-color: same but this time the background color,
margin and padding properties (external and internal margins), including their variants: margin-left, margin-top, margin-right, margin-bottom, also padding-left, etc.
border and border-radius: change the border, type (plain, dashed), color, thickness, rounded corners etc.
box-shadow to add shadows to selected elements,
font, font-style: font characters and style (italic, bold, plain)
text-align (centered, etc.)

Here are some examples:

CodePen: Update styles in document

Using the ClassList interface to change more than one CSS property simultaneously

External resources:

Until now, to manipulate CSS classes of an HTML element was a bit complex, both for verifying the presence of a class name in an element, and for adding or removing classes associated with a given element.

The ClassList interface simplifies it all by acting as a container object and by providing a set of methods to manipulate its content.

The classList property applies to an HTML element, and returns a collection of class names:

1. var elem= document.querySelector("#id1");
2. 
3. var allClasses = elem.classList;

The classList API

The list of methods usable on a classList object are add(), remove(), toggle() and contains().

1.  // By default, start without a class in the div: <div class=""/>
2. 
3.  // Set "foo" as the class by adding it to the classList
4.  div.classList.add('foo'); // now <div class="foo"/&

bbauska/W3Cx-5of5

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages