<div>
<p>
<input type="text"/>
</p>
</div>
element.addEventListener('eventString', function(event){
doSomething();
})
%%html
<html>
<head>
<script>
function paragraphHandle(){
this.style.background = "green"
}
document.querySelector('#one').addEventListener('click',paragraphHandle)
document.querySelector('#two').addEventListener('click',paragraphHandle)
document.querySelector('#three').addEventListener('click',paragraphHandle)
document.querySelector('.contain').addEventListener('click',
function(){
this.style.background = "purple"
})
</script>
</head>
<body>
<div class="contain">
<p id="one"> A Paragraph</p>
<p id="two"> A Second Paragraph</p>
<p id="three"> A Third Paragraph</p>
</div>
</body>
</html>
%%html
<html>
<head>
<script>
function paragraphHandle(){
this.style.background = "green"
}
var paragraphs = document.querySelectorAll('p')
for(var i = 0; i < paragraphs.length; i++)
{
paragraphs[i].addEventListener('click',paragraphHandle)
}
document.querySelector('.contain').addEventListener('click',
function(){
this.style.background = "purple"
})
</script>
</head>
<body>
<div class="contain">
<p> A Paragraph</p>
<p> A Second Paragraph</p>
<p> A Third Paragraph</p>
</div>
</body>
</html>
%%html
<html>
<head>
<script>
</script>
</head>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>
<div id="clicked">
</div>
</body>
</html>
%%html
<html>
<head>
<script>
document.querySelector("#theText").addEventListener('input',
function(event)
{
var lastChar = this.value[this.value.length -1]
var out = document.querySelector("#output")
if(lastChar == 'a' || lastChar == 'e' ||
lastChar == 'i' || lastChar == "o" ||
lastChar == 'u')
{
out.innerHTML = "You typed a vowel"
}
else{
out.innerHTML = "You typed a consonant"
}
})
</script>
</head>
<body>
<input id="theText" type="text" />
<p id="output"></p>
</body>
</html>
%%html
<html>
<head>
<script>
addEventListener('keydown',
function(event)
{
var output = document.querySelector("#output2")
if( event.keyCode == 77 && event.ctrlKey == true)
{
output.style.border = "3px solid black"
}
else if(event.keyCode == 77 && event.altKey == true)
{
output.style.border = "3px dashed black"
}
else{
output.style.border = "0px solid black"
}
})
</script>
</head>
<body>
<p id="output2">Watch This Space</p>
</body>
</html>
%%html
<html>
<head>
<script>
function getInputType(event)
{
document.querySelector("#inputType").innerHTML = this.type
}
document.querySelector("input[type='text']").addEventListener('focus',getInputType)
document.querySelector("#aSelect").addEventListener('focus',getInputType)
document.querySelector("input[type='email']").addEventListener('focus',getInputType)
</script>
</head>
<body>
<h3>A Simple Form</h3>
<p id="inputType">The Input Type Will Go Here</p>
<p>
<label>Name:</label> <input type="text"/>
</p>
<p>
<label>Class Standing:</label>
<select id="aSelect">
<option>Freshman</option>
<option>Sophmore</option>
<option>Junior</option>
<option>Senior</option>
</select>
</p>
<p>
<label>Email: </label> <input type="email"/>
</p>
</body>
</html>
%%html
<html>
<head>
<style>
#trackHere{width:100px;height:100px; border:1px solid blue}
</style>
<script>
document.querySelector('#trackHere').addEventListener('mousemove',function(event){
document.querySelector("#point").innerHTML= event.screenX + "," + event.screenY
})
</script>
</head>
<body>
<div id="trackHere"></div>
<p id="point"></p>
</body>
</html>
%%html
<html>
<head>
<script>
</script>
</head>
<body>
<div>
<span>Meesage:</span> <span id="selected"></span>
</div>
<p id="toWatch">The giant anteater (Myrmecophaga tridactyla), also known as the ant bear, is a large insectivorous mammal native to Central and South America. It is one of four living species of anteaters and is classified with sloths in the order Pilosa. This species is mostly terrestrial, in contrast to other living anteaters and sloths, which are arboreal or semiarboreal. The giant anteater is the largest of its family, 182–217 cm (5.97–7.12 ft) in length, with weights of 33–41 kg (73–90 lb) for males and 27–39 kg (60–86 lb) for females. It is recognizable by its elongated snout, bushy tail, long fore claws, and distinctively colored pelage.</p>
<p><small>From the Wikipedia entry on the Giant Anteater</small></p>al and South America. It is one of four living species of anteaters and is classified with sloths in the order Pilosa. This species is mostly terrestrial, in c
</body>
</html>
%%html
<html>
<head>
<style>
#trackHereAgain{width:100px;height:100px; border:1px solid blue}
</style>
<script>
function displayCoords(event) {
document.querySelector("#point2").textContent =
"Mouse at " + event.pageX + ", " + event.pageY;
}
var scheduled = false, lastEvent;
document.querySelector("#trackHereAgain").addEventListener("mousemove", function(event) {
lastEvent = event;
if (!scheduled) {
scheduled = true;
setTimeout(function() {
scheduled = false;
displayCoords(lastEvent);
}, 2000);
}
});
</script>
</head>
<body>
<div id="trackHereAgain"></div>
<p id="point2"></p>
</body>
</html>
worker = new Worker('jsFileName')
worker.addEventListner("message",
function(event){
doSomething(event.data);
})
worker.postMessage(toSendToWorker);