HTML JAVASCRIPT
HTML - JavaScript
A script is a small piece of program that makes your website interactive and dynamic. For instance, a script could generate a pop-up alert box message, or provide a dropdown menu. You can also write various small functions, called event handlers using any of the scripting language and then you can trigger those functions using HTML attributes. only JavaScript and associated frameworks are being used by most of the web developers.
The HTML <script> Tag
The <script> tag is used to define a client-side script (JavaScript). The <script> element either contains script statements, or it points to an external script file through the <src> attribute.
Uses of JavaScript
- Image manipulation,
- form validation
- dynamic changes of content.
JavaScript can change HTML content using the getElementById
To select an HTML element, JavaScript most often uses the document.getElementById() method. This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo"
Example
<!DOCTYPE html>
<html>
<head >
<title> JavaScript</title>
<body>
<p id="demo">Hi</p>
<script> document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>
- JavaScript can change HTML styles using the getElementById
- JavaScript can change HTML attributes using the getElementById
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<body>
<!-- JavaScript can change HTML styles -->
<div id="demo">Hello World</div>
<img id="image" src="test.png" alt="">
<script>
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color= "red";
document.getElementById("demo").style.backgroundColor = "yellow";
</script>
<!-- JavaScript can change HTML attributes -->
<script>document.getElementById("image").src = "sample.jpg";</script>
<script>document.getElementById("image").style.width = "125px";</script>
</body>
</html>
The HTML noscript Tag
External JavaScript
All the examnples given above are all internal javascript, but When one function will be used for more than one HTML document it is best to seperate and keep that functionality in a separate JavaScript file and then include that file in your HTML documents. A JavaScript file will have extension as .js and it will be included in HTML files using <script> tag. Javascript proper>
Internal Script
You can write your script code directly into your HTML document. Usually we keep script code in header of the document using script tag, otherwise there is no restriction and you can put your source code anywhere in the document but inside script tag.
Example
<!DOCTYPE html>
<html>
<head >
<title>JavaScript</title>
<script type = "text/JavaScript">
alert("Hello, World");
</script>
</body>
</html>
