Lecture 16 JavaScript (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., …  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 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 vs. Java JavaScript 3

 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 vs. Java (cont) 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

9 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 10 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 11 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 12 Literals  The typical bunch:  Numbers  Strings "Hello Mehmet"  Boolean: true false  Arrays: [1, "Hi Mehmet", ] Arrays can hold anything!

JavaScript 13 Operators  Arithmetic, comparison, assignment, bitwise, boolean  pretty much just like C + - * / % == != > < && || ! & | >

JavaScript 14 Control Structures  Again – pretty much just like C: if if-else ?: switch for while do-while  And a few not in C for (var in object) with (object)

JavaScript 15 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 16 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 17 Pre-defined object types  String : manipulation methods  Math : trig, log, random numbers  Date : date conversions  RegExp : regular expressions  Number : limits, conversion to string

JavaScript 18 Predefined Objects  JavaScript also includes some objects that are automatically created  always available  navigator  screen  window  document  available attributes of current document are Title Referrer URL Images Forms Links Colors

JavaScript 19 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 20 JavaScript Example JavaScript is Javalicious I am a web page and here is my name: document.write(document.title); JavaScript is Javalicious I am a web page and here is my name: document.write(document.title);

JavaScript 21 JavaScript and HTML Comments <!-- document.write("Hi Mehmet"); document.bgColor="BLUE"; --> HTML comment

JavaScript 22 JavaScript Functions  The keyword function used to define a function (subroutine): function add(x,y) { return(x+y); }

JavaScript 23 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 24 Simple Event Example Hello - I am a very small page! 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'; Hello - I am a very small page! 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';

JavaScript 25 Buttons  You can associate buttons with JavaScript events  buttons in HTML forms <INPUT TYPE=BUTTON VALUE="Don't Press Me" onClick="alert('now you are in trouble!')“ > <INPUT TYPE=BUTTON VALUE="Don't Press Me" onClick="alert('now you are in trouble!')“ >

JavaScript 26 Some Events (a small sample) onUnLoad onLoad onClick onMouseUp onMouseDown onDblClick onMouseOver Window events Button events Link events

JavaScript 27 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. Please Enter Your Age: And your weight: Please Enter Your Age: And your weight: From javascript you can get at the age input field as: document.myform.age.value

JavaScript 28 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 29 The Form function checkform() { if (document.myform.age.value == "") { alert("You need to specify an age"); return(false); } else return(true); } … <FORM METHOD=GET ACTION=foo.cgi NAME=myform onSubmit="return(checkform())"> AGE: function checkform() { if (document.myform.age.value == "") { alert("You need to specify an age"); return(false); } else return(true); } … <FORM METHOD=GET ACTION=foo.cgi NAME=myform onSubmit="return(checkform())"> AGE: Needed to prevent the browser from submitting!

JavaScript 30 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!

Protocols 32  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

Protocols 33 Terminology  User Agent:  end-user mail program  Message Transfer Agent:  responsible for communicating with remote hosts and transmitting/receiving both a client and server  Mail Exchanger:  host that takes care of for a domain.

Protocols 34 SMTP Used to exchange mail messages between mail servers (Message Transfer Agents) MTA UA SMTP File System File System MTA SMTP UA

Protocols 35 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.

Protocols 36 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.

Protocols 37 Data Format  ASCII only  must convert binary to an ASCII representation to send via .  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.

> telnet mail.cse.unr.edu 25 Trying 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: Ok RCPT TO: mgunes Ok DATA 354 End data with. Hi Mehmet Ok: queued as C0D242F8D9 Protocols 38 Typical Exchange

Protocols 39 Leading Period DATA 354 Enter mail, end with "." on a line by itself Hi Mehmet - this message is a test of SMTP....foo Ok: queued as VAA0771 Resulting Message: Hi Mehmet - this message is a test of SMTP..foo Hi Mehmet - this message is a test of SMTP..foo

Protocols 40 Other SMTP Commands  VRFY  confirm that a name is a valid recipient.  EXPN  expand an alias (group address).  TURN  switch roles (sender receiver).

Protocols 41 Other SMTP Commands (more)  SOML  Send Or Mail if recipient is logged in, display message on terminal, otherwise .  SAML  Send and Mail  NOOP  send back a positive reply code.  RSET  abort current transaction.

Protocols 42 Mail Headers  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

Protocols 43 POP – Post Office Protocol Used to transfer mail from a mail server to a UA Mail Server Mail Server UA File System File System POP

Protocols 44 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.

Protocols 45 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

Protocols 46 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

Protocols 47 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!!!!

Protocols 48 A Pop3 Exchange > telnet monte pop3 Trying Connected to monte.cs.rpi.edu ( ). 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 list +OK Mailbox scan listing follows

Protocols 49 Pop3 Example Continued retr 1 +OK 412 octets Return-Path: Received: (from by monte.cs.rpi.edu (8.9.3/8.9.3) id NAA06943 for joe; Mon, 20 Mar :49: Date: Mon, 20 Mar :49: From: Dave Hollinger Message-Id: To: Status: O blah.