Scribd
Upload
159 views17 pages

Experiment No. 01 Aim: Write A Program To Perfom Javascript Simple Arithmetic Operations. Program

The document describes 6 JavaScript experiments: 1. It performs basic arithmetic operations using operators like +, -, *, / in JavaScript. 2. It demonstrates the use of different pop-up boxes like alert, confirm, and prompt. 3. It explains built-in objects and functions like Date, String, Math, Navigator, and Window. 4. It implements form validation in JavaScript to validate fields like name, email, phone number. 5. It demonstrates making AJAX requests to fetch text and XML responses. 6. It provides an introduction to server-side programming and discusses tasks like querying databases, file operations, interacting with other servers.

Uploaded by

PANKAJ SAHO
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
159 views17 pages

Experiment No. 01 Aim: Write A Program To Perfom Javascript Simple Arithmetic Operations. Program

The document describes 6 JavaScript experiments: 1. It performs basic arithmetic operations using operators like +, -, *, / in JavaScript. 2. It demonstrates the use of different pop-up boxes like alert, confirm, and prompt. 3. It explains built-in objects and functions like Date, String, Math, Navigator, and Window. 4. It implements form validation in JavaScript to validate fields like name, email, phone number. 5. It demonstrates making AJAX requests to fetch text and XML responses. 6. It provides an introduction to server-side programming and discusses tasks like querying databases, file operations, interacting with other servers.

Uploaded by

PANKAJ SAHO
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

EXPERIMENT No.

01

AIM: Write a program to perfom JavaScript simple arithmetic operations.

PROGRAM:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arithmetic</h2>
<h3>The + Operator</h3>
<p id="demo"></p>
<script>
let x = 5;
let y = 2;
let z = x + y;
document.getElementById("demo").innerHTML = z;

<h3>The - Operator</h3>
let x = 5;
let y = 2;
let z = x - y;
document.getElementById("demo").innerHTML = z;

<h3>The * Operator</h3>
let x = 5;
let y = 2;
let z = x * y;
document.getElementById("demo").innerHTML = z;

<h3>The / Operator</h3>
let x = 5;
let y = 2;
let z = x / y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>

OUTPUT:

The + operator
7
The - operator
3
The * operator
10
The / operator
2.5
EXPERIMENT No. 02

AIM: Write a program to show the usage of Pop-up box.

PROGRAM:

<html>
<body>
<script>
function showAlert() {
alert("Hi, this is an Alert box");
}
</script>
<button onclick="showAlert()">Show Alert</button>
</body>
</html>

<html>
<head>
<script type="text/javascript">
function isConfirmed() {
let conVal = confirm("Are you ready to confirm?");
if (conVal == true) {
document.getElementById("result").innerHTML = "Confirmed !";
} else {
document.getElementById("result").innerHTML = "Cancelled !";
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="isConfirmed()" value="Want to confirm ?" />
</form>
<p id="result"></p>
</body>
</html>

<html>
<head>
<script type="text/javascript">
function promptUser() {
let userInput = prompt("Hi, What's your name?", "John Wick");
if(userInput != null) {
document.getElementById("result").innerHTML = "Hello " + userInput + ", good day!";
}
}
</script>
</head>
<body>
<button onclick="promptUser()">Click on me!</button>
<p id="result"></p>
</body>
</html>
EXPERIMENT No. 03

AIM: Write a program of the given below listed inbuilt Objects and Functions:-
1) Date.
2) String.
3) Math.
4) Navigator.
5) Window.

PROGRAM:

1) Date:-

<script>
var date=new Date();
var day=date.getDate();
var month=date.getMonth()+1;
var year=date.getFullYear();
document.write("<br>Date is: "+day+"/"+month+"/"+year);
</script>

OUTPUT:

Date is:16/08/2021.

2) String:-

<script>
function gfg() {
var geek = Boolean(1);
var geeks = Boolean(0);
var string =
String(geek) + "<br>" +
String(geeks);
document.write(string);
}
gfg();
</script>

OUTPUT:

True
False

3) Math:-

<html>
<body>

<h2>JavaScript Math Constants</h2>


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

<script>
document.getElementById("demo").innerHTML =
"<p><b>Math.E:</b> " + Math.E + "</p>" +
"<p><b>Math.PI:</b> " + Math.PI + "</p>" +
"<p><b>Math.SQRT2:</b> " + Math.SQRT2 + "</p>" +
"<p><b>Math.SQRT1_2:</b> " + Math.SQRT1_2 + "</p>" +
"<p><b>Math.LN2:</b> " + Math.LN2 + "</p>" +
"<p><b>Math.LN10:</b> " + Math.LN10 + "</p>" +
"<p><b>Math.LOG2E:</b> " + Math.LOG2E + "</p>" +
"<p><b>Math.Log10E:</b> " + Math.LOG10E + "</p>";
</script>

</body>
</html>

OUTPUT:

Math.E: 2.718281828459045
Math.PI: 3.141592653589793
Math.SQRT2: 1.4142135623730951
Math.SQRT1_2: 0.7071067811865476
Math.LN2: 0.6931471805599453
Math.LN10: 2.302585092994046
Math.LOG2E: 1.4426950408889634
Math.Log10E: 0.4342944819032518

4) Navigator:-

<html>
<body>

<h2>The Navigator Object</h2>

<p>The cookieEnabled property returns true if cookies are enabled:</p>

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

<script>
document.getElementById("demo").innerHTML =
"navigator.cookieEnabled is " + navigator.cookieEnabled;
</script>

</body>
</html>

OUTPUT:-

The cookieEnabled property returns true if cookies are enabled:


navigator.cookieEnabled is true

5) Window:-

<!doctype html>
<head>
<title>Open a new Window</title>
</head>
<body>
<h3>Click to open a new Window:</h3>
<button onclick="createWindow()">Open a Window</button>
<p id="result"></p>
<script>
function createWindow() {
let url = "https://study.com";
let win = window.open(url, "My New Window", "width=300, height=200");
document.getElementById("result").innerHTML = win.name + " - " + win.opener.location;
}
</script>
</body>
</html>

OUTPUT:

Click to open a new Window:


Open a Window
My New Window - https://www.study.com/code/playground/web/embed?id=PSrzKt
EXPERIMENT No. 04

AIM: Write a program of the JavaScript form Validation. The form should have:-
Name, E-mail, Pin, Mobile number and a Register button.

PROGRAM:

<html>
<body>
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
var x=document.myform.email.value;
var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
var num=document.myform.num.value;

if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
else if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
return false;
}

else if (isNaN(num)){
document.getElementById("numloc").innerHTML="Enter Numeric value only";
return false;
}else{
return true;
}
</script>
<body>
<form name="myform" method="post"
action="http://www.javatpoint.com/javascriptpages/valid.jsp" onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Pin: <input type="password" name="password"><br/>
Email: <input type="text" name="email"><br/>
Mobile_Number: <input type="text" name="num"><span id="numloc"></span><br/>

<input type="submit" value="register">


</form>
</body>
</html>

OUTPUT:

Name:
Pin:
Email:
Mobile_Number:

register
EXPERIMENT No. 05

AIM: Write a program of the AJAX for text and XML responses.

PROGRAM:

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>

OUTPUT:

AJAX
AJAX is not a programming language.

AJAX is a technique for accessing web servers from a web page.

AJAX stands for Asynchronous JavaScript And XML.


EXPERIMENT No. 06

AIM: Introduction and working of server side program execution.

It is the program that runs on server dealing with the generation of content of web page.

1) Querying the database


2) Operations over databases
3) Access/Write a file on server.
4) Interact with other servers.
5) Structure web applications.
6) Process user input. For example if user input is a text in search box, run a search algorithm on
data stored on server and send the results.

Examples:

The Programming languages for server-side programming are :

1) PHP.
2) C++.
3) Java and JSP.
4) Python.
5) Ruby on Rails.
EXPERIMENT No. 07

AIM: PHP Data types and Processing.

Data Types define the type of data a variable can store. PHP allows eight different types of data
types. All of them are discussed below. There are pre-defined, user-defined, and special data types.
The predefined data types are:

• Boolean
• Integer
• Double
• String

The user-defined (compound) data types are:

• Array
• Objects

The special data types are:

• NULL
• resource

PROGRAM:

<?php
// integers
$deci1 = 50;
echo $deci1;
//String
$name = "Krishna";
echo "The name is $name \n";
$nm = NULL;
echo $nm; // This will give no output

// boolean
if(TRUE)
echo "This condition is TRUE";
if(FALSE)
echo "This condition is not TRUE";
//array
$intArray = array( 10, 20 , 30);
echo "First Element: $intArray[0]\n";
?>

Output:
50
The name is Krishna
This condition is not TRUE
EXPERIMENT No. 08

AIM: PHP Html Form request handling i.e. get and post.

PHP Form Handling

We can create and use forms in PHP. To get form data, we need to use PHP superglobals $_GET
and $_POST.
The form request may be get or post. To retrieve data from get request, we need to use $_GET, for
post request $_POST.

PHP Get Form

Get request is the default form request. The data passed through get request is visible on the URL
browser so it is not secured. You can send limited amount of data through get request.
Let's see a simple example to receive data from get request in PHP.

File: form1.html

1. <form action="welcome.php" method="get">


2. Name: <input type="text" name="name"/>
3. <input type="submit" value="visit"/>
4. </form>
File: welcome.php
1. <?php
2. $name=$_GET["name"];//receiving name field value in $name variable
3. echo "Welcome, $name";
4. ?>

PHP Post Form

Post request is widely used to submit form that have large amount of data such as file upload, image
upload, login form, registration form etc.
The data passed through post request is not visible on the URL browser so it is secured. You can
send large amount of data through post request.
Let's see a simple example to receive data from post request in PHP.

File: form1.html
1. <form action="login.php" method="post">
2. <table>
3. <tr><td>Name:</td><td> <input type="text" name="name"/></td></tr>
4. <tr><td>Password:</td><td> <input type="password" name="password"/></td></tr>
5. <tr><td colspan="2"><input type="submit" value="login"/> </td></tr>
6. </table>
7.</form>
File: login.php
1. <?php
2. $name=$_POST["name"];//receiving name field value in $name variable
3. $password=$_POST["password"];//receiving password field value in $password variable
4. echo "Welcome: $name, your password is: $password";
5. ?>

OUTPUT:
EXPERIMENT No. 09

AIM: PHP Login panel working

PHP MySQL Login System

In this topic, we will learn how to create a PHP MySQL Login System with the help of PHP and
MySQL database. There are few steps given for creating a login system with MySQL database.
Before creating the login system first, we need to know about the pre-requisites to create the login
module.

Requirements

• We should have knowledge of HTML, CSS, PHP and MySQL for creating the login system.
• Text Editor - For writing the code. We can use any text editor such as Notepad, Notepad++,
Dreamweaver, etc.
• XAMPP - XAMPP is a cross-platform software, which stands for Cross-platform(X) Apache
server (A), MySQL (M), PHP (P), Perl (P). XAMPP is a complete software package, so, we
don't need to install all these separately.

Now, we will create four files here for the login system.

1. index.html - This file is created for the GUI view of the login page and empty field
validation.

2. connection.php - Connection file contains the connection code for database connectivity.

3. authentication.php - This file validates the form data with the database which is submitted
by the user.

index.html

First, we need to design the login form for the website user to interact with it. This login form is
created using html and also contains the empty field validation, which is written in JavaScript. The
code for the index.html file is given below:

<html>
1. <head>
2. <title>PHP login system</title>
3. // insert style.css file inside index.html
4. <link rel = "stylesheet" type = "text/css" href = "style.css">
5. </head>
6. <body>
7. <div id = "frm">
8. <h1>Login</h1>
9. <form name="f1" action = "authentication.php" onsubmit = "return validation()" method =
"POST">
10.<p>
11.<label> UserName: </label>
12.<input type = "text" id ="user" name = "user" />
13.</p>
14.<p>
15.<label> Password: </label>
16.<input type = "password" id ="pass" name = "pass" />
17.</p>
18.<p>
19.<input type = "submit" id = "btn" value = "Login" />
20.</p>
21.</form>
22.</div>
23.</body>
24.</html>

connection.php

Next step is to do the connectivity of login form with the database which we have created in the
previous steps. We will create connection.php file for which code is given below:

1. <?php
2. $host = "localhost";
3. $user = "root";
4. $password = '';
5. $db_name = "javatpoint";
6. $con = mysqli_connect($host, $user, $password, $db_name);
7. if(mysqli_connect_errno()) {
8. die("Failed to connect with MySQL: ". mysqli_connect_error());
9. }
10.?>

authentication.php

Now, we have our database setup, so we can go with the authentication of the user. This file handles
the login form data that sent through the index.html file. It validates the data sent through the login
form, if the username and password match with the database, then the login will be successful
otherwise login will be failed.

1. <?php
2. include('connection.php');
3. $username = $_POST['user'];
4. $password = $_POST['pass'];
5. //to prevent from mysqli injection
6. $username = stripcslashes($username);
7. $password = stripcslashes($password);
8. $username = mysqli_real_escape_string($con, $username);
9. $password = mysqli_real_escape_string($con, $password);
10.$sql = "select *from login where username = '$username' and password = '$password'";
11.$result = mysqli_query($con, $sql);
12.$row = mysqli_fetch_array($result, MYSQLI_ASSOC);
13.$count = mysqli_num_rows($result);
14.if($count == 1){
15.echo "<h1><center> Login successful </center></h1>";
16.}
17.else{
18.echo "<h1> Login failed. Invalid username or password.</h1>";
19.}
20.?>

OUTPUT:
EXPERIMENT No. 10

AIM: Write a program for PHP Data base connectivity.

PROGRAM:

<?php

$servername = "localhost";
$username = "username";
$password = "password";

// Create connection
$conn = mysqli_connect($servername, $username, $password);

// Check connection
if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully";

?>

OUTPUT:
Connected successfully.

You might also like