BITM3730 10-4.pptx

JavaScript
BITM 3730
Developing Web Applications
10/4

JavaScript Basics
• JavaScript is embedded in an HTML file using
<script></script>
• .js is the file extension for JavaScript
• Functions make up the majority of JavaScript
• If statements are used for condition execution in JavaScript
• You comment out a single line of code using //

JavaScript Important Notes
• Like Java [uses functions]
• Interpreted by the browser, not compiled
• Complimentary to HTML, used for dynamic web pages and form validation
• OS and Browser (for the most part) independent
• JavaScript is either embedded in a webpage using <script> …</script> or in a separate file
usually with a .js extension.
• Like stylesheets and css files, JavaScript and js files allows for portability and reusability.
• To reference an external JavaScript: <script src=“scripts.js”></script>

DIV and SPAN Reminder
• DIV – gives you the ability to identify particular sections (divisions) of a
document using the id attribute. Particularly useful in AJAX and dynamic
HTML.
• SPAN – has the same attributes and uses above. Both tags have the style,
class and id attributes.
• Primary difference between the two is the DIV tag inherently breaks a
paragraph.
• Both are typically used to apply styles to HTML documents.

JavaScript Intro
• JavaScript allows for client-side code execution.
• Similar to Java
• Typically used for client-side form validation, dynamic HTML and AJAX.
• Example:
<script>
document.write(“Our first JavaScript”);
</script>
• In the above example, code is written directly in the HTML document.
• In order for code to be reusable, the code can be stored in a .js file.

Basic Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/scripts.js" ></script>
</head>
<body>
<div>TODO write content</div>
<button onclick="myFirstFunction();" >Click Me!</button>
</body>
</html>

Function Being Called
function myFirstFunction()
{
alert("our test works!")
}

onclick
• Using standard HTML, a webpage is static (i.e. it won’t change until the
HTML file is changed)
• Using dynamic HTML and events like onClick, the content of a page or a tag
can be changed on the fly

onclick Example HTML
<html>
<head>
<title></title>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="myDIV">TODO write content</div>
<button id="divChange" onclick="divChange()">Change the DIV value</button><br/>
<button id="divChangeBack" onclick="divChangeBack()">Change the DIV value back</button><br/>
<button id="docChange" onclick="docChange()">Change the entire document</button><br/>
</body>
</html>

onclick JavaScript code
function divChange()
{
previousDIV = document.getElementById("myDIV").innerHTML;
document.getElementById("myDIV").innerHTML="DIV has changed";
}
function divChangeBack()
{
document.getElementById("myDIV").innerHTML = previousDIV;
}
function docChange()
{
document.write("Document has changed");
}

Another onclick Example HTML
<html>
<head>
<title></title>
<link href="styles.css" rel="stylesheet" type="text/css" title="Default Style" id="defaultStyle" />
<link href="styles2.css" rel="stylesheet" type="text/css" title="Mobile Style" id="mobileStyle"/>
</head>
<body>
<h1>Here is my H1, watch it change.</h1>
<p class="justified">this is a test of the justified class</p>
<button id="styleSwitchButton" onclick="switchStyle()">Switch Style</button>
</body>
</html>

Another onclick Example JS
function switchStyle()
{
styleDefault = document.getElementById("defaultStyle");
styleMobile = document.getElementById("mobileStyle");
if (styleDefault.disabled)
{
styleDefault.disabled = false;
styleMobile.disabled = true;
}
else
{
styleDefault.disabled = true;
styleMobile.disabled = false;
}
}

JS Functions
• JavaScript code can be written as a block or code that will execute once or as
functions
• Functions are useful when they are used again and again within a page or a
website. One use for a function is form validation. Custom functions can be
written to validate the form before it is submitted.

JS Functions Cont.
• The function syntax is
function myFunction(){
• …..;
}
• In the above example, the function name is myFunction and it takes no arguments
• A argument is passed for use within the function
• A function can return a value as well so it can be assigned to an outside variable.
• function myAdditionFunction(a, b) {
return a + b;
}

JS Comments
• When writing code, it is useful to embed comments, so the purpose of the
code is understood
// - this comments out a single line
• /*
• */ comments all content between and ignores line breaks

document
• Similar to java, there are objects within JavaScript
• The main one to remember is the document object. This object references the entire HTML
document.
• One typical use is the document.getElementById(“myid”).innerHTML=“some string”;
• In the above example, the code will find an HTML element such as a <p>, <div> or a
<span> and change the “value” of that tag (i.e. the content between the open and close
tag).
• In order for the element to be referenced, the id attribute must be used in the opening tag
(<div id=“myid”>This text will change</div>

Variables
• In programming, variables allow for the storage of a value so it can be referenced later within the code.
• JavaScript creates variables using the following syntax:
var foo = “a”;
var bar = “b”;
• Javascript has no types. Programming languages typically have types like integer, string, decimal. Javascript stores everything using the same
variable type.
• It is possible to create a variable with no initial value
var myVar;
• var x = 1;
var y = 2;
var z = x + y;
• var x = “test”;
var y = “string”;
var z = x + “ “ + y;

Scope
• Variables have a limited scope when defined in a function.
Function myFunction() {
var myLocalVar = 1; //this var will not be accessible from outside
}

Operators
• + adds two operands
• - subtracts second operand from the first
• * multiply both operands
• / divide first operand by the second operand
• ++ increments the operator by one
• -- decrements the operator by one
• == Checks if two operands are equal, if so,
returns true, otherwise false
• != Checks if two operands are not equal, if so,
returns true, otherwise false
• > Checks if the first operand is greater than the
second operand
• < Checks if the first operand is less than the
second operand
• >= Checks if the first operand is greater than or
equal to
• <= Checks if the first operand is less than or
equal to

Additional Operators
• && returns true if both statements are true
• || returns true if either statement is true
• ^ returns true if only one statement is true
• = simple assignment operator
• += adds right operand to the left operand and assigns to
the left operand
• -= subtracts right operand from the left operand and
assigns to the left operand
• *= multiples right operand with the left operand and
assigns to the left operand.
• /= divides the left operand with the right operand and
assigns to the left operand.
• C += A is equal to c = c+a
• C -= A is equal to c = c-a
• C *= A is equal to c = c * a
• C /= A is equal to c = c/a

If Statement
• If statements are used for conditional execution.
• Else statements are used to run a different set of code if the if statement doesn’t evaluate to true
• The syntax in Java is:
if (condition)
{
code to be executed
}
else
{
code to be executed
}

If in Action
var alertString='';
var firstName=document.getElementById("firstName");
var lastName=document.getElementById("lastName");
if (firstName.value == "")
{
alertString+='Enter your first namen';
}
if (lastName.value == "")
{
alertString+='Enter your last namen';
}
if (alertString != "")
{
alert(alertString);
}

AJAX
• Asynchronous JavaScript and XML
• Why asynchronous? – Allows time for the server to process the request and return the results when
complete. JavaScript proceeds while the server is processing
• Uses XMLHttpRequest – builtin javascript object for sending requests for XML using JavaScript
• Two most useful methods for XMLHttpRequest are open and send.
• Open method has the following parameters
• Method – GET or POST. GET will be sufficient most times however it won’t be sufficient when a uncached
copy of the file is necessary
• url – the URL of the xml file or script
• Async – true or false – send the method asynchronously or not

AJAX Cont.
• For the response from the server, you can use the responseText or
responseXML property of the XMLHttpRequest object
• responseText is used when the response consists of plain text
• responseXML is used when the response consists of XML

What is a Cookie?
• A small piece of data sent from a website and stored in a user’s web browser
while a user is browsing a website
• When the user browses the same website in the future, the data stored in the
cookie can be retrieved by the website.

JavaScript Cookie
• Name: the name of the cookie
• Value: the value of the cookie
• Expires: the date/time when the cookie expires automatically
• Path: the path of the cookie
• Domain: the name of the server that created the cookie
• Secure: whether to use encryption to read/set the cookie
• Only small amounts of data can be stored in a cookie
• Cookies are available via JavaScript only to the domain used when the cookie was created
• Cookies are available only to files in the same directory the cookie was created in (use path “/” to make a
cookie available to all files)

Setting a Cookie
• To set a cookie, you assign an appropriate value to document.cookie
• We can write a function so that we don’t need to write the same code again and again
function setCookie(name, value, expireDays)
{
var expires = new Date();
expires.setDate(expires.getDate() + expireDays);
var myCookie = name + "=" + escape(value) +
";expires=" + expires.toGMTString() +
";path=/";
document.cookie = myCookie;
}

Explaining What We Just Did
• Var expires is set to a new Date object. An object is a data structure which contains
properties and its behavior.
• The above Date object is created with no date and time. The Date() function is
called its constructor. When setDate is called, it is set with the current date and the
number of days in expiresDays is added hence setting the expire time.
• The myCookie var is nothing but a string. The escape function “escapes” characters
within a string. The characters it escapes are used in the URL and can cause the
HTTP request to fail
• In order to delete a cookie, we can just call setCookie(name, “”, -1). This will clear
out the cookie name and value and set it to expire to yesterday

Getting a Cookie
function getCookie(name)
{
if ((document.cookie == null) || (document.cookie == ""))
{
return "";
}
else
{
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++)
{
var cookie = cookies[i].split('=');
if (removeLeadingSpace(cookie[0]) == name)
{
return unescape(cookie[1]);
}
}
return "";
}
}

JavaScript Function Test
function myWhileFunction(a, b)
{
var i = 1;
var counter = 1;
while (counter <= b)
{
i = i * a;
counter++;
}
return i;
}
• Explain how many times the following
while loop will run and what the value
of i will be when it is complete when
called with myWhileFunction(2,8)

Test Answer
• It will run 8 times
• i will equal 256
function myWhileFunction(a, b)
{
var i = 1;
var counter = 1;
while (counter <= b)
{
i = i * a;
counter++;
}
return i;
}

Important Notes
• XML works well with JavaScript
• JavaScript can help in getting a cookie in addition to setting a cookie
• A cookie stores small amounts of data
• The expires function is used to set an expiration date on a cookie
• Cookies are available in the same directory the cookie was created in

XML and JavaScript [HTML file]
<html>
<head>
<title></title>
</head>
<body onload="showData()">
<div id="addressbook"></div>
</body>
</html>

XML and JavaScript [JS file]
function showData()
{
var xml = new XMLHttpRequest();
var addressHTML = "";
var addressbook = document.getElementById("addressbook");
xml.open("GET", "addressdata.xml", false);
xml.send("");
var xmlDoc = xml.responseXML;
var names = xmlDoc.getElementsByTagName("name");
var mails = xmlDoc.getElementsByTagName("email");
for (var i = 0; i < names.length; i++)
{
var name = names[i].childNodes[0].nodeValue;
var mail = mails[i].childNodes[0].nodeValue;
addressHTML += "<li>" + name + "(" + mail + ")</li>n";
}
addressbook.innerHTML = addressHTML;
}

Concerns with Cookies
• Cookies can be overwritten in the browser.
• Some browsers allow for this and others can be edit by opening the file which stores
the cookies.
• Cookies are prime targets for sql injection. Imagine you are performing a
select based on the username:
• select student_id from students where username = “<username>” where <username>
is the valued stored in the cookie.

onclick Display Date and Time
<!DOCTYPE html>
<html>
<body>
<h2>Date and Time</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>

JavaScript Compared to HTML/CSS
• HTML to define the content of web pages
• CSS to specify the layout of web pages
• JavaScript to program the behavior of web pages

More onclick Examples
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time
is?</button>
<p id="demo"></p>
</body>
</html>

Another onclick Example
<!DOCTYPE html>
<html>
<body>
<button onclick="this.innerHTML=Date()">The time is?</button>
</body>
</html>

Common JS/HTML Elements
Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML
element
onmouseout The user moves the mouse away from an
HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page

JavaScript - Java
• Arrays
• Booleans
• Math Class
• Random Class
• Objects
• Functions
• Assignment requirements

JavaScript Community
• https://www.javascript.com/
• Tutorials
• Questions – Community
• And More!

Basics
• Java programming language can be embedded into JSP
• JSP stands for Java Server Pages
• JSP is compiled on servlets
• JSP is a server-side web technology
• The primary function of JSP is rendering content
• The primary function of a servlet is processing

JSP – Java Server Page
• Based on HTML. JSP pages can be based on HTML pages, just change
the extension
• Server-side web technology
• Compiled into servlets at runtime
• Allows for embedding of Java code directly into the script using
<%.....%>
• Requires Apache Tomcat installation on server

Servlet
• Compiled code used to deliver content over the HTTP protocol
• Developed as a Java class conforming to the Java Servlet API
• Typically used in conjunction with JSPs for more extensive processing

JSP vs Servlet
• JSPs are more geared towards rendering content
• Servlets are better suited for processing since they are pre-compiled
• Consider the concept of Model-View-Controller (MVC)
• Model is your business model which houses all of the business logic
• View is your users’ view into your application. In this case it would be JSPs
• Controller is the glue between the model and the view
• Spring and Struts are two popular MVCs used in Java web applications
• Servlets will typically process request data, enrich it (process it) and forward the request
onto a JSP for display

Working Together
• JavaServer Pages (JSP) is a Java standard technology that enables you to write
dynamic, data-driven pages for your Java web applications.
• JSP is built on top of the Java Servlet specification.
• The two technologies typically work together, especially in older Java web
applications.
• From a coding perspective, the most obvious difference between them is that with
servlets you write Java code and then embed client-side markup (like HTML) into
that code, whereas with JSP you start with the client-side script or markup, then
embed JSP tags to connect your page to the Java backend.

JSP vs. Everyone Else
• JSP vs. Active Server Pages (ASP): The advantages of JSP are twofold. First, the dynamic part
is written in Java, not Visual Basic or other MS specific language, so it is more powerful and
easier to use. Second, it is portable to other operating systems and non-Microsoft Web servers.
• JSP vs. Pure Servlets: It is more convenient to write (and to modify!) regular HTML than to
have plenty of println statements that generate the HTML.
• JSP vs. Server-Side Includes (SSI): SSI is really only intended for simple inclusions, not for
"real" programs that use form data, make database connections, and the like.
• JSP vs. JavaScript: JavaScript can generate HTML dynamically on the client but can hardly
interact with the web server to perform complex tasks like database access and image processing
etc.
• JSP vs. Static HTML: Regular HTML, of course, cannot contain dynamic information.

Methods to Set HTTP Status Code
S.N
o.
Method & Description
1
public void setStatus ( int statusCode )
This method sets an arbitrary status code. The setStatus method
takes an int (the status code) as an argument. If your response
includes a special status code and a document, be sure to
call setStatus before actually returning any of the content with
the PrintWriter.
2
public void sendRedirect(String url)
This method generates a 302 response along with a Location header
giving the URL of the new document.
3
public void sendError(int code, String message)
This 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.

Applications of Servlet
• Read the explicit data sent by the clients (browsers). This includes an HTML form on a Web page
or it could also come from an applet or a custom HTTP client program.
• Read the implicit HTTP request data sent by the clients (browsers). This includes cookies, media
types and compression schemes the browser understands, and so forth.
• Process the data and generate the results. This process may require talking to a database,
executing an RMI or CORBA call, invoking a Web service, or computing the response directly.
• Send the explicit data (i.e., the document) to the clients (browsers). This document can be sent in
a variety of formats, including text (HTML or XML), binary (GIF images), Excel, etc.
• Send the implicit HTTP response to the clients (browsers). This includes telling the browsers or
other clients what type of document is being returned (e.g., HTML), setting cookies and caching
parameters, and other such tasks.

init
public void init(ServletConfig config)
throws ServletException
• Called by the servlet container to indicate to a servlet that the servlet is being placed into service.
• The servlet container calls the init method exactly once after instantiating the servlet. The init
method must complete successfully before the servlet can receive any requests.
• The servlet container cannot place the servlet into service if the init method
• Throws a ServletException
• Does not return within a time period defined by the Web server

destroy
public void destroy()
• Called by the servlet container to indicate to a servlet that the servlet is being taken
out of service. This method is only called once all threads within the servlet's
service method have exited or after a timeout period has passed. After the servlet
container calls this method, it will not call the service method again on this servlet.
• This method gives the servlet an opportunity to clean up any resources that are
being held (for example, memory, file handles, threads) and make sure that any
persistent state is synchronized with the servlet's current state in memory.

Servlet Life Cycle
• Servlet life cycle is governed by init(), service(), and destroy().
• The init() method is called when the servlet is loaded and executes only once.
• After the servlet has been initialized, the service() method is invoked to process a
request.
• The servlet remains in the server address space until it is terminated by the server.
Servlet resources are released by calling destroy().
• No calls to service() are made after destroy() is invoked.

GUIs
• A GUI (graphical user interface) is a system of interactive visual components
for computer software.
• A GUI displays objects that convey information and represent actions that
can be taken by the user.
• The objects change color, size, or visibility when the user interacts with them

Creating a Multiplication
Table
• Copy the code from Notes
• Visual example for entering 9 and 9 to
prompts:

Creating a
Multiplication
Table Prompts

JavaScript Form
• Copy code from Notes
• Visual:

Homework
Assignment 5:
Create a popup message using an event. Your JavaScript code will go inside an HTML file called
welcome.html. You should create a message on your page such as Hello and when you hover over the
message a popup shows up with a different message, such as Hello and Welcome to My site.

Building Homework 5
• <html>
• <head>
• <title>JS Event Example</title>
• <script type="text/javascript">

Building Homework 5
• function trigger()
• {
• document.getElementById("hover").addEventListener("mouseover", popup);
• function popup()
• {
• alert("Welcome to my WebPage!!!");
• }

Building Homework 5
• }
• </script>
• <style>
• p
• {
• font-size:50px;
• position: fixed;
• left: 550px;
• top: 300px;
• }
• </style>

Building Homework 5
• </head>
• <body onload="trigger();">
• <p id="hover">Welcome!!!</p>
• </body>
• </html>

Building Homework 5
• Remember to copy you WYSIWYG code into Notepad and save as
• welcome.html
• Do not save as .js file

BITM3730 10-4.pptx

Recommended

Recommended

More Related Content

Similar to BITM3730 10-4.pptx

Similar to BITM3730 10-4.pptx (20)

More from MattMarino13

More from MattMarino13 (20)

Recently uploaded

Recently uploaded (20)

BITM3730 10-4.pptx

Editor's Notes