JavaScript is a scripting language that can make webpages more interactive and dynamic. However, it has Java in its name but has nothing to do with Java. It is also referred to as a programming language because it contains mostly all the concepts of High-Level programming language. Using JavaScript, we can create a popup, alert messages, dropdown menus and many more other interactive functionalities. JavaScript considered as one of the most popular programming languages. It is mostly used for front end development but with the introduction of node.js JavaScript now also used at server side.
HTML <script> element or Internal JavaScript
In HTML we have a <script> tag that specify the JavaScript code for specific HTML document. JavaScript is a completely different language, so it follows some syntax and rules. Generally <script> define inside the <head> tag, but it can be put anywhere in the HTML document according to the page requirement.
Example
<!DOCTYPE html>
<html>
<head>
<title>Internal JavaScript</title>
<script type = "text/JavaScript">
function say_hello() {
alert("Hello TechGeekBuzz");
}
</script>
</head>
<body>
<button onclick="say_hello();"> Click Here </button>
</body>
</html>
External JavaScript or src attribute
If you want to define the same JavaScript functionality for various HTML documents, then it would be a great practice to define a separate JavaScript file and import it into the document. <script> tag has a
src
attribute that specifies the JavaScript file that needs to be imported in the HTML document.
Example
Create a separate file with .js extension.
script.js
function say_hello()
{
alert("Hello TechGeekBuzz");
}
HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Extarnal JavaScript</title>
<script src = "script.js" type = "text/javascript"/></script>
</head>
<body>
<button onclick="say_hello();"> Click Here </button>
</body>
</html>
JavaScript: Change the content and style of HTML element
In JavaScript, we have some builtin functions which are known as event and event handlers that can manipulate the element content and style.
Change Element Content.
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<script type = "text/JavaScript">
function change_content()
{
document.getElementById("change").innerHTML = "Hello TechGeekbuzz!";
}
</script>
</head>
<body>
<p id ="change">Hello TGB!!</p>
<button onclick="change_content();"> Click Here </button>
</body>
</html>
Change Element style
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<script type = "text/JavaScript">
function change_style() {
document.getElementById("change").style.color = "red";
}
</script>
</head>
<body>
<p id ="change">Hello TGB!!</p>
<button onclick="change_style();"> Click Here </button>
</body>
</html>
Summary
- JavaScript is a programming language.
- The code of javascript must be mentioned inside the <script> element.
- To import an external JavaScript file in the document, we need to specify the file name using the src attribute.
- JavaScript can select the HTML element and manipulate its content.
- JavaScript can also alter the styling of an element.