20200121のHTMLに関する記事は6件です。

初心者によるプログラミング学習ログ 216日目

100日チャレンジの216日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

216日目は

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ご教授願いたいです。

プログラミングを学び始め、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();
}

?>

戻る

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

buttonタグ押下時の枠線を消す

毎回ほんとに忘れるので、備忘録。

これが        こうなる
btn.png  →   btn-frm.png

そんな時は、

style.css
button {
  outline: 0;
}

とすると、枠線が出なくなる。

これだけなのに、毎回忘れる。。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【初心者】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.js
const 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 して再描画
  • 「リセット」:フィールドをリセットし、変数 position0 にして再描画

その他

getElementByIdaddEventListener 、アロー関数 () => { ~ }
などの、その他の基本的な知識については、僕の過去記事をどうぞ。
【初心者】JavaScript(ES6)の基礎を勉強した
【初心者】JavaScriptで「おみくじゲーム」を作ってみた

おわりに

「おみくじゲーム」に引き続き、JavaScriptでミニゲームを作ってみました。
簡単なものですが、アウトプットは楽しいですし、
Qiitaの記事を書くと個人的な復習にもなって、より深い理解につながりますね。

引き続き、アウトプット重視でプログラミング学習がんばります。
Twitter フォローしてくれたら喜びます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

rails+froalaエディタ使用の注意

表示させる部分にはクラスに'fr-view fr-element'を付ける

froalaエディタは、とても高機能のエディタである。

ブログアプリで使用するとき、form画面ではとくに問題ないが、その内容を表示させるときに思うように表示されないときがある。
それは、form画面ではデフォルトで

<div class="fr-view fr-element">

で囲まれているが、表示させるときはない。
画像の左寄せ、中央寄せ、右寄せの機能がうまく表示されないのはこのせいである。
なので表示させたいページで同じようにdivで囲めばよい。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【css】:hoverでちょっとした吹き出しを表示

やりたい事

  • リンクを:hoverした際に上にテキストを表示させる。
  • テキストの文字数が変わっても崩れない。

    See the Pen LYEXedW by KARIN (@kkkarin) on CodePen.

参考:意外と知らないvisibilityの活用方法!

補足

:warning:content(擬似要素)にテキストを入れる場合の注意

デメリットとしては、SEO的な側面になりますが、疑似要素に指定された文言はテキストとしてみなされないという点です。

googleのクローラーはHTMLのコードを解析し、テキストに何が書かれているか把握しています。

CSSの疑似要素で文字を追加しても、その部分はテキストとしてみなされません。大切なことは疑似要素ではなく、HTML内に記述するようにしましょう。

引用元:CSSの疑似要素の使い方! befor・after をマスターしよう

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む