Upload
bernard-daniel
View
251
Download
3
Embed Size (px)
Citation preview
Introduction to JavaScript
CS101 Introduction to Computing
Let’s now review what happens when I enter all the required info and press the “Send eMail” button?
Info containedin the form
Acknowledgement
Message to the receiver’s eMail address
User’s Computer
Web Server
Server-Side Script
Browser
This 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:
– ihussain2imt.edu.p
– bhola@yahoo
A Reasonable Scenario
• When 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 data– analyzes it– discovers the missing or incorrect data– sends a message back to the user’s browser
stating the problem and asks the user to re-send
This process …• That is the process of the user:
– Filling the incomplete/incorrect data– Sending it to the server– Receiving the response back from the server– Correcting and resending
is quite time-consuming and uses the server’s 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 server
Client-Side Scripting is a viable alternate
• In this technique, one uses the user’s 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 correct
Server-Side Scripts: Review
• Are 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 servers– ASP scripts on Windows servers
<FORM name="sendEmail" method="post" action="sendMailScriptURL">
Elements of the form
</FORM>
name: Name given to the form
method: Forms can be submitted through two alternate methods – GET & POST
action: Specifies the URL that is accessed when the form is being submitted
New Concept: Client-Side Scripts• Small programs that are a part of the Web page
and run on the user’s (client’s) 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
• We’ll use JavaScript to do client-side scripting. However, there are many other languages that can be used for that purpose, e.g. VBScript
Advantages of Client-Side Scripting
• Reduced server load as it does not have to send messages to the user’s browser about missing or incorrect data
• Reduced network traffic as the form’s data is sent only once instead of many to’s and fro’s
Disadvantages
• Client-side scripts do not work with all browsers
• Some user intentionally turn scripting off 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
A Simple Example of Client-Side Scripting
Why 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 more interactive content for the Web
What 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 language– Supports event-driven programming– Is object-based
Object 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)
Object-Based
• JavaScript uses items called ‘objects’
• Objects are not ‘class-based’– No distinction made between class and
instance
Scripting Languages
• Code is interpreted as it is loaded in client
What You Need to Know
• HTML
• Text editors
• Web browsers
• Different versions of JavaScript
How to Use JavaScript?
• JavaScript placed within HTML code
• Use the HTML SCRIPT tag
• JavaScript can be placed in either the ‘Head’ or ‘Body’ portion of an HTML document
SCRIPT Tag
• Comes in in pairs
<SCRIPT> Opening SCRIPT tag
</SCRIPT> Closing SCRIPT tag
• Tells browser where script begins and ends
• Identifies scripting language and version
• Specifies address for an external JavaScript file
Case Sensitivity
• SCRIPT tag is NOT case sensitive
• JavaScript inside SCRIPT tag IS case sensitive
See Example 1 …
• Write a string of text to a Web page
JavaScript Rules• Parentheses
– Required by JavaScript functions– The document.write method is a function that takes an argument
contained in parentheses
• Quotation Marks– Denote a string of text in JavaScript (a string is a type of variable)
• Semicolon– Signals end of JavaScript statement (a statement is a portion of code
that does not need anything added to it to be complete in its syntax)
• Syntax– Form and order of programming code
Calling External Scripts
• External JavaScript file– Text file that contains JavaScript code– Saved with ‘.js’ extension– Saves time coding a script into each page
See Example 2 …
Hiding JavaScript from Older Browsers
• Older browsers may not recognize JavaScript– May dump entire JavaScript code as text on screen
• Tell older browsers to ignore JavaScript– Use HTML comments between ‘SCRIPT’ tags
(<!--) Opening HTML comment code
(//-->) Closing HTML comment code
See Example 3 …
JavaScript Comments
• Benefits– To add notes– To look for error in script
• Single-line comments// Your comments go here
• Multi-line comments(/*) Opening code(*/) Closing code
See Example 4 …