【独学】はじめてのWebプログラミング – 練習問題 解答

2021.11.28

練習問題3-1 解答

htdocs/HTML/index.html

<!DOCTYPE html>
<html>
    <lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>練習問題</title>
    </head>
    <body>
        <ul>
            <li>鈴木一郎</li>
            <li>鈴木二郎</li>
            <li>鈴木三郎</li>
            <li>鈴木四郎</li>
            <li>鈴木五郎</li>
        </ul>
    </body>
</html>

練習問題3-2 解答

htdocs/HTML/index.html

<!DOCTYPE html>
<html>
    <lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>練習問題</title>
    </head>
    <body>
        <table border="1">
            <tr>
                <th>文房具</th>
                <th>価格</th>
            </tr>
            <tr>
                <td>えんぴつ</td>
                <td>100円</td>
            </tr>
            <tr>
                <td>けしごむ</td>
                <td>200円</td>
            </tr>
            <tr>
                <td>はさみ</td>
                <td>300円</td>
            </tr>
        </table>
    </body>
</html>

練習問題3-3 解答

htdocs/HTML/index.html

<!DOCTYPE html>
<html>
    <lang="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>練習問題</title>
    </head>
    <body>
        <div>あいうえお</div>
    </body>
</html>

htdocs/HTML/style.css

div {
    width: 100px;
    border: 1px solid black;
    padding: 30px;
    color: green;
}

練習問題3-4 解答

htdocs/HTML/index.html

<!DOCTYPE html>
<html>
    <lang="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>練習問題</title>
    </head>
    <body>
        <div>あいうえお</div>
    </body>
</html>

htdocs/HTML/style.css

div {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    color: green;
    text-align: center;
}

練習問題3-5 解答

htdocs/HTML/index.html

<!DOCTYPE html>
<html>
    <lang="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>練習問題</title>
    </head>
    <body>
        <span>あいうえお</span>
        <span>かきくけこ</span>
    </body>
</html>

htdocs/HTML/style.css

span {
    display: block;
    width: 300px;
    height: 100px;
    margin-bottom: 10px;
    border: 1px solid red;
    color: black;
}

練習問題3-6 解答

htdocs/HTML/index.html

<!DOCTYPE html>
<html>
    <lang="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>練習問題</title>
    </head>
    <body>
        <div>あいうえお</div>
        <div>かきくけこ</div>
    </body>
</html>

htdocs/HTML/style.css

div {
    float: left;
    width: 200px;
    height: 100px;
    margin-right: 10px;
    padding: 20px;
    border: 1px solid black;
    color: white;
    background-color: blue;
}

練習問題5-1 解答

htdocs/PHP/test.php

<?php

$str = "Hello, World";
echo $str;

?>

練習問題5-1 解答

htdocs/PHP/test.php

<?php

$str = "Hello, World";
echo $str;

?>

練習問題5-1 解答

htdocs/PHP/test.php

<?php

$str = "Hello, World";
echo $str;

?>

練習問題5-2 解答

htdocs/PHP/test.php

<?php

define('TEST', 'Hello, World');
echo TEST;

?>

練習問題5-3 解答

htdocs/PHP/test.php

<?php

echo 'Hello'.', '.'World';

?>

練習問題5-4 解答

htdocs/PHP/test.php

<?php

$a = 1;
$b = 2;
echo $a + $b;
echo '<br>';

$a = 10;
$b = 3;
echo $a - $b;
echo '<br>';

$a = 3;
$b = 2;
echo $a * $b;
echo '<br>';

$a = 6;
$b = 3;
echo $a / $b;
echo '<br>';

?>

練習問題5-5 解答

htdocs/PHP/test.php

<?php

$number = 1;  // 2や他の値でも試して下さい

if ($number == 1) {
    echo '1です。';
} elseif ($number == 2) {
    echo '2です。';
} else {
    echo 'サポートしていません。';
}

?>

練習問題5-6 解答

htdocs/PHP/test.php

<?php

date_default_timezone_set('Asia/Tokyo');
$hour = date('H');

if ($hour >= 6 && $hour <= 10) {
    echo 'おはようございます';
} elseif ($hour >= 11 && $hour <= 15) {
    echo 'こんにちは';
} elseif ($hour >= 16 && $hour <= 20) {
    echo 'こんばんは';
} elseif ($hour >= 21 && $hour <= 24) {
    echo 'おやすみなさい';
} elseif ($hour >= 1 && $hour <= 5) {
    echo '深夜です';
}

?>

練習問題5-7 解答

htdocs/PHP/test.php

<?php

$number = 1;  // 2や他の値でも試して下さい

switch ($number) {
    case 1:
        echo '1です。';
        break;
    case 2:
        echo '2です。';
        break;
    default:
        echo 'サポートしていません。';
        break;
}

?>

練習問題5-8 解答

htdocs/PHP/test.php

<?php

date_default_timezone_set('Asia/Tokyo');
$week = date('w');

switch ($week) {
    case 0:
        echo '日曜';
        break;
    case 1:
        echo '月曜';
        break;
    case 2:
        echo '火曜';
        break;
    case 3:
        echo '水曜';
        break;
    case 4:
        echo '木曜';
        break;
    case 5:
        echo '金曜';
        break;
    case 6:
        echo '土曜';
        break;
    default:
        echo 'サポートしていません。';
        break;
}

?>

練習問題5-9 解答

htdocs/PHP/test.php

<?php

$count = 1;

while ($count <= 10) {
    echo $count;
    echo '<br>';
    $count++;
}

?>

練習問題5-10 解答

htdocs/PHP/test.php

<?php

$count = 1;

while ($count <= 10) {
    $score = rand(1, 100);
    if ($score >= 70) {
        echo $score.'：合格 <br>';
    } else {
        echo $score.'：不合格 <br>';
    }
    $count++;
}

?>

練習問題5-11 解答

htdocs/PHP/test.php

<?php

for ($i = 1; $i <=10; $i++) {
    echo $i;
    echo '<br>';
}

?>

練習問題5-12 解答

htdocs/PHP/test.php

<?php

for ($i = 1; $i <=10; $i++) {
    $str = '';
    
    if (($i % 2) == 0) {
        $str = $str.'2の倍数 ';
    }
    if (($i % 3) == 0) {
        $str = $str.'3の倍数 ';
    }
    if (($i % 5) == 0) {
        $str = $str.'5の倍数 ';
    }

    // 結果の出力
    if ($str != '') {
        echo $i.'：'.$str;
        echo '<br>';
    }
}

?>

練習問題5-13 解答

htdocs/PHP/test.php

<?php

for ($i = 1; $i <=10; $i++) {
    if ($i == 3 || $i == 5) {
        continue;
    }
    echo $i;
    echo '<br>';
}

?>

練習問題5-14 解答

htdocs/PHP/test.php

<?php

for ($i = 1; $i <=10; $i++) {
    $data[] = $i;
}

var_dump($data);

?>

練習問題5-15 解答

htdocs/PHP/test.php

<?php

for ($i = 1; $i <=3; $i++) {
    $data["$i"] = $i.'です';
}

var_dump($data);

?>

練習問題5-16 解答

htdocs/PHP/test.php

<?php

$data = array( 
    array('野菜' => 'にんじん', '価格'=> '100円', '年齢' => '赤'),
    array('野菜' => 'ピーマン', '価格'=> '50円', '年齢' => '緑'),
    array('野菜' => 'なす', '価格'=> '70円', '年齢' => '紫')
);

var_dump($data);

?>

練習問題5-17 解答

htdocs/PHP/test.php

<?php

for ($i = 1; $i <=10; $i++) {
    $data[] = $i;
}

foreach ($data as $number) {
    echo $number;
    echo '<br>';
}

?>

練習問題5-18 解答

htdocs/PHP/test.php

<?php

function getToday() {
    date_default_timezone_set('Asia/Tokyo');
    $date = date("Y/m/d");
    return $date;
}

echo getToday();

?>

練習問題5-19 解答

htdocs/PHP/test.php

<?php

function getToday() {
    date_default_timezone_set('Asia/Tokyo');
    
    // 日付を取得
    $date = date("Y/m/d");

    // 曜日を取得
    $week = date('w');
    switch ($week) {
        case 0:
            $week_str = '（日）';
            break;
        case 1:
            $week_str = '（月）';
            break;
        case 2:
            $week_str = '（火）';
            break;
        case 3:
            $week_str = '（水）';
            break;
        case 4:
            $week_str = '（木）';
            break;
        case 5:
            $week_str = '（金）';
            break;
        case 6:
            $week_str = '（土）';
            break;
        default:
            echo 'サポートしていません。';
            break;
    }

    return $date.$week_str;
}

echo getToday();

?>

練習問題6-1 解答

htdocs/HTML/index.html

<!DOCTYPE html>
<html>
    <lang="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>練習問題</title>
    </head>
    <body>
        <script src="test.js"></script>
    </body>
</html>

htdocs/HTML/test.js

let score = 10; // 値を変えて試して下さい

if (score < 30) {
    console.log('不合格');
} else if (score >= 30 && score < 100) {
    console.log('合格');
} else {
    console.log('満点');
}

練習問題6-2 解答

htdocs/HTML/index.html

<!DOCTYPE html>
<html>
    <lang="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>練習問題</title>
    </head>
    <body>
        <script src="test.js"></script>
    </body>
</html>

htdocs/HTML/test.js

let city = '東京'; // 値を変えて試して下さい

switch (city) {
    case '東京': 
        console.log('関東');
        break;
    case '愛知': 
        console.log('東海');
        break;
    case '大阪': 
        console.log('関西');
        break;
    default: 
        break;
}

練習問題6-3 解答

htdocs/HTML/index.html

<!DOCTYPE html>
<html>
    <lang="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>練習問題</title>
    </head>
    <body>
        <script src="test.js"></script>
    </body>
</html>

htdocs/HTML/test.js

let count = 10000;

while (count > 100) {
    count = count - 10
}

console.log('終了');

練習問題6-4 解答

htdocs/HTML/index.html

<!DOCTYPE html>
<html>
    <lang="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>練習問題</title>
    </head>
    <body>
        <script src="test.js"></script>
    </body>
</html>

htdocs/HTML/test.js

var list = new Array('佐藤', '鈴木', '伊藤');
list.forEach(function(value) {
    console.log(value);
});

練習問題6-5 解答

htdocs/HTML/index.html

<!DOCTYPE html>
<html>
    <lang="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>練習問題</title>
    </head>
    <body>
        <button type="button" id="target">ボタン</button>
        <script src="test.js"></script>
    </body>
</html>

htdocs/HTML/test.js

document.getElementById('target').addEventListener('click', function() {
    console.log('ボタンを押しました')
});

練習問題6-6 解答

htdocs/HTML/index.html

<!DOCTYPE html>
<html>
    <lang="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>練習問題</title>
    </head>
    <body>
        <script src="test.js"></script>
    </body>
</html>

htdocs/HTML/test.js

function getTotalAmount(syokei) {
    return syokei + (syokei * 0.1);
}

let total = getTotalAmount(100);    // 値を変えて試してみて下さい
console.log(total);

練習問題6-7 解答

htdocs/HTML/index.html

<!DOCTYPE html>
<html>
    <lang="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>練習問題</title>
    </head>
    <body>
        <script src="test.js"></script>
    </body>
</html>

htdocs/HTML/test.js

function getRandomNumber() {
    return 1 + Math.floor(Math.random() * 6);
}

for (i = 0; i < 10; i++) {
    let number = getRandomNumber();
    console.log(number);
}

練習問題7-1 解答

create user ‘suzuki’@localhost identified by ‘password’;

grant all privileges on *.* to ‘suzuki’@localhost;

練習問題7-2 解答

mysql -u suzuki -p

練習問題7-3 解答

create table test

(

id int auto_increment primary key comment ‘内部番号’,

test_name varchar(32) comment ‘テスト項目’,

create_datetime datetime comment ‘登録日時’,

update_datetime datetime comment ‘更新日時’

);

練習問題7-4 解答

alter table test add content varchar(1024);

練習問題7-5 解答

insert into test (test_name,create_datetime,update_datetime,content) values (‘算数’,NOW(),NOW(),’算数のテストです。’);

select * from test;

練習問題7-6 解答

update test set test_name=’数学’, update_datetime=NOW(), content=’数学のテストです。’ where id=1;

select * from test;

練習問題7-7 解答

delete from test where id=1;

select * from test;

練習問題7-8 解答

insert into test (test_name,create_datetime,update_datetime,content) values (‘数学1′,NOW(),NOW(),’1’);

insert into test (test_name,create_datetime,update_datetime,content) values (‘数学2′,NOW(),NOW(),’2’);

insert into test (test_name,create_datetime,update_datetime,content) values (‘数学3′,NOW(),NOW(),’3’);

insert into test (test_name,create_datetime,update_datetime,content) values (‘数学4′,NOW(),NOW(),’4’);

insert into test (test_name,create_datetime,update_datetime,content) values (‘数学5′,NOW(),NOW(),’5’);

select * from test;

練習問題7-9 解答

select max(content) from test;

select min(content) from test;

練習問題7-10 解答

select * from test order by id desc;

練習問題7-11 解答

select * from test where id=2;

練習問題7-12 解答

select * from test where id=2 or id=4;

練習問題7-13 解答

select * from test where id between 2 and 4;

練習問題7-14 解答

select * from test where test_name like ‘%数学3%’;

練習問題7-15 解答

select * from test limit 3;

練習問題7-16 解答

select * from test limit 2 offset 2;

練習問題7-17 解答

select count(*) from test;

練習問題7-18 解答

データベース「shop」作成

create database shop;

テーブル「users」作成

create table users

(

user_id int,

user_name text,

create_date date

);

テーブル「orders」作成

create table orders

(

user_id int,

order_price int,

order_tax int,

order_date date

);

練習問題7-19 解答

テーブル「users」へのデータ挿入

insert into users values (1,’鈴木一郎’,’2021-01-01′);

insert into users values (2,’鈴木二郎’,’2021-01-01′);

insert into users values (3,’鈴木三郎’,’2021-02-01′);

insert into users values (4,’鈴木四郎’,’2021-02-01′);

insert into users values (5,’鈴木五郎’,’2021-03-01′);

テーブル「orders」へのデータ挿入

insert into orders values (1,100,10,’2021-05-01′);

insert into orders values (1,1000,100,’2021-06-01′);

insert into orders values (1,10000,1000,’2021-07-01′);

insert into orders values (2,200,20,’2021-05-01′);

insert into orders values (2,2000,200,’2021-06-01′);

insert into orders values (2,20000,2000,’2021-07-01′);

insert into orders values (3,300,30,’2021-05-01′);

insert into orders values (3,3000,300,’2021-06-01′);

insert into orders values (3,30000,3000,’2021-07-01′);

insert into orders values (4,400,40,’2021-05-01′);

insert into orders values (4,4000,400,’2021-06-01′);

insert into orders values (4,40000,4000,’2021-07-01′);

insert into orders values (5,500,50,’2021-05-01′);

insert into orders values (5,5000,500,’2021-06-01′);

insert into orders values (5,50000,5000,’2021-07-01′);

練習問題7-20 解答

select * from users where create_date = ‘2021-02-01’;

練習問題7-21 解答

select * from users where create_date = ‘2021-02-01’ and user_name like ‘%三郎%’;

練習問題7-22 解答

select count(*) from orders;

練習問題7-23 解答

select order_price,order_tax from orders where user_id=1;

練習問題7-24 解答

select sum(order_price) from orders where order_date between ‘2021-05-01’ and ‘2021-05-31’;

練習問題7-25 解答

select sum(order_tax) from orders where order_date between ‘2021-07-01’ and ‘2021-07-31’;

練習問題7-26 解答

select sum(order_price) from orders where user_id=1;

練習問題7-27 解答

select sum(order_price)+sum(order_tax) from orders where user_id=1;

タイトルとURLをコピーしました