Advanced Web Development Course - JavaScript and .NET 2.0

1. IS 460 - Introduction • To the course • To the text and lab session running example • To .NET 2.0 and development tools • To the first lab IS 460 Introduction

2. Review of the syllabus and other materials • Syllabus – structure of the course • Course web site http://coba.unr.edu/faculty/kuechler • Project w/ exemplar • Project grading sheet • Lab writeup exemplars • The architecture of the web IS 460 Introduction

3. IS 460 Introduction

4. Course structure • System development is learned by reading and then by DOING • The course follows the textbook and its examples very closely • An engineering approach – a lecture followed by a lab session which uses the lecture concepts • Each lab is the application of the concepts in one (or part of a) chapter to YOUR project IS 460 Introduction

5. Labs • Each lab will require a full write-up and submission of the completed lab on a USB drive or CD ROM (USB drive is preferable) • Lab sessions will frequently begin with an explanation of the lab in the normal classroom, followed by the lab session itself in AB 301C. • Mike McMahon, a CS masters student with considerable .NET experience will be the lab instructor. (I will also be available most lab days). IS 460 Introduction

6. Course progression • The class begins with 3 weeks of advanced JavaScript – see syllabus • .NET heavily uses JavaScript – can be considered an HTML/JavaScript code generator • For validating forms • For maintaining state information • For any custom client side behavior • Discuss rendering IS 460 Introduction

7. Immediate use of VWD/IDE • We will begin using the development tools immediately even though we will not use server-side .NET till week 4 • Both VWD and the .NET IDE have full drag and drop HTML development capabilities and intelligent editors and debuggers for JavaScript IS 460 Introduction

8. Textbook and running example • Beginning ASP.NET 2.0 by Hart, Kauffman, Sussman and Ullman – available everywhere • Illustrates all concepts with a running example: http://www.wroxunited.net • For labs and projects we will be using this project as a template to be adapted to our purposes – common practice in industry IS 460 Introduction

9. Textbook project files • The full code for the textbook example AND for each of the textbook chapters individually is downloadable from the book web site: http://www.wrox.com/WileyCDA/WroxTitle/productCd-0764588508,descCd-download_code.html IS 460 Introduction

10. Setting up files for the course • The downloaded zip file will unpack the code into 3 main directories • Begin – the starting code for each chapter • End – the finished code for each chapter • Project – the entire wroxunited site • I STRONGLY recommend downloading all code (150M) to a USB device which you will use for labs and your project. • You will also need 2 smaller USB devices for submitting lab writeups IS 460 Introduction

11. Development tools • Microsoft’s .NET 2.0 development system (IDE) – available to IS majors at minimum cost • OR Microsoft’s Visual Web Developer (VWD - free) http://msdn.microsoft.com/vstudio/express/vwd/ • IIS or Cassini (a micro IIS that comes with VWD) • If you use the full IDE you must be running XP Pro to get the limited edition of IIS • SQL Server 2005 Express Edition – included with IDE or VWD IS 460 Introduction

12. Development tools demo • The textbook uses VWD throughout • Both IDE and VWD have very similar interfaces • IDE demo • VWD demo IS 460 Introduction

13. JavaScript Forms Handling Review • Text fields and textboxes • How to get and set values • Check boxes • How to determine if checked and check/uncheck under program control • Radio button groups • How to determine if checked and check/uncheck under program control IS 460 Introduction

14. Forms Review Continued • Dropdown lists • Determine selected item when multiple attribute is used in select tab Buttons • Submit • Clear IS 460 Introduction

15. Lab 1 • Using either VWD or the .NET IDE design a web form appropriate for your project that includes: • Text fields, check boxes, radio buttons, drop down lists with multiple selections enabled and submit and clear buttons. • At least one text field should be logically numeric • All controls should have value attributes IS 460 Introduction

16. When the submit button is clicked a JavaScript validation function should be called which: • Checks to see that the numeric field is numeric • That no text fields are blank • Give and error message and return to the screen if there are validation errors • If no errors, display an alert that lists the values of each selected element and then completes the submission of the form IS 460 Introduction

17. IDE Demo of HTML palate and positioning options • Using Chapter2/default.aspx as an example • In design mode choose • Layout • Position • Select absolute positioning or relative (standard HTML flow positioning) IS 460 Introduction

18. Examples – on the course website • ch6_examp6shoVal.html – use of form element array and accumulation of values for display • script08multiple.html – use of multiple in select control • dateValidation.html – full date validation routine – missing from JavaScript!!! • login_VALIDATE.html – use of isNAN() IS 460 Introduction