Scribd
Upload
61 views

HTML and Javascript: John Ryan B. Lorca Instructor I

This document discusses using HTML and JavaScript together to create interactive web pages. It covers events in JavaScript that trigger functions, and how to define both void and returning functions within <script> tags. It provides examples of functions that add two numbers, including ones that alert the sum and ones that return the sum to an HTML element.

Uploaded by

Eric Nilo
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
61 views

HTML and Javascript: John Ryan B. Lorca Instructor I

This document discusses using HTML and JavaScript together to create interactive web pages. It covers events in JavaScript that trigger functions, and how to define both void and returning functions within <script> tags. It provides examples of functions that add two numbers, including ones that alert the sum and ones that return the sum to an HTML element.

Uploaded by

Eric Nilo
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

HTML and JavaScript

John Ryan B. Lorca Instructor I

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

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

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 <script> tag in the <head>

Functions in JavaScript: Pre-defined


Void Function (doesnt return a value)
function ([argument]) { <statements>; }

Functions that return a value


function ([argument]) { <statements>; return <value>; }

Note: Arguments are optional (as required)


5

Void Functions
<script type=text/javascript> function getSum(x, y) { var sum = 0; sum = x + y; alert(SUM: + sum); } </script>
6

Functions that Return a Value


<script type=text/javascript> function getSum(x, y) { var sum = 0; sum = x + y; return sum; } </script>
7

HTML and JavaScript: Sample Problem


Develop a web application that accepts two integers and computes the sum

Solution #1: Addition


<html> <head><title>Addition</title> <script type=text/javascript> function getSum() { var x = document.getElementById(txtNUM1).value; var y = document.getElementById(txtNUM2).value; var sum = x + y; alert(SUM: + sum); } </script> </head>

Solution #1: Addition (ctd)


<body> <input type=text id=txtNUM1 /> + <input type=text id=txtNUM2 /> <input type=button value=ADD onclick=getSum() /> </body> </html>

10

Solution #2: Addition


<html> <head><title>Addition</title> <script type=text/javascript> function getSum(x, y) { var sum = x + y; alert(SUM: + sum); } </script> </head>
11

Solution #2: Addition (ctd)


<body> <input type=text id=txtNUM1 /> + <input type=text id=txtNUM2 /> <input type=button value=ADD onclick=getSum(document.getElementById(txtNUM1).value , document.getElementById(txtNUM1).value) /> </body> </html>

12

Solution #3: Addition


<html> <head><title>Addition</title> <script type=text/javascript> function getSum(x, y, area) { var sum = x + y; area.innerHTML = SUM: + sum; } </script> </head>
13

Solution #3: Addition (ctd)


<body> <input type=text id=txtNUM1 /> + <input type=text id=txtNUM2 /> <input type=button value=ADD onclick=getSum(document.getElementById(txtNUM1).value , document.getElementById(txtNUM1).value, document.getElementById(outputArea)) /> <span id=outputArea>&nbsp;</span> </body> </html>

14

You might also like