User:Niraj Prasad Bhatt/Real-Teaching Lesson Plan 6

From ICTED-WIKI
Revision as of 05:00, 16 May 2024 by Niraj bhatt (talk | contribs) (Created page with "__notoc__ <div style="column-count: 2; column-gap: 20px;"> '''Subject:''' Web Technology '''Period:''' Third '''Topic:''' Accessing HTML Elements with getElementsByClassName() '''Class:''' BICT 3rd Semester '''Unit:''' Three '''Time:''' 50 min '''No. of Students:''' 20 </div> == 1. Specific Objective: == At the end of this lesson, students will be able to: * Understand the purpose and usage of getElementsByClassName() method in JavaScript. * Access and manipulate...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search


Subject: Web Technology

Period: Third

Topic: Accessing HTML Elements with getElementsByClassName()

Class: BICT 3rd Semester

Unit: Three

Time: 50 min

No. of Students: 20

1. Specific Objective:[edit | edit source]

At the end of this lesson, students will be able to:

  • Understand the purpose and usage of getElementsByClassName() method in JavaScript.
  • Access and manipulate HTML elements by their class names using getElementsByClassName().

2. Instructional Materials:[edit | edit source]

  • Laptop, projector, screen
  • Sample HTML files with class names
  • Code editor (e.g., VS Code)
  • Internet access

3. Teaching Learning Activities:[edit | edit source]

  • Begin the class by discussing the importance of selecting and manipulating HTML elements by class names in web development.
  • Introduce the getElementsByClassName() method in JavaScript and explain its syntax and purpose.
  • Demonstrate how to use getElementsByClassName() to access HTML elements by their class names.
  • Present code examples illustrating the usage of getElementsByClassName() for various DOM manipulations.
  • Guide students through hands-on exercises to practice accessing and manipulating HTML elements using getElementsByClassName().
  • Discuss best practices and limitations of getElementsByClassName(), including browser compatibility and performance considerations.
  • Encourage students to explore alternative methods for selecting HTML elements by class names and compare them with getElementsByClassName().

4. Assessment:[edit | edit source]

  • Ask students to write JavaScript code snippets demonstrating the use of getElementsByClassName() to access and manipulate HTML elements.
  • Conduct a quiz to assess students' understanding of the getElementsByClassName() method and its usage.

5. Homework:[edit | edit source]

  • Assign exercises for students to practice using getElementsByClassName() in JavaScript programs. Provide feedback on their solutions in the next class.
  • Encourage students to explore online tutorials and documentation to deepen their understanding of DOM manipulation techniques.