> For the complete documentation index, see [llms.txt](https://codingzonebd.gitbook.io/html-elements/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codingzonebd.gitbook.io/html-elements/html-javascript.md).

# HTML JavaScript

JavaScript makes HTML pages more dynamic and interactive.

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FpryyzPISsPbmcNa9CWUu%2Fimage.png?alt=media&amp;token=2884d0f5-53a6-4585-8398-8932e19a98b8" alt=""><figcaption></figcaption></figure>

{% code overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

### 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.

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

{% code overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

### A Taste of JavaScript

Here are some examples of what JavaScript can do:

{% code overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

{% code overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

{% code overflow="wrap" lineNumbers="true" %}

```markup
<!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 = "pic_bulboff.gif"
  } else {
    pic = "pic_bulbon.gif"
  }
  document.getElementById('myImage').src = pic;
}
</script>

<img id="myImage" src="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>
```

{% endcode %}

<div><figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FEGAmTlienlS15Bs2B5wi%2Fimage.png?alt=media&amp;token=055daed5-623b-43a4-8724-f2e964cee4fe" alt=""><figcaption><p>Light On</p></figcaption></figure> <figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FqiLVko6McnNgJ0bKjiRC%2Fimage.png?alt=media&amp;token=f776e33f-a1fa-4eeb-ba54-84090e911a78" alt=""><figcaption><p>Light Off</p></figcaption></figure></div>

### 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:

{% code overflow="wrap" lineNumbers="true" %}

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

{% endcode %}
