1 accelerated web development course javascript and client side programming day 2 rich roth on the...
TRANSCRIPT
1
Accelerated Web Development CourseAccelerated Web Development CourseJavaScript and Client side programmingJavaScript and Client side programming
Day 2Day 2
Rich RothRich RothOn The NetOn The Net
http://east.on-the-net.com/neuhttp://east.on-the-net.com/neu413-586-9668 - [email protected] - [email protected]
2
Day 2 outlineDay 2 outline
Database Connectivity overviewDatabase Connectivity overview Calendar ExampleCalendar Example Lab work on your web sitesLab work on your web sites
– Mixed with discussion of JS LanguageMixed with discussion of JS Language– and individual review of assignmentand individual review of assignment
3
Browser
Text Rendering
Engine
Client/Server - What is it ?Client/Server - What is it ?
Web Server
HTML
file transfer
4
Browser
Text Rendering
Engine
Programming
Language(s)
Client/Server - ProgrammableClient/Server - Programmable
Web Server
HTML
file transfer
CGI
ExternalProgram
5
Browser
Text Rendering
Engine
Programming
Language(s)
Client/Server - ProgrammableClient/Server - Programmable
Forms:1) GET - on URL2) POST - stdin
Socket:To data server process
6
CGI: Common Gateway InterfaceCGI: Common Gateway Interface
Based on passing form contents to program Based on passing form contents to program outside the web server.outside the web server.
Fields on forms are only HTML Fields on forms are only HTML controllable informationcontrollable information
Hidden fields are used to pass NON-user Hidden fields are used to pass NON-user entered information.entered information.
7
CGI Data Passing to programCGI Data Passing to program
GET: GET: – Information on URL of next pageInformation on URL of next page– Easy to bookmarkEasy to bookmark
POST: POST: – Passed as into to programPassed as into to program– Not visableNot visable– Can NOT be bookmarkedCan NOT be bookmarked
8
CGI returning dataCGI returning data
CGI Program creates a new web pageCGI Program creates a new web page Page created totally by the program.Page created totally by the program. Program ‘populates’ template with Program ‘populates’ template with
meaningful datameaningful data Template written in HTML like statementsTemplate written in HTML like statements XMLXML
9
Server TemplateServer Template
<HTML><table><HTML><table>
<tr><th>Col one</th><th>Col 2</th></tr><tr><th>Col one</th><th>Col 2</th></tr>
<datarow select day,event from dayinfo <datarow select day,event from dayinfo where month=thismonth() sort by day>where month=thismonth() sort by day>
<tr><td><tr><td>[col1][col1]</td><td></td><td>[col2][col2]</td></tr></td></tr>
</datarow></datarow>
</table></HTML></table></HTML>
10
Programmable Socket Programmable Socket
Client side applet opens socket to serverClient side applet opens socket to server Only server allowed is one applet was Only server allowed is one applet was
loaded from - (security sandbox)loaded from - (security sandbox) Socket is two way connection.Socket is two way connection. Program on client asks/sends info to serverProgram on client asks/sends info to server Server is usually a custom data server or Server is usually a custom data server or
standard interface to a database.standard interface to a database.
11
Data ServerData Server
Can Custom code or standard methodCan Custom code or standard method Standards:Standards:
– ODBC - Open data base connector (MS)ODBC - Open data base connector (MS)– JDBC - Java DB connector (SUN)JDBC - Java DB connector (SUN)– All requests done using SQLAll requests done using SQL
Connector talks to Database server Connector talks to Database server JS can call Java applet or JavaBean to JS can call Java applet or JavaBean to
provide logicprovide logic
12
SQL - Standard Query LanguageSQL - Standard Query Language
Embedded Language Embedded Language – Built on top of a standard languageBuilt on top of a standard language
A Database consists of a group of TableA Database consists of a group of Table Each Table has Row and ColumnsEach Table has Row and Columns Each Column is a specific data elementEach Column is a specific data element Each Row is a record of data elements that group Each Row is a record of data elements that group
togethertogether Each Row has a unique IdentifierEach Row has a unique Identifier Tables are in ‘Third Normal Form’ (kinda)Tables are in ‘Third Normal Form’ (kinda)
13
Sample SQL DatabaseSample SQL Database
Table: StudentsTable: Students– Columns: Student ID, Name, DOB, MajorColumns: Student ID, Name, DOB, Major– One Row per studentOne Row per student
Table: ClassesTable: Classes– Columns: Class No, Room, Time, Grade LevelColumns: Class No, Room, Time, Grade Level– One Row per ClassOne Row per Class
Table: AttendenceTable: Attendence– Columns: Class No, Student IDColumns: Class No, Student ID– One row per student per classOne row per student per class
14
Using Existing Scripts: ObjectsUsing Existing Scripts: Objects
WindowWindow– DocumentDocument
» Anchor, Applet, AreaAnchor, Applet, Area
» Form: Form elementsForm: Form elements
» Image, LinkImage, Link
– HistoryHistory– LocationLocation
15
Built-in Objects, Data and EventsBuilt-in Objects, Data and Events
Properties:Properties:– Data of an objectData of an object
Methods:Methods:– Actions on an objectActions on an object
Naming:Naming:– Property: Object.property.subpropertyProperty: Object.property.subproperty– Method: Object.property.subproperty()Method: Object.property.subproperty()
16
Programming techniquesProgramming techniques
Basic Logic FlowBasic Logic Flow– Variables: literal, ‘var’Variables: literal, ‘var’– Objects: ‘new’, no inheritanceObjects: ‘new’, no inheritance– if/then/elseif/then/else– Loop: Loop:
» for, while, for … infor, while, for … in» Break, ContinueBreak, Continue
– FunctionsFunctions ExpressionsExpressions
17
Finding Javascript programsFinding Javascript programs
Archives:Archives:– Javascript.comJavascript.com– See Class notesSee Class notes– Check Search enginesCheck Search engines
Books:Books:– Get with Cdrom or disk, so don’t have to retypeGet with Cdrom or disk, so don’t have to retype
Pages you likePages you like Ownership and CopyrightOwnership and Copyright
18
HomeworkHomework
Find a script that fits into your site designFind a script that fits into your site design Create a test page using that scriptCreate a test page using that script Define what about the script needs changingDefine what about the script needs changing Change if you can, in any case, send:Change if you can, in any case, send:
– A description of the purpose of the scriptA description of the purpose of the script– The URL of where you found it.The URL of where you found it.– The web page using it, as far as you have done.The web page using it, as far as you have done. Email me ([email protected]) the pageEmail me ([email protected]) the page
Email only Text or HTMLEmail only Text or HTML. .
19
Cookie manipulationCookie manipulation
Remember information from prior visitsRemember information from prior visits Carry “State” information between sessionsCarry “State” information between sessions
– Order in processOrder in process– Credit approvedCredit approved
Get information set by server for local useGet information set by server for local use
20
Day 2 - Digging into JSDay 2 - Digging into JS
Javascript programming: Controlling Browser Objects: Programming tools: Lab:
– Special Calculators– Reminder Calendar
21
Day 3 - Going beyond JSDay 3 - Going beyond JS
Integration: Operations: Database operations with JS Lab:
– Events Database with calendar display