ソフトウェアエンジニアの技術ブログ：Software engineer tech blog – Page 658 – 随机应变 ABCD: Always Be Coding and … : хороший

EventListening

function setup() {
	document.getElementById('canvas').addEventListener('mousemove',onMouseMove);
	document.getElementById('canvas').addEventListener('keydown',onKeyDown);
}
function onMouseMove(event) {
	var posx = event.clientX;
	var posy = event.clientY;
	console.log("(", posx, ", ", posy, ")");
}
function onKeyDown(event) {
	var keyID = event.keyID;
	console.log("ID: ", keyID);
}

json

{
	"frames": {

		"chaingun.png": {
			"frame": {
				"x": 1766,
				"y": 202,
				"w": 42,
				"h": 34
			},
			"rotated": false,
			"trimmed": true,
			"spriteSourceSize": {
				"x": 38,
				"y": 32,
				"w": 42,
				"h": 34
			},
			"sourceSize": {
				"w": 128,
				"h": 128
			}
		},
		"chaingun_impact.png": {
			"frame": {
				"x": 1162,
				"y": 322,
				"w": 38,
				"h": 34
			},
			"rotated": false,
			"trimmed": true,
			"spriteSourceSize": {
				"x": 110,
				"y": 111,
				"w": 38,
				"h": 34
			},
			"sourceSize": {
				"w": 256,
				"h": 256
			}
		},
		"chaingun_impact_0000.png": {
			"frame": {
				"x": 494,
				"y": 260,
				"w": 22,
				"h": 22
			},
			"rotated": false,
			"trimmed": true,
			"spriteSourceSize": {
				"x": 113,
				"y": 108,
				"w": 22,
				"h": 22
			},
			"sourceSize": {
				"w": 256,
				"h": 256
			}
		},
		"chaingun_impact_0001.png": {
			"frame": {
				"x": 1500,
				"y": 1904,
				"w": 34,
				"h": 30
			},
			"rotated": false,
			"trimmed": true,
			"spriteSourceSize": {
				"x": 104,
				"y": 104,
				"w": 34,
				"h": 30
			},
			"sourceSize": {
				"w": 256,
				"h": 256
			}
		},
		"chaingun_impact_0002.png": {
			"frame": {
				"x": 888,
				"y": 366,
				"w": 38,
				"h": 32
			},
			"rotated": false,
			"trimmed": true,
			"spriteSourceSize": {
				"x": 106,
				"y": 105,
				"w": 38,
				"h": 32
			},
			"sourceSize": {
				"w": 256,
				"h": 256
			}
		},
		"chaingun_impact_0003.png": {
			"frame": {
				"x": 990,
				"y": 84,
				"w": 32,
				"h": 28
			},
			"rotated": false,
			"trimmed": true,
			"spriteSourceSize": {
				"x": 113,
				"y": 109,
				"w": 32,
				"h": 28
			},
			"sourceSize": {
				"w": 256,
				"h": 256
			}
		}
	},
	"meta": {
		"app": "http://www.texturepacker.com",
		"version": "1.0",
		"image": "assets/grits_effects.png",
		"format": "RGBA8888",
		"size": {
			"w": 2048,
			"h": 2048
		},
		"scale": "1",
		"smartupdate": "$TexturePacker:SmartUpdate:a5e0b1932a348d048c58a625408c4276$"
	}
}

parseAtlasDefinition: function (atlasJSON){
	var parsed = JSON.parse(atlasJSON);

	for(var key in parsed.frames){
	var sprite = parsed.frames[key];

	var cx = -sprite.frame.w * 0.5;
	var cy = -sprite.frame.h * 0.5;

	// Define the sprite for this sheet.
	this.defSprite(key, sprite.frame.x, sprite.frame.y, sprite.frame.z)
	}
}
});

function drawSprite(spritename, posX, posY){
	
}

function __drawSpriteInternal(spt, sheet, posX, posY){
	
}

var gSpriteSheets = {};

SpriteSheetClass = Class.exnted({
	
});

function drawSprite(spritename, posX, posY){
	for(var sheetName in gSpriteSheets){
		var sheet = gSpriteSheetsd[sheetName];
		var sprite = sheet.getStats(spritename);
		if(sprite == null) continue;

		__drawSpriteInternal(sprite, sheet, posX, posY);

		return;
	}
}

set interval

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 = /&#91;0-9&#93;/;
			if(!re.test(form.pwd1.value)){
				alert("Error: password must contain at least one number(0-9)!");
				form.pwd1.focus();
				return false;
			}
			re = /&#91;a-z&#93;/;
			if(!re.test(form.pwd1.value)){
				alert("Error: password must contain at least one lowercase letter(a-z"!);
				form.pwd1.focus();
				return false;
			}
			re = /&#91;A-Z&#93;/;
			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

%e7%84%a1%e9%a1%8c

<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)