jQueryの練習【keypress/keyup/addClass/removeClass/this】
今回jQueryでやってみた練習はこちらです。
① テキストを入力するためにキーを押すと、フォームの入力部分の背景色が変わる。 ＋ 赤色で「keypressすると文字色が変わります」という文が出現。 ②テキストを入力し終わってキーを離すと、フォームの入力部分の背景色が戻る。 ＋ 青色で「keyupすると文字色が変わります」の文が出現。
この２つの動作が加わるよう、html/css/jQueryで書いてみました。
実際に作ってみたものがこちら。
jQueryの良い復習になりました。
【作り方】
html（つけたファイル名：test.html）
まずはhtmlでテキスト入力フォームを作ります。
作ったあとに気づいたのですが、「送信ボタン」を使いません。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>javascriptで練習</title> <link rel="stylesheet" href="style.css"> </head> <body> <form method="post" action="" class="formArea"> <div class="formItem"> テキストを入力してください。 <input type="text" name="" class="inputText js-key-text" autocomplete="off"> <!-- フォームに入力があったらここにも変化が起こる --> <span class="msgArea js-set-msg-text"></span> </div> <input type="submit" value="送信" class="btn"> </form> <!--jQuery--> <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> <script src="test.js"></script> </body> </html>
jQuery(つけたファイル名：test.js)
jQueryは以下のように書いてみました。
細かくコメントも書いたので、学習に役立つと思います。
$(function(){ //$('.js-key-text')に対して、【keypress（キーを押したとき）】をしたとき、function(e)以下を実行 $('.js-key-text').on('keypress',function(e){ // まずは下の「keyup」イベントで追加されたクラス名「unchange-colorBlue」を取りのぞく。 $('.js-set-msg-text').removeClass('change-colorBlue'); // クラス名「change-color」を追加する。 $('.js-set-msg-text').addClass('change-colorRed'); // テキスト文を表示させる。 $('.js-set-msg-text').text('keypressすると文字色が変わります'); // $(this) = $('.js-key-text')にクラス名「change-background」を追加。 $(this).addClass('change-background'); }); //$('.js-key-text')に対して、【keyup（キーを離したとき）】をしたとき、function(e)以下を実行 $('.js-key-text').on('keyup',function(e){ // まずは上の「keypress」で追加されたクラス名「unchange-colorRed」を取りのぞく。 $('.js-set-msg-text').removeClass('change-colorRed'); // クラス名「change-colorBlue」を追加する。 $('.js-set-msg-text').addClass('change-colorBlue'); // テキスト文を表示させる。 $('.js-set-msg-text').text('keyupすると文字色が変わります'); // $(this) = $('.js-key-text')にクラス名「change-background」が追加されているから、それを取り除く。 $(this).removeClass('change-background'); }); });
使ったもの、勉強になったこと
【イベント】
keypress: キーを押し込んだとき
keyup: キーを離したとき
【メソッド】
addClass: クラスを追加する
removeClass: クラスを取り除く
【その他】
$(this): 自分自身を表す。
この$(this)は、「$('.js-key-text')」を表しています。
thisには「’’」（シングルクォーテーション）がいらないのが要注意！（自分が間違えた）
CSS（つけたファイル名：style.css）
CSSはhtmlが見やすいようにスタイルを当てて、追加した文は以下のものです。
.change-colorRed{ color: #ff1493; } .change-colorBlue{ color: #32aaaa; } .inputText.change-background{ background: #f0f222; }
CSSに追加したこの３つのクラスを、jQueryでhtmlに追加したり、取り除いたりしています。
初歩中の初歩だと思いますが、自分で作れたのが嬉しい！
javascript/jQueryの練習として
「クラスをつけたり外したりして文字色を変える」のが初学者にはおすすめ
とどこで読んだか忘れてしまいましたが、そんな話を聞いたことがあります。
javascript/jQueryで文字色を直接変えるより、クラスの追加・削除だけした方が読み込みスピードが速くなるし
クラスの追加・削除を業務上使う機会が多いから。という理由だったと思います。
誰かの参考になれば幸いです。
mt_rand()に「!」をつけると？
mt_rand()という乱数発生の関数があります。これを「！」で否定するとどうなるのでしょうか？
先に結論から言ってしまうと
mt_rand(0,9)に「！」をつけると、0がtrueで返ってきて1〜9がfalseで返ってきます。
つまり10分の1の確率を出すことができます。
mt_rand()という関数についてですが、
mt_rand()は「乱数を発生」する関数です。
（）の中に入る引数をコンマで区切ると乱数の範囲を指定できます。
mt_rand(10,40)なら10〜40までの間のランダムな数、となります。
mt_rand(0,9)を実行すると0〜9の間の10個の数がランダムに発生しますよね。
以下のコードを実行すると
<?php $a = mt_rand(0,9); echo '変数aには「'.$a.'」がはいっています。<br>'; $b =!mt_rand(0,9); echo '!mt_randの変数bには「'.$b.'」がはいっています。<br>'; ?>
変数bには、だいたい10回に1回、下の画像のように「１」が返ってきます。
なぜ「１」なの？
10回に1回の確率で、!mt_randの変数bには「１」が入っていました。
以下のコードを書いてみると、
<?php $test = 0; echo 'testの中身は' . $test .'です。'; echo '<br>'; if ($test) { echo 'test is true'; } else { echo 'test is false'; } echo '<br>'; $test = 1; echo 'testの中身は' . $test .'です。'; echo '<br>'; if ($test) { echo 'test is true'; } else { echo 'test is false'; } ?>
↑
$test = 0;
なのに、「test is false」が返ってくるんです。
これはなぜかというと、
「phpでは中身が0の変数をif文で評価すると、falseになる」ためです。
なので、さっきの「!mt_rand(0,9)」のコードを書くと
だいたい10回に1回、「1」が返ってきていたのは10回に1回「0」が返ってきていたからです。
じゃあ、「!mt_rand(0,9)」の「！」はなにを否定してるのでしょうか？
mt_rand(0,9)でランダムな数が返ってくると頭が混乱するので、さっきの「$test」を使いましょう。
【 $test = 0のとき】
変数$testに、 0 を入れます。
そうすると、
if ($test) {}
は
if (false) {}
になります。
（※phpでは中身が0の変数をif文で評価すると、falseになるから）
もっと具体的に言うと、、、
<?php $test = 0; echo 'testの中身は' . $test .'です。'; echo '<br>'; if ($test) { echo 'test is true'; } else { echo 'test is false'; } echo '<br>'; $test = 0; echo 'testの中身は' . $test .'です。'; echo '<br>'; if (false) { echo 'test is true'; } else { echo 'test is false'; } ?>
これを実行すると、下の画像のようになります。
ここで「！」を登場させます。
if (false) {}
を
if (!false) {}
にすれば、このif文の評価は「true」になります。
そしてfalseは$testのことだから、
if (!false) {}
を
if (!$test) {}
に変えれば$test = 0のときtrueが返ってくるif文の完成！
※trueのときは「１」、falseのときは「””（空文字）」が返ってきます。
（参考記事：https://wemo.tech/623）
mt_rand(0,9)を「$test = 0」の代わりに使ってみる
$test = 0のときにfalseになるから、 if文に入れるときに
if (!$test) {}
としました。これで$test = 0のとき、trueになりますよね。
じゃあ、【!mt_rand(0,9)】にすると？
数字が0のときはtrue それ以外（1〜9）のときはfalse
が返ってきます。
$test = !mt_rand(0, 9);
として、以下のコードを実行してみると
<?php $test = !mt_rand(0, 9); echo 'testの中身は' . $test .'です。'; echo '<br>'; if ($test) { echo 'test is true。10分の1の方です'; } else { echo 'test is false！10分の9の方です'; } ?>
１〜９ならこの画面が出ます。
0ならこの画面が出ます。
なので、
if(!mt_rand(0,9)){ }
と書けば10分の1の確率で0（true）が出て、10分の9の確率で1〜9（false）が出る
ということになります。
可読性を上げるなら
$is_critical = (0 == mt_rand(0,9));
if($is_critical){}
と書いた方がわかりやすいと思います。
$is_critical = (0 == mt_rand(0,9)); →意味：「ランダムに発生する0〜9の数字のうち、0のとき」を変数$is_criticalに入れる
「防御力を5分の1の確率でアップさせる（5分の4でダウン）。」
これを使って、
「防御力を5分の1の確率でアップさせる（5分の4でダウン）。」
というコードを書くと
<?php $defensePower = 100; function Defense(){ global $defensePower; echo 'あなたの防御力は'.$defensePower.'です<br>'; echo 'ス○ラを唱えた！<br>'; // 5分の1の確率で防御力を上げたい $is_critical = (mt_rand(0,4) == 0); if($is_critical){ $defensePower = $defensePower * 1.5; echo '魔法成功！防御力アップ！<br>'; echo 'あなたの防御力は'.$defensePower.'になった！'; }else{ $defensePower = $defensePower * 0.5; echo '魔法失敗。。。<br>'; echo 'あなたの防御力は'.$defensePower.'になった！'; } } echo Defense(); ?>
というような感じになります。
画面にはリロードしまくると、どちらかが出ます。
↓こちらが「0」が出たとき。
↓こちらが「1〜9」が出たとき。
注意点
・If (!mt_rand(0,9)){}ができるのは、phpの言語仕様のおかげ。0がfalseやemptyとして評価されるから。多言語で同じことをしたいときは使用を必ずチェックすること！
・可読性は良くないが、今回のように書いているエンジニアもいる。
・本家の魔法「スカラ」は失敗しても防御力は下がりません。
必ずしもきれいなコードに出会えるわけではないと思うので、今回のこの問題（？）は良い勉強になりました！
アイコンがpng画像で色を変えたいとき
アイコンがpng画像で指定されるのはLP作成ではよくあることなのでしょうか？
（今までサイトからダウンロードして使用するか、CDN利用しかありませんでした。fontawesomeバンザイ！！）
「png画像を使ってね、このフォルダの中にあるからね」
といわれ、見てみたけれど
「この画像の色ってどうやって変更するの？！」
状態でした。
この色のアイコンを・・・
この色にしたい。
cssで変更できるかな？と調べてみても方法は出てこず。。。
そこで思い出しました。
自分がphotoshopを持っていることを。
（もう上の画像で出てますが）
photoshopで色を変えてみよう！ということで、やり方をまとめてみました。
①photoshopでファイルを開く。
②「レイヤー１」を右クリックして「レイヤー効果」を選ぶ
③「カラーオーバーレイ」にチェックをつけて、クリック。
②でレイヤー効果を押すと、「レイヤースタイル」というのが出てきます。
この「レイヤースタイル」から「カラーオーバーレイ」にチェックをつけて、クリック。
④アイコンのカラーを選択
この画像でいうと、白いボックス（人によって色が違うかも）をクリックします。
そうすると、どんな色にするか選択できるので、したい色を選びましょう。
⑤完成＆保存
赤いドル袋の完成！！！
保存するときは「別名で保存」（mac : command+shift+S）で新たに名前をつけて保存しました、僕は。
というわけで、アイコンの色を変更したいときにはこの方法でやっていこうと思います。
参考になれば嬉しいです。
inputタグの中身を送りたいのに送れない
「formタグの内容を送りたいのに送れない！！」
ってなったときにミスに気づくのに時間がかかりました。
正確には
「formタグの中に送りたい内容をいれた。そして送信のためのボタンも押した！
なのにname属性の値とvalue属性の値がphp側に送られていない。」
という状況です。
$_POST['name属性の中身']をゲットしたいのに、それがゲットできない。
という状況でした。
※php言語、htmlを使用
さて、コードですがまずは正しいコードを。
これは正しいコード ↓
<form action="" method="post" class="form"> <h2 class="title">ログイン</h2> <!-- メールアドレス --> <label class=""> メールアドレス <input type="text" name="email" value=""> </label> <br> <!-- パスワード --> <label class=""> パスワード <input type="password" name="pass" value=""> </label> <br> <label> <input type="checkbox" name="pass_save">次回ログインを省略する </label> <br> <div class="btn-container"> <input type="submit" class="btn btn-mid" value="ログイン"> </div> </form>
見た目はこうなります。
formの外に出すとinputタグの中身は送れない
で、どう間違えたかというと
<form action="" method="post" class="form"> <h2 class="title">ログイン</h2> <!-- メールアドレス --> <label class=""> メールアドレス <input type="text" name="email" value=""> </label> <br> <!-- パスワード --> <label class=""> パスワード <input type="password" name="pass" value=""> </label> <br> <label> <input type="checkbox" name="pass_save">次回ログインを省略する </label> <br> </form> --ここがミス-- <div class="btn-container"> <input type="submit" class="btn btn-mid" value="ログイン"> </div> --ここがミス--
form外に
<input type="submit" class="btn btn-mid" value="ログイン">
を置いてしまっていたので、いくらログインボタンを押しても無駄でした。
あとよくあるミスは一行目の
<form action="" method="post" class="form">
でmethodを指定してなかったり、、、 （僕はmethodを指定せず送ったときもだめだった気がします）
ちなみに
action属性
送信先のファイルのパスを指定する部分。
送信ボタンを押した際にここで指定したファイルにデータの送信と同時に遷移（移動）を行う。
method属性
どういった方法で(postかgetか)データを送信するかを指定する。
post:送信する内容を目に見えないように隠して送信する。
get:URLに直接付加するのでパラメータに入ってしまう形で送信する。（＝大事な情報が目に見えてしまう）
※特にメールフォームやパスワードフォームでは必ず「post」として下さい。
参考にした記事はこちらです↓
javascriptの関数について 不明点まとめ
こんにちは、クルトンです。
javascriptのわからなかった部分、曖昧だった部分を調べてまとめてみました。
そもそも関数とは？
関数とは、
「複数の処理をひとまとまめにして、それに名前をつけて呼び出し可能にしたもの」
とか
「なにかしらの入力値（引数）を与えられることによって、あらかじめ決められた処理を行い、その結果（戻り値）を返す仕組み」
という風に説明されているものです。
この説明を聞いて僕は
「え、、こんな説明でわかるの？？？頭良い、、、」
と思いました。（笑）
ぜんっぜんわかんないｗｗｗｗ
全然わからないなりに半年くらい勉強してきたんですが
PHPでも関数を作るので
なんとなーくわかってきたつもりです。
そこで、改めて言葉にしてみると
関数とは
「なにか規則性が入っていて、その規則性に従った処理が行われ、その処理が終わったものを吐き出す箱」
だと思いました。
どういうことか？
クイズ
突然ですが、下の言葉の変化の規則性がわかりますか？
こま → ごま
霧 → 義理
カード → ガード
簡単にわかったと思いますが
正解は
「はじめの言葉に濁点をつける」と別の言葉になるよ、という規則性があります。
この「はじめの言葉に濁点をつける」と別の言葉になるよ、という処理を箱の中に入れたものが「関数」になります。
こま →関数→ ごま
霧 →関数→ 義理
カード →関数→ ガード
入口から入れた言葉（こま）にこの規則性をほどこし、出口から出る言葉（ごま）の形にさせる。
「はじめの言葉に濁点をつける」という規則性が入った関数という箱に
「こま」を入れると「ごま」になる。
「きり」を入れると「ぎり」になる。
「カード」を入れると「ガード」になる。
この関数だけではなく、いろいろ作っていくうちに
「なにか規則性が入っていて、その規則性に従った処理が行われ、その処理が終わったものを吐き出す箱」が関数！！だと思いました。
ただ、関数によって規則性のグラデーションが違うなと思ったことがあります。
例えば
「入れた数字に対して、消費税（1.08）を掛けなさい」
という命令が入った関数もあれば
「『こんにちは』という言葉を表示させなさい」
という命令が入った関数も作れるし
「入れた文字が半角英数字かどうかチェックして、半角英数字でなければエラーメッセージを出しなさい」
というような関数を作ることもできます。
1つ目と2つ目の処理は簡単そうに見えませんか？
なんか簡単な規則性に当てはめたり、簡単な処理を書くだけでできそうですよね。
でも3つ目の処理は少し複雑そうに見えると思います。（僕は最初にこの関数を見たときフリーズしました）
このように、作る関数の難易度？というか規則性の複雑さが違うから
「複数の処理をひとまとまめにして、それに名前をつけて呼び出し可能にしたもの」
とか
「なにかしらの入力値（引数）を与えられることによって、あらかじめ決められた処理を行い、その結果（戻り値）を返す仕組み」
という風に説明にもグラデーションがあるんだなーと、思いました。
と、長々と書いてきましたが
関数とは？
僕の中では
「なにか規則性が入っていて、その規則性に従った処理が行われ、その処理が終わったものを吐き出す箱」が関数！！
という解釈が今の所一番しっくり来ています。
この考え方の参考にさせていただいたサイトはこちら ↓
実はこの記事で書いた内容は、このサイトのほぼパク、、、オマージュです。
こちらのサイトだともっと上手に「関数」について言語化されています。
絵もあるし！！
初学者にはとても参考になるサイトだと思います！
余談ですが以下の話がおもしろかったです。
ーーーーー上のサイトより引用ーーーーーーーー
※関数の「関」の旧字体は「函」です。函館は「はこだて」と読みますよね。関数というのはもともと「はこ」の数という意味でした。
ーーーーーーーーーーーーーーーーーーーーーー
関数について理解できたら
- 関数の定義
- 関数の実行
- 関数の実行結果を受け取る
の違いも見ていきましょう。
関数定義とは？
「ただ単に関数に名前をつけ、その関数が呼び出されたときに何をするかを指定すること」です。
「どんな規則が入った箱を作り、その箱になんて名前をつけるか？」が関数定義ですね。
javascriptでの関数定義は
function 関数名(引数1, 引数2, ...) {
実行される処理1;
実行される処理2;
}
という書き方と
var 変数 = function () {
// ここに処理
};
という書き方があります。
実際に関数を書いてみます。
「コンソールに「hello!」と表示される」関数を作成します。
function sayHello() {
//コンソールに「hello!」と表示される処理を書く
console.log('hello!');
}
ここで言う
関数定義：「どんな規則が入った箱を作り、その箱になんて名前をつけるか？」
→ 「こんにちは」と表示される処理が入った箱を作り、その箱に「sayHello」と名前をつける。
関数を実行（呼び出す）
まだ関数を作っただけなので動き出しません。
関数を実行させるには
sayHello();
と書きます。
sayHelloの後ろの（）が「関数を実行してね」という意味
（）が関数を実行するトリガーのような感じ
引数があってなくても、関数を実行するには（）が必要。
※引数：その関数の中で使いたい値、変数
関数の実行結果を受け取る
関数の実行結果は、戻り値として返ってくる。（「return」という単語を使います。）
※戻り値：実行結果を関数の呼び出し元に返す値のこと。
さっき作った関数でいうと
・関数は
sayHello
・関数の実行は
sayHello()
・関数の実行結果を受け取るは
sayHello()で関数を実行して、その中で処理が行われた結果「return」で返ってくる値を受け取るということ。
さっき作成した「sayHello」関数では戻り値を作成していなかったので新たに作り直してみます。
function sayHello() {
//戻り値として「hello!」が返ってくる処理を書く
return 'hello!';
}
これで、sayHello()を実行すると
「hello!」が返ってきています。
関数が関数を受け取るという日本語
質問です！javascriptで
— クルトン@(プロ)グラマー (@kuruton_tern) 2019年7月5日
例えばmakeQuiz(){}という関数を作るとして
「makeQuiz()だと関数の実行結果を呼び出していて、makeQuizは関数を呼び出している」
という認識で間違いないですか？
このツイートをするまで僕は
「関数」
と
「関数を実行する」
という違いがわかっていませんでした。
というのも、関数を関数にわたすとき
sayHello を渡すのか？
sayHello() を渡すのか？
がわかっていなかったからです。
（以下関数とメソッドの違いの説明を割愛するため、関数で統一して呼びます）
例えば
<!DOCTYPE html>
<html lang="ja">
<head>
<title>addEventLister</title>
</head>
<body>
<p id="sample">ここをクリックするとhelloをアラートする</p>
<script>
function sayHello() {
alert ('hello!');
}
var p = document.getElementById('sample');
p.addEventListener('click', sayHello(), false);
</script>
</body>
</html>
のうちの
p.addEventListener('click', sayHello(), false);
の部分。
文章をクリックすると「hello!」の文字が出るようにしたいです。
このコードは「関数を実行」している状態で関数に渡しています。
そうするとどうなるか？
文章をクリックするとアラートが出るようにしたいのに
そうではなく、画面をリロードするとアラートがでるようになっています。
ちゃんと関数を渡すと
p.addEventListener('click', sayHello, false);
文章をクリックするとアラートが出るようになっています。
「関数を渡す」というのは（）なしでいいんですね。
今回調べてみて
javascriptに対して苦手意識がありましたが
それはわからないところがたくさんあって、
わからない部分がわからない状態になっていたからだと気づきました。
アウトプットしたり勉強会に参加したり、ツイッターで質問したりすると
何がわからないか？がわかる良いきっかけになると思いました！
最後まで読んで頂き、ありがとうございました。
配列の初期化（PHP）
エラーメッセージ格納用の配列を作っていて
「なぜ初期化をするのか？」
と不思議に思っていました。
//エラーメッセージ格納用配列
$err_msg = array();
array();で初期化しているんですが、
これは
「$err_msg」がまだ存在しないから空の配列を入れて、新しく作成している
と理解しました。
そして初期化しておけば
$err_msgに勝手に変数が入っても初期化してくれる。
（意図せず勝手に変数が入ってしまうことがあるのでしょう）
「配列を利用する前には、初期化をしておきましょう」
という風に覚えておきたいと思います。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【参考にした質問】
macのカーソル移動のショートカットを変更したい
mac でctrl-n, ctrl-p, ctrl-f, ctrl-bがカーソル移動の↓↑→←のショートカットになっているのはmacを使っている方ならわかると思います。
正直僕は「使いにく・・・」と思っていました。（指が短くて届かないだけ）
どうせだったら左手だけ（もしくは右手だけ）でカーソル移動できるようになれば
右手を思い切りUターンさせずにカーソル移動させることができる！と思い調べてみました。（ctr + npfbが使いにくくてずっと右下のカーソル移動使ってた）
僕は
ctr + f = →
ctr + s = ←
ctr + d = ↓
ctr + e = ↑
と設定しましたが、自分の押しやすい（覚えやすい）ショートカットキーに設定するのがベストです！
⌘英かなをダウンロードする
⌘英かな
初回起動時には、右クリック操作で「開く」を選ばないとアプリが起動しません。
注意書きもあります。
アプリが起動したら、設定を行います。
Inputにショートカットキーを入力し、outputにどうしたいかを入れます。
「caps lock」キーを 「control(ctr)」キーに変更
僕は小指で「caps lock」キーを押しつつ、カーソル移動ができたら便利だなと思ったので「caps lock」キーを「control(ctr)」キーに変更します。
【変更の仕方】
・「システム環境設定」から「キーボード」のパネルをクリック。
→次に、「キーボード」タブをクリックしてキーボードの設定画面で、右下にある「修飾キー」ボタンをクリックします。
→すべての修飾キー（controlキー、Caps Lockキー、Optionキー、Commandキー）をお互いに入れ替えることができるパネルが現れるので、そこで
Caps Lockキー → controlキー
に変更。
さあこれで左手のみで縦横無尽にカーソル移動ができますぞ！！
うおおおおおおおお
デフォルトを変更できるのならそれが一番ですが、設定変更の方法がわからなかったのでこのような方法で設定してみました。
左手だけで移動ができるようになったので嬉しいです！！
