O'Reilly logo
live online training icon Live Online training

Introduction to JavaScript Programming

Learn to program in the browser with JavaScript

Elisabeth Robson

If you’ve been itching to learn JavaScript, this course will get you started. JavaScript is one of the most popular languages in use today, in the browser as well as server side with Node.js, and is even expanding to the Internet of Things. Whether you’re totally new to JavaScript or you’ve been dabbling with simple scripts as you explore Web, Node.JS, or IoT development, with this course you’ll get a solid foundation in the language that you can take into all of these domains.

Join Elisabeth Robson, co-author of Head First JavaScript Programming, in a two-day course on the fundamentals of programming with JavaScript. You’ll learn everything you need to get started with the JavaScript programming language. You’ll come away with an understanding of core JavaScript syntax and semantics you can build on.

What you'll learn-and how you can apply it

By the end of this live, online course, you’ll understand:

  • How JavaScript works in the browser
  • How to use core JavaScript language features, including variables, expressions, iteration, conditionals, functions, arrays, and objects
  • How JavaScript interacts with HTML and CSS in a web page
  • How to use the JavaScript console to run and debug code

And you’ll be able to:

  • Write JavaScript programs
  • Run JavaScript programs in the browser
  • Debug your JavaScript programs using the browser console
  • Use JavaScript to interact with your web page
  • Build on what you learn to develop for Web, Node.js, or JavaScript enabled devices

This training course is for you because...

  • You want to learn JavaScript
  • You’re an aspiring web designer who wants to take your skills to the next level
  • You want to learn JavaScript to program the browser, Node.js, or JavaScript-enabled devices

Prerequisites

  • Basic understanding of HTML, CSS and how to use a browser
  • Experience with at least one other programming language so that basic programming concepts will not be new to you
  • At least one browser installed, including Chrome. Make sure and update your browser version to the most recent before class
  • Access to a plain text editor. Make sure you know how to use plain text mode in the editor of your choice, or use an editor in HTML / CSS mode (or JavaScript mode if you have one). Students may use Notepad or TextEdit in plain text mode if desired (no special IDE is required).

About your instructor

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

The timeframes are only estimates and may vary according to how the class is progressing.
Each segment will include plenty of in-class exercises using the browser development console.

DAY 1

Segment 1: Introduction and set up (~20 mins)
- Introduction and set up

Segment 2: Diving in (~20 mins)

  • Discuss pre-class exercises.
  • Add JavaScript to your pages, where and why.
  • Learn how to use the console.

Segment 3: Variables, expressions, and statements (~15-20 mins)

  • Variables, primitive values, expressions, and statements.
  • Strings and numbers, basics of types and type conversion
  • Booleans and conditional expressions.

Segment 4: Conditionals (~15-20 mins)

  • If statement
  • Logical operators

Segment 5: Iteration and types (~30 minutes)

  • While and for loop iteration
  • Basic interaction with prompt
  • More on types
  • Truthy and falsey values

Segment 6: Debugging (~15 minutes)

  • Syntax debugging
  • Debugging with the console, how to use breakpoints

Segment 7: Arrays and the for loop (~25 minutes)

  • Arrays and array syntax.
  • Iterating on arrays with the for loop.
  • Adding items to an array with push()

Segment 8 (~10 minutes)

  • Q&A about JavaScript
  • Homework discussion: describe homework and plan out the program.

DAY 2

Segment 1: Functions (~30 mins)

  • Example of built-in functions (console.log, alert, prompt, etc.) we’ve been using in class.
  • How to write a JavaScript function.
  • Arguments and parameters.
  • Pass-by-value.
  • Returning values from a function.

Segment 2: Scope (~20 mins)

  • What is scope?
  • Global scope and function scope.
  • Why “var” is so important.
  • Scope of parameters.
  • Let, const, and and the new block scope; compare var and let.

Segment 3: Organizing code (~20 mins)

  • How to link to external JavaScript files.
  • Scope with JavaScript files.
  • Where should we put variables and functions?
  • Hoisting - what is it, and how does it affect your code

Segment 4: Objects (~30 mins)

  • What is an object??
  • Syntax of defining and accessing an object.
  • Using objects in your code.

Segment 5: Methods (~20 mins)

  • Adding behavior to an object.
  • Syntax of adding a function (method) to an object.
  • Calling an object method.
  • How “this” works

Segment 6: The DOM (~20 mins)

  • The document object: what is it and how we use it to interact with the page.
  • The getElementById() method and innerHTML property.
  • Quick overview of other useful document properties and methods.

Segment 7: JavaScript and where to go next (~10 mins)

  • Brief history of JavaScript
  • Brief summary of where to go next.

Learning Activities

Assignments prior to the live scheduled meetings online:

Readings:

For Day 1:
Head First JavaScript Programming: Chapters 1, 2, pp125-130?

For Day 2:
?Head First JavaScript Programming: Chapter 3, pp173-191, pp229-253?

Assignment 1: Take a look at these pages:

http://google.com

http://amazon.com

http://www.histography.io/

We’ll be using these as examples of how JavaScript is used in web pages. See if you can tell how the page might be using JavaScript.

Assignment 2: Make sure you know how to:

Convert fahrenheit to celsius and back
Compute the area of a circle from its radius

Assignment 3: Download all examples; look at index.html, review HTML and CSS basics if you need to.

Assignment 4: Download either or both of Firefox and Chrome if you don’t already have them installed. Make sure you have the most recent versions of these browsers. Take a look at the PDF on how to open the Developer Console in these browsers and make sure you can do it.