Web Programming using PHP

Unit II JavaScript – Arrays

JS
JavaScript array is an object that represents a collection of similar type of elements. Individual elements can be
accessed by referring to its index number. There are 3 ways to construct array in JavaScript
By array literal By creating instance By using an Array
of Array directly constructor (using
var arrayname=[value1,value2.....valueN];
(using new keyword) new keyword)
values are contained inside [ ] and
var arrayname = new Array(); creating instance of array by
separated by , (comma).
passing arguments in
new keyword is used to create constructor so no need to
instance of array. provide value explictly

The .length property returns

the length of an array.

NSS College Rajakumari, Dept. of Computer Applications 1

Web Programming using PHP
Unit II
JS Events
HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript
can "react" on these events. Means, JavaScript's interaction with HTML is handled through events that occur
when the user or the browser manipulates a page.
HTML Events
An HTML event can be something the browser does, or something a user does.
Some examples of HTML events are :
•An HTML web page has finished loading
•An HTML input field was changed
•An HTML button was clicked

<element event="some JavaScript">

Example

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

In the above example, an onclick attribute (with code), is added to a <button> element:

NSS College Rajakumari, Dept. of Computer Applications 2

Web Programming using PHP
Unit II
JS INPUT EVENTS
onblur The onblur event occurs when an object loses focus. The onblur event is most often used with form validation
code The onblur event is the opposite of the onfocus event.
onchange The onchange attribute fires the moment when the value of the element is changed. Similar to the oninput event.
Difference is oninput event occurs immediately after the value of an element has changed, while onchange
occurs when the element loses focus.
onfocus The onfocus event occurs when an element gets focus. The onfocus event is most often used with <input>,
<select>, and <a>. The onfocus event is the opposite of the onblur event.
onselect The onselect event occurs after some text has been selected in an element. The onselect event is mostly used on
<input type="text"> or <textarea> elements.
onsubmit The onsubmit event occurs when a form is submitted. Form validation can be placed against this event type.
onreset The onreset event occurs when a form is reset. Only <form> tag is supported in this event.
onkeydown This event occurs when a user is pressing a key(on a keyboard).
onkeypress This event occurs when a user presses a key.
onkeyup The onkeyup event occurs when the user releases a key
The order of key events is 1. onkeydown, 2. onkeypress, 3. onkeyup
Note: The onkeypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC) in all browsers. To detect only
whether the user has pressed a key, use the onkeydown event instead, because it works for all keys.
NSS College Rajakumari, Dept. of Computer Applications 3
Web Programming using PHP
Unit II MOUSE EVENTS
JS
onmousemove The onmousemove event occurs when the pointer is moving while it is over an element.
onmouseover The onmouseover event occurs when the mouse pointer is moved onto an element, or onto one of its children.
onmouseout The onmouseout event occurs when the mouse pointer is moved out of an element, or out of one of its
children.
onmousedown The onmousedown event occurs when a mouse button is pressed down on the element.
onmouseup The onmouseup event occurs when a user releases a mouse button over an element.
onclick The onclick event occurs when the user clicks on an element.
ondblclick The ondblclick event occurs when the user double-clicks on an element.
The order of events related with mouse is 1. onmousedown, 2. onmouseup, 3. onclick
LOAD EVENTS
onload The onload event occurs when an object has been loaded. onload is most often used within the <body> element
to execute a script once a web page has completely loaded all content (incldg images, script files, CSS files, etc.).
onerror The onerror event is triggered if an error occurs while loading an external file (e.g. a document or an image).
onunload The onunload event occurs once a page has unloaded (or the browser window has been closed). onunload
occurs when the user navigates away from the page (by clicking on a link, submitting a form, closing the browser
window, etc.). This event is also triggered when a user reloads the page.
onresize The onresize event occurs when the browser window has been resized.
NSS College Rajakumari, Dept. of Computer Applications 4
Web Programming using PHP
Unit II How Events are used in ?
JS JavaScript, using the
HTML JavaScript addEventListener() method
<element event ="myScript"> object.event = function(){myScript}; object.addEventListener(“event", myScript);
EXAMPLES
onblur onchange onfocus

NSS College Rajakumari, Dept. of Computer Applications 5

Web Programming using PHP
Unit II EXAMPLES
JS
onselect onsubmit onreset

NSS College Rajakumari, Dept. of Computer Applications 6

Web Programming using PHP
Unit II EXAMPLES onmousemove
JS
onkeydown/onkeyup onmouseover/onmouseout

NSS College Rajakumari, Dept. of Computer Applications 7

Web Programming using PHP
Unit II EXAMPLES
JS
onclick onload onerror

The <iframe> inline frame tag defines

match() method is a rectangular region within the
used to retrieve the document in which the browser can
matches when display a separate document, including
matching a string scrollbars and borders. An inline frame
against a regular is used to embed another document
expression. within the current HTML document.
NSS College Rajakumari, Dept. of Computer Applications 8
Web Programming using PHP

References
1. https://www.tutorialspoint.com
2. https://www.geeksforgeeks.org
3. https://www.w3schools.com
4. https://www.javapoint.com
5. https://developer.mozilla.org
6. https://techterms.com
7. https://www.tutorialsteacher.com
8. https://www.c-sharpcorner.com
9. http://www.javascriptkit.com/javatutors/oopjs2.shtml
10.Background vector created by grmarc - www.freepik.com
https://www.freepik.com/free-photos-
vectors/background

NSS College Rajakumari, Dept. of Computer Applications 9