Knowledge: Python 32

Web development Basics

JavaScript Interactions and HTML

JavaScript can read, change, and control HTML elements after the page loaded

(HTML creates the page, JavaScript modifies the page dynamically).

How does JavaScript interact with HTML?

JavaScript uses something called the DOM

(The Dom represents the HTML page as objects that JavaScript can access and modify)

Common things JavaScript Does with HTML

Read input values, change text, change styles, Show/hide elements. respond to user actions, update page without reload

Task1: Display the ID value

index.html

<!DOCTYPE html> 
<html lang="en">
        <title>Document</title>
        <script>
         function getvalue() {
          let val = document.getElementById("btn").innerText
          alert(val)
        }
        </script>
</head>
<body>
    <label id="lblName">Employee Name</label>
   <button id="btn" onclick="getvalue()">Click Me!</button>
</body>
</html>

Output: As you see here document.getElementById("btn").innerText

it will show the value of the ID

PS C:\Users\Administrator\Desktop\CCIT\PythonCourse\Day32> start index.html

document.getElementById("lblName").innerText

it will show the value of the ID, for This change, it will show the Employee Name

 let val = document.getElementById("lblname").innerText="Welcome to CCIT"

If you change above , you can override the label value to Welcome to ccit

Task2: For this task, what every the text you have enter the value when click display alert for that value

Above code is same just change below line

          let val = document.getElementById("txtName").value;

<body>
    <label id="lblName">Employee Name</label>
    <input type="text" id="txtName" />
   <button id="btn" onclick="getvalue()">Click Me!</button>
</body>

Output:

Task3:Style,Show hide text box

index.html

<!DOCTYPE html> 
<html lang="en">
        <title>Document</title>
        <script>
         function HideText() {
            document.getElementById("secname").style.display = "none";

        }
         function ShowText() {
            document.getElementById("secname").style.display = "block";

        }
        </script>
</head>
<body>
    <section id="secname">
    <label id="lblName" style="color: blue;">Employee Name</label>
    <input type="text" id="txtName" />
    </section>
   <button id="btnhide" onclick="HideText()">Hide</button>
   <button id="btnshow" onclick="ShowText()">Show</button>

</body>
</html>

Output:

PS C:\Users\Administrator\Desktop\CCIT\PythonCourse\Day32> start index.html

When Click Hide Button

When click Show button

Task3: showpop

index.html

<!DOCTYPE html> 
<html lang="en">
        <title>Document</title>

  <script>
         function myfunction() {
            var txt;
             if(confirm("Press a button!")) {
                txt = "You pressed OK!";
             } else {
                txt = "You pressed Cancel!";
             }
             document.getElementById("Demo").innerHTML = txt;
        }
        </script>      
</head>
<body>
    <h2>JavaScript Confirm Box</h2>
   <button id="btnshow" onclick="myfunction()">Try it</button>
   <p id="Demo"></p>

</body>
</html>

Output:

When click TryIt, shows popbox click Ok, text will display , when cancel , cancel text will display.

Introduction to AJAX

Asynchronous JavaScript and XML

AJAX Sending and Receiving data

--Thanks

Knowledge

Sunday, January 25, 2026

Python 32

No comments:

Post a Comment