経緯
- AWS Lambda の勉強をしてたが、息抜きにJS中級者の3,4章を読んだ
3章 イベント
三章第一回 イベントプロパティ
三章第一回 イベントプロパティ — JavaScript初級者から中級者になろう — uhyohyo.net
例えばimg要素につけた場合その画像の読み込み完了を意味します。
ノードをそっくりコピーしてしまうはずのcloneNodeでも、イベントプロパティはコピーされないのです。
三章第二回 イベントリスナ
三章第二回 イベントリスナ — JavaScript初級者から中級者になろう — uhyohyo.net
- addEventListener() がオススメの方法
- 3爪の引数はフェーズ とりあえず false
複数イベント登録できる
- removeEventListener() の第２引数では、addと同一のオブジェクトじゃないとダメ
- 三章はみじかいなぁ
三章第三回 イベントバブリング
三章第三回 イベントバブリング — JavaScript初級者から中級者になろう — uhyohyo.net
DOMのイベントシステムの中でも面白いところなので、ぜひマスターしてください。
- あ、↓から処理される、ってやつね
実際に見てみるとわかるように、bodyの領域というのは画面全体ではありません。body要素にイベントを設定する際に罠となることもありますから、注意してください。
実際にクリックされたのはテキストですが、イベントが発生するのはそこの要素であるということになっています。テキストノードではイベントは発生しません。
三章第四回 イベントキャプチャリング
三章第四回 イベントキャプチャリング — JavaScript初級者から中級者になろう — uhyohyo.net
- addEventListener の第三引数
- trueになってる
イベントキャプチャリングとは、イベントバブリングの前に、親要素から子要素に向けてイベントが伝わるというものです。
- そういうものがあるとは知ってた (名前をオボえ手なかった)
- イベントバブリング(下から)がデフォルトののようだ (イベント属性で設定するとバブリングなので)
- 実際、デフォルトは false とのこと
- イベントキャプチャリングのフェイズで処理されるものが先
- キャプチャリングフェーズ、ターゲットフェーズ、バブリングフェーズ
- 全部合わせてイベントフロー
三章第五回 イベントオブジェクト
三章第五回 イベントオブジェクト — JavaScript初級者から中級者になろう — uhyohyo.net
実は、イベントが発生したときはイベントオブジェクトを通してイベントの様々な情報を得ることができます。
- イベントリスナの第一引数にわたされる
html要素のイベント属性（例えばonclick）を利用する場合もイベントオブジェクトが利用可能です。この場合は次の例のように、「event」という変数にイベントオブジェクトが自動的に代入されている
currentTargetプロパティはそのイベントリスナが登録されている要素
ev.targetは、実際にイベントが起きた要素（のhtmlelement）
このように、親要素にひとつだけイベントを登録して、そこからtargetなどを利用して処理する方法は、とてもよく使われます。
head要素中に記述されたスクリプトでdocument.bodyを参照できない （htmlは上から読みこまれるので、head要素の中身が読まれている時点ではまだbody要素は読みこまれておらず、したがってdocument.bodyは存在しないことになります。
ルート要素といい、documentが持つdocumentElementプロパティで取得できます
- console.log(document.documentElement);
- document.documentElement.parentNode は document
ちなみに、document.parentNodeを表示するとnullなので、documentが正真正銘の木構造の一番上です。
ページ全体でイベントを拾いたい場合、documentにイベントを登録することがよく行われます
イベントオブジェクトは、プロパティの他にメソッドも持っています
- preventDefault
- これはよく使う
javascriptのイベントのほうがデフォルトアクションより先に実行されます
- stopPropagation
- これも使う
一応紹介しましたが、このメソッドは滅多に必要になることはないでしょう。イベントフローを止めるということはまったく別の場所で登録されたイベントハンドラが実行されなくなるかもしれないということであり、明らかにバグの元です。百害あっても一利くらいしかありません。 - 使わない方がいいらしい
三章第六回 mouseoverとmouseout
三章第六回 mouseoverとmouseout — JavaScript初級者から中級者になろう — uhyohyo.net
ある部分にマウスが移動するとなにかが動くというような動作は、今でこそcssを用いて作られることが多いですが、一昔前はjavascriptのこれらのイベントを使って実装されていました。現在でも複雑なことをしたければこれらのイベントにお世話になる機会があるでしょう。
マウスイベントを扱う場合はbody要素の領域はその直下の部分のみとなり、黄色い部分（p要素の部分）はbody要素の領域と見なされません。
- 画面外(ブラウザの外)に行くとどうなるのだろう 2021/10/12 20:33
- mouseoutだけが発生するような…？
mouseover/mouseoutイベントのイベントオブジェクトには、relatedTargetというプロパティが用意されています。
mouseoverイベントでは、マウスの移動先がtargetプロパティに入り、移動元がrelatedTargetプロパティに入ります
body要素だけでなくhtml要素が出現することがあるのに気づくと思います。実は、ページ上表示されている領域全てがbody要素ではありません。たまに罠になりますから気をつけましょう。
四章第一回 文字列の操作
四章第一回 文字列の操作 — JavaScript初級者から中級者になろう — uhyohyo.net
ここで、変数strに代入されている"abcde"は、プリミティブ値（一章第二回）です。プリミティブ値なら、オブジェクトではないのだから、プロパティを持たないはずです。。。それにもかかわらずプリミティブ値のプロパティを参照できているのにはまた特殊な事情があります。なかなか難しいので、今は解説しません（九章第七回に説明があります）。
javascriptにおける文字列はutf-16で符号化されています - 統一されててすごい
文字列のlengthプロパティはコードユニットの数を数えます。 "吉野家".length は 4 ヨシが土吉だと これらの問題に対処するにはes2015の新しい機能を使う必要があります。
- indexOf()
- 無い時は -1
- この節結構長い 2021/10/13 16:18 7m
- str.slice(1,4) 開始位置と終了位置(再び含めなくする位置)
- substring 全ブ小文字
- substring と slice は基本同じ 負数を前者は0ニシテ、巧者は後ろから数える
- 一番うしろは -1 (まえから数えるバア位は0だけど違う)
- sliceの方がsubstringより人気
- 第２引数省略すいと最後まで
- charAt こっちはキャメルケース (使ったことある)
- コードポイント好き \u28ff
- \ud842\udfb7 ←コードユニット
es2015ではサロゲートペアではなくコードポイントを直接記述できる次のような記法が用意されています。。。"\u{20bb7}"==="??"。 ←コードポイント
四章第二回 正規表現
四章第二回 正規表現 — JavaScript初級者から中級者になろう — uhyohyo.net
「.」の部分に当てはまる文字は、何でもよいのです（例外的に、改行文字だけはこれに当てはまりません）
- s修飾子がいるんだよね 2021/10/13 16:39 17m
aからeは連続したアルファベットだから、次のように省略することができます。（連続というのは、正確には文字コードが連続しているということです。）。。a[a-e]c
javascriptでは、正規表現（検索条件）はオブジェクトの形で表現します。それが正規表現オブジェクト(regexpオブジェクト)です new RegExp("ab+c") -> この方法よりも正規表現リテラルを用いるほうが一般的です。それは、 /ab+c/
- この節もかなりnagaいね 2021/10/13 16:43 20m
/bcd/はオブジェクトなので、当然次のように変数に入れて利用することもできます。var cond = /bcd/; var str = "abcde"; console.log(cond.test(str));
a(bc)。。のように、ひとまとめにしたい部分を( )で囲みます。また、(?: )で囲むこともできます。この2つの違いは次回紹介しますが、基本的には後者の(?: )を使います。
- ☆ (?: ) でかこっていこう
先頭に^がついてます。実は、この文字はその位置が文字列の先頭であることを示します。（正規表現に複数行フラグがついている場合、行頭を表します。
\Sや\Dはたまに使います. - こういう使うひんど情報が書いてあると分かりやすいね
面白いのは次のような使い方です。[\s\S] これは、「複数の文字のうちいずれか」を表す[ ? ]の中に\sと\Sが入った形です。このように、\sなどを[ ? ]に入れることが可能です。この場合、ちゃんと「\sまたは\S」という意味になります。
\sは空白で\Sは空白以外だから、2つ合わせると「全ての文字」という意味になります。全ての文字という意味の記号として.を紹介しましたが、[\s\S]は.よりも範囲が広いです。なぜなら、.は改行文字にマッチしませんが、[\s\S]は改行文字にもマッチするからです。（\sが改行文字にマッチするため。）これは逆の意味を持つ2つの記号なら何でもよく、[\d\D]などでも同じことができます。また、.が改行にマッチしないのを補えばいいので(?:.|\s)でもできます。ただ、よく使われるのは[\s\S]のような気がします。
四章第三回 正規表現2
四章第三回 正規表現2 — JavaScript初級者から中級者になろう — uhyohyo.net
testの場合とは逆で文字列のメソッドであり、引数に正規表現を指定します。つまり、文字列.match(正規表現)という形です
結局のところ、グループ化に( )と(?: )の2種類があった理由は、前者はキャプチャするグループ、後者はキャプチャしないグループという使い分けのためです。キャプチャが目的でないグループ化には(?: )を使いましょう。
- console.log("aaa1234bcd567efg8999h".match(/\d+/g))
- Array(3) [ "1234", "567", "8999" ]
- console.log("aaa1234bcd567efg8999h".match(/\d+/))
- Array [ "1234" ]
- なるほど 2021/10/13 19:53 39m
matchでgフラグを使う場合、キャプチャは行われなくなります。
他にm、y、uがあります
m 複数行に渡る一致。先頭および終端を示す文字 (^ や $) が、複数の行で機能します
s ドットオール(dotall)。「.」が改行文字(\n)に一致します。
y 先頭固定(sticky)。対象文字列中の正規表現のlastIndex プロパティによって示された位置からのみマッチするようになります (それより後の位置からのマッチは試みません)。簡単に言えば調べる位置を指定したい時にyフラグを使います。e
u パターンを Unicode コードポイントの羅列として扱います (Binary 文字列も参照)。
また、$&とすると、これはマッチした部分の全体になります。つまり、今回の場合はグループ化を使わなくても同じことが次のようにできます。 "aaa数1234字bcd数567字efg数8999字h"となります。
- ☆ $& 知らなかった
もう1つの方法は、replaceの第2引数に置き換え後の文字列ではなく関数を与える方法です。
- 便利そう JSっぽい
よかったところ
- $& がマッチしたところそれぞれと知れてよかった
時間まとめ
- 2021/10/12 よみはじめ
- 10/13 よみおわり
- ブログ 15分、読むのに 1時間45分
- まぁ一章あたり1時間くらい
- そろそろ、知らないことだらけに鳴っていくんじゃないかなと思う (ここまではなんとなく知ってたことが多い)
- 累計: 476分
