Class 12 - Web technology II
Introduction
Web technology refers to the tools and techniques that enable two or more computing devices to communicate over a network, specifically the Internet.
The term “web” encompasses the World Wide Web (WWW), which is the vast cyberspace containing webpages, documents, and other resources identified and located using URLs.
Technology encompasses the tools and techniques that make these resources accessible on the Web. This includes web browsers for viewing content, programming languages and frameworks for developing websites, databases for storing data at the back end, protocols for communication on the web, and multimedia elements.
Web development
Web development is the process of designing and developing websites that are hosted on the internet or intranet. Web development encompasses a wide range of activities, from creating simple static pages to developing complex applications such as web-based applications, social media sites, and e-commerce platforms.
Scripting Language:
JavaScript, a lightweight programming language, is a scripting language that can be inserted into any HTML page and executed by all web browsers. It enables interactivity on web pages and runs on the visitor’s computer, eliminating the need for constant downloads from the website. Notably, JavaScript and Java are distinct languages, differing in both concept and design.
Client-Side Scripting programming
A browser can perform tasks without relying on server-side (backend) processing. Essentially, client-side scripts are embedded within an HTML document.
Server-Side Scripting programming
A back-end language is used to connect the front-end with the database, enabling users to interact and communicate with the application.
JavaScript
JavaScript, a lightweight and interpreted programming language, is specifically designed for creating network-centric applications. It seamlessly integrates with Java, making it a powerful tool for developers. JavaScript’s ease of implementation stems from its integration with HTML, allowing for rapid development of dynamic web pages and applications. This tutorial serves as a comprehensive guide for JavaScript beginners, providing them with a solid foundation in understanding the fundamental functionalities of JavaScript.
Features
• JavaScript is a lightweight, interpreted programming language.
• Designed for creating network-centric applications.
• Complementary to and integrated with Java.
• Complementary to and integrated with HTML.
• It is case-sensitive language
Adding JavaScript to HTML
1. Embedding code: -
To add the JavaScript code into the HTML pages, we can use the <script>.....</script> tag of the HTML that wraps around JavaScript code inside the HTML program. Users can also define JavaScript code in the <body> tag (or we can say body section) or <head> tag, because it completely depends on the structure of the web page that the users use.
2. Inline code: -
Generally, this method is used when we have to call a function in the HTML event attributes. There are many cases (or events) in which we have to add JavaScript code directly e.g., OnMover event, OnClick, etc. Let’s see, with the help of an example, how we can add JavaScript directly in the HTML without using the <script>.... </script> tag.
Let’s look at the example.
3. External file: -
We can also create a separate file to hold the code of JavaScript with the (.js) extension and later incorporate/include it into our HTML document using the src attribute of the <script> tag. It becomes very helpful if we want to use the same code in multiple HTML documents. It also saves us from the task of writing the same code over and over again and makes it easier to maintain web pages.
In this example, we will see how we can include an external JavaScript file in an HTML document.
JavaScript Data Types
JavaScript provides different data types to hold different types of values. There are two types of data types in JavaScript.
1. Primitive data type
2. Non-primitive (reference) data type
JavaScript is a dynamic type language; means you don't need to specify type of the variable because it is dynamically used by JavaScript engine. You need to use var here to specify the data type. It can hold any type of values such as numbers, strings etc.
For example:
var a=40; //holding number
var b="Rahul"; //holding string
Introduction to PHP:
PHP is an open-source, interpreted, and object-oriented scripting language that can be executed at the server side. PHP is well-suited for web development. Therefore, it is used to develop web applications (an application that executes on the server and generates the dynamic page).
Before learning PHP, you must have a basic knowledge of HTML, CSS, and JavaScript. So, learn these technologies for better implementation of PHP.
HTML - HTML is used to design static webpages.
CSS - CSS helps to make the webpage content more effective and attractive.
JavaScript - JavaScript is used to design an interactive website.
PHP is widely used in web development nowadays. PHP can develop dynamic websites easily. But you
must have the basic knowledge of the following technologies for web development as well.
Features of PHP
1. Simple
2. Interpreted
3. Faster
4. Open Source
5. Platform Independent
6. Case Sensitive
7. Error Reporting
8. Real-Time Access Monitoring
9. Loosely Typed Language
Characteristics of PHP
1. Simplicity
2. Efficiency
3. Security
4. Flexibility
5. Familiarity
Weaknesses of PHP
1. PHP's main strength flexibility is also its weakness. It can be a little too forgiving of errors.
2. With no strict rules, inexperienced programmers have the freedom to create some very bad solutions to simple problems.
3. Bad packages that got popular in the community are still reused when developers are trying something new or rushed for time. Some of these mistakes lead to security risks.
JavaScript Practice Questions
1. Write a java Script to display 1 to 10 using for loop, while loop and do while loop.
2. Write a Java Script program to calculate the factorial of a given number.
3. Create a Page with a button with value "Computer" on clicking the button your page should display
"Computer Science".
4. Write a JavaScript program to display "Welcome Class-12" using onload event.
5. Write a JavaScript program to check if a string is a palindrome or not using function.
6. Write a JavaScript program to check if a number is a palindrome or not using function.
7. Write a JavaScript program to check if a number is negative or positive or zero using function.
8. Write a JavaScript program to check if a number is even or odd using function.
9. Design a form with username, address, e-mail, password and submit button. Validated the form using jQuery.
10. Write a JavaScript program that takes two numbers from input field and display result of arithmetic operations while clicking button.
PHP Practice Questions
1.Write a PHP program to calculate the factorial of a given number.
2. Write a PHP program to check if a string is a palindrome or not.
3. Write a PHP program to input three number and find largest one.
4. write a PHP code for database connectivity.
5. Design a form with username and password and submit button. Write a PHP code to get value of username and password using
a) $_POST variable and b) $_GET variable.
JavaScript Practice Questions solutions
1. Write a java Script to display 1 to 10 using for loop, while loop and do while loop.
<script>
// For Loop
for (let i = 1; i <= 10; i++) {
document.write(i + " ");
}
document.write("<br>");
// While Loop
let j = 1;
while (j <= 10) {
document.write(j + " ");
j++;
}
document.write("<br>");
// Do-While Loop
let k = 1;
do {
document.write(k + " ");
k++;
} while (k <= 10);
</script>
2. Write a Java Script program to calculate the factorial of a given number.
<script>
function factorial(num) {
let fact = 1;
for (let i = 1; i <= num; i++) {
fact *= i;
}
document.write("Factorial = " + fact);
}
factorial(5); // example
</script>
3. Create a Page with a button with value "Computer" on clicking the button your page should display
"Computer Science".
<button onclick="showText()">Computer</button>
<p id="output"></p>
<script>
function showText() {
document.getElementById("output").innerHTML = "Computer Science";
}
</script>
4. Write a JavaScript program to display "Welcome Class-12" using onload event.
<body onload="welcome()">
<script>
function welcome() {
alert("Welcome Class-12");
}
</script>
</body>
5. Write a JavaScript program to check if a string is a palindrome or not using function.
<script>
function isPalindrome(str) {
let rev = str.split("").reverse().join("");
if (str === rev)
document.write("Palindrome");
else
document.write("Not Palindrome");
}
isPalindrome("madam");
</script>
6. Write a JavaScript program to check if a number is a palindrome or not using function.
<script>
function numPalindrome(num) {
let temp = num;
let rev = 0;
while (num > 0) {
let digit = num % 10;
rev = rev * 10 + digit;
num = parseInt(num / 10);
}
if (rev === temp)
document.write("Number is Palindrome");
else
document.write("Number is Not Palindrome");
}
numPalindrome(121); //function call
</script>
7. Write a JavaScript program to check if a number is negative or positive or zero using function.
<script>
function checkNumber(num) {
if (num > 0)
document.write("Positive");
else if (num < 0)
document.write("Negative");
else
document.write("Zero");
}
checkNumber(-5);
</script>
8. Write a JavaScript program to check if a number is even or odd using function.
<script>
function evenOdd(num) {
if (num % 2 == 0)
document.write("Even");
else
document.write("Odd");
}
evenOdd(7);
</script>
9. Design a form with username, address, e-mail, password and submit button. Validated the form using jQuery.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="myForm">
Username: <input type="text" id="username"><br>
Address: <input type="text" id="address"><br>
Email: <input type="text" id="email"><br>
Password: <input type="password" id="password"><br>
<button type="submit">Submit</button>
</form>
<script>
$("#myForm").submit(function() {
if ($("#username").val() == "" ||
$("#address").val() == "" ||
$("#email").val() == "" ||
$("#password").val() == "") {
alert("All fields are required");
return false;
}
});
</script>
</body>
</html>
10. Write a JavaScript program that takes two numbers from input field and display result of arithmetic operations while clicking button.
<!DOCTYPE html>
<html>
<body>
Number 1: <input type="text" id="num1"><br><br>
Number 2: <input type="text" id="num2"><br><br>
<button onclick="calculate()">Calculate</button>
<p id="result"></p>
<script>
function calculate() {
let a = parseFloat(document.getElementById("num1").value);
let b = parseFloat(document.getElementById("num2").value);
let add = a + b;
let sub = a - b;
let mul = a * b;
let div = a / b;
let output =
"Addition: " + add + "<br>" +
"Subtraction: " + sub + "<br>" +
"Multiplication: " + mul + "<br>" +
"Division: " + div;
document.getElementById("result").innerHTML = output;
}
</script>
</body>
</html>
PHP Practice Questions solutions
1.Write a PHP program to calculate the factorial of a given number.
<?php
$num = 5;
$fact = 1;
for ($i = 1; $i <= $num; $i++) {
$fact *= $i;
}
echo "Factorial = " . $fact;
?>
2. Write a PHP program to check if a string is a palindrome or not.
<?php
$str = "madam";
$rev = strrev($str);
if ($str == $rev)
echo "Palindrome";
else
echo "Not Palindrome";
?>
3. Write PHP program to input three number and find largest one.
<?php
$a = 10; $b = 20; $c = 5;
if ($a > $b && $a > $c)
echo "Largest = $a";
else if ($b > $c)
echo "Largest = $b";
else
echo "Largest = $c";
?>
4. write a PHP code for database connectivity.
<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "test";
$conn = mysqli_connect($host, $user, $pass, $db);
if ($conn)
echo "Connected Successfully";
else
echo "Connection Failed";
?>
5. Design a form with username and password and submit button. Write a PHP code to get value of username and password using
a) $_POST variable and b) $_GET variable.
HTML Form
<form method="post" action="post.php">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="pass"><br>
<input type="submit" value="Submit">
</form>
<form method="get" action="get.php">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="pass"><br>
<input type="submit" value="Submit">
</form>
a) Using $_POST (post.php)
<?php
echo "Username: " . $_POST['user'];
echo "<br>Password: " . $_POST['pass'];
?>
b) Using $_GET (get.php)
<?php
echo "Username: " . $_GET['user'];
echo "<br>Password: " . $_GET['pass'];
?>
6. Write a PHP program to connect a database named ‘student’.
<?php
$servername="localhost";
$username="root";
$password="";
$dbname="student";
$conn=new mysqli($servername,$username,$password,$dbname);
if($conn->connect_error)
die("Connection failed:".mysqli_connect_error());
else
echo "Database connected successfully";
?>
7. Write a PHP program to insert records in a database named student with fields id, name and grade.
<?php
$servername="localhost";
$username="root";
$password="";
$dbname="student";
$conn=new mysqli($servername,$username,$password,$dbname);
if($conn->connect_error)
die("Connection failed:".mysqli_connect_error());
else
echo "Database connected successfully";
$sql="insert into studentrec (id,name,grade)values (101,'Tsering Sherpa',12)";
if($conn->query($sql)===true)
{
echo "Inserted data successfully";
}
else{
echo "Error in inserting data:".$conn->error;
}
$conn->close();
?>
8. Write a PHP program to display all records (previous question) of students who are in grade 11.
<?php
$servername="localhost";
$username="root";
$password="";
$dbname="student";
$conn=new mysqli($servername,$username,$password,$dbname);
if($conn->connect_error){
die("Connection failed:".mysqli_connect_error());
}
$sql="SELECT *FROM studentrec WHERE grade='11'";
$result=$conn->query($sql);
if($result->num_rows>0)
{
while($row=$result->fetch_assoc())
{
echo "<br> id:".$row["id"]." - Name: ".$row["name"]." - Grade : ".$row["grade"];
}
}
else {
echo "0 results";
}
$conn->close();
?>
9. Write a PHP program to delete records of a student whose id is 3.[previous question]
<?php
$servername="localhost";
$username="root";
$password="";
$dbname="student";
$conn=new mysqli($servername,$username,$password,$dbname);
if($conn->connect_error)
die("Connection failed:".mysqli_connect_error());
$sql="DELETE FROM studentrec WHERE id=3";
if($conn->query($sql)===true)
{
echo "Data deleted ";
}
else{
echo "Error in deleting data:".$conn->error;
}
$conn->close();
?>
10. Write a PHP program to input a string through a text box and find its length.[use strlen()]
<form method="post">
<input type="text" name="userText" placeholder="Enter text">
<input type="submit" value="Find Length">
</form>
<?php
if(isset($_POST['userText']))
{
$str=$_POST["userText"];
echo "Length=".strlen($str);
}
?>
