Scribd
Upload
2 views

Unit 2 - DOM wt

The document provides an overview of JavaScript, focusing on DOM manipulation, event handling, and the integration of CSS with JavaScript. It includes examples of HTML structures, JavaScript functions for user interactions, and the use of JSON for data representation. Additionally, it discusses Dynamic HTML (DHTML) and its components, emphasizing the role of JavaScript in enhancing web page functionality.

Uploaded by

mathurathan2106
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Unit 2 - DOM wt

The document provides an overview of JavaScript, focusing on DOM manipulation, event handling, and the integration of CSS with JavaScript. It includes examples of HTML structures, JavaScript functions for user interactions, and the use of JSON for data representation. Additionally, it discusses Dynamic HTML (DHTML) and its components, emphasizing the role of JavaScript in enhancing web page functionality.

Uploaded by

mathurathan2106
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 62

JAVASCRIPT OBJECTS

Assigning Address
of Person to Object
X
JAVASCRIPT DOM Date : 13.09.2024
Value

1
2
3
<!DOCTYPE html>
<html> <script type="text/javascript">
<head> function getAdd() {
<title>DOM manipulation</title> const num1 = Number(document.getElementById("val1").value);
</head> const num2 = Number(document.getElementById("val2").value);
<body> const add = num1 + num2;
<label>Enter Value 1: </label> console.log(add);
<input type="text" id="val1" /> document.getElementById("result").innerHTML = "Addition : " + ad
<br /> document.getElementById("result").style.color = "red";
<br /> }
<label>Enter Value 2: </label> </script>
<input type="text" id="val2" /> </body>
<br /> </html>`
<button onclick="getAdd()">Click To Add</button>
<p id="result"></p>
1
2

3
<style>
</head>
/* unvisited link */ <body>
a:link { <p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
color: red; </body>
} </html>

/* visited link */
a:visited {
color: green;
}

/* mouse over link */


a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}
</style>
ACTIVITY – 1
HOT – QUESTION
Padding : 20px
<!DOCTYPE html>
<html>
<head> </head>
<style> <body>
/* This will change the color of the first paragraph in the body */
body > p:first-child { <p>This is some text. (First child of body)</p>
color: blue; <p>This is some text. (Second child of body)</p>
}
<div>
/* This will change the color of the first paragraph inside the div */ <p>This is some text. (First child of div)</p>
div > p:first-child { <p>This is some text. (Second child of div)</p>
color: green; </div>
}
</body>
/* This will change the color of the second paragraph inside the div */ </html>
div > p:nth-child(2) {
color: orange;
}
</style>
JavaScript HTML DOM Events
Reacting to Events onclick=JavaScript

1. When a user clicks the mouse


2. When a web page has loaded
3. When an image has been loaded
4. When the mouse moves over an element
5. When an input field is changed
6. When an HTML form is submitted
7. When a user strokes a key

a function is called from


the event handler:
HTML Event Attributes
ACTIVITY – 2 HTML EVENT
HOT QUESTION
DHTML stands for Dynamic Hypertext Markup language i.e., Dynamic HTML. DHTML with
JavaScript
Components of Dynamic
HTML
1. HTML 4.0
2. CSS HTML
3. JavaScript It defines the structure of a web page with various defined basic elements
4. DOM.
or tags.
CSS
CSS allows the web users or developers for controlling the style and
layout of the HTML elements on the web pages.
JavaScript
JavaScript is a scripting language which is done on a client-side. The
various browser supports JavaScript technology.
DOM
DOM is the document object model. It is a w3c standard, which is a
standard interface of programming for HTML.
1.<html>
2.<head>
3.<title>
4.DHTML with JavaScript
5.</title>
6.<script type="text/javascript">
7.function dateandtime()
8.{
9.alert(Date());
10.}
11.</script>
12.</head>
13.<body bgcolor="orange">
14.<font size="4" color="blue">
15.<center> <p>
16.Click here # <a href="#" onClick="dateandtime();"> Date and
Time </a>
17.# to check the today's date and time.
18.</p> </center>
19.</font>
20.</body>
21.</html>
1.<html> JavaScript and HTML
2. <body> DOM
3.<p>Enter the percentage of a Student:</p>
4.<input type="text" id="percentage">
5.<button type="button" onclick="checkGrade()">
6.Find Grade
7.</button>
8.<p id="demo"></p>
9.<script type="text/javascript">
10. function checkGrade() {
11. var x,p, text;
12. p = document.getElementById("percentage").value;
13. x=parseInt(p);
14. if (x>90 && x <= 100) {
15. document.getElementById("demo").innerHTML = "A1";
16. } else if (x>80 && x <= 90) {
17. document.getElementById("demo").innerHTML = "A2";
18. } else if (x>70 && x <= 80) {
19. document.getElementById("demo").innerHTML = "A3";
20. }
21. }
22. </script>
23. </body>
24.</html>
CSS with JavaScript in
1.<html> DHTML
2.<head>
3. <title>
4.getElementById.style.property example
5.</title>
6.</head>
7.<body>
8. <p id="demo"> This text changes color when click on the foll
owing different buttons. </p>
9. <button onclick="change_Color('green');"> Green </button>
10. <button onclick="change_Color('blue');"> Blue </button>
11.<script type="text/javascript">
12.
13.function change_Color(newColor) {
14. var element = document.getElementById('demo').style.color
= newColor;
15.}
16.</script>
17.</body>
18.</html>
DHTML
CSS

1.<html>
2.<head>
3.<title>
4.Changes current HTML element
5.</title>
6.</head>
7.<body>
8.<center>
9.<h1 onclick="this.style.color='blue'"> This is a JavaTpoint Sit
e </h1>
10.<center>
11.</body>
12.</html>
1.<html>
2.<head>
3. <title>
4.changes the particular HTML element example
5.</title>
6.</head>
7.<body>
8. <p id="demo"> This text changes color when click on the following different buttons. </p>
9. <button onclick="change_Color('green');"> Green </button>
10. <button onclick="change_Color('blue');"> Blue </button>
11.<script type="text/javascript">
12.function change_Color(newColor) {
13. var element = document.getElementById('demo').style.color = newColor; }
14.</script>
15.</body>
16.</html>
DHTML
Example of events: Events
1.Click a button.
2.Submitting a form.
3.An image loading or a web page loading, etc.
1.<html>
2.<head>
3.<title>
4.Example of onclick event
5.</title>
6.<script type="text/javascript">
7.function ChangeText(ctext)
8.{
9.ctext.innerHTML=" Hi JavaTpoint! ";
10.}
11.</script>
12.</head>
13.<body>
14.<font color="red"> Click on the Given text for changing it: <b
r>
15.</font>
16.<font color="blue">
17.<h1 onclick="ChangeText(this)"> Hello World! </h1>
18.</font>
19.</body>
20.</html>
1.<html>
2.<head>
3.<title>
4.Example of onsubmit event
5.</title>
6.</head>
7.<body>
8.<form onsubmit="Submit_Form()">
9.<label> Enter your name: </label>
10.<input type="text">
11.<label> Enter your Roll no: </label>
12.<input type="Number">
13.<input type="submit" value="submit">
14.</form>
15.<script type="text/javascript">
16.function Submit_Form()
17.{
18.alert(" Your form is submitted");
19.}
20.</script>
21.</body>
22.</html>
DHTML
1.<html> DOM
2.<head>
3. <title>
4.Example of DHTML DOM
5.</title>
6.</head>
7.<body>
8.<font color = "blue">
9. <p id="demo"> This text changes color when the page loaded
. </p>
10.</font>
11.<script type="text/javascript">
12.document.getElementById('demo').style.color = "red";
13.</script>
14.</body>
15.</html>
JSON - Introduction
JSON stands for JavaScript Object Notation

JSON is a text format for storing and transporting data

JSON is "self-describing" and easy to understand


person.name; person["name"];

person.name = "Gilbert"; person["name"] = "Gilbert";


https://www.w3schools.com/Js/js_json_files.asp

You might also like