Difference between revisions of "JavaScript/C3/Window-and-DOM-Manipulations-in-JS/English"
(Created page with "Title of the script:Window and DOM Manipulations Author: Jayesh Katta Ramalingaiah Domain Reviewer: Novice Reviewer: Keywords: JavaScript, HTML, document, window {| b...") |
Nancyvarkey (Talk | contribs) |
||
(2 intermediate revisions by 2 users not shown) | |||
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 | ||
Line 24: | Line 24: | ||
Learning Objectives | Learning Objectives | ||
|| In this tutorial, we will learn about the: | || In this tutorial, we will learn about the: | ||
− | |||
− | |||
* '''Window Object ''' | * '''Window Object ''' | ||
* '''Document '''and '''DOM manipulations '''in''' JS''' | * '''Document '''and '''DOM manipulations '''in''' JS''' | ||
− | |||
− | |||
|- | |- | ||
|| Slide: System Specifications | || Slide: System Specifications | ||
|| This tutorial is recorded using: | || This tutorial is recorded using: | ||
− | |||
− | |||
* '''Ubuntu Linux''' OS version 18.04 | * '''Ubuntu Linux''' OS version 18.04 | ||
* '''Visual Studio Code''' version 1.51.1 ('''code editor''') | * '''Visual Studio Code''' version 1.51.1 ('''code editor''') | ||
Line 45: | Line 39: | ||
|| Slide : Pre-requisites | || Slide : Pre-requisites | ||
|| To practice this tutorial, | || To practice this tutorial, | ||
− | + | * You should be familiar with writing and executing''' JS''' files. | |
− | + | ||
− | * You should be familiar with writing and executing''' JS''' files | + | |
* If not, please go through the prerequisite tutorials on this website. | * If not, please go through the prerequisite tutorials on this website. | ||
− | |||
− | |||
|- | |- | ||
Line 56: | Line 46: | ||
|| | || | ||
* The files used in this tutorial are available in the''' Code files''' link on this tutorial page. | * The files used in this tutorial are available in the''' Code files''' link on this tutorial page. | ||
− | * Pls download and extract the | + | * Pls download and extract the files. |
* Make a copy and then use them for practising. | * Make a copy and then use them for practising. | ||
− | |||
− | |||
|- | |- | ||
Line 67: | Line 55: | ||
* Each and every '''tab '''in a '''browser '''is a '''document'''. | * Each and every '''tab '''in a '''browser '''is a '''document'''. | ||
* A''' document '''is an '''object'''. | * A''' document '''is an '''object'''. | ||
− | |||
− | |||
|- | |- | ||
Line 75: | Line 61: | ||
* All the '''HTML''' '''elements''' declared inside an '''HTML '''page is a part of the '''document object'''. | * All the '''HTML''' '''elements''' declared inside an '''HTML '''page is a part of the '''document object'''. | ||
* The '''DOM '''represents the '''document '''with a '''logical tree''' | * The '''DOM '''represents the '''document '''with a '''logical tree''' | ||
− | |||
− | |||
|- | |- | ||
Line 83: | Line 67: | ||
* '''getElementById '''is a '''function '''in the '''document object'''. | * '''getElementById '''is a '''function '''in the '''document object'''. | ||
* The '''function '''takes the '''HTML element ID '''as a '''parameter '''and | * The '''function '''takes the '''HTML element ID '''as a '''parameter '''and | ||
− | * Returns the '''element '''with the '''ID '''in the '''document''' | + | * '''Returns''' the '''element '''with the '''ID '''in the '''document''' |
− | + | ||
− | + | ||
|- | |- | ||
Line 91: | Line 73: | ||
|| | || | ||
* '''innerText '''and''' innerHTML '''are '''properties '''for the '''element '''in the '''DOM''' | * '''innerText '''and''' innerHTML '''are '''properties '''for the '''element '''in the '''DOM''' | ||
− | * '''innerText''' | + | * '''innerText returns''' the text value for the '''element''' |
− | * '''innerHTML ''' | + | * '''innerHTML returns''' the '''HTML element value''' for the '''element''' |
− | + | ||
− | + | ||
|- | |- | ||
Line 121: | Line 101: | ||
|- | |- | ||
|| <nowiki>[Editor] </nowiki> | || <nowiki>[Editor] </nowiki> | ||
− | |||
Welcome Page -> Open Folder -> '''Practice-JS''' | Welcome Page -> Open Folder -> '''Practice-JS''' | ||
|| In the '''editor, '''browse and open the folder “'''Practice-JS''' ”. | || In the '''editor, '''browse and open the folder “'''Practice-JS''' ”. | ||
− | |||
− | |||
− | |||
|- | |- | ||
|| <nowiki>[Editor] </nowiki>Click on | || <nowiki>[Editor] </nowiki>Click on | ||
− | |||
'''Explorer '''pane -> '''Practice-JS''' -> '''index.html''' | '''Explorer '''pane -> '''Practice-JS''' -> '''index.html''' | ||
Line 181: | Line 156: | ||
<nowiki><ul id="unorderedList"> </ul></nowiki> | <nowiki><ul id="unorderedList"> </ul></nowiki> | ||
− | || Here, I have created an '''unordered list element '''with | + | || Here, I have created an '''unordered list element '''with '''id unorderedList.''' |
Line 261: | Line 236: | ||
Click: ▶ HTML document | Click: ▶ HTML document | ||
|| Expand the '''HTML document''' by clicking on the right arrowhead symbol. | || Expand the '''HTML document''' by clicking on the right arrowhead symbol. | ||
− | |||
− | |||
|- | |- | ||
|| Only Narration | || Only Narration | ||
− | || We can see all the '''properties '''in the '''HTML | + | || We can see all the '''properties '''in the '''HTML object'''. |
For e.g. '''doctype''', '''documentElement '''etc., | For e.g. '''doctype''', '''documentElement '''etc., | ||
Line 394: | Line 367: | ||
document.getElementById("heading1").innerText = "Spoken Tutorials"; | document.getElementById("heading1").innerText = "Spoken Tutorials"; | ||
− | || We know that, '''document.getElementById("heading1") returns''' a '''h1 element''' | + | || We know that, '''document.getElementById("heading1") returns''' a '''h1 element'''. |
Line 473: | Line 446: | ||
|| Slide''': '''Summary''' ''' | || Slide''': '''Summary''' ''' | ||
|| In this tutorial, we have learnt about: | || In this tutorial, we have learnt about: | ||
− | |||
− | |||
* '''Window Object''' | * '''Window Object''' | ||
* '''Document '''and''' DOM Manipulations '''in''' JS''' | * '''Document '''and''' DOM Manipulations '''in''' JS''' | ||
− | |||
− | |||
|- | |- | ||
Line 487: | Line 456: | ||
* Clear the existing code | * Clear the existing code | ||
* Add a '''h1 tag''' with '''id''' as '''heading1 '''for the text “'''HTML is Loaded!”''' | * Add a '''h1 tag''' with '''id''' as '''heading1 '''for the text “'''HTML is Loaded!”''' | ||
− | |||
− | |||
|- | |- | ||
Line 497: | Line 464: | ||
* Access the '''h1''' element using '''id ''' | * Access the '''h1''' element using '''id ''' | ||
* Modify the text as - '''Both HTML and JS are Loaded!''' | * Modify the text as - '''Both HTML and JS are Loaded!''' | ||
− | |||
− | |||
|- | |- | ||
Line 505: | Line 470: | ||
* Open the file '''MyPage.html '''in a '''web''' '''browser'''. | * Open the file '''MyPage.html '''in a '''web''' '''browser'''. | ||
* Observe the output in the '''browser''' | * Observe the output in the '''browser''' | ||
− | |||
− | |||
|- | |- | ||
Line 513: | Line 476: | ||
* The video at the following link summarises the Spoken Tutorial project. | * The video at the following link summarises the Spoken Tutorial project. | ||
* Please download and watch it | * Please download and watch it | ||
− | |||
− | |||
|- | |- | ||
Line 521: | Line 482: | ||
* We conduct workshops using spoken tutorials and give certificates. | * We conduct workshops using spoken tutorials and give certificates. | ||
* For more details, please write to us. | * For more details, please write to us. | ||
− | |||
− | |||
|- | |- |
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. |