HTML Lab
FamilyGuy007
CSIS-110_WebPageJavaScriptLab.pdf
JavaScript Lab Instructions
Purpose:
1. Apply key terms and concepts from Interactive Web Development technology using previously developed web content.
2. Establish the expectation for applicable deliverables in this course.
Resources: • Review the concepts and ideas from Chapter 16 of the textbook and from the lecture on that
chapter. • You may use any Web Page editor you choose except Microsoft Word. • All the JavaScript commands you will need are found below and are highlighted in yellow.
Examples for most of these commands can be found in the W3Schools JavaScript Tutorials Page.
How to make an A or B: Simply following these instructions will produce a Satisfactory or C grade lab. To produce an A or B grade web page, use additional JavaScript in your aboutme.html page, where you may do anything you like to demonstrate B-Very Good or A- Excellent work. Note: Check the end of this document for some example JavaScript code.
Tasks:
1. Using the previously developed Web Lab 1 HTML index.html, add any 2 of the following JavaScript items:
2. For an A or B grade, using the previously developed Web Lab 1 aboutme.html, add any 1 of the above listed JavaScript items.
3. Take the WebPage folder [containing the 2 files mentioned above] and place it on another computer. This can be a friends or one in the ILRC.
4. Launch the index.html and aboutme.html files in your preferred browser and test that your JavaScript works, then repeat the tests in at least 1 additional type of browser client.
• An interactive JavaScript Input validation test, with a response to the user indicating success or failure for the input.
• An interactive JavaScript Input with a pop-up window or alert. • An interactive JavaScript Date or Time Display requiring user action. • An interactive JavaScript Selection from an array requiring user action.
Submission:
1. Make sure both files in this workshop [index.html, aboutme.html are located in the WebPage folder for zipping.
2. Zip the WebPage folder as instructed below:
• Select the WebPage folder by clicking on the folder name. • Move the mouse cursor is over the selected folder and right click. • On the drop-down menu move the cursor to "Send To". This will open a sub-menu of
options. • On the "Send To" sub-menu select "Compressed (zipped) Folder".
3. Submit the zipped file [WebPage.zip] via BlackBoard by the date indicated on the Assignments page.
Note: If the files are named incorrectly and/or not zipped as directed, the assignment cannot be graded and will be considered late and so penalized.
JavaScript Code Examples that can be copied into a .html file:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Lab Example Code Snippets For Student Use</h1>
<h2>JavaScript Input Validation Example</h2>
<p>If the number is less than 0 or greater than 10, an error message will be displayed.</p>
<p>Enter a number and click OK:</p>
<input id="id1" type="number" min="0" max="10" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
} else {
document.getElementById("demo").innerHTML = "Input OK";
}
}
</script>
<h2>JavaScript Do ... While Example</h2>
<p id="demo0"></p>
<script>
var text = ""
text += "<br>My name is John Smith";
var i = 0;
do {
text += "<br>The number is " + i;
i++;
}
while (i < 3);
document.getElementById("demo0").innerHTML = text;
</script>
<h2>JavaScript Display Date and Time Button Example</h2>
<p>Click the button to display the date.</p>
<p id="demo1"></p>
<button onclick="this.innerHTML=Date()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo1").innerHTML = Date();
}
</script>
<p id="demo2"></p>
<h2>JavaScript Hello Button Example</h2>
<button onclick="myFunction1()">Hello</button>
<script>
function myFunction1() {
alert("Hello, my name is John Smith!");
}
</script>
<h2>JavaScript Select From An Array Example</h2>
<p id="demo3"></p>
<script>
var cars = ["Saab","Volvo","BMW", "Ford", "Chevy", "Ram", "Dodge", "Hyundai", "Toyota", "Harley", "Custom"];
document.getElementById("demo3").innerHTML = cars;
</script>
<form>
Select your favorite Vehicle:
<select id="mySelect">
<option>Saab</option>
<option>Volvo</option>
<option>BMW</option>
<option>Ford</option>
<option>Chevy</option>
<option>Ram</option>
<option>Dodge</option>
<option>Hyundai</option>
<option>Toyota</option>
<option>Harley</option>
<option>Custom</option>
</select>
<br><br>
<input type="button" onclick="getOption1()" value="Click Button To Select Vehicle!">
</form>
<p id="demo4"></p>
<script>
function getOption1() {
var obj = document.getElementById("mySelect");
document.getElementById("demo4").innerHTML =
obj.options[obj.selectedIndex].text;
}
</script>
</head>
<body>
</html>
- JavaScript Lab Instructions
- Purpose:
- Resources:
- Tasks:
- Submission:
