Date: Tuesday, November 29, 2016. Due: Tuesday, December 6, 2016.
Open Adobe Dreamweaver CS6. Start a new HTML file. Save the file locally. Add the following tag inside the body:
<script language="javascript">
and close it afterwards.
Inside this script tag add the following:
var name="";
alert(name);
and then type your name inside the quotes. Save the file, then from Windows Explorer open the html file you saved in a browser. You should see a dialog with your name inside.
Then comment out the alert statement by placing two forward slash characters ( // ) in from of it.
Add the following code after the commented out alert:
for (c in name) {
alert("Give me a \"" + name[c] + "\"");
}
Reload the page in the browser to see the result. Then after the loop add two more alerts to print out "What does it spell?" and then the content of the variable name and an exclamation dot after that. Reload the page to see if it works.
The vowels in a name should be referenced as "an a" or "an o" and not "a a" or "a o", and some consonants such as "n" too. Let's add a conditional to the alert in the loop to take case of this. Add the following code inside the braces:
if (name[c] == "a" || name[c] == "n")
Copy the alert line inside the loop and paste it right after it. You should now have two copies of it. Add an empty line between the two and type else on it. Then modify the first of the two alerts to turn "Give me a" into "Give me an".
Look at the spelling of your name. If you have more vowels in it other than "a", and a case in the conditional for each of them, separated by the double bar (which stands for "or"), like in the example above.
Let's use the global variable document and the function writeln to write the content directly to the page instead of using dialog alerts.
Comment out the two alerts inside the for loop. Add a line right after each of them (to replace them in the conditional) containing
document.writeln();
And then copy the argument of each alert (content inside of the parentheses) as the argument of the writeln that replaces it. Then replace the "+" in the expression with a simple comma. This is because the alert function takes only one argument, while the writeln function can take as many as we need. Also add "<br>" at the end of the text you output with each function call so that each of them is displayed on its own line on the page.
Replace the two alerts below the loop the same way.
First, let's create an element on the page with an id so that we can change its content later. Add the following in the body after the script:
<p id="typeHere"></p>
Then let's add a function that will react to keys being pressed by changing the content of this paragraph. Add the following code containing a function designed to react to a key being pressed to the <head> section of the page:
<script language="javascript">
function keyEvent(event) {
var key = event.keyCode || event.which;
var keychar = String.fromCharCode(key);
document.getElementById('typeHere').innerHTML = "omg "+keychar+"! kthxbye<br>";
}
</script>
Then add the following to the <body> tag:
onkeydown="keyEvent(event)"
Reload the page to see the result. You will have to press a key to activate the function call. The file you have created so far is what you have to turn in for this week's lab.
Start a new html file called guessign.html. Download the following file: interface.js.
Give the page a tile and in the head section, then write a centered heading 1 title to the page with the text "Find Your Rocky Astrological Sign" (totally made up). Here we will ask the user a series of questions and provide a rocky sign at the end.
Below the title, add a paragraph with an id:
<p id="question">What is your favorite
color?</p>
Below this paragraph, add the following code to import the js file:
<script language="javascript" src="interface.js">
</script>
Below that, add the following HTML form:
<form method="get" name="myform">
<input type=text name="answer" size=30>
<input type="hidden" name="count" value=0>
<input type="submit" name="button" value="Submit">
</form>
Below that, add the following script that calls a function defined
in the interface file to process the input form the form:
<script language="javascript">
var answer = "";
var count = 0;
process_answer();
count++;
document.myform.count.value = count;
</script>
Run the page. Every time you submit an answer, the value of the count that is submitted should increase by one. When you run out of questions, the page should show a random rocky sign out of the list stored in the variable signs in interface.js.
Add a few more questions to make the quiz more interesting and a few more rocks to the signs array.
Some more examples and explanations: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Getting_Started. Another good source for learning Javascript (http://www.w3schools.com/).