演習の回答
徐々に増やしていったので問題なかったが、初めからやろうと思うと回答をまとめておくのはよくなかったかも。
テキスト : HTML
code:ex1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>exercise1</title>
</head>
<body>
<h1>十二支</h1>
<ol>
<li>子</li>
<li>丑</li>
<li>寅</li>
<li>卯</li>
<li>辰</li>
<li>巳</li>
<li>午</li>
<li>未</li>
<li>申</li>
<li>酉</li>
<li>戌</li>
<li>亥</li>
</ol>
</body>
</html>
code:ex2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>exercise2</title>
</head>
<body>
<h1>教科と点数</h1>
<table border="1">
<tr>
<th>教科</th>
<th>点数</th>
</tr>
<tr>
<td>国語</td>
<td>90</td>
</tr>
<tr>
<td>数学</td>
<td>80</td>
</tr>
<tr>
<td>理科</td>
<td>65</td>
</tr>
<tr>
<td>社会</td>
<td>80</td>
</tr>
<tr>
<td>英語</td>
<td>75</td>
</tr>
</table>
</body>
</html>
テキスト : CSS
code:ex.css
.blue-dot-border {
border-bottom: 1px #0000ff dotted;
}
.center1 {
/* こちらに書いても太字にはできる */
/* font-weight: bold; */
text-align: center;
}
.center2 {
font-weight: bold;
}
.flex1 {
display: flex;
justify-content: flex-end;
}
.flex2 {
background-color: red;
width: 100px;
}
Linuxコマンド(Gitを使う前の前準備)
code:console
// 環境によって異なる
$ cd C:/Users/ユーザー名/OneDrive/デスクトップ/study/linux
$ mkdir exercise
$ cd exercise
$ echo "dog" > pet.txt
$ mv pet.txt animal.txt
// 「animal.txt」に「cat」「rabbit」を追加する。
$ vim animal.txt
// or
$ echo "cat" >> animal.txt
$ echo "rabbit" >> animal.txt
$ cp animal.txt choices.txt
$ less choices.txt
// 処理の中で「dd」を使う
$ vim choices.txt
$ history
テキスト : WebブラウザにおけるJavaScript
code:js-ex1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js exercise 1</title>
<script>
const array = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
console.log(array4);
let total = 0;
for(let i = 0; i < array.length; i++) {
total = total + arrayi;
}
console.log("合計は" + total + "です`。");
let totalEven = 0;
for(let i = 0; i < array.length; i++) {
if(arrayi % 2 = == 0) {
totalEven = totalEven + arrayi;
}
}
console.log("合計は" + totalEven + "です`。");
</script>
</head>
<body>
<h3>js exercise 1</h3>
</body>
</html>
テキスト：JavaScriptのDOM操作
code:ex-dom.html
// scriptタグ内のみを記載
<script>
function btn1() {
document.getElementById('morning-list').setAttribute('class','blue-text');
}
function btn2() {
// 赤文字に変更する単元の順番を保持
const order = 1, 2, 8;
const liElements = document.getElementById('afternoon-list').children;
for(let i = 0 ; i < order.length; i++ ){
liElements[orderi].setAttribute('class', 'red-text');
}
}
function btn3() {
const newElement = document.createElement('a');
newElement.innerText = '公式サイト'
newElement.setAttribute('href', 'https://www.jitec.ipa.go.jp/');
newElement.setAttribute('target', '_brank');
newElement.setAttribute('rel', 'noopener noreferrer');
document.getElementById('title').after(newElement);
}
</script>
画面入力とJavaScriptのDOM操作
穴埋め
code:catlog.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>catalog</title>
<script>
function add() {
// 商品名の取得
const goodText = document.getElementById('good').value;
// 値段の取得
const price = document.getElementById('price').value;
// ラジオボタンのノード全体を取得
const necessity = document.getElementsByName('necessity');
let checkedText;
for (let i = 0; i < necessity.length; i++) {
if(necessityi.checked) {
checkedText = necessityi.value;
}
}
// 追加分の要素、tableの一行を作成
const trElement = document.createElement('tr');
const tdElement1 = document.createElement('td');
tdElement1.innerText = goodText;
const tdElement2 = document.createElement('td');
tdElement2.innerText = price;
const tdElement3 = document.createElement('td');
tdElement3.innerText = checkedText;
trElement.appendChild(tdElement1);
trElement.appendChild(tdElement2);
trElement.appendChild(tdElement3);
// 追加する位置の親のノードを探索
const catalog = document.getElementById('catalog');
catalog.appendChild(trElement);
}
</script>
</head>
<body>
<h3>入力欄</h3>
<from>
商品名 : <input type="text" name="good" id="good"><br>
値段 : <input type="number" name="price" id="price"><br>
<input type="radio" name="necessity" value="○"> 必要
<input type="radio" name="necessity" value="△"> 保留
<input type="radio" name="necessity" value="×"> 不必要 <br>
<input type="button" value="追加" onclick="add()">
</from>
<br>
<br>
<table border="1" id="catalog">
<tr>
<th>商品名</th>
<th>値段</th>
<th>必要性</th>
</tr>
</table>
</body>
</html>
演習
code:test.html
// script部分のみ
<script>
function scoring() {
const mathAns = 12, 19, 231, 16, 56;
let correctNum1 = 0;
for (let i = 0; i < mathAns.length; i++) {
const name = "q" + (i + 1);
const ansNode = document.getElementsByName(name)0;
if (mathAnsi === parseInt(ansNode.value)) {
correctNum1++;
} else {
ansNode.setAttribute("class", "boder-red");
}
}
const mathScore = correctNum1 / mathAns.length * 100;
const authorAns = '中島敦', '芥川龍之介', '江戸川乱歩', '太宰治', '夏目漱石';
let correctNum2 = 0;
for (let j = 0; j < authorAns.length; j++) {
const name = "q" + (j + 6);
const ansRadioNodes = document.getElementsByName(name);
let ansAutor = "";
for (let k = 0; k < ansRadioNodes.length; k++) {
if(ansRadioNodesk.checked) {
ansAutor = ansRadioNodesk.value;
break;
}
}
if(authorAnsj === ansAutor) {
correctNum2++;
} else {
document.getElementById(name).setAttribute("class", "boder-red");
}
}
const authorScore = correctNum2 / authorAns.length * 100;
// 追加分の要素、tableの一行を作成
const trElement = document.createElement("tr");
const tdElement1 = document.createElement("td");
tdElement1.innerText = mathScore + "点";
const tdElement2 = document.createElement("td");
tdElement2.innerText = authorScore + "点";
trElement.appendChild(tdElement1);
trElement.appendChild(tdElement2);
// 追加する位置の親のノードを探索
const result = document.getElementById('result');
result.appendChild(trElement);
}
</script>
code:test.css
.boder-red {
border: 2px #ff0000 solid
}
SQL文の演習
1）
A) 1
B) 0..n
C) 0..n
D) 1
E) 1
F) 1..n
G) 0..n
H) 1
code:ex.sql
-- 5)
select * from receipt;
-- 6)
select * from location;
-- 7)
select * from receipt_detail;
-- 8)
select * from item;
-- 9)
select * from item order by price desc;
-- 10)
select count(*) from receipt where date >= '2021-11-01 00:00:00' and date < '2021-12-01 00:00:00';
-- 少し遅いようだが、以下でも題意は満たす。
select * from receipt where date like '2021-11%';
-- 11)
select * from emp where name like '____';
-- 12)
select * from item where name like '%うどん%';
-- 13)
select * from item where price > (select avg(price) from item);
-- 14)
select
item.name, item.price
from receipt_detail left outer join item
on receipt_detail.itemid = item.id
where receiptno = 1056;
-- 15)
select
receiptno as '伝票番号', sum(item.price * receipt_detail.count) as 'お会計'
from receipt_detail left outer join item
on receipt_detail.itemid = item.id
where receiptno = 1055;
-- 16)
select
receiptno as '伝票番号', sum(item.price * receipt_detail.count) as 'お会計'
from receipt_detail left outer join item
on receipt_detail.itemid = item.id
group by receipt_detail.receiptno;
-- 17)
select
receipt_detail.receiptno as '伝票番号',
receipt.date as '日付',
sum(item.price * receipt_detail.count) as 'お会計'
from receipt_detail
left outer join item
on receipt_detail.itemid = item.id
left outer join receipt
on receipt_detail.receiptno = receipt.no
group by receipt_detail.receiptno;
-- 18)
select
sum(item.price * receipt_detail.count) as '売上'
from receipt_detail
left outer join item
on receipt_detail.itemid = item.id
left outer join receipt
on receipt_detail.receiptno = receipt.no
where receipt.date >= '2021-11-01 00:00:00' and receipt.date < '2021-12-01 00:00:00';
-- 19)
select
DATE_FORMAT(receipt.date, '%Y-%m') as '月',
sum(item.price * receipt_detail.count) as '売上'
from receipt_detail
left outer join item
on receipt_detail.itemid = item.id
left outer join receipt
on receipt_detail.receiptno = receipt.no
group by DATE_FORMAT(receipt.date, '%Y%m');
テキスト：JavaScriptでMySQL操作（お試し）
queryの部分
code:connect-mysql-exe.js
// (1)
// queryの実行
connection.query(
'select * from item',
(err, results, filelds) => {
let total = 0;
for(let i = 0; i < results.length; i++){
total += resultsi'price';
}
console.log('合計 : ' + total);
});
// (2)
// queryの実行
connection.query(
'select * from emp',
(err, results, filelds) => {
for(let i = 0; i < results.length; i++){
const ename = resultsi'name';
if(ename.startsWith('山')) {
console.log(ename);
}
}
});
テキスト：JavaScriptでオブジェクト指向
演習1
code:device_exe1.js
class Device {
constructor(){}
name;
energy;
confirm() {
console.log(名前 : ${this.name}, 現在のエネルギー : ${this.energy});
}
}
const device = new Device();
device.name = 'デバイス1';
device.energy = 10;
device.confirm();
演習2
該当部分のみ
code:device_exe2.js
~ 省略 ~
move() {
if(this.energy > 0) {
this.energy--;
console.log(動作しました。残りエネルギー : ${this.energy});
} else {
console.log('エネルギーが足りなかったので、動作しませんでした。');
}
~ 省略 ~
const device = new Device();
device.name = 'デバイス2';
device.energy = 3;
device.confirm();
const count = 4;
for(let i = 1; i <= count; i++) {
device.move();
}
device.confirm();
演習3
該当部分のみ
code:device.js
constructor(name, energy){
this.name = name;
this.energy = energy;
}
演習4
code:device.js
constructor(name, energy){
if (name != null) {
this.name = name;
} else {
this.name = 'デフォルト';
}
if (energy != null) {
this.energy = energy;
} else {
this.energy = 10;
}
}
演習5
code:device.js
class Device {
constructor(name, energy){
if (name != null) {
this.name = name;
} else {
this.name = 'デフォルト';
}
if (energy != null) {
this.energy = energy;
} else {
this.energy = 10;
}
}
confirm() {
console.log(名前 : ${this.name}, 現在のエネルギー : ${this.energy});
}
move() {
if(this.energy > 0) {
this.energy--;
console.log(動作しました。残りエネルギー : ${this.energy});
} else {
console.log('エネルギーが足りなかったので、動作しませんでした。');
}
}
}
module.exports = Device;
code:keyboard.js
const Device = require('./device');
class Keyboard extends Device{
// override
move() {
if (this.energy > 0) {
this.energy--;
console.log(文字を入力しました。残りエネルギー : ${this.energy});
} else {
console.log('エネルギーが足りなかったので、動作しませんでした。');
}
}
enter() {
if (this.energy > 0) {
this.energy--;
console.log(入力情報を確定しました。残りエネルギー : ${this.energy});
} else {
console.log('エネルギーが足りなかったので、動作しませんでした。');
}
}
}
module.exports = Keyboard;
演習6
code:microwave-oven.js
const Device = require('./device');
class MicrowaveOven extends Device {
// override
move() {
super.move();
if(this.energy > 0) {
console.log('温め中')
}
}
warm(seconds) {
for(let i = 1; i <= seconds; i++) {
console.log(${i}秒経過);
this.move();
}
}
}
module.exports = MicrowaveOven;
演習7
code:keyboard.js
const Device = require('./device');
class Keyboard extends Device{
constructor(name, energy, arrangement) {
super(name, energy);
this.arrangement = arrangement;
}
// override
move() {
if (this.energy > 0) {
this.energy--;
console.log(文字を入力しました。残りエネルギー : ${this.energy});
} else {
console.log('エネルギーが足りなかったので、動作しませんでした。');
}
}
enter() {
if (this.energy > 0) {
this.energy--;
console.log(入力情報を確定しました。残りエネルギー : ${this.energy});
} else {
console.log('エネルギーが足りなかったので、動作しませんでした。');
}
}
showArrangement() {
console.log(キーボード配列 : ${this.arrangement});
}
}
module.exports = Keyboard;