View source for JavaScript/C2/How-to--use-JS-in-HTML/English

Title of the script: How to use JS in HTML

Author: Jayesh Katta Ramalingaiah

Domain Reviewer: Ankita Maske

Novice Reviewer: Praveeen S.

Keywords: JavaScript, HTML, script, body



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

|-
|| Slide: Title
|| Hello and Welcome to the spoken tutorial on “'''How to use Javascript in HTML'''”.

|-
|| Slide: Learning Objectives
|| In this tutorial, we will learn about:
* The different approaches to use '''Javascript (JS)''' with '''HTML'''
* When to use each approach

|-
|| 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 have some basic knowledge on '''HTML'''
* Basic understanding of concepts of any programming language
* If not then please go through the '''HTML''' and any '''programming language''' series on this website.
* Also, you should have an internet connection to install the necessary packages

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

|-
|| Slide: Approaches to use JS with HTML
|| There are mainly two approaches to use '''JS '''with '''HTML.'''
* First approach is '''embedding JS '''in '''HTML'''
* Second approach is '''importing '''an external '''JS '''file.

|-
|| Slide: Embedding JS in HTML
|| 
* We need to write '''JS '''code in between '''script tags''' in the '''HTML '''file.
* The '''script tag''' should be written after the last '''HTML element''' in the '''body tag'''.

|-
|| Only Narration
|| Adding '''script tag''' after the last '''element''' in the '''body tag''' is a preferred way but not the only way.


This depends on when we want the '''JS '''to load.

|-
|| Point to the '''Practice-JS '''folder on '''Desktop'''
|| Let’s create a folder named '''Practice-JS''' on our '''Desktop. '''

|-
|| Open Visual Studio Code editor.
|| I will use '''Visual Studio Code editor '''for this demonstration'''.'''

|-
|| Slide IDE - Extension
|| 
* To make the development easier, we would be using an extension called '''Live Server''' in '''VS Code'''.
* It is free and easily installable. 
* This would help us in '''hot reload.'''
* This means that any code change is automatically reflected on the '''browser''' when we save the file.

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

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


Welcome Page ->

Open Folder ->

'''Practice-JS''' 
|| In the '''Welcome page, '''click on the '''Open folder link '''at the top left corner'''.'''


Browse and locate the folder “'''Practice-JS''' ”.


Then click on the '''OK''' button at the top right corner.

|-
|| <nowiki>[Editor] Click on the </nowiki>'''Extension''' icon on the left
|| Click on the '''Extensions '''icon in the left side '''activity bar.'''

|-
|| <nowiki>[Editor] [Extension Tab]:</nowiki>

Type: live server
|| In the '''search bar''', type “'''Live Server'''”. 


Click on the '''Install '''button adjacent to '''Live Server''' extension.

|-
|| Only Narration
|| The installation may take some time depending upon your '''internet''' speed.

|-
|| Close and reopen Visual Code Studio
|| After installation, restart the '''editor''' by closing and opening it again.

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

Click on '''add file icon'''
|| Go to the '''Explorer '''panel on the left hand side.


Click on the '''New file''' icon beside the '''Practice-JS folder''' name.


A '''place holder''' would be highlighted when clicked.

|-
|| <nowiki>[Editor] Type </nowiki>'''index.html'''
|| Type''' index.html''' as the file name. 


Make sure you name it as '''index '''only. 


This is because the '''server renders''' the '''index page''' by default. 

Press '''Enter'''.

The file '''index.html '''opens.

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


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

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

<nowiki><head></nowiki>

<nowiki><title>How to use JS in HTML</title></nowiki>

<nowiki></head></nowiki>

<nowiki><body></nowiki>

<nowiki><h1>Welcome to Spoken </nowiki><nowiki>Tutorials</h1></nowiki>

<nowiki><script></nowiki>

if (true) {

console.log("I'm inside if!");

} else {

console.log("I'm inside else!");

}

<nowiki></script></nowiki>

<nowiki></body></nowiki>

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


To save time, you could copy-paste the same from the '''Code files'''.


In this code we have written a simple '''HTML '''code having a welcome message and''' script tag'''.

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

|-
|| Press: Alt + L and Alt + O 



|| Now press the key combinations '''Alt + L''' and''' Alt + O.'''


The '''Live server''' gets started.


If the '''Live Server''' is not started, go to '''Extensions panel.'''


And check if you have installed '''Live Server''' properly.


Else reinstall it.

|-
|| Show firefox
|| The default '''browser '''will open automatically and a new '''tab '''opens.


In my case it is '''Firefox browser'''. You could use any '''browser'''.

|-
|| <nowiki>[Firefox] Point to </nowiki>'''Welcome to Spoken Tutorials'''
|| '''Welcome to Spoken Tutorials '''is displayed.

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


Point to the browser '''developer tools'''
|| Now press '''Ctrl + Shift + I''' keys together.


The '''Browser developer tools''' panel opens.

|-
|| <nowiki>[Firefox] Click on the </nowiki>'''Console''' tab
|| Now click on the '''console tab''' in the '''developer tools.'''

|-
|| <nowiki>[Firefox] </nowiki>Highlight 

'''I'm inside if!'''
|| You can see '''I'm inside if! '''printed in the '''console.'''


As you are running the '''live server''' - '''Live reload enabled''' message would also be displayed always.


We can ignore this.

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

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

<nowiki><script></nowiki>

<nowiki></script></nowiki>
|| Here we have used a''' script tag''' to '''embed JS code''' in an '''HTML '''file.


It’s always a good practice to use the '''script tag''' after the last '''element''' in the '''body tag'''.

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


if (true) {

console.log("I'm inside if!");

} else {

console.log("I'm inside else!");

}
|| We have written a simple '''if else condition''', where''' '''the '''if condition''' is always '''true''' and the '''if block''' gets executed.

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


console.log("I'm inside if!");
|| The '''console.log statement''' is used to print the message on the '''console'''.


Going forward we will be using '''console.log statements''' widely to see the output.

|-
|| Only narration
|| Next let us learn another approach.

|-
|| Slide: Importing External JS File
|| 
* We will create a new '''JS''' file, and write '''JS''' code in the file
* Then '''link''' the created '''JS''' file with '''HTML''' using '''script''' '''src''' '''tag'''.

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

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

Click on '''add file icon'''
|| In the '''Explorer '''panel on the left hand side, click on the '''New file icon''' beside the '''Practice-JS''' folder name.


A '''place holder''' would be highlighted when clicked.

|-
|| <nowiki>[Editor] Type </nowiki>'''main.js'''
|| Type''' main.js '''as the file name and press '''Enter'''


The file extension for '''JS '''files is '''.js '''


The file '''main.js '''opens.

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


if (true) {

console.log("I'm inside if!");

} else {

console.log("I'm inside else!");

}
|| In the '''main.js''' file, type the '''code''' as shown.


In this code we have written a simple''' if/else condition.'''

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

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


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

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

<nowiki><head></nowiki>

<nowiki><title>How to use JS in HTML</title></nowiki>

<nowiki></head></nowiki>

<nowiki><body></nowiki>

<nowiki><h1>Welcome to Spoken Tutorials</h1></nowiki>

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

<nowiki></body></nowiki>

<nowiki></html></nowiki>
|| Switch to the '''index.html''' file and replace the '''code''' as shown here.


In this code we have a welcome message along with the '''source''' to the '''JS file'''.

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

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

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


Highlight: '''I'm inside if!'''
|| Now, we can see the output, '''I'm inside if!'''

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

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


<nowiki><script src="main.js"></script></nowiki>
|| Here we have used a''' script tag''', with property '''src '''which takes the path to the '''JS '''file.


In our case both''' index.html''' and '''main.js''' are in the same '''folder'''.


So, we have simply mentioned the '''path''' as '''main.js'''

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


if (true) {

console.log("I'm inside if!");

} else {

console.log("I'm inside else!");

}
|| In the '''main.js '''file, we have written the same''' if else condition'''.


The''' if-condition''' is always '''true''' and the '''if block''' gets executed.

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

console.log("I'm inside if!");
|| The '''console.log statement''' is used to print the message on the '''console'''.

|-
|| Only Narration
|| Now, let’s conclude which is the better approach.

|-
|| Slide: Embedded approach
|| 
* In the '''embedded''' approach, we have written '''JS''' code in an '''HTML''' file using '''script''' '''tag'''
* This code is only used for that particular '''HTML''' file and cannot be reused in any other '''HTML''' file

|-
|| Slide: Importing External '''JS '''File
|| Whereas, in the second approach,
* We have written '''JS''' code by creating an external file and linking it to the '''HTML''' file.
* Using this approach, we can use the same '''JS''' code in different '''HTML''' files by just '''linking''' it.
* This solves the problem of writing the same code in different files so we can reuse the same.

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


Let us summarize.

|-
|| Slide''': '''Summary''' '''
|| In this tutorial, we have learnt:
* Different approaches to use '''JS''' with '''HTML'''
* And their implications in coding

|-
|| Slide: Assignment
|| As an assignment,
* Create a file named '''assignment.js'''
* Log '''A''' and '''B '''characters
* Create a file named '''MyPage.html''' 
* '''Link''' the '''assignment.js '''file to it
* 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: Answers for THIS Spoken Tutorial
|| 
* Do you have questions in THIS Spoken Tutorial?
* Please visit this site.
* Choose the minute and second where you have the question.
* Explain your question briefly.
* The Spoken Tutorial project will ensure an answer.
* You will have to register to ask questions.

|-
|| Slide : Forum for specific questions
|| 
* The Spoken Tutorial forum is for specific questions on this tutorial.
* Please do not post unrelated and general questions on them.
* This will help reduce the clutter.
* With less clutter, we can use these discussions as instructional material.

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

|}