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

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

3.  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

4.  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

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

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

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

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

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

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

12. JavaScript 12 Literals  The typical bunch:  Numbers 17 123.45  Strings "Hello Mehmet"  Boolean: true false  Arrays: [1, "Hi Mehmet", 17.234] Arrays can hold anything!

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

14. 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)

15. 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()

16. 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();

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

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

19. 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!

20. 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);

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

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

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

24. 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';

25. 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!')“ >

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

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

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

29. 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!

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

32. Email Protocols 32 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

33. Email Protocols 33 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.

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

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

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

37. Email Protocols 37 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.

38. > 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: bill@microsoft.com 250 2.1.0 Ok RCPT TO: mgunes 250 2.1.5 Ok DATA 354 End data with. Hi Mehmet. 250 2.0.0 Ok: queued as C0D242F8D9 Email Protocols 38 Typical Exchange

39. Email 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... 250 2.0.0 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

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

41. Email Protocols 41 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.

42. Email Protocols 42 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

43. Email 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

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

45. Email 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

46. Email 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

47. Email 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!!!!

48. Email Protocols 48 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.

49. Email Protocols 49 Pop3 Example Continued retr 1 +OK 412 octets Return-Path: 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 Message-Id: To: joe@monte.cs.rpi.edu Status: O blah.