0ぷろ!

PCに対しての知識が0の人間が半年でどこまで成長するかを自分で記録するブログ

11日目^^

ついに!cloud9を使ってHTMLやらなんやらをWebにup出来ました!

一回upし直したら出来るとかなんだたんだろう...

 

はい。今日の進捗です。

今日は

javascript

12.switch文
13.配列文
14.for文
15.while文
16.外部ファイル

http://www.pori2.net/js/kihon/16.html

php

phpの基礎を学ぼう
変数ってなに? 配列ってなに? 演算子って? 関数は? 条件分岐「IF」
をやりました。

http://www.flzphp.com/second.php?page_num=4

 

それぞれ参考サイトを貼りました。

感想としては、今のところjavascriptphpも基本はほぼ一緒...

なので本日のphp説明に関しては10日目と本日のjavascript説明と

比較しながら見るとわかりやすいと思います。

リンクを貼るのでソースを見てください。

 

まずはjavascriptについてです。

switch文

switch文は条件分岐で答えが二通り(Yes or No)しかないif文とは違い一回の命令で何通りにも分岐できる。

例:本日の曜日を表示する。

    var today = new Date();

    var week = today.getDay();

↑曜日取得するための文

    switch(week){

    case 0: document.write(“Sunday”);break;

    case 1: document.write(“Monday”);break;

    case 2: document.write(“Tuesday”);break;

    case 3: document.write(“Wednesday”);break;

    case 4: document.write(“Thursday”);break;

    case 5: document.write(“Friday”);break;

    default: document.write(“Saturday”);break;

    }

↑条件分岐するための文

 

曜日取得文の説明は後ほど。

変数 today に今日の日付データの一式を格納、

変数weekにtodayの中の「曜日」にあたるデータを代入している。

曜日に該当するデータは数字で表され、(日曜は0~土曜は6)その数字が case~に代入されると対応した文が表示される。

 

swich文の説明

switch ( 条件式 ) {

  case 値1 : 処理1; break;

  case 値2 : 処理2; break;

  …

  default : 処理3; break;

}

 

switch文の後に括弧があり、そこに条件となる変数等を指定する。switchによる条件分岐群は中括弧で囲む。

次に各条件を”case"の後ろに指定。上記例の場合は6つの条件に分けている。caseの後に空白を挟み、変数weekの値を記入する。

その後に” : "(コロン)で〆て、条件にあった場合の処理を記入する。

case内の条件の最後の”break”の意味はswitch文から”抜け出せ”という命令を送る文。必ず記入する。

最後の行の”default”は”その他条件”という意味。

上記例で言えば”0~5"どれでもなかった場合に実行される。

 

まとめ。

 switch文は条件式により複数の処理に分岐する。

 条件式の結果が case: の後に記入された値に合致すれば、それ以降の処理を実行する。

 各caseの最後には、break; を入れてswitch分を抜け出す。

 default:は、どの case の値にも合致しなかった場合に記入される。

 

上記例ではcase文、default文を一行で書いているが、複数業で書く事も可能。

例:switch(条件式){

    case 分岐1:

    式 ;

    式 ;

    break;

    case 分岐2:

    式 ; 

    ・

    ・

    ・

    default:

    式 ;

    式 ;

    break;

   }

 

 

 

配列

配列とは順番の付いた変数。

 

例:var yobi=new Array( ) ;

 

  yobi[0] = “Sunday”;

  yobi[1] = “Monday”;

  yobi[2] = “Tuesday”;

  yobi[3] = “Wednesday”;

  yobi[4] = “Thursday”;

  yobi[5] = “Friday”;

  yobi[6] = “Saturday”

 

  var today = new Date( );

  var week = today.getDay( );

  

  document.write(今日は+“”)

 

配列の書き方

 まず配列yobiを、var yobi=new Array( )と書いて宣言する。

これにより、配列yobiは連番の付いた変数を持つ事が可能になる。

var 配列名 = new Array()

配列を宣言する。配列名は任意。

 次に配列yobiへ順番に値を代入する。配列の時には変数のあとに大括弧[]を記入し、その中に配列の何番目かを記入する。

 それから、switch文と同じ曜日を求めるスクリプトを記入する。

 最後に曜日の書き出し、配列yobiの何番目を書き出すかを指定するのに大括弧 [ ] を使用する。

 その配列の中には変数weekが入っており、今日が金曜なので”5”が代入され Friday が表示される。

 

 

簡単な配列の書き方

var yobi = new Array(“日曜”,”月曜”,”火曜”,…”,土曜”);

 

new Array( )の括弧内に順番に値を入れる。値と値の間は,( カンマ )で区切る。

 括弧内で改行も出来る。

var yobi = new Array(

“日曜”,

“月曜”,

“火曜”,

“土曜”  );

最後にカンマを付けてしまったり、値と値の間以外で改行したりするとエラーになるので注意。

 

 

 

 

 

 

 

 

for文

for文とは繰り返し文のこと。

while文というものもある。

for文は繰り返し回数が決まっているものに対して使う。

 

例:for (var i=1 ; i<=10 ; i++){

     document.write(“お酒飲みたい。<br>”);

     }

 

繰り返し文になるのは{ }内の内容。

forの後の()内に繰り返しの方法を指定し、その中には3つの区分がある。

(var i=1 ; i<=10 ; i++)

 最初の区分には” i “に1が代入されている。

繰り返しの指定では” i “を用いるのが通常だが、一応任意ではある。そして” ; “で区切る。

 次の区分では繰り返しの条件を指定する。

上記の例では、iの値が10以下の場合に繰り返すように指定されている。そして” ; “で区切る。

 最後は” i “の値の増減を決めている。

通常は上記のように” i++ “のようにする。

この演算子により、iの値が()内で10になるまで繰り返す、という事を指定している。

 

まとめ。

for ( var i = 初期値 ; 繰り返し条件 ; i++){ 処理 }

条件を満たしている間は処理を繰り返す。

 

 

*配列との組み合わせ*

例:var rank = 1;

  var mnt = new Array(

  “京都”,

  “秋田”,

  ”広島”,

  ”高知”,

  “福岡"

  ); 

  

  for(var i=0 ; i<=4 ; i++ ){

  document.write(‘<tr>')

  document.write(‘<td>'+rank+’位</td>’);

  document.write(‘<td>’+mnt[ i ]+’</td>’);

  document.write(‘</tr>')

  rank++;

      }

 

rankという変数を使って順位の部分を書き出しています。 for文の最後にrank++を入れて、一回処理されるごとに1ずつ増やしているわけです。 わざわざ変数rankを指定しなくてもiを使えばいいのですが、 サイトの流れに添ってやっているため…

 

 

coutinueとbreak

繰り返し文では、繰り返し処理から抜けるbreakと、繰り返し処理の先頭に戻るcontinueというものがある。

例:for( var i=1 ; i<=10 ; i++){

     if(i==3)continue;

     if(i==7)break;

     document.write(i+”回目の繰り返しである<br>”);

     }

 この結果を先に言うと、3回目が抜け落ちている。

これは”continue”の命令である。 continue は"指定された処理を無視して次の処理を行いなさい”という意味。

 さらにfor文では i が10になるまで、という命令が入っているのにも関わらず、実際は6までしか表示されていない。

これはbreakの命令で、iが7になった時に"for文から抜け出せ”という命令が実行されているからである。

 

break

   繰り返し文から抜け出せという命令をする

continue

  指定した処理をスルーして、繰り返し文の先頭に戻れ、という命令をする。

 

 

 

 

 

 

while文

繰り返しを何回することで条件を満たすのかわからない場合に使う。

例:「1+2+3+・・・」でいくつ足すと合計が4桁になるかを調べる。

  var num=0;

  var goukei=0;

  

  while( goukei < 1000){

  num++;

  goukei = goukei + num ;

  }

  

  document.write(num);

 

while文の書き方

2つの変数の宣言をする。numには連番を、goukeiにはnumを加えた合計を代入する。

 次にwhile文が登場する。whileの後の括弧()内に条件を記入する。

上記例の場合だとgoukeiが1000より少なければ、中括弧内の処理を繰り返すことになる。

 

まとめ。

while ( 繰り返しの条件 ){ 条件 }

  条件を満たしている間、中括弧内の処理を繰り返す。

中括弧内の処理を見てみると、まず最初にnumの値に1つ加える。そしてgoukeiに加える。

そして4桁になった時点でnumの値が表示される。

 

 

 

 

 

 

外部ファイル

 

ちょっと前にやりましたね。

Javascriptを外部ファイルとして本体HTMLに取り付ける。

外部ファイルにソースを記入することで色々なページから参照することができるので、よく使う関数などは書き込んでおくと後々楽。

さらに<script>~</scuript>を記入する必要もなくなる。

 

やり方。

JsavaScriptの拡張子を ” . js ”にする。

HTMLの<head> ~</head>内に

<script type=“text/javascript” src=“JSファイルのパス”></script>

を記入するだけ。

 

 

じゃばすく2

以上がjavascriptでの進捗でした。

 

=======================================

 

続いてphpです。

本当にjavascriptの内容に近かったので、自分なりに大事だなと思った

ところをまとめています。

 

php

過去に少しだけ触った事があるが、おさらいも兼ねて最初から。

Hypertext Preprocessorの略

 

記入方法

<?php

echo=“お酒飲みたい”;

>

 

・形式はそのままに””内に文章を書き込むのが基本。

phpはbody内に限らず様々な所に記入できる。

・head内やhtmlタグ外にも記入可能。

・改行は” ; “で出来る。

・基本的にはだいたいの記述は小文字で行うが、大文字でも出来る。ただし、必ず大文字を使わなくてはならない場面もあるので注意する。

phpの記述内に全角スペースを入れてはならない。

全角が使えるのは ”” と ‘’ 内のみ。

半角スペースなら入れても良い。

・クォーテーションの違い

「 ”” 」ダブルクォーテーションと「 '' 」シングルクォーテーションは一見同じ使い方ではあるがその役割は微妙に違う。これは後ほど記述する。

 

・コメントの書き方

一行であれば “// “の後に、

複数文であれば“/*~*/“でくくる。

 例1:<?php

           echo”お酒飲みたい”;      //日本酒がいい

こうすると”//日本酒がいい”はページに表示されない。

 

   例2:<?php

           echo”お酒飲みたい”  /*日本酒もいいけど

    久しぶりにワインも…*/

こうすると”日本酒もいいけど久しぶりにワインも…”

はページに表示されない。

 

拡張子phpにする。

文字コードEUC、改行はLF

 

phpにおける変数記入方法

$varが変数、phpでは変数には必ず$をつける。

例:<?php

  $var=“お酒飲みたい”;

  echo $var;

  ?>

これで”お酒飲みたい”が表示される。

数字の時は ” ” が必要ない。

 

 

 

 

 

 

配列

変数に [ ] を付けてその中に番号を入れ、

echo $var [ ] ; に表示させる。

echo $var [ ] ; で番号を指定する指定された変数が表示される。

変数のどれにも [ ] 内に番号を指定しなかった場合は

自動的に上から0.1.2と番号が振り分けられる。

*配数は0からカウントされている。これを連想番号という。

数字ではなくとも文字を変数にしてもよい。

f:id:ysm_0pro:20160325184815p:plain

 

 

 

 

 

演算子とは?

・算術演算子:四則計算

・比較演算子:大きいか小さいかの判断

・論理演算子:二つの内両方か片方か

・代入演算子:変数に代入

・文字列演算子:文字を繋ぐ

・複合演算子:四則計算の複合形

など。

 

 

算術演算子

f:id:ysm_0pro:20160325185128p:plain

ループ(制御構造)で ”$a++”は大事 。

 

 

 

比較演算子

f:id:ysm_0pro:20160325185221p:plain

これはif文でよく使われる。

 

 

 

論理演算子

f:id:ysm_0pro:20160325185412p:plain

 

 

 

代入演算子 文字列演算子

f:id:ysm_0pro:20160325185433p:plain

“=“は代入、”==“は同じという意味

 

複合演算子

f:id:ysm_0pro:20160325185523p:plain

 

 

 

 

 

関数とは?

関数には最初からプログラムとして用意されているものと、

自分で作れるものがある。

 

はじめからある関数

例:<?php

     $time = (“Y年n月j日h時i分s秒”)

     echo $time;

     ?>

実行結果はファイルを開いたその年の、その月の、その日の、その時間の、その分の、その秒が表示される。

フォーマットに使う文字はだいたいこのくらいある。

f:id:ysm_0pro:20160325185709p:plain

 

 

自分で作る関数

functionが関数を定義する言葉。

 

例:<?php

     function tax($nedan) {

     $zeikomi = $nedan * 1.08;

     return $zeikomi

     }

     echo tax(500);

     ?>

これは500円のものを買った時の消費税を表す。

まず、”function tax($nedan)”でtaxという値段を定義する。

”$zeikomi = $nedan * 1.08;”で tax の中の値段に 1.08 かけた数字が $zeikomi であるということの定義。

"return $zeikomi;”で、この関数を使った時に$zeikomiの関数を返す。

“echo tax(500);”で、定義した関数を使い、500の税込を表示する。

 

まとめ

function 関数の名前(入る文字や数字){

計算内容

return 出てくる言葉や文字

}

 

 

 

条件分岐 if文

if文は指定された条件に対して結果が合っていれば

それが表示され、あっていなかったら次の結果が表示させるスプリクト

例:$word=“ビール”;

  if($word==“ビール”) {

  $material=“麦芽”;

  } else {

  $material=“??";

  }

  echo $koe;

変数wordをビール以外のものにすれば??が表示される。

 

 

条件を増やしても出来る。

例:$word=“ワイン”;

  if($word==“ビール”){

  $material=“麦芽”;

      }else if($word==“日本酒”) {

  $material=“米”;

  }else($word==“ワイン”) {

      $material=“ぶどう”; 

      }

  echo $word;

答えはぶどうとなる。

else if は何回でも加えられるのでたくさんの選択肢を用意できる。

 

まとめ

  if(条件1)  {

      条件1に合う時の命令(trueの時)

      }  else  if  (条件2) {

  条件2に合う時の命令(trueの時)

  }  else  {

      条件1,2共に合わない時に表示される

  }

 

 

http://www.flzphp.com/second.php?page_num=4

 

 

最後はタイピング

ついに!A行きました!!

f:id:ysm_0pro:20160325185837p:plain

永かった...

 

 

以上が本日の進捗となります。