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:

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;

});