>
Quiz is on break this week

Week 7


Things from looking at source code.

Margaret Hamilton
Google maps road trip - the ultimate click adventure
Jodi.org

Functions, buttons, and Alerts
Chuncks of Javascript code are called functions. There are several ways to trigger a function, to start we'll look at buttons and the form tag. In this example pressing the button (onclick) tells javascript to perform the function "buttonInput()". This function tells the browser to send an "alert" that (paradoxically) tells you not to panic.
<!doctype html >
<head>
<script type="text/javascript">
  function buttonInput(){
   alert("Don't Panic"); 	
  }
</script>
</head>

<body>
  <form>
    <input type="button" value= "a button!" onclick="buttonInput()">
  </form>
</body>
</html>

Varaibles, sending messages to the HTML, the console
A
variable in programming is much the same as in algebra. If you say var x = 30 then "x" is a number variable who's value is 30. In many programming languages you need to be specific when defining variables (int, float, string, ect) but javascript anticipates what kind of variable you mean. So if you write var x = 30, it will treat x as a number, but if you write var x = "thirty" it will treat x as text. Note - when creating (declaring) a variable you use "var", but after that you do not use var to refer to it, just the name you created.

In the following example we "iterate" the variable called counter by adding 1 to it each time the button is pressed (that's what the ++ does).
We also introduce the console. When you run this page in Firefox go: Tools > Web Developer > Web Console. The script should "write" the value of the counter to the console. This is both new, and incredibly handy. Make sure you have the Javascript button selected (selecting the CSS button is usefull too!)
Finally, with innerHTML, we send the value of the counter BACK to an ID within the html. This is awesome.

You have clicked that button 0 times already.

<!doctype html>
<head>
<script type="text/javascript">
var counter = 0; 
function buttonInput2(){
    counter ++; 
    console.log(counter);
    document.getElementById('outputText').innerHTML = counter;	
}
</script>
</head>

<body>
<form>
 <input type="button" value= "a button!" onclick="buttonInput2()">
 </form> 
You have clicked that button <span id="outputText">0</span> times already. 
</body>
</html>

IF statements
An "if" statement is the backbone of programing. The conditions of the if statment are within regular parenthesis, and the outcome of the statement is between curly brackets. In the following case we have an if, else if, and else statment that is checking the value of our caounter. Every parenthesis and curly bracket you open must eventually be closed (same as tags in html). This can be a leading cause of confusion. I usually type the closing bracket right away, then go back and fill in the code after - that way I don't forget.

This example outputs to three different ID's within the HTML - can you see now why ID's have to be unique?

You have yet to press the button
<!doctype html>
<head>
<script type="text/javascript">
var counter = 0; 
function buttonInput3(){
    counter ++; 	
	 if (counter == 1){
    document.getElementById('preface').innerHTML = "You have pressed the button";			
	document.getElementById('outputText').innerHTML = counter;	
	document.getElementById('ending').innerHTML = " time.";	
	}
		
	else if (counter > 1 && counter < 30 ){
	document.getElementById('preface').innerHTML = "You have pressed the button";			
	document.getElementById('outputText').innerHTML = counter;	
	document.getElementById('ending').innerHTML = " times.";	
	}	
    else{
    document.getElementById('preface').innerHTML = "Stop pressing the bloody button already";			
	document.getElementById('outputText').innerHTML = "";	
	document.getElementById('ending').innerHTML = "";	
	}
}
</script>
</head>

<body>
<form>
 <input type="button" value= "a button!" onclick="buttonInput3()">
 </form> 
<span id="preface">You have yet to press the button</span> <span id="outputText"> </span><span id="ending"></span> 
</body>
</html>
Are we having fun yet? You can begin to see that in the wrong hands a website with too much javascript would be 100 times more annoying than the blink and marquee tags combined. Thank the heavens it's not super easy! You are not all officially Spiderman.

User input, Changing a DIV's Style atributes
The last example introduces two new concepts. First we add a text box to the form tag that allows for user input. This is super easy. Next, in the javascript, we check the value of the incomming text box and assign that to the color of the parent div. Even if we have assigned a color for the div in the CSS, we can use javascript to change that color! (or any other CSS atribute!).

type a color in the box and press the button

<!doctype html>
<head>
<script type="text/javascript">
function buttonInput4(){
    var input =  document.getElementById('textbox').value; 
    console.log(input);
    document.getElementById('mainarea').style.background = input;
}
</script>
<style>
#mainarea{
   background: white;
   border-style:solid;
   border-width:1px;
   border-color: black; 
   width: 80%;  
   height:  120px;  
   padding: 30px; 
   text-align: center;
   margin-left: auto; 
   margin-right: auto; 	
  }	
</style>

</head>
<body>
<div id="mainarea">
<form>
  type a color in the box and press the button<p>
  <input type="text" value ="white" id="textbox" size="20" <br> 
  <input type="button" value= "CHANGE COLOR" onclick="buttonInput4()">
</form> 
</div> 
</body>
</html>
Lab for week 7
Go to the Code Academy and finish through section 8 of the first lesson. If you get stuck then that's okay, but make a note of where you got stuck so we can un-stick you next week.
Take a screen shot of your "badges" when you have finished the lesson and send them to me as proof.


Reading for week 7
Take a look at the Code Academy home page and look at the video(s). Write your impression of this project. What do you think of the site and the online lessons themselves. Do you like the incentives and prompts? Do you think it will work to attract students to the actual school? Is it worth the hype?