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 :
Output :
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 :
Output :
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)
Surely will look into it 🙂
i just use external
Yes that's preferable cause it helps to manage our files in a good manner
managing project files is key
True!!
root
\assets\ -< css and and js and imgs go here
other files routing and databases
You could also nest the script tag in the header tag with a defer attribute for the script to be loaded last
Yes
But how does the code looks like inside the separated js file? Sorry if I ask as I am really new to this. Thanks
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...
Thank you so much! You're so kind. I'll be looking forward to that upcoming post!😊
Sure. Will try to answer all your questions and explore you all to new topics 😊
Yep external is always preferable