Client Side Prog Notes
Client Side Prog Notes
– WEB TECHNOLOGY
ot
Kh
Client-Side Programming refers to the code executed on the user's
device (typically a web browser) when they interact with a web
ja
specific criteria.
1
Prof. Pooja Khot. – WEB TECHNOLOGY
ot
pre-built components and functions (e.g., jQuery, React, Angular).
2
Prof. Pooja Khot. – WEB TECHNOLOGY
ot
and rules.
•
Kh
Security: Protecting the application from vulnerabilities like SQL
injection, cross-site scripting (XSS), and unauthorized access.
ja
oo
3
Prof. Pooja Khot. – WEB TECHNOLOGY
ot
Benefits of Server-Side Programming:
• Kh
Security: Implementing security measures to protect sensitive
data.
ja
4
Prof. Pooja Khot. – WEB TECHNOLOGY
1. Client-Side Rendering:
• Client-Side Rendering (CSR) is a rendering method in which the
browser processes an access request, and only the JavaScript file is
used to produce the HTML content.
• The server receives the access command data and responds with a
straightforward HTML document, including the JavaScript data
necessary to load the full website.
• CSR greatly shortens the duration of the page loading. Because it
lessens the demand on their servers, it is also the less expensive
choice for the website owner.
2. Server-Side Rendering:
• Server-side rendering (SSR) is how a website’s JavaScript is
ot
rendered on the website’s server. When a user visits a website, the
Kh
information in the request is transmitted directly to the server,
which responds with a file containing the full HTML code.
ja
• The website will be fully loaded based on this content. The server
oo
generates a page from the HTML code and the user’s access data
who is visiting the site using this way.
.P
• Client-Side Scripting:
Web browsers carry out scripting on the client-side. When browsers
contain full code, it is used. When running directly on browsers, source
5
Prof. Pooja Khot. – WEB TECHNOLOGY
• Server-Side Scripting:
Web servers carry out server-side scripting. They mostly serve to
produce dynamic pages. Additionally, it has access to the web server’s
ot
file system. A web server is a programming language-based server-
side environment. Kh
Scripts can be developed in any of the available server-side scripting
ja
languages. It retrieves and generates material for dynamic pages. It is
oo
6
Prof. Pooja Khot. – WEB TECHNOLOGY
JavaScript Syntax
JavaScript syntax refers to the rules and conventions dictating how code
is structured and arranged within the JavaScript programming
language. This includes statements, expressions, variables, functions,
operators, and control flow constructs.
Syntax:
console.log("Basic Print method in JavaScript");
ot
var x;
let y; Kh
// How to use variables:
ja
x = 5;
oo
y = 6;
.P
let z = x + y;
# JavaScript Values
of
Pr
• Fixed values
• Variable values
# JavaScript Literals
Syntax Rules for the JavaScript fixed values are:
7
Prof. Pooja Khot. – WEB TECHNOLOGY
Example:
let num1 = 50
console.log(num1)
console.log(num2)
ot
console.log(str1)
console.log(str2) Kh
Output:
ja
50
oo
50.05
.P
Letter A
of
Letter B
Pr
# JavaScript Variables
A JavaScript variable is the simple name of the storage location where
data is stored. There are two types of variables in JavaScript which are
listed below:
8
Prof. Pooja Khot. – WEB TECHNOLOGY
// Function definition
function MyFunction() {
console.log(Name);
console.log(num);
ot
}
// Function call
Kh
MyFunction();
ja
oo
Output:
.P
Apple
of
45
Pr
# JavaScript Operators
JavaScript operators are symbols that are used to compute the value or
in other words, we can perform operations on operands. Arithmetic
operators ( +, -, *, / ) are used to compute the value, and Assignment
operators ( =, +=, %= ) are used to assign the values to variables.
// Variable Declarations
let x, y, sum;
9
Prof. Pooja Khot. – WEB TECHNOLOGY
x = 3;
y = 23;
sum = x + y;
console.log(sum);
Output:
26
# JavaScript Expressions
ot
Javascript Expression is the combination of values, operators, and
Kh
variables. It is used to compute the values.
// Variable Declarations
.P
x = 20;
Pr
y = 30
num = x / 2;
sum = x + y;
Output:
10
10
Prof. Pooja Khot. – WEB TECHNOLOGY
50
# JavaScript Keywords
The keywords are the reserved words that have special meanings in
JavaScript.
let a, b;
function ABC(){};
ot
# JavaScript Comments
Kh
The comments are ignored by the JavaScript compiler. It increases the
readability of code. It adds suggestions, Information, and warning of
ja
code. Anything written after double slashes // (single-line comment) or
oo
// Variable Declarations
Pr
x = 20;
y = 30
sum = x + y;
console.log(sum);
Output:
11
Prof. Pooja Khot. – WEB TECHNOLOGY
50
ot
Undefined, and Symbol.
Kh
Non-primitive types include Object, Array, and Function.
ja
# JavaScript Functions
oo
Syntax:
function functionName( par1, par2, ....., parn ) {
Pr
// Function code
}
The JavaScript function can contain zero or more arguments.
# JavaScript Identifiers
JavaScript Identifiers are names used to name variables and keywords
and functions.
• They must start with a letter, underscore (_), or dollar sign ($).
12
Prof. Pooja Khot. – WEB TECHNOLOGY
• JavaScript keywords (like let, var, function, if, else) cannot be used
as identifiers.
ot
objects that comprise the structure and content of a document on the
Kh
web. This guide will introduce the DOM, look at how the DOM
represents an HTML document in memory and how to use APIs to
create web content and applications.
ja
oo
the document structure, style, and content. The DOM represents the
document as nodes and objects; that way, programming languages
Pr
13
Prof. Pooja Khot. – WEB TECHNOLOGY
and creating web pages are organized into objects. For example,
the document object that represents the document itself,
any table objects that implement the HTMLTableElement DOM
interface for accessing HTML tables, and so forth, are all objects.
• The DOM is built using multiple APIs that work together. The
core DOM defines the entities describing any document and the
objects within it. This is expanded upon as needed by other APIs that
add new features and capabilities to the DOM. For example,
ot
the HTML DOM API adds support for representing HTML documents
to the core DOM, and the SVG API adds support for representing
SVG documents.
Kh
ja
# DOM and JavaScript
oo
14
Prof. Pooja Khot. – WEB TECHNOLOGY
import xml.dom.minidom as m
doc = m.parse(r"C:\Projects\Py\chap1.xml")
ot
doc.nodeName # DOM property of document object
p_list = doc.getElementsByTagName("para") Kh
ja
# Accessing the DOM
oo
• You don't have to do anything special to begin using the DOM. You
.P
use the API directly in JavaScript from within what is called a script, a
program run by a browser.
of
included in the web page, you can immediately begin using the API
for the document or window objects to manipulate the document
itself, or any of the various elements in the web page (the
descendant elements of the document).
• Your DOM programming may be something as simple as the
following example, which displays a message on the console by
using the console.log() function:
15
Prof. Pooja Khot. – WEB TECHNOLOGY
JavaScript Events
• JavaScript Events are actions or occurrences that happen in the
browser. They can be triggered by various user interactions or by the
browser itself.
• Common events include mouse clicks, keyboard presses, page loads,
and form submissions. Event handlers are JavaScript functions that
respond to these events, allowing developers to create interactive
web applications.
• Syntax:
ot
Event Kh
Attribute Description
ja
oo
onmouseover
element.
Pr
16
Prof. Pooja Khot. – WEB TECHNOLOGY
Event
Attribute Description
ot
1. JavaScript Events Examples Kh
Example 1: Here, we will display a message in the alert box when the
ja
button styled to appear in the middle of the page. When clicked, the
.P
Example Code:
Pr
<!doctype html>
<html>
<head>
<script>
function hiThere() {
alert('Hi there!');
}
</script>
</head>
<body>
<button type="button"
onclick="hiThere()"
17
Prof. Pooja Khot. – WEB TECHNOLOGY
style="margin-left: 50%;">
Click me event
</button>
</body>
</html>
ot
• Example: Here’s an example of a JavaScript event handler attached
Kh
to an HTML button element using the onclick attribute. This code
demonstrates an event handler attached to a button element. When
ja
the button is clicked, the `myFunction()` JavaScript function is
oo
Code:
of
<!DOCTYPE html>
<html>
Pr
<head>
<title>Event Handler Example</title>
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
// JavaScript function to handle the click event
function myFunction() {
alert("Button clicked!");
}
</script>
</body>
</html>
18
Prof. Pooja Khot. – WEB TECHNOLOGY
JavaScript Output
• JavaScript provides different methods to display output, such
as console.log(), alert(), document.write(), and manipulating HTML
elements directly.
• Each method has its specific use cases, whether for debugging, user
notifications, or dynamically updating web content. Here we will
explore various JavaScript output methods, demonstrating how and
when to use them effectively.
• There are primarily multiple distinct methods for displaying output in
JavaScript. Although there are other methods for output display, they
are not advisable, so it is recommended to refrain from using
ot
alternative output approaches.
method, and then use the innerHTML property to display the output on
the specified element (selected element).
.P
Syntax:
of
document.getElementById("id").innerHTML;
Pr
19
Prof. Pooja Khot. – WEB TECHNOLOGY
<p id="ABC"></p>
<!-- Script to use innerHTML -->
<script>
document.getElementById("ABC").innerHTML
= "Hello ABCD!";
</script>
</body>
</html>
ot
development to output information about the state of the program.
Syntax:
console.log();
Kh
ja
Example: This example uses the console.log() property to display data.
oo
HTML
<!DOCTYPE html>
.P
<html lang="en">
<head>
of
<title>JavaScript Output</title>
Pr
</head>
<body>
<h2>
Display Output using console.log() Method
</h2>
<!-- Script to use console.log() -->
<script>
console.log("Hello ABCD!");
</script>
</body>
</html>
20
Prof. Pooja Khot. – WEB TECHNOLOGY
ot
</head>
<body> Kh
<h2>
ja
Display Output using document.write() Method
</h2>
oo
<script>
document.write("Hello ABCD!");
of
</script>
Pr
</body>
</html>
21
Prof. Pooja Khot. – WEB TECHNOLOGY
<title>JavaScript Output</title>
</head>
<body>
<h2>
Display Output using window.alert() Method
</h2>
<!-- Script to use window.alert() -->
<script>
window.alert("Hello ABCD!");
</script>
</body>
</html>
ot
The window.print() method is used to open the browser’s print dialog,
Kh
allowing the user to print the current page. JavaScript does not contain
any default print object or methods.
ja
Syntax:
oo
window.print();
Example: The window.print() method prints the current page.
.P
HTML
<!DOCTYPE html>
of
<html>
Pr
<body>
<h2>JavaScript window.print() Method</h2>
<button onclick="window.print()">
Click here to Print
</button>
</body>
</html>
22
Prof. Pooja Khot. – WEB TECHNOLOGY
window.prompt();
Example: The window.prompt() method to take user input and display
the entered data used alert() method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Output</title>
</head>
<body>
<h2>
Display prompt box for user input
</h2>
ot
<script>
let userInput = window.prompt("Please Enter your Input");
if (userInput !== null) {
Kh
window.alert("Hello, " + userInput + "!");
ja
} else {
oo
</script>
</body>
of
</html>
Pr
JavaScript Cookies
• JavaScript cookies are small data stored on a user’s device by a web
browser.
• These cookies play a crucial role in web development, enabling
websites to store and retrieve information about user preferences,
session states, and other data.
• Cookies facilitate a more personalized browsing experience by
allowing websites to remember user actions and preferences. They
are widely used for user authentication, tracking, and maintaining
session states.
23
Prof. Pooja Khot. – WEB TECHNOLOGY
ot
document.cookie property, which stores all cookies as a string.
• Kh
To extract specific values, developers often create functions that
parse this string. Security considerations, like proper decoding and
ja
HttpOnly attributes, are crucial.
oo
.P
values or attributes.
Pr
24
Prof. Pooja Khot. – WEB TECHNOLOGY
Introduction to VBScript
ot
Kh
The VBScript stands for Visual Basics Script language. Basically it is
the combination of Visual Basic programming language
ja
and JavaScript language. VBScript was invented and maintained by
oo
25
Prof. Pooja Khot. – WEB TECHNOLOGY
• Microsoft Edge
ot
<!-- Paste VBScript Here -->
</body>
Kh
</html>
ja
oo
• Step 2: Paste the below code inside the body tag of your HTML
.P
code, or you can paste it inside the head tag. Exactly the same as you
have done with JavaScript.
of
Code:
Pr
<script type="text/vbscript">
document.write("Hello students, greeting from Us")
</script>
• Step 3: Combine both the code and run it on Microsoft Edge and you
will get the below output in the console.
Code:
<!DOCTYPE html>
<html>
<head>
<title>VBScript Introduction</title>
</head>
26
Prof. Pooja Khot. – WEB TECHNOLOGY
<body>
<script type="text/vbscript">
document.write("Welcome to Delhi")
</script>
</body>
</html>
Output:
Welcome to Delhi
# Disadvantages of VBScript:
• The VBScript code will be processed by Microsoft Edge only. Other
browsers except Microsoft Edge (like Chrome, Firefox, Safari, Opera
ot
etc) will not process the VBScript code.
• Kh
The VBScript code will run only Windows Operating System
platform. Other operating systems (like Linux, Mac, etc) will not run.
ja
• The VBScript code is used as a default scripting language of ASP.
oo
# Form Building
.P
• First a form is created, into which a user can enter the required
Pr
details.
• This data is then sent to the web server, where it is interpreted,
often with some error checking.
• If the PHP code identifies one or more fields that require
reentering, the form may be redisplayed with an error message.
• When the code is satisfied with the accuracy of the input, it takes
some action that usually involves the database, such as entering
details about a purchase.
To build a form, you must have at least the following
elements:
o An opening <form> and closing </form> tag.
27
Prof. Pooja Khot. – WEB TECHNOLOGY
ot
Kh
ja
oo
.P
of
Pr
28