PPT on javascript ajax and css and some points related to server

PROJECT REPORT
on
JSP ,AJAX &Web
development

Overview
 Introduction of JSP
 Why we learn JSP?
 Architecture of JSP
 JSP Execution Procedure
 What is a JSP Page?
 Example of JSP Page
 Scripting Elements in JSP
 Predefined Variables-Implicit Objects in JSP

Introduction: what is JSP?
 Java Server Pages(JSP) is a server side technology that
simplifies the developing of dynamic web sites.
 It is a technology developed by Sun Microsystems in
1999.
 JSP pages are HTML pages with embedded code that
allows to access data from Java code running on the
server.
 JSP technology is a key component in the Java2 platform
enterprise edition.

Why we learn JSP?
 coding in JSP is easy.
 Reduction in the length of code.
 Connection to database is easier.
 Make interactive websites.
 Portable , Powerful , flexible and easy to
maintain.
 Easier to read data from user.
 Tracking the user.

What is JSP Page?
A JSP page is a page created by the web developer that
include JSP technology specific and custom tags,in
combination with other static tags.A JSP page has the
extension .jsp or .jspx this signals to the web server that
the JSP engine will process elements on this page.using
the web xml deployment descripter,additional extensions
can be associated with the JSP engine.

Simple JSP page
<html>
<h1> First JSP Page </h1>
<body>
<% out.println(“welcome”);%>
</body>
</html>

Scriping Elements in Jsp
1. Scriptlet Tag in JSP
 In JSP,Java code can be written inside the JSP page
using Scriptlet tag.
Syntax:
<% java source code %>
Example:
<html>
<body>
<% out.print(“Hello”); %>
</body>
</html>

2.Expression Tag
 Code placed within expression tag is written to the output stream
of the response.So,no need to write out.print() to write data.
Syntax:
<%= Statement %>
Example:
<html>
<body>
<%= “Hello world” %>
</body>
</html>

3.Declaration Tag
 Is used to declare fields and methods.The code written inside this
tag is placed outside the service() method of auto generated
servlet.
Syntax:
<%! Statement %>
Example:
<html>
<body>
<%! int data=60; %>
<%= “value is: “ +data %>
</body>
</html>

Session implicit object
 The Java developer can use this object to set , get or remove attribute or to
get session information.
Request implicit object
 Access to information associated with a request.This object is normally used
in looking up parameter values and cookies.
<% String str = request.getParameter(“uname”); %>
Exception implicit object
 This object can be used to print the exception. But it can only be used in error pages.
out implicit object
 For writing any data to the buffer , JSP provides an implicit object names out.
Syntax:
out.print();
Predefined Variable - implicit objects in JSP

What is HTML?
 HTML stands for Hyper Text Markup Language is the main markup
language for creating web pages and other information that can be
displayed in a web browser.
What is CSS?
CSS stands for Cascading Style Sheets.
Styles define how to display HTML elements.
Its most common application is to style web page written in HTML
and XHTML.

HTML5
 HTML5 is a markup language for structuring and processing
content for the World Wide Web and a core technology of the
internet.
 It extends, improves and rationalises the markup available for
documents, and introduces markup and application programming
interfaces(APIs) for complex web applications.
 For the same reasons, HTML5 is also a potential candidate for
cross-platform mobile applications.

Features of HTML5
 Offline/Storage
 Multimedia
 Graphics
 Semantics and Markup

HTML5 offers new semantic elements to clearly define different
parts of a web page:
Semantic elements = Elements with Meaning
 <header>
 <nav>
 <Section>
 <article>
 <figcaption>
 <figure>
 <footer>

CSS3
 CSS is used to control the style and layout of web pages.
CSS3 Modules:
 CSS3 is split up into “modules”.The old specification has been split
into smaller pieces and new are also added.
 Some of the most important CSS3 modules are.
 Selectors
 Box Model
 Backgrounds and Borders
 Text Effects
 Animations
 2D/3D Transformations

CSS3 Transformation
 In CSS3,we can move ,scale , turn,spin and stretch elements.
A transformation is an effect that change element shape , size and
position.
CSS3 2D Transformation methods:
 translate()
 rotate()
 scale()
 skew()

translate() method-
rotate() method-
scale() method-

CSS3 Borders
 In CSS3 the following border properties are:
border-radius
border-shadow
border-image
Border-radius:
 In CSS3,the border property is used to create rounded corners.
Example:
div{
border:2px solid;
border-radius:25px;
}

AJAX
 Ajax stands for Asynchronous JavaScript and XML.
What is AJAX?
Not a language itself
A group of related exiting technology compiled together or
technique to make web pages feel more responsive.
Makes interactive web pages by providing a way for the web
page to interact with the server.
AJAX is a framework

Why AJAX is important?
 AJAX enables a much better user experience for Web sites and
applications.
 By using AJAX we can load a specific portions of a page that need to be
changed.
 It further reduce network traffic.

The Core Components:
 HTML & CSS- for presenting.
 JavaScript-for local processing.
 Document Object Model(DOM)- to access data inside the page or
to access elements of an XML file on the server.
 XMLHttpRequest object- to read/send data to the server
asynchronously.

XML HttpRequest Object Properties:

Example of Ajax:
<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>

Benefits of using AJAX:
 Helps to build fast , dynamic websites.
 Improves sharing of resources: it facilitates to use the power of all
the client computer rather than just a unique server and network.
 Ajax allows to perform processing on client computer(in JavaScript)
with data taken from the server thereby reducing server load by
moving a part of server functionality to client side.
 Ajax can selectively modify a part of a page displayed by the browser
, and update it without the need to reload the whole document with
all images , menus etc. This bridges the gap between desktop
and web applications.

PPT on javascript ajax and css and some points related to server

More Related Content

Similar to PPT on javascript ajax and css and some points related to server (20)

Recently uploaded (20)

PPT on javascript ajax and css and some points related to server