Horje
How to create A Taste of JavaScript

Here are some examples of what JavaScript can do:


Basic Example of A Taste of JavaScript

JavaScript can change content:
index.html
Example: HTML
<!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>

Output should be:

Basic Example of A Taste of JavaScript

Full Example of A Taste of JavaScript

<p>JavaScript can change styles:</p>
index.html
Example: HTML
<!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>

Output should be:

Full Example of A Taste of JavaScript

JavaScript can change attributes:

index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>Here, a JavaScript changes the value of the src (source) attribute of an image.</p>
<script>
function light(sw) { var pic; if (sw == 0) { pic = "https://itupto.com/uploads/demo/2023-09-17-13-49-19-pic_bulboff.gif" } else { pic = "https://itupto.com/uploads/demo/2023-09-17-13-58-06-pic_bulbon.gif" } document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="https://itupto.com/uploads/demo/2023-09-17-13-49-19-pic_bulboff.gif" 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>

Output should be:

JavaScript can change attributes:





Category :
Web Tutorial
Sub Category :
HTML JavaScript
Uploaded by :
Admin


Read Article
https://horje.com/learn/1434/reference