Transcript Lecture 16 JavaScript E-mail (SMTP, POP) CPE 401 / 601 Computer Network Systems slides are modified from Dave Hollinger.

Lecture 16
JavaScript
E-mail (SMTP, POP)
CPE 401 / 601
Computer Network Systems
slides are modified from Dave Hollinger
Client-side programming
 HTML is good for developing static pages

in order to develop interactive/reactive pages,
must integrate programming
 Client-side programming



programs are written in a separate programming
language
programs are embedded in the HTML of a Web
page, with tags to identify the program component
• e.g., <script type="text/javascript"> … </script>
the browser executes the program as it loads the
page, integrating the dynamic output of the
program with the static content of HTML
JavaScript
2
JavaScript vs. Java
 JavaScript is very good for simple tasks, GUI
layout



flexible data typing, primitive object types fine for
quick development
integration with HTML makes layout & control of
GUI elements easy
not much library support,
• only primitive data structuring capabilities

not well-suited to multi-file projects, OO approach
JavaScript
3
JavaScript vs. Java (cont)
 Java is better at complex tasks, especially
graphics



full-featured, more robust, extensive libraries of
classes/routines
can support large projects, interacting objects
GUI layout is difficult, integration with HTML not
obvious
 make use of the the strengths of each language


include applets in a page when needed (e.g., graphics)
allow communication between applet & JavaScript
JavaScript
4
Scripts vs. programs
 Scripting language is a simple, interpreted
programming language





scripts are embedded as plain text, interpreted
by application
simpler execution model: don't need compiler or
development environment
saves bandwidth: source code is downloaded,
not compiled executable
platform-independence: code interpreted by any
script-enabled browser
but: slower than compiled code, not as powerful/
full-featured
JavaScript
5
Scripting Languages
 JavaScript: first Web scripting language, developed
by Netscape in 1995
 syntactic similarities to Java/C++, but simpler &
more flexible
• (loose typing, dynamic variables, simple objects)
 JScript: Microsoft version of JavaScript, in 1996



same core language, but some browser-specific
differences
IE & Netscape can (mostly) handle both
JavaScript 1.5 & JScript 5.0 cores conform to
ECMAScript standard
 VBScript: client-side scripting version of Microsoft
Visual Basic
JavaScript
6
Common scripting tasks
 adding dynamic features to Web pages




validation of form data
image rollovers
time-sensitive or random page elements
handling cookies
 defining programs with Web interfaces

utilize buttons, text boxes, clickable images,
prompts, frames
JavaScript
7
Limitations of client-side scripting
 script code is embedded in the page

viewable to the world
 for security reasons, scripts are limited in
what they can do

e.g., can't access the client's hard drive
 designed to run on any machine platform,

scripts do not contain platform specific commands
 script languages are not full-featured

e.g., JavaScript objects are crude, not good for
large project development
JavaScript
8
JavaScript Capabilities
 Add content to a web page dynamically.
 Alter a web page in response to user actions.
 React to user events.
 Interact with frames.
 Manipulate HTTP cookies
JavaScript
9
JavaScript is not Java
 JavaScript is a very simple scripting language.
 Syntax is similar to a subset of Java.
 Interpreted language.
 Uses objects,

but doesn't really support the creation of new
object types
• It almost does, but it's cumbersome.
JavaScript
10
JavaScript Variables
 Untyped!
 Can be declared with var keyword:
var foo;

a local variable inside a function
 Can be created automatically by assigning a
value:
foo=1;
blah="Hi Mehmet";
 variable is a global variable.
JavaScript
11
Literals
 The typical bunch:

Numbers
17

Strings
"Hello Mehmet"

Boolean:
true

Arrays:
[1, "Hi Mehmet", 17.234]
123.45
false
Arrays can hold anything!
JavaScript
12
Operators
 Arithmetic, comparison, assignment, bitwise,
boolean

pretty much just like C
+ - * / % ++ -- == != > <
&& || ! & | << >>
JavaScript
13
Control Structures
 Again – pretty much just like C:
if
for
if-else
?: switch
while
do-while
 And a few not in C
for (var in object)
with (object)
JavaScript
14
Objects
 Objects have attributes and methods.
 Many pre-defined objects and object types.
 Using objects follows the syntax of C++/Java:
objectname.attributename
objectname.methodname()
JavaScript
15
Array Objects
 Arrays are supported as objects.
 Attribute length
 Methods include:
concat join pop push reverse sort
var a = [8,7,6,5];
for (i=0;i<a.length;i++)
a[i] += 2;
b = a.reverse();
JavaScript
16
Pre-defined object types
 String : manipulation methods
 Math
: trig, log, random numbers
 Date
: date conversions
 RegExp : regular expressions
 Number : limits, conversion to string
JavaScript
17
Predefined Objects
 JavaScript also includes some objects that
are automatically created

always available
 navigator
 screen
 window
 document

available attributes of current document are
•Title
• Forms
• Referrer
• Links
• URL
• Colors
• Images
JavaScript
18
document methods
document.write()
 like a print statement
 the output goes into the HTML document.
document.write("My title is" +
document.title);
string concatenation!
JavaScript
19
JavaScript Example
<HEAD>
<TITLE>JavaScript is Javalicious</TITLE>
</HEAD>
<BODY>
<H3>I am a web page and here is my
name:</H3>
<SCRIPT>
document.write(document.title);
</SCRIPT>
<HR>
JavaScript
20
JavaScript and HTML Comments
<SCRIPT>
<!-document.write("Hi Mehmet");
document.bgColor="BLUE";
-->
</SCRIPT>
JavaScript
21
JavaScript Functions
 The keyword function used to define a
function (subroutine):
function add(x,y) {
return(x+y);
}
JavaScript
22
JavaScript Events
 JavaScript supports an event handling
system.


You can tell the browser to execute javascript
commands when some event occurs.
Sometimes the resulting value of the command
determines the browser action.
JavaScript
23
Simple Event Example
<BODY BGCOLOR=WHITE onUnload="restore()">
<H5>Hello - I am a very small page!</H5>
<SCRIPT>
savewidth = window.innerWidth;
saveheight = window.innerHeight;
function restore() {
window.innerWidth = savewidth;
window.innerHeight = saveheight;
}
// Change the window size to be small
window.innerWidth = 300;
window.innerHeight = 50;
document.bgColor
= 'cyan';
</SCRIPT>
JavaScript
24
Buttons
 You can associate buttons with JavaScript
events

buttons in HTML forms
<FORM>
<INPUT TYPE=BUTTON
VALUE="Don't Press Me"
onClick="alert('now you are in trouble!')“ >
</FORM>
JavaScript
25
Some Events (a small sample)
onUnLoad
onLoad
Window events
onClick
onMouseUp
Button events
onMouseDown
onDblClick
onMouseOver
Link events
JavaScript
26
Document Object Model
 Naming hierarchy used to access individual
elements of a HTML document.
 Easy to use if you name all entities:

Forms, fields, images, etc.
<FORM ID=myform ACTION=… >
Please Enter Your Age:
<INPUT TYPE=TEXT ID=age NAME=age><BR>
And your weight:
<INPUT TYPE=TEXT ID=weight NAME=weight><BR>
</FORM>
From javascript you can get at the age input field as:
JavaScript
document.myform.age.value
27
Form Field Validation
 You can have JavaScript code that makes
sure the user enters valid information.
 When the submit button is pressed the script
checks the values of all necessary fields:

You can prevent the request from happening.
JavaScript
28
The Form
function checkform() {
if (document.myform.age.value == "") {
alert("You need to specify an age");
return(false);
} else
Needed to prevent the
return(true);
browser from submitting!
}
…
<FORM METHOD=GET ACTION=foo.cgi NAME=myform
onSubmit="return(checkform())">
AGE: <INPUT TYPE=TEXT NAME=Age>
<INPUT TYPE=SUBMIT>
</FORM>
JavaScript
29
Important: Form Validation!!!
 It's a good idea to make sure the user fills
out the form before submitting.
 Users can bypass your form
they can create requests manually
 or their own forms

 Your CGI programs cannot rely (soley) on
Client-Side JavaScript to validate form fields!
JavaScript
30
Email
 SMTP - Simple Mail Transfer Protocol
 RFC 821
 POP - Post Office Protocol
 RFC 1939
 Also:

RFC 822 Standard for the Format of ARPA
Internet Text Messages
 RFCs 1521, 1522 Mime
Email Protocols
32
Terminology
 User Agent:

end-user mail program
 Message Transfer Agent:

responsible for communicating with remote
hosts and transmitting/receiving email
• both a client and server
 Mail Exchanger:

host that takes care of email for a domain.
Email Protocols
33
SMTP
Used to exchange mail messages between
mail servers (Message Transfer Agents)
MTA
SMTP
MTA
SMTP
MTA
File
System
UA
UA
Email Protocols
34
SMTP Protocol
 SMTP sender is the client
 SMTP receiver is the server.
 Alternating dialogue:

client sends command and server responds with
command status message.

Order of the commands is important!

Status messages include
• ascii encoded numeric status code (like HTTP,FTP) and
• text string.
Email Protocols
35
SMTP Commands
 HELO

identifies sender
 MAIL FROM:

starts mail transaction and identifies mail originator
 RCPT TO:
identifies individual recipient.
 there may be multiple RCPT TO: commands.

 DATA
sender ready to transmit a series of lines of text,
each ends with ‘\r\n’.
 A line containing only a period ‘.’ indicates the end of
the data.
Email Protocols
36

Data Format
 ASCII only

must convert binary to an ASCII representation
to send via email.
 What if we want to send a line containing
only a period?


Sender prepends a period to any line staring with
a period (in the message).
Receiver strips the leading period in any line that
starts with a period and has more stuff.
Email Protocols
37
Typical Exchange
> telnet mail.cse.unr.edu 25
Trying 134.197.40.1...
Connected to mail.cse.unr.edu.
Escape character is '^]'.
220 ponderosa.cse.unr.edu ESMTP Postfix
HELO cse.unr.edu
250 ponderosa.cse.unr.edu
MAIL FROM: [email protected]
250 2.1.0 Ok
RCPT TO: mgunes
250 2.1.5 Ok
DATA
354 End data with <CR><LF>.<CR><LF>
Hi Mehmet
.
250 2.0.0 Ok: queued as C0D242F8D9
Email Protocols
38
Leading Period
DATA
354 Enter mail, end with "." on a line by itself
Hi Mehmet - this message is a test of SMTP
..
..foo
..
.
250 2.0.0 Ok: queued as VAA0771
Resulting Message:
Hi Mehmet - this message is a test of SMTP
.
.foo
Email Protocols
39
Other SMTP Commands
 VRFY

confirm that a name is a valid recipient.
 EXPN

expand an alias (group email address).
 TURN

switch roles (sender <=> receiver).
Email Protocols
40
Other SMTP Commands (more)
 SOML
 Send Or Mail
• if recipient is logged in, display message on terminal,
otherwise email.
 SAML
 Send and Mail
 NOOP
 send back a positive reply code.
 RSET
 abort current transaction.
Email Protocols
41
Mail Headers
 Email messages contain many headers
some headers are created by the UA
 some are automatically added by the MTA

 Every MTA adds (at least) a “Received:”
header.
 Some of the headers are parsed by
intermediate MTAs

but the content is ignored and passed on
transparently
Email Protocols
42
POP – Post Office Protocol
Used to transfer mail from a mail server to a UA
Mail
Server
POP
UA
File
System
Email Protocols
43
POP (version 3)
 Similar to SMTP command/reply lockstep
protocol
 Used to retrieve mail for a single user

requires authentication
 Commands and replies are ASCII lines.

Replies start with “+OK” or “-ERR”.

Replies may contain multiple lines.
Email Protocols
44
POP-3 Commands
 USER
 specify username
 PASS
 specify password
 STAT
 get mailbox status
• number of messages in the mailbox.
 LIST
 get a list of messages and sizes
• One per line, termination line contains ‘.’ only.
 RETR

retrieve a message
Email Protocols
45
More POP-3 Commands
 DELE

mark a message for deletion from the mailbox
 NOOP

send back positive reply
 RSET

reset
• All deletion marks are unmarked.
 QUIT

remove marked messages and close connection
Email Protocols
46
Optional Commands
 TOP

send header lines from messages.
 APOP

alternative authentication
• message digest based on opening greeting sent from
POP server
• Requires shared secret!
• No cleartext password on the network.
• Does not authenticate the server!!!!
Email Protocols
47
A Pop3 Exchange
> telnet monte pop3
Trying 128.213.8.110...
Connected to monte.cs.rpi.edu (128.213.8.110).
Escape character is '^]'.
+OK POP3 monte.cs.rpi.edu v7.59 server ready
user joe
+OK User name accepted, password please
pass joepw
+OK Mailbox open, 1 messages
stat
+OK 1 412
list
+OK Mailbox scan listing follows
1 412
.
Email Protocols
48
Pop3 Example Continued
retr 1
+OK 412 octets
Return-Path: <hollingd>
Received: (from hollingd@localhost)
by monte.cs.rpi.edu (8.9.3/8.9.3) id NAA06943
for joe; Mon, 20 Mar 2000 13:49:54 -0500
Date: Mon, 20 Mar 2000 13:49:54 -0500
From: Dave Hollinger <[email protected]>
Message-Id: <[email protected]>
To: [email protected]
Status: O
blah
.
Email Protocols
49