JavaSciptの入門や学習に使える記事一覧

JavaScript

[JavaScript入門]alertの使い方!主要ブラウザ4つでの表示を確認

JavaScriptでalertメソッドを使って、メッセージを表示するダイアログボックスを出す方法について書いています。 実際にブラウザでは下記のように出力されます。(chrome) また、主要のブラウザ4つでアラートの表示を確認したものを...
JavaScript

Chart.jsで複合グラフを表示する方法!【折れ線と棒グラフを表示】

Chart.jsを使用して、折れ線と棒グラフを一緒に表示して、複合グラフを作成する方法を書いています。 公式サイトではMixed Chartという表記で、こちらに記載があります。 Chart.jsを使用して、複合グラフを作成する Chart...
JavaScript

JavaScriptで金額を扱う時に使用する2つの関数(3桁区切り・切り捨て)

JavaScriptで金額を扱う際に3桁区切りにする方法と、金額の単位を千円や百万円にする方法について書いています。 JavaScriptで金額をカンマの3桁区切りにする JavaScriptで金額を3桁のカンマ区切りにするにはtoLoca...
JavaScript

[JavaScript入門]confirmの使い方の解説とトピックス3つ!

今回はJavaScriptのcomfirmメソッドの使い方について書いています。 JavaScriptでconfirmメソッドを使用すると、ブラウザにメッセージと一緒に下記のような確認ダイアログを表示させることができます。 このダイアログで...
JavaScript

Chart.jsを使用して、折れ線グラフを書く方法!【気温のグラフを作る】

今回はChart.jsを使用して、折れ線グラフを書いてみます。 Chart.jsは現時点での最新版のバージョン3.7.1を使用しています。 少しずつ実装を変えていって、最終的に下記のような折れ線グラフを作成します。 Chart.jsを使用し...
JavaScript

[JavaScript入門]三項(条件)演算子の使い方!【9つの値で挙動検証】

今回はJavaScriptで三項(条件)演算子を使い方について書いています。 最初に三項演算子の使い方について書いています。 その後にいろいろな値を渡して、trueとfalseの判定がどうなるのか挙動検証してみたコードを載せています。 Ja...
JavaScript

Chart.jsを使用して、円グラフを書く方法!【サンプルと解説付き】

今回はChart.jsを使用して、円グラフを書いてみます。 円グラフの種類として、ドーナツ(doughnut)とパイ(pie)チャートが描けるようです。 Chart.jsは現時点での最新版のバージョン3.7.1を使用しています。 Chart...
JavaScript

Chart.jsを使用して、棒グラフを書く方法【6つのサンプルと解説付き】

今回はChart.jsを使用して、棒グラフを書いてみます。 Chart.jsは現時点での最新版のバージョン3.7.1を使用しています。 Chart.jsを使用して、棒グラフを書く Chart.jsはグラフをJavaScriptで描画するため...
JavaScript

JavaScriptのアロー関数の使い方とハマった箇所1点

今回はJavaScriptのアロー関数の使い方と、今回ハマった箇所をサンプルコードを交えて、簡単に解説しています。 詳細はMDNの下記に詳しく書いています。 MDN:アロー関数式 アロー関数の使い方 アロー関数を使用すると、普通に関数を書く...
JavaScript

JavaScriptで画像をドロップして画面に表示する(ondrop, ondragover)

JavaScripでondropとondragoverを使用した時にちょっとハマったので、今回はこの2つのイベントについてまとめてみました。 最初にJavaScriptのondropとondragoverのイベントの説明を簡単にします。 画...
JavaScript

JavaScriptのFetchAPIで取得した画像・PDFを表示させる方法!

JavaScriptでFetch APIを使用して、画像やPDFを取得した後にブラウザに表示する方法について書いています。 簡単なサンプルコードを用意して試してみました。 Fetch APIでファイルを取得した後にwindow.openを使...
JavaScript

JavaScriptの配列操作まとめ!(追加 / 削除 / 取得 / 結合 / 判定)

JavaScriptで配列を使うときに、よく使いそうな配列操作をまとめてみました。 配列の宣言から始まって、追加・削除・取得・結合・判定について書いています。 配列の宣言をする JavaScriptで配列を作るには、角括弧([])を使用する...