Difference between revisions of "JavaScript/C3/Window-and-DOM-Manipulations-in-JS/English"
Pravin1389 (Talk | contribs) |
Nancyvarkey (Talk | contribs) |
||
Line 3: | Line 3: | ||
Author: Jayesh Katta Ramalingaiah | Author: Jayesh Katta Ramalingaiah | ||
− | Domain Reviewer: | + | Domain Reviewer: Ankita Maske |
− | Novice Reviewer: | + | Novice Reviewer: Praveeen S. |
Keywords: JavaScript, HTML, document, window | Keywords: JavaScript, HTML, document, window |
Latest revision as of 11:08, 21 June 2021
Title of the script:Window and DOM Manipulations
Author: Jayesh Katta Ramalingaiah
Domain Reviewer: Ankita Maske
Novice Reviewer: Praveeen S.
Keywords: JavaScript, HTML, document, window
|
|
Slide: Title | Hello and Welcome to the spoken tutorial on “Window and DOM Manipulations”. |
Slide:
Learning Objectives |
In this tutorial, we will learn about the:
|
Slide: System Specifications | This tutorial is recorded using:
However you may use any other browser of your choice. |
Slide : Pre-requisites | To practice this tutorial,
|
Slide: Code files |
|
Slide: DOM |
|
Slide: DOM |
|
Slide: DOM |
|
Slide: DOM |
|
Slide: DOM
|
There are lots of functions and properties in the document object.
|
Show VS editor | Open Visual Studio Code editor |
[Editor]
Welcome Page -> Open Folder -> Practice-JS |
In the editor, browse and open the folder “Practice-JS ”. |
[Editor] Click on
Explorer pane -> Practice-JS -> index.html |
Under Practice-JS folder, open the file named index.html
|
[Editor] Type:
<html lang="en"> <head> <title>Window and DOM Manipulations</title> </head> <body> <h1 id="heading1"> Hello! </h1> <ul id="unorderedList"> </ul> <script src="main.js"> </script> </body> </html> |
In the index.html file, replace the code as shown.
|
[Editor] Highlight:
|
Here, I have created a simple h1 element with id heading1. |
[Editor] Highlight:
|
Here, I have created an unordered list element with id unorderedList.
|
Press: Ctrl + S | Save the file. |
Press: Alt + L and Alt + O | Start the Live server. |
Show firefox | The default browser will open automatically and a new tab opens. |
[Firefox] Press Ctrl + Shift + I
|
Now open the Browser developer tools panel and go to the console tab |
Switch to Editor | Switch back to the editor. |
[Editor] Click on
|
Under Practice-JS folder, open the file named main.js |
[Editor] Type:
|
In the main.js file, replace the code as shown. |
[Editor]Highlight:
|
Here, we log the document keyword.
|
Press: Ctrl + S | Save the file. |
Switch to Browser | Switch back to the browser. |
[Browser] [Console Tab]
Highlight:
|
We can see HTML Document displayed. |
[Browser] [Console Tab]:
Click: ▶ HTML document |
Expand the HTML document by clicking on the right arrowhead symbol.
|
Only Narration | We can see all the properties in the HTML object.
For e.g. doctype, documentElement etc.,
|
[Browser] [Console Tab]:
Click:
|
Expand the <prototype> by clicking on the right arrowhead symbol.
|
Only Narration | We can see getElementsByTagName, getElementsByClassName functions in the prototype object.
|
Switch to Editor | Switch back to the editor. |
[Editor] Type:
|
Replace the code as shown in the main.js file. |
[Editor] Highlight:
|
Here, we are using getElementById function and passing the heading1 ID as the parameter. |
Press: Ctrl + S | Save the file. |
Switch to Browser | Switch back to browser. |
[Browser] [Console Tab]
Highlight:
|
Here, we can see that the function has returned the HTML element with heading1 as ID. |
[Browser] [Console Tab]
|
Expand the h1 element by clicking on the right arrowhead symbol. |
[Browser] [Console Tab]:
[Highlight]: h1#heading1 accessKey: "" accessKeyLabel: "" align: "" assignedSlot: null attributes: NamedNodeMap [ id="heading1" ] baseURI: "about:newtab" .. .. . . . . . . |
If you have noticed this, even h1 element is an object with properties.
|
[Browser] [Console Tab]:
Highlight:
|
The id property is having heading1 as value, which we have declared in the HTML file.
|
Switch to Editor | Switch back to the editor. |
[Editor] Type:
|
Replace the code as shown in the main.js file |
[Editor] Highlight:
|
We know that, document.getElementById("heading1") returns a h1 element.
|
Press: Ctrl + S | Save the file. |
Switch to Browser | Switch back to browser. |
[Browser] [Page] [Highlight];
Spoken Tutorials |
We have successfully assigned a value to the h1 element having id heading1.
|
Switch to Editor | Switch back to the editor. |
[Editor] Type:
|
Replace the code as shown in the main.js file. |
[Editor] Highlight:
|
Here, we are getting the ul element declared in HTML file using document.getElementById("unorderedList")
|
Press: Ctrl + S | Save the file. |
Switch to Browser | Switch back to browser. |
[Browser] [Page] [Highlight];
Spoken Tutorial |
We have successfully assigned a value to the ul element having id unorderedList
|
Only narration | With this we have come to the end of this tutorial.
|
Slide: Summary | In this tutorial, we have learnt about:
|
Slide: Assignment | As an assignment,
|
Slide: Assignment |
|
Slide: Assignment |
|
Slide: About Spoken Tutorial Project |
|
Slide: Spoken tutorial workshops |
|
Slide: Forum questions | Pls post your timed queries in this forum. |
Slide: Acknowledgement | Spoken Tutorial Project is funded by Ministry of Education (MoE), Government of India |
Slide: Thanks | The script for this tutorial is contributed by Jayesh.
And this is Praveen from IIT Bombay signing off. Thank you for joining. |