DEV Community

loading...
Cover image for How to Embed JavaScript in Your HTML ??

How to Embed JavaScript in Your HTML ??

Hrushikesh41
I am Hrushikesh Kokardekar. One who loves to write code. Keen to learn new Things
・2 min read

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 👩‍💻👩‍💻👩‍💻

Discussion (15)

Collapse
lukeshiru profile image
LUKESHIRU • Edited

One thing to consider, you can also use <script type="module"></script> to have support for JS modules and the latest ES features (I might even say is the recommended way of doing it).

PS: I know you used VSCode, but the post doesn't have anything to do with VSCode, so probably you shouldn’t use the #vscode tag.

Collapse
hrushikesh41 profile image
Hrushikesh41 Author

Surely will look into it 🙂

Collapse
aheisleycook profile image
privatecloudev

i just use external

Collapse
hrushikesh41 profile image
Hrushikesh41 Author

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
Hrushikesh41 Author

True!!

Thread Thread
aheisleycook profile image
privatecloudev

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

Collapse
chrmc7 profile image
Chris ☕️

Thank you for sharing! Great read. 🙂 You can also embed JavaScript inside of HTML attributes like onclick, onhover, onerror, etc. However, external scripts are much cleaner.

Collapse
hrushikesh41 profile image
Hrushikesh41 Author

Yep external is always preferable

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
Hrushikesh41 Author

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
Hrushikesh41 Author

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
Hrushikesh41 Author

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