D. Potikanond potikanond

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 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

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

	<html>

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

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

	// 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(); }

	<!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>

	<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
	integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

	$(document).ready(function(){
	$("#myBtn").click(function(){
	$("#myModal").modal();
	});

	$(".form-control").change(validateCell);

	$("#btn-save").click(saveScores);

	$("#copy-score").click(copyScores);

	// 4 - Array of member objects
	const members = [
	{
	id: 1,
	name: 'John Doe',
	email: '[email protected]',
	status: 'active'
	},
	{
	id: 2,