Chapters

JavaScript Tutorial

JavaScript Introduction

HTML Content can be changed with JavaScript, see example with code

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

Explanation of the code given above

This HTML and JavaScript code demonstrates how JavaScript can interact with and modify HTML content when a user clicks a button. Here’s an explanation of each part:

1. <!DOCTYPE html>

This declares the document type as HTML5, informing the browser that the following code is written in HTML.

2. <html> ... </html>

This is the root element that contains the entire HTML document.

3. <body> ... </body>

The body section contains the content that is visible on the web page, including text, buttons, and other elements.

4. <h2>What Can JavaScript Do?</h2>

This is a header that displays the text “What Can JavaScript Do?” on the webpage.

5. <p id="demo">JavaScript can change HTML content.</p>

This is a paragraph (<p>) with the id="demo". The id attribute uniquely identifies this element, so it can be targeted and modified by JavaScript. Initially, it displays the text “JavaScript can change HTML content.”

6. <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

This is a button element that triggers a JavaScript function when clicked. The onclick attribute is an event handler that runs JavaScript when the button is clicked.

  • document.getElementById("demo"): This JavaScript code targets the element with the id="demo", which is the paragraph.
  • .innerHTML = "Hello JavaScript!": This changes the content (innerHTML) of the selected element to "Hello JavaScript!".

When the button is clicked, the paragraph text changes from “JavaScript can change HTML content.” to “Hello JavaScript!”.

Summary:

  • The HTML creates a heading, a paragraph, and a button.
  • When the button is clicked, the JavaScript code changes the content of the paragraph from its initial text to “Hello JavaScript!”, demonstrating how JavaScript can dynamically update the webpage.

Attribute value of a HTML tag can be changed with JavaScript

Explanation:

Image Element (<img>):

This creates an image with id=”myImage”, and its src (source) attribute is set to display an image with dimensions 150×150 pixels.

Button:

<button type="button" onclick='document.getElementById("myImage").src="https://slidescope.com/wp-content/uploads/2022/07/slidescope-logo-digital-marketing-data-300x50.png"'>Change Image</button>

This button has an onclick event handler that, when clicked, runs a JavaScript function.
The function changes the src attribute of the image element (with id=”myImage”) to a new image source: https://slidescope.com/wp-content/uploads/2022/07/slidescope-logo-digital-marketing-data-300×50.png

Result:

Initially, the image shows a 150×150 placeholder.
When you click the “Change Image” button, the JavaScript changes the src attribute of the image to display a new image.

This demonstrates how JavaScript can change the attribute values of HTML elements dynamically.

This JavaScript introduction gives only a small picture of what JavaScript can do. You will more about JavaScript in upcoming chapters.

JavaScript Introduction

HTML Content can be changed with JavaScript, see example with code

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

Explanation of the code given above

This HTML and JavaScript code demonstrates how JavaScript can interact with and modify HTML content when a user clicks a button. Here’s an explanation of each part:

1. <!DOCTYPE html>

This declares the document type as HTML5, informing the browser that the following code is written in HTML.

2. <html> ... </html>

This is the root element that contains the entire HTML document.

3. <body> ... </body>

The body section contains the content that is visible on the web page, including text, buttons, and other elements.

4. <h2>What Can JavaScript Do?</h2>

This is a header that displays the text “What Can JavaScript Do?” on the webpage.

5. <p id="demo">JavaScript can change HTML content.</p>

This is a paragraph (<p>) with the id="demo". The id attribute uniquely identifies this element, so it can be targeted and modified by JavaScript. Initially, it displays the text “JavaScript can change HTML content.”

6. <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

This is a button element that triggers a JavaScript function when clicked. The onclick attribute is an event handler that runs JavaScript when the button is clicked.

  • document.getElementById("demo"): This JavaScript code targets the element with the id="demo", which is the paragraph.
  • .innerHTML = "Hello JavaScript!": This changes the content (innerHTML) of the selected element to "Hello JavaScript!".

When the button is clicked, the paragraph text changes from “JavaScript can change HTML content.” to “Hello JavaScript!”.

Summary:

  • The HTML creates a heading, a paragraph, and a button.
  • When the button is clicked, the JavaScript code changes the content of the paragraph from its initial text to “Hello JavaScript!”, demonstrating how JavaScript can dynamically update the webpage.

Attribute value of a HTML tag can be changed with JavaScript

Explanation:

Image Element (<img>):

This creates an image with id=”myImage”, and its src (source) attribute is set to display an image with dimensions 150×150 pixels.

Button:

<button type="button" onclick='document.getElementById("myImage").src="https://slidescope.com/wp-content/uploads/2022/07/slidescope-logo-digital-marketing-data-300x50.png"'>Change Image</button>

This button has an onclick event handler that, when clicked, runs a JavaScript function.
The function changes the src attribute of the image element (with id=”myImage”) to a new image source: https://slidescope.com/wp-content/uploads/2022/07/slidescope-logo-digital-marketing-data-300×50.png

Result:

Initially, the image shows a 150×150 placeholder.
When you click the “Change Image” button, the JavaScript changes the src attribute of the image to display a new image.

This demonstrates how JavaScript can change the attribute values of HTML elements dynamically.

This JavaScript introduction gives only a small picture of what JavaScript can do. You will more about JavaScript in upcoming chapters.