javascript | rgbをrgbaに変換する
javascriptで取得したrgbに透過度を加えてrgbaに変換して利用したい場合の簡単なサンプルコードです。 rgbをrgbaに変換する javascriptの「style.backgroundColor」などで色を取得した場合、rgb ...
JavaScript | HTML要素にclassが指定されているか確認する
JavaScriptでHTML要素にclassが指定されているか確認するサンプルコードです。 See the Pen JavaScript | Check if the element has a class by yochans (@yo ...
JavaScript | メールアドレスかどうか判別する
JavaScriptで文字列がメールアドレスかどうか判別するサンプルコードです。 対象の文字列が正規表現でパターンを調べて、メールアドレスであればtrue、メールアドレスでなければfalseを返します。 'abc-abc@gmail.com ...
JavaScript | querySelectorAll()で子要素を取得するパターン集
JavaScriptでHTMLの親要素から子要素を取得するのサンプルコードのパターン集です。 このページではquerySelectorAll()を利用した方法を紹介しています。 See the Pen JavaScript | get ch ...
JavaScript | HTML5のaudioで音声ファイルを再生する
HTML5のaudioをJavaScriptで制御して音声ファイルを再生する方法の動作サンプルとサンプルコードです。 See the Pen JavaScript | Play an audio file by yochans (@yoch ...
JavaScript | テキストエリアを文章の行数に応じて拡縮する
テキストエリアを入力されている文章の行数に応じて自動で拡縮（サイズを広げる、またさ縮める）させる実装サンプルです。 See the Pen JavaScript | Create a random string by yochans (@y ...
JavaScript | ランダムな文字列を生成する
JavaScriptで英数字のランダムな文字列を生成するサンプルコードです。 See the Pen JavaScript | Create a random string by yochans (@yochans) on CodePen. ...
JavaScript | HTML要素の大きさを比較する
JavaScriptで要素の幅と高さから計算したpx単位の面積から、2つのHTML要素の大きさを比較するサンプルコードです。 See the Pen JavaScript | Calculate the area of the elemen ...
JavaScript | reverse()で配列を逆順にする
JavaScriptで配列の値の順番を逆順にする方法のサンプルです。 reverse()とArray.prototype.reverse.call()を使った配列の逆順ソートについて紹介しています。 See the Pen JavaScri ...
JavaScript | 変数名や関数名には使えない予約語一覧（50音順）
JavaScriptで変数や関数、クラスの名前には利用できない予約語の一覧です。 これらの名前を利用しようとすると以下のコンソールエラーが表示されます。 Uncaught SyntaxError: Unexpected token 'xxx ...
JavaScript | 親要素のidやclassを取得する方法
JavaScriptで指定したHTML要素を持つ親要素を取得してそのidやclassを取得する方法のサンプルです。 See the Pen JavaScript | Get id and class of parent element by ...
JavaScript | 文字列を一文字単位で逆順にする
JavaScriptで文字列を文字単位で逆順にする方法のサンプルコードです。 See the Pen JavaScript | Reverse the strings by yochans (@yochans) on CodePen. 文字 ...
JavaScript | HTML要素の幅と高さから面積を計算する
JavaScriptでHTML要素の幅と高さを取得して、そのピクセル単位の面積を計算する方法のサンプルです。 See the Pen JavaScript | Compare element sizes by yochans (@yocha ...
JavaScript | スクロールの位置を取得する
JavaScriptで現在のスクロールの位置（高さ、ポジション）を取得する方法のサンプルです。 See the Pen JavaScript | get scroll position by yochans (@yochans) on Co ...
JavaScript | toFixed()で小数点なし、または少数点以下の桁数を指定して丸める
JavaScriptのtoFixed()を利用して小数点以下の桁を指定して数値を丸める方法のサンプルコードです。 少数点以下の桁を指定して丸める toFixed()は取得する小数点以下の桁数を引数に指定します。指定可能な桁数の最小値は0、最 ...
JavaScript | 新規タブでページを開くボタン
JavaScriptを使って新規タブでページを開くボタンの実装方法です。 See the Pen JavaScript | Open page in new window by yochans (@yochans) on CodePen. ...
JavaScript | SpeechSynthesisUtteranceで一時停止と再開機能
JavaScriptのSpeechSynthesisUtteranceを使って再生中の音声読み上げを一時停止、再開する機能の実装サンプルです。 See the Pen JavaScript | speech synthesis pause ...
JavaScript | speechSynthesis.speak()で音声が出なくなる原因と対策
JavaScriptでWeb Speech APIのSpeechSynthesisUtteranceを利用していると、JavaScriptコードは間違っていないハズなのにテキストを読み上げる音声が再生されなくなる場合があります。 この記事で ...
JavaScript | createElementNSでSVGの図形を描画する基本
JavaScripでcreateElementNSを使ってシンプルなSVGの図形を描画する基本的な記述方法です。 図形描画のベースとなる直線、折れ線、曲線、円、楕円、四角形を紹介しています。 基本 createElementNSでSVGを扱 ...
JavaScript | SpeechSynthesisUtteranceでテキストを読み上げる
JavaScriptで使えるWeb Speech APIのSpeechSynthesisUtteranceを利用してテキストを読み上げる方法のサンプルコードです。 See the Pen JavaScript | speech synthe ...
JavaScript | ページの最上部にスクロールするボタン
JavaScriptを使ってページの最上部にスクロールするボタンの実装サンプルです。 トップへ戻るボタンはコンテンツ量が多いサイトでモバイル端末からのアクセス時にユーザビリティを上昇させます。 See the Pen JavaScript ...
JavaScript | 最初の英文字を大文字に変換する
JavaScriptで最初の英文字を大文字に変換する方法の紹介です。 See the Pen JavaScript | Uppercase the first letter by yochans (@yochans) on CodePen. ...
JavaScript | HEXカラーコードをランダム生成する
JavaScriptを使ってランダムなHEXカラーコードを生成する方法の紹介です。 See the Pen JavaScript | Randomly generate HEX color code by yochans (@yochans ...
JavaScript | Dateから月をフルスペルの英単語で取得する
JavaScriptのDateオブジェクトから月をフルスペルの英単語で取得する方法のサンプルコードです。 See the Pen JavaScript | Get the moon in full spelled english by yo ...
JavaScript | 文字列から英数字以外を削除する
JavaScriptでreplace()と正規表現を利用して文字列から英数字以外を削除する方法のサンプルコードです。 See the Pen JavaScript | Delete non-alphanumeric characters b ...