D. Potikanond potikanond

JavaScript DOM Tutorial #2

A tutorial for advanced JavaScript DOM manipulation. We will use the Drum project to learn this section. Start by linking up the HTML with the CSS and JavaScript file.

Adding Event Listeners

In order to detect events on the page, we need to add event listener(s). We can create a function that will be called when a button is clicked.

// add a click event listener to the 1st button

JavaScript DOM Tutorial #1

A tutorial from JavaScript DOM manipulation

Adding JavaScript to Website

Inline JavaScript

Add onload="..." action to the body element. The JS code inside will be executed when the page is loaded.

JavaScript Crash Course

Use Console tab for single line instruction. Executing single instruction at a time.

// Warning
alert('Hello');

// Confirm?
let val = confirm("Do you want to continue ?");

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="style.css">
	<title>JS Crash Course</title>
	</head>

	// OOP <ES5-2016> - constructive function
	function Person(firstName, lastName, dob) {
	// properties
	this.fname = firstName;
	this.lname = lastName;
	// this.dob = dob;
	this.dob = (dob === undefined)? new Date(): new Date(dob);

	// methods - listed as properties in the object (NOT in prototype)
	/* this.getBirthYear = function () { return this.dob.getFullYear(); }

	<html>

	<head>
	<title>Form Validation</title>
	</head>

	<body>
	<form action="" name="myForm" onsubmit="return(validate());">
	<table cellspacing="2" cellpadding="2" border="1">

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Number guessing game</title>
	<style>
	html {
	font-family: sans-serif;
	}
	body {

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>My test page</title>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

	</head>
	<body>
	<h1>Mozilla is Cool!</h1>