PHP if文の書き方

PHP if文の書き方

先日、jQuery(JavaScript)のif文の書き方を紹介しましたが、PHPでif文を書くときもほとんど同じ書き方です。

PHPのif文

if( 条件1 ){
  条件1に当てはまる場合の処理
} elseif( 条件2 ){
  条件1に当てはまらず、条件2に当てはまる場合の処理
} else {
  どれにも当てはまらない場合の処理
}

PHPでは、elseif の部分が else if でも動くようです。JavaScriptの場合は else if (スペースあり)しか動かないのでご注意ください。

PHP 変数を囲むクォーテーションについて

PHP 変数を囲むクォーテーションについて

PHPで変数の中身を出力したいとき、囲むクォーテーションの種類によって展開されない(変数に代入した値が表示されない)ことがあるので注意してください。クォーテーションには下のようなルールがあります。

  •  ” ” (ダブルクォーテーション)で囲んだ場合、変数は展開される。
  •  ’ ‘ (シングルクォーテーション)で囲んだ場合、変数は展開されない

シングルクォーテーションでは変数が展開されず、「$sample」 といった風に文字列として出力されてしまいます。

記述例

変数 $sample に「サンプルです」という文字列が入っていた場合の例です。

クォーテーションで囲まない例

echo $sample;

echoで変数の中身を出力するとき、必ずしもクォーテーションで囲む必要はありません。

この例は「サンプルです」と出力されます。

ダブルクォーテーションで囲んだ例

echo "$sample";

ダブルクォーテーションで囲めば変数が展開されます。

この例は「サンプルです」と出力されます。

シングルクォーテーションで囲んだ例

echo '$sample';

シングルクォーテーションで囲むと、変数が展開されず、単なる文字列として出力されてしまいます。

この例は「$sample」と出力されます。

PHP 基本の書き方と変数の定義

PHP 基本の書き方と変数の定義

今回は、PHPの基本的な書き方と、変数を定義する方法を紹介します。

基本の記述

PHPは、プログラムの部分以外HTMLと全く同じように書けます。プログラムを記述する部分のみ、下のようにPHPタグで囲みます。PHPタグの中には通常のHTMLタグをそのまま入れることはできません(後述のechoで文字列として出力することはできます)ので注意してください。

<?php
  ここにプログラムを記述
?>

変数の定義

変数は、文字列や数値を入れておける箱のようなものです。色々なプログラミング言語で出てきます。

PHPで変数を定義するときは、以下のように書きます。変数名は半角英数で付けます。記号は「 _ 」が使えます。また、変数名の先頭には必ず「  $ 」 がつきます。

$変数名 = 変数に入れる内容 ;

ブラウザへの出力

ブラウザに文字列や変数の中身などを表示させたいときは、echo や print という命令を使います。ここではecho の書き方を紹介します。

echo 出力したい文字列や変数 ;

記述例

下記は、変数$sampleに「これはサンプルです。」という文字列を代入し、echoでブラウザに表示する例です。

<?php
  $sample = 'これはサンプルです。';
  echo $sample;
?>

jQuery fadeIn・fadeOutで表示非表示

jQuery fadeIn fadeOut

今回は、要素をふわっと表示する fadeIn と非表示にする fadeOut を紹介します。

fadeInの書き方

$( 表示させる要素 ).fadeIn( 時間 , コールバック );

コールバックは、フェードインが終わった後の動作のことです。

fadeOutの書き方

fadeOut も同じように書くことができます。

$( 表示させる要素 ).fadeOut( 時間 , コールバック );

記述例

下記の例は、#sample1 にホバーしたら #sample2 がフェードインで表示され、マウスポインタを外すとフェードアウトで消える例です。ポップアップの表示などに使えるかもしれません。

$("#sample1").hover(function(){
  $("#sample2").fadeIn("slow");
},function(){
  $("#sample2").fadeOut("slow");
});

DEMO

fadeInとfadeOutのデモ

上記例のデモファイルです。灰色の四角にホバーすると赤い四角が現れます。

参考

jQuery if文を使った条件分岐の方法2

jQuery else if

前々回の記事で「もしAなら○○する」というif文の書き方を紹介し、前回の記事では「もしAなら○○、そうでなければ××」というelse文を紹介しました。今回は、このふたつを組み合わせて「もしAなら○○、AでなくてBなら××」という 書き方を紹介します。

else if の書き方

「もしAなら○○、AでなくてBなら××、BでもなくてCなら……」という風に、if 文で複数の条件を使って分岐を行いたいときは、else と組み合わせて else if 「そうではなくて、もし」という書き方をします。

if( 条件1 ){
  条件1に当てはまる場合の処理
} else if( 条件2 ){
  条件2に当てはまる場合の処理
} else if( 条件3 ){
  条件3に当てはまる場合の処理
} else {
  どれにも当てはまらないときの処理(最後のelseは無くてもOK)
}

記述例

下記は前回の記事で紹介した「答え合わせ」の仕組みに、条件を追加したものです。

フォームに「正解」と入力すると「赤い○」が、フォームに「正解」が入力されておらず、かつ空でないとき(間違った回答のとき)「青い×」が、それ以外のとき(フォームが空のとき)「回答を入力してね!」という文が表示されます。

$("#check").click(function(){
  var answer = $("#answer").val();
  if(answer == "正解"){
    $("#answerArea").css("color","red");
    $("#answerArea").html("○");
  } else if(answer != ""){
    $("#answerArea").css("color","blue");
    $("#answerArea").html("×");
  } else {
    $("#answerArea").css("color","black");
    $("#answerArea").html("回答を入力してね!");
  }
});

DEMO

答え合わせデモ2

上記スクリプトのデモです。

参考

jQuery if文を使った条件分岐の方法2

jQuery else

前回に引き続き、jQueryの条件分岐の書き方を紹介します。今回は、if文で指定した条件に当てはまらなかった場合に別の処理を実行させる else の書き方です。

else文の書き方

else は if とセットで使います。if で指定した条件に当てはまらなかった場合、else に書いた処理が実行される仕組みです。

if( 条件 ){
  条件に当てはまる場合の処理
} else {
  条件に当てはまらない場合の処理
}

記述例

下は、フォームを使った答え合わせの仕組みです。#check がクリックされたとき、フォーム#answerに入力された内容が「正解」なら#answerAreaに赤い「○」、それ以外なら青い「×」が表示されます。

$("#check").click(function(){
  var answer = $("#answer").val();
  if(answer == "正解"){
    $("#answerArea").html("○");
    $("#answerArea").css("color","red");
  } else {
    $("#answerArea").html("×");
    $("#answerArea").css("color","blue");
  }
});

DEMO

答え合わせデモ

上記例のDEMOファイルです。

参考

jQuery if文を使った条件分岐の方法1

jQuery if

今回の記事から3回に分けて、jQueryで条件分岐をする際のif文の書き方を紹介します。if文は「もし~ならAの処理」というように、条件にあった場合のみ処理を実行する条件分岐文です。

if文の書き方

if文は以下のように書きます。

if( 条件 ){
  条件に当てはまる場合の処理
}

条件に当てはまらなかった場合に別の処理を実行する書き方もありますが、それは次回記事で紹介します。

if文の記述例

下は、#sample にホバーしたとき、もし #sample img の display プロパティの値が none だったら fadeIn で表示させる例です。

$("#sample").hover(
  function(){
    if($("#sample img").css("display") == "none"){
      $("#sample img").fadeIn(500);
    }
  }
);

参考

次回記事では、条件に合わなかったときに別の処理を実行する書き方を紹介します。

 

jQuery attrメソッドの使い方2

jQuery attr

前回の記事に引き続き、attrメソッドの使い方です。今回は、HTML属性の値を取得する方法についてです。

属性の値を取得する

attr( 属性名 )

記述例

下記例はimg要素のalt属性の値を .caption という要素に表示する例です。

$(function(){
   var imgAlt = $("img").attr("alt");
   $(".caption").html(imgAlt);
 });

参考

jQuery attrメソッドの使い方1

jQuery attr

今回は、jQueryのattrメソッドについて紹介します。attrメソッドでは、( ) 内に入れる値(引数)によって、HTML属性の値を変更したり、現在の値を取得したりすることができます。

属性の値を変更する

まずは属性の値を変更するときの書き方です。( ) 内の引数は、第一引数が属性名、第二引数が値です。

attr( 属性 , 値 )

記述例

下は、#sample1をクリックしたらid名をsample2に変更する例です。

$("#sample1").click(function(){
  $(this).attr("id","sample2");
});

次回記事では、属性値を取得する方法について書きます。

参考

jQuery cssメソッドの使い方

jQuery css

今回は、jQueryのcssメソッドについて紹介します。cssメソッドでは、( ) 内に入れる値(引数)によって、プロパティの値を変更したり、現在の値を取得したりすることができます。

プロパティの値を変更する

まずはプロパティの値を変更するときの書き方です。( ) 内の引数は、第一引数がプロパティ、第二引数が値です。

css( プロパティ , 値 )

記述例

下は、#sampleをクリックしたら背景色を赤にする例です。

$("#sample").click(function(){
  $(this).css("background-color","red");
});

プロパティの値を取得する

cssメソッドの引数にプロパティのみ書いた場合、そのプロパティの値を取得します。

css( プロパティ )

記述例

下は、クリックされたdiv要素の背景色を#color-nameに表示する例です。

$("div").click(function(){
  var color = $(this).css("background-color");
  $("#color-name").html(color);
});

参考