The best way for you to understand Javascript is through Examples. There’s nothing better than seeing what codes perform what actions and learning how to apply them in different situations. This page will contain some examples explaining the basic concept of Javascript.
You can take inspiration from the examples on this page and then experiment on your own.
Javascript provides a programmer with three places to input the Javascript code. The head tag, body tag, and the external JS file. JS is a short form for Javascript, and It’ll be used multiple times on this page, so get used to it.
The first JS example is this:
<script type="text/javascript">
document.write("TechStack Loves Javascript. And, you should too");
</script> Now, let’s look at some of the elements used in that simple line of code and what they mean.
- The “text/javascript” tag is an element that gives information to your web browser about the data.
- The “script” tag is unique and is used to establish the fact that we’re using Javascript.
- Lastly, the “document.write” with a custom text in brackets means we showed dynamic content via Javascript. There’s more to this element, and It’ll be explained later.
We’ll now look at instances where we input the Javascript code in the head tag, body tag, and the external Javascript file.
Javascript Example – Within The Head Tag
<html>
<head>
<script type="text/javascript">
function msg(){
alert("Hey, I am a head tag example from Techstack");
}
</script>
</head>
<body>
<p>Other HTML Contents</p>
<form>
<input type="button" value="greet me" onclick="msg()"/>
</form>
</body>
</html> In this example, we created a function message. Therefore, you can see that the “function” tag was used as well as the “msg” element.
To call a function, you must first work on an event. For example, the onclick event is used to invoke the msg() function.
Javascript Example – Within the Body Tag
We used JavaScript to display dynamic material in the first example given on this page. Let’s look at a simple JS example that produces an alert dialog box.
<script type="text/javascript">
alert("Hello TechStack");
</script> Javascript Example – The External Javascript File
Before we check out the example, let us take a look at some of the advantages and disadvantages of a user creating an external Javascript file.
Advantages
- The code can be reused in multiple HTML files
- The code will be neater and reduced. Because we will only need to specify where the JS file is located
- It allows programmers to work with both Javascript and HTML without any issues
- It helps web developers reduce page load time
Disadvantages
- If there’s a hacker who wishes to get code from the website, they can get it from the URL of the Javascript file.
- The web browser will have to get another HTTP request to get the Javascript code.
- It is primarily useful when you have lots of lines of code. If you have very few lines of code, then you should use the internal Javascript code instead.
- If there is a change in the JS code, it may affect all its dependent files.
External Javascript codes have to be saved using the . JS extension. We also recommend that you embed all your JS codes into a single file so that the speed of your webpages will not be affected. Let’s create an external Javascript code that prints “Welcome to TechStack” into an alert dialog box.
TechstackMessage.js
function msg(){
alert("Welcome to TechStack");
} Let’s now embed our Javascript code into HTML. First, we’ll use the onclick function to call the JS function on a button click.
Index.html
<html> <head> <script type="text/javascript" src="TechstackMessage.js"></script> </head> <body> <p>Welcome to JavaScript</p> <form> <input type="button" value="click" onclick="msg()"/> </form> </body> </html>
