Web tech tute 3
Question 1)
function palindromeCheck(number) {
if (number < 0) {
return false;
}
let original = number;
let reversed = 0;
for (let temp = original; temp > 0;
temp = Math.floor(temp / 10)) {
reversed = reversed * 10 + temp % 10;
}
return number === reversed;
}
console.log(palindromeCheck(121));
console.log(palindromeCheck(12321));
console.log(palindromeCheck(12345));
--------------------------------------------------------------
Question 3)
<!DOCTYPE html>
<html>
<head>
<title>HTML Calculator</title>
<!-- For styling -->
<style>
table {
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
input[type="button"] {
width: 100%;
padding: 20px 40px;
background-color: green;
color: white;
font-size: 24px;
font-weight: bold;
border: none;
border-radius: 5px;
}
input[type="text"] {
padding: 20px 30px;
font-size: 24px;
font-weight: bold;
border: none;
border-radius: 5px;
border: 2px solid black;
}
</style>
</head>
<body>
<!-- Create table -->
<table id="calcu">
<tr>
<td colspan="3">
<input type="text" id="result">
</td>
<td><input type="button" value="c"></td>
</tr>
<tr>
<td><input type="button" value="1"></td>
<td><input type="button" value="2"></td>
<td><input type="button" value="3"></td>
<td><input type="button" value="/"></td>
</tr>
<tr>
<td><input type="button" value="4"></td>
<td><input type="button" value="5"></td>
<td><input type="button" value="6"></td>
<td><input type="button" value="*"></td>
</tr>
<tr>
<td><input type="button" value="7"></td>
<td><input type="button" value="8"></td>
<td><input type="button" value="9"></td>
<td><input type="button" value="-"></td>
</tr>
<tr>
<td><input type="button" value="0"></td>
<td><input type="button" value="."></td>
<td><input type="button" value="="></td>
<td><input type="button" value="+"></td>
</tr>
</table>
</body>
</html>
----------------------------------------------------------------------
QUESTION 4)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Font on Hover</title>
<style>
/* Initial style for the text */
.text {
font-family: Arial, sans-serif;
font-size: 24px;
}
</style>
</head>
<body>
<p class="text" id="textElement">Hover over this text to change its font!</p>
<script>
// Get the element
const textElement = document.getElementById('textElement');
// Set up event listeners for mouseover and mouseout
textElement.addEventListener('mouseover', function() {
// Change the font when the mouse hovers over the text
textElement.style.fontFamily = 'Courier New, monospace';
});
textElement.addEventListener('mouseout', function() {
// Reset the font when the mouse leaves the text
textElement.style.fontFamily = 'Arial, sans-serif';
});
</script>
</body>
</html>
----------------------------------------------------------------------
QUESTION 5
AJAX (Asynchronous JavaScript and XML) enhances web development by enabling
asynchronous data loading, which improves user experience, reduces page load times,
and boosts interactivity. Key benefits include:
1. **Improved User Experience**: Enables faster, seamless updates to web pages
without full reloads, providing smoother and more responsive interfaces.
2. **Reduced Server Load and Bandwidth**: Only necessary data is exchanged,
conserving resources and improving efficiency.
3. **Faster Performance**: Updates specific page parts without reloading, leading
to quicker response times.
4. **Real-Time Interactions**: Ideal for live updates (e.g., social media feeds,
chats) and dynamic content.
5. **Mobile Optimization**: Reduces data usage, enhancing performance on mobile
devices.
6. **Flexible Integration**: Works with various data formats (JSON, XML) and modern
web frameworks.
AJAX is essential for creating efficient, dynamic, and responsive web applications,
especially in Single Page Applications (SPAs).
-----------------------------------------------------------------------
QUESTION 6
Step 1: Event Triggers AJAX Call: AJAX calls are typically triggered by events on
the webpage,
such as a button click, text input, or page load.
Step 2: XMLHttpRequest Object: JavaScript creates an XMLHttpRequest object, which
is
configured with the server's endpoint URL, the HTTP method (usually GET or POST),
and any
required parameters.
Step 3: Sending the Request: Once the request is set up, it’s sent to the server
using
xhr.send().
Step 4: Server Processes Request: The server processes the request, performs the
necessary
actions (like querying a database), and sends back a response (often in JSON
format).
Step 5: JavaScript Handles the Response: JavaScript receives and processes the
response
using event listeners (e.g., onload). The page is then updated dynamically,
typically by
modifying the DOM.
-------------------------------------------------------------------------------
QUESTION 7
### IP Address and Its Classification
An **IP address** (Internet Protocol address) is a unique identifier assigned to
each device connected to a network. It enables devices to communicate with each
other over the internet or within a local network. There are two primary versions
of IP addresses: **IPv4** and **IPv6**.
- **IPv4 (Internet Protocol version 4)** is the most commonly used and consists of
32 bits, expressed as four decimal numbers separated by dots (e.g., 192.168.1.1).
- **IPv6** uses 128 bits, written as eight groups of hexadecimal numbers separated
by colons, and is designed to address the limited number of IPv4 addresses.
### IP Address Classification
IP addresses are classified into several categories based on their usage and the
range of addresses they represent:
1. **Class A**:
- Range: 1.0.0.0 to 127.255.255.255
- Default Subnet Mask: 255.0.0.0
- Used for large networks, with the first octet identifying the network.
2. **Class B**:
- Range: 128.0.0.0 to 191.255.255.255
- Default Subnet Mask: 255.255.0.0
- Used for medium-sized networks, with the first two octets identifying the
network.
3. **Class C**:
- Range: 192.0.0.0 to 223.255.255.255
- Default Subnet Mask: 255.255.255.0
- Used for smaller networks, with the first three octets identifying the
network.
4. **Class D** (Multicast):
- Range: 224.0.0.0 to 239.255.255.255
- Used for multicast communication, where data is sent to multiple devices.
5. **Class E** (Reserved):
- Range: 240.0.0.0 to 255.255.255.255
- Reserved for future use or research purposes and not used in regular
networking.
In addition to these classes, IP addresses can be further categorized into
**private** and **public** addresses:
- **Private IP addresses** are used within private networks (e.g., 192.168.x.x,
10.x.x.x) and are not routable on the internet.
- **Public IP addresses** are assigned by ISPs and are globally unique, used for
communication over the internet.
