Scribd
Upload
107 views

Sample DLP TVL Programming

This lesson plan aims to teach students how to use jQuery to simplify common JavaScript tasks. The objectives are for students to be able to describe how jQuery simplifies JavaScript APIs and write jQuery/JavaScript code that manipulates the HTML DOM and handles events. The lesson will begin with a review of jQuery setup and syntax. Students will then write sample jQuery code to add two numbers, use conditional statements, and convert between Celsius and Fahrenheit. For assessment, students will create a program that changes the browser background color based on the input value in a text box.

Uploaded by

Chester Navarro
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
107 views

Sample DLP TVL Programming

This lesson plan aims to teach students how to use jQuery to simplify common JavaScript tasks. The objectives are for students to be able to describe how jQuery simplifies JavaScript APIs and write jQuery/JavaScript code that manipulates the HTML DOM and handles events. The lesson will begin with a review of jQuery setup and syntax. Students will then write sample jQuery code to add two numbers, use conditional statements, and convert between Celsius and Fahrenheit. For assessment, students will create a program that changes the browser background color based on the input value in a text box.

Uploaded by

Chester Navarro
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Semi-Detailed Lesson Plan

In
Technology and Livelihood Education III
ICT – HTML

I. Objective

At the end of a 60 minute lesson, 100% of the students should be able to get at least 75% level of mastery on
how to:

 Describe the use of jQuery to simplify code that uses many common JavaScript APIs.
 Write JavaScript/jQuery code that manipulates the HTML document object model and handle events.

II. Subject Matter


Topic: Using jQuery to simplify code of common JavaScript APIs
Using Conditional Statement

References: www.w3schools.com
Learning jQuery
Fourth Edition p12-17

Materials: PowerPoint Presentation

III. Procedure
A. Pre-developmental Activity

1. Review
Present the previous lesson about the jQuery set up and syntax, and the
folder structure on how to use the jQuery Library.

Setting up jQuery to prepare for coding on a document.

B. Developmental Activities

1. Presentation of the lesson

Create a folder on drive d.


Rename of the folder as “mypage”.
Open the Dreamweaver Application.
We will use the Dreamweaver as a document text editor.

Type the following codes.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery Sample</title>
<script src="jquery-3.4.1.min.js"></script>
<style>
p{ width: 350px; text-align: justify;}
</style>
</head>
<body>
<p><h4>The first paragraph</h4></p>
<p>
The quick brown fox jumps over the lazy dog.

</body>
</html>
Save the file as “index.html” in “mypage” folder that you have just created.
Open the “index.html” using your internet browser application (use the Internet Explorer or Google Chrome).
C. Post Developmental Activities

1. Practice Exercise.

Adding Two numbers

Create a jQuery code that will add two number and display the sum.

Html input:

<input type=“text” id=“numA”/>


<input type=“text” id=“numB”/>

<button>Compute Sum</button>

jQuery Code:

1. <script>
$(document).ready(function(e) {
$("#compute").click(function(){
var a,b, total;
a=$("#numA").val();
b=$("#numB").val();

total= parseInt(a)+ parseInt(b);


alert("Total: " + total);
})
});
</script>

Conditional Statement

Conditional statements are used to perform different actions based on different conditions.
Very often when you write code, you want to perform different actions for different decisions.

Example:
var x;
if(x>5)
{
alert(“x is greater than 5”
}
else if (x<5){
alert(“x is lesser than 5”)
}
else{
alert(“x equal to 5”)
}

2. Generalization

Describe the use of jQuery to simplify code that uses many common JavaScript APIs.
jQuery greatly simplifies JavaScript programming. Given the following scenario, if we are going
to access the value of an element in JavaScript we use the code
document.getElementById(“idname”).value, while in jQuery we simply write

$(“#idname”).val();

IV. Evaluation

Challenging Activity

Celsius to Fahrenheit Conversion


Formula
Fa=(Ce x 9/5) +32

Where: Fa = Fahrenheit
Ce= Celsius

V. Assignment

Create a program that will change the background of the browser with the following condition:

if the input value of the text box is less than 10 the body background would be Red.
if the input value of the text box is greater than 10 the body background would be black.

You might also like