JavaScript/C4/Classes-and-Inheritance-in-JS/English - Revision history

Nancyvarkey at 05:36, 21 June 2021

2021-06-21T05:36:36Z

Pravin1389 at 15:16, 8 June 2021

2021-06-08T15:16:50Z

Nancyvarkey at 09:12, 31 May 2021

2021-05-31T09:12:53Z

Kr.jayesh: Created page with "Title of the script:Classes and Inheritance Author: Jayesh Katta Ramalingaiah Domain Reviewer: Novice Reviewer: Keywords: JavaScript, HTML, class, extends, methods, cons..."

2021-05-22T18:31:05Z

Created page with "Title of the script:Classes and Inheritance Author: Jayesh Katta Ramalingaiah Domain Reviewer: Novice Reviewer: Keywords: JavaScript, HTML, class, extends, methods, cons..."

New page

Title of the script:Classes and Inheritance

Author: Jayesh Katta Ramalingaiah

Domain Reviewer:

Novice Reviewer:

Keywords: JavaScript, HTML, class, extends, methods, constructor

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

|-
|| Slide: Title
|| Hello and welcome to the spoken tutorial on “'''Classes''' and '''Inheritance''' in''' JS'''”.

|-
|| Slide:

Learning Objectives
|| In this tutorial, we will learn about:

* '''Classes '''and
* '''Inheritance in JS'''

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

* '''Ubuntu Linux''' OS version 18.04
* '''Visual Studio Code''' version 1.45.0 ('''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: Class
|| What are '''classes?'''

* '''Classes''' are '''templates''' for creating '''objects'''
* '''Class declarations''' are not '''hoisted'''
* '''Classes''' have ‘'''this’ context'''
* '''constructor''', '''variables '''and '''methods '''can be '''declared''' inside the '''class'''

|-
|| Only Narration
|| Now, let us take an example and understand '''classes''' better.

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

|-
|| <nowiki>[Editor] </nowiki>Welcome Page -> Open Folder -> '''Practice-JS '''->''' index.html & main.js'''

|| Then open the files '''index.html''' and '''main.js''' as explained in the earlier tutorials.

For this demonstration, I have already opened the same.

These files are available in the '''Code files''' link for practice.

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

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

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

<nowiki><head></nowiki>

<nowiki><title> Class and Inheritance </title></nowiki>

<nowiki></head></nowiki>

<nowiki><body></nowiki>

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

<nowiki></body></nowiki>

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

|-
|| Press: Ctrl + S

Press: Alt + L and Alt + O
|| Save the file and Start the '''Live server'''.

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

Point to the browser '''Console''' tab
|| In the web browser, open the '''Browser developer tools''' panel and go to the '''console tab'''.

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

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

class Animal {

constructor(name) {

this.name = name;

}

walk() {

console.log(this.name + " can Walk!");

}

eat() {

console.log(this.name + " can Eat!");

}

sleep() {

console.log(this.name + " can Sleep!");

}

}

const a1 = new Animal("Lion");

console.log(a1);

a1.eat();
|| In the '''main.js '''file, replace the '''code''' as shown.

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

class Animal
|| To '''declare''' a '''class''', we use the''' keyword class '''followed by the '''class '''name.

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

constructor(name)
|| '''Constructor method''' is '''declared''' using the '''constructor keyword'''.

It’s similar to the '''constructor function''', which we covered earlier when we learnt about '''functions'''.

NOTE: '''constructor '''is an '''inbuilt function '''in '''JS''', which accepts any number of '''parameters'''.

Here, every '''class '''will have some '''private variables'''

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

constructor(name) {

this.name = name;

}
|| Those values are '''bound '''in the '''constructor'''.

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

walk() {

console.log(this.name + " can walk!");

}

eat() {

console.log(this.name + " can eat!");

}

sleep() {

console.log(this.name + " can sleep!");

}
|| Here, I have '''declared''' 3 different '''methods''': '''walk, eat '''and '''sleep.'''

A '''method '''is similar to a '''function '''and is a part of the '''class.'''

We don’t need any '''keyword '''to create a '''method'''.

Only the '''method '''name is enough.

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

console.log(this.name + " can Eat!");
|| Inside every '''method''', I have just '''logged''' a '''statement.'''

As '''methods''' are part of the '''class, this''' refers to '''class.'''

'''this.name''' refers to the '''name bound '''in the '''constructor'''.

To append '''strings''', we use the '''plus''' operator.

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

const a1 = new Animal("Lion");
|| Here, we’re doing something similar to the way of '''executing''' a '''constructor''' '''function'''.

We '''execute''' the '''Animal class '''in the same way.

On '''executing Animal '''here, the '''constructor '''in '''Animal class '''will be '''executed'''.

The '''parameter''' '''Lion '''which is '''passed''' here, is the '''name''' in the '''constructor'''.

You are already aware that the '''constructor function returns''' an '''object'''.

So '''a1 variable '''will have an '''object'''.

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

console.log(a1);
|| To verify that I’m '''logging a1'''.

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

a1.eat();
|| Internally '''a1 object '''will have the '''prototypes''': '''walk, eat '''and '''sleep.'''

So, here, I’m '''executing, a1.eat(); '''to verify the access to '''prototypes'''.

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

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

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

<nowiki>[Click on ▶ icon beside Object and again click on </nowiki>▶ icon beside prototype]

Highlight:

{…}

name: "Lion"

<nowiki><prototype>: {…}</nowiki>

constructor: class Animal { constructor(name) }

eat: function eat()

sleep: function sleep()

walk: walk()
|| Here, we can verify that when the '''class '''was '''executed, '''the '''object '''has been '''returned'''.

And the '''object '''internally has '''prototypes''': '''eat''', '''sleep '''and '''walk'''.

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

'''Lion can Eat!'''
|| On '''executing''' the '''eat method''', we see '''Lion can eat '''being printed.

Here, '''this.name''' refers to '''Lion.'''

This is because '''Lion''' was the '''name passed''' while '''executing''' the '''class constructor.'''

|-
|| Slide: Inheritance
|| Technically, '''Inheritance '''is a concept of '''inheriting''' the parent''' class properties'''.

In '''JS''', we do that using '''extends keyword.'''

When using '''extends '''to invoke the '''parent''' '''class constructor, '''we need to use '''super keyword.'''

|-
|| Only Narration
|| Now, let us take an example and understand '''Inheritance''' better.

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

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

class Animal {

constructor(name) {

this.name = name;

}

walk() {

console.log(this.name + " can Walk!");

}

eat() {

console.log(this.name + " can Eat!");

}

sleep() {

console.log(this.name + " can Sleep!");

}

}

class Human extends Animal {

constructor(name) {

super(name);

}

think() {

console.log(this.name + "can Think!");

}

}

const a1 = new Animal("Lion");

console.log(a1);

a1.eat();

const h1 = new Human("Jayesh");

console.log(h1);

h1.eat();
|| In the '''main.js '''file, replace the '''code''' as shown.

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

class Animal {

constructor(name) {

this.name = name;

}

walk() {

console.log(this.name + " can Walk!");

}

eat() {

console.log(this.name + " can Eat!");

}

sleep() {

console.log(this.name + " can Sleep!");

}

}
|| I have not changed anything in the '''Animal class'''.

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

const a1 = new Animal("Lion");

console.log(a1);

a1.eat();
|| And, there's no change in this part too.

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

class Human extends Animal {

constructor(name) {

super(name);

}

think() {

console.log(this.name + "can Think!");

}

}
|| Here, I have '''declared''' a '''class''' '''Human.'''

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

class Human extends Animal
|| I’m '''extending''' the '''Human class''' with '''Animal, '''to '''inherit''' all the '''properties''' of '''Animal.'''

A '''Human''' can also '''eat''', '''sleep '''and '''walk.'''

So, instead of replicating everything in '''Human class '''again, I '''extend''' it with the '''Animal class'''.

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

constructor(name) {

super(name);

}
|| Let’s look inside the '''constructor'''.

I '''pass name''' because a '''Human '''will also have a '''name.'''

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

super(name);
|| It’s not necessary for me to '''bind '''the '''variable '''again.

Instead, I '''pass''' the '''name '''to '''super method'''.

It’s an '''inbuilt method''' in '''JS, '''which '''executes''' the parent '''class constructor.'''

Here, as we have '''extended''' the '''Human class '''with '''Animal, '''so '''Animal '''is the parent '''class'''.

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

think() {

console.log(this.name + "can Think!");

}
|| If there are any specific '''functions '''which '''Human '''need to have, it’s written inside the '''Human class.'''

Here, I have '''declared''' a '''think method''', because a '''Human '''can '''think.'''

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

const h1 = new Human("Jayesh");
|| Here, I execute the '''Human class '''by''' passing Jayesh '''as '''name'''.

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

console.log(h1);
|| And to verify what '''Human class returns''', I’m '''logging h1''' here.

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

h1.eat();
|| To verify if '''h1''' can'''execute '''the''' Animal class method, '''I’m '''executing''' the '''Animal class eat method'''.

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

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

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

Highlight:

Object { name: "Lion" }

Lion can Eat!
|| Here, there is no change in the '''output'''.

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

<nowiki>[Click on ▶ icon beside Object and again click on </nowiki>▶ icon beside prototype, and again click on ▶ icon beside prototype]

Highlight:

{…}

name: "Jayesh"

<nowiki><prototype>: {…}</nowiki>

constructor: class Human { constructor(name) }

think: function think()

<nowiki><prototype>: {…}</nowiki>

constructor: class Animal { constructor(name) }

eat: function eat()

sleep: function sleep()

walk: function walk()
|| Observe here,''' h1''' has access to '''Human class constructor '''and '''methods.'''

Along with that, it even has access to '''Animal class methods'''.

This proves that we have inherited all the '''properties''' from the parent '''class'''.

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

Highlight:

'''Jayesh can Eat!'''
|| By '''executing''' the parent '''class method''', we can verify that '''h1 '''can '''execute''' the parent '''class method''' too.

Now let’s create another '''class '''and verify a deep level '''inheritance '''too.

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

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

class Animal {

constructor(name) {

this.name = name;

}

walk() {

console.log(this.name + " can Walk!");

}

eat() {

console.log(this.name + " can Eat!");

}

sleep() {

console.log(this.name + " can Sleep!");

}

}

class Human extends Animal {

constructor(name) {

super(name);

}

think() {

console.log(this.name + "can Think!");

}

}

class Bird extends Human {

constructor(name) {

super(name);

}

fly() {

console.log(this.name + " can Fly!");

}

}

const a1 = new Animal("Lion");

console.log(a1);

a1.eat();

const h1 = new Human("Jayesh");

console.log(h1);

h1.eat();

const b1 = new Bird("Pigeon");

console.log(b1);

b1.think();

b1.eat();
|| In the '''main.js '''file, replace the '''code''' as shown.

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

class Animal {

constructor(name) {

this.name = name;

}

walk() {

console.log(this.name + " can Walk!");

}

eat() {

console.log(this.name + " can Eat!");

}

sleep() {

console.log(this.name + " can Sleep!");

}

}

class Human extends Animal {

constructor(name) {

super(name);

}

think() {

console.log(this.name + "can Think!");

}

}
|| I have not changed anything in '''Animal '''or '''Human classes'''.

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

const a1 = new Animal("Lion");

console.log(a1);

a1.eat();

const h1 = new Human("Jayesh");

console.log(h1);

h1.eat();
|| And there's no change in this part too.

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

class Bird extends Human {

constructor(name) {

super(name);

}

fly() {

console.log(this.name + " can Fly!");

}

}
|| Here, I have created a '''class''' '''Bird.'''

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

class Bird extends Human
|| And '''extended''' it to the '''Human class.'''

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

constructor(name) {

super(name);

}
|| On invoking the '''super method''' in the '''constructor, '''It invokes the '''Human class constructor.'''

And, since '''Human class '''is '''extended''', '''Animal class constructor '''will also be '''called'''.

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

fly() {

console.log(this.name + " can Fly!");

}
|| '''Birds '''have the ability to '''fly '''and along with that they can '''eat''', '''sleep''', '''walk '''and '''think.'''

So, I have added a '''fly method.'''

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

const b1 = new Bird("Pigeon");
|| Here, I’m invoking the '''Bird class '''by''' passing Pigeon '''as '''name.'''

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

console.log(b1);
|| I’m '''logging b1 '''to verify what is being '''returned'''.

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

b1.think();
|| To check whether I have access to '''Human class, '''I’m '''executing '''the '''Human class method'''.

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

b1.eat();
|| To check whether I have access to '''Animal class, '''I’m '''executing '''the '''Animal class method'''.

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

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

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

Highlight:

Object { name: "Lion" }

Lion can Eat!

Object { name: "Jayesh" }

Jayesh can Eat!
|| Here, there’s no change in the output.

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

Highlight:

<nowiki>[Click on ▶ icon beside Object and again click on </nowiki>▶ icon beside prototype, and again click on ▶ icon beside prototype, and again click on ▶ icon beside prototype]

{…}

name: "Pigeon"

<nowiki><prototype>: {…}</nowiki>

constructor: class Bird { constructor(name) }

fly: function fly()

<nowiki><prototype>: {…}</nowiki>

constructor: class Human {

constructor(name) }

think: function think()

<nowiki><prototype>: {…}</nowiki>

constructor: class Animal { constructor(name) }

eat: function eat()

sleep: function sleep()

walk: function walk()
|| Now observe here, we have access to '''Bird class, Human class '''and '''Animal class '''too.

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

Highlight:

'''Pigeon can Think!'''
|| The '''Human class method''' is also '''executed''' without any errors.

Thus we verify that '''b1''' can '''execute''' the '''Human class method''' too.

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

Highlight:

'''Pigeon can Eat!'''
|| The '''Animal class method''' is also '''executed''' without any errors.

Hence we verify''' b1''' can '''execute''' the '''Animal class method''' too.

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

Let’s summarize.

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

* '''Classes '''and
* '''Inheritance '''in '''JS'''

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

* Open the file '''assignment.js''' which you have created earlier.
* Clear the existing code.
* Create a '''class Car'''
* Create the '''methods engine '''and '''wheels '''in the '''class''' '''Car'''

|-
|| Slide: Assignment
||
* Create a '''class '''called '''ElectricCar '''and inherit the '''properties '''of '''Car class'''
* Create a '''method battery '''in the '''class''' '''ElectricCar'''
* '''Log''' the '''method''' name in all the three '''methods'''

|-
|| Slide: Assignment
||
* Create an '''object ec1 '''using '''ElectricCar '''and then '''execute Car methods''' using '''ec1'''
* Open the file '''MyPage.html''' in a '''web browser'''.
* Observe the output in the '''browser’s console.'''

|-
|| 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 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, class, extends, methods, constructor

@@ Line 46: / 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 290: / Line 290: @@
 |-
 || Press: Ctrl + S
-|| Save the file.
+Switch to '''Browser'''
+|| Save the file and switch back to the '''browser.'''
-|-
-|| Switch to '''Browser'''
-|| Switch back to the '''browser.'''
 |-
@@ Line 346: / Line 343: @@
 |-
 || Only Narration
-|| Now, let us take an example and understand '''Inheritance''' better.
+|| Let us take an example and understand '''Inheritance''' better.
 |-
@@ Line 569: / Line 566: @@
 |-
 || Press: Ctrl + S
-|| Save the file.
+Switch to '''Browser'''
+|| Save the file and switch back to the '''browser.'''
-|-
-|| Switch to '''Browser'''
-|| Switch back to the '''browser.'''
 |-
@@ Line 894: / Line 888: @@
 |-
 || Press: Ctrl + S
-|| Save the file.
+Switch to '''Browser'''
+|| Save the file and switch back to the '''browser.'''
-|-
-|| Switch to '''Browser'''
-|| Switch back to the '''browser.'''
 |-

@@ Line 24: / Line 24: @@
 Learning Objectives
 || In this tutorial, we will learn about:
 * '''Classes '''and
 * '''Inheritance in JS'''
 |-
 || Slide: System Specifications
 || This tutorial is recorded using:
 * '''Ubuntu Linux''' OS version 18.04
 * '''Visual Studio Code''' version 1.45.0 ('''code editor''')
@@ Line 45: / Line 39: @@
 || 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.
 |-
@@ Line 58: / Line 48: @@
 * Pls download and extract the file.
 * Make a copy and then use them for practising.
 |-
@@ Line 69: / Line 57: @@
 * '''Classes''' have ‘'''this’ context'''
 * '''constructor''', '''variables '''and '''methods '''can be '''declared''' inside the '''class'''
 |-
@@ Line 131: / Line 117: @@
 Point to the browser '''Console''' tab
-|| In the web browser, open the '''Browser developer tools''' panel and go to the '''console tab'''.
+|| In the '''web browser''', open the '''Browser developer tools''' panel and go to the '''Console tab'''.
 |-
@@ Line 350: / Line 336: @@
 |-
 || Slide: Inheritance
-|| Technically, '''Inheritance '''is a concept of '''inheriting''' the parent''' class properties'''.
+|| Technically, '''Inheritance '''is a concept of '''inheriting''' the '''parent class properties'''.
@@ Line 356: / Line 342: @@
-When using '''extends '''to invoke the '''parent''' '''class constructor, '''we need to use '''super keyword.'''
+When using '''extends '''to invoke the '''parent class constructor, '''we need to use '''super keyword.'''
 |-
@@ Line 544: / Line 530: @@
-Here, as we have '''extended''' the '''Human class '''with '''Animal, '''so '''Animal '''is the parent '''class'''.
+Here, as we have '''extended''' the '''Human class '''with '''Animal, '''so '''Animal '''is the '''parent class'''.
 |-
@@ Line 579: / Line 565: @@
 h1.eat();
-|| To verify if '''h1''' can'''execute '''the''' Animal class method, '''I’m '''executing''' the '''Animal class eat method'''.
+|| To verify if '''h1''' can'''execute ''' the''' Animal class method, '''I’m '''executing''' the '''Animal class eat method'''.
 |-
@@ Line 641: / Line 627: @@
-This proves that we have inherited all the '''properties''' from the parent '''class'''.
+This proves that we have inherited all the '''properties''' from the '''parent class'''.
 |-
@@ Line 650: / Line 636: @@
 '''Jayesh can Eat!'''
-|| By '''executing''' the parent '''class method''', we can verify that '''h1 '''can '''execute''' the parent '''class method''' too.
+|| By '''executing''' the '''parent class method''', we can verify that '''h1 '''can '''execute''' the '''parent class method''' too.
 Now let’s create another '''class '''and verify a deep level '''inheritance '''too.
 |-
@@ Line 1,015: / Line 997: @@
 || Slide''': '''Summary''' '''
 || In this tutorial, we have learnt:
 * '''Classes '''and
 * '''Inheritance '''in '''JS'''
 |-
 || Slide: Assignment
 || As an assignment:
 * Open the file '''assignment.js''' which you have created earlier.
 * Clear the existing code.
 * Create a '''class Car'''
 * Create the '''methods engine '''and '''wheels '''in the '''class''' '''Car'''
 |-
@@ Line 1,040: / Line 1,014: @@
 * Create a '''method battery '''in the '''class''' '''ElectricCar'''
 * '''Log''' the '''method''' name in all the three '''methods'''
 |-
@@ Line 1,049: / Line 1,021: @@
 * Open the file '''MyPage.html''' in a '''web browser'''.
 * Observe the output in the '''browser’s console.'''
 |-
@@ Line 1,057: / Line 1,027: @@
 * The video at the following link summarises the Spoken Tutorial project.
 * Please download and watch it
 |-
@@ Line 1,065: / Line 1,033: @@
 * We conduct workshops using spoken tutorials and give certificates.
 * For more details, please write to us.
 |-