【変数・型・配列・連想配列】
<変数の書き方>
①変数は文字列の先頭に「$」を付けて宣言する。
<?php
$str = 'pタグの中に表示されます';
?>
②変数の名前には英字、数字、「_(アンダーバー)」が使える
<?php
$str = 'pタグの中に表示されます';
?>
③変数の名前の先頭に数字は使えない
(ダメな例)
<?php
$8str = 'pタグの中に表示されます';
?>
----------
【型とは】
変数には「型」というものがある。
型とは「何を中に入れられるか」を決めたもの。
※PHPは変数内に入れたものによって自動的にPC側で判断して型を決めてくれる
----------
【配列とは】
変数(箱)を並べて、1固まりとして見たもの
<書き方>
①配列の名前は変数と同じルール
(さらに array()の中にカンマで区切って値を入れる)
<?php
$array = array(235 , 'これは文字列です' , 3.1415 , FALSE );
?>
※最初に入れる値が決まってないなら「$array = array();」でも可
②配列に値を入れるには [ ] とするか、[ ] の中に番号指定する。
(先頭の番号は0からなので注意)
<?php
$array = array();
(↑配列の最後尾に追加される。今回は配列に何も入ってないので$array[0]に「あいうえお」が入った)
$array = 'あいうえお';
(↑番号で配列の番号指定してる。今回は$array[2]に数値の235が入った)
$array[2] = 235;
?>
③配列の中身を取り出すには、[ ] の中に番号指定する
<?php
$array = array();
$array = 'あいうえお';
(↑「あいうえお」と表示される)
?>
----------
【連想配列とは】
配列と同じだが、「キー」をつけることができる
<書き方>
①連想配列の名前は変数と同じルール。array()の中にカンマで区切って「キー名 => 値」の組み合わせで入れる
<?php
$array = array('スイカ' => '甘い' , 'レモン' =>'酸っぱい' , '柿' => '渋い' );
(↑最初に入れる値が決まってないなら「$array = array();」でも可)
?>
②連想配列に値を入れるには[ ]の中にキー名を指定する。
$array = array();
$array['スイカ'] = '甘い';
(↑指定したキー名がまだなかった場合、新しく連想配列に追加される)
$array['スイカ'] = 'たまに不味い';
(↑キー名で連想配列を指定してる。今回は$array['スイカ']の値が「たまに不味い」に書き換えられた)
③配列の中身を取り出すには[ ]の中にキーを指定するか、番号でもいい
$array = array();
$array['スイカ'] = '甘い';
echo $array[0];
(↑「甘い」と表示される)
echo $array['スイカ'];
(↑「甘い」と表示される)
PHPの書き方
【PHPを作るための手順】
⑴webサーバーソフトをPCへインストール
⑶サーバーへファイルを置く
⑷ブラウザでそのファイルを開く
※サーバー
→何かを保管しておき、誰かから要望があった場合渡す仕組み(PC内にある)
-----
phpファイル
<?php
$str = 'html内にこの文字が表示されます!ブラウザ表示してみるとphpプログラムは見えません!';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>ホームページのタイトル</title>
</head>
<body>
<h1>PHPプログラムを作ってみよう!</h1>
<p><?php echo $str; ?></p>
</body>
</html>
-----
・「$str」→変数を指定(値を保存しておく箱の役割)
・「echo」→その後のもの(文字)を
表示させる命令文(この場合「$str」)
<パス指定>
locallhost:8888/sample/index.php
↑MAMPのフォルダ内のものをサーバーに依頼してブラウザ上で反映
【書き方】
①<?php と ?>タグの間に書く
<?php ←開始タグ
$a = 'あいうえお';
?> ←終了タグ
②1つの命令文の終わりには「;」をつける
<?php
$a = 'あいうえお'; $b = 'かきくけこ';
?>
③外部ファイルを作り、そこにPHPを書く
//htmlファイルのどこにでも外部のphpファイルを読み込むことができる
<?php include('sample.php'); ?>
【書ける場所】
どこでも書ける
----
<?php
$a ='pタグの中に表示';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>ホームページタイトル</title>
</head>
<body>
<p><?php echo $str;?></p>
</body>
</html>
----
<注意点>
⑴1つのファイルに複数のphpブロックがある場合、全部で1つのブロックとして認識される。
⑵全角は「''」「""」で囲む
⑶命令の終わりには「;」を忘れない
js・jQuery【鬼練4】
【鬼練4】
開発ツール(デベロッパーツール)の「console(コンソール)」タブ内に
「彼女:仕事と私どっちを取るのよ!」という文字をに表示させる
その次に
「自分:◯◯◯」を表示させる。
◯◯◯は変数(変数answerとする)にしておき、その変数の中身を表示させる。
変数answerには
「仕事に決まってるだろ!」
「仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。」
のどちらかの文字列をランダムで入れておく。
変数answerの中身が「仕事に決まってるだろ!」だった場合には、
「彼女:あたたたたたたたっーーー!!」と
「自分:ひでぶっ!!」という文字を表示させる
変数answerの中身が「仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。」だった場合には、
「彼女:仕事してこいやーーーーーー!!」と
「自分:ひでぶっ!!」という文字を表示させる
【答え】
var answer = null;
var rand = Math.floor(Math.random()*2);
if(rand){
answer = '仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。';
}else{
answer = '仕事に決まってるだろ!';
}
console.log('彼女:仕事と私どっちを取るのよ!');
console.log('自分:' + answer);
if(answer === '仕事に決まってるだろ!'){
console.log('彼女:あたたたたたたたっーーー!!');
console.log('自分:ひでぶっ!!');
} else if (answer === '仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。') {
console.log('彼女:仕事してこいやーーーーーー!!');
console.log('自分:ひでぶっ!!');
}
【解説】
①変数の定義と初期化
ーーー
var answer = null;
ーーー
↑変数answerを「定義」した
あとあと、この変数に「値」を入れるので、今は空にしておく
「値は空ですよ~」→「null(ヌル)」で入れておく
↑「値は空という意味の値」というわけのわからない意味(そういうもんとして覚える)
ちなみに下記2つのようにも書ける
⑴var answer;
→変数answerは定義したが「初期化」はしていない
⑵var answer = ‘’;
→「空の文字」を入れている。「別名:’’(空文字)」(そういうもんとして覚える)
・空文字:「文字列型の値で中身が空」
・null:「null型」
<定義と初期化の違い>
定義→「この変数使うから箱作ったよ!」=中身には何も入っていない(nullという値も入っていない)
初期化→「定義と同時に値を最初に入れておく」こと
②ランダムな値を変数に入れる
ーーーーーーーーー
var rand = Math.floor(Math.random()*2);
ーーーーーーーーー
↑ランダム値を変数に一旦入れておく
③ランダムな値を判定して文字列を返事として入れる
ーーーー
if(rand){
Answer = ‘仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。’;
}else{
Answer = ‘仕事に決まってるだろ!’;
}
ーーーー
↑変数randには数値型で0,1が入っている。
それをif文で判定して、「if」または「else」の処理で文字列を入れる(どっちでもいい)
<if文の判定結果は自動で変換(キャスト)される>
【前提】
if文の判定は「式」でなくともいい。
ーーーーー
(例①)
if(true){
}
(例②)
if(1){
}
(例③)
if(‘あいうえお’){
}
ーーーーー
↑このような形式でも良い。
つまり、jsでは「値を自動で使いたい型に変換する」という仕組みがある。
どのプログラミング言語も「型」があるので「キャスト」という仕組みがある。
※キャスト → 型を変換すること
・勝手にプログラミング言語がキャストしてしまうのは「js」「PHP」くらい
→if文の()内であれば「true」「false」で判定をしたいから、勝手に「true」「false」の値に勝手に変換する
if(1)~ → if(true)~ と変換
if(‘あいうえお’)~ → if(true)~ と変換
→boolean型に変換さえすれば、if文は判定できる
※1.nullや数値の0や空文字、undefinedという値は「false」
※2. 文字列の「0」や「あいう」などや数値の1は「true」
→if(rand){
answer = '仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。';
}else{
aswer = ‘仕事に決まってるだろ!’;
}
↑このように、if文の中に変数をぶっこんでも判定可となる。
『else』→「それ以外全て」という意味(条件に当てはまらない場合、必ず何かしらの処理をしたい時に使う)
>>「この場合、変数randがtrueだった場合はこっちを処理して、それ以外だった場合はこっちの処理をする」という表しになる。
<ショートハンドで書こう>
ショートハンド→「省略記法」
【書き方】
(判定式)? 何かしらの値A : 何かしらの値B;
(例)
answer = (rand)?'仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。' : '仕事に決まってるだろ!';
→()内の判定式がtrueの場合に「何かしらの値A」が返され、falseなら「何かしらの値B」が返される。
(この場合、変数answerに、その値を入れてる)
<「if」「else if」「else」の組み合わせ>
①ifで始まり
②else ifを書き(複数OK)
③最後にelse
という順番の決まりがある。
<リファクタして書く>
変数answerを定義時に初期化して、初期化時にランダム判定する方法
↓
————————
var answer = (Math.floor(Math.random()*2)) ? '仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。' : '仕事に決まってるだろ!';
console.log('彼女:仕事と私どっちを取るのよ!');
console.log('自分:' + answer);
if(answer === '仕事に決まってるだろ!'){
console.log('彼女:あたたたたたたたっーーー!!');
console.log('自分:ひでぶっ!!');
} else if (answer === '仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。') {
console.log('彼女:仕事してこいやーーーーーー!!');
console.log('自分:ひでぶっ!!');
}
————————
さらに、「連想配列」にしたスマートな書き方だと↓、、
————————
var CHOICE = {
YOUR: '仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。',
WORK: '仕事に決まってるだろ!'
};
var answer =(Math.floor(Math.random()*2))?CHOICE.YOUR : CHOICES.WORK;
console.log(‘彼女:仕事と私どっちとるのよ!’);
console.log(‘自分:’ + answer);
}
if(answer === CHOICE.WORK){
console.log(‘彼女:あたた!’);
}else if(answer === CHOICE.YOUR){
console.log(‘彼女:仕事してこいや!’);
}
console.log(‘自分:ヒデブ!’);
————————
・配列には「名前」を付けられる
・連想配列は{ }で囲った中にカンマで区切って値を入れる
・値には名前が付けられるので『名前: 値(:コロンで区切る)』
※配列でもいいが、『CHOICE[0]』なんかで書いてしまうと、第三者がわかりにくいので「連想配列」で書く方が良い(この場合、『CHOICE.YOUR』)
js・jQuery【鬼練1~3】
【書き方(復習)】
⑴head内にscriptタグで囲って書く
⑵body内にscriptタグで囲って書く
⑶head,body内にscriptタグで書いて作ったjsファイルを読み込む
→基本は ⑶で書くのが当たり前
【鬼練1】
開発ツール(デベロッパーツール)の「console(コンソール)」タブ内に「彼女:仕事と私どっちを取るのよ!」という文字をに表示する
【答え】
console.log('仕事と私どっち取るのよ!');
【解説】
文字列には
「''(シングルクウォート)」
「""(ダブルクウォート)」
で囲えば文字として判別してくれる(外すとエラーになる)
※基本は「シングルクウォート」を使う
【鬼練2】
開発ツール(デベロッパーツール)の「console(コンソール)」タブ内に
「彼女:仕事と私どっちを取るのよ!」という文字をに表示させる
その次に
「自分:◯◯◯」を表示させる。
◯◯◯は変数(変数answerとする)にしておき、その変数の中身を表示させる。
変数answerには「仕事に決まってるだろ!」の文字列を入れておく。
変数answerの中身が「仕事に決まってるだろ!」だった場合には、
「彼女:あたたたたたたたっーーー!!」と
「自分:ひでぶっ!!」という文字を表示させる
【答え】
var answer ='仕事に決まってるだろ!';
console.log('彼女:仕事と私どっち取るのよ!');
console.log('自分:' + answer);
if(answer === '仕事に決まってるだろ!'){
console.log('彼女:あたたたたたたたっーーー!!');
console.log(自分:ひでぶっ!!);
}
【解説】
①変数answerの定義
ーーー
var answer ='仕事に決まってるだろ!';
ーーー
箱(変数answer)を用意してその中に文字列(仕事に決まってるだろ!)を入れておく
※変数→箱(「⑴文字列」「⑵数値」「⑶種類(型)」なりが入れられる(⑵⑶が違う))
②文字列の連結でコンソールに表示
ーーー
console.log('自分:' + answer);
ーーー
・変数を用意したら2つのconsole.logで表示させる
・「+(プラス記号)」で文字列を「連結」させることができる
※この場合、文字列(「自分:」)と変数(answer)を連結させている
・半角スペースや改行はあってもなくても動く
③変数answerの中身をif文で判定する
ーーー
if(answer === '仕事に決まってるだろ!'){
console.log('彼女:あたたたたたたたっーーー!!');
console.log('自分:ひでぶっ!!');
}
ーーー
【書き方】
if(判定したい式を書く){
//「もし、〜なら」の場合に当てはまった時に実行したい処理を書く
}
・jsやPHPでは「==」「!=」は使わないようにする
・「===」「!==」→『厳密比較』という(値の「型」も同じかどうか?まで判定される)
※この場合、『変数answer(の中身)と文字列「仕事に決まってるだろ!」が同じ場合』という意味になる
※左辺右辺も同じ「仕事に決まってるだろ!」という値なので『型も値も同じ』になる
→判定結果は「true」「false」のboolean型で返ってくる
これを踏まえて・・・↓
if(true){
console.log('彼女:あたたたたたたたっーーー!!);
console.log('自分:ひでぶっ!!');
}
に変わる(内部的に変わっていて、目に見えるわけではない)
さらにif文は、、
判定式内が「true」の時に「{ }(波括弧)」内の処理を行う
という決まりがある
【鬼練3】
開発ツール(デベロッパーツール)の「console(コンソール)」タブ内に
「彼女:仕事と私どっちを取るのよ!」という文字をに表示させる
その次に
「自分:◯◯◯」を表示させる。
◯◯◯は変数(変数answerとする)にしておき、その変数の中身を表示させる。
変数answerには「仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。」の文字列を入れておく。
変数answerの中身が「仕事に決まってるだろ!」だった場合には、
「彼女:あたたたたたたたっーーー!!」と
「自分:ひでぶっ!!」という文字を表示させる
変数answerの中身が「仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。」だった場合には、
「彼女:仕事してこいやーーーーーー!!」と
「自分:ひでぶっ!!」という文字を表示させる
【答え】
var answer = '仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。';
console.log('彼女:仕事と私どっちを取るのよ!');
console.log('自分:' + answer);
if(answer === '仕事に決まってるだろ!'){
console.log('彼女:あたたたたたたたっーーー!!');
console.log('自分:ひでぶっ!!');
} else if (answer === '仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。') {
console.log('彼女:仕事してこいやーーーーーー!!');
console.log('自分:ひでぶっ!!');
}
【解説】
else if (answer === '仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。') {
console.log('彼女:仕事してこいやーーーーーー!!');
console.log('自分:ひでぶっ!!');
}
「else if(エルスイフ)文」
<書き方>
if(判定式){
//処理いろいろ1
}else if(判定式){
//処理いろいろ2
}
条件を複数に分けられる
→「もし、〜だった時にこの処理をして、もし◯◯だった時にはこっちの処理をする」
※「else」「if」には半角スペースを入れる
フォームチェック作成 (メモ)
jsファイル
------------------
$(function(){
const MSG_TEXT_MAX = '20文字以内で入力して下さい。';
const MSG_EMPITY ='入力必須です。';
const MSG_EMAIL_TYPE = 'emailの形式ではありません。';
const MSG_TEXTAREA_MAX ='100文字以内で入力してください。';
}
$(".valid-text").keyup(function(){
var form_g = $(this).closest('.form-group');
if($(this).val().length > 20){
form_g.removeClass('has-success').addClass('has-error');
form_g.find('.help-block').text(MSG_TEXT_MAX);
}else{
form_g.removeClass('has-error').addClass('has-success');
form_g.find('.help-block').text('');
}
});
$(".valid-email").keyup(function(){
var form_g = $(this).closest('form-group');
if($(this).val().length === 0 ){
form_g.removeClass('has-success').addClass('has-error');
form_g.find('.help-block').text(MSG_EMPTY);
}else if($(this).val().length > 50 || !$(this).val().match(/^([a-zA-Z0-9]))+([a-zA-Z0-9\._-])*@([a-zA-Z0-9\._-]+)+$/)){
form_g.removeClass('has-sucess').addClass('has-error');
form_g.find('help-block').text(MSG_EMAIL_TYPE);
}else{
form_g.removeClass("has-error").addClass('has-success');
form_g.find('.help-block').text('');
}
});
------------------
解説
・入力フォームの内容をチェックするにはjQueryを使って「バリデーション機能」を作る
・バリデーションを行うには、各フォームに対して「キーが入力されたら〜」というイベントをセットしてあげる
・イベントが発生した時には、if文を使って入力文字数などのチェックしてエラーの場合にはエラーメッセージを表示させる
------------------定数ボックス------------------
$(function(){
const MSG_TEXT_MAX = '20文字以内で入力してください。';
const MSG_EMPITY ='入力必須です。';
const MSG_EMAIL_TYPE ='emailの形式ではありません。';
const MSG_TEXTAREA_MAX ='100文字以内で入力してください。';
ーーーーーーー
定数⇨値を入れる箱(一回書いたら中身を書き換えられない)
書き方)const 〜(基本は大文字)
・エラーメッセージとして表示させる定数
------------------イベント1:名前入力フォーム-----------------
$(".valid-text").keyup(function(){
var form_g = $(this).closest('.form-group');
if($(this).val().length > 20 ){
form_g.removeClass("has-success").addClass('has-error');
form_g.find('.help-block').text(MSG_TSXT_MAX);
}else{
form_g.removeClass('has-error').addClass('has-success');
form_g.find('.help-block').text('');
ーーーーーーー
クラス属性が「valid-text」のものにキーアップイベントを指定⇨function以下の処理が実行
・(this) ⇨ 名前入力フォーム(".valid-text"を指す)
・.closest⇨自分以上の親の要素且つ()の中で指定したものを取得
(今回の場合、名前フォームから見て親要素(form-group))
・length > 20 ){ ⇨文字数20文字を超えた場合
・form_g.removeClass('has-success').addClass('has-error');
⇨ そのノード(要素)に付いてるclass属性「has-success」を削除し、class属性「has-error」を追加
・form_g.find('.help-block').text(MSG_TEXT_MAX);
⇨ class属性「help-block」を探し、そのタグの中のテキストを「MSG_TEXT_MAX」へ書き換える
※find ⇨ 子以下の要素の中で()のものを探す意味合い(この場合"helpーblock")
・}else{ ⇨20文字以内の場合
・form_g.removeClass('has-error').addClass('has-success');
⇨ノードに対して付いているクラス属性を削除
・form_g.find('.help-block').text('');
⇨class属性help-blockを探して「空」にする
【まとめ】
名前入力フォームにキーがある度に、入力された文字数が20文字以上かどうかを判定し、
<20文字以上の場合>
class属性「form-group」にclass属性「has-error」を追加し、
class属性「help-block」がついた要素の中にエラーメッセージを表示させる。
<20文字以内の場合>
「form-group」の「has-error」を削除し、「has-success」を追加し、何も表示させない。
------------------イベント2:emailフォーム-----------------
$(".valid-email").keyup(function(){
var form_g = $(this).closest('.form-group');
if($(this).val().length === 0 ){
form_g.removeClass('has-success').addClass('has-error');
form_g.find('.help-block').text(MSG_EMPTY);
}else if($(this).val().length > 50 || !$(this).val().match(/^([a-zA-Z0-9]))+([a-zA-Z0-9\._-])*@([a-zA-Z0-9\._-]+)+$/) ){
form_g.removeClass('has-success').addClass('has-error');
form_g.find('help-block').text(MSG_EMAIL_TYPE);
}else{
form_g.removeClass('has-error').addClass('has-success');
form_g.find('.help-block').text('');
}
});
ーーーーーーー
!$(this).val().match(/^([a-zA-Z0-9]))+([a-zA-Z0-9\._-])*@([a-zA-Z0-9\._-]+)+$/) )
⇨『正規表現』
<正規表現>
文字列のルールを決めて、そのルールに当てはまるかをチェックする書き方(ルールの書き方)
(この場合はEメール形式かどうか確認している)
※jQueryの場合、「.match」を使う
(例)$('p').val().match(/^(/^AAA/)
・文字列の先頭がAAAで始まってるかどうかを確認
⇨正しいか否かをチェックできる
※「正規表現 email」「正規表現 TEL」などで調べて使うようにする
・入力文字数が50文字を超えた場合、またはEメール形式ではない場合、{ }の処理を実行
cssファイル
------------------
/*バリデーション*/
.help-block{
font-size: 14px;
margin-left: 10px;
}
/*エラー時*/
.has-error input,has-error textarea{
border: 1px solid #ff4ddb;
}
.has-error .help-block,.has-error label{
color: #ff4d4b;
}
/*サクセス時*/
.has-success input,.has-success textarea{
border: 1px solid #2fb4ce;
}
.has-success .help-block,.has-success label{
color: #2fb4ce;
}
・クラス名「has-error」がついた段階でCSSで指定されているものに内容が変わる。
⇨文字色が赤くなり、枠線も赤くなる
・20文字以上の場合、「has-error」というクラス名がつく
・20文字以内の場合、クラス名「has-success」がつき、文字色と枠線が青くなる
【まとめ】
jQuery:判定内容でクラス名を書き換える
CSS:書き換えたクラス名の「見た目(スタイル)」を定義
正規表現:文字列がある形式に沿っているかどうかチェック
jQuery
【jQuery】
javascriptのライブラリ(工作キット)
簡単に書けるツール
<jQueryを使う方法>
⑴jQueryのファイルを作成
⑵headタグ内にjQueryコードを記述
<jQueryの書き方>
$(function(){
//処理をここに書く
});
処理⇨$('セレクター').メソッド(引数);
↑要素選択 ↑何かを行う
(例)
$(function(){
//$('p').click(function(){
$(this).css('color','red;').fadeOut();
});
});
$(function(){
//$('p').click(function(){ ⇨p要素が「クリック」された時、functionを実行する
$(this) ⇨自身=p要素のこと
.css('color','red').fadeOut(); ⇨文字色を赤に変えて、ゆっくり消える
---------------------
<jQueryの便利な点>
・チェインメソッドが使える
(※チェインメソッド⇨メソッドを要素に対して、いくつも繋げられる)
・複雑な処理を実行できる