Unit 1 – Web Concepts
Instructor: Brent Presley
ASSIGNMENT
• Read Chapter 1• Complete lab 1 – Installing Portable Apps
Murach’s JavaScript, C1
© 2009, Mike Murach & Associates, Inc.Slide 4
The architecture of a web application
Web Server
E-mail Server
Database ServerThe Internet
`
Client
`
Client
Murach’s JavaScript, C1
© 2009, Mike Murach & Associates, Inc.Slide 5
How a web server processes a static web page
`
Web browser Web server
HTTP request
HTTP response
XHTML file
Murach’s JavaScript, C1
© 2009, Mike Murach & Associates, Inc.Slide 6
A simple HTTP request GET / HTTP/1.1 Host: www.example.com
A simple HTTP response HTTP/1.1 200 OK Content-Type: text/html Content-Length: 136 Server: Apache/2.2.3 <html> <head> <title>Example Web Page</title> </head> <body> <p>This is a sample web page</p> </body> </html>
Murach’s JavaScript, C1
© 2009, Mike Murach & Associates, Inc.Slide 7
How a web server processes a dynamic web page
`
Web browser Web server
HTTP request
HTTP response
Application server
Application script
Database server
Murach’s JavaScript, C1
© 2009, Mike Murach & Associates, Inc.Slide 8
Web browsers Internet Explorer
Firefox
Safari
Opera
Chrome
Web servers Apache
IIS
Murach’s JavaScript, C1
© 2009, Mike Murach & Associates, Inc.Slide 9
Server-side scripting languages ASP.NET
JSP
PHP
ColdFusion
Ruby
Perl
Python
Murach’s JavaScript, C1
© 2009, Mike Murach & Associates, Inc.Slide 10
How JavaScript fits into this architecture
`
Web browser Web server
HTTP request
HTTP response
Application server
Application script
Database server
JavaScript
HTML
• Web pages are defined using HTML(Hypertext Markup Language) and now, XHTML Extensible HTML
• XHTML was created in 2001 to rein in different HTML standards and to incorporate XML.
• XHTML has been incorporated into the newest version of HTML: HTML 5– We’ll be using HTML 5 in this class. XHTML has been deprecated.
• HTML vs XHTML– Many pages on the internet contain ‘bad’ HTML. The code will work fine in most
browsers even though it is not well formed.– XHTML requires it to be well-formed
HTML
• HTML defines what text is displayed on a page, how it is displayed and what images are displayed on a web page
• HTML is pure text (no Word-like formatting)– Can read these in any text editor because it is just text
• HTML can be typed by hand, through Web Development programs– Microsoft Expression Web– Dreamweaver
• How to view the source code on a page– right click- view source
WHY LEARN HTML?• Some web techniques can only be created
using HTML– Inserting JavaScript
• HTML developed by other programs frequently needs tweaking
• In Web Data Mgt, we’ll be writing programs to create HTML
STORING THE HTML
• Once the HTML has been perfected, it is saved or sent to a web server that stores it in a location that is accessible by the Internet.
• An Internet user uses a web browser to request pages from a web server and to display those pages.
• A web browser contains the ability to convert the HTML instructions & javascript back into a graphical, functioning web page.– Internet Explorer, Google Chrome and Mozilla Firefox are the some of the
most popular browsers.
WEB SITE VS. WEB PAGE
• A collection of related web pages forms a web.• Each web page is stored in its own file. These files
are often organized into a folder.• A web is also referred to as a web site.• The main page of a web (site) should have a
special name: index.html or default.html.– Web browsers recognize this as a starting page when
they access a web site
URL
• Each individual web page is assigned a URLUniversal Resource Locator
• The URL is the web page’s address on the Internet.
• All pages have unique URLs• Most URLs start with the letters WWW, but this is
no longer the requirement it used to be.• www.mstc.edu• The index.html is implied
URL COMPONENTS
WEB SITE ELEMENTS
• The starting page for a web site should be named index.html
• Web sites normally have an images folder – This folder contains all the images used by the web site. – By storing only one copy of each image, the web site
can save space, especially if one image is used many times.
WEB SITE ELEMENTS
• Many web sites also have a _private folder – This folder can store pages, files or images that you don’t
want the Internet user to have direct access to.– This folder might be used to store a database used by the
web site.• Web sites are normally organized into folders of web pages,
just like a hard disk is organized.– can also contain files. Word files, Excel files, PowerPoint files, etc
can all be displayed by web browsers.
• Folder structure on my website. What page pulls up?? Index.html
WEB SITE ELEMENTS• index.html• Images folder• _private folder• Other folders• Files
– Html and others• Amazon.com
– Html, css, javascript
WEB PAGE ELEMENTS
• Text (formatted, different sizes)• Images (usually stored in a separate folder)
– Web pages can display three different kinds of images:• jpg. (high quality photos, millions of colors)• .gif (transparent, animated, 256 colors)• .png (portable network graphics)
• Hyperlinks (links to other web pages/sites)• Tables (used to organize page information)• JavaScript (mini-programs that run within your web
page)
Murach’s JavaScript, C1
© 2009, Mike Murach & Associates, Inc.Slide 22
The code for a web page <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mike's Bait and Tackle Shop</title> </head> <body> <h1>Mike's Bait and Tackle Shop</h1> <p>Welcome to Mike's Bait and Tackle Shop. We have all the gear you'll need to make your next fishing trip a great success!</p> <h2>New Products</h2> <ul> <li>Ultima 3000 Two-handed fly rod</li> <li>Phil's Faux Shrimp Fly - Size 6</li> <li>Titanium Open Back Fly Reel - Black</li> </ul> <p>Contact us by phone at 559-555-6624 to place your order today.</p> </body> </html>
Murach’s JavaScript, C1
© 2009, Mike Murach & Associates, Inc.Slide 23
The code for a web page that’s styled with CSS <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mike's Bait and Tackle Shop</title> <style type='text/css'> body { background-color: #333366; color: #FFFFFF; } h1 { color: #FFCC33; border-bottom: 3px solid #FF3333; } ul { list-style-type: square; } </style> </head> <!-- The rest of this document is the same as before -->
EXAMPLES OF CSS
• http://www.creativebloq.com/web-design/examples-css-912710
• CSS handles the cool formatting and shading
Murach’s JavaScript, C1
© 2009, Mike Murach & Associates, Inc.Slide 25
Common uses of JavaScript Validate form data before it is sent to the server for processing.
Respond to user actions such as mouse clicks and key presses.
Create dynamic menus.
Create slide shows.
Animate elements in a web page.
Create timers, clocks, and calendars.
Change the style sheet that a web page uses.
Sort the data that’s in a table.
Control the web browser window.
Detect web browser plug-ins.
Open new web browser windows.
Change images when the user rolls the mouse over an image.
Murach’s JavaScript, C1
© 2009, Mike Murach & Associates, Inc.Slide 26
Embedded JavaScript in an XHTML document <!-- The code before this is the same as in figure 1-6. --> <p>Contact us by phone at 559-555-6624 to place your order today.</p> <p>© <script type="text/javascript"> var today = new Date(); document.writeln( today.getFullYear() ); </script> Mike's Bait and Tackle Shop</p> </body> </html>
JAVASCRIPT EXAMPLES
• http://www.creativebloq.com/web-design/examples-of-javascript-1233964
• Javascript is what handles the ‘cool’ elements of a website– Changing content, interesting effects
DOCUMENT OBJECT MODEL
• The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents.[1] The nodes of every document are organized in a tree structure, called the DOM tree. Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The public interface of a DOM is specified in its application programming interface (API).
DOM TREE FOR INDEX.HTML
Murach’s JavaScript, C1
© 2009, Mike Murach & Associates, Inc.Slide 30
The DOM (Document Object Model) for the page
html
bodyhead
title ph1 p h2 ul
lili li
text text text text text
text text text Nodes
Murach’s JavaScript, C1
© 2009, Mike Murach & Associates, Inc.Slide 31
The DOM event cycle
EventOccurs
ScriptExecutes
DOMModified
PageUpdated
PageLoaded
Murach’s JavaScript, C1
© 2009, Mike Murach & Associates, Inc.Slide 32
Terms rich Internet application (RIA)
AJAX (asynchronous JavaScript and XML)
XMLHttpRequest object
Extensible markup language (XML)
JavaScript object notation (JSON)
Murach’s JavaScript, C1
© 2009, Mike Murach & Associates, Inc.Slide 33
AJAX-enabled request and response cycle
ServerAJAX HTTP request:The browser requests updated information for a page.
Client
AJAX HTTP response:The server returns the requested information and the page is updated.
Web server
Web serverBrowser
Browser
VIEW PAGE SOURCE ON A PAGE
• Right click then “view source”
• “inspect element” will also work
• Developer tools F12
HOW THE INTERNET WORKS – SUMMARIZE WHAT WE’VE LEARNED• LearnCode.Academy• https://
www.youtube.com/watch?v=e4S8zfLdLgQ
ASSIGNMENTS
• In class assignment, work as a group of 3– View source, or inspect element on 5 pages. Find an
example of the following: HTML, CSS, JavaScript. – Copy/paste them into a document– Tell me what you think each component that you’ve
chosen is doing– submit the document on onedrive as a group
• Individual assignment – – Unit 1-5 – HTML and CSS (will decide due date later in
the semester)