mori

JavaScript

【JavaScript】リアルタイムバリデーション(入力中に即時チェック)

はじめに前回記事のボタンを押してからバリデーション実施では、大量のエラーがどっと出ると一つ一つ直していくのは大変です。リアルタイムバリデーションなら、入力中にすぐ「何を直せばよいか」を示すことができます。今回は、リアルタイムバリデーションの...
JavaScript

【JavaScript】フォームのバリデーション(入力チェックの実装方法)

はじめにWebサイトやアプリケーションを作る際に、フォームは欠かせない要素のひとつです。入力内容に間違いがあったまま送信されてしまうと、サーバー側でエラーになったり、意図しないデータが保存されてしまったりする危険があります。そこで必要になる...
JavaScript

【JavaScript】非同期処理のの使い方について(Promise / async・await)

はじめにJavaScript はシングルスレッドで動作するため、処理を大量に書くと処理が長引き画面が固まってしまう可能性があります。これを避け、ユーザー操作を止めずに並行して処理を進めるために使われるのが非同期処理です。今回は、非同期処理に...
JavaScript

【JavaScript】音声の取り扱いについて(再生・停止・制御)

はじめにWebで音声を扱いたい場面は多々存在します。JavaScriptを使えば、ボタン操作で音を鳴らしたり、ユーザーの操作に応じて再生・停止・音量調整などを簡単に行うことができます。今回は、音声の取り扱いについてLogとして記載していきた...
JavaScript

【JavaScript】画像の取り扱い方法(表示・切り替え・操作について)

はじめにWebページにおける画像は、視覚的な情報は重要な役割を果たします。JavaScriptを使えば、画像の表示だけでなく、動的な切り替えやユーザーから選ばれた画像の表示など、簡単に実装できます。今回は、これらの画像の取り扱いについてLo...
JavaScript

【JavaScript】ローディング画面をアニメーションで作成する方法

はじめに今回は、JavaScriptとCSSを使ってシンプルなローディング画面のアニメーションを作成する方法を記載していきたいと思います。ページの読み込み中にユーザーの注目を集めたり、読み込み完了を知らせるためにローディングアニメーションは...
JavaScript

【JavaScript】各フォームから入力値の情報を取得する方法

はじめにWebページでユーザーの入力を受け取るために、フォーム(<form>タグ)やその中にあるテキストボックス・チェックボックス・ラジオボタン等が存在します。今回はJavaScriptで、これらのフォーム各項目から「ユーザーが入力した値」...
JavaScript

【JavaScript】HTMLの要素を操作する基本方法(取得・変更・追加・削除)

はじめにJavaScript は、HTMLと組み合わせることで、画面の表示内容や動きを動的に制御できます。今回は、HTMLの要素(タグ)を取得したり、内容を変更したり、追加・削除する方法を記載していきたいと思います。 HTML要素を取得する...
JavaScript

【JavaScript】クリック、入力、マウス操作イベントについて

はじめにJavaScriptを使うと、ユーザーが行う操作(クリック、キー入力、マウス移動など)に応じた挙動を実装できます。今回は、よく使われるユーザーアクションの種類と基本的なイベントの使い方について記載していきます。 アクション一覧ユーザ...
JavaScript

【JavaScript】ウィンドウの開閉・サイズ・スクロールについて

はじめにJavaScriptには、ブラウザのウィンドウを操作するための関数が用意されています。今回はウィンドウの開閉・サイズ・スクロールについて、HTMLとJavaScriptで記載していきます。 ウィンドウを開くwindow.open(u...