Upload
mishallmujahid
View
5
Download
2
Embed Size (px)
DESCRIPTION
java script basics
Citation preview
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:[email protected]@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