javascript. during the last lecture we looked at the utility of forms on web pages we found out...
TRANSCRIPT
![Page 1: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/1.jpg)
JavaScript
![Page 2: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/2.jpg)
During the last lecture
• We looked at the utility of forms on Web pages
• We found out about the various components that are used in a form
• We became able to build a simple, interactive form
![Page 3: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/3.jpg)
In Today’s Lecture …
• We will learn ways of adding more interactivity to forms
• We will get our first taste of JavaScript – the object-based language for Web development
• Last time we mentioned server-side scripts; today we will write (simple) client-side scripts in JavaScript
![Page 4: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/4.jpg)
But first lets review the tags that are used in forms
![Page 5: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/5.jpg)
<FORM
name=“name”
method=“get” or “post”
action=“URL”
>
Elements of the form
</FORM>
![Page 6: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/6.jpg)
Single-Line Text Input Field
<INPUTtype=“text”name=“name”size=“widthInCharacters”maxlength=“limitInCharacters”value=“initialDefaultValue”
>
![Page 7: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/7.jpg)
Password Input Field
<INPUTtype=“password”name=“name”size=“widthInCharacters”maxlength=“limitInCharacters”value=“initialDefaultValue”
>
![Page 8: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/8.jpg)
Hidden Input
<INPUTtype=“hidden” name=“name”value=“value”
>
![Page 9: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/9.jpg)
Checkbox Input Element
<INPUTtype=“checkbox”
name=“name”
checked
value=“checkedValue”>
![Page 10: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/10.jpg)
Radio Button Input Element
<INPUTtype=“radio”
name=“name”
checked
value=“selectedValue”>
![Page 11: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/11.jpg)
File Upload Input Element
<INPUTtype=“file”
name=“name”
value=“nameOfSelectedFile”
enctype=“fileEncodingType”>
![Page 12: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/12.jpg)
Reset Button Input Element
<INPUTtype=“reset”
value=“buttonLabel”>
![Page 13: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/13.jpg)
Submit Button Input
<INPUTtype=“submit” name=“name”value=“buttonLabel”
>
![Page 14: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/14.jpg)
8 Possible Values for the “type” Attribute of <INPUT> tag
1. text2. password3. hidden4. checkbox5. radio6. file7. reset8. submit
![Page 15: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/15.jpg)
Multi-Line Text Input Area
<TEXTAREAname=“areaName”cols=“width”rows=“lines”
>
initial default value
</TEXTAREA>
![Page 16: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/16.jpg)
Select from a (Drop Down) List<SELECT
name=“name”
size=“numberOfDisplayedChoices”
multiple
>
<OPTION value=“value1”> text1
<OPTION value=“value2” selected> text2
<OPTION value=“value3”> text2…
…
</SELECT>
![Page 17: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/17.jpg)
![Page 18: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/18.jpg)
![Page 19: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/19.jpg)
End of the Review of Tags Used in Forms
Now let’s take a look at a form that we constructed last time, and see how we can make it better
![Page 20: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/20.jpg)
![Page 21: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/21.jpg)
Let’s now review what happens when I enter all the required info and press the “Send eMail” button?
![Page 22: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/22.jpg)
Info containedin the form
Acknowledgement
Message to the receiver’s eMail address
User’s Computer
Web Server
Server-Side Script
Browser
![Page 23: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/23.jpg)
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:
– ali2umt.edu.p
– bhola@yahoo
![Page 24: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/24.jpg)
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
![Page 25: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/25.jpg)
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
![Page 26: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/26.jpg)
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
![Page 27: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/27.jpg)
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
![Page 28: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/28.jpg)
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
![Page 29: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/29.jpg)
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
![Page 30: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/30.jpg)
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
![Page 31: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/31.jpg)
A Simple Example of Client-Side Scripting
![Page 32: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/32.jpg)
![Page 33: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/33.jpg)
<INPUT type=“submit” name=“sendEmail” value=“Send eMail”>
Code for the simple “Send eMail” button as was described during the last lecture
![Page 34: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/34.jpg)
<INPUT type=“submit” name=“sendEmail” value=“Send eMail” onMouseOver= “if (document.sendEmail.sender.value.length < 1) window.alert(‘Empty From field! Please correct’)”>
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
![Page 35: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/35.jpg)
<INPUT type=“submit” name=“sendEmail” value=“Send eMail” onMouseOver= “if (document.sendEmail.sender.value.length < 1) window.alert(‘Empty From field! Please correct’)”>
Event Handler
![Page 36: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/36.jpg)
• This 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. Let’s now find out about another.
• But before we do that …… let’s just make clear why we are interested in including JavaScript in our Web pages
![Page 37: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/37.jpg)
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
![Page 38: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/38.jpg)
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
![Page 39: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/39.jpg)
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)
![Page 40: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/40.jpg)
Scripting Languages
• Code is interpreted as it is loaded in client
![Page 41: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/41.jpg)
What You Need to Know
• HTML
• Text editors
• Web browsers
• Different versions of JavaScript
![Page 42: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/42.jpg)
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
![Page 43: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/43.jpg)
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
![Page 44: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/44.jpg)
Case Sensitivity
• SCRIPT tag is NOT case sensitive
• JavaScript inside SCRIPT tag IS case sensitive
![Page 45: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/45.jpg)
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
![Page 46: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/46.jpg)
Calling External Scripts
• External JavaScript file– Text file that contains JavaScript code– Saved with ‘.js’ extension– Saves time coding a script into each page
![Page 47: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/47.jpg)
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
![Page 48: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/48.jpg)
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
![Page 49: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/49.jpg)
Back to our example …
![Page 50: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/50.jpg)
![Page 51: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/51.jpg)
<INPUT type=“submit” name=“sendEmail” value=“Send eMail” onMouseOver= “if (document.sendEmail.sender.value.length < 1) window.alert(‘Empty From field! Please correct’)”>
![Page 52: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/52.jpg)
<INPUT type=“submit” name=“sendEmail” value=“Send eMail” onMouseOver=“checkForm()”>
![Page 53: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/53.jpg)
<INPUT type=“submit” name=“sendEmail” value=“Send eMail” onMouseOver= “if (document.sendEmail.sender.value.length < 1) window.alert(‘Empty From field! Please correct’)”>
<INPUT type=“submit” name=“sendEmail” value=“Send eMail” onMouseOver=“checkForm()”>
![Page 54: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/54.jpg)
checkForm()
• 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.
![Page 55: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/55.jpg)
<HTML><HEAD><TITLE>Send an eMail</TITLE><SCRIPT>function checkForm() { if ( document.sendEmail.sender.value.length < 1) { window.alert( “Empty From field! Please correct” ); }}</SCRIPT></HEAD><BODY bgcolor=“#FFFFCC”> … body content …</BODY></HTML>
JavaScript code enclosed in the new <SCRIPT>,</SCRIPT> HTML tags
![Page 56: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/56.jpg)
We have looked at 2 techniques for embedding JavaScript code in a Web page:
1. Put the code in the tag for the “Send eMail” button - as was shown to you earlier
2. Put the checkForm() code in the HEAD portion & put the onMouseOver=“checkForm()” attribute in the tag for the “Send eMail” button
Both perform the required function satisfactorily.
Q: Which of two techniques is better?
![Page 57: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/57.jpg)
• The “put all code in the tag” technique seems to require less code
• For very short scripts, “all code in the tag” works well. However, this technique does not work when one needs to put multiple script statements in the same tag
• The “code in the HEAD portion” is more general-purpose, and the right choice for developing larger JavaScript scripts
![Page 58: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/58.jpg)
Let’s again look at the JavaScript code
![Page 59: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/59.jpg)
The main code segment that goes between the <SCRIPT>, </SCRIPT> tags in the HEAD:
function checkForm() {
if ( document.sendEmail.sender.value.length < 1) { window.alert( “Empty From field! Please correct” ); }}
The JavaScript code included as an attribute of the “Send eMail” button:
onMouseOver=“checkForm()”
![Page 60: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/60.jpg)
Today we checked if the “From” field of the form was empty
How can we modify the JavaScript code for checking if the “To” field is empty as well?
How about checking all four fields?
How about checking if the addresses given in the “From” and “To” fields are legal eMail addresses?
Please try thinking about those possibilities?
![Page 61: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/61.jpg)
In Today’s Lecture …
• We learnt ways of constructing forms that were a bit more interactive
• We got our first taste of JavaScript – the object-based language for Web development
• Last time we mentioned server-side scripts; today we wrote (simple) client-side scripts in JavaScript
![Page 62: JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649ef25503460f94c03e42/html5/thumbnails/62.jpg)
Next Lecture:JavaScript Object, Properties, Methods
• We will have a more formal introduction to JavaScript and client-side scripting
• We will become able to appreciate the concept of objects in JavaScript
• We will learn about the properties of those objects
• We will become able to perform simple tasks through the application of methods