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