Contenuto principale

Unit: HTML/JS: Fare pagine Web interattive

Contenuti

Una volta che avrai fatto sia l'introduzione a JS e ad HTML/CSS, fai questo corso per imparare come usare HTML/CSS con le API Javascript DOM per realizzare le tue pagine web interattive.

Impara a rendere le tue pagine Web interattive

Are you ready to learn how to make your webpages interactive with HTML, JavaScript, and the DOM API? You'll find out with our review quizzes in this tutorial. Get pumped!

Benvenuto al tutorial su come rendere interattive le pagine web

Ripasso di HTML/CSS

HTML/CSS recap

Allenati

Ripasso di JavaScript

JavaScript recap

Allenati

JS e il DOM

Learn how to use JavaScript to control the "DOM" (Document Object Model) of a webpage.

Putting JS in a webpage

Challenge: A scripted script tag

The DOM (Document Object Model)

Understanding the DOM

Allenati

Fare il debug delle pagine web con la console del browser

Metodi di accesso al DOM

Learn how to use the DOM API from JavaScript to access elements in your webpages.

Finding elements by ID

Challenge: ID changer

Finding multiple DOM elements by tag or class name

Challenge: Custom name tags

Finding elements by CSS selector

Challenge: Query modernizer

Summary: DOM access methods

Modifiche al DOM

Learn how to use the DOM API from JavaScript to modify aspects of your webpage elements like their styles and attributes, plus create new elements from scratch.

Changing attributes

Challenge: Avatar attributes

Changing styles

Challenge: Style guide

Changing CSS classes

Challenge: Classification

Setting innerHTML and textContent

Challenge: The inside story

Creating elements from scratch

Challenge: Create a solar system

Summary: DOM modification techniques

Eventi DOM

Learn how to use the DOM API from JavaScript to make your webpage react to user events, like clicking, scrolling, and entering fields in forms.

Rendere le pagine web interattive con gli eventi

Adding an event listener

Challenge: Cat Clicker

DOM event types

Using the event properties

Challenge: Cat-stache

Processing forms with events

Challenge: Mad Libs

Preventing default behavior of events

Summary: DOM events

Animazioni DOM

Learn how to animate parts of your webpage, using three different techniques- window.setInterval, window.requestAnimationFrame, and CSS animations/transitions.

The window object

Animating DOM with setInterval

Challenge: Stopwatch

Animating styles with requestAnimationFrame

Challenge: Catwalk

Animating styles with CSS animations

What DOM animation technique should you use?