async 簡単に説明すると、非同期な処理をスッキリと書ける構文です。 async function () { 〜〜〜 } functionの前に「async」とつけるだけです。これで非同期処理を実行できる関数を定義したことになります。 ・asyncな関数は必ずPromiseを返します。 ・関数…
「Promise」を理解する前に重要な概念である「同期処理・非同期処理」と、「コールバック」についてまとめます。 同期処理 プログラムを上から下へ順番に一つずつ処理していくものになります。 処理：1 ↓ 処理：2 ↓ 処理：3 続く・・・ しかし、途中で時間の…
バブリング・・・ 何らかのイベントが発生した場合、その要素だけでイベントが発生するのではなくその要素の親要素へ順にイベントが伝わり、親要素でも同じイベントが発生します。（上にイベントが伝達されていくこと） バブル（泡）が上に上がっていくのを…
・change イベント フォーム( input 要素)や選択メニュー( select 要素 )、テキストエリア( textarea 要素)にてユーザーの操作によって値が変更されたときに発生するイベントです。 addEventListener メソッドを使用する場合はこのように記述します。 const …
ブラウザを開いている場合、例えばリンクをクリックすればリンク先のページへ移動したり、チェックボックスをクリックすればチェックされるといったデフォルトの動作がいくつか設定されています。 Event オブジェクトの preventDefault メソッドを使用するこ…
イベントオブジェクト・・・ イベントが発生し、イベントハンドラやイベントリスナーが呼び出されると、イベントオブジェクトというものが渡されます。 イベントオブジェクトには、イベントの詳細情報が保管されており、マウスの座標はどこにあるのか、どの…
click イベントはマウスのカーソルが要素の上にある状態で、マウスが押されたあとで離された時に発生するイベントです。 onclick 属性または onclick プロパティに対してイベントハンドラを設定できます。 また、addEventListener メソッドの引数として clic…
既に存在しているノードを削除する方法があります。 remove と removeChild です。 ・removeChild 親要素から見て、削除する要素をremoveChildに渡して削除するメソッドです。子要素を削除するものになります。 parentnode.removeChild(childnode) 実際にサ…
ページや要素の最後に署名や何かのお知らせなど、別の要素を追加したい時があると思います。 ・appendChild 特定の親要素の中に要素を追加するためのメソッドです。 要素を指定し、その要素の子要素として、HTMLタグを追加することができます。 追加される場…
特定の要素ノードから見た親要素、子要素、兄弟要素のノードを取得する方法について見ていきます。 これは例えば、ボタンをクリックした際に、親要素に何か追加したり、子要素に変更を加えたい時に役立ちます。 ・親要素を取得 node.parentElement // 特定の…
classList・・・ 特定の要素のクラス名を追加したり、削除したり、参照したりすることが出来る便利なプロパティとなります。classListの後にメソッドを定義することにより、追加削除などの機能を指定することができます。 add・・・クラスを追加 remove・・…
innerText・innerHTML・textContent この3つについての違いがわからなかったので簡単にまとめてみました。 ・innerText 選択した要素、またその全ての子要素のページ上で見えているものを表示します。 ※非表示の要素は返しません。 ある文章のpタグの値を取…
CSS のセレクタ形式で条件を指定して一致する要素を取得できるメソッドですが、違いがあるのでまとめてみました。 ・querySelector() 指定したセレクターの条件と一致したHTML要素のうち最初のひとつを返します。返り値は配列ではなく単一のデータとして返さ…
getElementsByTagName メソッドは、要素のタグ名を指定して一致する要素をすべて取得します。 document.getElementsByTagName(tagname) 例えば、divタグ、段落要素のpタグや画像要素のimgタグなどの要素を全て取得できます。 実際に確認してみましょう。 あ…
getElementById・・・ getElementById メソッドは、要素の id 属性の値を指定して一致する Element オブジェクトを取得するものです。 その前にDOMについて簡単に説明します。 「Document Object Model」の略で、Webページ全体のコンテンツをオブジェクトと…
分割代入というのは、「配列の要素」や「オブジェクトのプロパティ」を分解・分割して、変数（や定数）に値を代入することを指します。 実際にサンプルを見てみましょう。 ・配列の分割代入 const scores = [92, 89, 88, 77, 54, 24, 11]; const [gold, silv…
配列式や文字列などの反復可能オブジェクトを0個以上の引数（関数呼び出しの場合）や要素（配列リテラルの場合）を期待された場所で「展開」したり、オブジェクト式を0個以上のキーと値のペア（オブジェクトリテラルの場合）を期待された場所で「展開」した…
JavaScriptでの関数の受け取る引数には「=」でデフォルト値を指定する事が可能です。デフォルト値を指定した場合、呼び出し元から引数を受け取らなかった場合に指定した値が代入されるようになります。 実際にサンプルを見てみましょう。 function myFunctio…
ブラウザなどで、ページが表示されてから一定時間後に表示を変更したり、ページを遷移させたいというときには、setTimeoutとsetIntervalという関数を使うことができます。 ・setTimeout setTimeoutは、指定した時間後に一度だけ動作するものです。 指定した…
・every 配列が条件をすべて満たす場合にtrueを返します。 ・some someは配列が条件を一つでも満たしていればtrueを返します。 早速サンプルを見てみましょう。 const exams = [80, 98, 92, 78, 77, 90, 89, 84, 81, 77] exams.every(exam => exam >= 75); /…
提供されたコールバック関数を満たす要素からなる新しい配列を生成します。 実際にサンプルを見てみましょう。 const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; numbers.filter((num) => { return num === 4; }) // [4] 1~10が入った配列があります。filt…
関数式を簡潔に書くことができる構文です。 早速サンプルを見てみましょう。 // 通常 const add = function (x, y) { return x + y; } add(3, 4) // 7 // アロー関数 const add = (x, y) => { return x + y; } add(3, 4) // 7 アロー関数式でも関数名は記述…
mapメソッド・・・ 与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成するものになります。 目的としては、「配列を違う形に変換する」ことです。 サンプルを書いてみます。 const numbers = [1, 2, 3, 4, 5]; const d…
配列の便利メソッドのうちの一つであるforEachメソッドについて学んでいきます。 配列操作に特化したループ処理。 コールバック関数を受け取り、配列の要素ごとに関数が呼ばれていきます。 サンプルを見てみましょう。 let numbers = [1, 2, 3, 4, 5]; //渡…
JavaScriptでよく使用されるtry~catch文について学んでいきます。 これはエラーが起きた時の処理になります。エラーが起きてしまった場合でも何かしら処理を実行する必要があります。（意図的にエラーを回避するための処理） 一般的な記述方法を見ていきます…
thisについて学んでいきます。 記述する内容はメソッドでの呼び出しについてです。 メソッドの中の「this」 ・・・同じオブジェクト内の他のプロパティを使いたい時に「this」を活用できます。 サンプルで一つオブジェクト用意します。 const cat = { name: …
これまでメソッドといえば下記のようなものがありました。 'hello'.toUpperCase() // HELLO オブジェクトのプロパティに関数を定義できるものを「メソッド」と呼びます。 オブジェクトの「キー」に対して関数を割り当てることが可能です。 { mathオブジェク…
前回の続きにもなります。タイトルだけでは理解しづらい部分でもあるので、早速サンプルを見てみましょう。 実用的ではないですが、ランダムは数字を作成し、その数字によって条件分岐するものを書いてみます。 function makeRandomFunc() { const rand = Ma…
・関数式 関数式とは変数（もしくは定数）に関数を値として代入し、後からその変数を呼び出すことで関数を間接的に利用する方法です。 これまでの関数は、下記のように記述していました。 function add(x, y) { return x + y; } add(4, 8); //12 この場合、…
今回は関数のスコープについて記述していきます。 ・関数のスコープ 変数が「参照できるか」 どこで変数を定義したかで、どこからその変数を参照できるかが決まってきます。 関数の中で定義したのか、外で定義したのか、for文やif文の中で定義したのかなどに…
