5-html and javascript
TRANSCRIPT
-
7/31/2019 5-HTML and JavaScript
1/14
HTML and JavaScript
John Ryan B. Lorca
Instructor I
1
-
7/31/2019 5-HTML and JavaScript
2/14
HTML and JavaScript
Web pages must be interactive to be attractive
to Internet surfers
JavaScript and HTML are good partners in
providing client-side functions that, in more
advanced applications, are deemed necessary
be for server-side executions
2
-
7/31/2019 5-HTML and JavaScript
3/14
Events in JavaScript
Events are moments of interaction between
the user and the computer, or internal
Windows activity
Keypress
Mouse-click
Note: We need to catch events to perform
tasks or functions
3
-
7/31/2019 5-HTML and JavaScript
4/14
Functions in JavScript
may be pre-defined or user-defined
a separate collection of instructions for the
computer to follow that is called after an
event is triggered or when the user called it on
purpose
located within the tag in the
4
-
7/31/2019 5-HTML and JavaScript
5/14
Functions in JavaScript: Pre-defined
Void Function (doesnt return a value)function ([argument]) {
;
}
Functions that return a valuefunction ([argument]) {
;
return ;}
Note: Arguments are optional (as required)
5
-
7/31/2019 5-HTML and JavaScript
6/14
Void Functions
function getSum(x, y) {
var sum = 0;sum = x + y;
alert(SUM: + sum);
}
6
-
7/31/2019 5-HTML and JavaScript
7/14
Functions that Return a Value
function getSum(x, y) {
var sum = 0;sum = x + y;
return sum;
}
7
-
7/31/2019 5-HTML and JavaScript
8/14
HTML and JavaScript: Sample Problem
Develop a web application that accepts two
integers and computes the sum
8
-
7/31/2019 5-HTML and JavaScript
9/14
-
7/31/2019 5-HTML and JavaScript
10/14
Solution #1: Addition (ctd)
+
10
-
7/31/2019 5-HTML and JavaScript
11/14
Solution #2: Addition
Addition
function getSum(x, y) {var sum = x + y;
alert(SUM: + sum);
}
11
-
7/31/2019 5-HTML and JavaScript
12/14
Solution #2: Addition (ctd)
+
12
-
7/31/2019 5-HTML and JavaScript
13/14
Solution #3: Addition
Addition
function getSum(x, y, area) {var sum = x + y;
area.innerHTML = SUM: + sum;
}
13
-
7/31/2019 5-HTML and JavaScript
14/14
Solution #3: Addition (ctd)
+
14