Difference between revisions of "JavaScript/C3/Window-and-DOM-Manipulations-in-JS/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(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...")
 
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 file.
+
* 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''' 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>
 
|| <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 id '''unorderedList.'''
+
|| 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.
−
 
−
 
  
  
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''' (which we already saw).
+
|| 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.
−
 
−
 
  
 
|-
 
|-

Revision as of 10:50, 18 January 2021

Title of the script:Window and DOM Manipulations

Author: Jayesh Katta Ramalingaiah

Domain Reviewer:

Novice Reviewer:

Keywords: JavaScript, HTML, document, window


Visual Cue
Narration
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 files.
  • 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
[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


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

[Editor] Type:


<!DOCTYPE html>

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


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

[Editor] Highlight:


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

Here, I have created a simple h1 element with id heading1.
[Editor] Highlight:


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

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.
[Firefox] Press 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.
[Editor] Click on


Explorer pane -> Practice-JS -> main.js

Under Practice-JS folder, open the file named main.js
[Editor] Type:


console.log(document);

In the main.js file, replace the code as shown.
[Editor]Highlight:


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.
[Browser] [Console Tab]

Highlight:


HTML Document

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

For e.g. doctype, documentElement etc.,


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

[Browser] [Console Tab]:

Click:


▶ <prototype>

Expand the <prototype> 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.
[Editor] Type:


console.log(document.getElementById("heading1"));

Replace the code as shown in the main.js file.
[Editor] Highlight:


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.
[Browser] [Console Tab]

Highlight:


<h1 id="heading1">

Here, we can see that the function has returned the HTML element with heading1 as ID.
[Browser] [Console Tab]


Click: ▶ <h1 id="heading1">

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.


All the HTML elements have the same properties.


If we scroll down, we can see id property.

[Browser] [Console Tab]:

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.
[Editor] Type:


document.getElementById("heading1").innerText = "Spoken Tutorials";

Replace the code as shown in the main.js file
[Editor] Highlight:


document.getElementById("heading1").innerText = "Spoken Tutorials";

We know that, document.getElementById("heading1") returns a h1 element.


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.
[Browser] [Page] [Highlight];

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.
[Editor] Type:


document.getElementById("unorderedList").innerHTML = "<li>Spoken Tutorial</li>";

Replace the code as shown in the main.js file.
[Editor] Highlight:


document.getElementById("unorderedList").innerHTML = "<li> Spoken Tutorial </li>";

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.
[Browser] [Page] [Highlight];

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.

Contributors and Content Editors

Kr.jayesh, Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=JavaScript/C3/Window-and-DOM-Manipulations-in-JS/English&oldid=54729"