comm 1213 h1 comp 4923 x1
DESCRIPTION
COMM 1213 H1 COMP 4923 X1. Advanced HTML & Introduction to Computer Programming (Readings: Ch. 8, 9 Knuckles). Outline. Moe’s World – Example of a simple table based webpage HTML Frames (Chapter 8) Intro to (Chapter 9) HTML Forms Client Sever Model Programming Concepts JavaScript. EG. - PowerPoint PPT PresentationTRANSCRIPT
11
COMM 1213 H1COMM 1213 H1COMP 4923 X1COMP 4923 X1
Advanced HTML &Advanced HTML &Introduction to Introduction to
Computer ProgrammingComputer Programming(Readings: Ch. 8, 9 Knuckles)(Readings: Ch. 8, 9 Knuckles)
22
OutlineOutline
• Moe’s World – Example of a simple Moe’s World – Example of a simple table based webpagetable based webpage
• HTML Frames (Chapter 8)HTML Frames (Chapter 8)
• Intro to (Chapter 9)Intro to (Chapter 9)– HTML FormsHTML Forms– Client Sever ModelClient Sever Model– Programming Concepts Programming Concepts – JavaScriptJavaScript
EG
33
Moe’s WorldMoe’s World<HTML><HEAD> <TITLE>Moe's Homepage</TITLE></HEAD><BODY LINK="#FFFFFF" VLINK="#FFFF99"><P><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=10
WIDTH="100%" HEIGHT="100%"> <TR> <TD VALIGN=top WIDTH=100 BGCOLOR="#99CCCC"> <P><A HREF="http://www.acadiau.ca">Acadia University</A> <HR> <A HREF="http://cognovatech.com">CogNova Technologies</A> <HR> <A HREF="http://bob.com">Sideshow Bob's Basement</A> <HR> <A HREF="http://willie.com">Groundskeeper Willie's Workshop</A> <HR> </TD> <TD VALIGN=top BGCOLOR="#FFFFFF"> <P><TABLE BORDER=1 BGCOLOR="#99CCCC" CELLPADDING=2
HEIGHT=33> <TR> <TD WIDTH=33 BGCOLOR="#FFFFFF"> <P><IMG SRC="world.gif" WIDTH=33 HEIGHT=33
ALIGN=bottom> </TD> <TD> <H4>Welcome to Moe's World!</H4> </TD> </TR> </TABLE> <P> Feel free to click on one of my favorite links to the left or stick around and see what I have to say. <P>Blagh Blagh Blagh </TD> </TR></TABLE></BODY></HTML>
44
Frames – Chapter 8Frames – Chapter 8
• Link to on-line website for Link to on-line website for Craig D. Knuckles textCraig D. Knuckles text
55
Intro to HTML Forms – Ch.9Intro to HTML Forms – Ch.9
66
HTML FormsHTML Forms<HTML><HEAD> <TITLE>Various Form Elements</TITLE></HEAD><BODY BGCOLOR="#FFFFFF"><P><FORM name=demoform> <P><B>TEXT FIELD:</B><INPUT TYPE=text VALUE="Enter Your Name" SIZE=15><BR> <HR> <B>TEXT AREA: </B><TEXTAREA ROWS=4 COLS=30 WRAP=virtual>Enter Special Requests
here!</TEXTAREA><BR> <HR> <B>CHECKBOXES:</B> Choose some of the following toppings for your pizza.<BR> Pepperoni:<INPUT TYPE=checkbox VALUE=somevalue> Sausage:<INPUT TYPE=checkbox VALUE=somevalue> Mushrooms:<INPUT TYPE=checkbox VALUE=somevalue> Onions:<INPUT TYPE=checkbox VALUE=somevalue> Extra Cheese:<INPUT TYPE=checkbox VALUE=somevalue><BR> <HR>
77
HTML FormsHTML Forms <B>RADIO BUTTONS:</B> Pick a size for your pizza.<BR> Small:<INPUT TYPE=radio NAME=radio 1629906> Medium:<INPUT TYPE=radio NAME=radio 1629906> Large:<INPUT TYPE=radio NAME=radio 1629906> X-Large<INPUT TYPE=radio NAME=radio 1629906><BR> <HR> <B>POP-UP-MENU :</B> Choose one of the following delivery options.<BR> <SELECT > <OPTION>Pickup <OPTION>Delivery <OPTION>Eat In </SELECT><BR> <HR> <B>GENERIC BUTTON : </B><INPUT TYPE=button NAME=notimportant VALUE="Click Here to Process
Order."><BR> <HR> <B>RESET BUTTON: </B><INPUT TYPE=reset VALUE="Reset the form"></FORM></BODY></HTML>
88
Client-Server ModelClient-Server Model
99
Client-Server ModelClient-Server Model
1010
Programming FundamentalsProgramming Fundamentals
• We will use a LEGO robot to We will use a LEGO robot to demonstrate the basic building demonstrate the basic building blocks of all programs:blocks of all programs:– I/O actions (move, display, input)I/O actions (move, display, input)– Variables (counter = 1, x = 25)Variables (counter = 1, x = 25)– Conditional logic Conditional logic
(If touchsensor=press,Then backup(If touchsensor=press,Then backup– Loops (For 4 times, Do …)Loops (For 4 times, Do …)– Functions ( FollowLine, CalcTotal(x) )Functions ( FollowLine, CalcTotal(x) )
1111
Programming LangaugesProgramming Langauges
• Allow humans to write logical sequences of Allow humans to write logical sequences of computer commands in an English like computer commands in an English like languagelanguage
• Programs can be:Programs can be:– ““Interpreted” by another program to execute the Interpreted” by another program to execute the
commandscommands– Compiled into machine code and then run on its Compiled into machine code and then run on its
own to excute the commandsown to excute the commands
• Java has become one of the dominate Java has become one of the dominate programming langaugesprogramming langauges
• Other languages …?Other languages …?
1212
Programming LanguagesProgramming Languages
• What is the difference between an What is the difference between an interpreter and a compiler?interpreter and a compiler?
HTML code
Interpreter Compiler
C code
Operating System
Computer Hardware
*.exe
1313
The Java Programming The Java Programming LanguageLanguage
• Java is a relatively new language Java is a relatively new language
• ““Green”, 1991 Sun Microsystems – dev. Green”, 1991 Sun Microsystems – dev. for use in consumer devices such as for use in consumer devices such as intelligent TV controllers intelligent TV controllers – Object Oriented but simpler than C++Object Oriented but simpler than C++– Architecture neutral (can run on lots of h/w)Architecture neutral (can run on lots of h/w)– Network readyNetwork ready– Portable, Reliable and SecurePortable, Reliable and Secure
1414
Java Programs and the Java Programs and the Java Virtual MachineJava Virtual Machine
program.class
Java Virtual Machine Compiler
program.java
Operating System
Computer Hardware
Internet Internet
1515
Java and the WebJava and the Web
• In 1995 the first HotJava browser was In 1995 the first HotJava browser was demoed at SunWorld exhibitiondemoed at SunWorld exhibition
• It could download programs called It could download programs called applets applets from a the web and run them locallyfrom a the web and run them locally
• Provided animation and interactionProvided animation and interaction
• ““Write once, run anywhere” Write once, run anywhere”
• By 1996 both Netscape and MS supported By 1996 both Netscape and MS supported Java within their browsersJava within their browsers
1616
Java and the WebJava and the Web
• Java has been designed for the WebJava has been designed for the Web
• It has two attributes that make it It has two attributes that make it suitable:suitable:– Security:Security: An assortment of security An assortment of security
features that guarantee that no evil applets features that guarantee that no evil applets can be written and assist in the writing of can be written and assist in the writing of good codegood code
– Portability:Portability: Applications and Applets can Applications and Applets can run on Windows, Unix, Linux, Macrun on Windows, Unix, Linux, Mac
1717
Java AppletsJava Applets
• Applets – Run within a browser in an Applets – Run within a browser in an allocated space of webpageallocated space of webpage
program.class
Java Virtual Machine Compiler
program.java
Operating System
Computer Hardware
Browser
1919
Java AppletsJava Applets
• Full-feature client-side programming language Full-feature client-side programming language • Code is external to HTML, but can be called by HTML Code is external to HTML, but can be called by HTML • HTML allocates space, applet executes in that spaceHTML allocates space, applet executes in that space• For complex algorithms and local data and image For complex algorithms and local data and image
manipulationmanipulation• Examples: Examples:
– HelloApplet.html, HelloApplet.javaHelloApplet.html, HelloApplet.java– AnimationApplet.html, AnimationApplet.javaAnimationApplet.html, AnimationApplet.java– http://www.paradise-inn-carriacou.com/sunsets/http://www.paradise-inn-carriacou.com/sunsets/
sunsets_lake.phpsunsets_lake.php
2020
JavaScriptJavaScript
• JavaScript – Runs within a browser, JavaScript – Runs within a browser, can manipulate most aspects of HTMLcan manipulate most aspects of HTML
webpage.html
JavaScript Interpreter
Operating System
Computer Hardware
Browser
2121
JavaScriptJavaScript
• Originally “LiveScape”, developed independent of Originally “LiveScape”, developed independent of Java at NetScape by Brendan EichJava at NetScape by Brendan Eich
• A small “scripting” language designed to enhance A small “scripting” language designed to enhance webpages by manipulating webpage objectswebpages by manipulating webpage objects
• Code is embedded in HTML, and called by HTML Code is embedded in HTML, and called by HTML • Can manipulated most aspects of a webpageCan manipulated most aspects of a webpage• For generation of dynamic content but less For generation of dynamic content but less
complex computation and data manipulationcomplex computation and data manipulation
2222
JavaScriptJavaScript
• Examples:Examples:– Movement of browser windowsMovement of browser windows– Validation of entered FORM dataValidation of entered FORM data– Event handlingEvent handling
2323
Why learn JavaScript?Why learn JavaScript?
• A good first step to learning programmingA good first step to learning programming– All fundamental concepts are usedAll fundamental concepts are used– Object-Oriented Programming (OOP)Object-Oriented Programming (OOP)
• Allows you to quickly build dynamic Allows you to quickly build dynamic content for webpagescontent for webpages
• JavaScript code can be saved and reused JavaScript code can be saved and reused
• Use existing libraries of JavaScript codeUse existing libraries of JavaScript code
2424
ResourcesResources• Getting started with HTML Getting started with HTML from the W3C from the W3C • W3C'sW3C's Recommendation for Recommendation for HTML 4.0HTML 4.0 is the is the
authoritative specification for HTML authoritative specification for HTML • W3 Schools W3 Schools HTML TutorialHTML Tutorial • HTML Goodies HTML Goodies HTML PrimerHTML Primer • An An HTML Code Tutorial HTML Code Tutorial • Writing HTMLWriting HTML a tutorial for creating web pages (a a tutorial for creating web pages (a
little old but a different perspective) little old but a different perspective)
• JavaScript examples:JavaScript examples:http://www.w3schools.com/js/js_examples.asphttp://www.w3schools.com/js/js_examples.asphttp://www.js-examples.com/page/javascripts.htmlhttp://www.js-examples.com/page/javascripts.htmlhttp://javascript.internet.com/http://javascript.internet.com/
2626
Architectural of the InternetArchitectural of the Internet
InternetInternet
Application
Client 1
Server BServer C
TCP/IP
Application
Client 2
Server X
Server Y
Server C
Intranet
Intranet
Acadia
2727
TCP/IP Protocol ArchitectureTCP/IP Protocol Architecture
Transmission Control Protocol
Internet Protocol
2828
TCP/IP Protocol ArchitectureTCP/IP Protocol Architecture
• Internet Protocol (IP) – like a postcard Internet Protocol (IP) – like a postcard that contains:that contains:– Destination address (131.162.201.7)Destination address (131.162.201.7)– Return addressReturn address– Block of data (content)Block of data (content)
• Transmission Control Protocol (TCP)Transmission Control Protocol (TCP)– Ensures the post card gets throughEnsures the post card gets through– Ensures the order of deliverEnsures the order of deliver– Handles errors and control flowHandles errors and control flow
2929
Client-Server Applications Client-Server Applications that use the Internetthat use the Internet
Physical
Network
TCP
IP
Physical
Network
TCP
IPInternetInternet
Telnet Window Telnet Server
FTP Client FTP Server
eMail Client eMail ServerSMTP/POP
FTP
Telnet Protocol
3030
Major Architectural Major Architectural Components of the WebComponents of the Web
InternetInternet
Browser
DatabaseServer
Client 1
Server A
Server BServer C
URL
HTTPTCP/IP
Browser
Client 2 HTTPServer
App.Server
index.html
3131
ImagesImages• Various digital image formats can be embedded with in HTML: .gif, .jpgVarious digital image formats can be embedded with in HTML: .gif, .jpg• ExampleExample
• See See www.bellsnwhistles.comwww.bellsnwhistles.com as source of images and other objects. as source of images and other objects.• Let’s down load one and try it …Let’s down load one and try it …<BODY>
<H1>My new baby girl.</H1><IMG SRC=“NicoleSilver.jpg”></BODY>
3232
Hyper LinksHyper Links
<HTML><HEAD></HEAD><BODY><H1>My Oldest Daughter.</H1><IMG SRC=“Natalie.jpg”>Natalie goes to <A HREF=“http://www.ems.ednet.ns.ca”>Evangeline
Middle School</A>Which is in New Minas.Click <A HREF=“mailto:[email protected]”>Here</A>
to send her email.</BODY></HTML>