若手SE向け研修/1回目のバックアップ(No.4)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
若手SE向け研修/1回目へ行く。
- 1 (2015-08-08 (土) 08:24:03)
- 2 (2015-08-08 (土) 11:16:11)
- 3 (2015-08-08 (土) 14:13:41)
- 4 (2015-08-08 (土) 17:05:41)

HTML5
- 会員管理システム
JavaScript
- 文法的な説明
練習問題1

若手SE向け研修

HTML5 †

↑

会員管理システム †

↑

HTML "index.html" †

ベースとなるHTMLファイルです。

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>会員管理</title>
    </head>
    <body>
        <h1>会員管理</h1>
        <p>会員情報を入力してください。</p>
        <form>
            <p>氏名：<input type="text" size="20"></p>
            <p>年齢：<input type="text" size="5"></p>
            <p>メール：<input type="text" size="30"></p>
            <input type="button" value="登録" onclick="registForm()"/>
            <input type="button" value="ランダム登録" onclick="registRandom()"/>
        </form>
        <script type="text/javascript" src="js/my.js"></script>     </body>
</html>

↑

JavaScriptを使って文字列出力 †

document.write("<p>JavaScriptで出力したよ</p>");

↑

配列の作り方 †

var kaiin = [
    ["山田太郎",55,"taro@aaa.jp"],
    ["佐藤花子",18,"hanako@bbb.jp"],
    ["中村次郎",42,"jiro@ccc.jp"],
];

// 会員を登録する
function regist() {
    for (var i = 0; i < kaiin.length; i++) {
        alert((i+1)+"番目の会員は"+
                kaiin[i][0]+"（"+kaiin[i][1]+"歳）で、メールは"+
                kaiin[i][2]+"です");
    }
}

↑

オブジェクト（連想配列）の作り方 †

var kaiin = [
    {name: "山田太郎", age: 55, mail: "taro@aaa.jp"},
    {name: "佐藤花子", age: 18, mail: "hanako@bbb.jp"},
    {name: "中村次郎", age: 42, mail: "jiro@ccc.jp"},
];

// 会員を登録する
function regist() {
    for (var i = 0; i < kaiin.length; i++) {
        alert((i + 1) + "番目の会員は" + kaiin[i].name +
                "(" + kaiin[i].age + ")でメールは" +
                kaiin[i].mail + "です");
    }
}

↑

クラスの作り方 †

JavaScriptでのクラスは関数オブジェクトです。

var Member = function (n, a, m) {
    this.name = n;
    this.age = a;
    this.mail = m;
    this.getString = function () {
        return this.name + "(" + this.age + "歳) - mail:" + this.mail;
    }
};

var taro = new Member("山田太郎", 55, "taro@aaa.jp");
var hanako = new Member("佐藤花子", 18, "hanako@bbb.jp");
var jiro = new Member("中村次郎", 42, "jiro@ccc.jp");

// 会員を登録する
function regist() {
    alert("会員は" + taro.getString() + "です");
    alert("会員は" + hanako.getString() + "です");
    alert("会員は" + jiro.getString() + "です");
}

↑

DOMを扱う †

var Member = function (n, a, m) {
    this.name = n;
    this.age = a;
    this.mail = m;
    this.getString = function () {
        return this.name + "(" + this.age + "歳) - mail:" + this.mail;
    }
};

var taro = new Member("山田太郎", 55, "taro@aaa.jp");
var hanako = new Member("佐藤花子", 18, "hanako@bbb.jp");
var jiro = new Member("中村次郎", 42, "jiro@ccc.jp");

var mem_list = [];

// 会員を登録する
function regist() {
    var name = document.getElementById("name").value;
    var age = document.getElementById("age").value;
    var mail = document.getElementById("mail").value;
    var n = mem_list.length;
    mem_list[n] = m;
    var list = document.getElementById("list");
    var li = document.createElement("li");
    li.innerHTML = mem_list[n].getString();
    list.appendChild(li);
}

↑

ランダム登録を可能にする †

var Member = function (n, a, m) {
    this.name = n;
    this.age = a;
    this.mail = m;
    this.getString = function () {
        return this.name + "(" + this.age + "歳) - mail:" + this.mail;
    }
};

var taro = new Member("山田太郎", 55, "taro@aaa.jp");
var hanako = new Member("佐藤花子", 18, "hanako@bbb.jp");
var jiro = new Member("中村次郎", 42, "jiro@ccc.jp");

var mem_list = [];

// 会員を登録する
// m:会員
function regist(m) {
    var n = mem_list.length;
    mem_list[n] = m;
    var list = document.getElementById("list");
    var li = document.createElement("li");
    li.innerHTML = mem_list[n].getString();
    list.appendChild(li);
}

// フォーム情報から会員を登録する
function registForm() {
    var name = document.getElementById("name").value;
    var age = document.getElementById("age").value;
    var mail = document.getElementById("mail").value;
    regist(new Member(name,age,mail));
}

// ランダムに会員を登録する
function registRandom() {
    var name=getRandomString(true)+" "+getRandomString(true);
    var age=getRandomInt(15,70);
    var mail=getRandomString(false)+"@"+getRandomString(false)+".jp";
    regist(new Member(name,age,mail));
}

// ランダムな整数
function getRandomInt(s1, s2) {
    return parseInt(Math.random() * (s2 - s1 + 1)) + s1;
}

// ランダムな文字列
function getRandomString(cap) {
    var s = "";
    if (cap)
        s += String.fromCharCode(getRandomInt(0x41, 0x41 + 25));
    var r = getRandomInt(5, 10);
    for (var i = 0; i < r; i++)
        s += String.fromCharCode(getRandomInt(0x61, 0x61 + 25));
    return s;
}

↑

削除可能にする †

Memberクラスに、自分を表示しているリストアイテム(li)を持たせることで、リストアイテムの削除を可能にしている。
ついでに、3人の会員を最初に追加した。（onloadで）

var Member = function (n, a, m) {
    this.name = n;
    this.age = a;
    this.mail = m;
    this.getString = function () {
        return this.name + "(" + this.age + "歳) - mail:" + this.mail;
    }
    this.li;   // ←ここを追加
};
var taro = new Member("山田太郎", 55, "taro@aaa.jp");
var hanako = new Member("佐藤花子", 18, "hanako@bbb.jp");
var jiro = new Member("中村次郎", 42, "jiro@ccc.jp");
var mem_list = [];

// 読み込み時
function loaded() {
    regist(taro);
    regist(hanako);
    regist(jiro);
}

// 会員を登録する
// m:会員
function regist(m) {
    var n = mem_list.length;
    mem_list[n] = m;
    var list = document.getElementById("list");
    var li = document.createElement("li");
    li.innerHTML = m.getString() + " - <input type='button' value='削除' onclick='removeMember(" + n + ")'/>";
    list.appendChild(li);
    m.li = li;
}

// フォームから会員を登録する
function registForm() {
    var name = document.getElementById("name").value;
    var age = document.getElementById("age").value;
    var mail = document.getElementById("mail").value;
    if (name != "" && age != "" && mail != "") {
        regist(new Member(name, age, mail));
    }
    else {
        alert("全部入力してください！");
    }
}

// ランダムに会員を登録する
function registRandom() {
    var name = getRandomString(true) + " " + getRandomString(true);
    var age = getRandomInt(15, 70);
    var mail = getRandomString(false) + "@" + getRandomString(false) + ".jp";
    regist(new Member(name, age, mail));
}

// ランダムな整数
function getRandomInt(s1, s2) {
    return parseInt(Math.random() * (s2 - s1 + 1)) + s1;
}

// ランダムな文字列
function getRandomString(cap) {
    var s = "";
    if (cap)
        s += String.fromCharCode(getRandomInt(0x41, 0x41 + 25));
    var r = getRandomInt(5, 10);
    for (var i = 0; i < r; i++)
        s += String.fromCharCode(getRandomInt(0x61, 0x61 + 25));
    return s;
}

// 会員を削除する
function removeMember(id) {
    var list = document.getElementById("list");
    list.removeChild(mem_list[id].li);
    mem_list[id] = undefined;
}

↑

最終的なHTML †

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>会員管理</title>
        <link type="text/css" rel="stylesheet" href="css/my.css">
        <script type="text/javascript" src="js/my.js"></script>
    </head>
    <body onload="loaded()">
        <h1>会員管理</h1>
        <p>会員情報を入力してください。</p>
        <form>
            <p>氏名：<input id="name" type="text" size="20"></p>
            <p>年齢：<input id="age" type="text" size="5"></p>
            <p>メール：<input id="mail" type="text" size="30"></p>
            <input type="button" value="登録" onclick="registForm()"/>
            <input type="button" value="ランダム登録" onclick="registRandom()"/>
            <input type="button" value="修正" onclick="modifyMember()"/>
        </form>
        <h2>会員リスト</h2>
        <ul id="list">
        </ul>
    </body>
</html>

↑

修正可能にする †

var Member = function (n, a, m) {
    this.name = n;
    this.age = a;
    this.mail = m;
    this.getString = function () {
        return this.name + "(" + this.age + "歳) - mail:" + this.mail;
    };
    this.li;
    this.id;
};
var taro = new Member("山田太郎", 55, "taro@aaa.jp");
var hanako = new Member("佐藤花子", 18, "hanako@bbb.jp");
var jiro = new Member("中村次郎", 42, "jiro@ccc.jp");
var mem_list = [];
var selected_member=null;

// 読み込み時
function loaded() {
    regist(taro);
    regist(hanako);
    regist(jiro);
}

// 会員を登録する
// m:会員
function regist(m) {
    var n = mem_list.length;
    mem_list[n] = m;
    var list = document.getElementById("list");
    var li = document.createElement("li");
    li.addEventListener("click",selectMember);
    li.innerHTML = m.getString() + " - <input type='button' value='削除' onclick='removeMember(" + n + ")'/>";
    list.appendChild(li);
    m.li = li;
    m.id=n;
    li.member=m;
}

// フォームから会員を登録する
function registForm() {
    var name = document.getElementById("name").value;
    var age = document.getElementById("age").value;
    var mail = document.getElementById("mail").value;
    if (name != "" && age != "" && mail != "") {
        regist(new Member(name, age, mail));
    }
    else {
        alert("全部入力してください！");
    }
}

// ランダムに会員を登録する
function registRandom() {
    var name = getRandomString(true) + " " + getRandomString(true);
    var age = getRandomInt(15, 70);
    var mail = getRandomString(false) + "@" + getRandomString(false) + ".jp";
    regist(new Member(name, age, mail));
}

// ランダムな整数
function getRandomInt(s1, s2) {
    return parseInt(Math.random() * (s2 - s1 + 1)) + s1;
}

// ランダムな文字列
function getRandomString(cap) {
    var s = "";
    if (cap)
        s += String.fromCharCode(getRandomInt(0x41, 0x41 + 25));
    var r = getRandomInt(5, 10);
    for (var i = 0; i < r; i++)
        s += String.fromCharCode(getRandomInt(0x61, 0x61 + 25));
    return s;
}

// 会員を削除する
function removeMember(id) {
    var list = document.getElementById("list");
    list.removeChild(mem_list[id].li);
    mem_list[id] = undefined;
}

// 会員を選択する
function selectMember(e){
    var mem=e.target.member;
    document.getElementById("name").value=mem.name;
    document.getElementById("age").value=mem.age;
    document.getElementById("mail").value=mem.mail;
    selected_member=mem;
}

// 会員を修正する
function modifyMember(){
    if(selected_member==null) return;
    var name=document.getElementById("name").value;
    var age=document.getElementById("age").value;
    var mail=document.getElementById("mail").value;
    if (name != "" && age != "" && mail != "") {
        selected_member.name=name;
        selected_member.age=age;
        selected_member.mail=mail;
        selected_member.li.innerHTML=selected_member.getString() + " - <input type='button' value='削除' onclick='removeMember(" + selected_member.id + ")'/>";
    }
    else {
        alert("全部入力してください！");
    }
}

↑

CSS †

h1{
    color:#ff0000;
}

li:hover{
    color:#0000ff;
}

↑

JavaScript †

↑

文法的な説明 †

↑

変数について †

JavaScriptにはデータ型が存在するが、変数に格納するときは必要に応じて変換されるため、ユーザが方を気にすことは少ない。
- ただし、型に関して厳密に比較したい場合等は===や!==などの演算子を使用する。
変数のスコープ
- グローバルスコープとローカル（関数）スコープ
- 同じ名前の変数があると、内側のスコープが使われる。

↑

関数について †

JavaScriptでは関数も変数に入れることができるオブジェクトである。
function命令で作成する。

↑

オブジェクトとは †

JavaScriptのクラスは関数である。
関数の持つプロパティがメンバーとなる。
メンバーの中で関数を格納したものがメソッドである。

↑

練習問題1 †

「ランダム登録」というボタンを押すと、名前、年齢、メールを適当に作って登録されるようにしなさい。

ただし、

名前は最初が大文字で残りが小文字の文字列が2つ（アルファベット）
年齢は15以上70以下
メールはアルファベット＋"@"＋アルファベット+".jp"

としなさい。