%%script node
console.log("The area of a circle with radius 3 is " +
Math.PI * Math.pow(3,2))
console.log("")
console.log("The cosine is (and all trig) expects radians " +
Math.cos(Math.PI/2) + " " + Math.cos(0))
console.log("")
console.log("Enjoy this random number " + Math.random())
javscript
var my_date = new Date();
Date()
with out new returns a stringDate.now()
%%script node
var now = new Date()
console.log("Today is " + now)
console.log("Today is " + Date())
console.log("The current UNIX time is " + Date.now())
getYear()
, setYear()
getMonth()
, getDay()
- Both of these start at 0!toDateString()
returns only the date parttoTimeString()
returns only the time part%%script node
var now = new Date()
console.log("The date is " + now)
now.setFullYear(1900)
console.log("The date is " + now)
console.log(now.toDateString())
console.log(now.toTimeString())
%%script node
var my_reg = /\d\d\d-\d\d\d-\d\d\d\d/i;
var another_re = new RegExp("\\d\\d\\d-\\d\\d\\d-\\d\\d\\d\\d",
"i");
g
flag, successive calls to regex.exec will find additional matches%%script node
var my_reg = /(\d\d\d)-(\d\d\d)-\d\d\d\d/g;
var text = "410-555-1234 301-555-1234 443-555-1234";
var result
while((result = my_reg.exec(text)) !== null)
{
console.log(result)
text = "443-555-1234 301-555-1234"
}
%%script node
var my_reg = new RegExp("(\\w+) .+? \\1 (\\w+)",'g');
var text = "Doe a deer a female deer ray a drop of golden sun me a name I call myself";
var result;
while((result = my_reg.exec(text)) !== null)
{
console.log(result)
}
%%script node
var text = "Doe a deer a female deer ray a drop of golden sun me a name I call myself";
console.log(text.split(/\s/));
console.log(text.split(RegExp("\\w\\w+")))
%%script node
var text = "Doe a deer a female deer ray a drop of golden sun me a name I call myself";
console.log(text.replace(/(\w)\1/,"**"))
console.log(text.replace(/(\w)\1/g,"**"))
console.log(text.replace("ee","**"))
<div>
<p>
<input type="text"/>
</p>
</div>
this
inside of a handler refers to the object that triggered the eventelement.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(event){
this.style.background = "green"
event.stopPropagation()
}
var paragraphs = document.querySelectorAll('p')
for(var i = 0; i < paragraphs.length; i++)
{
paragraphs[i].addEventListener('click',paragraphHandle)
}
document.querySelector('.contain2').addEventListener('click',
function(){
this.style.background = "purple"
})
</script>
</head>
<body>
<div class="contain2">
<p> A Paragraph</p>
<p> A Second Paragraph</p>
<p> A Third Paragraph</p>
</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>
document.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("#in").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" id="in"/>
</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;margin:10px auto}
</style>
<script>
document.querySelector('#trackHere').addEventListener('mousemove',function(event){
document.querySelector("#point").innerHTML= event.screenX + "," + event.screenY
})
</script>
</head>
<body>
<h1>A Random Heading</h1>
<div id="trackHere"></div>
<p id="point"></p>
</body>
</html>
%%html
<p id="bal">🎈</p>
<script>
// Your code here
</script>
%%html
<html>
<head>
<script>
</script>
</head>
<body>
<div>
<span>Message:</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
<!DOCTYPE html>
<!-- From Eloquent Javascript-->
<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() {
displayCoords(lastEvent);
scheduled = false;
}, 2000);
}
});
</script>
</head>
<body>
<div id="trackHereAgain"></div>
<p id="point2"></p>
</body>
</html>
window
object%%html
<!DOCTYPE html>
<html>
<head>
<script>
window.setInterval(function(){
document.getElementById('timeContainer').innerHTML = "The time is now " + Date()
},2000);
</script>
</head>
<body>
<h1 id="timeContainer"></h1>
</body>
</html>
<canvas>
element<canvas>
tag¶<canvas>
tag allows the width and height to be set in HTML<canvas>
tag will only be displayed on browsers that do not support canvasvar my_canvas = document.getElementById("canvas1");
var context = my_canvas.getContext('2d');
%%html
<!DOCTYPE html>
<html>
<script>
var my_canvas = document.getElementById("canvas1");
var context = my_canvas.getContext('2d');
context.fillRect(0,0,100,100);
</script>
<body>
<canvas id="canvas1">Canvas is unsupported </canvas>
</body>
</html>
%%html
<!DOCTYPE html>
<html>
<script>
var my_canvas = document.getElementById("canvasa");
var context = my_canvas.getContext('2d');
context.strokeRect(0,0,100,100);
context.fillRect(90,90,50,50);
context.clearRect(100,100,25,25);
context.fillRect(126,126,10000,10000);
</script>
<body>
<canvas id="canvasa">Canvas is unsupported </canvas>
</body>
</html>
beginPath
moveTo(x,y)
lineTo(x,y)
arc(x,y,startAng,endAng,direction)
fill
or stroke
fill
automatically closes the path, adding a line from the current spot to the first spotstroke
just draws the outline, so the path isn't automatically closed%%html
<!DOCTYPE html>
<html>
<script>
var my_canvas = document.getElementById("canvas2");
var context = my_canvas.getContext('2d');
context.beginPath();
context.lineTo(100,100);
context.lineTo(0,0);
context.stroke();
</script>
<body>
<canvas id="canvas2">Canvas is unsupported </canvas>
</body>
</html>
%%html
<!DOCTYPE html>
<html>
<script>
var my_canvas = document.getElementById("canvas3");
var context = my_canvas.getContext('2d');
context.beginPath();
context.moveTo(50,50);
context.lineTo(100,100);
context.lineTo(100,50);
context.fill();
</script>
<body>
<canvas id="canvas3">Canvas is unsupported </canvas>
</body>
</html>
%%html
<!DOCTYPE html>
<html>
<script>
var my_canvas = document.getElementById("canvas4");
var context = my_canvas.getContext('2d');
context.beginPath();
context.moveTo(50,50);
context.lineTo(100,100);
context.lineTo(100,50);
context.stroke();
context.beginPath();
context.moveTo(150,150);
context.lineTo(175,150);
context.stroke()
</script>
<body>
<canvas id="canvas4">Canvas is unsupported </canvas>
</body>
</html>
%%html
<!DOCTYPE html>
<html>
<script>
var my_canvas = document.getElementById("canvas5");
var context = my_canvas.getContext('2d');
context.beginPath();
context.moveTo(50,50);
context.lineTo(100,100);
context.lineTo(100,50);
context.closePath();
context.stroke();
</script>
<body>
<canvas id="canvas5">Canvas is unsupported </canvas>
</body>
</html>
%%html
<!DOCTYPE html>
<html>
<script>
var my_canvas = document.getElementById("canvas6");
var context = my_canvas.getContext('2d');
context.fillStyle="rgba(255,0,0,0.25)"
context.fillRect(10,10,100,100);
context.fillStyle="rgba(0,0,255,0.5)"
context.fillRect(50,50,100,100);
</script>
<body>
<canvas id="canvas6">Canvas is unsupported </canvas>
</body>
</html>
setInterval
for thisrequestAnimationFrame
, which knowns about graphics and wont abuse the systemrequestAnimationFrame
takes a callback function%%html
<!DOCTYPE html>
<html>
<script>
var global_x = 0;
var global_alpha = 1;
function draw(){
var my_canvas = document.getElementById("canvas7");
var context = my_canvas.getContext('2d');
context.clearRect(0, 0, 300, 150); // clear canvas
global_alpha = global_alpha - 0.01;
if (global_alpha < 0){
global_alpha = 1
}
context.fillStyle="rgba(0,0,0," + global_alpha + ")";
context.fillRect(global_x,10,50,50);
if(global_x > 250){
global_x = 0
}
else{
global_x = global_x + 0.5;
}
window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
</script>
<body>
<canvas id="canvas7">Canvas is unsupported </canvas>
</body>
</html>