Session 1 Recap
In session 11 we introduced the basics of JavaScripts. Before we continue it's important that you understand the following concepts covered in session 11:
Session 1 Revision Demo
The example below where we take a name and display hello + name within a empty <p> element, covers most of last weeks concepts.
<html>
<head>
<script type="text/javascript">
//define function display name
function displayName() {
// get textBox value and assign value to var userName
var userName = document.getElementById("userName").value;
//set inner html of output to hello + userName
document.getElementById("output").innerHTML = "Hello " + userName;
}
</script>
</head>
<body>
<! -- an empty p element for us to output to -->
<!-- An Input to get the users names -->
<input id="userName" type = "text" placeholder = "Enter Name">
<!-- notice the onClick attribute which runs the display name function
when the button is clicked -->
<button onClick = displayName()> Click Me </button>
<p id = "output"><!-- result will be placed here --> </p>
</body>
</html>