小中学生向けプログラミング講座　師匠のブログ

2014年9月7日日曜日

HTMLでフォームの作成1 HTMLの書き方

フォームを作成する時はJavaScriptでも書くことはできますがコードが複雑になるので、フォームのような見栄えの部分ではHTMLというデザインに関する言語を使います。説明の前に下記のコードを書いて、form.htmlというファイル名にして保存してみましょう。始めに下記のサンプルコードを書いてみます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>フォーム</title>
</head>
<body>

<input type="number">
+
<input type="number">
=
<input type="number">
<input type="button" value="計算する">

</body>
</html>

実行してみると、

画面にフォームが表示されました。アプリを作る時はこのフォームに動作を追加していきます。

HTMLのコードの書き方を解説すると、一行目の<!DOCTYPE html>はこれからHTMLのコードを書きますという宣言で、必ず必要というものではありません。二行目の<html>はここからHTMLのコードになりますという印(タグ)で<html>と</html>で囲った箇所がHTMLの記述となります。三行目からの<head>ですが、表に見えない部分の情報を入力するところで、<meta charset="UTF-8">は今回のHTMLはUTF-8という文字列で記述ということを設定しています。見えない部分の情報は</head>までになります。次の<body>と</body>で囲まれている箇所が実際に表示される箇所で、今回のサンプルコードでは、<input type="number">というものと<input type="button" value="計算">というものと、+や=といった記号が書かれています。<input type="number">は数字を入力するフォームを表示という意味で、<input type="number">を組み合わせることで簡単な計算機を表示しています。
※現時点では計算ボタンを押しても計算が開始することはありません。

まとめると

<!DOCTYME html>
<html>
<head>
表示されない箇所の諸々の設定
</head>
<body>
ここに書いたコードは表示される。ユーザが操作できる(ユーザーインターフェースという)
</body>
</html>

このような記述ルールとなります。

補足
HTMLでは、改行する時にEnterボタンを押しても改行されず、<br>を入れることで改行されます。

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>HTMLサンプル</title>
</head>
<body>

文章を表示します。
<br>
改行してから文章を表示します。

</body>
</html>

<br>を入れることで改行されます。

HTMLでできること
HTML | Mozilla Developer Network

2014年9月6日土曜日

JavaScriptで書いたコードのエラーを確認しよう

プログラミングは決められた書き方をしなければエラーになり、書いたコードが実行されません。JavaScriptでの書き方を間違えた際のエラーの確認方法はコンソール(Console)を確認します。これからコンソールの表示の仕方を見ていきます。

JavaScriptを練習する上でGoogle ChromeというインターネットのWebページを見るためのソフトを使うと良いです。Google Chromeを入れるために下記のURLからダウンロードとインストールを行いましょう。Google Chromeを無料ダウンロードをクリックすると自動でお使いのパソコンに入ります。
http://www.google.co.jp/intl/ja/chrome/browser/

Google Chromeをインストール(パソコンに入った状態)した後、JavaScriptが書かれたファイルをGoogle Chromeで開きます。

JavaScriptを書いたファイルは上のようなアイコンで表示され、

アイコンを右クリック → プログラムから開く(H) → Google Chromeを選択するとGoogle Chromeで作成したJavaScriptの実行結果が表示されます。

書いたコードにエラーがないかを調べるには、

右上にある縦線三本のアイコンをクリックして、

ツール → デベロッパーツール(D)を選択します。

上の画面の様に下側に枠が表示されたらF5を押してプログラムの再読み込みを行います。エラーは下の枠に表示され、エラーがあった場合は赤字で英語でエラー内容が表示されます。コードにエラーがなければ何も表示されません。

今回のエラーですが、Uncaught RefernceError: bug is not defined ファイル名:10と書かれています。

末尾に10と表示されていますが、10行目付近のコードの書き方がおかしいですよという内容になっています。

JavaScriptのコードを書こう11 オブジェクト、または配列に新しい値(要素)の追加

var obj = {date: "2014-04-01", title: "誕生日", author: "saito"};

オブジェクト内に新たに値を追加したい場合は、obj.add = "要素";のように、変数名の後に.(ドット)新しく追加するプロパティで値を追加できます。

//追加後のオブジェクト
var obj = {date: "2014-04-01", title: "誕生日", author: "saito", add: "要素"};

一方、配列では、

var array = ["apple", "orange", "melon", "tomato"];

array[4] = "carrot";もしくは、
array.push("carrot");のように、
変数名の後に[次の番号]か、array.push("追加したい値");で値を追加します。

//追加後の配列
var array = ["apple", "orange", "melon", "tomato", "carrot"];

JavaScriptのコードを書こう10 配列、オブジェクトの特殊な形

一つの変数に複数の値を入れることができるものとしてオブジェクトがありますが、オブジェクト以外にも配列というものもあります。オブジェクトは

var obj = {
    date: "2014-04-01",
    title: "誕生日",
    author: "saito",
    getTitle: function(){
        return this.title;
    }
};

上記のように{}の中に、プロパティ:値の対を複数持つことでたくさんの値を変数の中に入れることができ、プロパティに関数を指定することができます。一方、配列はプロパティ名を気にせず変数に値をたくさん入れたい場合に使用します。

var array = ["apple", "orange", "melon", "tomato"];

このように[]の中に文字列、または数字を入れていきます。配列では値毎に番号が振られ、一番左の値が0で、次の値には1、その次の値には2が振られ、array[0]のように変数の後に[]と番号を指定すると値が取得できます。

document.write(array[0]);  //appleと表示される
document.write(array[1]);  //orangeと表示される

配列の値の中にオブジェクトが格納されていることもあります。

JavaScriptのコードを書こう9 オブジェクト

アプリを開発する際に一つの変数の中にたくさんの値を入れないといけない時があります。たとえばデータベースですが、この時に値を一つの変数にまとめておくためにオブジェクトを利用します。

var obj = {date:"2014-04-01", title:"誕生日", author:"saito"};

もしくは見やすいように

var obj = {
    date: "2014-04-01",
    title: "誕生日",
    author: "saito"
};

オブジェクトは{}で値をまとめて変数に入っているもので、:(コロン)の左側にあるのがプロパティで、オブジェクトの中にどのような値を入れたいのかといった目次のようなもので、:(コロン)の右側に実際の値を入れます。複数個のプロパティと値を入れたい場合は、,(カンマ)区切りでインデックスと値を入れます。

たとえば、obj変数の中から日付(date)の値だけ取り出した場合は、

<script>

var obj = {date: "2014-04-01", title:"誕生日", author:"saito"};
document.write(obj.date);  // 2914-04-01と表示される

</script>

上記のコードのように変数名とオブジェクトのプロパティを.(ドット)でつないで指定します。オブジェクトの中には文字列や数字以外に関数も入れることができます。thisはオブジェクト内のプロパティの値を取得する時に使います。

<script>
var obj = {
    date: "2014-04-01",
    title: "誕生日",
    author: "saito",
    getTitle: function(){
        return this.title;
    }
};

document.write(obj.getTitle()); //誕生日と表示される
</script>

オブジェクトの中に入れた関数を呼び出す場合は、変数名.プロパティに()を付けます。必要に応じて引数を入れることもできます。

2014年9月5日金曜日

JavaScriptのコードを書こう8 変数の有効範囲(スコープ)について

変数はどこで宣言(var 変数名;)したかによって、有効範囲が変わります。たとえば、

<script>

//関数の外で変数を宣言する
var args ;
var args2;

function exec(){
    //関数の外側で宣言した変数に値を入れる
    args = 5;
}

//ここで定義した関数を使用する
exec();
document.write(args);  //5と表示される

//関数を利用せず、変数に直接値を入れてみる
args2 = 6;
document.write(args2);  //6と表示される
</script>

この様に関数の外側で変数を定義すると、関数の外側ではもちろんのこと、関数内でも変数を使うことができます。一方、

<script>
function exec(){
    //関数の中で変数を宣言する
    var args;
    args = 5;
}

exec();
document.write(args);  //エラーとなる
</script>

関数の中で変数を定義して、関数外で定義した変数の値を表示しようとするとエラーになります。このように、どこで変数を定義したかによって、変数の有効範囲が変わります。この範囲のことをスコープと呼び、関数の外側で定義した変数をグローバル変数、関数の内側で定義した変数をローカル変数と呼びます。

2014年9月4日木曜日

JavaScriptのコードを書こう7 関数を使って、同じ処理を何度も行おう

<script>
//計算するための関数
function calculate(x, y){
    //結果を入れる変数
    var result;
    result = x + y;
    return result;
}

//計算結果を入れる
var addition;
var addition2;

//作成した関数の呼び出し
addition = calculate(5, 8);

//13と表示される
document.write(addition);

//改行
document.write("<br>");

var x = 4;
var y = 10;

//作成した関数の呼び出し
addition2 = calculate(x, y);

//14と表示される
document.write(addition2);
</script>

コードのはじめにfunction calculate(x, y){}と書かれていますが、このコード全体を実行しても、functionで囲まれた箇所は読み込まれません。コードの実行はfuncitonで囲まれた箇所を飛ばして処理を開始し、addition = calculate(5, 8);の時にfunctionで囲まれた箇所が読み込まれます。functionで書かれたコードを関数と呼び、同じような処理を何度も行う際に処理をひとまとめにしておいて、functionの後に書かれているcalculate()と書くことで予め準備しておいた関数を呼び出し処理を行います。

function calculate(x, y){
    var result;
    result = x + y;
    return result;
}

となっています。最初にこの関数を呼び出しているaddition = calculate(5, 8);を見ると、calculateの後にあるカッコで5と8といった値を二つ渡しており、calculate(5, 8)を入れたadditionを表示してみると13と表示されていることから、calculate関数では、5と8を足して、その結果を返す(変数に結果を入れる)という処理をしていることになります。。改めてcalculate関数を見てみると、

function calculate(x, y){
    var result;
    result = x + y;
    return result;
}

一行目のfunctionの後に呼び出すための関数名をcalculateとしておいて、その後のカッコ内にxとyといった変数らしきものがあります。これを引数(ひきすう)と呼ぶのですが、呼び出しがcalculate(5, 8)で、x = 5、y = 8のように対応しています。これは「関数calculateは値を二つ入れてください」という意味があります。次の行を見ていくと、var result;は関数内で使う変数を宣言し、result = x + y;で計算を行い、result変数に計算結果を入れます。最後の行にあるreturn result;は関数内で計算した結果を返すという意味で、試しに

function calculate(x, y){
    var result;
    result = x + y;
}

var addition;
addition = calculate(5, 8);
document.write(addition);  //undefinedと表示される

を実行してみると、undefinedと表示されます。undefinedとは未定義値といい、変数に何も入っていないことを意味しています。

サンプルコードに戻って、

function calculate(x, y){
    var result;
    result = x + y;
    return result;
}

//計算結果を入れる
var addition;
var addition2;

addition = calculate(5, 8);
document.write(addition);   //13と表示される

//改行
document.write("<br>");

var x = 4;
var y = 10;

addition2 = calculate(x, y);
document.write(addition2);   //14と表示される

calculate関数の引数に違う数字を入れると表示させる数字が変わってくるので、大体決まっている処理があったら関数にしてまとめておきましょう。

登録: 投稿 (Atom)