JavaScript/C2/How-to--use-JS-in-HTML/English

From Script | Spoken-Tutorial
Revision as of 23:08, 13 January 2021 by Kr.jayesh (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Title of the script: How to use JS in HTML

Author: Jayesh Katta Ramalingaiah

Domain Reviewer:

Novice Reviewer:

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.


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


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=54687"