スキルアップを始める!

JavaScript(ジャバスクリプト)

JavaScript(ジャバスクリプト) JavaScript(ジャバスクリプト)

JavaScript はクライアント側で実行されるオブジェクト指向型のスクリプト言語です。初心者向けに、JavaScriptとは何ができるのか?をわかりやすく解説します。ご参考ください。

JavaScript(ジャバスクリプト)

【JavaScript】ラウンドロビンスケジューリングアルゴリズムをシミュレートする

ラウンドロビンスケジューリングアルゴリズムをシミュレートする JavaScriptでラウンドロビンスケジューリングアルゴリズムをシミュレートする例を示します。この例では、タスク(またはプロセス)の簡単なセットと、それらのタスクを順番に処理す...
JavaScript(ジャバスクリプト)

【JavaScript】仮引数(パラメータ)とは?

仮引数(パラメータ)とは 仮引数(パラメータ)は、関数やメソッドの定義において、その関数やメソッドが受け取ることができる引数(入力値)を指定するために用いられる変数です。 これは、関数やメソッドの本体内で、渡された実際の値(実引数)を参照す...
JavaScript(ジャバスクリプト)

【JavaScript】関数の引数で a や b のvarやconstの宣言文は無い…?

関数の引数として使われる変数に宣言文が必要ない? 関数を定義する際に、関数の引数として使われる変数(この場合は a と b)は、関数内でのみスコープ(有効範囲)が定義されます。 これらの変数が関数の引数として機能し、関数が呼び出されるときに...
JavaScript(ジャバスクリプト)

【JavaScript】配列をシャッフルする関数を作る(Fisher-Yatesシャッフル アルゴリズム)

Fisher-Yatesシャッフル アルゴリズム この関数は、Fisher-Yatesシャッフルと呼ばれるアルゴリズムを使用して、配列の要素をシャッフルし、シャッフル過程をログに記録します。 function shuffleArrayWit...
JavaScript(ジャバスクリプト)

【JavaScript】特定のクラス名の中にある特定の文字を別の文字に書き換える

JavaScriptで、特定のクラス名の中にある特定の文字を別の文字に書き換えるコードは次のようになります。 特定の文字を別の文字に書き換えるコード document.getElementsByClassName()メソッドを使って、指定し...
JavaScript(ジャバスクリプト)

【JavaScript】querySelectorAllを使用して特定の要素を選択して要素がクリックされたときにイベントを取得して送信する方法

querySelectorAllを使用して特定の要素を選択し、それらの要素がクリックされたときにイベントを取得して送信するプロセスを実装する一般的な手順を示します。 イベントを取得して送信するプロセス 要素の選択: document.que...
JavaScript(ジャバスクリプト)

【JavaScript】setTimeout()の使い方|指定された時間後にコードを実行するメソッド

setTimeout() は、指定された時間後にコードを実行する JavaScript のメソッドです。よく使われる機能ですが、細かい仕様や注意点もあり、使いこなすにはいくつかのポイントがあります。 setTimeout() の基本構文 s...
JavaScript(ジャバスクリプト)

【JavaScript】現在のウェブページのURLを取得する(window.location.href)

現在のウェブページのURLを取得する(window.location.href) JavaScriptで現在のウェブページのURLを取得するには、window.location.hrefプロパティを使用します。 このプロパティは、ブラウザの...
JavaScript(ジャバスクリプト)

【Javascript】ページの最後に実行させたい|defer属性・動的なスクリプトロード

JavaScriptをページの最後に実行させるには、いくつかの一般的なアプローチがあります。これらの方法は、ページのパフォーマンスを向上させるために、重要なスクリプトが含まれるウェブサイトなどで使用されます。 スクリプトをページの最下部に配...
JavaScript(ジャバスクリプト)

【JavaScript】(querySelectorAll)クリックされた要素がNodeList内で何番目にあるかを基にelements2から同じ番号のテキストを取得する

querySelectorAllを使用してクリックされた要素がNodeList内で何番目にあるかを基に、elements2から同じ番号のテキストを取得する場合、以下のようなアプローチをとることができます。 HTMLコード <h2>Examp...
JavaScript(ジャバスクリプト)

【for…of文】JavaScriptの繰り返し処理について

JavaScriptのfor...of文を使用した様々なパターンの具体的な例を示します。この文は、配列やマップ、セットなどの反復可能オブジェクトの各要素に対して繰り返しを行うのに適しています。 配列の要素を反復処理する let fruits...
JavaScript(ジャバスクリプト)

【for-inループ】オブジェクトのプロパティを反復処理する

JavaScriptのfor-inループを使用すると、オブジェクトの各プロパティを反復処理し、それぞれのキーと値を出力することができます。 for (let key in object) for (let key in object) { ...
JavaScript(ジャバスクリプト)

for文とは?コードブロックを繰り返し実行するためのループ処理について

JavaScriptのfor文は、指定された条件が偽になるまで、コードブロックを繰り返し実行するためのループです。主に、以下のように3つの部分に分かれています。 初期化式 初期化式 - ループが始まる前に一度だけ実行されます。通常、ループカ...
JavaScript(ジャバスクリプト)

mapとは?JavaScriptの配列オブジェクトについて

mapメソッドとは? map は、JavaScriptの配列オブジェクトが提供するメソッドの一つです。map メソッドは、配列内の各要素に対して指定した関数を実行し、その結果を新しい配列として返します。元の配列は変更されず、新しい配列が生成...
JavaScript(ジャバスクリプト)

【JavaScript】forEachメソッドとは?基本と使い方について

forEachメソッドとは? forEachは、JavaScriptで配列を繰り返し処理するためのメソッドです。与えられた関数を配列の各要素に対して一度ずつ呼び出します。ここで、提供されたコードでは、dataという配列の各要素に対してfor...
JavaScript(ジャバスクリプト)

【JavaScript】CSSで特定の文字が入った段落を非表示にしたい

特定の文字が入った段落を非表示にしたい 段落を非表示にするにはCSSのセレクタで可能ですが、クラス名や指定する場所が決まっていない場合に「特定の文字が入った段落を非表示にしたい」といった場合に困ったことになります。代替手段としてJavaSc...
JavaScript(ジャバスクリプト)

JSONデータとは?種類や基本的なフォーマットについて

JSON(JavaScript Object Notation)は、軽量でデータ交換のためのテキストベースのデータ形式です。以下はJSONデータの基本的なフォーマットです。 オブジェクト(Object) JSONデータは、中括弧 {} で囲...
JavaScript(ジャバスクリプト)

【JavaScript】async 属性を付与して読み込み順番を変える

async属性を使用してスクリプトの読み込み順序を変更する例を示します。以下は、3つのスクリプトがあり、それぞれが異なる順序で非同期に読み込まれる例です。 async属性とは? async 属性は、HTMLの<script>タグに使用される...
JavaScript(ジャバスクリプト)

【JavaScript】画面遷移中にぐるぐるローディングアニメーションを表示したい

グルグル回るローディングアニメーション リンク先をクリックした際に、グルグル回るローディングアニメーションを表示してみます。 スクリプト参考例 特定のリンクをクリックしたときにローディングを表示するようにしたい場合、JavaScriptでそ...
JavaScript(ジャバスクリプト)

【JavaScript】リンクをクリックしたらTwitterに投稿できるようにしたい

HTML部分を作る まずは、表示するカードのHTML部分を作ります。 <div class="card-container"> <div class="card"> <a href="#" onclick="tweetCard('いつもあり...
JavaScript(ジャバスクリプト)

【JavaScript】クイズで正解したら下の方に正解・不正解と表示されるようにしたい

JavaScriptで簡単なクイズのWebページを作成します。 HTML <div id="quiz-container"> <h2>クイズ</h2> <p>世界で最も高い山は?</p> <button onclick="checkAnsw...
JavaScript(ジャバスクリプト)

【JavaScript】URLパラメータ値でコンテンツの表示・非表示を切り替える

JavaScriptを使って、URLパラメータ値でコンテンツの表示・非表示を切り替えます。 URLからパラメータを取得する URLからパラメータを取得します。 <script> $(document).ready(function() { ...
JavaScript(ジャバスクリプト)

【JavaScript】パラメーターを保持したままリダイレクトする

特定のパラメーターを保持したままリダイレクトするために、JavaScriptを使用する方法は以下の通りです。 このコードは、ブラウザの現在のURLからパラメーターを取得し、指定のパラメーターが存在する場合、新しいURLを構築し、そのパラメー...
JavaScript(ジャバスクリプト)

【JavaScript】プログレスバー(進捗状況)をページに表示する方法

プログレスバーを作る プログレスバーが0%から100%までアニメーションで増加し、ボタンをクリックすることでプログレスバーの進行を開始できます。 プログレスバーを作成する方法はいくつかありますが、以下に基本的なHTMLとCSSを使用して簡単...
JavaScript(ジャバスクリプト)

【JavaScript】ボタンをクリックした時に処理が完了するまで再度ボタンを押せないようにしたい

ボタンを連打できないようにしたい ボタンをクリックした時に処理が完了するまで再度ボタンを押せないようにするには、ボタンを非活性化(disabled)し、処理が完了した後に再度活性化させることができます。 以下は、コードにボタンを非活性化およ...
JavaScript(ジャバスクリプト)

【JavaScript】ブラウザ上でWEBPからJPGへの変換を行うツールを作る

HTMLとJavaScriptを使用して、WEBP画像を読み込みJPGに変換してダウンロードする、ブラウザ上でWEBPからJPGへの変換を行うツールを作ります。 サンプルページはこちら htmlコード <!DOCTYPE html> <ht...
JavaScript(ジャバスクリプト)

【JavaScript】「文字数カウンター」アプリケーションを作る方法

HTML, CSS, そして JavaScript だけで文字数カウンターを作成してみます。 完成形はこちら▼ 以下は、画面に文字を貼り付けるとその文字数が表示されるコードの例です。 文字数カウンターのHTMLコード ユーザーがテキストエリ...
JavaScript(ジャバスクリプト)

【Draggabilly】HTML要素をドラッグアンドドロップできるJavaScriptライブラリ

Draggabillyとは? Draggabillyは、HTML要素をドラッグ可能にするためのJavaScriptライブラリです。指定したHTML要素をマウスやタッチ操作でドラッグできるようにします。 以下はDraggabillyの基本的な...
JavaScript(ジャバスクリプト)

【JavaScript】JavaScriptのループ文について(for文・while文・do-while文・break文・continue文)

JavaScriptのループ文について、丁寧に分かりやすくひとつずつ説明します。 for文 for文は、特定の回数だけ繰り返し処理を行うための文です。for文の構文は、次のとおりです。 for (初期化式; 条件式; 増減式) { // 繰...
JavaScript(ジャバスクリプト)

【JavaScript】イベントリスナー・コールバック関数とは?

JavaScriptのイベントリスナーとコールバック関数は、JavaScriptが動的なWebサイトを作成するために使用する重要な概念です。 イベントリスナーとは? JavaScriptでは、Webページ上で何かが起こるたびに「イベント」が...
URLをコピーしました!