Difference between revisions of "JavaScript/C2/How-to--use-JS-in-HTML/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "Title of the script: How to use JS in HTML Author: Jayesh Katta Ramalingaiah Domain Reviewer: Novice Reviewer: Keywords: JavaScript, HTML, script, body {| border =...")
 
 
(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, script, body
 
Keywords: JavaScript, HTML, script, body
Line 22: Line 22:
 
|| Slide: Learning Objectives
 
|| Slide: Learning Objectives
 
|| In this tutorial, we will learn about:
 
|| In this tutorial, we will learn about:
−
 
−
 
 
* The different approaches to use '''Javascript (JS)''' with '''HTML'''
 
* The different approaches to use '''Javascript (JS)''' with '''HTML'''
 
* When to use each approach
 
* When to use each approach
−
 
−
 
  
 
|-
 
|-
 
|| 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 43: Line 37:
 
|| Slide : Pre-requisites
 
|| Slide : Pre-requisites
 
|| To practice this tutorial,
 
|| To practice this tutorial,
−
 
−
 
 
* You should have some basic knowledge on '''HTML'''
 
* You should have some basic knowledge on '''HTML'''
 
* Basic understanding of concepts of any programming language
 
* Basic understanding of concepts of any programming language
 
* If not then please go through the '''HTML''' and any '''programming language''' series on this website.
 
* 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
−
 
+
  
 
|-
 
|-
Line 55: 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 practicing.
 
* Make a copy and then use them for practicing.
−
 
−
 
  
 
|-
 
|-
 
|| Slide: Approaches to use JS with HTML
 
|| Slide: Approaches to use JS with HTML
 
|| There are mainly two approaches to use '''JS '''with '''HTML.'''
 
|| There are mainly two approaches to use '''JS '''with '''HTML.'''
−
 
−
 
 
* First approach is '''embedding JS '''in '''HTML'''
 
* First approach is '''embedding JS '''in '''HTML'''
 
* Second approach is '''importing '''an external '''JS '''file.
 
* Second approach is '''importing '''an external '''JS '''file.
−
 
−
 
  
 
|-
 
|-
 
|| Slide: Embedding JS in HTML
 
|| Slide: Embedding JS in HTML
−
 
−
 
−
 
 
||  
 
||  
 
* We need to write '''JS '''code in between '''script tags''' in the '''HTML '''file.
 
* 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'''.
 
* The '''script tag''' should be written after the last '''HTML element''' in the '''body tag'''.
−
 
−
 
  
 
|-
 
|-
Line 103: Line 83:
 
* This would help us in '''hot reload.'''
 
* This would help us in '''hot reload.'''
 
* This means that any code change is automatically reflected on the '''browser''' when we save the file.
 
* This means that any code change is automatically reflected on the '''browser''' when we save the file.
−
 
−
 
  
 
|-
 
|-
Line 125: Line 103:
  
  
−
Then click on the '''Open''' button at the top right corner.
+
Then click on the '''OK''' button at the top right corner.
  
 
|-
 
|-
Line 138: Line 116:
  
  
−
Click on the '''Install '''button adjacent to the '''Live Server''' extension.
+
Click on the '''Install '''button adjacent to '''Live Server''' extension.
  
 
|-
 
|-
Line 170: Line 148:
 
This is because the '''server renders''' the '''index page''' by default.  
 
This is because the '''server renders''' the '''index page''' by default.  
  
 +
Press '''Enter'''.
  
 
The file '''index.html '''opens.
 
The file '''index.html '''opens.
Line 263: Line 242:
 
|| <nowiki>[Firefox] Click on the </nowiki>'''Console''' tab
 
|| <nowiki>[Firefox] Click on the </nowiki>'''Console''' tab
 
|| Now click on the '''console tab''' in the '''developer tools.'''
 
|| Now click on the '''console tab''' in the '''developer tools.'''
−
 
−
 
−
 
  
 
|-
 
|-
Line 322: Line 298:
 
|| Only narration
 
|| Only narration
 
|| Next let us learn another approach.
 
|| Next let us learn another approach.
−
 
−
 
−
 
  
 
|-
 
|-
Line 331: Line 304:
 
* We will create a new '''JS''' file, and write '''JS''' code in the 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'''.
 
* Then '''link''' the created '''JS''' file with '''HTML''' using '''script''' '''src''' '''tag'''.
−
 
−
 
  
 
|-
 
|-
Line 472: Line 443:
 
* In the '''embedded''' approach, we have written '''JS''' code in an '''HTML''' file using '''script''' '''tag'''
 
* 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
 
* This code is only used for that particular '''HTML''' file and cannot be reused in any other '''HTML''' file
−
 
−
 
  
 
|-
 
|-
 
|| Slide: Importing External '''JS '''File
 
|| Slide: Importing External '''JS '''File
 
|| Whereas, in the second approach,
 
|| Whereas, in the second approach,
−
 
−
 
 
* We have written '''JS''' code by creating an external file and linking it to the '''HTML''' file.
 
* 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.
 
* 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.
 
* This solves the problem of writing the same code in different files so we can reuse the same.
−
 
−
 
  
 
|-
 
|-
Line 496: Line 461:
 
|| Slide''': '''Summary''' '''
 
|| Slide''': '''Summary''' '''
 
|| In this tutorial, we have learnt:
 
|| In this tutorial, we have learnt:
−
 
−
 
 
* Different approaches to use '''JS''' with '''HTML'''
 
* Different approaches to use '''JS''' with '''HTML'''
 
* And their implications in coding
 
* And their implications in coding
−
 
−
 
  
 
|-
 
|-
 
|| Slide: Assignment
 
|| Slide: Assignment
 
|| As an assignment,
 
|| As an assignment,
−
 
−
 
 
* Create a file named '''assignment.js'''
 
* Create a file named '''assignment.js'''
 
* Log '''A''' and '''B '''characters
 
* Log '''A''' and '''B '''characters
Line 513: Line 472:
 
* '''Link''' the '''assignment.js '''file to it
 
* '''Link''' the '''assignment.js '''file to it
 
* Observe the output in the '''browser’s console'''.
 
* Observe the output in the '''browser’s console'''.
−
 
−
 
  
 
|-
 
|-
Line 521: Line 478:
 
* 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 529: Line 484:
 
* 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.
−
 
−
 
  
 
|-
 
|-
 
|| Slide: Answers for THIS Spoken Tutorial
 
|| Slide: Answers for THIS Spoken Tutorial
−
 
−
 
−
 
 
||  
 
||  
 
* Do you have questions in THIS Spoken Tutorial?
 
* Do you have questions in THIS Spoken Tutorial?
Line 544: Line 494:
 
* The Spoken Tutorial project will ensure an answer.
 
* The Spoken Tutorial project will ensure an answer.
 
* You will have to register to ask questions.
 
* You will have to register to ask questions.
−
 
−
 
  
 
|-
 
|-
Line 554: Line 502:
 
* This will help reduce the clutter.
 
* This will help reduce the clutter.
 
* With less clutter, we can use these discussions as instructional material.
 
* With less clutter, we can use these discussions as instructional material.
−
 
−
 
  
 
|-
 
|-

Latest revision as of 11:10, 21 June 2021

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


Visual Cue
Narration
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.
[Editor]


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.

[Editor] Click on the Extension icon on the left Click on the Extensions icon in the left side activity bar.
[Editor] [Extension Tab]:

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

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.

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

[Editor] Type:


<!DOCTYPE html>

<html lang="en">

<head>

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

</head>

<body>

<h1>Welcome to Spoken Tutorials</h1>

<script>

if (true) {

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

} else {

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

}

</script>

</body>

</html>

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.

[Firefox] Point to Welcome to Spoken Tutorials Welcome to Spoken Tutorials is displayed.
[Firefox] Press Ctrl + Shift + I


Point to the browser developer tools

Now press Ctrl + Shift + I keys together.


The Browser developer tools panel opens.

[Firefox] Click on the Console tab Now click on the console tab in the developer tools.
[Firefox] 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.
[Editor] Highlight:

<script>

</script>

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.

[Editor] Highlight:


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


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

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.

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

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


<!DOCTYPE html>

<html lang="en">

<head>

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

</head>

<body>

<h1>Welcome to Spoken Tutorials</h1>

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

</body>

</html>

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


Highlight: I'm inside if!

Now, we can see the output, I'm inside if!
Switch to Editor Switch back to the editor.
[Editor] Highlight:


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

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

[Editor] Highlight:


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.

[Editor] Highlight:

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.

Contributors and Content Editors

Kr.jayesh, Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=JavaScript/C2/How-to--use-JS-in-HTML/English&oldid=55274"