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:





Related Articles
What is HTML JavaScript HTML JavaScript
How to use The HTML <script> Tag HTML JavaScript
How to create A Taste of JavaScript HTML JavaScript
How to create The HTML <noscript> Tag HTML JavaScript

Single Articles
Basic Example of A Taste of JavaScriptHTML JavaScript
Full Example of A Taste of JavaScriptHTML JavaScript
JavaScript can change attributes:HTML JavaScript

Read Full:
HTML JavaScript
Category:
Web Tutorial
Sub Category:
HTML JavaScript
Uploaded:
1 year ago
Uploaded by:
Admin
Views:
47


Reffered: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_script_attribute

Share on: