Scribd
Upload
19 views

Web Technology

The document defines the Document Object Model (DOM) as the programming interface that allows JavaScript to programmatically access and manipulate elements and attributes within an HTML document. It provides diagrams of the DOM tree and DOM nodes for a sample HTML document. It also explains two common DOM manipulation methods - getElementsByTagName() and getgetElementById() - and provides example programs demonstrating their use. Finally, it discusses validation in development, defining automatic validation using JavaScript programs and manual validation through user interaction, and provides example programs for both.

Uploaded by

4AL20CS016ANIRUDH HN
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

Web Technology

The document defines the Document Object Model (DOM) as the programming interface that allows JavaScript to programmatically access and manipulate elements and attributes within an HTML document. It provides diagrams of the DOM tree and DOM nodes for a sample HTML document. It also explains two common DOM manipulation methods - getElementsByTagName() and getgetElementById() - and provides example programs demonstrating their use. Finally, it discusses validation in development, defining automatic validation using JavaScript programs and manual validation through user interaction, and provides example programs for both.

Uploaded by

4AL20CS016ANIRUDH HN
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

1a).

Define DOM and Draw both the DOM tree and DOM nodes diagrams for the following
script with
appropriate nodes and neat sketches
<html>
<head>
<title>My Text </title>
</head>
<body>
<p> AIET MIJAR WEBSITE IS
<a href= “aiet.org.in”>Click here</a>
</p>
</body>
</html>

The Document Object Model(DOM)


Java Script is almost always used to interact with the HTML document in which it is
contained. As such, there needs to be some way of programmatically accessing the
elements and attributes within the HTML.
This is accomplished through a programming interface (API) called the Document
Object Model (DOM).
DOM tree:
In the above diagram, each node represents a different element, attribute, or text node in the
HTML document.

In the above diagram, each node represents a different element or text node in the HTML
document. The arrows indicate the parent-child relationships between the nodes. The
attributes of the nodes are shown within parentheses.

1b)Elucidate GetElementByTagName() & getElementById() with example programs in


JavaScript
In JavaScript, `getElementsByTagName()` and `getElementById()` are two common methods
used to manipulate and interact with HTML elements. Here's an explanation of each method
along with example programs:

1. `getElementsByTagName()`: This method allows you to retrieve a collection of elements


based on their tag name. It returns an HTMLCollection, which is an array-like object containing
all the elements with the specified tag name.

Example program:

```javascript
<!DOCTYPE html>
<html>
<body>

<h1>Welcome to my website</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a third paragraph.</p>

<script>
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.color = "red";
}
</script>

</body>
</html>
```

In this example, `getElementsByTagName("p")` is used to select all the `<p>` elements on the
page. The loop then iterates over the collection and sets the text color of each paragraph to red.
2. `getElementById()`: This method allows you to retrieve an element with a specific ID attribute.
It returns a single element object.

Example program:

```javascript
<!DOCTYPE html>
<html>
<body>

<h1 id="header">Welcome to my website</h1>

<script>
var header = document.getElementById("header");
header.style.color = "blue";
</script>

</body>
</html>
```

In this example, `getElementById("header")` selects the element with the ID attribute "header"
(in this case, the `<h1>` tag). The script then changes the text color of the header to blue.

Both `getElementsByTagName()` and `getElementById()` are powerful methods that allow you
to access and manipulate elements on a webpage using JavaScript.

Get element by id another efficient program

<body>

<p>Click the button to get a time-based greeting:</p>

<button onclick="myFunction()">Try it</button>

<h1 id="demo"></h1>

<script>
function myFunction() {
var greeting;
var time = new Date().getHours();
if (time < 10) {
greeting = "Good morning !";
} else if (time < 20) {
greeting = "Good day !";
} else {
greeting = "Good evening !";
}
document.getElementById("demo").innerHTML = greeting;
}
</script>

</body>

2a)Define validation in the development phase. Write the programs for automatic
validation and manual validation in Java script

In the development phase, validation refers to the process of ensuring that the input data or
user interactions meet certain predefined criteria or constraints. It helps in maintaining data
integrity, preventing errors, and enhancing the overall user experience. Validation can be
performed automatically using JavaScript programs or manually through user interaction.
1. Automatic Validation: Automatic validation involves using JavaScript programs to
validate input data or user interactions without direct user involvement. It typically
includes validating form fields, user inputs, or data sent to the server.
Example program for automatic validation:
1. <form action="" method="post">
2.
3. <h3> Automatic Form Validation using javascript </h3>
4. <table>
5. <tr><td>Name :</td> <td><input type="text" name="fname"
required></td> </tr>
6. <tr><td>Address :</td><td> <input type="text" name="add1"
required></td></tr>
7. <tr><td>Locality:</td> <td><input type="text" name="add2"></td></tr>
8. <tr><td>City :</td> <td><input type="text" name="city"
required></td></tr>
9. <tr> <td></td><td><input type="submit" value="Submit"></td></tr>
10. </table>
11. </form>
2.Manual Validation: Manual validation involves validating user interactions or data
through user interaction, such as displaying validation messages in real-time as the user
interacts with the application.
Example program for manual validation:

Validate 1 :::
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>

<form name="myForm" action="https://www.w3schools.com/action_page.php"


onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>

Validate 2::
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
var y = document.forms["myForm"]["add1"].value;
var z = document.forms["myForm"]["add2"].value;
var l = document.forms["myForm"]["city"].value;
if (x == "" || y=="" || z=="" || l=="") {
alert("All data must be filled out");
return false;
}
else
alert("Congratulations! you have entered all the data intact");

}
</script>
</head>
<body>

<form name="myForm" action="" onsubmit="return validateForm()"


method="post">
<table>
</br><tr><td>Name :</td> <td><input type="text" name="fname"></td>
</tr>
</br><tr><td>Address :</td><td> <input type="text" name="add1"></td></tr>
</br><tr><td>Locality:</td> <td><input type="text" name="add2"></td></tr>
</br><tr><td>City :</td> <td><input type="text" name="city"></td></tr>
</br>
</br>
</br><tr> <td></td><td><input type="submit" value="Submit"></td></tr>
</table>
</form>

</body>

Validate 3 ::::

<html>
<body>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="100" max="300" required>


<button onclick="myFunction()">OK</button>

<p>If the number is less than 100 or greater than 300, an error message
will be displayed.</p>

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

<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (!inpObj.checkValidity()) {
document.getElementById("demo").innerHTML =
inpObj.validationMessage;
} else {
document.getElementById("demo").innerHTML = "Input OK";
}
}
</script>
</body>
2b)Elucidate the two types of Events in Java scripts with two example snippets in
each type
or
Explain two approaches to handle the Events in javascript with an example script

In JavaScript, there are two types of events: inline events and event listeners. Here's
an explanation of each type along with two example snippets for each type:

1. Inline Events: Inline events are defined directly in the HTML tags using event
attributes. When the specified event occurs, the associated JavaScript code is
executed.

Example snippet 1:

```html
<!DOCTYPE html>
<html>
<body>

<button onclick="alert('Hello, World!')">Click me</button>

</body>
</html>
```

In this example, an inline event is used with the `onclick` attribute on a button element.
When the button is clicked, the `alert('Hello, World!')` code is executed, displaying an
alert dialog with the message "Hello, World!".

Example snippet 2:

```html
<!DOCTYPE html>
<html>
<body>

<input type="text" onkeyup="myFunction()">

<script>
function myFunction() {
var input = document.querySelector("input[type='text']");
var output = document.getElementById("output");
output.innerHTML = input.value;
}
</script>

<p>Typed Text: <span id="output"></span></p>

</body>
</html>
```

In this example, an inline event is used with the `onkeyup` attribute on an input element.
When a key is released in the input field, the `myFunction()` code is executed. It
retrieves the input value and updates the text inside the `<span>` element with the id
"output" to reflect the typed text.

2. Event Listeners: Event listeners are set up using JavaScript code to listen for specific
events on HTML elements. They provide a more flexible and reusable way to handle
events.

Example snippet 1:

```html
<!DOCTYPE html>
<html>
<body>

<button id="myButton">Click me</button>

<script>
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Hello, World!");
});
</script>

</body>
</html>
```
In this example, an event listener is set up using the `addEventListener()` method. It
attaches a "click" event listener to the button element. When the button is clicked, the
provided anonymous function is executed, displaying an alert dialog with the message
"Hello, World!".

Example snippet 2:

```html
<!DOCTYPE html>
<html>
<body>

<input type="text" id="myInput">


<p>Typed Text: <span id="output"></span></p>

<script>
var input = document.getElementById("myInput");
var output = document.getElementById("output");

input.addEventListener("keyup", function() {
output.innerHTML = input.value;
});
</script>

</body>
</html>
```

In this example, an event listener is set up using the `addEventListener()` method. It


attaches a "keyup" event listener to the input element. Whenever a key is released in
the input field, the provided anonymous function is executed. It retrieves the input value
and updates the text inside the `<span>` element with the id "output" to reflect the typed
text.

Event listeners offer more flexibility as they allow you to attach multiple event handlers
to the same element and handle events dynamically.
Or
3a)Elucidate the client script execution and server script execution with the
neat sketches from the standard text book.

Client Script Execution:


Client-side scripting refers to scripts that are executed on the client's web
browser. Typically, these scripts are written in JavaScript and are
responsible for enhancing the interactivity and functionality of a web page.
When a client visits a web page, the client's browser downloads the HTML,
CSS, and JavaScript files associated with that page. The JavaScript code
is then executed on the client's machine.
Server Script Execution:
Server-side scripting refers to scripts that are executed on the server rather
than on the client's browser. These scripts are typically written in
server-side programming languages such as PHP, Python, Ruby, or
Node.js. Server-side scripts handle tasks related to processing data,
interacting with databases, generating dynamic content, and
communicating with other services.
3b)Explain the difference between $_GET and $_POST variables in PHP
with example scripts and sketches. Which is safer? Justify your answer
with output of the programs
In PHP, $_GET and $_POST are superglobal variables used to retrieve data from HTML forms
or URLs. Here's an explanation of the differences between them:
1. $_GET:
● $_GET is an associative array that retrieves data sent to the server as part of the
URL parameters or query string.
● It is useful for retrieving data from HTML forms that use the HTTP GET method
or for passing data through URLs.
● The data is visible in the URL and can be bookmarked or shared.
● It has a limit on the length of data that can be passed (typically around 2000
characters).
2. Example script using $_GET:
// form.html
<form action="process.php" method="GET">
<input type="text" name="name">
<input type="submit" value="Submit">
</form>

// process.php
$name = $_GET['name'];
echo "Hello, $name!";

1. In the above example, the user enters their name in the HTML form, and when
submitted, the data is appended to the URL as a query string parameter
(process.php?name=John). The $_GET variable is then used in process.php to retrieve
the value, and it is echoed as a greeting.
2. $_POST:
● $_POST is also an associative array that retrieves data sent to the server, but it
is done through the HTTP POST method.
● It is more secure than $_GET as the data is not visible in the URL, making it
suitable for sensitive information like passwords.
● It can handle larger data sets compared to $_GET.
3. Example script using $_POST:
// form.html
<form action="process.php" method="POST">
<input type="text" name="name">
<input type="submit" value="Submit">
</form>
// process.php
$name = $_POST['name'];
echo "Hello, $name!";

1. In this example, the HTML form uses the HTTP POST method to send data to
process.php. The $_POST variable retrieves the value of the name field, and it is echoed
as a greeting.
Which is safer?
● $_POST is generally considered safer than $_GET for sensitive data like passwords
since it doesn't expose the data in the URL.
● $_GET data is visible in the URL and can be manipulated or tampered with easily.
● However, it's important to note that neither $_GET nor $_POST provide inherent
security. Additional measures like input sanitization and validation should always be
implemented to ensure data security.
Justification with program output:
● The output of the programs using $_GET and $_POST would be the same, displaying
the greeting message with the provided name.
● The difference lies in the method of data transmission (URL parameters for $_GET and
HTTP POST for $_POST), which affects the visibility and security of the data.
● The output alone doesn't directly indicate the security aspect, but the fact that $_POST
data is not visible in the URL provides an additional layer of security compared to
$_GET.

4a)Define Type Juggling in PHP. Explain the type juggling property in PHP
with example snippets

In PHP, type juggling refers to the automatic and dynamic conversion of data
types during certain operations or comparisons. PHP performs implicit type
conversions to make the data types compatible, allowing operations between
different types without explicitly casting them.

Type juggling in PHP can lead to unexpected behavior if not handled carefully.
Here are some examples to illustrate the type juggling property in PHP:

Example 1:

```php
$number = "10";
$sum = $number + 5;

echo $sum; // Output: 15


```

In this example, the variable `$number` is initially assigned a string value `"10"`.
However, when the variable is used in an arithmetic operation (`$number + 5`),
PHP automatically converts the string to an integer and performs the addition.
The result is `15`.

Example 2:

```php
$bool = true;
$number = 10;

$result = $bool + $number;

echo $result; // Output: 11


```

In this example, a boolean value (`true`) is added to an integer (`$number`). PHP


converts the boolean value to an integer, where `true` is considered as `1` and
`false` as `0`. Thus, the addition operation results in `11`.

```php
$number = "10";
if ($number == 10) {
echo "Equal";
} else {
echo "Not Equal";
}
// Output: Equal
```

In this example, we have a string `$number` with the value `"10"`. When
comparing it with the integer `10` using the loose equality operator (`==`), PHP
performs type juggling and converts the string to an integer before the
comparison. The condition evaluates to `true`, and thus the "Equal" message is
printed.

It's important to note that type juggling in PHP can have unexpected results,
especially when comparing values with different data types. To avoid potential
issues, it's recommended to use strict comparison operators (`===` and `!==`)
that compare both value and type.

Overall, type juggling in PHP provides convenience by automatically converting


data types during operations. However, it's essential to be aware of how PHP
handles type conversions to avoid unintended consequences and ensure the
desired behavior of your code.

4b)Elucidate three types of Arrays used in PHP with programs of


traversing the Elements in each type

In PHP, there are three types of arrays commonly used:

1. Indexed Arrays:
Indexed arrays are arrays where each element is assigned a numeric index
starting from 0. These arrays are also known as numeric arrays. Elements in an
indexed array can be of any data type: integers, strings, booleans, or even other
arrays.

Example of traversing an indexed array:

```php
$fruits = array("apple", "banana", "orange");

// Method 1: Using for loop


for ($i = 0; $i < count($fruits); $i++) {
echo $fruits[$i] . "<br>";
}

// Method 2: Using foreach loop


foreach ($fruits as $fruit) {
echo $fruit . "<br>";
}
```

In the above example, we have an indexed array `$fruits` containing three


elements. We can traverse the elements using a for loop or a foreach loop. Both
methods will output each fruit on a new line.

2. Associative Arrays:
Associative arrays are arrays where each element is associated with a unique
key. Unlike indexed arrays, the keys can be strings instead of numeric indices.
Each key is mapped to a value, and elements can be accessed using their keys.

Example of traversing an associative array:

```php
$person = array(
"name" => "John",
"age" => 30,
"country" => "USA"
);

// Method 1: Using foreach loop


foreach ($person as $key => $value) {
echo $key . ": " . $value . "<br>";
}

// Method 2: Using array_walk function


function printKeyValue($value, $key) {
echo $key . ": " . $value . "<br>";
}

array_walk($person, "printKeyValue");
```

In the above example, we have an associative array `$person` with keys such as
"name," "age," and "country." We can traverse the elements using a foreach loop,
where the keys and values are accessed together. Alternatively, we can use the
`array_walk()` function, passing a custom function to print the key-value pairs.

3. Multidimensional Arrays:
Multidimensional arrays are arrays that contain other arrays as elements. These
arrays can be considered as arrays of arrays, forming a matrix or table-like
structure. Multidimensional arrays can have any number of dimensions, allowing
for complex data structures.

Example of traversing a multidimensional array:

```php
$matrix = array(
array(1, 2, 3),
array(4, 5, 6),
array(7, 8, 9)
);

// Method 1: Using nested for loop


for ($i = 0; $i < count($matrix); $i++) {
for ($j = 0; $j < count($matrix[$i]); $j++) {
echo $matrix[$i][$j] . " ";
}
echo "<br>";
}

// Method 2: Using nested foreach loop


foreach ($matrix as $row) {
foreach ($row as $element) {
echo $element . " ";
}
echo "<br>";
}

In the above example, we have a 2D array `$matrix` representing a matrix of


numbers. We can traverse the elements using nested for loops or nested foreach
loops. Both methods will print the elements of the matrix in a structured format.
These are the three common types of arrays used in PHP. Understanding how to
traverse elements within each type allows you to access and manipulate array
data effectively.

You might also like