1. Applied Software for Internet Engineers by Dr Zhanfang ZHAO Room: T409 Tel: 020 7815 6340 Email: zhanfang.ZHAO@lsbu.ac.uk Study hours: 150hrs, 24 hrs lecture/Tutorials, 24hrs Workshop, 102 hrs Student managed Unit Structure: 1. Client Side Programming (1): Javascript, DOM and XMLHttpRequest Object 2. Server side CGI programming (1) with Perl 3. Server Side Programming with PHP and MySQL 4. Client Side Programming (2): Java Applet

2. Unit Calendar Study Area Week No Client side programming (1) 1-3 Server side CGI programming with Perl 4-6 Server side Programming with PHP and Mysql 7-9 Design and use of Java Applet 10-12 Revision 13 Examination 14-15 Assessment There will be one 2-hour open text book written examination (50%), and 2 assignments (50%). Each student is expected to maintain a log book on all the lab works. The log books will be examined periodically during the lab sessions. And it contributes 10% to your final mark (included in the assignments part). In addition to the log book, you will be required to do 2 pieces of assignment. You will be required to submit the required assignments (will be specified in the early part of the semester) by the final submission date, which will be notified during the semester allowing you sufficient time to complete your work. You MUST submit your assignments, following the standard school procedure, to J200 between 10:00 and 16:00. Late submission will be penalized in accordance with the University regulation. http://ecce3.lsbu.ac.uk/staff/zhaoza/ASIE/

3. Prerequisites PWSE HTML CSS Fundamental of Internet XML

4. Client Side Programming I JavaScript DOM XHR and CSS

5. Client Side Programming with JavaScript Why use client side programming? Web sides built on CGI programs can rapidly become overly complicated to maintain, and there is also the problem of response time. One example is the dynamic graphing. It is nearly impossible to perform with consistency because a GIF file must be created and move from the server to client for each version of the graph. Why JavaScript is introduced? JavaScript, just as other script language such as Tcl/Tk, used inside Web Browser is really intended to solve specific types of problem, primarily the creation of richer and more interactive graphical user interfaces (GUIs).

6. What is JavaScript? JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language (a scripting language is a lightweight programming language) A JavaScript consists of lines of executable computer code A JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license

7. What can a JavaScript Do? JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write(" " + name + " ") can write a variable text into an HTML page JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer

8. Outcomes: How to integrate the JavaScript code into your HTML document. Basic Syntax: Variables, if-then branching How to make your Web pages react to users' actions using link events to do a basic image swap.

9. First Example (js1.html) JavaScript Example // put up an alert box, to show how they work alert("Soon, I will rebuild my browser!");

10. Key things to notice to this example JavaScript usually goes between the tag and the tag. Like HTML, JavaScript is just text that can be typed into a word processor. The beginning of a bit of JavaScript begins with Right now, you don't really have to put the language="JavaScript" element in there because JavaScript is the default script language for all browsers. However, this could change, so it's a good idea to include the language element. Everything between // and the end of a line is a comment and will be ignored. alert("Soon, I will rebuild my browser!"); calls up a simple dialog box with the words JavaScripts end with the tag.

12. Hiding JavaScript blah blah blah <!-- hide this stuff from other browsers YOUR SCRIPT HERE // end the hiding comment --> etc., etc., etc.

13. Example using variables (js2.html) JavaScript Variable Example <!-- hide me // load up some variables var secs_per_min = 60; var mins_per_hour = 60; var hours_per_day = 24; var days_per_year = 365; // do some calculations var secs_per_day = secs_per_min * mins_per_hour * hours_per_day; var secs_per_year = secs_per_day * days_per_year; // end hiding -->

14. Things should notice in header part The first time you use a variable, you should declare it with the word “var”. Variable names are case-sensitive. You can give a variable a value when you declare it, or you can wait until later Statements end with a semicolon.

15. Example using variables (js2.html)(Continued) How does the monkey stay so fit? <!-- hide me // here's how to use JavaScript to write out HTML document.writeln(" The monkey dances "); document.writeln(secs_per_year); document.writeln(" seconds per year. "); // end hiding -->

16. Things about the body part of this example document.writeln() (as in "write line") Writes whatever's between the parentheses to a Web page. Characters inside quotes are printed; characters not inside quotes are considered variables. What JavaScript goes in the head of a page and what goes in the body? Usually it doesn't matter, but it's a good idea to put most of your JavaScript in the head of a page. This is because the head gets read before the body, so any variables that appear in the body (like secs_per_min) will already have been declared in the head by the time they're needed. If for some reason secs_per_min were defined after JavaScript tried to do the document.writeln(secs_per_min) command, you'd get a JavaScript error.

17. If-then Branching What "if-then" statements do is allow your program to behave very differently depending on what a user inputs. Here's the basic form of an if-then statement: if (some condition is true) { do something; do something; do something; } The important part of this structure are: –It starts with the word "if" (if must be lowercase). –There is a condition in parentheses that is either true or false. –There is a set of statements that should be executed if the condition is true. These statements go between curly brackets.

18. Example for if – then Branching var monkey_love = prompt("Do you love the monkey?","Type yes or no"); if (monkey_love == "yes") { alert("Welcome! I'm so glad you came! Please, read on!"); }

19. Link Events Whenever a user clicks on a link, or moves her cursor over one, JavaScript is sent a link event. One link event is called onClick, and it gets sent whenever someone clicks on a link. Another link event is called onMouseOver. This one gets sent when someone moves the cursor over the link. Please notice, there are no tags. That's because anything that appears in the quotes of an onClick or an onMouseOver is automatically interpreted as JavaScript. note that there's a # sign between the quotes in the href="#". This makes it so the browser doesn't try to load another Web page when you click on the link. If you put http://www.sbu.ac.uk in the href instead of the #, the browser would run the JavaScript in the onClick and the load up this here SBU site.

20. Example for link events Link Event Example Link Events Click on me! Mouse over me!

21. Image Swapping Image Swapping Example Image Swapping #This is just like a standard tag except this one has been given a # name: the_image. #This is where the image swap happens change http://www.sbu.ac.uk/ change http://www.sbu.ac.uk/

22. Window Manipulation in JavaScript Open a window using HTML: – Open new window Open a widow using JavaScript Window.open(“URL”,”name”,”feature”) –This statement opens a window with the URL that you list as the first parameter in the method call. Above it's called "URL," but in an actual call you'd write "http://www.sbu.ac.uk" or something similar. –The second parameter of the method call is the window's name. This is just like the name we saw above. If you open a window and there's already a window open with the same name, the URL in your open statement will be sent to that open window. –The third parameter, features, is a list of the different components a window can have. It's an optional parameter

23. examples of using JavaScript to open windows Here's a window named javascript_1 Here's a window named javascript_2 Here's another HTML page going into javascript_1

24. Windows Features menubar This is the row of functions that appears on most software applications. Normally it includes File, Edit, and a few other items. status This is the message bar at the bottom of your window. When you move your mouse over an HTML link, the URL appears in the status bar. You may have seen pages that use scrollbars This allows scrollbars to appear when necessary. resizable If resizable is listed, the window can be resized. width The width of the window in pixels. height The height of the window in pixels. toolbar The browser toolbar, which contains the Back and Forward buttons, the Stop button, and the Home button, among others. location The text area of a browser into which you can type URLs. directories The directories that Netscape browsers have called "What's new," "What's cool," and so on.

25. Some examples for windows features window.open ("some_url", "window_name", "location,menubar"); Above statement will get a window with just the location box (the place in your browser where you type in a URL) and a menu bar (File, Edit, etc.) window.open("some_url","window_name", "location,height=100,width=100"); This will open a window that is 100 pixels high and 100 pixels wide and has no features other than a location field. Notice again that there are no spaces in the string If you'd like to open a window that has almost all the features, you can specify which features you don't want by setting those features equal to no. For example: window.open("some_url", "window_name", "location=no,status=no"); This will open a window that has all the features except the location field and the status bar.

26. Some other JavaScript Syntax Loops –While loops: while (some test is true) { do the stuff inside the curly braces } –For loops: for (initial value; test; increment) { do this stuff; } Arrays- Arrays are lists. –An example to create an array of colors: var colors = new Array("red","blue","green"); good thing about arrays is that elements of an array can be accessed by number. The first element is number 0 and can be accessed like this: var the_element = colors[0]; After you execute this line of JavaScript, the variable the_element will hold the string "red."

27. An example for Loops and Arrays(slide show) URL Slideshow <!-- hide me var url_names = new Array("hits.org","awaken.org","bianca.com"); var a_url; for (loop = 0; loop < url_names.length; loop++) { // make the name of a url, for example http://www.hits.org a_url = "http://www." + url_names[loop]; // open a window var new_window=open(a_url,"new_window","width=300,height=300"); // wait for the click alert("Hit OK for the next site"); } // show me -->

28. Functions(Timer.html) Function with No Parameters <!-- hide me function announceTime() { //get the date, the hour, minutes, and seconds var the_date = new Date(); var the_hour = the_date.getHours(); var the_minute = the_date.getMinutes(); var the_second = the_date.getSeconds(); //put together the string and alert with it var the_time = the_hour + ":" + the_minute + ":" + the_second; alert("The time is now: " + the_time); } // show me --> time!