BITM3730 8-29.pptx

Course Intro & HTML
BITM 3730
Developing Web Applications
8/29

Agenda
• Overview of Course
• Professor Availability Info
• Blackboard Introduction
• Grading & Grading Scale
• How to Succeed in BITM 3730 Without Really Trying
• Academic Dishonesty
• HTML Basics

Course Overview
• Review Course Description
• Review Course Objectives
• Review Course Competencies
• Review Participation Policy

Professor Availability Info
• Before class (4:30PM to start of class) and After class
• Digital hours available by appointment [via Skype, Zoom, or agreeable
technology tool]

Blackboard introduction
• Everything divided into our weekly meetings under CONTENT

Grading & Grading Scale
A = 93+
A- = 90-92
B+ = 87-89
B = 83-86
B- = 80-82
C+ = 77-79
C = 73-76
C- = 70-72
D+ = 67-69
D = 60-66
F = Below 60
Project Proposal Rough 5%
Project Proposal Final 10%
Project 30%
Project Presentation 20%
Participation 10%
HTML Assignment 5%
CSS Assignment 5%
JavaScript Assignment 5%
Forms/PHP Assignment 5%
Podcast Assignment 5%

Project Proposal Rough Draft
• Rough Draft (in 10/3
folder) due 10/23
• For this course you will be tasked with
creating a website (project). You will write
up a proposal describing your project.
Examples have been provided for you to
review and use as a guide. You are free to
create a personal website of interest to you
or for someone else (keeping in mind it will
be stored on the SHU server and therefore
not an official website).
• Your Rough Draft will be graded out of 50
points, with each section being scored 10
points each.

Project
Proposal
Rough
Draft
Criteria
Criteria Points
Introduction:
Describe you and who you are working for (Client name, project
title (i.e. My Dad's website), your name, and contact info
10
Problem:
Describe what you are doing (What are you doing? What is
website? e-commerce? static? dynamic?)
What issue does website solve? (example: selling shoes)
10
Solution:
Explain how you create the website and how it addressed the
issue mentioned above
10
Deliverables:
What will be included on your site? (pictures, pages, etc.)
include a drawing/sketch of your homepage
10
Process & Cost:
Describe the process you will use to create your project/website
Pretend you are charging someone for this project - calculate a
cost and explain how you come to this (i.e. $25 an hour times 50
hours of work could be your cost)
10

Project Proposal Final Draft
• Final Draft (in 10/31
folder) due 11/13
• For this course you will be tasked with
creating a website (project). You will write
up a proposal describing your project.
Examples have been provided for you to
review and use as a guide. You are free to
create a personal website of interest to you
or for someone else (keeping in mind it will
be stored on the SHU server and therefore
not an official website).
• Your Final Draft will be graded out of 150
points. Use the feedback provided from the
Rough Draft to make appropriate changes.

Project
Proposal
Final
Draft
Criteria
Criteria Points
Introduction:
Describe you and who you are working for (Client name, project
title (i.e. My Dad's website), your name, and contact info
10
Problem:
Describe what you are doing (What are you doing? What is
website? e-commerce? static? dynamic?)
What issue does website solve? (example: selling shoes)
35
Solution:
Explain how you create the website and how it addressed the
issue mentioned above
35
Deliverables:
What will be included on your site? (pictures, pages, etc.)
include a drawing/sketch of your homepage
35
Process & Cost:
Describe the process you will use to create your project/website
Pretend you are charging someone for this project - calculate a
cost and explain how you come to this (i.e. $25 an hour times 50
hours of work could be your cost)
35

Project
• In 11/21 folder
• Due 12/4
Criteria Points
Appearance:
Does the website visually look good?
25
Deliverables:
Did you include the items described in your proposal?
(most should be on your site)
50
Process & Cost:
Did you create the website described?
Does it look like you came in at your referenced cost?
50
Course Info:
Did you use course materials? (HTML, CSS, forms,
JavaScript, etc.)
75

Project Presentation
• In 12/5 folder (submit PPT to dropbox)
• Presentations on 12/5 and 12/12
• For this course you will be tasked
with presenting on your project. You
will put together a PPT describing
your project. Examples have been
provided for you to review and use as
a guide. Your presentation will be a
timed 10 minute presentation.
• Resources on professional
presentations will be provided.
Please submit your PPT by 12/4.

Project
Presentation
Criteria
Criteria Points
Presentation Content:
Intro slide with Name and info
Slides describing Project Proposal
Slides describing project or you can pull up your website
and explain it
Slides describing any issues you had
50
Duration:
Your presentation should be as close to 10 minutes as
possible without going over
10
Presentation:
Graded on clarity and professional presentation
Avoid uh, umm, etc. - just pause instead
Keep eye contact with audience
avoid swaying of arms, toe tapping, or other distracting
motions
40

How to Succeed in BITM 3730
Without Really Trying
• Ask questions with any issues
• Submit homework assignments on time
• Participate in class
• Come to class on time
• Focus efforts on project components!!

Academic Dishonesty
• Please see Academic Dishonesty paragraphs on Course Syllabus
• Unless otherwise specified your work submitted should reflect you completed 100%
of the work and did not have any assistance from a classmate [i.e. copying]
• You should be able to do all course work based on my instruction and/or similar
walkthroughs on YouTube

Tools Needed for Class
• WYSIWYG Editor
• Google WYSIWYG HTML Editor and choose the one you would like to use
• Always save your files in Notepad and open them in your browser to check
• WinSCP
• courses.shu.edu

What is HTML?
• HTML is the language for describing the structure of Web pages. HTML gives authors the
means to:
• Publish online documents with headings, text, tables, lists, photos, etc.
• Retrieve online information via hypertext links, at the click of a button.
• Design forms for conducting transactions with remote services, for use in searching for
information, making reservations, ordering products, etc.
• Include spread-sheets, video clips, sound clips, and other applications directly in their
documents.
• With HTML, authors describe the structure of pages using markup. The elements of the
language label pieces of content such as “paragraph,” “list,” “table,” and so on.

HTML Basics
• HTML stands for Hypertext Markup Language
• HTML consists of Tags and values
• Tags have Attributes specified as <font size=“+1”> where size is the
attribute and +1 is the value of the attribute. that are specified in the open
bracket.

HTML Snippet
• In the following HTML snippet name the following: tag, attribute, attribute
value and value: <font size=“+1”>Test font</font>
• Tag = font
• Attribute = size
• Attribute value = +1
• Value = Test font
• Why does </font> appear at the end?
• To close out the tag in the HTML code

Static vs. Dynamic Websites
• Static Websites
• Never change
• Unless the HTML code is changed
and uploaded to web server
• Dynamic Websites
• Can change based on an event or data
based on code in the website
• Common occurrences of this are
dates/times on a website

Important Code
• <!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
</body>
</html>
• This HTML code indicates the title of the
web page is Important Code
• The <head> element is a container for
metadata (data about data) and is placed
between the <html> tag and the <body>
tag.
• Metadata is data about the HTML
document. Metadata is not displayed.
• Metadata typically define the document
title, character set, styles, scripts, and other
meta information.

<body></body> tag
• The <body> tag defines the document's body.
• The <body> element contains all the contents of an HTML document, such
as headings, paragraphs, images, hyperlinks, tables, lists, etc.
• Note: There can only be one <body> element in an HTML document.

<ul></ul> tag
• An unordered HTML list:
• <ul>
• <li>Coffee</li>
• <li>Tea</li>
• <li>Milk</li>
• </ul>
• The <ul> tag defines an unordered
(bulleted) list.
• Use the <ul> tag together with the <li>
tag to create unordered lists.
• Tip: Use CSS to style lists.
• Tip: For ordered lists, use the <ol> tag.

<li></li> tag
• The <li> tag defines a list item.
• The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).
• In <ul> and <menu>, the list items will usually be displayed with bullet points.
• In <ol>, the list items will usually be displayed with numbers or letters.
• Tip: Use CSS to style lists.

<a></a> tag
• The <a> tag defines a hyperlink, which is used to link from one page to another.
• The most important attribute of the <a> element is the href attribute, which indicates the
link's destination.
• By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red

<a href….</a>
• How to open a link in a new browser window:
• <a href="https://www.w3schools.com" target="_blank">Visit
W3Schools.com!</a>
• The hyperlink reference is to the website, the target opens the link in a new browser
window and the text Visit W3Schools.com! is the text listed which is linked to the
website.

HTML Simple Page
<html>
<head>
<title>Your Name</title>
</head>
<body>
<ul>
<li>Bulleted Text</li>
<li><a href="http://www.website.com">Website</a></li>
</ul>
</body>
</html>

Important Tags
• <p></p> for writing a paragraph with text
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <small> - Smaller text

<b> and <strong> tags
• In order to bold text you can use either the <b> or <strong> tags
• <b>Marino</b> will show up as Marino
• <strong>Marino</strong> will show up as Marino
• Notice they are both merely bold!

<i> and <em> tags
• In order to italicize text you can use either the <i> or <em> tags
• <i>Marino</i> will show up as Marino
• <em>Marino</em> will show up as Marino
• Notice they are both merely italic!

<small> tag
• This merely makes your text smaller without having to utilize the size
attribute or similar attributes within HTML code
• Ideally, you use this tag to deemphasize something [things that are not
important]

In Class Exercise
• Using the information taught in class create an HTML file index.html where you have a paragraph
describing yourself.
• Also, create a menu with the following links: Home, Favorite Sports Teams, and Contact Me
• Have the Favorite Sports Teams have a dropdown menu of at least three teams you like. (Examples
can include teams from Baseball, Football, Soccer, Basketball, Hockey, College, High School, etc.)

In Class Exercise Getting Started
• To write a paragraph use the
<p>…</p> tag
<html>
<head>
<title>Your Name</title>
</head>
<body>
<p>Put paragraph here</p>
</body>
</html>

• To create your links use the <ul> and <il> tags
• Your code should go in the header section <head>
<ul>
<li><a href="" class="current">Home</a></li>
<li><a href="">Favorite Sports Teams</a></li>
<li><a href="">Contact Me</a></li>
</ul>

• You should use the <select> tag for your dropdown
<select name="teams" id="teams">
<option value="1">Team 1</option>
</select>

<ul>
<li><a href="" class="current">Home</a></li>
<li><a href="">Favorite Sports Teams</a></li>
<select name="teams" id="teams">
</select>
<li><a href="">Contact Me</a></li>
</ul>

Advanced HTML
BITM 3730
9/12

Week 1 Review
• HTML stands for Hypertext Markup Language
• HTML consists of Tags and values
• Tags have Attributes specified as <font size=“+1”> where size is the attribute and
+1 is the value of the attribute. that are specified in the open bracket.
• Static websites never change unless you edit the code and upload updated version
• Dynamic websites can change based on an event or data embedded within the code;
common with dates and times

Common HTML Tags
• <html>…</html> - begins and ends the entire HTML document
• <head>…</head> - defines information about the document
• <body>…</body> - defines the document’s body
• <p>…</p> - defines a paragraph
• <ul>…</ul> - defines an unordered list
• <ol>…</ol> - defines an ordered list
• <li>…</li> - defines a list item
• <a href>…</a> - hyperlink
• <img src…./> - defines an image

courses.shu.edu
• Your own web space
• http://courses.shu.edu/BITM3730/marinom6/
• Above is my web space
• Yours will be the same except your Pirate Net username will replace
marinom6

courses.shu.edu
• This is where your project website will be stored
• Everything will be uploaded to your web space
• This allows for your website to be LIVE

Project Proposal Examples
• https://elementor.com/blog/website-proposal/
• https://www.invisionapp.com/inside-design/web-design-proposal/
• https://www.godaddy.com/garage/write-web-design-proposal/
• https://learn.g2.com/website-proposal

HTML Headers
• <h1>…</h1>
• <h2>…</h2>
• <h3>…</h3>
• <h4>…</h4>
• <h5>…</h5>
• <h6>…</h6>

Styles & Fonts
Styles
• <h1 style="color:blue;">This is a
heading</h1>
• <p style="color:red;">This is a
paragraph.</p>
Fonts
• <h1 style="font-
family:verdana;">This is a
heading</h1>
• <p style="font-family:courier;">This
is a paragraph.</p>

Text Size & Alignment
Size
• <h1 style="font-size:300%;">This is a
heading</h1>
• <p style="font-size:160%;">This is a
paragraph.</p>
Alignment
• <h1 style="text-
align:center;">Centered
Heading</h1>
• <p style="text-
align:center;">Centered
paragraph.</p>

Language
• <html lang="en">
• https://www.tutorialrepublic.com/html-reference/html-language-codes.php
• All language codes listed above

Using Images
• <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
• img src – image source
• alt – description
• width and height should be altered depending on needs

Images As Background
• <div style="background-image: url('img_girl.jpg');">
• <style>
• div {
• background-image: url('img_girl.jpg');
• }
• </style>

Repeat Background
• <style>
• body {
• background-image: url('example_img_girl.jpg');
• background-repeat: no-repeat;
• }
• </style>

Building Tables
• Why build a table?
• Easiest way to organize info in an HTML file
• Assuming not using XML or JSON [covered later in the course]

Tags for building a table
• <table>…</table> - defines a table
• <tr>…</tr> - defines a table row, must appear within a table
• <td>…</td> - defines a table column, must appear within a table row
• <th>…</th> - defines a table header

<table></table> tag
• The <table> tag defines an HTML table.
• An HTML table consists of one <table> element and one or more <tr>,
<th>, and <td> elements.

<tr></tr> tag
• The <tr> tag defines a row in an HTML table.
• A <tr> element contains one or more <th> or <td> elements.

<td></td> tag
• The <td> tag defines a standard data cell in an HTML table.
• An HTML table has two kinds of cells:
Header cells - contains header information (created with the <th> element)
Data cells - contains data (created with the <td> element)
• The text in <td> elements are regular and left-aligned by default.
• The text in <th> elements are bold and centered by default.

<th></th> tag
• The <th> tag defines a header cell in an HTML table.
• An HTML table has two kinds of cells:
Header cells - contains header information (created with the <th> element)
Data cells - contains data (created with the <td> element)
• The text in <th> elements are bold and centered by default.
• The text in <td> elements are regular and left-aligned by default.

Building an HTML file with a Table
Begin with basic code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
</body>
</html>

Add Your Header
• <title>New Page 1</title>
• </head>
• <h1 align="center">Your Schedule</h1>
• <body>
• By adding the <h1></h1> code you have created an overall header

Begin creating your Table
• <body>
• <table border="0" width="100%">
• </table>
• </body>
• You can play around with the thickness of the table’s border by changing “0”
to different sizes

Building the Table’s Data
• <tr>
• <th>Course Name</th>
• <td> </td>
• <td> </td>
• <td> </td>
• <td> </td>
• </tr>
• </table>

Building the Table’s Data
• <tr>
• <th>Instructor</th>
• <td> </td>
• <td> </td>
• <td> </td>
• <td> </td>
• </tr>
• <tr>
• <th>Number of Credits</th>
• <td> </td>
• <td> </td>
• <td> </td>
• <td> </td>
• </tr>

Visual Table Notes
• Sizes of the cells in each row will change when you replace the   code
with actual text
• What do you do if you are taking more than 4 courses?
• You will need to add an additional <td></td> for each section [Course Name,
Instructor, and Number of Credits] until you have enough cells to cover all of your
courses for the table you create in Assignment 2

<div></div> tag
• The <div> tag defines a division or a section in an HTML document.
• The <div> tag is used as a container for HTML elements - which is then styled with
CSS or manipulated with JavaScript.
• The <div> tag is easily styled by using the class or id attribute.
• Any sort of content can be put inside the <div> tag!
• Note: By default, browsers always place a line break before and after the <div>
element.
• For our purpose, it is important to note the <div> tag serves as a break for a
paragraph [<p></p> tag]

HTML Review
• <a href=“websitelink.com”>Website Link</a> serves as code for
hyperlinking a website
• As discussed href is “hyperlink reference”
• The <h1></h1> tag represents a header
• <h2></h2>, <h3></h3>, etc. also exist and get smaller

Keep in Mind Now, but for Later
• <form>…</form> - defines a form
• <input type…/> - defines a form input
• button
checkbox
file
hidden
image
password
radio
reset
submit
text

In Class Exercise
Create an HTML page called gallery.html with 16 images displayed.

Building our Gallery
• <tr>
• <td> </td>
• <td> </td>
• <td> </td>
• <td> </td>
• </tr>
• </table>
Change the highlighted 0
to a larger number so we
can see the border

Picture Gallery
• The code on the previous slide only gives us 4 boxes
• How do we get our 16?

Where do we
get Images?
• https://www.freeimages
.com/search/baseball
• Or search Google for
free use images

Embedding Images
• <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
• Where img src is your image source
• alt is your alternate description of the image
• width and height should be modified so that all pictures line up

How it looks?
• <td><img src="https://media.istockphoto.com/photos/baseball-with-
clipping-path-picture-
id177401325?b=1&k=20&m=177401325&s=170x170&h=AK3kCSUXA7K
8BsjeydSH3U5oNEkezA2gZ9c9KuDkJZg=" alt="baseball" width="100"
height="100"></td>
• Use the direct image source for now, once we have an image saved to our
web space the img src is much shorter like in previous example

Of Note
• You don’t need to use alt tag if you don’t want to
• You can remove the table border once all 16 images are there
• You want to use the same height for each image

HTML Assignment
• Create a file called gallery.html to be uploaded to your courses.shu.edu
webspace.
• gallery.html should contain an introduction to yourself followed by a table
including your course schedule and an image you feel represents each of
your classes. For example, if you feel a course is chaotic you might use an
image of people playing dodgeball.
• This combines what you did on 8/29 and 9/12 in class.

CSS
BITM 3730
9/19

Why CSS?
• CSS stands for Cascading Style Sheets.
• CSS saves a lot of work. It can control the layout of multiple web pages all at
once.
• Websites generally have sub-folders where CSS files are stored

Syntax
• 3 Elements to a CSS Statement
• Selector
• What HTML sections does it affect?
• Property
• What attribute of that HTML section will be affected?
• Value
• What change will be made to that attribute?

Stylesheets
• While HTML defines where structures start and end, stylesheets define what they
look like
• When used properly, stylesheets allow for a consistent look and feel throughout a
website with one simple change of a file
• They are defined in three different ways:
• External: the styles are defined in a .css file (preferred)
• Internal: the styles are defined inside the HTML file, usually in the header section
• Inline: the style is defined inside an existing tag, usually in the body section

How to use the 3 Methods
• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file

Inline Example
• An inline CSS is used to apply a unique style to a single HTML element.
• An inline CSS uses the style attribute of an HTML element.
• The following example sets the text color of the <h1> element to blue, and
the text color of the <p> element to red:
• <h1 style="color:blue;">A Blue Heading</h1>
• <p style="color:red;">A red paragraph.</p>

Internal Example
• An internal CSS is used to define a style for a single
HTML page.
• An internal CSS is defined in the <head> section of
an HTML page, within a <style> element.
• The following example sets the text color of ALL the
<h1> elements (on that page) to blue, and the text
color of ALL the <p> elements to red. In addition,
the page will be displayed with a "powderblue"
background color:
• <html>
• <head>
• <style>
• body {background-color: powderblue;}
• h1 {color: blue;}
• p {color: red;}
• </style>
• </head>
• <body>
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• </body>

External Example [Most Common]
• <html>
• <head>
• <link rel="stylesheet" href="styles.css">
• </head>
• <body>
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• </body>
• </html>

styles.css Code
• body {
• background-color: powderblue;
• }
• h1 {
• color: blue;
• }
• p {
• color: red;
• }

Beyond CSS Basics
• With CSS, you can control:
• Color
• Font
• size of text
• spacing between elements
• how elements are positioned and laid out
• what background images or background colors to be used
• different displays for different devices and screen sizes

Changing Stylesheets
• Changing a stylesheet on the fly can be done on the server when the request
is received. For example, the webserver can determine the type of browser
(Internet Explorer, Firefox, Chrome, iPhone, Blackberry) and render the
page appropriately
• You can also give that functionality to the user. Perhaps the user might want
a larger font or a different color. With JavaScript, you can create a button
that changes the stylesheet for the entire page.

Two More Stylesheet Examples
• styles.css
h1 {
border: 2px black solid;
color: black;
}
.justified {
text-align: left;
}
• styles2.css
h1 {
border: 2px red solid;
color: red;
}
.justified {
text-align: right;
}

How Stylesheets are put together
• Each style in a style sheet has three parts:
• A selector
• One or more properties
• One or more values for each property
• Syntax
selector {
property1: value1 [value2 …];
property2: value1 [value2 …];
}
• To associate a style sheet to an HTML document, use the <link> tag within the head tag:
• <link href=“styles.css” rel=“stylesheet” type=“text/css” />

Stylesheet styles
• #id – ID’s are used to define large structures in an HTML document. Each
id can be used only once in each HTML document.
• .class – Classes are styles that can be reused and applied to different elements
via a class parameter, such as <h1 class=“name”> …</h1>
• Element – elements are used to redefine how existing HTML elements (tags)
are to be formatted.

CSS Properties
• The CSS color property defines the text color to be used.
• The CSS font-family property defines the font to be used.
• The CSS font-size property defines the text size to be used.

CSS Properties
• The CSS border property defines a border around an HTML element.
• The CSS padding property defines a padding (space) between the text and
the border.
• The CSS margin property defines a margin (space) outside the border.

CSS Properties
• Use the HTML style attribute for inline
styling
• Use the HTML <style> element to define
internal CSS
• Use the HTML <link> element to refer to
an external CSS file
• Use the HTML <head> element to store
<style> and <link> elements
• Use the CSS color property for text colors
• Use the CSS font-family property for text
fonts
• Use the CSS font-size property for text
sizes
• Use the CSS border property for borders
• Use the CSS padding property for space
inside the border
• Use the CSS margin property for space
outside the border

CSS Linking [External]
• This example uses a full URL to link to a style sheet:
• <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
• This example links to a style sheet located in the html folder on the current web site:
• <link rel="stylesheet" href="/html/styles.css">
• This example links to a style sheet located in the same folder as the current page:
• <link rel="stylesheet" href="styles.css">

Declaration and Selector
body {
font-size: 10px;
background-color: white;
color: blue; }

Overwriting Link Defaults
• a:link {color:#FF0000;}
• color to apply to link before it’s visited
• a:visited {color:#00FF00;}
• color to apply to link before it’s visited
• a:hover {color:#FF00FF;}
• color to apply to link while mouse pointer is over it
• a:active {color:#0000FF;}
• color to apply while left mouse button is held down on link

In Class Exercise
Create a CSS file called example.css where you set a background color, header color and alignment, and
text color, size and font.

example.css background color
• <html>
• <head>
• <style>
• body {
• background-color: purple;
• }
• </style>
• </head>
• <body>
• <h1>The background-color Property</h1>
• </body>
• </html>

example.css header color and alignment
• <style>
• h1 {
• color: red;
• alignment: center;
• }
• </style>

example.css text color, size, and font
• <style>
• p {
• color: blue;
• size: 12px;
• font: serif;
• }
• </style>

Check example.css in WYSIWYG First
• Put all of your pieces into the <style> tag within the <head> section of
your HTML “test” using your WYSIWYG
• Once checked, pull everything out of the <style> … </style> tag and put
into Notepad – save as example.css

Showing How Internal Works
• Put as file on courses.shu.edu
• Reference in an HTML file
• See if it works!

CSS
BITM 3730
9/26

Quick Review
• 3 Elements to a CSS Statement
• Selector
• What HTML sections does it affect?
• Property
• What attribute of that HTML section will be affected?
• Value
• What change will be made to that attribute?

Quick Review
• External – separate .css file
• Internal – inside the <style> tag
• Inline – on the same line of code using the style attribute

CSS Inheritance
• Used when you have many sections of a website/web page and want them to
look differently
• Each section can be modified using both internal and inline CSS code
• Works like programming languages, such as Java or Python

General CSS – Remember?
• Uses our tags like paragraph <p> or header <h1> or <body>
• <style>
• p {
• color: red;
• }
• </style>
Internal CSS

Inheritance CSS
• First, create a class
<style>
.bobdole {
background-color: red;
color: blue;
}
</style>
Internal CSS

Inheritance CSS
• Next, call the class
• <p class=“bobdole”>Chicken nuggets taste good</p>

Another Example
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• .intro {
• background-color: yellow;
• }
• </style>
• </head>
• <body>
• <h1>Welcome to My Homepage</h1>
• <div class="intro">
• <p>My name is Jerry.</p>
• <p>George is unemployed and lives with his
parents.</p>
• </div>
• <p>My neighbor is Kramer.</p>
• <p class="intro">Gene sounds like Mickey.</p>
• </body>
• </html>

Link Defaults
• By default, a link will appear like this (in all browsers):
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
• You can change the link state colors, by using CSS:

Create a page with Links
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• </style>
• </head>
• <body>
• <p><a href="http://courses.shu.edu/BITM3730/marinom6/index.html">Homepage</p>
• <p><a href="http://courses.shu.edu/BITM3730/marinom6/work.html">My Work</p>
• <p><a href="http://courses.shu.edu/BITM3730/marinom6/contact.html">Contact</p>
• </body>
• </html>

Changing Link Defaults
• <style>
• a:link {color:red;}
• a:visited {color:blue;}
• a:hover {color:black;}
• a:active {color:red;}
• </style>

Changing How Links Look
• Remember how In Class Exercise 1 looked?

Vertical <style> 1
• ul {
• list-style-type: none;
• margin: 0;
• padding: 0;
• width: 200px;
• background-color: #f1f1f1;
• }

Vertical <style> 2
• li a {
• display: block;
• color: #000;
• padding: 8px 16px;
• text-decoration: none;
• }

Vertical <style> 3
• /* Change the link color on hover */
• li a:hover {
• background-color: #555;
• color: white;
• }

Vertical <body>
• <ul>
• <li><a href="#home">Home</a></li>
• <li><a href="#teams">Favorite Sports Teams</a></li>
• <li><a href="#contact">Contact Me</a></li>
• </ul>

Horizontal <style> 1
• ul {
• list-style-type: none;
• margin: 0;
• padding: 0;
• overflow: hidden;
• border: 1px solid #e7e7e7;
• }

• li {
• float: left;
• }
• li a {
• display: block;
• color: #666;
• text-align: center;
• }

• li a:hover:not(.active) {
• background-color: #ddd;
• }
• li a.active {
• color: white;
• background-color: #04AA6D;
• }

Horizontal <body>
• <ul>
• <li><a class="active" href="#home">Home</a></li>
• <li><a href="#teams">Favorite Sports Teams</a></li>
• <li><a href="#contact">Contact Me</a></li>
• </ul>

Dropdown <style> 1
• body {
• font-family: Arial, Helvetica, sans-serif;
• }
• .navbar {
• background-color: #333;
• }

Dropdown <style> 2
• .navbar a {
• float: left;
• font-size: 16px;
• color: white;
• text-align: center;
• }
• .dropdown {
• float: left;
• }

Dropdown <style> 3
• .dropdown .dropbtn {
• font-size: 16px;
• border: none;
• outline: none;
• color: white;
• background-color: inherit;
• font-family: inherit;
• margin: 0;
• }

Dropdown <style> 4
• .navbar a:hover, .dropdown:hover .dropbtn {
• background-color: red;
• }
• .dropdown-content {
• display: none;
• position: absolute;
• min-width: 160px;
• box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
• z-index: 1;
• }

Dropdown <style> 5
• .dropdown-content a {
• float: none;
• color: black;
• display: block;
• text-align: left;
• }
• .dropdown-content a:hover {
• background-color: #ddd;
• }
• .dropdown:hover .dropdown-content {
• display: block;
• }

Dropdown <body>
• <div class="navbar">
• <a href="#home">Home</a>
• <a href="#contact">Contact Me</a>
• <div class="dropdown">
• <button class="dropbtn">Favorite Sports Teams
• <i class="fa fa-caret-down"></i>
• </button>
• <div class="dropdown-content">
• <a href="#">Yankees</a>
• <a href="#">49ers</a>
• <a href="#">Knicks</a>
• </div>
• </div>
• </div>

In Class Exercise
Change your html page created in In Class Exercise 1 to include CSS code so that your links and
paragraph section are different colors, size, and font. Make sure to use internal CSS code (i.e. code in the
HTML file).

CSS Assignment
• Create an HTML file called dropdown.html where you utilize internal CSS to
create a dropdown menu AND set CSS parameters [color, alignment, etc.]
for your headers and paragraphs.
• Your dropdown menu should include a Home, About Me, Class Info, and
Contact Me pages listed. Create dropdowns for both the About Me and
Class Info sections.

JavaScript
BITM 3730
10/3

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:

In Class Exercise
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 In Class Exercise
• <html>
• <head>
• <title>JS Event Example</title>
• <script type="text/javascript">

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

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

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

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

JavaScript
BITM 3730
10/17

Review: JavaScript vs Java
• interpreted, not compiled
• more relaxed syntax and rules
• fewer and "looser" data types
• variables don't need to be declared
• errors often silent (few exceptions)
• key construct is the function rather than the class
• "first-class" functions are used in many situations
• contained within a web page and integrates with its HTML/CSS content

Review: External Linking
• <script src="filename" type="text/javascript"></script
• script tag should be placed in HTML page's head
• script code is stored in a separate .js file
• JS code can be placed directly in the HTML file's body or head (like CSS

Common Uses of JavaScript
• Form validation
• Page embellishments and special effects
• Navigation systems
• Basic math calculations
• Dynamic content manipulation
• Sample applications
• Dashboard widgets in Mac OS X, Google Maps, Philips universal remotes, Writely word
processor, hundreds of others…

Example 1: Add Two Numbers
<html>
…
<p> … </p>
<script>
var num1, num2, sum
num1 = prompt("Enter first number")
num2 = prompt("Enter second number")
sum = parseInt(num1) + parseInt(num2)
alert("Sum = " + sum)
</script>
…
</html>

Example 2: Browser Events
<script type="text/JavaScript">
function whichButton(event) {
if (event.button==1) {
alert("You clicked the left mouse button!") }
else {
alert("You clicked the right mouse button!")
}}
</script>
…
<body onmousedown="whichButton(event)">
…
</body>
Mouse event causes page-
defined function to be
called
Other events: onLoad, onMouseMove, onKeyPress, onUnLoad

Example 3: Page Manipulation
• Some possibilities
• createElement(elementName)
• createTextNode(text)
• appendChild(newChild)
• removeChild(node)
• Example: add a new list item
var list = document.getElementById('t1')
var newitem = document.createElement('li')
var newtext = document.createTextNode(text)
list.appendChild(newitem)
newitem.appendChild(newtext)
This uses the browser
Document Object Model
(DOM). We will focus on
JavaScript as a language,
not its use in the browser

Document Object Model (DOM)
• HTML page is structured data
• DOM provides representation of this hierarchy
• Examples
• Properties: document.alinkColor, document.URL, document.forms[ ], document.links[ ],
document.anchors[ ], …
• Methods: document.write(document.referrer)
• These change the content of the page!
• Also Browser Object Model (BOM)
• Window, Document, Frames[], History, Location, Navigator (type and version of browser)

Hello World in JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Hello World Example</title>
</head>
<body>
<script type="text/javascript">

</script>
</body>
</html>

Number properties/methods
Number object "static" properties
Number.MAX_VALUE largest possible number, roughly 10308
Number.MIN_VALUE smallest positive number, roughly 10-324
Number.NaN Not-a-Number; result of invalid computations
Number.POSITIVE_INFINITY infinity; result of 1/0
Number.NEGATIVE_INFINITY negative infinity; result of -1/0

Number instance methods
.toString([base]) convert a number to a string with optional base
.toFixed(digits) fixed-point real with given # digits past decimal
.toExponential(digits) convert a number to scientific notation
.toPrecision(digits) floating-point real, given # digits past decimal

global methods related to numbers
isNaN(expr) true if the expression evaluates to NaN
isFinite(expr) true if expr is neither NaN nor an infinity

Math properties/methods
Math.E e, base of natural logarithms: 2.718...
Math.LN10, Math.LN2,
Math.LOG2E, Math.LOG10E
natural logarithm of 10 and 2;
logarithm of e in base 2 and base 10
Math.PI , circle's circumference/diameter: 3.14159...
Math.SQRT1_2, Math.SQRT2 square roots of 1/2 and 2
Math.abs(n) absolute value
Math.acos/asin/atan(n) arc-sin/cosine/tangent of angle in radians
Math.ceil(n) ceiling (rounds a real number up)
Math.cos/sin/tan(n) sin/cosine/tangent of angle in radians
Math.exp(n) en, e raised to the nth power
Math.floor(n) floor (rounds a real number down)
Math.log(n) natural logarithm (base e)
Math.max/min(a, b...) largest/smallest of 2 or more numbers
Math.pow(x, y) xy, x raised to the yth power
Math.random() random real number k in range 0 ≤ k < 1
Math.round(n) round number to nearest whole number
Math.sqrt(n) square root

String methods
String.fromCharCode(expr) converts ASCII integer → String
.charAt(index) returns character at index, as a String
.charCodeAt(index) returns ASCII value at a given index
.concat(str...) returns concatenation of string(s) to this one
.indexOf(str[,start])
.lastIndexOf(str[,start])
first/last index at which given string begins in this string, optionally starting
from given index
.match(regexp) returns any matches for this string against the given string or regular
expression ("regex")
.replace(old, new) replaces first occurrence of old string or regular expr. with new string (use
regex to replace all)
.search(regexp) first index where given regex occurs
.slice(start, end)
.substring(start, end)
substr. from start (inclusive) to end (exclusive)
.split(delimiter[,limit]) break apart a string into an array of strings
.toLowerCase()
.toUpperCase()
return new string in all upper/lowercase

Dealing with old browsers
• Some old browsers do not recognize script tags
• These browsers will ignore the script tags but will display the included JavaScript
• To get old browsers to ignore the whole thing, use:

</script>
• The , the // starts a JavaScript comment,
which extends to the end of the line

Exception Handling
• Exception handling in JavaScript is almost the same as in Java
• throw expression creates and throws an exception
• The expression is the value of the exception, and can be of any type (often, it's a literal String)
• try {
statements to try
} catch (e) { // Notice: no type declaration for e
exception-handling statements
} finally { // optional, as usual
code that is always executed
}
• With this form, there is only one catch clause

Exception Handling
• try {
statements to try
} catch (e if test1) {
exception-handling for the case that test1 is true
} catch (e if test2) {
exception-handling for when test1 is false and test2 is true
} catch (e) {
exception-handling for when both test1and test2 are false
} finally { // optional, as usual
code that is always executed
}
• Typically, the test would be something like
e == "InvalidNameException"

JavaScript Warnings
• JavaScript is a big, complex language
• We’ve only scratched the surface
• It’s easy to get started in JavaScript, but if you need to use it heavily, plan to invest time in learning it well
• Write and test your programs a little bit at a time
• JavaScript is not totally platform independent
• Expect different browsers to behave differently
• Browsers aren’t designed to report errors
• Don’t expect to get any helpful error messages

JS Pop Up Type 1: Alert Box
• An alert box is often used if you want to make sure
information comes through to the user.
• When an alert box pops up, the user will have to
click "OK" to proceed.

Alert Box Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Alert</h2>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
</body>
</html>

JS Pop Up Type 2: Confirm Box
• A confirm box is often used if you want the user to verify or accept something.
• When a confirm box pops up, the user will have to click either "OK" or "Cancel" to
proceed.
• If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box
returns false.

Confirm Box Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Confirm Box</h2>
<p id="demo"></p>
<script>
var txt;
if (confirm("Press a button!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

JS Pop Up Type 3: Prompt Box
• A prompt box is often used if you want the user to input a value before entering a
page.
• When a prompt box pops up, the user will have to click either "OK" or "Cancel" to
proceed after entering an input value.
• If the user clicks "OK" the box returns the input value. If the user clicks "Cancel"
the box returns null.

Prompt Box Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Prompt</h2>
<p id="demo"></p>
<script>
let text;
let person = prompt("Please enter your name:", "Harry Potter");
if (person == null || person == "") {
text = "User cancelled the prompt.";
} else {
text = "Hello " + person + "! How are you today?";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

Two Input Prompt Example
<!DOCTYPE html>
<html>
<body>

</script>
</body>
</html>

JavaScript Popups
<script>
// JavaScript popup window function
function basicPopup(url) {
popupWindow =
window.open(url,'popUpWindow','height=300,width=700,left=50,top=50,resizable=yes,scrollbars=
yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes')
}
</script>
<a href="http://courses.shu.edu/BITM3730/marinom6/" onclick="basicPopup(this.href);return
false">Click here to visit my website</a>

JavaScript Assignment
• Combine your skills from CSS [onclick] and your JS skills to create an HTML
file called popup.html that when you click an onclick it will open your
courses.shu.edu website as a popup.

Forms/PHP
BITM 3730
10/24

Basic HTML Form
• Boring
• Limited
• Hard to Store info

Reminder from HTML Lesson
• <form>…</form> - defines a form
• <input type…/> - defines a form input
• button
checkbox
file
hidden
image
password
radio
reset
submit
text

Inputs - HTML
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of
many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or
more of many choices)
<input type="submit"> Displays a submit button (for submitting the
form)
<input type="button"> Displays a clickable button

HTML Example
• <html>
• <body>
• <h2>HTML Form</h2>
• <form action="/action_page.php">
• <label for="fname">First name:</label><br>
• <input type="text" id="fname" name="fname" value="John"><br>
• <label for="lname">Last name:</label><br>
• <input type="text" id="lname" name="lname" value="Doe"><br><br>
• <input type="submit" value="Submit">
• </form>
• </body>
• </html>

Visual
Only two inputs
Both inputs are text

<form action="/action_page.php">
• This does all the work of sending the information

HTML with no PHP
• <html>
• <body>
• <h2>HTML Form</h2>
• <form>
• <label for="lname">Last name:</label><br>
• <input type="text" id="lname" name="lname" value="Doe"><br><br>
• </form>
• </body>
• </html>
Does not send the input
anywhere

Why Won’t This Work?
• <form action="/action_page.php">
• <input type="text" id="fname" value="John"><br><br>
• </form>
Missing name="fname"

Radio Buttons
• <form>
• <input type="radio" id="html" name="fav_language" value="HTML">
• <label for="html">HTML</label><br>
• <input type="radio" id="css" name="fav_language" value="CSS">
• <label for="css">CSS</label><br>
• <input type="radio" id="javascript" name="fav_language" value="JavaScript">
• <label for="javascript">JavaScript</label>
• </form>

Check Boxes
• <form>
• <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
• <label for="vehicle1"> I have a bike</label><br>
• <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
• <label for="vehicle2"> I have a car</label><br>
• <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
• <label for="vehicle3"> I have a boat</label>
• </form>

All Input Types
• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

Understanding PHP
• A PHP script can be placed anywhere in the document.
• A PHP script starts with <?php and ends with ?>:
• <?php
• // PHP code goes here
• ?>
• The default file extension for PHP files is ".php".
• A PHP file normally contains HTML tags, and some PHP scripting code.

Using PHP – HTML Code
• <html>
• <body>
• <form action="welcome_get.php" method="get">
• Name: <input type="text" name="name"><br>
• E-mail: <input type="text" name="email"><br>
• </form>
• </body>
• </html>

welcome_get.php Code
• <html>
• <body>
• Welcome <?php echo $_GET["name"]; ?><br>
• Your email address is: <?php echo $_GET["email"]; ?>
• </body>
• </html>

Visual
Once submitted, displays

Using PHP to Upload Files - HTML
• <html>
• <body>
• <form action="upload.php" method="post" enctype="multipart/form-data">
• Select image to upload:
• <input type="file" name="fileToUpload" id="fileToUpload">
• <input type="submit" value="Upload Image" name="submit">
• </form>
• </body>
• </html>

upload.php
• <?php
• $target_dir = "uploads/";
• $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
• $uploadOk = 1;
• $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
• // Check if image file is a actual image or fake image
• if(isset($_POST["submit"])) {
• $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
• if($check !== false) {
• echo "File is an image - " . $check["mime"] . ".";
• $uploadOk = 1;
• } else {
• echo "File is not an image.";
• $uploadOk = 0;
• }
• }

upload.php
• // Check if file already exists
• if (file_exists($target_file)) {
• echo "Sorry, file already exists.";
• $uploadOk = 0;
• }
• // Check file size
• if ($_FILES["fileToUpload"]["size"] > 500000) {
• echo "Sorry, your file is too large.";
• $uploadOk = 0;
• }
• // Allow certain file formats
• if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
• && $imageFileType != "gif" ) {
• echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
• $uploadOk = 0;
• }

upload.php
• // Check if $uploadOk is set to 0 by an error
• if ($uploadOk == 0) {
• echo "Sorry, your file was not uploaded.";
• // if everything is ok, try to upload file
• } else {
• if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
• echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";
• } else {
• echo "Sorry, there was an error uploading your file.";
• }
• }
• ?>

What is the PHP Code Doing?
• PHP script explained:
• $target_dir = "uploads/" - specifies the directory where the file is going to be
placed
• $target_file specifies the path of the file to be uploaded
• $uploadOk=1 is not used yet (will be used later)
• $imageFileType holds the file extension of the file (in lower case)
• Next, check if the image file is an actual image or a fake image

PHP Open and Read
• <?php
• $myfile = fopen("webdictionary.txt", "r") or die("Unable to open file!");
• echo fread($myfile,filesize("webdictionary.txt"));
• fclose($myfile);
• ?>

PHP Create and Write
• <?php
• $myfile = fopen("newfile.txt", "w") or die("Unable to open file!");
• $txt = "John Doen";
• fwrite($myfile, $txt);
• $txt = "Jane Doen";
• fwrite($myfile, $txt);
• fclose($myfile);
• ?>

PHP/Forms Assignment
Using PHP, JavaScript and/or HTML create a Contact form which will accept Name, Email, and
Comment as inputs. The Submit button can either return the input or provide an external webpage noting
your input has been emailed.

HTML
• <html>
• <body>
• <form action="welcome.php" method="post">
• Comment: <input type="text" name="comment"><br>
• </form>
• </body>
• </html>

Have to edit welcome.php
• <html>
• <body>
• Welcome <?php echo $_POST["name"]; ?><br>
• Your email address is: <?php echo $_POST["email"]; ?>
• Your comment was: <?php echo $_POST[“comment”]; ?>
• </body>
• </html>

To Send via Email
• <?php
• $from = "matt.marino@shu.edu";
• $to = "dspace-community@googlegroups.com";
• $message = "Unsubscribe";
• $info = "Unsubscribe";
• $check = mail($to, "Unsubscribe",
• $message, "From:matt.marino@shu.edu");
• if ($check != true) { echo "Sorry... Error Sending E-Mail. E-Mail NOT Sent.";}
• else { echo "Thank You. Your E-Mail Has Been Sent... We Will Get Back To You Shortly...";}
Create a file mailtest.php
and upload to your courses
web space
Change the to
To your email address, so you
get the inputs

HTML for Email
• <html>
• <body>
• <form action=“mailtest.php" method="post">
• Comment: <input type="text" name="comment"><br>
• </form>
• </body>
• </html>
PHP files must be live on a web server to
work properly

XML, JSON, and
XHTML
BITM 3730
10/31

XHTML Basics
• XHTML stands for EXtensible HyperText Markup Language
• XHTML is a stricter, more XML-based version of HTML
• XHTML is HTML defined as an XML application
• XHTML is supported by all major browsers

XHTML for the Experts
• XML is a markup language where all documents must be marked up
correctly (be "well-formed").
• XHTML was developed to make HTML more extensible and flexible to
work with other data formats (such as XML). In addition, browsers ignore
errors in HTML pages, and try to display the website even if it has some
errors in the markup. So XHTML comes with a much stricter error handling.

Strict?
• <!DOCTYPE> is mandatory
• The xmlns attribute in <html> is mandatory
• <html>, <head>, <title>, and <body> are mandatory
• Elements must always be properly nested
• Elements must always be closed
• Elements must always be in lowercase
• Attribute names must always be in lowercase
• Attribute values must always be quoted
• Attribute minimization is forbidden

Example XHTML code
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
• "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
• <html xmlns="http://www.w3.org/1999/xhtml">
• <head>
• <title>Title of document</title>
• </head>
• <body>
• some content here...
• </body>
• </html>

Compared to HTML code
• <html>
• <head>
• </head>
• <body>
• </body>
• </html>

Importance of XHTML
• XHTML documents are XML conforming as they are readily viewed, edited, and
validated with standard XML tools.
• XHTML documents can be written to operate better than they did before in
existing browsers as well as in new browsers.
• XHTML documents can utilize applications such as scripts and applets that rely
upon either the HTML Document Object Model or the XML Document Object
Model.
• XHTML gives you a more consistent, well-structured format so that your webpages
can be easily parsed and processed by present and future web browsers.

Importance of XHMTL
• You can easily maintain, edit, convert and format your document in the long run.
• Since XHTML is an official standard of the W3C, your website becomes more
compatible with many browsers and it is rendered more accurately.
• XHTML combines strength of HTML and XML. Also, XHTML pages can be
rendered by all XML enabled browsers.
• XHTML defines quality standard for your webpages and if you follow that, then
your web pages are counted as quality web pages. The W3C certifies those pages
with their quality stamp.

XML Basics
• Stands for eXtensible Markup Language
• Used to define customized markup languages
• We are already familiar with XML since we understand HTML

Interesting XML Notes
• XML is a software- and hardware-independent tool for storing and transporting
data.
• XML was designed to store and transport data
• XML was designed to be self-descriptive
• Maybe it is a little hard to understand, but XML does not DO anything.

XML Just Stores Data
• XML is just information wrapped in tags.
• XML is the parent language to HTML
• XML is used to contain data, not to display data
• XML tags are custom, defined by the author.
• HTML can enrich XML data but neither can replace the other. One is used
for storing (XML) and the other is used for displaying (HTML).

XML Rules
• XML elements must follow these rules:
• Can contain letters, numbers and other characters
• Can’t start with a number or punctuation character
• Can’t start with ‘xml’
• Can’t contain spaces

Writing in XML
• XML attributes must be quoted as in: <employee type=‘permanent’>
• Alternatively, you can write
• <employee>
<type>permanent</type>
</employee>
• Both above examples accomplish the same goal and there are no rules as to which
one is right. The second example is easier to read and looks nicer.

XML vs. HTML
• XML was designed to carry data - with focus on what data is
• HTML was designed to display data - with focus on how data looks
• XML tags are not predefined like HTML tags are

You Define XML Tags
• The XML language has no predefined tags.
• Tags are "invented" by the author of the XML document.
• HTML works with predefined tags like <p>, <h1>, <table>, etc.
• With XML, the author must define both the tags and the document structure.

Why Use XML?
• It simplifies data sharing
• It simplifies data transport
• It simplifies platform changes
• It simplifies data availability

More Reasons to use XML
• XML stores data in plain text format. This provides a software- and hardware-
independent way of storing, transporting, and sharing data.
• XML also makes it easier to expand or upgrade to new operating systems, new
applications, or new browsers, without losing data.
• With XML, data can be available to all kinds of "reading machines" like people,
computers, voice machines, news feeds, etc.

In What Ways Can We Use XML?
• Create a list of books
• Create a list of transactions
• Create a news article header
• Detail weather service information
• And much, much more!

XML Example Code
• <?xml version="1.0" encoding="UTF-8"?> Prolog
• <note> Root
• <to>Tove</to>
• <from>Jani</from>
• <heading>Reminder</heading>
• <body>Don't forget me this weekend!</body>
• </note> notice all have closing tags like HTML!!!!

XML can use HTML tags
• Tags you have previously seen can be used in XML, such as:
• <b></b> for bold text
• <i></i> for italicized text

Attributes Must Be Quoted
• <note date="12/18/1953">
• <to>Tove</to>
• <from>Jani</from>
• </note>
• In this example our attribute is our date 12/18/1953

Entity References
< < less than
> > greater than
& & ampersand
' ' apostrophe
" " quotation mark
Entity references help you to avoid errors

Comments in XML
• 
• This exact structure is required for XML comments

XML Elements
• An element can contain:
• Text
• Attributes
• other elements
• or a mix of the above
• Examples could be <rate>19.99</rate>

XML Naming Rules Reminder
• XML elements must follow these naming rules:
• Element names are case-sensitive
• Element names must start with a letter or underscore
• Element names cannot start with the letters xml (or XML, or Xml, etc)
• Element names can contain letters, digits, hyphens, underscores, and periods
• Element names cannot contain spaces
• Any name can be used, no words are reserved (except xml).

Standards Advising Naming Rules
• Create descriptive names, like this: <person>, <firstname>, <lastname>.
• Create short and simple names, like this: <book_title> not like this: <the_title_of_the_book>.
• Avoid "-". If you name something "first-name", some software may think you want to subtract "name" from "first".
• Avoid ".". If you name something "first.name", some software may think that "name" is a property of the object "first".
• Avoid ":". Colons are reserved for namespaces (more later).
• Non-English letters like éòá are perfectly legal in XML, but watch out for problems if your software doesn't support them.

XLink
• <?xml version="1.0" encoding="UTF-8"?>
• <homepages xmlns:xlink="http://www.w3.org/1999/xlink">
• <homepage xlink:type="simple"
xlink:href="https://www.w3schools.com">Visit W3Schools</homepage>
• <homepage xlink:type="simple" xlink:href="http://www.w3.org">Visit
W3C</homepage>
• </homepages>

Where Else Can We Use XML?
• HTML
• JavaScript
• PHP

XSLT
• XSLT - eXtensbile Stylesheet Language Transformations
• XSLT transform XML into HTML, before it is displayed by a browser
• You can transform a XML document into an HTML document just by
linking the XML document to the XSLT file by using the following line:
• <?xml-stylesheet type="text/xsl" href="xsltexample.xsl"?>

Another XML Example
• <xml>
<addressbook>
<address>
<name>Mark Nazzaro</name>
<email>nazzarma@shu.edu</email>
</address>
<address>
<name>David Rosenthal</name>
<email>rosentdv@shu.edu</email>
</address>
</addressbook>
</xml>

JSON Basics
• JSON stands for JavaScript Object Notation
• JSON is easier to parse than XML
• Properties make up a JSON object
• JSON.parse() parses retrieved data
• JSON.stringify() converts a JavaScript object into a string

JSON vs. XML
• Syntax for storing and exchanging
data
• Similar to XML:
• Hierarchical – values embedded
within values
• Human readable
• Both can use XMLHttpRequest
• Different from XML:
• No tags
• Shorter
• Quicker to read and write
• JSON uses arrays
• Easier to parse JSON

JSON Object Example
• A car is an object which has three properties describing it
• Make – String value representing the make of the car
• Model – String value representing the model of the car
• Price – Numeric value representing the price of the car

How That Looks in XML
<car>
<make>Chevrolet</make>
<model>Suburban</model>
<price>60000</price>
</car>

How It Looks in JSON
{
"make": "Chevrolet",
"model": "Suburban",
"price": 60000
}

JSON Data Types
• String – {“name”:”Mark”}
• Number – {“age”: 41}
• Objects –
• {
“address”: {“name”:”Matt Marnio”, “email”:”matt.marino@shu.edu”}
}
• Arrays –
• {
“students”:[“Manny”, “Moe”, “Jack”]
}
• Booleans - {“Full-time”: true}
• Null – {“Job Description”: null}

Accessing Values in Objects
• In order to access the values of an object, you can
use the dot (.) notation
myObj =
{“firstName”:”Matt”,”lastName”:”Marino”,”
age”:34};
firstName = myObj.firstName;
lastName = myObj.lastName;
age = myObj.age;
• You can also access the values using a bracket
notation
firstName = myObj[“firstName”];
lastName = myObj[“lastName”];
age = myObj[“age”];
• You can also access all of the values using a for
loop:
for (x in myObj)
{
}

Parsing
• When data is received from a web server, it can be parsed with JSON.parse() and it
becomes a JavaScript object.
var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Stringify
• Convert a JavaScript object into a string
var obj = { "name":"John", "age":30, "city":"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON

JSON Example
<html>
<head>
<title></title>
</head>
<body onload="show()">
<div id="carJSON"></div>
<div id="carXML"></div>
</body>
</html>

JSON Example Visual
JSON XML
function showJSON()
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("carJSON").innerHTML = myObj.make;
}
};
xmlhttp.open("GET", "cars.json", true);
xmlhttp.send();
}
function showXML()
{
var xmlhttp = new XMLHttpRequest();
var xmldoc = xmlhttp.responseXML;
var myObj = xmldoc.getElementsByTagName("make");
alert(myObj[0].childNodes[0].nodeValue);
document.getElementById("carXML").innerHTML =
myObj[0].childNodes[0].nodeValue;
}
};
xmlhttp.open("GET", "cars.xml", true);
xmlhttp.send();
}
function show()
{
showJSON();
showXML();
}

JSON Table
<!DOCTYPE html>
<html>
<body>
<h2>Make a table based on JSON data.</h2>
<p id="demo"></p>
<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { table: "customers", limit: 14 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
myObj = JSON.parse(this.responseText);
txt += "<table border='1'>"
for (x in myObj) {
txt += "<tr><td>" + myObj[x].name + "</td></tr>";
}
txt += "</table>"
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("POST", "json_demo_html_table.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
</script>
</body>
</html>

JSON Community
• https://www.json.org/json-en.html
• Goes in depth on all JSON topics
• Including using JSON with various programming languages

In Class Example
Create a booklist file in both XML and JSON (meaning two different files - one called books.xml and one
called books.json). Include in your data storage files the following book info: title of book, author of
book, and price of book.

In Class Example Help
• XML – refer back to slide 34
• JSON – refer back to slide 35

WordPress, Content Management
Systems, and Social Media
BITM 3730
11/7

What is CMS?
• Content Management Systems (CMS) are commonly used to create and store data
online
• The most commonly used CMS tools allow individuals to create their own website
without knowing anything about web development [coding in HTML, CSS, JS, etc.]
• Individuals merely install the CMS software to their website and type in specific
information to create websites

Two Common Reasons to Use CMS
• User-friendly browser-based publishing tools
• No technical skills required
• Compliance with Accessibility requirements
• W3C standards

What is Content?
• Any type or unit of digital information.
• Text, images, graphics, video, sound, documents, records, etc
• Anything that we would like to manage in an electronic format.

Why CMS?
• Web Content Management System
• Create/manage HTML & images
• Authoring tools
• Templates for presentation

Common CMS Requirements
Database Code Server

Differences in CMS
• Every CMS has its own unique way of organizing and managing content.
• It helps you to create/edit/delete content in a shared repository (database).
• It contains much improved CSS (Cascading Style Sheets).
• CMS enables content to be shared across the Web sites.

Why Use Them?
• Drupal, Joomla, WordPress use a database (tables) to store information
• CMS uses a different technology than standard html/css sites
• The technology is open-source (free!)
• Allows people to update their owns sites
• You are the master of your own domain!

Joomla
• The name Joomla is derived from the Swahili word "Jumla", which means "all
together" or "as a whole".
• Joomla! is one of the most powerful Open Source Content Management Systems. It
is used all over the world for everything from simple websites to complex corporate
applications.
• Joomla! is easy to install, simple to manage, and reliable.

Joomla
• Joomla is written in PHP, uses object-oriented programming structure
(OOPS) techniques and software design pattern, stores data in a MySql
database, and includes features such as page caching, RSS feeds, printable
versions of pages, news flashes, blogs, polls, search, and support for language
internationalization.
• It is based on a model-view-controller (MVC) web application framework
that can be used independently.

Why Joomla?
• It is designed to work perfectly in basic shared web hosting environments, a package that is
least expensive and most common. Installer is simple and just like any other common
desktop software.
• It is supported by several extensions, add-on, and plug in. They are written in PHP, which is
most widely used, general purpose scripting language and best suited for web development.
• Joomla supports SSL logins and SSL pages.
• Joomla probably has a pre built module to transform it in a social bookmarking website.
• Joomla's greatest advantage is availability of a large number of extensions that you can use
to Plug-in extra features into your website and transform your website into anything you
like.

WordPress Issues
• The WordPress content management system is an ideal platform for
bloggers as it is easy to install and use.
• Adding or removing post dates, need to be changed in design mode and it
requires knowledge of WP scripting.
• You can add membership functionality in WordPress.

Why WordPress?
• With WordPress, any type of website can be created like a personal blog or
website, a photoblog, a business website, a professional portfolio, a
government website, a magazine or news website, an online community, even
a network of websites.
• Website can be made with beautiful with themes, and can be extended with
plugins.

WordPress
• Free website on WordPress website
• Installed to your website if you own a domain
• Themes can be uploaded or created for use

Drupal Issues
• Learning curve is bigger than Joomla and WordPress
• Less support available than Joomla and WordPress

Other CMS
• Shopify
• Squarespace
• Wix
• Blogger
• Weebly
• Moodle

Learning Curve
• WordPress
• Easy, No experience required
• Joomla
• Medium, Easier than Drupal, harder than WordPress.
• Drupal
• Requires technical expertise. Major updates are an effort

E-Commerce
• WordPress
• Yes, with plugins
• Joomla
• Extensions for managing products and content
• Drupal
• the latest version, does not support a stable e-commerce module yet

SEO Friendliness
• WordPress
• Excellent
• Joomla
• Basic
• Drupal
• Good

Speed
• WordPress
• High traffic can cause limitations
• Joomla
• Faster and less resource intensive
• Drupal
• Consumes resources if not tweaked properly

Plugins
• WordPress
• Extensive. 41,579 plug-ins
• Joomla
• Few. 7000 extensions
• Drupal
• Many. 32,568 modules

Themes
• WordPress
• Extensive. Tens of thousands of themes
• Joomla
• Few. Thousands of themes
• Drupal
• Many. Thousands of themes

Mobile Friendly
• WordPress
• Good. Simple responsive starter themes
• Joomla
• Good. Many mobile extensions to choose from
• Drupal
• Good. Going mobile is simple.

Once Installed
• Easier to have website host install for you to avoid potential errors
• Login through Admin Panel, such as wp-admin
• All actions occur with the Admin panel, impact how website looks and is
accessed

Using Social Media for Websites
• Adding authenticity
• Grabbing attention
• Boosting imagery
• Inviting interaction
• Embracing mobile
• Elevating User Generated Content

Ways Social Media Assists Websites
• More traffic
• More revenue
• Increased brand awareness
• Build personal connection with clients

Common Social Media Used for Promotion

Other Ways to Promote Websites
• Affiliate Marketing:
https://www.innovativeprof.com/blog/Affiliate%20Marketing%20Direction
s.html
• Internet Marketing:
https://www.innovativeprof.com/blog/5%20P's%20of%20Internet%20Mar
keting.html

Search Engine Optimization (SEO)
and Pay Per Click (PPC)
BITM 3730
11/14

Purpose of SEO
• To drive targeted traffic to your website [or specific pages]
• Ideally, the traffic drives additional sales
• Most online purchases are made on sites found through search engine listings

SEO is Technically Not Paid Advertising
• SEO – influence rankings in the “natural” (a.k.a. “organic”, a.k.a. “algorithmic”)
search results
• PPC – paid search advertising on a pay-per-click basis. The more you pay, the higher
your placement. Stop paying = stop receiving traffic.
• PPC – pay per click
• SEM – encompasses both SEO and PPC
• Search engine marketing

Most Commonly Used Search Engines
• Google
• Google AdWords
• Bing
• Microsoft Advertising
• Yahoo Search

SEO is Based on Keywords
• Keyword Research
• The “right” keywords are…
• relevant to your business
• popular with searchers
• https://ads.google.com/home/tools/keyword-planner/

Researching Keywords
• Tools to check popularity of keyword searches
• http://WordTracker.com
• http://KeywordDiscovery.com
• http://adwords.google.com/KeywordPlanner
• http://www.google.com/trends/
• http://ubersuggest.org/

SEO – Constant Changes
• Topically relevant links from important sites
• Anchor text
• Keyword-rich title tags
• Keyword-rich content
• Internal hierarchical linking structure
• The whole is greater than the sum of the parts

Begin The 7 Steps
1) Get Your Site Fully Indexed
2) Get Your Pages Visible
3) Build Links & PageRank
4) Leverage Your PageRank
4) Encourage Clickthrough
6) Track the Right Metrics
7) Avoid Worst Practices

 Search engines are wary of “dynamic” pages - they
fear “spider traps”
 The better your PageRank, the deeper and more often
your site will be spidered

 Page # estimates are wildly inaccurate, and include non-indexed pages
(e.g. ones with no title or snippet)
 Misconfigurations (in robots.txt, in the type of redirects used, requiring
cookies, etc.) can kill indexation
 Keep your error pages out of the index by returning 404 status code
 Keep duplicate pages out of the index by standardizing your URLs,
eliminating unnecessary variables, using 301 redirects when needed

Not Spider-Friendly
• GET http://www.bananarepublic.com --> 302 Moved Temporarily
• GET http://www.bananarepublic.com/browse/home.do --> 302 Moved
Temporarily
• GET
http://www.bananarepublic.com/browse/home.do?targetURL=http%3A%2
F%2Fwww.bananarepublic.com%2Fbrowse%2Fhome.do&CookieSet=Set --
> 302 Moved Temporarily
• GET http://www.bananarepublic.com/cookieFailure.do --> 200 OK

2) Get Your Pages Visible
• 100+ “signals” that influence ranking
• “Title tag” is the most important copy on the page
• Home page is the most important page of a site
• Every page of your site has a “song” (keyword theme)
• Incorporate keywords into title tags, hyperlink text, headings (H1 & H2 tags), alt tags, and
high up in the page (where they’re given more “weight”)
• Eliminate extraneous HTML code
• “Meta tags” are not a magic bullet
• Have text for navigation, not graphics

3) Build Links and PageRank
• “Link popularity” affects search engine rankings
• PageRank™ - Links from “important” sites have more impact on
your Google rankings (weighted link popularity)
• Google offers a window into your PageRank
• PageRank meter in the Google Toolbar (toolbar.google.com)
• Google Directory (directory.google.com) category pages
• 3rd party tools like SEOChat.com’s “PageRank Lookup” & “PageRank
Search”
• Scores range from 0-10 on a logarithmic scale

• Your home page’s PageRank gets distributed to your deep pages by virtue of
your hierarchical internal linking structure (e.g. breadcrumb nav)
• Pay attention to the text used within the hyperlink (“Google bombing”)
• Don’t hoard your PageRank
• Don’t link to “bad neighborhoods”

 Avoid PageRank dilution
 Canonicalization (www.domain.com vs. domain.com)
 Duplicate pages: (session IDs, tracking codes, superfluous parameters)
 http://company.com/Products/widget.html
 http://company.com/products/widget.html
 http://company.com/Products/Widget.html
 http://company.com/products/Widget.html
 In general, search engines are cautious of dynamic URLs (with ?, &, and = characters) because of
“spider traps”
 Rewrite your URLs (using a server module/plug-in) or use a hosted proxy service (e.g. GravityStream)
 See http://catalogagemag.com/mag/marketing_right_page_web/

5) Encourage Clickthrough
• Zipf’s Law applies - you need to be at the top of page 1 of the search results.
It’s an implied endorsement.
• Synergistic effect of being at the top of the natural results & paid results
• Entice the user with a compelling call-to-action and value proposition in your
descriptions
• Your title tag is critical
• Snippet gets built automatically, but you CAN influence what’s displayed here

6) Track the Right Metrics
 Indexation: # of pages indexed, % of site indexed, % of product
inventory indexed, # of “fresh pages”
 Link popularity: # of links, PageRank score (0 - 10)
 Rankings: by keyword, “filtered” (penalized) rankings
 Keyword popularity: # of searches, competition, KEI (Keyword
Effectiveness Indicator) scores
 Cost/ROI: sales by keyword & by engine, cost per lead

Avoid Worst Practices
• Target relevant keywords
• Don’t stuff keywords or replicate pages
• Create deep, useful content
• Don't conceal, manipulate, or over-optimize content
• Links should be relevant (no scheming!)
• Observe copyright/trademark law & Google’s guidelines

Spamming in Its Many Forms…
• Hidden or small text
• Keyword stuffing
• Targeted to obviously irrelevant keywords
• Automated submitting, resubmitting, deep submitting
• Competitor names in meta tags
• Duplicate pages with minimal or no changes
• Spamglish
• Machine generated content

Spamming in Its Many Forms…
 Pagejacking
 Doorway pages
 Cloaking
 Submitting to FFA (“Free For All”) sites & link farms
 Buying up expired domains with high PageRanks
 Scraping
 Splogging (spam blogging)

Not Spam, But Bad for Rankings
 Splash pages, content-less home page, Flash intros
 Title tags the same across the site
 Error pages in the search results (eg “Session expired”)
 "Click here" links
 Superfluous text like “Welcome to” at beginning of titles
 Spreading site across multiple domains (usually for load balancing)
 Content too many levels deep

In Summary
• Focus on the right keywords
• Have great keyword-rich content
• Build links, and thus your PageRank™
• Spend that PageRank™ wisely within your site
• Measure the right things
• Continually monitor and benchmark

Pay Per Click
• Bid on the search terms
you want
• You only pay when
someone clicks to get to
your website

Positives of PPC
• Immediate placement
• You can control budget and positioning
• Only pay if traffic is produced
• You can use inexpensive keywords

Negatives of PPC
• Requires a lot of research
• Can cost you a lot of money if done wrong
• Requires you to know about the industry

Podcast Assignment
Write a one-to-two-page response paper answering the following questions after listening to a
podcast associated with web design or website development.
• What concepts were discussed that you learned about in BITM 3730? Identify the topics
discussed.
• How did the podcast present these topics differently than the course lectures? Explain how.
• Did the podcast make you more comfortable in using certain technologies? Explain how.
Also detail the name of the podcast, the “edition” of the podcast, and a link to the podcast.

Example of Podcast Detail
• Web Design Business with Josh Hall
• 219 - Using YouTube To Grow Your Design Business with Pat
Flynn
• https://podcasts.apple.com/us/podcast/219-using-youtube-to-grow-your-
design-business-with/id1484689808?i=1000581383565

Apple Podcasts Link
• https://podcasts.apple.com/us/genre/podcasts-technology/id1318

Some Podcasts
• https://podcasts.apple.com/us/podcast/web-design-business-with-josh-
hall/id1484689808
• https://podcasts.apple.com/us/podcast/launchers-build-a-successful-web-
design-business/id1453476639
• https://podcasts.apple.com/us/podcast/a-responsive-web-design-
podcast/id910013523
• https://podcasts.apple.com/us/podcast/design-details/id947191070

More Podcasts
• https://podcasts.apple.com/us/podcast/html-all-the-things-web-
development-web-design-small/id1412209136
• https://podcasts.apple.com/us/podcast/designerless-web-design-made-
easy/id1262922797
• https://podcasts.apple.com/us/podcast/self-made-web-
designer/id1498724299
• https://podcasts.apple.com/us/podcast/learning-web-
design/id1614404959?i=1000554065788

More Podcasts
• https://podcasts.apple.com/us/podcast/start-here-web-
development/id898026456
• https://podcasts.apple.com/us/podcast/forge-web-design-
podcast/id1476838772
• https://podcasts.apple.com/us/podcast/making-website-
magic/id1566171685
• https://podcasts.apple.com/us/podcast/web-design-and-
development/id1434872843?i=1000575922723

More Podcasts
• https://podcasts.apple.com/us/podcast/web-design-brisbane-
podcast/id1470829649

BITM3730 8-29.pptx

More Related Content

Similar to BITM3730 8-29.pptx (20)

More from MattMarino13 (20)

Recently uploaded (20)

BITM3730 8-29.pptx