Please enable JavaScript to use CodeHS

Web Design and Development

View Syllabus Overview
Introduction to JavaScript in HTML
Description

In this lesson, students learn how to incorporate JavaScript into their HTML pages using the script tag.

Objective

Students will be able to:

  • Incorporate JavaScript into their HTML pages
  • Use the console to debug scripts
Description

In this lesson, students learn how to modify HTML tags on a webpage using the DOM. The DOM, or Document Object Model, translates HTML files into accessible objects that can be manipulated or added to a webpage.

Objective

Students will be able to:

  • Modify existing elements on a web page using document.getElementById
  • Modify existing elements on a web page using document.getElemenyByTagName
  • Explain the purpose of the DOM, and how it is used to manipulate HTML files
Description

In this lesson, students will learn how to create elements using the Document Object Model.

Objective

Students will be able to:

  • Create elements using document.createElement
  • Add created elements to an existing webpage
Description

In this lesson, students learn how to style elements in HTML using JavaScript and the Document Object Model.

Objective

Students will be able to:

  • Utilize setAttribute appropriately to style elements in JavaScript
  • Distinguish between .attribute and setAttribute notation and determine the advantages and disadvantages of both
Description

In this lesson, students learn how to use functions to make their webpages more dynamic.

Objective

Students will be able to:

  • Articulate the difference between dynamic and static websites
  • Create buttons with onclick events
  • Use functions to create working, dynamic buttons
Description

In this lesson, students learn how to use the keyword this to pass elements as parameters in their click events.

Objective

Students will be able to:

  • Appropriately use the keyword this
  • Explain the difference between how this is used with onclick and with eventListeners
Description

In this lesson, students will implement the skills they’ve learned from the previous lessons to create a working, clickable keyboard.

Objective

Students will be able to:

  • Create a working, clickable keyboard using only JavaScript
Description

In this lesson, students learn about another event listener - keyboard interactions. Students learn how to listen for a keyboard press, and how to access information about each keyboard stroke.

Objective

Students will be able to:

  • Use keydown and keyup events to read keyboard information
  • Distinguish between key.code and key.key, and when it’s appropriate to use each
Description

In this lesson, students learn how to animate web page elements using timers.

Objective

Students will be able to:

  • Describe what animation is, and how it works
  • Use timers to successfully animate web page elements and terminate animations
Description

In this lesson, students learn how to use the position style in CSS to improve animations.

Objective

Students will be able to:

  • Explain the difference between all the position attributes
  • Use position to animate elements
Description

In this lesson, students test their knowledge of concepts from this module with a unit quiz.

Objective

Students will be able to:

  • Prove their knowledge of JavaScript in HTML through a multiple choice quiz