JavaScript/C3/Window-and-DOM-Manipulations-in-JS/English - Revision history

Nancyvarkey at 05:38, 21 June 2021

2021-06-21T05:38:35Z

Pravin1389 at 12:52, 3 February 2021

2021-02-03T12:52:41Z

Nancyvarkey at 05:20, 18 January 2021

2021-01-18T05:20:28Z

Kr.jayesh: 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..."

2021-01-13T17:47:20Z

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..."

New page

Title of the script:Window and DOM Manipulations

Author: Jayesh Katta Ramalingaiah

Domain Reviewer:

Novice Reviewer:

Keywords: JavaScript, HTML, document, window

{| border = “1”
|| <center>'''Visual Cue'''</center>
|| <center>'''Narration'''</center>

|-
|| 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:

* '''Window Object '''
* '''Document '''and '''DOM manipulations '''in''' JS'''

|-
|| Slide: System Specifications
|| This tutorial is recorded using:

* '''Ubuntu Linux''' OS version 18.04
* '''Visual Studio Code''' version 1.51.1 ('''code editor''')
* '''Firefox''' web browser

However you may use any other '''browser''' of your choice.

|-
|| Slide : Pre-requisites
|| To practice this tutorial,

* You should be familiar with writing and executing''' JS''' files'''.'''
* If not, please go through the prerequisite tutorials on this website.

|-
|| Slide: Code files
||
* The files used in this tutorial are available in the''' Code files''' link on this tutorial page.
* Pls download and extract the file.
* Make a copy and then use them for practising.

|-
|| Slide: DOM
||
* The expansion of '''DOM''' is '''Document Object Model'''
* Each and every '''tab '''in a '''browser '''is a '''document'''.
* A''' document '''is an '''object'''.

|-
|| Slide: DOM
||
* 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'''

|-
|| Slide: DOM
||
* '''getElementById '''is a '''function '''in the '''document object'''.
* The '''function '''takes the '''HTML element ID '''as a '''parameter '''and
* Returns the '''element '''with the '''ID '''in the '''document'''

|-
|| Slide: DOM
||
* '''innerText '''and''' innerHTML '''are '''properties '''for the '''element '''in the '''DOM'''
* '''innerText''' returns the text value for the '''element'''
* '''innerHTML '''returns the '''HTML element value''' for the '''element'''

|-
|| Slide: DOM

https://developer.mozilla.org/en-US/docs/Web/API/Document

|| There are lots of '''functions''' and '''properties''' in the '''document''' '''object'''.

'''getElementById '''is just one example which I’m demonstrating in this tutorial.

To know more about the '''document object''', visit this link.

Let us take an example and understand this better.

|-
|| Show VS editor
|| Open '''Visual Studio Code editor'''

|-
|| <nowiki>[Editor] </nowiki>

Welcome Page -> Open Folder -> '''Practice-JS'''
|| In the '''editor, '''browse and open the folder “'''Practice-JS''' ”.

|-
|| <nowiki>[Editor] </nowiki>Click on

'''Explorer '''pane -> '''Practice-JS''' -> '''index.html'''
|| Under '''Practice-JS''' folder, open the file named '''index.html'''

The same is available in the '''Code files''' link for practice.

|-
|| <nowiki>[Editor] Type: </nowiki>

<nowiki><!DOCTYPE html></nowiki>

<nowiki><html lang="en"></nowiki>

<nowiki><head></nowiki>

<nowiki><title>Window and DOM Manipulations</title></nowiki>

<nowiki></head></nowiki>

<nowiki><body></nowiki>

<nowiki><h1 id="heading1"> Hello! </h1></nowiki>

<nowiki><ul id="unorderedList"> </ul></nowiki>

<nowiki><script src="main.js"> </script></nowiki>

<nowiki></body></nowiki>

<nowiki></html></nowiki>
|| In the '''index.html '''file, replace the '''code''' as shown.

In this code we have written a small '''HTML''' code and linked the''' JS file'''.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

<nowiki><h1 id="heading1"> Hello! </h1></nowiki>
|| Here, I have created a simple '''h1 element '''with id '''heading1.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>

<nowiki><ul id="unorderedList"> </ul></nowiki>
|| Here, I have created an '''unordered list element '''with id '''unorderedList.'''

We’ll use these '''elements''' while working with '''JS.'''

|-
|| 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.

|-
|| <nowiki>[Firefox] Press</nowiki>''' Ctrl + Shift + I'''

Point to the browser '''developer tools'''

Click on the '''Console''' tab
|| Now open the '''Browser developer tools''' panel and go to the '''console tab'''

|-
|| Switch to Editor
|| Switch back to the '''editor.'''

|-
|| <nowiki>[Editor] </nowiki>Click on

'''Explorer '''pane -> '''Practice-JS''' -> '''main.js'''
|| Under '''Practice-JS''' folder, open the file named '''main.js'''

|-
|| <nowiki>[Editor] Type: </nowiki>

console.log(document);
|| In the '''main.js '''file, replace the '''code''' as shown.

|-
|| <nowiki>[Editor]Highlight:</nowiki>

console.log(document);
|| Here, we '''log''' the '''document keyword.'''

'''document '''is an '''object '''as discussed earlier in the slide.

Let’s see what the '''object '''contains.

|-
|| Press: Ctrl + S
|| Save the file.

|-
|| Switch to '''Browser'''
|| Switch back to the '''browser.'''

|-
|| <nowiki>[Browser] [Console Tab]</nowiki>

Highlight:

'''HTML Document'''
|| We can see '''HTML Document''' displayed.

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

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 Document object'''.

For e.g. '''doctype''', '''documentElement '''etc.,

Scroll to the end of the '''object, '''and we can see '''<nowiki><prototype></nowiki>'''

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

Click:

▶''' '''<nowiki><prototype></nowiki>
|| Expand the '''<nowiki><prototype></nowiki>''' by clicking on the right arrowhead symbol.

|-
|| Only Narration
|| We can see '''getElementsByTagName, getElementsByClassName functions''' in the '''prototype''' '''object'''.

Let's use '''getElementById '''and see how it works.

|-
|| Switch to Editor
|| Switch back to the '''editor.'''

|-
|| <nowiki>[Editor] Type:</nowiki>

console.log(document.getElementById("heading1"));
|| Replace the code as shown in the '''main.js''' file.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

console.log(document.getElementById("heading1"));
|| 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.'''

|-
|| <nowiki>[Browser] [Console Tab]</nowiki>

Highlight:

<nowiki><h1 id="heading1"></nowiki>
|| Here, we can see that the '''function '''has '''returned''' the '''HTML element''' with '''heading1 '''as '''ID.'''

|-
|| <nowiki>[Browser] [Console Tab]</nowiki>

Click: ▶''' '''<nowiki><h1 id="heading1"></nowiki>
|| Expand the '''h1 element''' by clicking on the right arrowhead symbol.

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

<nowiki>[Highlight]:</nowiki>

h1#heading1

accessKey: ""

accessKeyLabel: ""

align: ""

assignedSlot: null

<nowiki>attributes: NamedNodeMap [ id="heading1" ]</nowiki>

baseURI: "about:newtab"

.. .. . . . . . .
|| If you have noticed this, even '''h1 element''' is an '''object '''with '''properties. '''

All the''' HTML elements''' have the same '''properties'''.

If we scroll down, we can see '''id property.'''

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

Highlight:

id="heading1"
|| The''' id property''' is having '''heading1 '''as value, which we have declared in the '''HTML''' file.

Just below '''id''' we have '''innerHTML '''and '''innerText '''properties which have '''‘Hello!’''' value assigned.

Let’s try to modify the text value to '''h1 element.'''

|-
|| Switch to Editor
|| Switch back to the '''editor.'''

|-
|| <nowiki>[Editor] Type:</nowiki>

document.getElementById("heading1").innerText = "Spoken Tutorials";
|| Replace the code as shown in the '''main.js''' file

|-
|| <nowiki>[Editor] Highlight:</nowiki>

document.getElementById("heading1").innerText = "Spoken Tutorials";
|| We know that, '''document.getElementById("heading1") returns''' a '''h1 element''' (which we already saw).

And, this '''element''' has an '''innerText '''property.

To that '''property''' we are assigning "'''Spoken Tutorials'''" as '''value '''using the '''assignment''' '''operator.'''

|-
|| Press: Ctrl + S
|| Save the file.

|-
|| Switch to Browser
|| Switch back to '''browser.'''

|-
|| <nowiki>[Browser] [Page] [Highlight];</nowiki>

'''Spoken Tutorials'''
|| We have successfully assigned a value to the '''h1 element''' having '''id heading1.'''

Hence''', Spoken Tutorials''' is displayed in the '''innerText '''and '''innerHTML properties '''of '''h1 tag'''

|-
|| Switch to Editor
|| Switch back to the '''editor.'''

|-
|| <nowiki>[Editor] Type:</nowiki>

<nowiki>document.getElementById("unorderedList").innerHTML = "<li>Spoken Tutorial</li>";</nowiki>
|| Replace the code as shown in the '''main.js''' file.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

<nowiki>document.getElementById("unorderedList").innerHTML = "<li> Spoken Tutorial </li>";</nowiki>
|| Here, we are getting the '''ul element''' declared in '''HTML file '''using '''document.getElementById("unorderedList")'''

As mentioned before, all the '''elements '''have similar properties''' '''as previously shown for''' h1.'''

'''ul''' '''element''' also has a property called '''innerHTML '''and we are assigning a '''HTML list item''' to it.

As we know in '''HTML''', the children for '''ul tag''' are '''li tags.'''

|-
|| Press: Ctrl + S
|| Save the file.

|-
|| Switch to Browser
|| Switch back to '''browser.'''

|-
|| <nowiki>[Browser] [Page] [Highlight];</nowiki>

'''Spoken Tutorial'''
|| We have successfully assigned a value to the '''ul element''' having '''id unorderedList'''

Hence''', Spoken Tutorials''' is displayed as an '''unordered list item.'''

|-
|| Only narration
|| With this we have come to the end of this tutorial.

Let’s summarize.

|-
|| Slide''': '''Summary''' '''
|| In this tutorial, we have learnt about:

* '''Window Object'''
* '''Document '''and''' DOM Manipulations '''in''' JS'''

|-
|| Slide: Assignment
|| As an assignment,

* Open the file '''MyPage.html'''
* Clear the existing code
* Add a '''h1 tag''' with '''id''' as '''heading1 '''for the text “'''HTML is Loaded!”'''

|-
|| Slide: Assignment
||
* Open the file '''assignment.js'''
* Clear the existing code
* Access the '''h1''' element using '''id '''
* Modify the text as - '''Both HTML and JS are Loaded!'''

|-
|| Slide: Assignment
||
* Open the file '''MyPage.html '''in a '''web''' '''browser'''.
* Observe the output in the '''browser'''

|-
|| '''Slide: '''About Spoken Tutorial Project
||
* The video at the following link summarises the Spoken Tutorial project.
* Please download and watch it

|-
|| '''Slide:''' Spoken tutorial workshops
||
* We conduct workshops using spoken tutorials and give certificates.
* For more details, please write to us.

|-
|| 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.

|}

@@ Line 3: / Line 3: @@
 Author: Jayesh Katta Ramalingaiah
-Domain Reviewer:
+Domain Reviewer: Ankita Maske
-Novice Reviewer:
+Novice Reviewer: Praveeen S.
 Keywords: JavaScript, HTML, document, window

@@ Line 240: / Line 240: @@
 |-
 || Only Narration
-|| We can see all the '''properties '''in the '''HTML Document object'''.
+|| We can see all the '''properties '''in the '''HTML object'''.
 For e.g. '''doctype''', '''documentElement '''etc.,

@@ Line 24: / Line 24: @@
 Learning Objectives
 || In this tutorial, we will learn about the:
 * '''Window Object '''
 * '''Document '''and '''DOM manipulations '''in''' JS'''
 |-
 || Slide: System Specifications
 || This tutorial is recorded using:
 * '''Ubuntu Linux''' OS version 18.04
 * '''Visual Studio Code''' version 1.51.1 ('''code editor''')
@@ Line 45: / Line 39: @@
 || Slide : Pre-requisites
 || 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.
 |-
@@ Line 56: / Line 46: @@
 ||
 * The files used in this tutorial are available in the''' Code files''' link on this tutorial page.
-* Pls download and extract the file.
+* Pls download and extract the files.
 * Make a copy and then use them for practising.
 |-
@@ Line 67: / Line 55: @@
 * Each and every '''tab '''in a '''browser '''is a '''document'''.
 * 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'''.
 * The '''DOM '''represents the '''document '''with a '''logical tree'''
 |-
@@ Line 83: / Line 67: @@
 * '''getElementById '''is a '''function '''in the '''document object'''.
 * 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''' returns the text value for the '''element'''
+* '''innerText returns''' the text value for the '''element'''
-* '''innerHTML '''returns the '''HTML element value''' for the '''element'''
+* '''innerHTML returns''' the '''HTML element value''' for the '''element'''
-−
-−
 |-
@@ Line 121: / Line 101: @@
 |-
 || <nowiki>[Editor] </nowiki>
 Welcome Page -> Open Folder -> '''Practice-JS'''
 || In the '''editor, '''browse and open the folder “'''Practice-JS''' ”.
 |-
 || <nowiki>[Editor] </nowiki>Click on
 '''Explorer '''pane -> '''Practice-JS''' -> '''index.html'''
@@ Line 181: / Line 156: @@
 <nowiki><ul id="unorderedList"> </ul></nowiki>
-|| Here, I have created an '''unordered list element '''with id '''unorderedList.'''
+|| Here, I have created an '''unordered list element '''with '''id unorderedList.'''
@@ Line 261: / Line 236: @@
 Click: ▶ HTML document
 || Expand the '''HTML document''' by clicking on the right arrowhead symbol.
@@ Line 394: / Line 367: @@
 document.getElementById("heading1").innerText = "Spoken Tutorials";
-|| We know that, '''document.getElementById("heading1") returns''' a '''h1 element''' (which we already saw).
+|| We know that, '''document.getElementById("heading1") returns''' a '''h1 element'''.
@@ Line 473: / Line 446: @@
 || Slide''': '''Summary''' '''
 || In this tutorial, we have learnt about:
 * '''Window Object'''
 * '''Document '''and''' DOM Manipulations '''in''' JS'''
 |-
@@ Line 487: / Line 456: @@
 * Clear the existing code
 * Add a '''h1 tag''' with '''id''' as '''heading1 '''for the text “'''HTML is Loaded!”'''
 |-
@@ Line 497: / Line 464: @@
 * Access the '''h1''' element using '''id '''
 * Modify the text as - '''Both HTML and JS are Loaded!'''
 |-
@@ Line 505: / Line 470: @@
 * Open the file '''MyPage.html '''in a '''web''' '''browser'''.
 * Observe the output in the '''browser'''
 |-
@@ Line 513: / Line 476: @@
 * The video at the following link summarises the Spoken Tutorial project.
 * Please download and watch it
 |-
@@ Line 521: / Line 482: @@
 * We conduct workshops using spoken tutorials and give certificates.
 * For more details, please write to us.
 |-