School: THE NATIONAL TEACHERS COLLEGE Grade Level: 9

Student Teacher: Mr. Jhaizar Ladjahali Learning Area: Computer 9

DAILY LESSON LOG
Tuesday/Wednesday – 7:00 AM to 4:00
Teaching Dates and Time PM Quarter: 4th Quarter

Session 1 Session 2 Session 3

I. OBJECTIVES

A. Content Standards The learners shall be able to identify and describe what java script is and working with jQuery.

B. Performance Standards The learners shall be able to execute proper usage for creating new elements.

C. Learning The learners shall be able to apply knowledge and skill in java script manipulation and changing form elements.
Competency/Objectives
II. CONTENT Working with jQuery Working with Selection Manipulation

III. LEARNING RESOURCES

A. References Html5,CSS3,Javascript Mapua Html5,CSS3,Javascript Mapua Information Html5,CSS3,Javascript Mapua Information

Information Technology Center Technology Center Technology Center
1. Teacher’s Guide pages
2. Learner’s Material pages 109-112 pp. 113-118 pp. 119-123 pp.

3. Textbook pages
4. Additional Materials from https://www.w3schools.com/js/js_output.asp https://www.w3schools.com/js/js_output.asp https://www.w3schools.com/js/js_output.asp
Learning Resource LR portal
B. Other Learning Resources LED tv, Projector and laptop LED tv, Projector and laptop LED tv, Projector and laptop
IV. PROCEDURE
A. Reviewing previous Lesson or The teacher welcomes the class review The teacher welcomes the class review the The teacher welcomes the class review
presenting new lesson the previous lesson and introduced the previous lesson and introduced the new lesson. the previous lesson and introduced the
new lesson. new lesson.

B. Establishing a purpose for the The teacher will present a lesson using The teacher will present a lesson using power The teacher will present a lesson using
lesson power point presentation that’s shows point presentation that’s shows introduce a power point presentation that’s shows
introduce a java script and proper way java script and proper way working with introduce a java script and proper way
working with jQuery. jQuery. working with jQuery.
a. Presenting examples/ instances
of the new lesson.
b. Discussing new concepts and
practicing new skills.#1
Working with jQuery
 The jQuery library contains a
wide array of reusable code
components which allows web
designer and web developers to
instantly manipulate HTML
documents via the Document
Object Model or DOM
 The jQuery basic syntax is
written much like how you
would mention an object’s
method. In java script we would
do this by document.write().
And Content Delivery Network
or CDN version.
What is $?
- The jQuery library provides the
jQuery function, which lets you
select elements using CSS
selectors.
var listItems = jQuery (‘li’);
Of course if you have seen any jQuery
code, you are probably more
accustomed to seeing something like
this:
var listItems = $ (‘li’);
The learners will do activities for this
chapter aims to use jQuery to validate
several textboxes that are within an
HTML page.
Working with Selection
 Working with selections by forming a
jQuery object with your selection,
assumption is you want to change
your selection. Before that, there are a
number of concepts that are essential
in comprehending the jQuery way.
Testing a Selection
$(‘li’) .eq (0). Is(;.special’); //false
$(‘li’) .eq (0). Is(;.special’); //True
$(document).ready(function() {
$(“#button1”).click (function() {
$(“para1”).html(function(idx, original) {
Return “Old text: “+ original + “New text:
Hello
<b>jQuery</b> (index: “+ idx + “)”;
});
});
});
Chaining
$ (‘li’)
.click (function () {
$ (this).addClass (‘cliked’);
})
.find (‘span’)
.attr (‘title’, ‘Hover over me’);
The learners will do activities for this chapter
aims to use jQuery to validate several textboxes
that are within an HTML page.
Manipulation
- To change the DOM using syntax
that is easy to use than provided
by native DOM manipulation
methods is jQuery’s manipulation
methods chain or combine with
other jQuery methods as
manipulation methods return the
jQuery object on which they
were called.
Adding and Removing Classes
$(‘li’).addClass (‘hidden’);
$(‘li’).eq(1).removeClass
(‘hidden’);
jQuery provide the .toggleClass()
$(‘li’).eq ( 1).removeClass
(‘hidden’);
Changing Form Values
<input type=”text” value=”Old
Value”/>
<script
src=https://code.jquery.com/jquery-
1.10.2.js></script>
<script>
$ (‘input [type=”text”]’).val (‘new
value’);
</script>
The learners will do activities for this
chapter aims to use jQuery to validate
several textboxes that are within an HTML
page.
c. Discussing new concepts and
practicing new skills #2.
d. Developing Mastery
(Lead to Formative Assessment 3)
The learners will do activities for this
chapter aims to use jQuery to validate
several textboxes that are within an
HTML page.
Activity:
JavaScript: The Recipe Card
1. Go to activities folder and
double-click to open the
location.
2. Create a file named
jqueryValidation.html and save
this file inside the activities
folder.
3. Write the following code inside
the jqueryValidation.html file:
The learners will do activities for this chapter
aims to use jQuery to validate several textboxes
that are within an HTML page.
Activity:
JavaScript: The Recipe Card
1. Go to activities folder and double-click
to open the location.
2. Create a file named
jqueryValidation.html and save this file
inside the activities folder.
3. Write the following code inside the
jqueryValidation.html file:
The learners will do activities for this
chapter aims to use jQuery to validate
several textboxes that are within an HTML
page.
Activity:
JavaScript: The Recipe Card
1. Go to activities folder and
double-click to open the location.
2. Create a file named
jqueryValidation.html and save
this file inside the activities
folder.
3. Write the following code inside
the jqueryValidation.html file:
 4. The CSS and jQuery files used in 4. The CSS and jQuery files used in the 4. The CSS and jQuery files used in
the validation are already validation are already provided and it the validation are already
provided and it is not necessary is not necessary to modify them during provided and it is not necessary
to modify them during this this time. to modify them during this time.
time. a. The list of CSS files are as follows a. The list of CSS files are as follows
a. The list of CSS files are as I. Jquery-ui-1.8.13.custom.css I. Jquery-ui-1.8.13.custom.css
follows II. Site.css II. Site.css
I. Jquery-ui-1.8.13.custom.css b. The list of jQuery files are as follows b. The list of jQuery files are as
II. Site.css I. https://code.jquery.com/jquery- follows
b. The list of jQuery files are as 1.10.2.js I. https://code.jquery.com/jqu
follows II. https://cdnjs.cloudflare.com/ajax/ ery-1.10.2.js
I. https://code.jquery.com/jq libs.validate- II. https://cdnjs.cloudflare.com
uery-1.10.2.js js/2.0.1/validate.min.js /ajax/libs.validate-
II. https://cdnjs.cloudflare.co 5. Open the file in your browser to check js/2.0.1/validate.min.js
m/ajax/libs.validate- for the output 5. Open the file in your browser to
js/2.0.1/validate.min.js check for the output
5. Open the file in your browser to
check for the output

e. Finding practical application of

concepts and skills in daily living

f. Making Generalizations and I learned that: _____________________? I learned that: _____________________? I learned that: _____________________?
Abstraction about the Lesson. I will: _________________________? I will: _________________________? I will: _________________________?
I realized that: _________________? I realized that: _________________? I realized that: _________________?
g. Evaluating Learning Rubrics Rubrics Rubrics

h. Additional Activities for Application Remediation Activity: Remediation Activity: Remediation Activity:
or Remediation I. Enumeration I. Enumeration I. Enumeration
1. Define jQuery 1. Define jQuery 1. Define jQuery
2. What is jQuery and why it is used? 2. What is jQuery and why it is used? 2. What is jQuery and why it is used?
3. What jQuery commonly used for? 3. What jQuery commonly used for? 3. What jQuery commonly used for?
4. Give me at least 5 examples of 4. Give me at least 5 examples of jQuery 4. Give me at least 5 examples of
jQuery jQuery

V. REMARKS

VI. REFLECTION Reflect on your teaching and assess yourself Reflect on your teaching and assess yourself as a Reflect on your teaching and assess yourself as
as a teacher. Think about your students’ teacher. Think about your students’ progress this a teacher. Think about your students’ progress
progress this week. What works? What else week. What works? What else needs to be done to this week. What works? What else needs to be
needs to be done to help the students learn? help the students learn? Identify what help your done to help the students learn? Identify what
Identify what help your instructional instructional supervisors can provide for you so help your instructional supervisors can provide
supervisors can provide for you so when you when you meet them, you can ask them relevant for you so when you meet them, you can ask
meet them, you can ask them relevant questions. them relevant questions.
questions.
A. No. of learners earned 80%in the
evaluation.
B. No. of learners who required
additional activities for
remediation who scored below
80%

C. Did the remedial lesson work? No. of

learners who have caught up with
the lesson.

D. No. of learner who continue to

require remediation

E. Which of my teaching strategies

worked well? Why did these work?

F. What difficulties did I encounter

which my principal or supervisor
can help me solve?

G. What innovation or localized

materials did I used/discover which
I wish to share with other
teachers?