Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download CS101-Pre assessment task for adobe session 2
Document related concepts
no text concepts found
Transcript
Introduction to Computing Pre assessment task 2 for adobe connect session
Learning outcomes
After performing this Pre assessment task for adobe connect session a student will be able to:
1. Create an HTML web page using notepad
2. Make use of basic HTML tags (HTML, Head, Body, Heading tags, Form Tag, Input tag,
BR tag etc.)
3. Access input elements of HTML web page with Java Script
4. Use Java Script code with HTML for form validation
In this adobe session students will create an HTML web page with Java Script that will
look like the page given below:
Image 1
Web Page functionality detail
After designing the web page in HTML, you are required to write the Java Script code such that
when user clicks the “Show Information” button but Name and age text boxes are empty or
invalid then message should be displayed like following images.
Message to show when Name text box is empty:
Image 2
Message to show when age text box is empty or invalid (must be in number format 1 - 100):
Image 3
After displaying above alert messages a message on page should also be shown like below, in
case of invalid information
Image 4
If Information provided is correct then on click of Show Information button web page should
provide the entered information like below snapshot
Image 5
Reset Form button should reset both the text boxes (Name and Age) values.
Instructions to create HTML document
1.
2.
3.
4.
Open Notepad: Start, Programs, Accessories, Notepad
Notepad should launch with a new document.
Write the HTML and Java Script code here.
From the File pull-down menu, Select "Save As," save the file to the Desktop, and name
the file using ".html" extension (e.g., "homepage.html").
5. You must be sure to save the file with ".html" extension because Notepad will otherwise
add ".txt" extension which will confuse most Web browsers.
Tags used to create HTML web page
<HTML></HTML> starting and ending tags for HTML web document
<HEAD></HEAD> This tag can include a title for the document, scripts, styles etc. will
appear after <HTML> tag
<script></script> tag for writing java script code
<input type="text"> for text boxes
<input type="button"> for show Information button
<input type="reset"> for reset button
The <h1> to <h6> tags are used to define HTML headings.
The <br> tag inserts a single line break.
Java Script code
Java Script code must be written for onClick event of Show Information button
You can use document.getElementById("id").value to access the information of an input
element
You can use codition isNaN(age)||age<1||age>100 for age verification
You can use window.alert("Message") for alert boxes
You can use a div tag inside web page with id= "Info" and then change the innerHtml
property of this div to show the final information in Java Script as shown in image4 and
image 5 with code document.getElementById("Info").innerHTML="Text to display";
For string concatenation you can use + sign.
