DEV Community

Cover image for How to Embed JavaScript in Your HTML ??
Hrushikesh Kokardekar
Hrushikesh Kokardekar

Posted on

How to Embed JavaScript in Your HTML ??

How many of you like dynamic web pages ? Using HTML and CSS you can create and style static web page but you cannot perform actions on it. To make your web page dynamic JavaScript language is used.

JavaScript was created by Brendan Eich. It is a high-level, East to learn language use to create dynamic web pages. JavaScript is used to perform actions on elements like creating alert box on click of button. Performing some actions according to some condition by using if-else etc.

There are many such applications of JavaScript.

In JavaScript we select the element on which action is to performed by providing the id or class to it.

Let's see how to embed your JavaScript in your HTML.

Like CSS we have multiple ways to embed our JavaScript in your HTML.

Method - 1 Using script tag

Like we used style tag in the same file to add styling to our pages here we use script tag. Inside script tag we write our script and add JS in our HTML. You can see the code below. Don't worry about the script that I write inside the script tag.

Code :

Alt Text

Output :

Alt Text

You can see that without writing a single word inside the p tag how I printed "Welcome to JavaScript" . That's the uniqueness of JavaScript.

Let's see the second method

Method - 2 Creating Separate JavaScript file

Again like CSS we create a separate JavaScript file with extension .js . Now the question is how to link it in our HTML. So here again script tag is used. the src attribute is used to provide location of your JavaScript file. You can see the code below .

Code :

Alt Text

Output :

Alt Text

That's the Second Method of adding your JavaScript inside your HTML.

So that's it for today. Don't worry about the script that I wrote inside the script tag or js file.

In next post we will explore some more topic in JS .

Meet you next post 😊😊

Happy Coding 👩‍💻👩‍💻👩‍💻

Top comments (13)

Collapse
 
hrushikesh41 profile image
Hrushikesh Kokardekar

Surely will look into it 🙂

Collapse
 
aheisleycook profile image
privatecloudev

i just use external

Collapse
 
hrushikesh41 profile image
Hrushikesh Kokardekar

Yes that's preferable cause it helps to manage our files in a good manner

Collapse
 
aheisleycook profile image
privatecloudev

managing project files is key

Thread Thread
 
hrushikesh41 profile image
Hrushikesh Kokardekar

True!!

Thread Thread
 
aheisleycook profile image
privatecloudev

root
\assets\ -< css and and js and imgs go here
other files routing and databases

Collapse
 
kevincodemaster profile image
Kevin Ochieng

You could also nest the script tag in the header tag with a defer attribute for the script to be loaded last

Collapse
 
hrushikesh41 profile image
Hrushikesh Kokardekar

Yes

Collapse
 
juz14girl profile image
juz14girl • Edited

But how does the code looks like inside the separated js file? Sorry if I ask as I am really new to this. Thanks

Collapse
 
hrushikesh41 profile image
Hrushikesh Kokardekar

Don't be sorry. It's really nice to ask questions. You can see snip of my js file. In my upcoming post you will be more clear about the appearance of the code.

dev-to-uploads.s3.amazonaws.com/up...

Collapse
 
juz14girl profile image
juz14girl

Thank you so much! You're so kind. I'll be looking forward to that upcoming post!😊

Thread Thread
 
hrushikesh41 profile image
Hrushikesh Kokardekar

Sure. Will try to answer all your questions and explore you all to new topics 😊

Collapse
 
hrushikesh41 profile image
Hrushikesh Kokardekar

Yep external is always preferable