新入社員
画像を丸く切り抜きたい
「border-radius:50%」とすることで正方形の画像の４隅を丸く加工することができます。radiusとは半径のことです。ボーダーを正方形の1辺の半分を半径とする円にする、ということになります。 ただし、2つ目の […]
モーダルウィンドウを作る
【modal】とは「モードに入っている」という程度の意味です。 後ろの画面は制御できないようにすることで前画面に集中してもらいます。 モーダルウィンドウを作る 最後までお読みいただきありがとうございます。
データ送信を確認するダイアログを出したい
ポイントは8行目の <form onSubmit = "イベント発生時の処理">という書き方です。 onSubmitというのは「送信した時」という意味のイベントハンドラ【event handler】です。 入 […]
フォーム部品をグループ化してわかりやすくする
フォーム部品を囲む枠をfiledset、枠につける表題をlegendといいます。 フォーム部品をグループ化してわかりやすくする 最後までお読みいただきありがとうございます。
下にスクロールしたら「ページトップへ戻る」を表示させたい
ポイントは、24行目のaddEventListener(イベント,コールバック関数)という書き方です。 add(加える)Event(イベントを)Listener(聞くものを)ということでイベントを感知するメソッドであるこ […]
サーブレットでXSS対策をしたい
次のようなメソッドを持つクラスを作成してstaticメソッドに任せてはどうでしょうか？ 実行結果は以下の通り。 サーブレットでXSS対策をしたい 最後までお読みいただきありがとうございます。
OKとキャンセルが選べるダイアログを表示したい
ポイントは14行目と15行目です。 14行目では「document.querySelector("#do").onclick」という記述によりこのHTMLドキュメントの"do"というID名の要素を取得し、クリックした時と […]
ページ内リンクでゆっくりスクロールさせたい
スクロールが実行されたときの処理を設定できるCSSプロパティはscroll-behaviorといいます。以下の2種類があります。 autoが初期値です。 9行目のように「scroll-behavior: smooth;」 […]
Webページで前回アクセス時のキャッシュが残り、次回アクセス時のフォームデータにデータが自動で入力されることを防ぐ
Webページがキャッシュされないようにするには、<head>タグに以下の3行を記入します。 最後までお読みいただきありがとうございます。
パスワードを表示するチェックボックスをつけたい
パスワード入力の際に通常はパスワードがマスクされます。 セキュリティの観点からは望ましい仕様ですが、入力内容を確認したいときもあります。 そんなときに便利なのがこの機能です。 JavaScriptを使い、チェックボックス […]
データベース(MySQL)研修の参考資料（動画）
MySQL Workbenchを使ったデータベース設計 大変クリアで分かりやすいMosh先生のMySQLの解説動画（英語） 20時間を超えるMySQLの解説動画（英語）
補講：フォーム部品に関するその他の知識。
デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。 ※この章は研修時間の都合により丸ごとスキップすることがあります。 なぜ、新人 […]
補講：JSTLをつかった単純な繰り返し
例えば、JavaSEで「Hello Word」という文字列を6回繰り返し出力する際には次のように書きました。 同様の処理をJSPでは <c:forEach> を使って以下のように書きます。 【begin】、【 […]
補講：その他のフォームからデータをServletに渡す
セレクトボックスで選択されたデータを受け取る 入力フォームのセレクトボックスを使ってみます。 個々のユーザーが現在の天気を登録して全国の天気予報をするWebアプリケーションのプロトタイプのイメージです。 あなたの答え： […]
新人エンジニア研修データ構造とアルゴリズムの参考資料集
探索アルゴリズム 二分探索のアイディアとその効果 How Binary Search Makes Computers Much, Much Faster 整列アルゴリズムをビジュアルに比較する 15 Sorting Al […]
新人エンジニア研修コンピュータシステムの基礎の参考資料集
0.情報理論 １．コンピュータのデータ表現 (１) ２進数 人間の指の10本で良かったなと思うと同時に指12本の宇宙人がいたら怖いなと思ってしまう動画 (２) 論理演算 ２．ハードウェアの仕組み（５大装置） (１) […]
MySQLにHeidiSQLでアクセスする
当社の研修ではMySQLのクライアントツールとして、HeidiSQLを使います。 その理由は、以下の3点です。 ここでは、最低限の使い方を解説します。 ちなみに、「HeidiSQL」を私はハイジ・エスキューエルと呼んでい […]