← Learn Javascript

Web forms and the DOM

Use form data via the Document Object Model (DOM)

slides | md

Introduction

About the DOM

• When the browser parses a web page it creates a document object containing references to all the page elements
• This makes it easy to select element and access their HTML and CSS code.

The window object

👉 View these properties and functions in the console (or access them with javascript using dot syntax).

1. Type window and press return
2. Expand a property {} or function f to see more.
3. Functions can be called in the console: alert(123) or window.alert(123) and press return.

window.document

// get web page url property
window.document.URL
// set a new location for this window 
document.location = "https://davidson.edu"
// get property
window.document.body.style.background
// set (same) property
document.body.style.background = "red"

Selecting HTML elements

Some properties can be accessed directly using "direct selection"

// replace the content of the body
document.body.innerHTML = "😃"
// get a form value
document.myForm.myInput.value

Selecting HTML elements

<p id="greeting">Hello world</p>

// use #id to store reference to element
let ele = document.querySelector("#greeting");
// get the text
console.log(ele.textContent);
// or set the text
ele.textContent = "Hello world!";

Selecting HTML elements

<p>Red</p>
<p>Green</p>
<p>Blue</p>

// return an array of all <a> elements on the page: 
let ele = document.querySelectorAll("#greeting");
// -> then use a loop to address them

Listening for Events

• Create a web form using a <form> containing one or more <input> elements.
• Use preventDefault to prevent the form from loading a new page (it's default behavior).

<form action="#" class="myForm">
  <input type="text" id="color">
  <button id="submit">Submit</button>
</form>

// get reference
let ele = document.querySelector(".myForm");
// listens for when the form was submitted (any button inside)
ele.addEventListener("submit", function(e) {
	e.preventDefault();
	console.log(colorVal);
})

Forms and Events

• Add a submit listener to process each input in a web form.
• Use preventDefault to prevent the form from loading a new page.

<form action="#">
  <input type="text" id="color">
  <input type="submit">
</form>

document.addEventListener("submit", function(e) {
	e.preventDefault();
	let colorVal = document.getElementById("color").value;
	console.log(colorVal);
	document.body.bgColor = colorVal;
})

Next steps

1. Try the Exercises below.
2. Start working on homework listed in the schedule.
3. Continue to the next lesson.

Exercises

👉 Try it out

1. The Lottery v.2 - responding to events, The Lottery v.3 - displaying content in the browser
   • Already finished? Add a way to spend more money in the lottery game
2. Exercises from Eloquent Javascript
   • Exercises: Ch14 Build a table, Elements by tag name, The cat’s hat
   • Ch15 Balloon, Mouse trail, Tabs
   • Ch18 Content negotiation, A JavaScript workbench, Conway’s Game of Life

References

• Haverbeke Ch2 Program Structure (22-26)
• Codecademy Cheatsheet(s) Conditionals
• Codecademy Cheatsheet(s) jquery introduction, effects, jquery events, style methods, dom traversing
• w3schools DOM, HTML DOM, jQuery intro, Get Started, syntax, selectors, event methods
• w3schools Javascript practice

jQuery and The DOM

jQuery is a Javascript library you will see often in code references. It provides easy access to properties and methods in the HTML DOM, but it is better to learn "pure JS" (a.k.a. "vanilla").

NOTE: youmightnotneedjquery.com

// select all divs, set backgrounds red
$('div').css({ 'background': 'red' });
// select all elements with myClass, add text to end
$('.myClass').append(' - here is some new text');

Forms and Events with jQuery

Overview: Events and using forms with Javascript and jQuery

NOTE: youmightnotneedjquery.com

// click event with callback
$('#submitButton').click(function() {
	// set the value of a form element
	$('#color').val("purple");
	// do not perform the default form action
	return false;
});