Web technology

Web technology refers to the collection of technologies, protocols, and tools used
to create, manage, and deliver web applications and services. It encompasses
both the client-side and server-side components, as well as the communication
protocols that facilitate data exchange between them.
Types of web technology:
HTML (Hypertext Markup Language):
The standard markup language used to create and structure content on the web.

CSS (Cascading Style Sheets):

Style sheets that define the presentation and layout of HTML documents.

JavaScript:
A scripting language that enables dynamic content, interactivity, and
manipulation of the Document Object Model (DOM).

HTTP (Hypertext Transfer Protocol):

A protocol used for transmitting data over the web. It defines how messages are
formatted and transmitted between the client and server.

Web Browsers:
Software applications that retrieve and display web pages. Examples include
Google Chrome, Mozilla Firefox, and Microsoft Edge.
Web Servers:
Software or hardware that stores, processes, and serves web pages to users.
Examples include Apache, Nginx, and Microsoft Internet Information Services
(IIS).

Database Systems:
Systems for storing and retrieving data in web applications.
Examples: MySQL, PostgreSQL, MongoDB, SQLite.

Web Security:
Practices and technologies to secure web applications from various threats.
Examples: SSL/TLS (Secure Sockets Layer)/ (Transport Layer Security)for
encrypted communication, HTTPS, secure coding practices.

Server side and client side scripting:

Server-side scripting and client-side scripting are two different approaches to
handling the logic and processing of web applications. They refer to where the
code is executed and what part of the web application architecture is responsible
for running that code.
Server-side scripting:
 Server-side scripting involves executing code on the server before sending
the response to the client.
 The server generates dynamic content and sends a fully rendered page to
the client's browser.
  Common server-side scripting languages include PHP, Python (using
frameworks like Django or Flask), Ruby on Rails, Java (using
frameworks like Spring), and Node.js (JavaScript on the server side).

Client-side scripting:
 Client-side scripting involves executing code on the user's browser (client)
after the web page has been loaded.
 The client's browser is responsible for interpreting and executing the code.
 Common client-side scripting languages include JavaScript, HTML, and
CSS

Feature Server-side Scripting Client-side Scripting

Execution
Server Client
location

Python, PHP, Java, Ruby,

Languages JavaScript, WebAssembly
Node.js

Generate dynamic content, Manipulate page content, respond

Purpose process user input, interact to user interactions, provide
with databases interactivity

Security High Low

Potentially slower due to Potentially faster but can impact

Performance
roundtrips device resources

Responsiveness Less responsive More responsive

 Offline
Limited Possible with caching
functionality

Server access Direct No direct access

JavaScript History
JavaScript was developed by Brendan Eich in 1995, which appeared in
Netscape, a popular browser of that time.
The language was initially called LiveScript and was later renamed JavaScript.
There are many programmers who think that JavaScript and Java are the same. In
fact, JavaScript and Java are very much unrelated. Java is a very complex
programming language whereas JavaScript is only a scripting language. The
syntax of JavaScript is mostly influenced by the programming language C.

How to Run JavaScript?

Being a scripting language, JavaScript cannot run on its own. In fact, the browser
is responsible for running JavaScript code. When a user requests an HTML page
with JavaScript in it, the script is sent to the browser and it is up to the browser
to execute it. The main advantage of JavaScript is that all modern web browsers
support JavaScript. So, you do not have to worry about whether your site visitor
uses Internet Explorer, Google Chrome, Firefox or any other browser.
JavaScript will be supported. Also, JavaScript runs on any operating
system including Windows, Linux or Mac.

Tools You Need

To start with, you need a text editor to write your code and a browser to display
the web pages you develop. You can use a text editor of your choice including
Notepad++, Visual Studio Code, Sublime Text, Atom or any other text
editor you are comfortable with. You can use any web browser including
Google Chrome, Firefox, Microsoft Edge, Internet Explorer etc.

A Simple JavaScript Program

You should place all your JavaScript code within <script> tags (<script>
and </script>) if you are keeping your JavaScript code within the HTML
document itself. This helps your browser distinguish your JavaScript code from
the rest of the code.
Example:
<html>
<head>
<title>My First JavaScript code!!!</title>
<script>
alert("Hello World!");
</script>
</head>
<body>

</body>
</html>
JavaScript Output Statements
In JavaScript, there are several ways to output data to the user.
Following are the some of the most common examples of JavaScript
output statements.
document.write()
In JavaScript, the document.write() method can be used to write a string or a
variable's value to an HTML document. The text or variable value will be
inserted into the HTML at the point where the document.write() statement is
called.
Syntax:
document.write("string/text");
Example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
</body>
<script>
document.write("Welcome to JavaScript<br>");
let a=15;
document.write(a);
</script>
</html>
Output:
Welcome to JavaScript
15

alert()
The alert() function is used to display an alert box with a specified message and
an OK button. It is often used to display a warning or to ask the user to confirm
an action.
Syntax:
alert(message);

Example 1:
alert("Hello, world!");

Example 2:
<html>
<head>
<title>javascript alert</title>
<script>
alert("welcome to JavaScript");
alert(5+2);
</script>
<body>
</body>
</html

prompt()
The prompt() function is used to display a dialog box that prompts the user for
input. It has two optional arguments: a message to display, and the default value
for the input field. It returns the user's input as a string, or null if the user cancels
the dialog.
syntax:
prompt(message[, default]);
Example: 1
let name = prompt("What is your name?", "Ram Sharma");

Example 2:
<html>
<head>
<title>javascript prompt</title>
<script>
prompt("Enter your name:");
</script>
<body>
</body>
</html>
Output:
In above example program is going to prompt you. Whatever message you enter
does not display on page.
For that we have to store the message in the specific variable.
Example 3:
<html>
<head>
<title>javascript</title>
<script>
let a=prompt("Enter your name:");
document.write(a);
</script>
<body>

</body>
</html>
Output:

In above example now message of prompt box is going to stored in variable 'a'
and it will display on page.

confirm()
The confirm() function is used to display a dialog box with a specified message
and two buttons: OK and Cancel. It returns a Boolean value indicating whether
the user clicked OK or Cancel.
Syntax:
confirm(message);
Example;
let result = confirm("Are you sure you want to delete this item?");

<!DOCTYPE html>
<html>
<head>
<title>javascript confirm</title>
<script>
confirm("Do you like JavaScript");
</script>
<body>
</body>
</html
Output:

In above example conformation message can be seen on the page. You will get
two buttons Ok and Cancel. If you press on any button you didn’t get any result.
If you want to get result you have to stored conformation message Boolean value
in a variable.
Example:
<!DOCTYPE html>
<html>
<head>
<title>javascript confirm</title>
<script>
var a = confirm("Do you like javascript");
document.write(a);
</script>
<body>

</body>
</html
Output:

In above example now, if you press in Ok button the output will be shown true
and if your press cancel the output will shown false.
console.log()
This method writes a message to the JavaScript console. It is commonly used for
debugging purposes and the output can be viewed in the browser's developer
console.
Syntax:
console.log("messege/variable");
Example 1 :
console.log("Hello, World!");
or
An example of using console.log() to print the value of a variable:
let x = 5;
console.log(x); // prints "5"

Example 2:
<html>
<head>
<title>javascript</title>
<script>
console.log("Welcome to JavaScript!");
let x = 5;
let a="javascript";
console.log(x); // prints "5"
console.log(a);
</script>
<body>
</body>
</html>
Note: This can be helpful for debugging, or for displaying information to the
user, but it will not display the information on the page.
To get console dialog box click on right mouse button of your page and select
Inspect
Or
Press: CTRL + SHIFT + I
Now you will get following console dialog box through which can debug your
code or you can see the output of the code.
Output:
innerHTML
This property can be used to change the contents of an HTML element, but it
cannot be used to directly display output to the user. However, it can be used in
conjunction with other methods to display output to the user.
For example, you can use the innerHTML property to change the contents of a
<div> or <p> element, and then use the document.getElementById() method to
select the element and make it visible on the web page.
Example:
<!DOCTYPE html>
<html>
<body>
<title>Javascript</title>
<p id="demo"></p>
<p id="demo1"></p>
<script>
document.getElementById("demo").innerHTML = 9 + 6;
document.getElementById("demo1").innerHTML="Welcome to JavScript";
</script>
</body>
</html>
Variables in JavaScript
In JavaScript, a variable is a container that is used to store a value. Variables are
declared using the keywords var, let, or const, which indicate the scope
and the value of the variable can be changed.
Following are the different variables used in JavaScript
var:
Variables declared using the var keyword are function-scoped. This means that
they are only accessible within the function in which they are declared.
Syntax:
var variableName;
For Example:
var x; // declares a variable called x

let:
Variables declared using the let keyword are block-scoped. This means that they
are only accessible within the block in which they are declared.
Syntax:
let variableName;

Example:
let x; // declares a variable called x
let x=5;
let x = 5, y = 6, z = 7;

You can also assign a value to a variable when you declare it using the
assignment operator (=).

const:
Variables declared using the const keyword are also block-scoped. The only
difference between let and const is that variables declared with const cannot be
reassigned.

Syntax:
const variableName = value;

Example:
const PI = 3.14; // declares a constant variable called PI with the value 3.14

You cannot reassign a value to a constant variable once it has been declared. If
you try to do so, you will get a TypeError.
Automatically
x = 5;
y = 6;
z = x + y;

Operators:
Operators are used to perform operations on values and variables. JavaScript
supports various types of operators, including arithmetic, assignment, and
comparison operators.
Here are some examples of common operators in JavaScript:
Arithmetic operators:
In JavaScript, arithmetic operators are used to perform mathematical operations
such as addition, subtraction, multiplication, and division. There are several
different arithmetic operators available in JavaScript, including:
Operator Function Example
+ (addition) This operator is used to let x = 3 + 4; // x will be 7
add two numbers or let y = "Hello" +
concatenate two strings. "world"; // y will be
"Helloworld"
- (subtraction) This operator is used to let x = 10 - 5; // x will be 5
 subtract one number
from another
* This operator is used to let x = 3 * 4; // x will be 12
(multiplication) multiply two numbers

/ (division) This operator is used to let x = 8 / 4; // x will be 2

divide one number by
another
% (modulus) This operator is used to let x = 10 % 3; // x will be
find the remainder of a 1
division operation.
** It raises the first number let x = 5;
(Exponentiation) to the power of the let y = 2;
second number. console.log(x ** y); //
prints "25"
++ This operator is used to let x = 5;
increment a number by x++; // x will be 6
1.
-- This operator is used to let x = 5;
decrement a number by x--; // x will be 4
1.

These operators can be used in a variety of ways in JavaScript, including in

expressions, assignments, and even as standalone statements. For example:
let x = 5;
let y = 3;
let z = x + y; // z will be 8
x += 2; // x will be 7
y *= 4; // y will be 12
Assignment operators:
In JavaScript, the assignment operator = is used to assign a value to a variable. In
addition to the basic assignment operator, JavaScript also provides a number of
compound assignment operators that can be used to perform an operation and
assign the result to a variable in a single step.
Operator Function Example
= It is used to assign the value to a let x = 5; // x is now 5
variable
+= This operator is used to add a value let x = 5;
to a variable and assign the result to x += 3; // x is now 8
the variable
-= This operator is used to subtract a let x = 5;
value from a variable and assign the x -= 3; // x is now 2
result to the variable.
*= This operator is used to multiply a let x = 5;
variable by a value and assign the x *= 3; // x is now 15
result to the variable
/= This operator is used to divide a let x = 15;
variable by a value and assign the x /= 3; // x is now 5
result to the variable
%= This operator is used to calculate the let x = 10;
remainder of dividing a variable by a x %= 3; // x is now 1
value and assign the result to the
variable

Comparison operators:
In JavaScript, comparison operators are used to compare two values and return a
boolean value indicating whether the comparison is true or false. The comparison
operators in JavaScript include:
Operator Function Example
== This operator is used to test for console.log(5 == 5); // prints
equality between two values. It true
returns true if the values are console.log(5 == "5"); //
equal, and false if they are not prints true
console.log(5 == 6); // prints
false
!= This operator is used to test for console.log(5 != 5); // prints
inequality between two values. false
It returns true if the values are console.log(5 != "5"); //
not equal, and false if they are. prints false
console.log(5 != 6); // prints
true
> This operator is used to test if console.log(5
> 5); // prints
the value on the left is greater false
than the value on the right. It console.log(5
> 4); // prints
returns true if the left value is true
greater, and false if it is not.
< This operator is used to test if console.log(5 < 5); // prints
the value on the left is less than false
the value on the right. It returns console.log(5 < 6); // prints
true if the left value is less, and true
false if it is not.
>= This operator is used to test if console.log(5 >= 5); // prints
the value on the left is greater true
than or equal to the value on console.log(5 >= 6); // prints
the right. It returns true if the false
left value is greater or equal,
and false if it is not.
<= This operator is used to test if console.log(5 <= 5); // prints
the value on the left is less than true
or equal to the value on the console.log(5 <= 4); // prints
right. It returns true if the left false
value is less or equal, and false
if it is not.
These operators can be very useful for writing conditional statements and
performing different actions based on the result of a comparison.
Example:
let x = 5;
if (x > 3) {
console.log("x is greater than 3");
} else {
console.log("x is not greater than 3");
}

Logical operators:
In JavaScript, logical operators are used to perform logical operations on boolean
values. The logical operators in JavaScript include:
Operator Function Example
&& This operator is used to test console.log(true && true); //
if both of the values on prints true
either side of it are true. It console.log(true && false); //
returns true if both values prints false
are true, and false if either console.log(false && true); //
value is false. prints false
console.log(false && false); //
prints false
|| This operator is used to test console.log(true || true); // prints
if either of the values on true
either side of it are true. It console.log(true || false); //
returns true if either value is prints true
true, and false if both values console.log(false || true); //
are false. prints true
console.log(false || false); //
prints false
! This operator is used to console.log(!true); // prints false
negate a boolean value. It console.log(!false); // prints true
 returns true if the value is
false, and false if the value is
true.

Conditional (ternary) operator:

In JavaScript, the conditional (ternary) operator is a special operator that is used
to perform a conditional operation based on the value of a boolean expression. It
is also known as the ternary operator because it takes three operands: a boolean
expression followed by a question mark (?), and two expressions
console.log(y); // prints "x is greater than 3"
In this example, the boolean expression x > 3 evaluates to true, so the operator
returns the string "x is greater than 3".
The conditional operator is often used as a concise way to write simple if-else
statements.
separated by a colon (:).
The syntax for the conditional operator is as follows:
booleanExpression ? expression1 : expression2
If the boolean expression evaluates to true, the operator returns expression1; if
the boolean expression evaluates to false, it returns expression2.
For example:
let x = 5;
let y = (x > 3) ? "x is greater than 3" : "x is not greater than 3";
In this example, the boolean expression x > 3 evaluates to true, so the operator
returns the string "x is greater than 3".
The conditional operator is often used as a concise way to write simple if-else
statements.
 Conditional statements in JavaScript
In JavaScript, conditional statements allow you to execute code
only if certain conditions are met. There are three types of
conditional statements:
if statement:
It executes a block of code if a specified condition is true.
Syntax:
if (condition) {
// code to be executed if condition is true
}

Example: 1
<html>
<head>
<title>javascript if</title>
<script>
let number = 25;
if (number > 20) {
alert("The number is greater than 20.");
}
</script>
<body>
</body>
</html

Example 2: WAP to check whether input number is odd or

even.
<html>
<head>
<title>javascript if</title>
<script>
let number = parseInt(prompt("Enter a number:"));
if (number % 2 === 0) {
alert("The number is even");
}
if(number % 2 !=0){
alert("The number is odd")
}
</script>
<body>
</body>
</html

if...else statement:
It executes a block of code if a specified condition is true and
another block of code if the condition is false.

Syntax:
if (condition) {
// code to be executed if condition is true
} else {
// code to be executed if condition is false
}

Example:
<html>
<head>
<title>javascript if else</title>
<script>
let number = parseInt(prompt("Enter a number:"));

if (number % 2 === 0) {
alert("The number is even");
} else {
alert("The number is odd")
}
</script>
<body>

</body>
</html
else if statement
The else if statement in JavaScript is used to specify multiple conditions
and execute different code blocks based on those conditions. If the first
if condition fails, the code execution will move to the next else if
condition until a condition is met, and the code associated with that
condition will be executed. If all conditions are false, the code in the
else block will be executed.
Syntax:
if (condition1) {
// code to be executed if condition1 is true
} else if (condition2) {
// code to be executed if condition1 is false and condition2 is true
} ...
else if (conditionN) {
// code to be executed if all previous conditions are false and conditionN is true
} else {
// code to be executed if all conditions are false
}
Example 1: WAP to check whether input number is positive,
negative or zero.
<html>
<head>
<title>javascript else if</title>
<script>
let number = parseInt(prompt("Enter a number:"));
if (number > 0) {
alert(`The number ${number} is positive.`);
} else if (number < 0) {
alert(`The number ${number} is negative.`);
} else {
alert(`The number ${number} is zero.`);
}
</script>
<body>
</body>
</html>
 Switch Statement in JavaScript

In JavaScript, a switch statement is a control statement that allows you to execute different code blocks
based on the value of a variable or an expression. It provides a way to write more concise and readable code
when you have multiple conditions that need to be evaluated.

Here's the syntax of a switch statement:

Example:
Write a JavaScript program to input day code and display the day name