CS101 Introduction to Computing Lecture 15 More on Interactive Forms (Web Development Lecture 5)

1CS1113 Web ProgrammingLecture 11 Client Side Scripting (JavaScript - I)2In Todays Lecture We will get our first taste of JavaScript the object-based language.

Today we will write (simple) client-side scripts in JavaScript.

We will become able to appreciate the concept of objects in JavaScript.

We will learn about the properties & methods of those objects, and how to read & modify them.

3HTMLCSSJavaScriptmarkup languagecontentstyle sheet languagepresentationprogramming languagebehaviorHTML: is a language for content and structure of the page. How many divisions in your page, how many paragraphs, what will be the content of those paragraphs.

CSS: style sheet language for presentation, what fonts does the headings have, what will the background color of the page, whats the width of div.

JavaScript: the programming language, for behavior and interactivity, what happens when you mouse over a menu, what happens when you typed the wrong value in a form field. How long does the photo slide show takes to move from one image to the next.

45

Now lets take a look at a form that we constructed, and see how we can make it better6

7Lets now review what happens when I enter all the required info and press the Send eMail button?8Info containedin the formAcknowledgementUsers ComputerWeb ServerServer-Side ScriptBrowserMessage to the receivers eMail address9This is what happens when the form is filled correctly. What if the form is filled incorrectly?What if the users leaves one of the essential fields, blank?

What if the user enters an illegal eMail address? Examples:altaf2cs.uol.edu.pkbhola@hotmail.conbhola@yahoo10A Reasonable ScenarioWhen the Send eMail button is clicked, the browser sends the data collected through the form to a script running on the Web server

That server-side script:receives that dataanalyzes itdiscovers the missing or incorrect datasends a message back to the users browser stating the problem and asks the user to re-send11This process That is the process of user:Filling the incomplete/incorrect dataSending it to the serverReceiving the response back from the serverCorrecting and resendingis quite time-consuming and uses the servers resources to help the user correct his mistakes

It can really bog down the server if a large number of users are using that Web server12Client-Side Scripting is a viable alternateIn this technique, one uses the users browser to checking the form data

If data is missing or is incorrect, the browser can prompt the user to take corrective action

This way, the form data is sent to the server-side script only after it has been established that the collected data is complete and correct13Server-Side Scripts: ReviewAre programs that reside on Web servers

Receive info that a user enters in a form

Process that info and take appropriate action

Examples:CGI scripts on Unix serversASP/PHP scripts on Windows servers14New Concept: Client-Side ScriptsSmall programs that are a part of the Web page and run on the users (clients) computer

They interact with the user to collect info or to accomplish other tasks

Once it has been collected, they may help pass the collected info on to a server-side script

Well use JavaScript to do client-side scripting. However, there are many other languages that can be used for that purpose, e.g. VBScript, JScriptJavaScript a CLIENT-SIDE Language15Users ComputerWeb ServerBrowserHTMLCSSHTMLCSSJavaScript16Advantages of Client-Side ScriptingReduced server load as it does not have to send messages to the users browser about missing or incorrect data

Reduced network traffic as the forms data is sent only once instead of many tos and fros17DisadvantagesClient-side scripts do not work with all browsers

Some user intentionally turn scripting off or disabled on their browsers

This increases the complexity of the Web page, as it now has to support both situations: browsers with scripting capability, and those not having that capability

18Some of things that JavaScript cannot do!The following file ops. on the client computer:Read-- ModifyRename-- DeleteCreate

Create graphics (although, it does have the ability to format pages through HTML - including the placement of graphics)

Any network programming bar one function: the ability to download a file to the browser specified through an arbitrary URLThere is no works in JavaScript to talk with a database.

You cant access hardware (USB, etc)1920Some of the things that JavaScript can do!Control the appearance of the browser.Control the content and appearance of the document displayed in the browserInteract with the user through event handlersArbitrary calculations, including floating-point onesStore & modify a limited amount of data about the user in the form of client-side cookiesCOOKIESCookies are small files, in which browser can store some data on client machine, so that next time user visit the same webpage. The webpage get to know where he is actually.

Example:In cookies, there is information about client machine address, name, time and date. When i visit amazon.com for book purchase, it is written on the webpage, hello Yasir.21What is a Scripting Language?JavaScript is intentionally limited, you cant write desktop application in JavaScript the way you do in C++, Java or .Net

JavaScript only works inside another application the web browser, all browsers have JavaScript engine inside them. The OS runs the web browser, the web browser contains the page and the page contains the JavaScript.22operating systemC++ AppJava App.Net AppWeb BrowserWeb pageJavaScript23A Simple Example of Client-Side Scripting24

25

Code for the simple Send eMail button as was described during the last Web development course26

Additional JavaScript code for the smart Send eMail button that would not allow itself to be clicked if the From text field is left blank 27

Event Handler 28This is one way of including JavaScript code in an HTML document that is, including a short JavaScript segment as part of an HTML tag

There are a few others as well. Lets now find out about another.

But before we do that lets just make clear why we are interested in including JavaScript in our Web pages29Why JavaScript?HTML is great for static Web pages; however, supports only rudimentary interactivity through forms and hyperlinks

JavaScript can be used (along with HTML) to develop interactive content for the Web30What is JavaScript?A programming language specifically designed to work with Web browsers

It is designed to be used for developing small programs called scripts that can be embedded in HTML Web pages

JavaScript:Is an interpreted languageSupports event-driven programmingIs object-based language31Object Based?Everything that JavaScript manipulates, it treats as an object e.g. a window or a button

An object has properties e.g. a window has size, position, status, etc.

Properties are modified with methods e.g. a resize a window with resizeTo(150, 200)32Not Object-Oriented!JavaScript is not a true object-oriented language like C++ or Java

It is so because it lacks two key features:A formal inheritance mechanismStrong typing

Nevertheless, it does include many key concepts that are part of almost all object-oriented languages, and therefore is referred as an object-based language33Back to our example 34

35

36

37

38checkForm()JavaScript understands onMouseOver it is one of the pre-defined keywords in JavaScript

However, the case for checkForm() is different

A checkForm() function does not exist in JavaScript. Therefore, we will have to define it ourselves

It can either be defined in the HEAD portion or BODY portion. We will do it in the HEAD.39

Send an eMail