5.2 Javascripting Ver.2

Java Scripting
By: Eduardo S. Rodrigo

Intended Learning Outcomes (ILO)
LESSON OVERVIEW
In this lesson, we will study how to program using Javascript. We will cover how to
use variables, data types, and conditions in Javascript. We will create a simple
transaction and dynamic webpage that has Javascript.
Copyright © 2020 by Technological Institute of the Philippines. All rights reserved.

INTENDED LEARNING OUTCOMES
At the end of the lesson, the students are expected to :

1) describe what JavaScript is;
2) use JavaScript to design both static and dynamic webpage with

mathematical operation; and
3) create a simple webpage with a transactions.

TEACHING AND LEARNING ACTIVITIES
• Ice breaker
• Discussion
• Programming Demo
• Assessment Task

What is a Java Script?
• JavaScript is an interpreted scripting language.
• JavaScript is dependent to HTML and Browser.
• It is open source and cross-platform.

How to invoke Java Script in HTML?
HTML/JavaScript 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
Programming Terminologies
Variable – memory storage.

Data Types – number (with or without decimal point), string, date, etc..
Example :
100
int a =100 ;
String StudentName;
a
Programming Terminologies
Function – symbolized by ().

Block – symbolized by { }
Keywords – word/s only HTML or Java can recognized.
Example : var, parseFLoat, parseInt
User-defined words – word/s you have created.
Example : shadowEffect, floatingObject

How to invoke Java Script in HTML?
Transaction
Condition (if, for)
Mathematical operation
SAMPLE OUTPUT OF THE JAVASCRIPT PROGRAM
Source Code of the HTML and JAVASCRIPT
<!DOCTYPE html>
<html>
<head><title>Javascript Sample </title>
<script language=javascript>
function acceptInput()
{ var studName=frmsample.txtname.value;
var program= frmsample.txtprogram.value;
var laboratory=frmsample.txtlab.value;
var library=frmsample.txtlibrary.value;
var registration=frmsample.txtregister.value;
document.write("<center><font size=5 face=arial color=blue>STUDENT RECORDS");

document.write("<br><br>Student Name is : " + studName);
document.write("<br>Program is : " + program);
var total= parseFloat(laboratory)+parseFloat(registration)+ parseFloat(library) ;

document.write("<br><br><b>Total Tuition Fee is : " + total);
}
</script>
Source Code of the HTML and JAVASCRIPT
continuation
</head>
<body><center>
<h1>Student Records</h1>
<table width=500 border=1>
<form name=frmsample>
<tr><td>Full Name</td>
<td><input type=text name=txtname size=35></td>
</tr>
<tr><td>Program</td>
<td><select name=txtprogram>
<option value=" ">
<option value=BSIT>BSIT
<option value=BSCS>BSCS
<option value=BSIS>BSIS
</td>
</tr>
continuation
<tr><td colspan=2><b>Tuition Fee Breakdown:</b><br>

<input type=checkbox onclick=txtlab.value=10000>Laboratory Fee...10,000
<input type=hidden name=txtlab value=0>
<br><input type=checkbox onclick=txtregister.value=500>Registration Fee...500

<input type=hidden name=txtregister value=0>
<br><input type=checkbox onclick=txtlibrary.value=300>Library Fee...300

<input type=hidden name=txtlibrary value=0>
</td>
</tr>
<tr><td align=center colspan=2>
<input type=button value="Click Here to View" onclick=acceptInput();>
&nbsp&nbsp&nbsp&nbsp
<input type=reset value=Reset>

</td>
</tr>
</form>
</table>
</body>
</html>
Summary of the Lesson
In this lesson, we were able to describe the internet as the global system of
interconnected computer networks. We have discussed some important dates
pertaining to the historical overview of the internet and we have mentioned some
important persons who made the internet possible. They are Leonard Kleinrock,
Larry Roberts, Vint Cerf, and Robert Kahn, Raymond Tomlinson, Sir Tim Berners-Lee,
Barry Shein, Tim Berners lee, and lastly Marc Andersen and Eric Bina who created the
first web browser.

References
1) What is Internet?, (2020) Retrieved from https://en.wikipedia.org/wiki/Internet
2) What is Internet, (2020) Retrieved from https://www.britannica.com/technology/Internet

3) History of the Internet, (2020) Retrieved from https://sciencenode.org/feature/a-brief-history-of-the-
internet-.php
4) Persons who made the Internet Possible, (2020) Retrieved from
https://home.bt.com/tech-gadgets/internet/11-people-who-made-the-internet-possible-11363996346738

Proprietary Clause :
Property of Technological Institute of the Philippines (TIP).
No part of the materials, made and uploaded in this learning management system by
TIP may be copied, photographed, printed, reproduced, shared, transmitted, or
reduced to any electronic medium or machine-readable form, in whole or in part,
without prior consent of TIP.

5.2 Javascripting Ver.2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

5.2 Javascripting Ver.2

Uploaded by

Copyright:

Available Formats

Java Scripting

By: Eduardo S. Rodrigo

Copyright © 2020 by Technological Institute of the Philippines. All rights reserved.

At the end of the lesson, the students are expected to :

2) use JavaScript to design both static and dynamic webpage with

3) create a simple webpage with a transactions.

Copyright © 2020 by Technological Institute of the Philippines. All rights reserved.

Copyright © 2020 by Technological Institute of the Philippines. All rights reserved.

• JavaScript is an interpreted scripting language.

• JavaScript is dependent to HTML and Browser.

• It is open source and cross-platform.

Variable – memory storage.

Function – symbolized by ().

User-defined words – word/s you have created.

Example : shadowEffect, floatingObject

Condition (if, for)

document.write("<center><font size=5 face=arial color=blue>STUDENT RECORDS");

var total= parseFloat(laboratory)+parseFloat(registration)+ parseFloat(library) ;

<tr><td colspan=2><b>Tuition Fee Breakdown:</b><br>

<br><input type=checkbox onclick=txtregister.value=500>Registration Fee...500

<br><input type=checkbox onclick=txtlibrary.value=300>Library Fee...300

<input type=reset value=Reset>

Copyright © 2020 by Technological Institute of the Philippines. All rights reserved.

1) What is Internet?, (2020) Retrieved from https://en.wikipedia.org/wiki/Internet

2) What is Internet, (2020) Retrieved from https://www.britannica.com/technology/Internet

Copyright © 2020 by Technological Institute of the Philippines. All rights reserved.

Copyright © 2020 by Technological Institute of the Philippines. All rights reserved.

You might also like