JavaScript 101

Class 4

Events

An 'event' is a type of object that is created when the user interacts with a web page.

For example, JS creates an event when a user clicks an element.

element.onclick = function () {
	//code to execute when the click happens
};

Types of Events

There are variety of events. Some of the most common:

  • onclick: The event occurs when the user clicks on an element
  • onmouseover: The event occurs when the pointer is moved onto an element
  • onkeyup: The event occurs when the user releases a key
  • onload: The event occurs when a document has been loaded
  • onfocus: The event occurs when an element gets focus

Events and Code

How do you make an event trigger some code?

  1. Break your code into functions
  2. Associate a function with a JavaScript event

Calling Functions from HTML

You can call a function directly from your HTML code:

<button id="clickMe" onclick="sayHi()">Click Me!</button>
function sayHi() {
	alert ('Hi!');
}

Listening Functions

Listening functions work like many of the other things we have done. First, find the object:

var myTarget = document.getElementById('clickMe');

Then add an event to that object:

myTarget.onclick=function(){
	alert ('Hi!');
}

Let's Develop It!

Download this sample code.

Make some JavaScript code fire after an onmouseover event. Try adding the event to the HTML and adding a listening function.

Preventing Defaults

Elements like buttons and links have a default behaviors. However, the event object has a built-in method to handle that:

element.onclick = function (event) {
	event.preventDefault();
};

This

The keyword this references the element that the user has just interacted with

element.onmouseover = function (event) {
	console.log(this);
};

element.onclick = function (event) {
	this.style.backgroundColor = 'red';
	this.innerHTML = 'I've been clicked!';
};

Let's Develop It

Write code that targets this link:

<a href="http://girldevelopit.com/" id="gdiLink">Girl Develop It</a>

When a user clicks the link, the page should display an error message instead of going to the Girl Develop It homepage.

Forms

You can collect information from users to use in functions. The most common method is an HTML form

<form id="temperatureForm">
	<label for="temp">Temperature:</label> <input type="text" id="temp" size="3"/> degrees in
	<input type="radio" name="tempFormat" value="F" checked />Fahrenheit
	<input type="radio" name="tempFormat" value="C" />Celsius <br />
	<label for="submitButton"></label> <input id="tempSubmitButton" type="submit" value="Submit" />
</form>

Retrieving Form Data

You retrieve the values of form elements using the value method.

var temperature = document.getElementById('temp').value;
console.log (temperature);

You can retrieve the value of a form at any time. Try onblur (when a form element loses focus).

Radio Buttons

Radio buttons usually do not have IDs, so you will need to use an array:

var radios = document.getElementsByName('tempFormat');

for (var i = 0; i < radios.length; i++) {
	if (radios[i].checked) {
		var radioButtonValue = radios[i].value;
		// only one radio can be checked, so stop now
		break;
	}
}

Submit buttons

If you are going to retrieve form values with the submit button, be sure to prevent the default action!

var submitButton = document.getElementById('tempSubmitButton');
submitButton.onclick = function (event) {
	event.preventDefault();
	var temperature = document.getElementById('temp').value;
	console.log (temperature);
}

Let's Develop It!

Collect a value from the input box on the page. Use it inside a function of some kind. For example, collect a number and multiply it by five or collect a name and display a greeting.

Timing Events

In JavaScript, is possible to execute some code at specified time intervals.

  • setInterval() executes a function over and over again, at specified time intervals
  • setTimeout() executes a function, once, after waiting a specified number of milliseconds

setInterval

The syntax for setInterval() is:

setInterval(function, milliseconds);

For example, this is a simple clock:

var simpleClock=setInterval(myClock, 1000);
function myClock() {
	var d = new Date();
	var t = d.toLocaleTimeString();
	document.getElementById('resultsBox').innerHTML = t;
}

clearInterval

You can use clearInterval() to stop a setInterval loop

clearInterval(intervalVariable)

To stop our clock:

function myStopFunction() {
	clearInterval(simpleClock);
}

setTimeout

The method setTimeout() is similar, but it will only run once.

setTimeout(function, milliseconds);

For example, this code will wait 3 seconds, then create a popup box, unless the user triggers the clearTimeout()

var helloBox;
function sayHello() {
	helloBox=setTimeout(function(){alert('Hello')},3000);
}
function dontSayIt() {
	clearTimeout(helloBox);
}

Animations

By changing values slowly over time, we can create simple animations

var targetPic = document.getElementById('turtlePic');

targetPic.onclick = function () {
	var leftMarginValue = 0;
	function increaseMargin() {
		leftMarginValue++  // update parameter each time
		targetPic.style.marginLeft = leftMarginValue + 'px' //set left margin
		if (leftMarginValue === 200)  // check finish condition {
			clearInterval(movePic);
		}
	var movePic = setInterval(function(){increaseMargin()}, 10) // update every 10ms
}

Let's Develop It

Using the function from the previous slide as a base, try changing some animation parameters. What happens?

Questions?

Homework

Pick your favorite safari animal and create an object. Assign at least two properties and two methods to your animal object. Make at least one method something that involves moving - walking, running, swimming, etc. Then, build a web page that:

  • Includes a photo of the safari animal
  • Has buttons to click to display the properties on the page
  • Has button to click to run the methods of the animal
  • Make the movement method you created animate the image of the safari animal

View an example here

Survey

Please take a moment before you leave class today to answer a couple quick questions about class.

https://goo.gl/JPyKB0

We strive to make every GDI class better than the last and your ideas help us do that.

Resources