WTAD Lecture Notes

WTAD Lecture Notes

 

Introduction to HTML – only basic structure and tags

 

  • Concept of WWW, IP Address, Domain, Hosting
  • Concept of Client Server
  • Concept of Web Server like IIS, Apache, WAMP, XAMPP
  • Structure of Internet Address, http://www.google.com
  • IP V4, V6
  • FTP

 

  • Introduction to Browser
  • Editors (Notepad, Notepad++,Dreamweaver, Eclipse, TextEdit, etc)
  • Introduction to HTML
  • HTML Tag
    • Paired Tags
    • Singular Tags
  • Most frequently used All HTML Tags:
    • <html>
      • <head>
        • <title>
      • <body background=”image1.png” backcolor=”#RRGGBB”>
        • <b>
        • <i>
        • <u>
        • <p>
        • <center>
        • <font face=”arial” size=”2″ color=”#FF0000″>
        • <br/>
        • <h1>
        • <h2>
        • <h3>
        • <h4>
        • <h5>
        • <h6>
        • <div>
        • <hr width=”50%” size=”2″ align=”center”>

Introduction to HTML – only basic structure and tags

 

<ul>

  • <li>
  • <ol>
    • <li>
  • <table border=”1″ cellspacing=”” cellpadding=””>
    • <tr>
      • <td>
      • <td colspan=”2″ rowspan=”2″>
      • <th>
    • <a name=”top”>
    • <a href=”#top”>
    • <a href=”mailto:noreply@adarshspatel.in”> Email Me </a>
    • <a href=”page2.html” target=”_blank”> Link Name </a>
    • <a href=”page2.html#Bookmark1″ target=”_blank”> Link Name </a>
    • <img src=”images/image1.png” alt=”Image1 small desc”> </img>
    • <form>
      • <input type=”text”>
      • <input type=”password”>
      • <input type=”button”>
    • <frameset rows=”30%,*”>
      • <frame src=”page1.html”>
  • How to Print Special Character in HTML
    • Space : &nbsp;
    • < : &lt;
    • > : &gt;
    • & : &amp;
    • “ : &quote;


 Overview of Java Script

JavaScript is object oriented language that allows creation of interactive Web Pages.

Advantages of JavaScript:

  • An Interpreted Language
  • Embedded within HTML
  • Minimal Syntax – Easy to Learn
  • Quick Development
  • Designed for Simple, Small Program
  • Performance
  • Procedural Capabilities
  • Designed for Programming user events
    • Button Event
    • Mouse Over
  • Easy Debugging and Testing
  • Platform Independence / Architecture Neutral

Sample Example 1

<script language=”JavaScript”>

//JavaScript code can be added here….

</script>

Data Types and Literal

  • Number
  • Boolean
  • String
  • Null

Type Casting

Creating Variable

var <variable_name> = value;

Get Input from User

var myname = prompt(“Enter Your Name”,”Name”);

JavaScript Array

<script language=”JavaScript”>

subjectarray = new Array();

subjectarray[0]=”c”;

subjectarray[1]=”cpp”;

subjectarray[2]=”java”;

alert(subjectarray[0]);

</script>

 

 

JavaScript Array find Length

<script language=”JavaScript”>

subjectarray = new Array();

subjectarray[0]=”c”;

subjectarray[1]=”java”;

subjectarray[2]=”java”;

alert(subjectarray.length); //3

</script>

 

Operators and Expressions in JavaScript

Arithmetic Operator

Operator Description
+ Operator
Subtraction
* Multiplication
/ Division
% Modulus
Decrement
++ Increment

 

Logical Operator

Operator Description
&& Logical AND
|| Logical OR
! Logical NOT

 

Comparison Operator

Operator Description
== Equal
!= Not Equal
< Less Than
> Greater Than
<= Less Than Equal to
>= Greater Than Equal to
=== Strictly Equal
!== Strictly Not Equal

String Operator

Operator Description
+ Concatenation

 

Assignment Operator

Operator Description
= Assign
+= Increment + Assign
-= Decrement + Assign
*= Multiply + Assign
/= Divide + Assign
%= Modulus + Assign

 

Conditional Operators

condition ? value1 : value2

Special Operator

delete mysubjectarray[3];

new Array()

Conditional & Looping Structure

  • if
  • for
  • while
  • break
  • continue
  • ..while
  • switch

Explicit Conversion

  • parseInt() : var a =parseInt(form1.text1.value);
  • parseFloat() : var a =parseFloat(form1.text1.value);
  • eval() : var ans = eval(“5+5”);

User defined Function

<script language=”javascript”>

function fun_to_find_max(a,b)

{

if(a>b)

return a;

else

return b;

}

function fun1()

{

var ans = fun_to_find_max(10,20);

alert(ans + “”);

}

</script>

Put your string to html page

  • write(“This is sample Text”);

Alert Dialog

alert(“Good Morning”);

Prompt Dialog

var myname = prompt(“Enter Your Name”,”Name”);

Confirm Dialog

var myname = confirm(“Are you Sure ?”,”Confirm”);

if(myname==true)

{

alert(“OK Selected”);

}

else

{

alert(“Cancel Selected”);

}

 

 

Document Object Model

Code :

<html>

<head>

<script language=”javascript”>

function fun_to_find_max(a,b)

{

if(a>b)

return a;

else

return b;

}

function fun1()

{

var ans = fun_to_find_max(f1.t1.value,f1.t2.value);

alert(ans + “”);

}

</script>

</head>

<body>

<form name=”f1″>

No 1 : <input type=”text” name=”t1″>

No 2 : <input type=”text” name=”t2″>

<input type=”button” value=”find” onclick=”fun1()”>

</form>

</body>

</html>

 

 

DOM

 

Output:

 

 

 

 

 

 

 

JavaScript Event Handler

 

Mouse Related Events

Event Description
onclick The event occurs when the user clicks on an element
oncontextmenu The event occurs when the user right-clicks on an element to open a context menu
ondblclick The event occurs when the user double-clicks on an element
onmousedown The event occurs when the user presses a mouse button over an element
onmouseenter The event occurs when the pointer is moved onto an element
onmouseleave The event occurs when the pointer is moved out of an element
onmousemove The event occurs when the pointer is moving while it is over an element
onmouseover The event occurs when the pointer is moved onto an element, or onto one of its children
onmouseout The event occurs when a user moves the mouse pointer out of an element, or out of one of its children
onmouseup The event occurs when a user releases a mouse button over an element

 

Keyboard Related Events

Event Description
onkeydown The event occurs when the user is pressing a key
onkeypress The event occurs when the user presses a key
onkeyup The event occurs when the user releases a key

 

Form Related Events

Event Description
onblur The event occurs when an element loses focus
onchange The event occurs when the content of a form element, the selection, or the checked state have changed (for <input>, <keygen>, <select>, and <textarea>)
onfocus The event occurs when an element gets focus
onfocusin The event occurs when an element is about to get focus
onfocusout The event occurs when an element is about to lose focus
oninput The event occurs when an element gets user input
oninvalid The event occurs when an element is invalid
onreset The event occurs when a form is reset
onsearch The event occurs when the user writes something in a search field (for <input=”search”>)
onselect The event occurs after the user selects some text (for <input> and <textarea>)
onsubmit The event occurs when a form is submitted

 

Frame or Object Related Events

Event Description
onabort The event occurs when the loading of a resource has been aborted
onbeforeunload The event occurs before the document is about to be unloaded
onerror The event occurs when an error occurs while loading an external file
onhashchange The event occurs when there has been changes to the anchor part of a URL
onload The event occurs when an object has loaded
onpageshow The event occurs when the user navigates to a webpage
onpagehide The event occurs when the user navigates away from a webpage
onresize The event occurs when the document view is resized
onscroll The event occurs when an element’s scrollbar is being scrolled
onunload The event occurs once a page has unloaded (for <body>)

 

 

 

The Form Object

HTML Form is used to gather data from the user. Some of the commonly used form:

  • Registration Form
  • Login Form
  • Change Password Form
  • Update Profile Form
  • Compose Email Form
  • Etc

 

JavaScript is used for:

  • Validate form
  • Check for empty value
  • Validate range.

 

JavaScript Validation Example

<html>

<head>

<title> JavaScript Validation Example</title>

<script language=”javascript”>

function fun1()

{

if(form1.sname.value==””)

{

alert(“Enter Name”);

form1.sname.focus();

}

else if(form1.agree.checked != true)

alert(“Select I Agree Button”);

else

alert(“Thanks !”);

 

}

</script>

</head>

<body>

<form name=”form1″>

Name : <input type=”text” name=”sname”>      <br><br>

Gender: <br> Male <input type=”radio” name=”gender” checked=”true”><br>

Female <input type=”radio” name=”gender”>   <br><br>

Agree <input name=”agree” type=”checkbox” value=”agree”><br><br>

<input type=”button” value=”Submit” onclick=”fun1()”>

</form>

</body>

</html>

 

 

 

 


 

Mathematical Operation

<html>

<head>

<title>Mathematical Operation</title>

<script language=”javascript”>

function fun1()

{

form1.output.value = eval(form1.input.value);

}

</script>

</head>

<body>

<form name=”form1″>

Write down your Expression : <input type=”text” name=”input”>            <br><br>

Output: <input name=”output” type=”text”><br><br>

<input type=”button” value=”Submit” onclick=”fun1()”>

</form>

</body>

</html>

 

 

 

 

 

Servlet Basics

Java servlet is a Java programming language program that extends the capabilities of a server

The role of Web middleware

  1. Read the explicit data sent by the client.
  2. Read the implicit HTTP request data sent by the browser.
  3. Generate the results.
  4. Send the explicit data (i.e., the document) to the client.
  5. Send the implicit HTTP response data.

Advantages of Servlet

  • Efficient
  • Convenient
  • Powerful
  • Portable
  • Inexpensive
  • Secure

Servlet can handle

  1. GET Request (Default)
  2. POST Request

Basic Servlet Structure

  • Both doGet() and doPost() take two arguments:
    • HttpServletRequest
    • HttpServletResponse
  • The HttpServletRequest lets you get at all of the incoming data; the class has methods by which you can find out about information such as form (query) data, HTTP request headers, and the client’s hostname.
  • The HttpServletResponse lets you specify outgoing information such as HTTP status codes (200, 404, etc.) and response headers (Content-Type, Set-Cookie, etc.).

 

  • Most importantly, HttpServletResponse lets you obtain a PrintWriter that you use to send document content back to the client. For simple servlets, most of the effort is spent in println statements that generate the desired page.
  • Since doGet and doPost throw two exceptions (ServletException and IOException), you are required to include them in the method declaration

 

  • Finally, you must import classes in
    • io (for PrintWriter, etc.),
    • servlet (for HttpServlet, etc.), and
    • servlet.http (for HttpServletRequest and HttpServletResponse).

 


FileName: Servlet1.java

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class Servlet1 extends HttpServlet

{

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException

{

PrintWriter out = response.getWriter();

out.println(“Hello World”);

}

}

 

A Servlet That Generates HTML

 

  1. Tell the browser that you’re sending it HTML.
  2. Modify the println statements to build a legal Web page.
  3. Check your HTML with a formal syntax validate.

 

Servlet Packaging

  1. Place the files in a subdirectory that matches the intended package name
  2. Insert a package statement in the class file

 

 

 

The servlet life-cycle

A servlet life cycle can be defined as the entire process from its creation till the destruction. The following are the paths followed by a servlet

  1. init ()
  2. service() ( doGET(), doPOST() )
  3. destroy()

 

 

 

 

Reading data from Servlets

 Reading Single Values:

request.getParameter(“par1”)

 

Reading Multiple Values:

Enumeration parnames = request.getParameterNames();

while( parnames.hasMoreElements() )

{

String parametername = (String) parnames.nextElement();

String parametervalue = request.getParameter(parametername);

}

 

 

 

 

 

 

 

 

Reading Request Headers

 

  • getCookies();
  • getAuthType()
  • getRemoteUser()
  • getContentLength()
  • getContentType()
  • getDateHeader()
  • getIntHeader()
  • getHeaderNames()
  • getHeaders()
  • getMethod()
  • getRequestURI()
  • getQueryString()
  • getProtocol()

 

Understanding HTTP/1.1 Request Headers

  • Accept (MIME Types)
  • Accept-Charset (eg ISO-8859-1)
  • Accept-Encoding (eg. Zip)
  • Accept-Language (eg. en-us)
  • Authorization (Verification)
  • Connection (Oriented/Less)
  • Content-Length (Size of File for Uploading)
  • Cookie
  • Host (PC Details)
  • If-Modified-Since
  • If-Unmodified-Since
  • Referrer (Previous Page)
  • User-Agent (browser)

 

Changing the page according to how the user got there

String r = Request.getHeader(“referer”)

If(r.indexOf(“login.jsp”)

{

// handle your request

}

else

{

//Invalid request

}

 

 

Unit 3 : Accessing the Standard CGI(Common Gateway Interface) Variables

 

Servlet Equivalent of CGI Variables

  1. AUTH_TYPE : request.getAuthType();
  2. CONTENT_LENGTH : getContentLenght();
  3. CONTENT_TYPE : getContentType();
  4. DOCUMENT_ROOT : getRealPath();
  5. HTTP_XXX_YYY :
  6. PATH_INFO : getPathInfo();
  7. PATH_TRANSLATED : getPathTranslated();
  8. QUERY_STRING : getQueryString();
  9. REMOTE_ADDR : getRemoteAddr();
  10. REMOTE_HOST : getRemoteHost();
  11. REMOTE_USER : getRemoteUser();
  12. REQUEST_METHOD : getMethod();
  13. SCRIPT_NAME : getServletPath();
  14. SERVER_NAME : getServerName();
  15. SERVER_PORT : getServerPort();
  16. SERVER_PROTOCOL : getProtocol();
  17. SERVER_SOFTWARE : getServerInfo();

 

 

 

 

Unit 4 : Generating the Server Response

 

A typical Request will look like :

GET /servlet/SomeName HTTP/1.1

Host: …

Header2: …

HeaderN:

(Blank Line)

 

A typical response looks like this:

HTTP/1.1 200 OK

Content-Type: text/html

Header2: …

HeaderN: …

(Blank Line)

<HTML>

<HEAD>…</HEAD>

<BODY>..</BODY></HTML>

 

Unit 4: HTTP Status Codes

 

HTTP 1.1 Status Codes

  • 100–199: Informational
  • 200–299: Request was successful
  • 300–399: moved
  • 400–499: error by client
  • 500–599: error by server.

 

Specifying Status Codes

Setting 302 and 404 Status Codes

  • public void sendRedirect(String url) : The sendRedirect method generates a 302 response along with a Location header giving the URL of the new document.
  • public void sendError(int code, String message) : The sendError method sends a status code (usually 404) along with a short message that is automatically formatted inside an HTML document and sent to the client.

Using Redirections

If browser is IE then redirect to google.com else redirect to yahoo.com

String userAgent = request.getHeader(“User-Agent”);

if ( (userAgent != null) && (userAgent.indexOf(“MSIE”) != -1) )

{

response.sendRedirect(“http://www.google.com”);

}

else

{

response.sendRedirect(“http://www.yahoo.com”);

}

HTTP Response Headers

Setting Response Headers from Servlets

  • setHeader(String headerName, String headerValue)
  • setDateHeader(String header, long milliseconds)
  • setIntHeader(String header, int headerValue)

 

Understanding HTTP / 1.1 Response Headers

  • Allow
  • Cache-Control setHeader(“Cache-Control”, “no-cache”);

response.setHeader(“Pragma”, “no-cache”);

  • Connection
  • Content-Disposition (Content-Disposition: attachment; filename=some-file-name)
  • Content-Encoding
  • Content-Language
  • Content-Length
  • Content-Type (response.setContentType(“text/html; charset=Shift_JIS”);)
  • Expires (response.setDateHeader(“Expires”, currentTime + tenMinutes);)

Adarsh Patel

My Self Adarsh Suryakant Patel. Currently I am working as Assistant Professor at Parul Instiute of Engineering and Technology, MCA Department, Limda, Vadodara. Major Responsibility : * Lectures * Organizing Training and Expert Sessions for * Placement and Recruitment * Faculty Representative