INLS 672

1
INLS 672

• Web Applications II

2
Tonights Agenda

• Who we are
• Tools and Platforms
• Programming Languages in General
• Javascript background
• Scripts and Event Handlers

3
Who am I?

• bil hays (bil_hays_at_unc.edu)
• Network Manager in Computer Science
• MS degree in Comp Lit from UNC
• BS degree in Biology from WM
• No formal training in IT/IS (a couple of 2-3 day
  courses)
• I've been working part or full time in IT at UNC
  since 1984
• I am not a professor
• I'm doing this to learn myself, and some of you
  know more about some of this material than I do

4
What I'm like

• Sometimes I talk really fast--if I go too fast,
  ask me to slow down
• I will go into detail from time to time that I
  don't expect you to understand--you all vary
  widely in experience, and I will try to keep
  everyone comfortable with the material
• I'm happy to meet with folks outside of class
• I'm happy to answer question via email

5
Who are you?

• Your name, what experience you have with
  programming, and your favorite food and movie.

6
What we're going to look at

• Browser side programming Javascript
• Server side programming PHP, Ruby on Rails
• Maybe, server side control bash

7
Why are we here?

• This is a project course, so if youre interested
  in a topic, let me know
• Take this as an opportunity to explore the
  technologies--it is as much your class as mine
• More detail is at the class web
  sitehttp//www.cs.unc.edu/hays/INLS668/
• We need a venue to communicate, and folks seem
  reluctant to use the list to ask questions, any
  ideas?

8
What I expect of you

• Come to class prepared--do the readings before
  class, bring questions
• Get your projects in on time
• Let me know if you're having problems with any of
  the material or any other aspect of the class, as
  soon as possible
• Follow the honor code

9
The Syllabus
10
Tonight and Next Class

• Tonight, we'll talk about some of the tools and
  workflow you might use, and start with javascript
• Next week, bring your laptops--the first half
  we'll go into javascript in greater detail, and
  then use the second half of class to play with
  some examples
• In the mean time, I want you to try some on your
  own--the first lab/portfolio aren't due for a few
  weeks, but there's every reason to go ahead and
  get started

11
Tools you might use, things you'll need, and some
general considerations.
12
Platforms

• This is primarily a unix oriented class
• You'll need an account on Ruby
• We'll have some redhat servers for the group work
• You can use isis if you like, but I don't
  recommend it, since it's a more complex server
  setup
• You can also use a windows box as a server, but I
  won't be much help with server setup for Ruby and
  PHP

13
A Sense of Security

• Wherever you put your files and web pages, limit
  access to them with passwords or a domain
  restriction--some of the stuff we're going to
  play might be exploitable. Use inls672 and the
  class password for all of your work
• If you choose to run your own server, use a
  firewall and keep the software up to date
• The most important thing to do, always, is check
  any user input for your scripts--know what you
  want, reject anything else
• All of the samples I show are on the class page
  behind a password, same id

14
Browsers

• Especially for the javascript portions, the
  choice of browser can be an issue
• We'll use firefox under windows as the primary
  target (since that's the biggest "audience")
• You should try out your work on other browsers,
  and across platforms
• I use a mac, so the first look I take will be
  through that, but I'll also run it through
  firefox under Windows and that's the platform
  I'll grade from if I run into any oddities

15
Kinds of Editors

• Simple text editors vi, emacs, notepad, BBEdit
• Programmer's Editors vim, bluefish, xcode (these
  support syntax highlighting)
• WYSIWYG (or WYSIWYS and WYGIWYG) editors
  Frontpage, Dreamweaver, NVu, Mozilla Composer
• Hybrid editors Word (blech!)

16
VI

• Written by Bill Joy for an early BSD variant,
  designed to work over 300 baud lines
• Was the lowest common denominator for Unix, but
  has also be replaced mostly by VIM (when you call
  vi, you usually get vim instead)
• Dual Mode System
• Command
• Edit
• If youre going to work with unix, and we are,
  you need to know how to use this one!
• help.unc.edu has a good doc on vi

17
Why do I have to learn these when I have a nice
gui in Word?

• Because they are there
• Because they are simple
• Alternatives
• Other OS text editors
• Notepad
• BBEdit
• Ne, pico
• Look around and pick one to use

18
WYSIWYG Editors

• Mozillas (and Netscapes) Composer, now
  Seamonkey
• I use KompoZer
• Amaya (http//www.w3.org/Amaya)
• Dreamweaver--for this class I want you to avoid
  relying on Dreamweaver or any other editor that
  "helps" you perform complex tasks, since the
  point is to learn how this stuff works.
• Word processors (eg. Word)--these tend to be
  pretty poor editors for what we're going to be
  doing

19
A Rose with any Other Tags

• Why the choice of editor is important

20
Simple Hello World

• Fromhttp//www.w3.org/TR/REC-html40/struct/globa
  l.html

lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http//www.w3.org/TR/html4/strict.dt
d"gt ltHTMLgt ltHEADgt ltTITLEgtMy first HTML
documentlt/TITLEgt lt/HEADgt ltBODYgt
ltPgtHello world! lt/BODYgt lt/HTMLgt
21
HomePages Hello World
ltHTMLgt lt!--This file created 1/21/01 1153 AM by
Claris Home Page version 3.0--gt ltHEADgt ltMETA
NAMEGENERATOR CONTENT"Claris Home Page 3.0"gt
ltX-CLARIS-WINDOW TOP68 BOTTOM768 LEFT8
RIGHT538gt ltX-CLARIS-TAGVIEW
MODEminimalgt lt/HEADgt ltBODY BGCOLOR"FFFFFF"gt ltPgt
Hello world!lt/Pgt lt/BODYgt lt/HTMLgt
22
Word 2001s Hello World
lthtml xmlnso"urnschemas-microsoft-comofficeof
fice" xmlnsw"urnschemas-microsoft-comofficewo
rd" xmlns"http//www.w3.org/TR/REC-html40"gt lthea
dgt ltmeta nameTitle content"hello world"gt ltmeta
nameKeywords content""gt ltmeta
http-equivContent-Type content"text/html
charsetmacintosh"gt ltmeta nameProgId
contentWord.Documentgt ltmeta nameGenerator
content"Microsoft Word 9"gt ltmeta nameOriginator
content"Microsoft Word 9"gt ltlink relFile-List
href"hello_world_word_files/filelist.xml"gt lttitle
gthello worldlt/titlegt lt!--if gte mso 9gtltxmlgt
ltoDocumentPropertiesgt ltoAuthorgtbillt/oAuthorgt
ltoTemplategtNormallt/oTemplategt
ltoLastAuthorgtbillt/oLastAuthorgt
ltoRevisiongt2lt/oRevisiongt ltoCreatedgt2001-01-21
T165300Zlt/oCreatedgt ltoLastSavedgt2001-01-21T1
65300Zlt/oLastSavedgt ltoPagesgt1lt/oPagesgt
ltoLinesgt1lt/oLinesgt ltoParagraphsgt1lt/oParagrap
hsgt ltoVersiongt9.2511lt/oVersiongt
lt/oDocumentPropertiesgt lt/xmlgtlt!endif--gtlt!--if
gte mso 9gtltxmlgt ltwWordDocumentgt
ltwDisplayHorizontalDrawingGridEverygt0lt/wDisplayH
orizontalDrawingGridEverygt ltwDisplayVerticalDra
wingGridEverygt0lt/wDisplayVerticalDrawingGridEvery
gt ltwUseMarginsForDrawingGridOrigin/gt
ltwCompatibilitygt ltwSpaceForUL/gt
ltwBalanceSingleByteDoubleByteWidth/gt
ltwDoNotLeaveBackslashAlone/gt
ltwULTrailSpace/gt ltwDoNotExpandShiftReturn/gt
Etc etc etc
23
Word 2004 (osx)
lthtml xmlnso"urnschemas-microsoft-comofficeof
fice" xmlnsw"urnschemas-microsoft-comofficewo
rd" xmlns"http//www.w3.org/TR/REC-html40"gt lthead
gt ltmeta nameTitle content"Hello world"gt ltmeta
nameKeywords content""gt ltmeta
http-equivContent-Type content"text/html
charsetmacintosh"gt ltmeta nameProgId
contentWord.Documentgt ltmeta nameGenerator
content"Microsoft Word 10"gt ltmeta
nameOriginator content"Microsoft Word
10"gt ltlink relFile-List href"hello_world_word200
4_files/filelist.xml"gt lttitlegtHello
worldlt/titlegt lt!--if gte mso 9gtltxmlgt
ltwWordDocumentgt ltwDisplayHorizontalDrawingGrid
Everygt0lt/wDisplayHorizontalDrawingGridEverygt
ltwDisplayVerticalDrawingGridEverygt0lt/wDisplayVer
ticalDrawingGridEverygt ltwUseMarginsForDrawingGr
idOrigin/gt ltwCompatibilitygt
ltwSpaceForUL/gt ltwBalanceSingleByteDoubleByteW
idth/gt ltwDoNotLeaveBackslashAlone/gt
ltwULTrailSpace/gt ltwDoNotExpandShiftReturn/gt
ltwAdjustLineHeightInTable/gt
lt/wCompatibilitygt lt/wWordDocumentgt lt/xmlgtlt!end
if--gt ltstylegt lt!-- / Style Definitions
/ p.MsoNormal, li.MsoNormal, div.MsoNormal mso-
style-parent"" margin0in margin-bottom.0001
pt mso-paginationwidow-orphan font-size12.0p
t font-familyTimes _at_page Section1 size8.5i
n 11.0in margin1.0in 1.25in 1.0in
1.25in mso-header-margin.5in mso-footer-margi
n.5in mso-paper-source0 div.Section1 page
Section1 --gt lt/stylegt lt/headgt ltbody
bgcolorwhite langEN-US style'tab-interval.5in'
gt ltdiv classSection1gt ltp classMsoNormalgtHello
world!lt/pgt lt/divgt lt/bodygt lt/htmlgt
24
Cleaning Things Up

• HTML Tidyhttp//www.w3.org/People/Raggett/tidy/
• Smart Browsers and Editors
• Validation Serviceshttp//validator.w3.org/

25
So What Should you look for?

• Support for both WYSIWYG and source editing
• Support for XHTML, XML
• Support for validation
• Something that doesn't insert a bunch of stuff
  you don't need
• Syntax highlighting is also a bonus

26
Workflow

• To keep from going crazy, you need to come up
  with a reasonable workflow
• Mostly, you'll be working with files that will be
  served from ruby or one of our servers
• But you'll be working through a lab machine or
  your laptop.

27
Option work in unixland via ssh

• Use ssh to connect to the server
• Open at least two windows
• In one window, you can open the file you're
  working on in vi and leave it open
• In the other window, you can run the program,
  change permissions, move files, etc.
• Test with a local browser

28
Option work in unixland via vnc

• Since linux uses X11, you can use vnc to provide
  access to what looks like the local desktop
• Performance on this is ok from campus, not so
  good from off campus
• If you're interested in this, but don't know how
  to do it, let me know..

29
Option work with files locally

• You can also work with local tools
• This means you need an easy way to move the files
  to the server, such as an open sftp session to
  your target
• Another option is to use rsync to sync the local
  directory to the server (and rsync can be
  scripted, so this itself is an opportunity)

30
Option work with mounted drive

• Servers can be set up as file servers allowing
  drive mounts via protocols such as NFS, AFS, AFP,
  SMB/CIFS, or DAV
• With a mounted drive, you can edit server files
  directly
• Performance can be an issue
• Fuse and SSHFS is another option, probably the
  best one, since it works with any server
  supporting SSH

31
A few words about Carriage Returns and Linefeeds

• Carriage Returns are ASCII 13
• Line Feeds are ASCII 10
• Different OSes use different conventions
• Macs break lines with a carriage return
• Unix breaks lines with linefeeds
• DOS/Windows uses both
• Use a utility program to convert
• Dos2unix, unix2dos
• BBEdit

32
Control-C
33
Some Terms

• What is a programming language?
• What is an interpreted language?
• What is a compiler?

34
Some Terms

• What is a variable?
• What is a string?
• A number?
• Type?
• An array?
• A control structure?

35
Some Terms

• What is the difference between a compiler and an
  interpreter?
• What does a web server send to a browser?
• How does a browser work?

36
Javascript

• Developed by Netscape (Microsoft has a version
  called Jscript)
• Now, ECMAScript (ECMA-262)
• Syntax similar to C and Java
• Is not Java!
• Object oriented (sort of)
• Dynamically typed

37
The Nice Thing about Standards

• Javascript as a standard is ECMA 262, currently
  edition 3 is most widely supported
• This is equivalent to Javascript version 1.7 is
  supported in Mozilla/Gecko browsers
• Most browsers support a variant or superset of
  the standard language--Internet Explorer supports
  Jscript, for example
• For a table of dialects see http//en.wikipedia.o
  rg/wiki/ECMAScript

38
Javascript is an Interpreted Language

• Program code is left in a text format, and
  interpreted on the fly
• Client side javascript is interpreted by a
  javascript aware browser
• Server side javascript is interpreted by the
  server, and the results are sent to the browser.
  See http//en.wikipedia.org/wiki/Server-side_JavaS
  cript

39
Javascript is general purpose

• Although it's primary usage is in browsers,
  javascript is really just a language
• In addition to server side javascript, it can be
  used in desktop applications, and the interpreter
  is opensource--for example, Konfabulator/Yahoo
  Widgets is based on spidermonkey, one of the
  javascript interpreters released by Mozilla
• OS X Dashboard widgets are javascript applications

40
What Javascript can do

• Manipulate objects contained in the browser (via
  the Document Object Model)
• Write html
• Change the src of images
• Move things from one place to another
• Compare data
• Perform calculations
• Control user interactions via these methods

41
What Javacript can't do

• Read or Write files
• Make network connections
• Perform graphic manipulations (although it can
  control the browser's display of same)
• In fact, javascript itself doesn't have a concept
  of input and output--that has to be provided by a
  container (eg. the browser)
• In our work we'll see how closely javascript
  intertwines with the document object model of the
  browser
• Javascript can't force itself on a browser, some
  users disable it (see alsohttps//addons.mozilla
  .org/en-US/seamonkey/addon/722

42
Javascript is Object Oriented

• Object are just entities
• Objects have properties
• Objects take methods (think of a method as a
  command applied to the object, but in the syntax
  methods are associated with the object)
• Strictly speaking, methods are a properties of an
  object that have a function value

43
For Example.

• document is an object (a data object)
• write() is a method that is taken by document
• document.write(x) sends a message to document,
  telling it to write x
• Strings and Numbers can also treated as objects
• Their value is one property, but they have others
• For example, "hello".length is 5

44
Javascript Comments

• !COMMENT YOUR CODE!
• Single line comments start with //// this is a
  comment
• Multiple line comments start with / and end with
  /
• /This is a multiple line comment so you can
  drone on and on and one as much as you care to/

45
Embedding Javascript

• Start withltscript languageJavascript
  type"text/javascript"gt
• End withlt/scriptgt
• In XHTML, you should also enclose the actual
  script in CDATA statementslt!CDATA//
  Javascript heregt
• This is one reason Ive gone back to HTML from
  XHTML

46
Example of Embedded Script

• Script bounded by SCRIPT tag
• Document is an object
• Write is a method (you can tell that by the
  parentheses)
• The string is a value passed to document via the
  write method

ltscript language"Javascript" type"text/javascrip
t"gt document.write("Hello world!ltbr
/gt") lt/scriptgt
47
A Simple Javascript

• Script should be in contiguous lines, ending with
  a semi-colon
• Individual commands on a single line can be
  separated with semi-colons
• Commands can span lines for readability
• Best practice is to use one command per line
  (unless the command is long), and end lines with
  semi-colon
• Digression What does Best Practice really mean?

48
External Scripts10external_script.html

• Javascripts need not be in the html page on which
  they will be displayed
• By convention, external scripts end in .js
• They contain no raw HTML (although you can used a
  document.write to pass HTML to the browser)
• Use a src statement to pull it into the html
  page ltscript languageJavascript
  type"text/javascript src"date_modified.js"gt
• Handy if you are using the same script in many
  pages
• Be aware of caching issues

49
Hiding Javascripts

• Some very old browsers dont understand
  Javascript, and display the code.
• You can use HTML comments to hide Javascripts,
  but these days you really dont need toltscript
  languageJavascriptgtlt!-- Hide your
  scriptScript script script//Stop hiding now
  --gtlt/scriptgt
• The noscript tag allows display for
  non-javascript aware browsers--you should use
  this since some folks turn off javascriptltnoscri
  ptgtYou need javascript to read this page
  lt/noscriptgt

50
Document Object Properties

• vlink colors--the color of visited links
• URL--the url of the document
• referrer--what url got us here
• title--you guessed it
• lastModified--the date/time stamp for the doc
• fgColor--the color attribute set in the body tag
• etc.
• See 02DocumentObjectProperties.html

51
Object Properties are Objects

• anchors--array of all anchors in a document
• images--array of the images
• image--one of the images, with it's own objects,
  eg. border, height, width name, src, lowsrc)
• links--array of all the links
• link--a link object, with it's own properties
• parentWindow--the parent window of the document

see 05document_object.html
52
Event Handlers

• Javascript events can be placed inside HTML Tags
• Note that although event handlers are javascript,
  they do not occur within script tags
• This is part of the real meat of javascript,
  since you can trigger browser side events
• See 13simple_events.html

53
Text Literals

• Just a string of characters
• Double and Single Quotes
• Escape Sequences begin with \
• \b is backspace, \n is newline, \r is CR
• \ is single quote (so you can use it in a string
  as a literal)
• \\ is backslash

54
Document Object Events

• onmouseup
• onkeyup
• onClick
• onMouseOver
• onMouseOut
• Onrowenter
• See 04menu_mouseover.html

55
String Methods

• About a dozen
• Don't confuse methods with properties
• subStr
• slice()
• search()
• replace()
• toLowerCase()
• 14events_and_strings.html

56
Please Note

• In these last examples, I'm pushing strings into
  boxes in a form with events, changing a value of
  a named object
• To alter text that has been rendered, eg. divs
  and ps, you have to manipulate them through the
  Document Object Model
• We'll go into this extensively later

57
Another Example 06last_modified.html

• Document has other properties and methods, for
  example, a lastModified stamp
• Such properties also take methods
• So these objects form a tree

var date_modified2 new Date(document.lastModifi
ed) document.write("This page last modified "
(date_modified2.getMonth()1) " "
date_modified2.getFullYear())
58
Javascript Variables

• Cannot begin with a number
• Cannot be a reserved word
• Can only contain letters, numbers or underscores
• Should be declared by var statement (you can get
  away without it, but its better to do it as a
  matter of habit)

59
Next Week

• That's all for tonight
• Next week, bring your laptops, Im going to get
  you all to do some coding during class