INLS 672

INLS 672 Web Applications II

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

Who am I? • bil hays (bil_hays@unc.edu) • Network Manager in Computer Science • MS degree in Comp Lit from UNC • BS degree in Biology from W&M • 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

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

Who are you? Your name, what experience you have with programming, and your favorite food and movie….

What we're going to look at • Browser side programming: Javascript • Server side programming: PHP, Ruby on Rails • Maybe, server side control: bash

Why are we here? • This is a project course, so if you’re 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 site…http://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?

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

The Syllabus

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

Tools you might use, things you'll need, and some general considerations….

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

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

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

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!)

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 you’re 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

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

WYSIWYG Editors • Mozilla’s (and Netscape’s) 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

A Rose with any Other Tags Why the choice of editor is important

Simple Hello World • From:http://www.w3.org/TR/REC-html40/struct/global.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>My first HTML document</TITLE> </HEAD> <BODY> <P>Hello world! </BODY> </HTML>

HomePage’s Hello World <HTML>  <HEAD> <META NAME=GENERATOR CONTENT="Claris Home Page 3.0"> <X-CLARIS-WINDOW TOP=68 BOTTOM=768 LEFT=8 RIGHT=538> <X-CLARIS-TAGVIEW MODE=minimal> </HEAD> <BODY BGCOLOR="#FFFFFF"> <P>Hello world!</P> </BODY> </HTML>

Word 2001’s Hello World <html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40"> <head> <meta name=Title content="hello world"> <meta name=Keywords content=""> <meta http-equiv=Content-Type content="text/html; charset=macintosh"> <meta name=ProgId content=Word.Document> <meta name=Generator content="Microsoft Word 9"> <meta name=Originator content="Microsoft Word 9"> <link rel=File-List href="hello_world_word_files/filelist.xml"> <title>hello world</title> <!--[if gte mso 9]><xml> <w:WordDocument> <w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery> <w:DisplayVerticalDrawingGridEvery>0</w:DisplayVerticalDrawingGridEvery> <w:UseMarginsForDrawingGridOrigin/> <w:Compatibility> <w:SpaceForUL/> <w:BalanceSingleByteDoubleByteWidth/> <w:DoNotLeaveBackslashAlone/> <w:ULTrailSpace/> <w:DoNotExpandShiftReturn/> Etc etc etc…

Word 2004 (osx) <html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40"> <head> <meta name=Title content="Hello world"> <meta name=Keywords content=""> <meta http-equiv=Content-Type content="text/html; charset=macintosh"> <meta name=ProgId content=Word.Document> <meta name=Generator content="Microsoft Word 10"> <meta name=Originator content="Microsoft Word 10"> <link rel=File-List href="hello_world_word2004_files/filelist.xml"> <title>Hello world</title>  <style>  </style> </head> <body bgcolor=white lang=EN-US style='tab-interval:.5in'> <div class=Section1> <p class=MsoNormal>Hello world!</p> </div> </body> </html>

Cleaning Things Up • HTML Tidy:http://www.w3.org/People/Raggett/tidy/ • “Smart” Browsers and Editors • Validation Services:http://validator.w3.org/

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

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….

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

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…..

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…)

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

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

Control-C

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

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

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?

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

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.org/wiki/ECMAScript

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_JavaScript

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

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

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 also:https://addons.mozilla.org/en-US/seamonkey/addon/722

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

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

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*/

Embedding Javascript • Start with:<script language=“Javascript” type="text/javascript"> • End with:</script> • In XHTML, you should also enclose the actual script in CDATA statements<![CDATA[// Javascript here]]> • This is one reason I’ve gone back to HTML from XHTML…

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 <script language="Javascript" type="text/javascript"> document.write("Hello world!<br />"); </script>

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?

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:<script language=“Javascript” type="text/javascript src="date_modified.js"> • Handy if you are using the same script in many pages • Be aware of caching issues…

Hiding Javascripts • Some very old browsers don’t understand Javascript, and display the code. • You can use HTML comments to hide Javascripts, but these days you really don’t need to:<script language=“Javascript”></script> • The noscript tag allows display for non-javascript aware browsers--you should use this since some folks turn off javascript:<noscript>You need javascript to read this page </noscript>

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

INLS 672

INLS 672

Presentation Transcript

INLS 227 Spring 2005

INLS 210-96

INLS 200

INLS 101 Report

INLS 520

INLS 50

INLS 461 Introduction

INLS 520

INLS 520

INLS 520

INLS 520

INLS 520

INLS 520

CS 672 Paper Presentation

INLS 151

INLS 200

INLS 200

INLS 151

INLS 151

CS 672 Paper Presentation

INLS 151

INLS 200