『初めてのJavaScript（第3版 ）』非公式練習問題 – 浅野直樹の学習日記で作った『初めてのJavaScript（第3版 ）』非公式練習問題の解答例です。自分で学習しながら作ったものなので不備があるかもしれません。
２章
練習問題
ex02-08-1のjsファイルを次のように書き加えます。
$(document).ready(function() {
'use strict';
paper.install(window);
paper.setup(document.getElementById('mainCanvas'));
let tool = new Tool();
tool.onMouseDown = function(event) {
let c = Shape.Circle(event.point.x, event.point.y, 80);
c.fillColor = 'blue';
let text = new PointText(event.point.x, event.point.y);
text.justification = 'center';
text.fillColor = 'yellow';
text.fontSize = 20;
text.content = 'hello world';
};
});
３章
練習問題１
次のようなjsファイルを作ります。
const date = new Date();
let message1 = "今日は" + date.getFullYear() + "年" + (date.getMonth()+1) + "月" + date.getDate() + "日です。\n"
date.setDate(date.getDate()+20);
let message2 = "20日後は" + date.getFullYear() + "年" + (date.getMonth()+1) + "月" + date.getDate() + "日です。\n"
console.log(message1, message2);
練習問題２
次のようなjsファイルを作ります。
const b4 = [
{ 名前: "ルビー", 硬度: 9 },
{ 名前: "ダイヤ", 硬度: 10 },
{ 名前: "トパーズ", 硬度: 8 },
];
b4[99] = { 名前: "象牙", 硬度: 2.5 };
let message = b4[b4.length - 1].名前 +"の硬度は" + b4[b4.length - 1].硬度 +"です。";
console.log(message);
４章
練習問題
次のように、challengeという変数を新たに作り、whileにとどまる条件を変えて、手持ち資金が0になれば再挑戦するようにします。
'use strict';
function rand(m, n) {
return m + Math.floor((n - m + 1)*Math.random());
}
function randFace() {
return ["crown", "anchor", "heart", "spade", "club", "diamond"]
[rand(0, 5)];
}
let funds = 50;
let round = 0;
let challenge = 1;
while(funds < 100) {
round++;
console.log(`第${round}ラウンド: `);
console.log(` 手持ち資金: ${funds}`);
let bets = { crown: 0, anchor: 0, heart: 0,
spade: 0, club: 0, diamond: 0 };
let totalBet = rand(1, funds);
if(totalBet === 7) {
totalBet = funds;
bets.heart = totalBet;
} else {
let remaining = totalBet;
do {
let bet = rand(1, remaining);
let face = randFace();
bets[face] = bets[face] + bet;
remaining = remaining - bet;
} while(remaining > 0)
}
funds = funds - totalBet;
console.log(` 賭け金: ${totalBet}（` +
Object.keys(bets).map(face => `${face}: ${bets[face]}`).join(', ') +
"）");
const hand = [];
for(let roll = 0; roll < 3; roll++) {
hand.push(randFace());
}
console.log(` 出目: ${hand.join(', ')}`);
let winnings = 0;
for(let die=0; die < hand.length; die++) { let face = hand[die]; if(bets[face] > 0) winnings = winnings + bets[face];
}
funds = funds + winnings;
console.log(` 払戻金: ${winnings}`);
if (funds <= 0) {
funds = 50;
round = 0;
challenge++;
}
}
console.log(` 残金: ${funds}`);
console.log(challenge + "回目の挑戦で意気揚々と船に戻りました。");
５章
練習問題
例えば以下のようにします。
const nums = [ 3, 5, 15, 7, 5 ];
let n, i=0, j=0;
while(i<nums.length && (n = nums[i++]) % 2 ) {
console.log(`奇数を発見：${n}`);
j++;
}
if (i !== j) {
console.log(`偶数を発見：${n}`);
}
console.log(`未チェックの数字の個数：${nums.length-i}`);
６章
練習問題
例えば次のようなjsファイルを作ります。
const asano = { 名前: "浅野" };
function update(birthYear, occupation, address) {
this.誕生年 = birthYear;
this.職業 = occupation;
this.居住地 = address;
}
console.log(asano);
update.call(asano, 1982, "塾講師", "京都府");
update.apply(asano, [1982, "塾講師", "京都府"]); // この行のapplyか上の行のcallのどちらか１つでよい。
console.log(asano);
const updateAsano1982 = update.bind(asano, 1982);
updateAsano1982("プログラマー", "東京都");
console.log(asano);
７章
練習問題
オブジェクトのプロパティを書き換えた場合にはスコープから外れても値が元に戻りません（6.3を参照）。
function update(birthYear, occupation, address) {
this.誕生年 = birthYear;
this.職業 = occupation;
this.居住地 = address;
}
{ /* 外側のブロックの始まり */
let asano = { 名前: "浅野", 誕生年: 1982, 職業: "塾講師", 居住地: "京都府"};
console.log(asano);
{ /* 内側のブロックの始まり */
update.call(asano, 1982, "塾講師", "東京都");
console.log(asano);
} /* 内側のブロックの終わり */
console.log(asano);
} /* 外側のブロックの終わり */
console.log(typeof asano);
８章
練習問題１
以下のようにします。
let arr = [{ name: "Suzanne" }, { name: "Jim" },
{ name: "Trevor" }, { name: "Amanda" }];
arr.sort((a, b) => a.name > b.name); // nameでソート
arr.sort((a, b) => a.name.length > b.name.length); //文字数でソート
console.log(arr);
練習問題２
以下のようにします。
function 記号表現に変換する(カード) {
const マーク名_絵文字
= { 'ハート': '♡', 'クローバー': '♧', 'ダイア': '♢', 'スペード': '♤' };
const 数字からAJQK = { 1: 'A', 11: 'J', 12: 'Q', 13: 'K' };
for(let i=2; i<=10; i++) 数字からAJQK[i] = i;
return マーク名_絵文字[カード.マーク]+数字からAJQK[カード.数字];
}
const カードの束 = [];
for(let マーク of ['ハート', 'クローバー', 'ダイア', 'スペード']) // 全カードを生成
for(let 数字=1; 数字<=13; 数字++) カードの束.push({ マーク, 数字});
let 選択されたカード_記号表現
= カードの束.filter(カード => カード.マーク === 'スペード' && (カード.数字 >= 10 || カード.数字 === 1)).map(記号表現に変換する);
console.log(選択されたカード_記号表現);
練習問題３
次のようにします。
const words = ["Beachball", "Rodeo", "Angel",
"Aardvark", "Xylophone", "November", "Chocolate",
"Papaya", "Uniform", "Joker", "Clover", "Bali"];
const longWords = words.filter(word => word.length > 6);
let result = longWords.join(' ');
console.log(result);
const 単語リスト
= ["ビーチボール", "ルービックキューブ", "ブタペスト", "トロッコ",
"コンゴ", "ゴースト", "トーラス", "スマート", "トンガ",
"ガラパゴス", "ストリート", "トーマス", "ストレッチ",
"チベット", "トキ", "キツツキ", "キリン"];
const 長い単語 = 単語リスト.filter(単語 => 単語.length >= 5);
let 結果 = 長い単語.join(' ');
console.log(結果);
９章
練習問題
例えば以下のようにします。
class Vehicle {
constructor() {
this.passengers = [];
console.log("Vehicleが生成された");
}
addPassenger(p) {
this.passengers.push(p);
console.log(`${p}が${this.constructor.name}に乗り込み、今${this.passengers.length}人乗っています。`);
}
}
class Car extends Vehicle {
constructor() {
super();
this.capacity = 5;
console.log("Carが生成された");
}
addPassenger(p) {
Vehicle.prototype.addPassenger.call(this, p);
if (this.capacity - this.passengers.length < 0) {
console.log('定員オーバーです');
return;
}
console.log(`あと${this.capacity - this.passengers.length}人です`);
}
}
const v = new Vehicle();
v.addPassenger("太郎");
v.addPassenger("花子");
const c = new Car();
c.addPassenger("景子");
c.addPassenger("ミドリ");
c.addPassenger("一郎");
c.addPassenger("二郎");
c.addPassenger("三郎");
c.addPassenger("四郎");
c.addPassenger("五郎");
１０章
練習問題
次のようにします。
const u1 = { name: '和洋' };
const u2 = { name: '花子' };
const u3 = { name: '涼子' };
const u4 = { name: '哲人' };
const userRoles = new Map();
const rolesU1 = new Set();
rolesU1.add("ユーザー");
userRoles.set(u1, rolesU1);
const rolesU2 = new Set();
rolesU2.add("管理者");
userRoles.set(u2, rolesU2);
const rolesU3 = new Set();
rolesU3.add("ユーザー");
rolesU3.add("管理者");
userRoles.set(u3, rolesU3);
const rolesU4 = new Set();
userRoles.set(u4, rolesU4);
for (let [u, r] of userRoles.entries()) {
let allRoles = [];
for (let value of r.values()) {
allRoles.push(value);
}
console.log(`${u.name}: ${allRoles}`);
}
１１章
練習問題
次のようにします。
const email = "jane@doe.com;
function validateEmail(email) {
return email.match(/@/) ?
email :
new Error(`無効なメールアドレスです：${email}`);
}
try {
const validatedEmail = validateEmail(email);
console.log(validatedEmail);
if(validatedEmail instanceof Error) {
console.error(validatedEmail.message);
} else {
console.log(`正しい形式のアドレス：${validatedEmail}`);
}
} catch(err) {
console.error(`エラー：${err.message}`);
} finally {
console.log("この行はいつも実行される");
}
１２章
練習問題
次のようにします。
function* interrogate() {
const name = yield "お名前は？";
if (!name) {
return "お名前がないので終了します。";
}
const color = yield "お好きな色は何ですか？";
return `${name}さんの好きな色は${color}だそうですよ。`;
}
const it = interrogate();
console.log(it.next());
console.log(it.next(''));
console.log(it.next('緑'));
console.log(it.next());
１３章
練習問題１
これは色がとばされます。
setInterval(function() {
document.querySelector('.rainbow')
.style['background-color'] = getNextRainbowColor();
}, 500);
setInterval(function() {
getNextRainbowColor();
}, 800);
const getNextRainbowColor = (function() {
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
let colorIndex = -1;
return function() {
if(++colorIndex >= colors.length) colorIndex = 0;
return colors[colorIndex];
};
})();
これは色がとばされません。
const rainbowIterator = getRainbowIterator();
setInterval(function() {
document.querySelector('.rainbow')
.style['background-color'] = rainbowIterator.next().value;
}, 500);
setInterval(function() {
getRainbowIterator();
}, 800);
function getRainbowIterator() {
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
let colorIndex = -1;
return {
next() {
if(++colorIndex >= colors.length) colorIndex = 0;
console.log("in iterator: "+colors[colorIndex])
return { value: colors[colorIndex], done: false };
}
};
}
練習問題２
例えば次のようにします。
function fibonacci(m, n) {
console.log(n);
if (n > 10000) {
return;
}
o = n;
p = m + n;
fibonacci(o, p);
}
fibonacci(1, 1);
１３章
練習問題
例えば次のようにします。
function countdown(seconds) {
const timeoutIds = [];
for(let i=seconds; i>=0; i--) {
timeoutIds.push(setTimeout(function() {
if(i===13) {
timeoutIds.forEach(clearTimeout);
const err = new Error(`${i}という数は不吉過ぎます`);
console.error(err);
return;
}
if(i>0) console.log(i + '...');
else {
console.log("GO!");
launch(10000);
}
}, (seconds-i)*1000))
}
}
function launch(period) {
const timeoutId = setTimeout(function() {
const err = new Error('時間切れです。');
console.error(err);
}, 4000);
if(Math.random() < 0.5)
return;
console.log("発射!");
setTimeout(function() {
console.log("周回軌道に乗った！");
clearTimeout(timeoutId);
}, 2*1000);
}
countdown(3);
１５章
練習問題
moment.jsを使って次のようにします。
const d = moment.tz([2018, 1, 21, 15, 00], 'Europe/London');
console.log(d.format("YYYY年M月D日HH:mm") + "にロンドンを出発しました。")
d.add(13, 'hours');
d.tz('Asia/Tokyo');
console.log(d.format("YYYY年M月D日HH:mm") + "に東京に到着しました。")
１６章
練習問題
次のようにします。配列は0からスタートすることに注意してください。htmlファイルで<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>としてNumeral.jsを読み込んでください。
const revenues = [{"北海道":2434886692}, {"青森県":694217643}, {"岩手県":1129941686}, {"宮城県":1383490525}, {"秋田県":605089076}, {"山形県":580851300}, {"福島県":2096640231}, {"茨城県":1087054495}, {"栃木県":763338596}, {"群馬県":736096433}, {"埼玉県":1722075796}, {"千葉県":1659525591}, {"東京都":7122485322}, {"神奈川県":2032743502}, {"新潟県":1055947285}, {"富山県":508721490}, {"石川県":567888708}, {"福井県":450596001}, {"山梨県":465327187}, {"長野県":819099327}, {"岐阜県":773302893}, {"静岡県":1152621919}, {"愛知県":2263393575}, {"三重県":700154974}, {"滋賀県":509495460}, {"京都府":899170238}, {"大阪府":2776964207}, {"兵庫県":1962884485}, {"奈良県":493578569}, {"和歌山県":541231559}, {"鳥取県":358191520}, {"島根県":505631628}, {"岡山県":685819845}, {"広島県":923347710}, {"山口県":640430917}, {"徳島県":478647031}, {"香川県":448601297}, {"愛媛県":622066841}, {"高知県":453349565}, {"福岡県":1693270092}, {"佐賀県":435430115}, {"長崎県":695693042}, {"熊本県":1018938275}, {"大分県":572602476}, {"宮崎県":565437227}, {"鹿児島県":789070662}, {"沖縄県":747747470}]
let rand = 1 + Math.floor(47*Math.random());
for (key in revenues[rand-1]) {
console.log(`2016年の${key}の歳入は${numeral(revenues[rand-1][key]).format('0,0')}円です。`);
}
１７章
練習問題
次のようにします。
const text = "Visit oreilly.com today!";
const link = text.replace(/([a-z0-9]+(?:\.com|\.org|\.edu))/ig, '<a href="$1">$1</a>');
console.log(link);
１８章
練習問題
例えば次のようにします。
document.querySelector('button').addEventListener('click', ChangeAndAddText);
function ChangeAndAddText(evt) {
evt.preventDefault();
const text1 = document.getElementById("text1").value;
const originalp = document.querySelector('p');
originalp.textContent = text1;
originalp.classList.add('red');
const text2 = document.getElementById("text2").value;
const p = document.createElement('p');
p.textContent = text2;
document.querySelector('body').appendChild(p);
}
１９章
練習問題
例えば次のようにします。
$(function() {
$('button').click(ChangeAndAddText);
function ChangeAndAddText(evt) {
evt.preventDefault();
const text1 = $('#text1').val();
$('p').eq(0).text(text1).addClass('red');
const text2 = $('#text2').val();
const p = $('‘); p.text(text2); $(‘body’).append(p); } })
２０章
練習問題
例えば次のようにします。
const fs = require('fs');
const path = require('path');
fs.readFile(path.join(__dirname, 'hello.txt'),
{ encoding: 'utf8' }, function(err, data) {
if(err) return console.error('エラー：ファイルから読み込めません。');
message = data.replace(/Node/g, 'Node.js');
fs.writeFile(path.join(__dirname, 'hello2.txt'),
message + '文字列を置換しました。', function(err) {
if(err) return console.log('エラー：ファイルに書き込めません。');
});
});
２１章
練習問題
例えば次のようにします。
const COLOR = Symbol();
class Triangle {
constructor(a, b, c) {
this.a = a;
this.b = b;
this.c = c;
}
get perimeter() {
return this.a + this.b + this.c;
}
get area() {
const a = this.a;
const b = this.b;
const c = this.c;
return Math.sqrt((a+b+c)*(-a+b+c)*(a-b+c)*(a+b-c))/4;
}
set color(value) {
this[COLOR] = value;
}
get color() {
return this[COLOR];
}
}
const t = new Triangle(3, 4, 5);
t.color = 'red';
console.log(`外周の長さ: ${t.perimeter}`);
console.log(`面積: ${t.area}`);
console.log(`色: ${t.color}`);
