1.関数を使う
プログラムコードは、上から順に実行されます。

次の例は、名前を表示するサンプルです。

ここにある alert は、ダイアログボックスを表示するための「関数」です。
命令のようなものと考えればよいでしょう。

alert関数の引数として、myNameという変数を渡すことで、ダイアログボックスに名前が表示されます。

このようなJavaScriptの関数はたくさんあります。基本的にプログラミングとは、関数をたくさん覚えて使いこなすことで進めていきます。

 

2.関数を作って使う
関数は、プログラム内で自分で定義することができます(ユーザー定義関数)。

これは、ダイアログボックスを10回表示する関数です。
この関数を使用するには、

のように書けば良いです。

引数には、リテラルのところで説明したあらゆるデータ値が使えます。
また、引数はいくつも使えます。引数が無くてもOKです。

 

3.メソッド
関数のうち、オブジェクトクラスに含まれるものは、オブジェクトの「メソッド」と言います。が、これはオブジェクト指向プログラミングを理解した後で考えることなので、「関数」と「メソッド」はだいたい同じ意味だと覚えておいてください。
誰かプログラマーから「このメソッドがね…」なんて言われたときに「ああ、functionのことだな」だと思って聞くことができれば大抵の場合は十分話は通じます。

 

4.スコープ
変数には、有効範囲があります。有効範囲のことをスコープと言います。
JavaScriptのスコープは2種類。

  • プログラム全体で変数が有効となる「グローバルスコープ」
  • 関数(function)のなかだけで変数が有効な「ローカルスコープ」

グローバルスコープの例

hoge変数はグローバルで、プログラムのどこからでも参照できる変数です。
functionの中でも呼べます。
よって、このプログラムでは2回「あうあうあー」と表示されます。

ローカルスコープの例

hoge変数はtest関数のなかのローカルスコープに属しています。
test関数の外からは参照できません。
最初にtest();が実行されたときは「あうあうあー」と表示されますが、
最後の行では「undefined」つまり、変数は定義されていないと表示されてしまいます。

混合した例(※あまりよくない実装だが、動作原理を理解する)

この例では、グローバルスコープのhoge変数と、ローカルスコープのhoge変数がそれぞれ別に定義されています。スコープが違いますので、上書きはされません。
最初にtest();が実行されたときは、test関数内部のローカル変数hogeが参照されます。
最後の行では、グローバル変数hogeが参照されます。
つまり、「(・ω・)」と表示された後に「あうあうあー」と表示されます。

通常このように同じ変数名でいろいろ違う場所に定義するのは、書いてる本人がこんがらがってしまうので良くないです。

わかりやすくするためによく使う手としては、
ローカル変数には頭に _ アンダーバーをつけます。

これで、もし似た名前のものがあっても間違えずに済みますね。

リテラルとは、プログラムに直接記述する、データ(値)のことです。

 

数値

10
-3
1.86

文字列

‘Hello!’
“Hello!”
‘Hello!’ + ‘JavaScript’
‘Hello!’ + 123

論理値

true か false。
if文(条件分岐)などで使用します。

null

変数が空っぽ(値を持たない)ことを示す値です。

undefined

変数が未定義(定義されていない)ことを示す値です。

配列

[1, 2, 3]
[‘grape’, ‘apple’, ‘orange’]
[[1,2,3], [‘grape’, ‘apple’, ‘orange’]]

オブジェクト

{x:10, y:25}
var person = {name: {sei: kuruma, mei:torajirou}, gender: male};

if文は、条件によって処理を分けたいときに使います。
「もし〜なら、こうする。そうでなければ、こうする。」といった具合です。

次の例では、1年のうちの週が50週より多いかどうかで処理を分けています。

通常は、このように事前に計算しておけば済むような分かりきったことではif文を使うようなことはしませんが、これはあくまで説明のためです。
borderNumの値をユーザー入力で変更するようにしておけば、「◯週より多い/少ない」ということが動的にチェック出来るプログラムになります。(フォーム入力や、クイズの選択肢など。)
 
次にゲームプログラムを例に説明すると、条件分岐はこんな感じです。

 
次の例では、for文とif文を組み合わせてみます。
条件分岐を繰り返し処理します。
1から10までの数で、偶数かどうかを調べます。

繰り返し処理されるなかで、iが偶数の時だけ「偶数です」と表示されます。
iを2で割った余りが0のとき、すなわち2で割り切れるとき、iは偶数です。
 
if文の書き方(1)

 
if文の書き方(2) else

 
if文の書き方(2) elseif

for文は、指定した回数だけ処理を繰り返すために使います。

例えば、

と記述すると、次のように表示されます。

これは、「0からはじまって、1ずつふえて、10でおわる」という繰り返し処理を意味します。
そして、document.write(i); が10回繰り返されたというわけです。
 
ところで、

i = i + 1;

は、簡単に次のように書きあわらす事も可能です。

i++;

このように書くのが普通です。
 
ですから、さきほどのfor文は

と書いても同じです。
こちらの書き方で覚えておきましょう。

「算術演算子」とは、数値の計算に使う + や – などの記号のことです。

算術演算子は以下のようになっています。

+  足し算。 1 + 1

-  引き算。10 – 5

*  かけ算。9 * 9

/  割り算。36 / 6

%  割り算の余り。365 % 7

 

HTMLファイルの body の内部に、次のコードを記述してみましょう。

加算(足し算)の例

 
減算(引き算)の例

 
乗算(かけ算)の例

 
除算(割り算)の例

 
余りの例

 

これで、加減乗除(四則演算)が出来るようになりました。

複合的な例

以上です。
Have Fun !(^c^)

方針

  1. 環境構築する
  2. PHPの基本知識を理解してみる
  3. SQL文の基本知識を理解してみる
  4. phpMyAdminで作ったテーブルの内容を、PHPで表示してみる
  5. 簡易ブログを作ってみる

学習用の開発環境(ローカル)

  • Windows -> XAMPP インストール
  • Mac -> MAMP インストール

PHP:まずはここから

  1. HelloWorld! と表示してみる

MySQL:まずはここから

  1. phpMyAdminにアクセス
  2. データベースを作成する
  3. テーブルを作成する
  4. レコードを作成する

PHP+MySQL:まずはここから

  1. PHPからMySQLに接続する
  2. PHPでSQL文を発行し、MySQLのレコードを取得・表示する

次のステップ

  1. 記事の追加・編集・表示・削除の機能を備えた簡易ブログを作ってみる

※データベースの基本は「CURD」= Create(作成) Update(更新) Read(取得) Delete(削除)

 

スマホアプリからサーバー上のデータを取得する

  • 理想は、API(FOAF)を作ること
  • まずはテキストデータ(タグのないHTML)としてHTTPで表示できるようにして、それをスマホアプリが取得する形
  • データ取得はテキスト形式でも可。データの追加・更新にはAPIを作る必要がある。

 

さらに次のステップ

  • フレームワークを理解する
  • サイト構築・システム開発・API開発が迅速に行える
  • Symfony2 / FuelPHP / CakePHP など…
  • API開発は、FuelPHPを使えれば一瞬でできる

Have Fun !(^o^)

商用サイトの実例

前提
背景画像を、複数層(レイヤー)用意しておく。
動作としては、手前の層のほうが早く動き、奥のほうが遅く動くようにする。
 

考え方
ページのスクロール量が変化するごとに、それぞれの背景を異なるスクロール量変化させる。
移動量がそれぞれ異なる →「違う速度で動いている」
スクロール量をそれぞれ異なる数値で割り算すればよい。
 

HTML

 

CSS

 

JavaScript (jQuery使用)

 
Have Fun !(^o^)