タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
HTMLで使用することのできる絵文字の文字コード一覧です。入力方法についても解説します。 この記事のポイント 絵文字は「数値文字参照」で入力する 数値文字参照は「10進数」と「16進数」の2種類の書き方から選ぶことができる 絵文字が記号として表示されてしまうときはCSSでfont-familyプロパティを指定する 絵文字の書き方 HTMLで「😀」「👍」のような絵文字を表示したい場合は、記号・特殊文字と同じように「数値文字参照」を使います。 iOSの絵文字 絵文字の入力で使用する「数値文字参照」はUnicodeで定められた16進数、または10進数の値を以下のフォーマットで指定して表示させます。 数値文字参照 (10進数)の書き方 10進数のフォーマットで絵文字のコードを書くときは「&#」と「;」で囲みます。 文字実体参照(10進数)の入力例 😀 // => 😀 
URLに含まれるGETパラメータについて、パラメータ名と値の組み合わせを取得する方法について解説します。 この記事のポイント GETパラメータを取得するときはURLからURLSearchParamsオブジェクトを作成する URLSearchParamsオブジェクトはGETパラメータを取得するメソッドが6種類ある URLからGETパラメータを取得する URLからGETパラメータを取得するときは、URLからURLSearchParamsオブジェクトを作成してメソッドを実行することで取得することができます。 URLSearchParamsオブジェクトはGETパラメータを取得するメソッドが6種類用意されています。 メソッド名取得する値
フォーム入力で発生するイベントについて フォームにある入力項目に対して入力がされると、2種類のイベントが発生します。 イベント名発生するタイミング イベント「input」は入力中に何度も発生します。 例えば、テキストフォームに「test」と入力した場合、「t」「e」「s」「t」と1文字入力する度にイベントが発生するようになっています。 もう1つのイベント「change」は入力が完了して入力項目からフォーカスが外れたタイミングで発生します。 テキストフォームに「test」と入力した場合は、全て打ち終わって他の入力項目に移動したりしたときに1度だけイベントが発生します。 チェックボックスやラジオボタン、プルダウンメニューのときは、選択項目を選択したタイミングに発生するようになっています。 これらのイベントが発生する様子を、具体的にコードを使って解説していきます。 ここでは以下のHTMLコードに
数字を指定した桁数になるまで「0」で埋める方法について解説します。 この記事のポイント 指定した桁数まで0埋めする方法はpadStartメソッドを使う方法とsliceメソッドを使う方法の2種類 0以外の文字で埋めることもできる 数字を0埋めした桁数にする JavaScriptで日付を扱うときなどに、日付などの1桁の「月」や「日」を「04月01日」のように0埋めした2桁の数字にする方法を解説します。 以下のコード例ではパターン1はpadStartメソッドを使う方法、パターン2はsliceメソッドを使う方法になります。 いずれも0で埋めた任意の桁数の数字を取得できるため、使いやすい方法を選択してください。 値の型については、数値（Number）のままでは0埋めすることができないため、上記のいずれの方法も文字列（String）に変換しています。 パターン1：padStartメソッドを使って0埋め
配列の指定した位置にある要素を他の要素に置き換える方法について解説します。 この記事のポイント spliceメソッドの第1パラメータに負の値を渡すと末尾から数えた要素を置き換えられる spliceメソッドの第2パラメータを0にすると置き換えでなはなく追加になる 配列の要素を置き換える spliceメソッドを使うと、配列の指定した位置にある要素を他の要素に置き換えることができます。 以下の例は配列の2番目の要素を、spliceメソッドの第3パラメータに指定した「fox」に置き換えます。 JS コード例 let animals = [ 'cat', 'dog', 'mouse']; let remove_animals = animals.splice( 1, 1, 'fox'); console.log(animals); // (3) ["cat", "fox", "mouse"] con
URLからドメイン、パス、プロトコル、GETパラメータなど各種情報を取得する | GRAYCODE JavaScript
ハッシュ（hash）とGETパラメータ（search）が混在するURLについては、全てハッシュ（hash）に含まれてしまうため注意が必要です。 以下の例はGETパラメータやユーザー名、パスワードを除いたURLで各プロパティの値を出力します。 index.js // https://gray-code.com:4000/test/index.html#section1 からURLオブジェクトを作成 var uri = new URL(window.location.href); console.log(uri.hash); // #section1 console.log(uri.host); // gray-code.com:4000 console.log(uri.hostname); // gray-code.com console.log(uri.href); // https://
指定したHTML要素や子孫要素を削除する方法について解説します。 この記事のポイント 指定したHTML要素自身を削除するときはremoveメソッドを使う 指定したHTML要素の子要素を削除するときはremoveChildメソッドを使う removeChildメソッドは削除したHTML要素を戻り値として取得できる ページから特定の要素を削除するときは、removeメソッドかremoveChildメソッドを使います。 removeメソッドは指定したHTML要素自身を削除し、removeChildメソッドは指定したHTML要素の子孫要素を削除します。 以下のHTMLコードに対して、それぞれのメソッドを使用していきます。 HTML コード例 <body> <h1>JavaScriptレシピ</h1> <ul id="list1"> <li>テキスト<strong>1</strong></li> <
Fetch APIのAjaxを使ってJSONデータをサーバーへ送信する方法について解説します。 この記事のポイント Fetch APIではJSONをそのまま送信するか、FormDataオブジェクトを使って送信することができる 2つの方法はPOSTメソッドなどの通信方式とサーバー側でデータを受け取るときに挙動が少し異なる Fetch APIのAjaxを使ってJSON形式のデータを送信する Fetch APIからJSON形式のデータを送信するときは以下のいずれかの方法から選ぶことができます。 JSON形式のデータをそのまま送信する方法 Form Dataオブジェクトに値をセットして送信する方法 どちらの方法を選択してもJSON形式のデータは送信できますが、使用する通信方式やサーバー側でデータを受け取る挙動が少しずつ異なってきます。 以降では、2種類の送信方法をそれぞれ解説していきます。 JSO
ページがスクロールされたときに指定した処理を実行する方法を解説します。 この記事のポイント ページをスクロールするとイベントscrollが発生する スクロール量を参照するとページをどこまで表示したかチェックできる ページをスクロールするとイベントが発生する ページをスクロールするとイベントscrollが発生します。 このイベントは縦スクロール、横スクロールのいずれも発生します。 スクロールした量はwindowオブジェクトのscrollXプロパティ、またはscrollYプロパティから取得することができます。 イベントscrollはスクロール中に何度も呼び出されるため、上記のプロパティの値を確認することでどこまでページをスクロールされたか確認することが可能です。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"
新しくHTML要素を作成して動的に追加する方法について解説します。 この記事のポイント 新しいHTML要素を動的に追加する方法は3種類 HTML要素をオブジェクト形式で1つずつ追加するときはcreateElementメソッドを使う 複数のHTML要素を一括で追加するときはinsertAdjacentHTMLメソッドが便利 ページにHTML要素を動的に追加する ページに新しいHTML要素を動的に追加する方法は次の3種類が用意されています。 createElementメソッド – HTML要素をオブジェクト形式で指定した場所に追加する insertAdjacentHTMLメソッド – HTMLコードの文字列を渡すと、指定した場所にHTML要素を追加する innerHTMLプロパティ – HTMLコードの文字列を渡すと、要素内のHTML要素を書き換える 1つ目のcreateElementメソッド
設定したイベントリスナーをremoveEventListenerメソッドを使って解除する方法について解説します。 この記事のポイント 解除するには対象、イベントの種類、実行する関数が全て一致する必要がある オプションcaptureを指定しているときは値に気を付ける イベントリスナーに登録したアロー関数、無名関数はremoveEventListenerメソッドでは解除できない 登録したイベントリスナーを解除する イベントリスナーに登録するときはaddEventListenerメソッドを使用しますが、反対に解除するときはremoveEventListenerメソッドを使います。 次の例では、addEventListenerメソッドを実行した後にremoveEventListenerメソッドを実行してイベントリスナーを解除しています。 （イベントリスナーを登録してすぐ解除するのは実用的なコードで
文字列の中で変数を展開する方法について解説します。 この記事のポイント 変数を「`(バッククォート)」で囲ったテンプレート文字列の記述にする 配列の要素やオブジェクトのプロパティも文字列の中で展開できる 文字列の中で変数を使う 文字列と変数を組み合わせるときは結合演算子を使うことが多いですが、「`(バッククォート)」を使ったテンプレート文字列の記述にすると文字列の中で変数を展開することができます。 赤字の箇所でテンプレート文字列を使っています。 JS コード例 // 変数 let name = 'John'; let age = 30; console.log(`Hi, I'm ${name}. My age is ${age}`); // 出力： Hi, I'm John. My age is 30 // 配列 let person = new Array(); person.push(
JavaScriptのオブジェクトをJSON形式のデータに変換する方法について解説します。 この記事のポイント JSON.stringifyメソッドによるJSON形式への変換はObjectから文字列（String）への変換が実行される JSON形式に変換するプロパティを指定したり、変換時に実行する処理を指定できる JSON形式への変換後に挿入するスペーサー文字（半角スペースなど）を指定することもできる Object形式のデータをJSON形式のデータに変換する JavaScriptでオブジェクト（Object）形式のデータをJSON形式のデータに変換するときは、JSON.stringifyメソッドを使います。 JS コード例 // JSON形式に変換するObject形式のデータ const data = [ { "title": "K331", "category": { "category
Fetch APIを使って指定したURLからテキストファイルや画像ファイルなどを読み込む方法について解説します。 この記事のポイント 読み込むデータのファイル形式によって、Responseオブジェクトからファイルを取得するメソッドを切り替える 画像、音声、動画のようなリソースファイルを読み込むときはURL.createObjectURLメソッドを使ってページに挿入すると表示できる Fetch APIのAjaxでファイルを読み込む Fetch APIはサーバーにリクエスト（要求）を送信することで各種ファイルを読み込むことができます。 ファイルはどの形式でも読み込むことができますが、取得するファイル形式ごとにレスポンスデータの処理が必要になります。 以降では、以下の形式の各種ファイルをFetch APIで取得する例を上から順に解説していきます。 テキストファイルを読み込む JSONファイルを読
audio要素とvideo要素でそれぞれ使用することができるプロパティやメソッド、および発生するイベントについて解説します。 audio要素／video要素について ページに音楽ファイルを読み込むためのaudio要素と、動画ファイルを読み込むvideo要素はいずれもHTMLMediaElementの子孫要素です。 HTML要素の子孫関係 親要素が共通しているので、2つの要素は使えるプロパティ、メソッド、イベントのほとんどが共通しています。 一部、要素ごとに独自のプロパティやメソッドが用意されています。 以降は、audio要素とvideo要素が使用できるプロパティ、メソッド、イベントの内容を解説していきます。
JavaScript | GRAYCODE
Ajax XMLHttpRequestオブジェクトのプロパティ、メソッド、イベント一覧 XMLHttpRequestオブジェクトを使ってAjaxを実装する XMLHttpRequestでファイルを読み込む XMLHttpRequestでファイルを送信する XMLHttpRequestでフォームに入力されたデータを送信する XMLHttpRequestによるファイルの読み込み状況を取得する XMLHttpRequestのリクエストをキャンセルする XMLHttpRequestによる通信で一定時間経過したらリクエストをキャンセルする Fetch APIを使ってAjaxを実装する Fetch APIでフォームに入力されたデータを送信する Fetch APIでファイルを送信する Fetch APIでファイルを読み込む Fetch APIが使えるか確認する Fetch APIでJSON形式のデータを
フォームに入力されたデータ（入力値）をFetch APIによるAjaxでサーバーへPOST送信する方法について解説します。 この記事のポイント フォームの入力値はFormDataオブジェクトにセットして、Fetch APIで送信する FormDataオブジェクトにセットするデータは「ラベル」と「値」を組み合わせるように指定する Fetch APIでフォームに入力された内容をサーバーへ送信する ページにあるフォームで入力された内容をサーバーに送信するときは、Fetch APIとFormDataオブジェクトを組み合わせて使います。 フォームの入力値をセットしたFormDataオブジェクトを作成し、Fetch APIでサーバーにリクエスト（要求）を送信するときに「body」としてパラメータで渡すとフォームの入力された内容を送信することができます。 以下の例では、ページに5つの入力項目「氏名」「性
動画ファイルの再生速度を通常よりも速くしたり、遅くする方法について解説します。 この記事のポイント 動画ファイルの再生速度はvideo要素のplaybackRateプロパティで調整する playbackRateプロパティに設定できる値の範囲はブラウザによって異なる 動画ファイルの再生速度について 動画ファイルの再生速度はvideo要素のplaybackRateプロパティに値を設定すると調整することができます。 通常の速度は「1.0」、それ以上の値の場合は早く再生し、0.9から0.1の値はスロー再生になります。 「0」は再生が止まって一時停止と同じ状態になります。 また、「-0.1」以下の負の値を設定すると逆再生になります（2020年11月現在はPC版Safari、モバイル版ChromeとSafariのみ対応）。 以下の例は「スロー」「通常」「早送り」「もっと早送り」の4つのボタンを用意して
音声ファイルの再生速度を通常よりも速くしたり、遅くする方法について解説します。 この記事のポイント 音声ファイルの再生速度はaudio要素のplaybackRateプロパティで調整する playbackRateプロパティに設定できる値の範囲はブラウザによって異なる 音声ファイルの再生速度について 音声ファイルの再生速度はaudio要素のplaybackRateプロパティに値を設定すると調整することができます。 通常の速度は「1.0」、それ以上の値の場合は早く再生し、0.9から0.1の値はスロー再生になります。 0は再生が止まって一時停止と同じ状態になります。 また、-0.1以下の負の値を設定すると逆再生になります（2023年07月現在はPC版Safari、モバイル版ChromeとSafariのみ対応）。 以下の例は「スロー」「通常」「早送り」「もっと早送り」の4つのボタンを用意して、それぞ
ページのルート要素となるhtml要素、head要素、body要素を取得して編集する方法を解説します。 この記事のポイント getElementsByTagNameメソッドかquerySelectorメソッドを使って取得する head要素とbody要素はdocument.headとdocument.bodyからも取得できる 他のHTML要素と同様にsetAttributeメソッドで属性を設定できる HTMLのルートになる要素を取得する ページのHTMLは文法上、html要素、head要素、body要素が必ず1つずつ含まれています。 この3つのHTML要素はページの基幹になりますが、他のHTML要素と同様にgetElementsByTagNameメソッドやquerySelectorメソッドを使って取得し、編集することが可能です。 また、head要素とbody要素については、Documentオブ
ページを一定量スクロールしたときなどをきっかけにして、ページ移動しないでアドレスバーのURLを変更する方法について解説します。 この記事のポイント アドレスバーのURLだけを更新するときはpushStateメソッドかreplaceStateメソッドを使う pushStateメソッドはブラウザの閲覧履歴に1つのページの閲覧履歴として残る replaceStateメソッドは閲覧履歴が残らない アドレスバーのURLだけ変更する ページを一定量スクロールしたら次のページを表示するなど、ブラウザのページ移動を介さずにアドレスバーのURLだけを更新するときはHistoryオブジェクトのpushStateメソッドかreplaceStateメソッドを使います。 2つのメソッドはパラメータが共通していて非常によく似ていますが、pushStateメソッドはブラウザの閲覧履歴に残り、replaceStateメソ
ブラウザを表示している端末がタッチ可能かどうかを調べる方法について解説します。 この記事のポイント 端末がタッチに対応しているかを調べる PCのブラウザのエミュレータでiOS／Androidにしてもタッチ対応と判定する タッチに対応しているか判定する イベントハンドラのontouchstartプロパティ�はブラウザを表示している端末がタッチに対応しているときは存在し、対応していない場合は存在しない状態になります。 そこで、このプロパティが「undefined」かどうかを調べることがまず1つのヒントとなります。 iPhoneでwindow.ontouchstartを参照 加えて、同時に対応できるタッチの数をnavigatorオブジェクトのmaxTouchPointsプロパティから参照することで、より確実にタッチに対応しているかを調べることができます。 このタッチの数は1以上であればタッチに対
指定したGETパラメータの値を更新する方法について解説します。 この記事のポイント GETパラメータの値を更新するときはsetメソッドを使う setメソッドは同じパラメータ名が複数あるときは1つだけ残して他は削除する GETパラメータの値を取得するときはgetメソッドやgetAllメソッドを使う URLに含まれるGETパラメータの値を更新するときはURLSearchParamsオブジェクトのsetメソッドを使います。 以下の例は、URLのGETパラメータ「username」と「mode」に対して新しい値をセットして更新します。 赤字の箇所で値の更新を実行しています。 index.js // 対象URL:http://js.localhost/url.html?username=test&mode=data1&mode=data2 // URLを取得 let url = new URL(wi
ページのフォームに入力されたデータをサーバーの指定したURLへPOST送信する方法について解説します。 この記事のポイント フォームの入力値はFormDataオブジェクトにセットして、XMLHttpRequestオブジェクトのsendメソッドで送信する FormDataオブジェクトにセットするデータは「ラベル」「値」の組み合わせでセットする XMLHttpRequestでフォームに入力された内容をサーバーへ送信する ページのフォームで入力された内容をサーバーに送信するときは、XMLHttpRequestオブジェクトとFormDataオブジェクトを組み合わせて使います。 XMLHttpRequestオブジェクトでサーバーにリクエスト（要求）を送信するsendメソッドを実行するときに、フォームの入力値をセットしたFormDataオブジェクトをパラメータに指定するとフォームの入力された内容を送信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLの絵文字 文字コード表 | GRAYCODE HTML&CSS
URLに含まれるGETパラメータを取得する | GRAYCODE JavaScript
フォームが入力されたタイミングで処理を実行する | GRAYCODE JavaScript
数字を指定した桁数まで0埋めする | GRAYCODE JavaScript
![中国系ハッカー、“FBIのバックドア”から米通信大手をハッキング | p2ptk[.]org](https://cdn-ak-scissors.b.st-hatena.com/image/square/44d7851311bfad4e95296b931a5ab2882dbbf1b3/height=288;version=1;width=512/https%3A%2F%2Fp2ptk.org%2Fwp-content%2Fuploads%2F2024%2F10%2Fcalea.jpg)
配列の要素の一部を置き換える | GRAYCODE JavaScript
指定したHTML要素を削除する | GRAYCODE JavaScript
Fetch APIでJSON形式のデータを送信する | GRAYCODE JavaScript
スクロールしたときに処理を実行する | GRAYCODE JavaScript
新しいHTML要素を作成する | GRAYCODE JavaScript
設定したイベントリスナーを解除する | GRAYCODE JavaScript
文字列の中で変数を展開する | GRAYCODE JavaScript
JavaScriptのオブジェクトをJSONに変換する | GRAYCODE JavaScript
Fetch APIでファイルを読み込む | GRAYCODE JavaScript
audio要素／video要素のプロパティ、メソッド、イベント一覧 | GRAYCODE JavaScript
Fetch APIでフォームに入力されたデータを送信する | GRAYCODE JavaScript
動画ファイルの再生速度を速くしたり遅くする | GRAYCODE JavaScript
音声ファイルの再生速度を速くしたり遅くする | GRAYCODE JavaScript
html要素、head要素、body要素を取得する | GRAYCODE JavaScript
ページ移動せずにアドレスバーのURLを変更する | GRAYCODE JavaScript
端末がタッチ（タップ）に対応しているか確認する | GRAYCODE JavaScript
URLのGETパラメータの値を更新する | GRAYCODE JavaScript
XMLHttpRequestでフォームに入力されたデータを送信する | GRAYCODE JavaScript
www.nishinippon.co.jp
karapaia.com
licensecounter.jp
www.iezo.net
movieimpressions.com
news.yahoo.co.jp