Scribd
Upload
25 views

HTML JavaScript

JavaScript can make HTML pages more dynamic and interactive by changing HTML content, styles, and attributes directly in the page. The <script> tag is used to define JavaScript code that can select HTML elements using methods like getElementById and then modify the element's innerHTML, style properties like font size and color, or attributes like an image's source. The <noscript> tag provides alternative content for users that have disabled scripts in their browser.

Uploaded by

VASANTHAKUMAR. A CSE 2020
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
25 views

HTML JavaScript

JavaScript can make HTML pages more dynamic and interactive by changing HTML content, styles, and attributes directly in the page. The <script> tag is used to define JavaScript code that can select HTML elements using methods like getElementById and then modify the element's innerHTML, style properties like font size and color, or attributes like an image's source. The <noscript> tag provides alternative content for users that have disabled scripts in their browser.

Uploaded by

VASANTHAKUMAR. A CSE 2020
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

HTML JavaScript

 JavaScript makes HTML pages more dynamic and interactive.

Example
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
The HTML <script> Tag

 The <script> tag is used to define a client-side script (JavaScript).


 The <script> element either contains scripting statements, or it
points to an external script file through the src attribute.
 Common uses for JavaScript are image manipulation, form
validation, and dynamic changes of content.
 To select an HTML element, JavaScript very often use the
document.getElementById(id) method.

This JavaScript example writes "Hello JavaScript!" into an HTML


element with id="demo":
Example
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>
JavaScript can change HTML content
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">This is a demonstration.</p>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML = "Hello
JavaScript!";
}
</script>
</body>
</html>
JavaScript can change HTML styles
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">JavaScript can change the style of an HTML
element.</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor =
"yellow";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
JavaScript can change HTML attributes
<!DOCTYPE html>
<html>
<body>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic = "bulb_off.jpg"
} else {
pic = "bulb_on.jpg"
}
document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="bulb_off.jpg" width="100" height="180">
<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>
</body>
</html>
The HTML <noscript> Tag

 The <noscript> tag is used to provide an alternate content for


users that have disabled scripts in their browser or have a browser
that doesn't support client-side scripts:

Example
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text written
inside the noscript element.</p>
</body>
</html>

You might also like