var canvas = null;
var ctx = null;
var frameRate = 1000/30;
var frame = 0;
var assets = ['/media/img/gamedev/robowalk/robowalk00.png',
'/media/img/gamedev/robowalk/robowalk01.png',
'/media/img/gamedev/robowalk/robowalk02.png',
'/media/img/gamedev/robowalk/robowalk03.png',
'/media/img/gamedev/robowalk/robowalk04.png',
'/media/img/gamedev/robowalk/robowalk05.png',
'/media/img/gamedev/robowalk/robowalk06.png',
'/media/img/gamedev/robowalk/robowalk07.png',
'/media/img/gamedev/robowalk/robowalk08.png',
'/media/img/gamedev/robowalk/robowalk09.png',
'/media/img/gamedev/robowalk/robowalk10.png',
'/media/img/gamedev/robowalk/robowalk11.png',
'/media/img/gamedev/robowalk/robowalk12.png',
'/media/img/gamedev/robowalk/robowalk13.png',
'/media/img/gamedev/robowalk/robowalk14.png',
'/media/img/gamedev/robowalk/robowalk15.png',
'/media/img/gamedev/robowalk/robowalk16.png',
'/media/img/gamedev/robowalk/robowalk17.png',
'/media/img/gamedev/robowalk/robowalk18.png'
];
var frames = [];
var onImageLoad = function(){
console.log("IMAGE!!!");
};
var setup = function() {
body = document.getElementById('body');
canvas = document.createElement('canvas');
ctx = canvas.getContext('2d');
canvas.width = 100;
canvas.height = 100;
body.appendChild(canvas);
for(var i = 0; i < assetes.length; i++){
frames.push(new Image());
frames[i].src = asset[i];
frames[i].onload = onImageLoad;
}
setInterval(animate, frameRate);
};
var animate = function(){
context.clearRect(0,0,canvas.width, canvas.height);
frame = (frame + 1) % frames.length;
};
setup();
onload image
var canvas = null;
var context = null;
setup = function(){
canvas = document.getElementById("my_canvas");
context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// var img = document.getElementById("scream");
// ctx.drawImage(img,10,10);
img = new Image();
img.onload = onImageLoad;
img.src = "ralphyrobot.png";
};
onImageLoad = function(){
console.log("IMAGE!!");
};
onImageLoad
var onImageLoad = function(){
console.log("IMAGE!!!");
context.drawImage(img,192,192)
};
Strong password
at least n characters
combination of upper- and lower-case characters
one or more digits
not related to other user data (name, address, username, …)
not a dictionary word
<script type="text/javascript">
function checkForm(form)
{
if(form.username.value == ""){
alert("Error: Username cannot be blank!");
form.username.focus();
return false;
}
re = /^\w+$/;
if(!re.test(form.username.value)){
alert("Error: Username must only letters, numbers and undersocres!");
form.username.focus();
return false;
}
if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value){
if(form.pwd1.value.length < 6){
alert("Error: Password must contain at least six characters!");
form.pwd1.focus();
return false;
}
if(form.pwd1.value == form.username.value){
alert("Error: Password must be different from Username!");
form.pwd1.focus();
return false;
}
re = /[0-9]/;
if(!re.test(form.pwd1.value)){
alert("Error: password must contain at least one number(0-9)!");
form.pwd1.focus();
return false;
}
re = /[a-z]/;
if(!re.test(form.pwd1.value)){
alert("Error: password must contain at least one lowercase letter(a-z"!);
form.pwd1.focus();
return false;
}
re = /[A-Z]/;
if(!re.test(form.pwd1.value)){
alert("Error: password must contain at least one uppercase letter(A-Z");
form.pwd1.focus();
return false;
}
} else {
alert("Error: Please check that you've entered and confirmed your password!");
form.pwd1.focus();
return false;
}
alert("You entered a valid password: " + form.pwd1.value);
return true;
}
</script>
<form ... onsubmit="return checkForm(this);">
<p>Username: <input type="text" name="username"></p>
<p>Password: <input type="password" name="pwd1"></p>
<p>Confirm Password: <input type="password" name="pwd2"></p>
<p><input type="submit"></p>
</form>
Event holder
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quiz - Placeholder</title>
</head>
<body>
<form action="#">
<label for="event-name">
<span>Enter the name of your event:</span>
<input type="text" id="event-name" placeholder="Event Name">
</label>
</form>
</body>
</html>
autocomplete
The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quiz - Autocomplete</title>
</head>
<body>
<form action="#">
<label for="email">
<span>Email:</span>
<input type="email" id="email" placeholder="example@gmail.com" autocomplete="email">
</label>
</form>
</body>
</html>
contact-form
Check input type with mozilla.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
<form class="date-and-time-picker"> <label for="date"> <span>what day do you want to leave?</span> <input id="date" type="date"> </label> <label for="time"> <span>What time do you want to leave?</span> <input id="time" type="date-time"> </label> </form>
data list
<input list="nano"> <datalist id="nano"> <option value="Android"></option> <option value="Data Analyst"></option> <option value="Front End"></option> <option value="Full Stack"></option> <option value="Intro to Programming"></option> <option value="iOS"></option> <option value="Tech Entrepreneur"></option> </datalist>
Another datalist
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quiz - Datalists</title>
</head>
<body>
<p>What kind of event are you hosting?</p>
<input list="event">
<datalist id="event">
<option>Party</option>
<option>Meeting</option>
<option>Conference Talk</option>
<option>Sports Game</option>
</datalist>
</body>
</html>
<form> <label for="use-billing"> <span>Same as billing address</span> </label> <input type="checkbox" id="use-billing"> <br> <label for="tel-number"> <span>Telephone Number</span> <input type="tel" id="tel-number"> </label> </form>
Interconnection
application layer: http, smtp
transport layer: tcp, udp
network layer: IP
link layer: ethernet
physical layer: sonet
mobile network
<script>
if (navigator.onLine)
alert("I'm online! Whoo-hoo");
</script>
check manifest file.
localStorage.setItem(‘foo’, ‘bar’);
Camera and Audio Input
<input type="file" accept="image/*;capture=camera"> <input type="file" accept="image/*;capture=camcorder"> <input type="file" accept="image/*;capture=microphone">
problems with file input capture
-only works on mobile
-file open button is unstylable
-different app can break the flow
navigator.getUserMedia(constraints, successCallback, errorCallback);
function openCameraPane(callback, fullscreen) {
if (fullscreen)
document.body.webkitRequestFullscreen();
_myVideoCallback = callback;
var constraints = {video: true};
navigator.getUserMedia(constraints,successCallback,errorCallback);
}
function successCallback(stream) {
var video = createVideoUserInterface();
video.src = window.URL.createObjectURL(stream);
}
function snapshot(ev) {
var video = document.querySelector('.camera-video');
var canvas = document.querySelector('.camera-picture');
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0);
}
MediaStreamTrack.getSources(gotSources); <element>.requestFullscreen();
html5 geolocation API
maps, augmented reality, geocaching, nearby features
navigator.geolocation.getCurrentPosition(
function(position){
do_something(
position.coords.latitude,
position.coords.longitude )
});
Vibration API
navigator.vibrate(1000)
viewport and media query
<meta name="viewport" content="width=device-width">
start this tag.
<meta name="viewport" content="width=device-width,initial-scale=1">
1vmin = 1vm or 1vh, whichever is smallest
1vmax = 1vm or 1vh, whichever is largest
available media query expressions
width, height, device-width, device-height, orientation, aspect-ratio,
device-aspect-ratio, grid, color, color-index, monochrome, resolution, scan
.menu-items-grid {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
padding: 0 1%
}
@media (orientation:portrait){
.menu-items-grid {
flex-direction: column;
}
}
window.devicePixelRatio
@media (min-pixel-ratio:2){
.pretteybackground {
background: url('images/hires_bkg.png');
}
}
cellular radio lifecycle
Idle -> active -> short sleep -> long sleep
-lifecycle of an HTTP request
DNS lookup -> socket connect -> HTTP request -> Data download
avoid redirect
minimize or eliminate render-blocking resources (stylesheets, fonts, unknown-size, image)
animation framework
settimeout, setInterval -> requestAnimationFrame
touch UI
hover does not rely on
use large hit target
do not disable mouse support
touch events
->touchstart, touchmove, touchend, touch cancel
Input
html5 has tel input type.
<input type="tel">
<label> <input type="checkbox"> "Do you love lemurs?" </label>
interface
public interface Drawable
{
void draw();
}
public class House implements Drawable
{
public void draw(){...}
}
for (Drawable d : elements) { d.draw();}
public interface Moveable
{
void move(int seconds);
}
public class Car implements Drawable, Moveable