Tips (Total 4)

1. What is HTML JavaScript

2. How to use The HTML <script> Tag

3. How to create A Taste of JavaScript

4. How to create The HTML <noscript> Tag

# Tips-1) What is HTML JavaScript

JavaScript makes HTML pages more dynamic and interactive.

Full Example of HTML JavaScript

JavaScript makes HTML pages more dynamic and interactive.

index.html

Example: HTML

<!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>

Output should be:

# Tips-2) How to use The HTML <script> Tag

The HTML <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.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

To select an HTML element, JavaScript most often uses the document.getElementById() method.

Full Example of The HTML <script> Tag

This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo":

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h2>Use JavaScript to Change Text</h2>
<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script> 

</body>
</html>

Output should be:

# Tips-3) 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:

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:

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:

# Tips-4) How to create The HTML <noscript> Tag

The HTML <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support scripts:

Full Example of The HTML <noscript> Tag

index.html

Example: HTML

<!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>