Teaching Plan
Subject: Computer Studies Std: VIII Time Duration: 225 minutes
Chapter: JavaScript in HTML Term: II
Concepts/Subtopics Teaching Strategies
1. Scripting language 1. 5Es strategy
2. What is JavaScript? 2. Flipped learning
3. Using JavaScript with HTML
4. Using Functions and Events in JavaScript
5. Document Object Model
6. Using DOM methods
7. Validating inputs in a form
Reference Books: Tech Talk 8 Textbook, Tech Talk 8 Workbook
Resources
Diagnostic Test/Entry Test 1 AS of Diagnostic Test/Entry Test 1
Achievement Test/Exit Test 3 AS of Achievement Test/Exit Test 3
PPT 3 Video NA
Workbook 1 AS of Workbook 1
Quiz NA Graphic Organiser NA
Activity Sheet/Worksheet NA AS of Activity Sheet/Worksheet NA
CB_2024-25 JavaScript in HTML Page 1 of 9
Teaching Plan
Weblinks NA Any other NA
Lesson Goal/ Purpose of the Lesson
Students will learn the fundamentals of scripting languages, the role of JavaScript, and its integration with HTML.
Prerequisite Knowledge
The student should know to:
use CSS in HTML
Entry Task (Diagnostic Test)
The Entry Task (Diagnostic Test) is a Baseline Test which assesses the student’s prior/prerequisite knowledge, skill level, and gaps of
missing information.
The student is not informed in advance about the test. The test will give the teacher accurate information about the student’s capabilities.
The text will be available on the Loop Learning platform for schools enrolled in Loop Learning. The test can be conducted through
Google Forms for schools not yet on Loop Learning.
Loop Learning platform offers self-learning PPTs and videos for students who score less than 60%. These resources are designed to help
students bridge their learning gaps.
Use Entry Task
CB_2024-25 JavaScript in HTML Page 2 of 9
Teaching Plan
Concepts/Sub Topics
Scripting language
What is JavaScript?
Using JavaScript with HTML
Learning Outcome
Students will be able to:
know the use of a scripting language
understand the types of scripting languages
identify the features of JavaScript
use JavaScript in HTML
differentiate between internal and external JavaScript
Teaching strategy: 5Es strategy
Vocabulary/Keywords
interactive, dynamic
TIP (Term, Information, Picture) Chart
Learning Phase Suggested Activities
Engage Begin the lesson with a brief discussion by asking students:
o Have they ever interacted with a website that changes dynamically, for example, changing colours, pop-ups,
entering data and submitting forms.
o How do these interactions happen?
o Note the responses of the students in the concept map format.
Using the concept map, inform students that HTML is used to structure web content, and CSS is used for styling.
However, CSS cannot be used to change the content or style of a web page based on user actions. For this, you will
CB_2024-25 JavaScript in HTML Page 3 of 9
Teaching Plan
need to add programming code in HTML using a scripting language. The scripting language allows you to make
web pages interactive. By adding a script, you can detect when the user clicks on a colour and then change the
background colour of the page accordingly.
Ask students to create a TIP chart in their notebook for the word ‘interactive’.
Explore Divide students into pairs
Ask students to refer to the textbook and read and understand the topics Scripting Language and What is
JavaScript?
Instruct students to discuss with their partner and summarize what they learned.
Explain Refer to the presentation PPT1_CB_VIII_CS_JavaScript in HTML and explain
o Scripting language
Ask students to create a TIP chart in their notebook for the word ‘dynamic’
o What is JavaScript?
o Using JavaScript with HTML – internal and external
Elaborate Instruct students to refer to the textbook and perform the following:
o Add a JavaScript code to write something in an HTML document using the internal method
o Repeat the same using the external method
Evaluate Instruct students to complete Activity 1 given in the textbook in their notebooks.
Discuss the answers related to the topic given in the textbook and ask students to write them in their notebooks.
Use Exit task 1 (on loop for individual assessment)
CB_2024-25 JavaScript in HTML Page 4 of 9
Teaching Plan
Concepts/Sub Topics
Using Functions and Events in JavaScript
Learning Outcome
Students will be able to:
to use functions and events in JavaScript
Teaching strategy: Flipped classroom
Vocabulary/Keywords
pass
TIP (Term, Information, Picture) Chart
Student Learning Resources at Home
Go through the presentation PPT2_CB_VIII_CS_Using Functions and Events in JavaScript given on the Loop learning platform to learn
about functions and events in Javascript.
Student Learning Activities at Home
Create a JavaScript that uses functions and events by referring to the textbook.
Identify the purpose of using functions and events in JavaScript.
Classroom Activities
Introduction
Begin the class with a brief recap of what functions and events are in JavaScript.
Encourage students to share their understanding from the activity completed at home.
CB_2024-25 JavaScript in HTML Page 5 of 9
Teaching Plan
Accept the response and explain how functions are created in JavaScript. Also show how this function is called when an event occurs.
Hands-on Activity
Divide the class into pairs.
Instruct each pair to create a simple webpage where
o there is a button labelled "Click Me!".
o when the button is clicked, a JavaScript function is triggered to display a welcome message on the page.
o another button to some text when the mouse pointer hover over an image.
Ask students to create a TIP chart in their notebook for the word ‘pass’.
After completing the task, each pair will present their code and explain it to the class.
Closure
Instruct students to complete Activity 2 given in the textbook.
Clear doubts of the students, if any, while they are performing the activity.
Home Assignment
Complete the answers related to the topic given in the textbook in their notebooks.
Assessment
Use Exit task 2 (on loop)
Assess students based on their participation in Hands-on Activity and the completion of the homework assignment.
CB_2024-25 JavaScript in HTML Page 6 of 9
Teaching Plan
Concepts/Sub Topics
Document Object Model
Using DOM methods
Validating inputs in a form
Learning Outcome
Students will be able to:
learn about the Document Object Model (DOM) in JavaScript
use DOM methods to modify specific elements
validate inputs in a form using JavaScript
Teaching strategy: Flipped classroom
Vocabulary/Keywords
array
TIP (Term, Information, Picture) Chart
Student Learning Resources at Home
Go through the presentation PPT3_CB_VIII_CS_Document Object Model given on the Loop learning platform to learn about DOM and
its methods
Go through the presentation PPT4_CB_VIII_CS_Validating inputs in a form given on the Loop learning platform to learn using DOM to
validate input from a user
Student Learning Activities at Home
CB_2024-25 JavaScript in HTML Page 7 of 9
Teaching Plan
Create a simple code using a function and event to select an HTML element using document.getElementById and change its content
using JavaScript.
Classroom Activities
Introduction
Begin the class with a brief recap of:
o What the DOM is and how it organizes HTML as a tree structure.
o Basic DOM methods (getElementById, innerHTML, etc.) with examples.
o Using DOM methods to validate inputs in a form
Encourage students to share their understanding from the activity completed at home.
Accept the response and show an example of validating inputs in a form using the DOM methods.
Demonstration/Hands-on Activity
Divide the class into pairs.
Guide students to create a basic HTML page containing a paragraph, a button, and an image.
Demonstrate the steps to use getElementById to change the paragraph’s content when the button is clicked.
Instruct students to change other attributes, such as changing the image's src using getElementById.
Demonstrate the steps to create HTML code using document.getElementsByClassName() to select elements by their class name
Demonstrate the steps to create HTML code using document.getElementsByTagName() to select all elements in the HTML file with
a specified tag
Now show a complete example of validating the data entered in a form using JavaScript
Closure
Instruct students to complete Activity 3 and Activity 4 given in the textbook.
Clear doubts of the students, if any, while they are performing the activity.
Instruct students to complete the ‘Chapter 5 JavaScript in HTML’ worksheet from the workbook.
CB_2024-25 JavaScript in HTML Page 8 of 9
Teaching Plan
Home Assignment
Complete the Activity 3 and Activity 4 given in the textbook if not completed in the class.
Complete the answers related to the topic given in the textbook in their notebooks.
Assessment
Use Exit task 3 (on loop)
Assess students based on their participation in Hands-on Activity and the completion of the homework assignment.
NOTE FOR THE TEACHER
The Exit Task (Achievement Test) is a Benchmark Test, which is an interim assessment [between formative and summative assessments] to
identify the student’s academic progress.
Inform the students well in advance to revise the chapter.
The text will be available on the Loop platform for schools enrolled in Loop Learning. For schools not yet on Loop, the test can be
conducted through Google Forms.
More than 75% of students should score 60% or more than 60% marks.
The test result gives accurate information on the student’s strengths and weaknesses. Analyse the test results and give feedback to the
students, understand which part of the chapter needs to be retaught, and which students require assistance for enhancement
[remediation] or guidance for enrichment [high achievement].
CB_2024-25 JavaScript in HTML Page 9 of 9
