ハイパーテキストというのは、クリックすると他のところにジャンプするテキストのことです。HTMLは、リンクを使ってインターネット上のさまざまな情報をつないでいくためのものなのです。
スタイル2を利用します。
スタイル2を利用します。
リスト1-17
Hello!
Hello!
テキストの
一部分だけ
に
別のスタイルを適用します。
リスト1-18
Hello!
テキストの一部分だけ に
別のスタイルを適用します。
リスト1-19
Hello!
Hello!
スタイルを利用します。
リスト1-20
Hello!
Hello!
段落に余白を設定します。
段落に余白を設定します。
段落に余白を設定します。
リスト1-21
Hello!
Hello!
段落の位置と大きさを設定します。
段落の位置と大きさを設定します。
段落の位置と大きさを設定します。
リスト1-22
Hello!
Hello!
段落の位置と大きさを設定します。
段落の位置と大きさを設定します。
段落の位置と大きさを設定します。
段落の位置と大きさを設定します。
リスト2-1
Hello!
Hello!
リスト2-2
Hello!
リスト2-3
Hello!
リスト2-4
Hello!
リスト2-5
Hello!
Hello!
リスト2-6
Hello!
Hello!
リスト2-7
Hello!
Hello!
リスト2-8
while (x <= end){
total += x++;
}
リスト2-9
var end = 100;
var total = 0;
for (var i = 1;i <= end;i++){
total += i;
}
document.write(end + "までの合計は、" + total);
リスト2-10
Hello!
リスト2-11
Hello!
リスト2-12
Hello!
Hello!
リスト2-13
Hello!
Hello!
リスト2-14
Hello!
Hello!
リスト2-15
var syohi_zei = new Object();
syohi_zei.tax = 8;
syohi_zei.price = 0;
syohi_zei.kingaku = function(){
document.write('
金額： '
+ syohi_zei.price + '円
');
}
syohi_zei.zeikomi = function(){
var n = syohi_zei.price * (100 + syohi_zei.tax) / 100;
document.write('
税込み価格： '
+ Math.floor(n) + '円
');
}
syohi_zei.zeinuki = function(){
var n = syohi_zei.price / ((100 + syohi_zei.tax) / 100);
document.write('
税抜き価格： '
+ Math.floor(n) + '円
');
}
リスト2-16
syohi_zei.price = 12800;
syohi_zei.kingaku();
syohi_zei.zeikomi();
syohi_zei.zeinuki();
リスト3-1
Hello!
Hello!
this is message.
リスト3-2
Hello!
Hello!
this is message.
リスト3-3
Hello!
Hello!
ボタンをクリックして下さい。
Click
リスト3-4
Hello!
Hello!
あなたの名前は？
Click
リスト3-5
Hello!
Hello!
あなたの名前は？
成人
女性 男性
Click
リスト3-6
Hello!
Hello!
選択してください。
iPhone
Android
WindowsPhone
ガラケー
Windows
Mac OS X
Linux
Chorme OS
Other...
Click
リスト3-7
Hello!
Hello!
色を変更してみよう
Click
リスト3-8
Hello!
Hello!
フォントサイズを変更してみよう
Click
リスト3-9
Hello!
Hello!
サイズを変更してみよう
リスト3-10
Hello!
Hello!
位置を変更してみよう
リスト3-11
Hello!
Hello!
マウスでドラッグしてみよう
リスト3-12
Hello!
Hello!
※エレメントの追加
リスト4-1
Hello!
Hello!
リスト4-2
function draw(){
var canvas = document.querySelector('#canvas');
var context = canvas.getContext('2d');
context.fillStyle = "blue";
context.fillRect (100, 100, 100, 100);
}
リスト4-3
function draw(){
var canvas = document.querySelector('#canvas');
var context = canvas.getContext('2d');
context.fillStyle = "rgba(255,0,0,0.5)";
context.fillRect (100, 100, 100, 100);
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect (50, 50, 100, 100);
}
リスト4-4
function draw(){
var canvas = document.querySelector('#canvas');
var context = canvas.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect (50, 50, 100, 100);
context.strokeStyle = "black";
context.strokeRect (100, 100, 100, 100);
context.strokeRect (50, 50, 100, 100);
}
リスト4-5
function draw(){
var canvas = document.querySelector('#canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.fillStyle = "green";
context.rect(50,50,100,100);
context.fill();
context.beginPath();
context.fillStyle = "yellow";
context.rect(100,100,100,100);
context.fill();
}
リスト4-6
function draw(){
var canvas = document.querySelector('#canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.fillStyle = "rgba(255,0,0,0.5)";
for (var i = 0; i < 10; i++){
context.beginPath();
context.arc(100 + 25 * i, 100 + 25 * i, 50, 0, Math.PI * 2, false);
context.fill();
}
context.fill();
}
リスト4-7
function draw(){
var pdata1 = [
[50,100],
[350,100],
[200,300]
];
var pdata2 = [
[50,250],
[350,250],
[200,50]
];
var canvas = document.querySelector('#canvas');
var context = canvas.getContext('2d');
context.strokeStyle = "black";
context.beginPath();
var p = pdata1[0];
context.moveTo(p[0], p[1]);
for (var i = 1; i < pdata1.length; i++){
p = pdata1[i];
context.lineTo(p[0], p[1]);
}
context.closePath();
context.fillStyle = "rgba(0,255,0,0.5)";
context.fill();
context.stroke();
context.beginPath();
var p = pdata2[0];
context.moveTo(p[0], p[1]);
for (var i = 1; i < pdata2.length; i++){
p = pdata2[i];
context.lineTo(p[0], p[1]);
}
context.closePath();
context.fillStyle = "rgba(0,0,255,0.5)";
context.fill();
context.stroke();
}
リスト4-8
function draw(){
var pdata = [
[50,100],
[100,300],
[250,-100],
[300,100]
];
var canvas = document.querySelector('#canvas');
var context = canvas.getContext('2d');
context.fillStyle = "#FF9999";
context.strokeStyle = "blue";
context.beginPath();
context.moveTo(pdata[0][0], pdata[0][1]);
context.bezierCurveTo(
pdata[1][0],pdata[1][1],pdata[2][0],
pdata[2][1],pdata[3][0],pdata[3][1]);
context.stroke();
}
リスト4-9
function draw(){
var canvas = document.querySelector('#canvas');
var context = canvas.getContext('2d');
context.fillStyle = 'rgb(255,200,200)';
context.fillRect(0, 0, 500, 400);
var img = new Image();
img.src = "character.png";
context.drawImage(img,50,50);
}
リスト4-10
function draw(){
var canvas = document.querySelector('#canvas');
var context = canvas.getContext('2d');
context.fillStyle = 'rgb(255,200,200)';
context.fillRect(0, 0, 500, 400);
var img = new Image();
img.src = "character.png";
img.onload = function() {
context.drawImage(img,50,50);
}
}
リスト4-11
var canvas;
var img, bkimg;
// 初期化の処理
function initial(){
canvas = document.querySelector('#canvas');
canvas.onclick = draw;
img = new Image();
img.src = "character.png";
bkimg = new Image();
bkimg.src = "background.png";
bkimg.onload = function(){
drawBackground();
}
}
// クリックした時の処理
function draw(event){
drawBackground();
drawImage(event);
}
// 背景の描画
function drawBackground(){
var context = canvas.getContext('2d');
context.clearRect(0, 0, 500, 400);
context.drawImage(bkimg, 0, 0, 500, 400);
}
// イメージの描画
function drawImage(event){
var context = canvas.getContext('2d');
var x = event.clientX - canvas.offsetLeft;
var y = event.clientY - canvas.offsetTop;
context.drawImage(img,x - img.width / 2,y - img.height / 2);
}
リスト4-12
var canvas;
var img, bkimg;
var x = 200;
var y = 200;
// 初期化の処理
function initial(){
canvas = document.querySelector('#canvas');
canvas.onkeydown = draw;
img = new Image();
img.src = "character.png";
bkimg = new Image();
bkimg.src = "background.png";
bkimg.onload = function(){
drawBackground();
}
}
// キーを押した時の処理
function draw(event){
drawBackground();
drawImage(event);
}
// 背景の描画
function drawBackground(){
var context = canvas.getContext('2d');
context.clearRect(0, 0, 500, 400);
context.drawImage(bkimg, 0, 0, 500, 400);
}
// イメージの描画
function drawImage(event){
var context = canvas.getContext('2d');
switch(event.code){
case 'ArrowLeft':
x -= 10;
break;
case 'ArrowRight':
x += 10;
break;
case 'ArrowUp':
y -= 10;
break;
case 'ArrowDown':
y += 10;
break;
}
context.drawImage(img,x, y);
}
リスト4-13
var canvas;
var img, bkimg;
var x = 0;
var timer;
function initial(){
canvas = document.querySelector('#canvas');
img = new Image();
img.src = "character.png";
bkimg = new Image();
bkimg.src = "background.png";
bkimg.onload = function(){
timer = setInterval(draw, 50);
}
}
function draw(){
drawBackground();
drawImage();
}
function drawBackground(){
var context = canvas.getContext('2d');
context.clearRect(0, 0, 500, 400);
context.drawImage(bkimg, 0, 0, 500, 400);
}
function drawImage(){
var context = canvas.getContext('2d');
x += 5;
context.drawImage(img,x, 100);
if (x > 400){ clearInterval(timer); }
}
リスト4-14
var canvas;
var img, bkimg;
var x = 100;
var y = 100;
var dx = 5;
var dy = 5;
function initial(){
canvas = document.querySelector('#canvas');
img = new Image();
img.src = "character.png";
bkimg = new Image();
bkimg.src = "background.png";
bkimg.onload = function(){
timer = setInterval(draw, 50);
}
}
function draw(){
drawBackground();
drawImage();
}
function drawBackground(){
var context = canvas.getContext('2d');
context.clearRect(0, 0, 500, 400);
context.drawImage(bkimg, 0, 0, 500, 400);
}
function drawImage(){
var context = canvas.getContext('2d');
x += dx;
y += dy;
if (x < 0){ dx *= -1; }
if (y < 0){ dy *= -1; }
if (x + img.width > 500){ dx *= -1; }
if (y + img.height > 400){ dy *= -1; }
context.drawImage(img,x, y);
}
リスト4-15
var canvas;
var img, bkimg;
var anim;
var timer;
// 初期化処理
function initial(){
canvas = document.querySelector('#canvas');
img = new Image();
img.src = "character.png";
bkimg = new Image();
bkimg.src = "background.png";
bkimg.onload = function(){
anim = new Anim();
canvas.onclick = makeCharacter;
timer = setInterval(doTimer, 50);
}
}
// クリックしてキャラクタを追加
function makeCharacter(event){
anim.click(event);
}
// タイマーで実行する処理
function doTimer(){
anim.draw();
}
// アニメーションを管理するオブジェクト
function Anim(){
this.imgs = [];
// クリックした地点にAnimImageを作成
this.click = function(event){
var x = event.clientX - canvas.offsetLeft - img.width / 2;
var y = event.clientY - canvas.offsetTop - img.height / 2;
this.imgs.push(new AnimImage(img, x, y));
}
// イメージの描画
this.draw = function(){
this.drawBackground();
for (var n in this.imgs){
this.imgs[n].drawImage();
}
}
// 背景の描画
this.drawBackground = function(){
var context = canvas.getContext('2d');
context.clearRect(0, 0, 500, 400);
context.drawImage(bkimg, 0, 0, 500, 400);
}
}
// アニメーションキャラクタのオブジェクト
function AnimImage(img, x, y) {
this.img = img;
this.x = x;
this.y = y;
this.dx = Math.floor( Math.random() * 10) + 1;
this.dy = Math.floor( Math.random() * 10) + 1;
// イメージの描画
this.drawImage = function(){
var context = canvas.getContext('2d');
this.x += this.dx;
this.y += this.dy;
if (this.x < 0){ this.dx *= -1; }
if (this.y < 0){ this.dy *= -1; }
if (this.x + this.img.width > 500){ this.dx *= -1; }
if (this.y + this.img.height > 400){ this.dy *= -1; }
context.drawImage(this.img, this.x, this.y);
}
}
リスト5-1
Hello!
Hello!
リスト5-2
リスト5-3
リスト5-4
リスト5-5
98,
'数学' => 79,
'英語' => 56,
'理科' => 83,
'社会' => 69];
$total = 0;
foreach($data as $key => $item){
echo "{$key}は、{$item}点です。
";
$total += $item;
}
echo "
合計は、{$total}点です。";
?>
リスト5-6
';
$data = getData('hanako');
printData($data);
$data = getData('taro');
printData($data);
echo '';
function getData($name){
$data = [
'taro' => ['taro@yamada','090-999-999'],
'hanako' => ['hanako@flower','080-888-888'],
'sachiko' => ['sachico@happy','070-777-777'],
'tuyano' => ['syoda@tuyano.com','060-666-666']
];
return $data[$name];
}
function printData($arr){
echo "
{$arr[0]} {$arr[1]} ";
}
?>
リスト5-7
「{$key}」のデータ";
echo'
';
$data = getData($key);
printData($data);
echo '
';
function getData($key){
$data = [
'taro' => ['taro@yamada','090-999-999'],
'hanako' => ['hanako@flower','080-888-888'],
'sachiko' => ['sachico@happy','070-777-777'],
'tuyano' => ['syoda@tuyano.com','060-666-666']
];
if (isset($data[$key])){
return $data[$key];
} else {
return ['not found','...'];
}
}
function printData($arr){
echo "
{$arr[0]} {$arr[1]} ";
}
?>
リスト5-8
Hello!
リスト5-9
Hello!
リスト5-10
リスト5-11
Hello!
Hello!
今、何時かな？
Check!
リスト5-12
function onClickBtn(){
var xhr = new XMLHttpRequest();
xhr.open('GET', '/hello.php', true);
xhr.onload = function(e) {
if (this.status == 200) {
var result = this.response;
var msg = document.querySelector('#msg');
msg.textContent = result;
}
};
xhr.send();
}
リスト5-13
Hello!
Hello!
※番号を入力ください。
Check!
リスト5-14
function onClickBtn(){
var val = document.querySelector('#number').value;
var form = new FormData();
form.append('number', val);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/hello.php', true);
xhr.onload = function(e) {
if (this.status == 200) {
var result = this.response;
var msg = document.querySelector('#msg');
msg.textContent = result;
}
};
xhr.send(form);
}
リスト5-15
= count($data)){ $n = count($data) - 1; }
$msg = $data[$n];
}
echo $msg;
?>
リスト5-16
Hello!
Hello!
リスト5-17
Hello!
ファイルの読み込みに失敗しました。 ');
$num = 0;
foreach($data as $line){
$num++;
echo "{$num} {$line}
リスト5-18
Hello!
Hello!
ファイルの読み込みに失敗しました。 ');
$num = 0;
foreach($data as $line){
$num++;
echo "{$num} {$line}
※６章のリストは、「game 1」「game 2」フォルダのファイルに記述されています。
リスト7-1
Start Game
リスト7-2
リスト1-7