inls 672 web applications ii. tonight’s agenda who we are tools and platforms programming...

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 ([email protected])– 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

http://simon.incutio.com/slides/2006/etech/javascript/js-reintroduction-notes.html



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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">"http://www.w3.org/TR/html4/strict.dtd"><HTML><HTML> <HEAD><HEAD> <TITLE>My first HTML document</TITLE><TITLE>My first HTML document</TITLE> </HEAD></HEAD> <BODY><BODY> <P>Hello world!<P>Hello world! </BODY></BODY></HTML></HTML>

From:http://www.w3.org/TR/REC-html40/struct/global.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…

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

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

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

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

Document Object Events

onmouseup onkeyup onClick onMouseOver onMouseOut Onrowenter See 04menu_mouseover.html

String Methods

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

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

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.lastModified);var date_modified2 = new Date(document.lastModified);document.write("This page last modified " document.write("This page last modified " + (date_modified2.getMonth()+1) + " "+ (date_modified2.getMonth()+1) + " " + date_modified2.getFullYear());+ date_modified2.getFullYear());

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 it’s better to do it as a matter of habit)

Next Week

That's all for tonight Next week, bring your laptops, I’m going to get

you all to do some coding during class

inls 672 web applications ii. tonight’s agenda who we are tools and platforms programming...

Documents

php slide

syllabus slide

email slide

bash slide

half of class

class tonight

class password

class im happy