• まよなかWEB
  • BLOG
  • PHP、JS(Jquery)基本構文、よく使うけれど忘れがちなHTML、CSSその他もろもろ

PHP、JS(Jquery)基本構文、よく使うけれど忘れがちなHTML、CSSその他もろもろ

2018年01月29日

PHP基本構文（くり返し系）

●for文

<?php
for (①初期化; ②ループ条件; ③変数の更新){
④処理;
};
?>

※1から100までの数字をechoする例
<?php
for ($i=1; $i<=100; $i++){
echo $i;
};
?>


●foreach文

※通常の配列の場合
<?php
$towns = array('東京','大阪','京都');
foreach($towns as $town){
echo $town;
};
?>

※連想配列の場合
<?php
$colors = array(
'tomato'=>'red',
'banana'=>'yellow',
'grape'=>'purple',
);
foreach($colors as $key => $value){
echo $key.':'.$value;
};
?>


●while文

<?php
①初期化
while (②ループ条件){
③繰り返す処理
④変数の更新
};
?>

※1から100までの数字をechoする例
<?php
$i =1;
while($i<=100){
echo $i;
$i++;
};
?>

※while文は、開き波括弧{をコロン(:)、閉じ波括弧}をendwhile;に変更することができる。wordpressでよく使われる


●break

※$iが5より大きい場合はfor文を終了
<?php
for($i=1; $i<=10; $i++){
if($i>5){
break;
}
echo $i;
};
?>

break文は現在のループを強制的に中断する命令。繰り返し文の中で利用する。break文はif文などの条件文と組み合わせて利用するのが一般的。

●continue

※$iが2の倍数のときはその周をスキップして次の周を実行
<?php
for($i=1; $i<=10; $i++){
if($i % 2==0){
continue;
}
echo $i;
};
?>

ループそのものを抜けるbreak文に対して、continue文は現在の周だけをスキップし、ループそのものは継続して実行する。


●定義済み変数（スーパーグローバル変数）、マジカル定数

・フォームでmethod="get"→$_GET
・フォームでmethod="post"→$_POST
・フォームから送信した添付ファイル→$_FILES

PHPでフォームからデータを受け取るには、
・input type="text"の場合…$_POST['inputのnameの値']
・input type="file"の場合…$_POST['inputのnameの値']['○○○']

※〇〇○にはname（ファイル名）、type（MIMEタイプ）、tmp-name（一時ファイル名）、error（エラーコード）、size（ファイルサイズ）のいずれかを入れる 

・__FILE__…ファイルのフルパスとファイル名を取得するマジカル定数
・__DIR__…ファイルのフルパスを取得するマジカル定数


●エスケープ

¥n    改行
¥r    キャリッジリターン
¥t    タブ
¥¥    ¥文字
¥$    $文字
¥(    左括弧
¥)    右括弧
¥[    左括弧
¥]    右括弧
¥'    シングルクオーテーション
¥"    ダブルクオーテーション
¥nnn  8 進数表記
¥xnn  16 進数表記

エスケープシーケンスはダブルクオーテーションで囲まれた文字列の場合にだけ意味を持つ
エスケープ処理を行って文字列の開始と終了を表す引用符「”」を単に文字列を括る文字として出力する。

JS、Jquery基本構文

対象要素.on( イベント名, セレクタ, データ ,関数 )

<script>
$('対象要素').on('click', function() {
$("対象要素").css("margin-bottom", "20px");
})
</script>

on()のイベント名
change　　フォーム部品の状態に何らかの変化があった時に発動
click　　要素がクリックされた時に発動
blur / focus　　要素にフォーカスが当たったとき(focus)、外れたとき(blur)に発動
load　　ドキュメントが読み込まれたあとに発動
resize　　ウィンドウサイズが変化した時に発動
scroll　　画面がスクロールした時に発動
keyup / keypress　　キーボードのキーが押された時(keypress)、離された時(keyup)に発動
mouseup / mousedown　　マウスのボタンが押された時(mousedown)、離された時(mouseup)に発動
mousemove　　指定の要素内でマウスが動いている時に発動
submit　　フォームが送信された時に発動
error　　何らかのJavaScriptエラーが発生した時に発動

・click()とon()の違い
途中でHTML要素を追加した場合、「click()」のイベント処理は動作しない

※セレクタは対象要素内でさらに指定したセレクタからのイベントだけを確認するように設定できる。
※データは関数に引数として渡すときなどに使用する。
※通常はイベント名と関数のみが多い 


●html入れ替え（上書き）
対象要素の中に「」で書いた内容が出力される
$('対象要素').html('「ここにhtmlを書く」');

●html追加
$('対象要素').append('「ここにhtmlを書く」');

●HTML要素を取得する
document.getElementById('id名')

●HTML 要素の様々な属性の値を取得や変更
対象要素に任意のidが付与（変更）される
$('対象要素').attr('id', 'my_title');

まとめて付与（変更）
$('h1').attr({
id:'my_id',
class:'class1 class2',
name:'hello'
});

HTML

●外部リンクを新規タブで開くときにaタグに付与
target="_blank" rel="noopener"

●NotoSansJP CDN
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">

●no-index
<meta name=”robots” content=”noindex” />

●cssキャッシュバスティング
?<?php echo date('Ymd-Hi'); ?>

●パーツPHP読み込み
<?php include('header.php'); ?>

CSS

●２行目以降インデント
padding-left:1em;
text-indent:-1em;

● flex
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
/* 以下、デフォルト（指定しないとこの値が使用） */
flex-direction: row; /*子要素の並ぶ向き */
align-items: stretch; /* 垂直方向の揃え */
justify-content: flex-start; /*水平方向の揃え */
flex-wrap: nowrap; /* 子要素の折り返し */
align-content: stretch; /* 複数行にした時の揃え */

● float、clearfix
.clearfix{
display:block;
}

.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

その他

●robots.txt
User-agent:*
Disallow : /test/
Sitemap:https://www.exmple.com/sitemap.xml

●.htaccess
<ifModule mod_rewrite.c>
RewriteEngine on

・SSLに転送
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]

・wwwなしにリダイレクト
RewriteCond %{HTTP_HOST} ^www\.example\.com$
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]

・wwwありにリダイレクト
RewriteCond %{HTTP_HOST} ^example\.com
RewriteRule (.*) https://www.example.com/$1 [R=301,L]

</ifModule>


・キャッシュ設定
<Files ~ ".(gif|jpe?g|png|svg|ico|otf|ttf|eot|woff)$">
Header set Cache-Control "max-age=2592000, public"
</Files>