- 投稿日:2020-01-21T19:57:56+09:00
初心者によるプログラミング学習ログ 216日目
100日チャレンジの216日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
216日目は
おはようございます
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) January 20, 2020
216日目
架空のwebサイトコーディング
wifiの調子がわるくて、調整に手間取ってたら勉強時間少なくなった#100DaysOfCode #駆け出しエンジニアと繋がりたい #早起きチャレンジ
- 投稿日:2020-01-21T16:12:18+09:00
ご教授願いたいです。
プログラミングを学び始め、PHPの本を購入し、勉強しているのですが
下記のソースを実行した際
スタッフ名のみ表示させたいのですが、暗号化されたパスまで表示されてしまいます。また、print したい部分も表示されず、真っ白になってしまいます。
しかし、データベースには情報は登録されています。どこが悪くてエラーになってるか分からないのでご教授いただけませんでしょうか
<?php
try
{$staff_name = $POST['name'];
$staff_pass = $POST['pass'];$staff_name = htmlspecialchars($staff_name,ENT_QUOTES,'UTF-8');
$staff_pass = htmlspecialchars($staff_pass,ENT_QUOTES,'UTF-8');$dsn ='mysql:dbname=shop;host=localhost;charaset=utf8';
$user ='root';
$password ='';
$dbh = new PDO($dsn,$user,$password);
$dbh ->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);$sql = 'INSERT INTO mst_staff(name,password) VALUES (?,?)';
$stmt = $dbh->prepare($sql);
$data[] = $staff_name;
$data[] = $staff_pass;
$stmt ->execute($data);$dbh = null;
print $staff_name; print 'さんを追加しました。<br />';}
catch (Exception $e)
{
print 'ただいま障害により大変ご迷惑をお掛けしております。';
exit();
}?>
- 投稿日:2020-01-21T11:51:41+09:00
buttonタグ押下時の枠線を消す
- 投稿日:2020-01-21T10:49:46+09:00
【初心者】JavaScriptで「コマ移動ゲーム(横移動のみ)」を作ってみた
最近、JavaScriptを勉強しています。
練習として、「コマ移動ゲーム(横移動のみ)」を作ってみました。
簡単なものですが、アウトプットが大切だと考えています。笑HTMLを記述する
index.html<h1>コマ移動ゲーム(横移動のみ)</h1> <p id="field"></p> <input type="button" value="左" id="btn_left"> <input type="button" value="右" id="btn_right"> <input type="button" value="リセット" id="btn_reset"> <script src="main.js"></script>タイトル、コマが移動するフィールド、3つのボタンという構成です。
フィールドの描画は、JavaScriptにお任せしているので、要素の中身は空です。
JavaScriptの読み込みも忘れずにしています。JavaScriptを記述する
main.jsconst field = document.getElementById('field'); const btn_left = document.getElementById('btn_left'); const btn_right = document.getElementById('btn_right'); const btn_reset = document.getElementById('btn_reset'); const loopCount = 10; let position = 0; const fieldReset = (reset) => { if (reset) { position = 0; } field.textContent = ''; }; const draw = () => { for (let i = 0; i < loopCount; i++) { if (position === i) { field.textContent += '●'; } else { field.textContent += '〇'; } } }; draw(); btn_left.addEventListener('click', () => { fieldReset(); if (position > 0) { position--; } draw(); }); btn_right.addEventListener('click', () => { fieldReset(); if (position < loopCount - 1) { position++; } draw(); }); btn_reset.addEventListener('click', () => { fieldReset('reset'); draw(); });最初にフィールドとボタンのHTML要素を取得し、
フィールドの数とコマの位置を示す値を定義しています。
loopCount
はフィールドの数(動ける範囲)なのですが、
ちょっと定数名が分かりにくいですね、反省します。draw() について
const draw = () => { for (let i = 0; i < loopCount; i++) { if (position === i) { field.textContent += '●'; } else { field.textContent += '〇'; } } };関数
draw
は、フィールドを描画してくれます。
コマの位置のみ●
で、その他は〇
で表現しています。
フィールドのHTML要素内の文字列を足していく、という形で実現しています。fieldReset(reset) について
const fieldReset = (reset) => { if (reset) { position = 0; } field.textContent = ''; };関数
fieldReset(reset)
は、フィールドをリセットしてくれます。
引数に何かしら与えられた場合のみ、コマの位置もリセットしてくれます。
フィールドのHTML要素内の文字列を空にする、という形で実現しています。3つのボタンについて
それぞれのボタンが押されたときの挙動を説明します。
- 「左」:フィールドをリセットし、変数
position
を-1
して再描画- 「右」:フィールドをリセットし、変数
position
を+1
して再描画- 「リセット」:フィールドをリセットし、変数
position
を0
にして再描画その他
getElementById
やaddEventListener
、アロー関数() => { ~ }
などの、その他の基本的な知識については、僕の過去記事をどうぞ。
【初心者】JavaScript(ES6)の基礎を勉強した
【初心者】JavaScriptで「おみくじゲーム」を作ってみたおわりに
「おみくじゲーム」に引き続き、JavaScriptでミニゲームを作ってみました。
簡単なものですが、アウトプットは楽しいですし、
Qiitaの記事を書くと個人的な復習にもなって、より深い理解につながりますね。引き続き、アウトプット重視でプログラミング学習がんばります。
Twitter フォローしてくれたら喜びます。
- 投稿日:2020-01-21T02:14:41+09:00
rails+froalaエディタ使用の注意
表示させる部分にはクラスに'fr-view fr-element'を付ける
froalaエディタは、とても高機能のエディタである。
ブログアプリで使用するとき、form画面ではとくに問題ないが、その内容を表示させるときに思うように表示されないときがある。
それは、form画面ではデフォルトで<div class="fr-view fr-element">で囲まれているが、表示させるときはない。
画像の左寄せ、中央寄せ、右寄せの機能がうまく表示されないのはこのせいである。
なので表示させたいページで同じようにdivで囲めばよい。