JavaScript Events

HTML events are “things” that happen to HTML elements.

When JavaScript is used in HTML pages, JavaScript can “react” on these events.

Focus Events:

  • focus: The focus event is fired when an element has received focus.
  • blur: The blur event is fired when an element has lost focus.

Example:

HTML Code:

<form id='form'>

<input type="text" placeholder="text input">
<input type="password" placeholder="password">

</form>

Javascript Code:

var form = document.getElementById('form');
if (form) {

form.addEventListener('focus', function (event) {
event.target.style.background = 'yellow';
}, true);

form.addEventListener('blur', function (event) {
event.target.style.background = 'none';
}, true)

}

Try it yourself:

Form Events:

  • reset: Event fires when the reset button is pressed
  • submit: Event fires when the submit button is pressed

Example:

HTML Code:

<form id='form'>

<input type="text" placeholder="username">
<input type="password" placeholder="password">
<input type="reset" placeholder="Reset form">
<input type="submit" placeholder="Submit form">

</form>

Javascript Code:

var form = document.getElementById('form');

if (form) {

form.addEventListener('reset', function (event) {
alert('The form was reset')}, true);

form.addEventListener('submit', function (event) {
alert('The form was submitted')
}, true)

}

Try it yourself:

Keyboard Events:

  • keydown: Any key is pressed
  • keypress: ANY key except Shift, Fn, CapsLock is in pressed position. (Fired continously.)
  • keyup: Any key is released

HTML Code:

<form id='form'>

<input type="text" placeholder="text input">
<input type="password" placeholder="password">

</form>

Javascript Code:

var form = document.getElementById('form');
if (form) {

form.addEventListener('keydown', function (event) {
event.target.style.background = 'yellow';
}, true);

form.addEventListener('keyup', function (event) {
event.target.style.background = 'none';
}, true)

form.addEventListener('keypress', function (event) {
event.target.style.background = 'pink';
}, true)

}

Try it yourself:

Javascript Built-In Object – Array

1. Create an Array:

You can create an array using either

  • an array initializer (array literal)

var myArray1 = [1,3,5,7,9];// an array with 5 elements

  • the Array constructor.

var myArray1 = new Array(1,3,5,7,9); // an array with 5 elements

2. Array Properties:

  • Array.length
  • Array.prototype

3. Methods:

  • Array.forEach()

//Loop over an Array

Example:

myArray1.forEach(function(item, index, array) {

console.log(item, index);

});

  • Array.includes()

//Determines whether an array includes a certain element

Example:

var array1 = [1, 2, 3];

array1.includes(2);

  • Array.isArray()

//Determines whether the passed value is an Array.

Example:

Array.isArray([1, 2, 3]);

  • Array.concat()

// Merge two or more arrays.

Example:

var array1 = [‘a’, ‘b’, ‘c’];
var array2 = [‘d’, ‘e’, ‘f’];

array1.concat(array2)

  • Array.find()

 // Returns the value of the first element in the array that satisfies the provided testing function.

var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {

return element > 10;

});