9/17/2023 0 Comments 1.3.5 simple math codehsMake sure that students open the console to see how the elements are being manipulated.Ĭomplete Menu Opinion and Longest Paragraph (10- 12 mins) Longest Paragraph is completed most easily using iteration. If students are not familiar with lists, use the rest of class to go over or cover lists instead of moving on to this material.Įxplore Multiple p tags (3 mins). Consider using the Practice with the DOM handout before moving on to the next video. (10 mins)Ĭonsider splitting this lesson into two by showing this during the next class period. Watch Using the DOM and complete the corresponding quiz. They should see that it actually returns the element object.Ĭomplete Let’s Get to Know You and Simple Math (10 - 12 mins). Have students open the console and try typing document.getElementById directly into the console. (6 - 8 mins) Explore Welcome to My Site!. Watch getElementById and complete the corresponding quiz. Explain to them that in this lesson, they are going to learn how they can manipulate elements on a webpage using JavaScript. Have students answer the beginning of class discussion questions (5- 7 mins).Ĭonsider pulling up a completed version of the Welcome to My Site example, and ask if students would be able to complete that with the knowledge that they currently have. Review Intro to Arrays in the JavaScript Bootcamp module. If students are unfamiliar with this topic or could use additional practice, be sure to This lesson involves accessing items in a list. Consider using this during class, or assigning it as homework. It can be split into two at the video Using the DOM. Prior Knowledge Script tags Lists Iteration The console Modify existing elements on a web page using document.getElementById Modify existing elements on a web page using document.getElemenyByTagName Explain the purpose of the DOM, and how it is used to manipulate HTML filesġ.3.1 Video: getElementById 1.3.2 Check for Understanding: getElementById Quiz 1.3.3 Example: Welcome to My Site! 1.3.4 Exercise: Let's Get to Know You 1.3.5 Exercise: Simple Math 1.3.6 Video: Using the DOM 1.3.7 Check for Understanding: Using the DOM Quiz 1.3.8 Example: Multiple p tags 1.3.9 Exercise: Menu Opinion 1.3.10 Exercise: Longest Paragraph The DOM, or Document Object Model, translates HTML files into accessible objects that can be manipulated or added to a webpage. Lesson 1.3: Using the DOM Course: Web Development | Module: Introduction to Javascript in HTMLĭescription In this lesson, students learn how to modify HTML tags on a webpage using the DOM.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |