JavaScript Events
Course Code: CSC 3222 Course Title: Web Technologies
Dept. of Computer Science
Faculty of Science and Technology
Lecture No: 11 Week No: 10 Semester: Summer 19-20
Lecturer: Rashidul Hasan Nabil <
[email protected]>
Lecture Outline
1. JS Events
2. JS Functions
JS Events
• HTML events are things those happen to HTML elements.
• Here are some examples of HTML events:
• An HTML web page has finished loading
• An HTML input field was changed
• An HTML button was clicked
• HTML allows event handler attributes, with JavaScript code, to be added to HTML
elements.
• <element event='some JavaScript'> or <element event="some
JavaScript">
• <p id="demo"></p>
<button onclick="document.getElementById('demo').innerHTML = 'Clicked';
">
Click Me
</button>
• In the above code onclick attribute handler event. The value of onclick is
JavaScript code which will execute on button click.
• Writing JS codes as attributes is difficult we will call functions instead.
JS Common Events
Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element
onmouseout The user moves the mouse away from an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page
onkeyup When user releases a keyboard key
Must Read: https://www.w3schools.com/jsref/dom_obj_event.asp
JS Functions
• A JavaScript function is a block of code designed to perform a particular task.
• Functions are called when something invoke them.
• A JavaScript function is defined with the function keyword, followed by a name,
followed by parentheses ().
• Function names can contain letters, digits, underscores, and dollar signs (same
rules as variables).
• The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)
• Inside the function, the arguments (the parameters) behave as local variables.
JS Functions Invocations
• When an event occurs (when a user clicks a button)
• When it is invoked (called) from JavaScript code
• Automatically (self invoked)
• Writing JS codes in html element like
<button onclick="document.getElementById('demo').innerHTML =
'Clicked'; ">
Click Me
</button>
is difficult. That’s why its better to write functions and call them in event.
• Analyze
<html> the below code. Function definition
<head>
<script>
function demoFunction(){
document.getElementById('demo').innerHTML =
'Clicked';
}
</script>
</head> Function Invocation
<body>
<p id="demo"></p>
<button onclick="demoFunction()"> Click Me</button>
</body>
</html>
JS Functions
• Like other language functions JS has to return type.
• To return value from a function use return keyword and it will return value.
<html>
<head>
<script>
var x = myFunction(4, 3);//x will hold the returned value
12
function myFunction(a, b) {
return a * b;
}
</script>
</head>
<body>
</body>
</html>
• The () Operator Invokes the Function. Without () will return the function object
instead of result.
• Functions also be used as the same way as variables in all type of formulas,
assignments and calculations.
<script>
var x = 10 + myFunction(4, 3) + 12;//x will hold the expression result
34
function myFunction(a, b) {
return a * b;
}
Books
1. W3Schools Online Web Tutorials; URL: http://www.w3schools.com
2. PHP Documentation; URL: http://www.php.net/docs.php
3. Sams Teach Yourself Ajax JavaScript and PHP All in One; Phil Ballard and Michael Moncur;
Sams Publishing; 2010
4. JavaScript Phrasebook; Christian Wenz; Sams Publishing; 2007
5. PHP and MySQL Web Development, 4/E; Luke Welling and Laura Thomson; AddisonWesley
Professional; 2009
6. JavaScript for Programmers Paul J. Deitel and Harvey M. Deitel; Prentice Hall; 2009
7. Beginning PHP5, Apache, and MySQL Web Development; Elizabeth Naramore, Jason
Gerner, Yann Le Scouarnec, Jeremy Stolz and Michael K. Glass; Wiley Publishing; 2005
8. XML in a Nutshell, 3/E; Elliotte Rusty Harold and W. Scott Means; O'Reilly Media; 2004
References
1. https://www.w3schools.com/js/
2. https://www.springboard.com/blog/history-of-javascript/
