javascript2

UTF16 コードポイントがU+FFFF以上の文字の場合は、コードユニット二つ(サロゲートペア)で表されるため、 サロゲートペアで表される文字列は2文字としてカウントされてしまう。 console.log(“吉野家”.length); これは吉が二文字なので合計4文字

indexOfをつかう あったらその開始位置をかえす　(0以降) なかったら-1をかえす var str = "abcde"; var idx = str.indexOf("bcd"); console.log(idx);

1

slice substring charAt

sliceは引数に-が許可され、後ろからを開始位置とすることができる

cde 後ろから数える時は1から(eとdの間なら数える) 前から数える時は0なので注意(aの前から) つまり後ろから3番目(bとcの間) 前から5番目(eのうしろ) なので cde

“0000”と数値を足せば、数値は暗黙的に文字列へ変換されるので、そこからマイナス値でスライスすればよい var num = 1234; //0詰めする数字 var result = ("00000" + num).slice(-5); //できた文字列 console.log(result);

/n でよい var a = "foo\nbar";

まず正規表現オブジェクトを作成する 正規表現リテラルで作成可能 /ここに正規表現をかく/ /ab+c/

正規表現オブジェクト.test(文字列) 真偽値がかえる if( /bcd/.test("abcde") ){ console.log("マッチしました"); }else{ console.log("マッチしませんでした"); }

{m,n}のように2つの数値を区切って書いたとき、直 前の文字をm回以上n回以下繰り返した文字列にマッチします。 つまりbが2回以上5回以下繰り返した文字列にマッチ ab{2,}c

saveメソッドは現在の描画スタイル設定(描画したものは保存されない)を保存する。 リストアはそれを復元できる。

"(?:)"を記述した場合は()内でマッチしたパターンが保持されない動作になる点が異なります。 つまり、¥1で置換したときにグループ内の文字列がでてこないってこと

aaa|bbb

/d

空白文字（半角スペース、\t、\n、\r、\f）すべて

大文字は反対の意味になる つまり空白文字以外、数字以外となる

.は改行文字はマッチしないけど、 [\s\S]は改行文字にもマッチする!!

Wordまでが選択されてカーソルはWordの後にくる

少なくとも大文字の英字が存在するパターンがある場合(後方一致) 最初の5文字を選択する 例えばabcdeaaAaaaaでマッチしてカーソルが最初に戻って .{5}で5文字(最初のabcde)にヒット！

前方一致　肯定後読みともいう pe が前に存在するScriptでマッチし カーソルはpeとScriptの間に戻る

文字列.match(正規表現オブジェクト) 返り値は文字列のリスト ¥0 ¥1が配列にはいってくるかんじ

文字列.replace(正規表現オブジェクト) 戻り値は置き換えた後の文字列

正規表現オブジェクトをつくるときにi フラグをつける "ABCDE".match(/abc/i)

gフラグを正規表現オブジェクトにつける "aaa1234bcd567efg8999h".match(/\d+/g) で返ってくる配列は["1234", "567", "8999"]となる キャプチャ(¥1 ¥2みたいなやつ)は行われなくなる gオプションがついていない場合は、0番目の要素にはマッチした文字列全体が、1番目以降にはグループ化した箇所の文字列が入っている。 gフラグがつくと、マッチした文字列が、0番目から順番に入っているようになります

$1は1番目の（つまり最初の）グループ化に対応します。グループ化が2つ以上あるなら、$2、$3、 マッチした部分文字列の全体は$&

"aaa1234bcd567efg8889h".replace(/\d+/g, function(str){ return "数" + str + "字"; }); // "aaa数1234字bcd数567字efg数8889字h"

数1234字を1234に変換していく replaceで第二引数は関数を利用する 関数の引数は 第一引数はmatch 一致した部分文字列（上記の $& に対応）です。 第二引数以降は p1, p2, …, pN キャプチャグループ（名前付きキャプチャグループを含む）で見つかった n 番目の文字列 なので、数字だけグループ化して第二引数だけを返すようにする "aaa数1234字bcd数567字efg数8889字h".replace(/数(\d+)字/g, function(str, num){ return num; }); https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace#%E7%BD%AE%E6%8F%9B%E6%96%87%E5%AD%97%E5%88%97%E3%81%A8%E3%81%97%E3%81%A6%E3%81%AE%E9%96%A2%E6%95%B0%E3%81%AE%E6%8C%87%E5%AE%9A

細かい図形をオブジェクトとして定義し、 drawメソッドをプロパティに用意する。 Contextクラスを用意して、上記のオブジェクトをインポートする。 そこでcanvasオブジェクトをハンドリングし、インポートとしたオブジェクトをインスタンスしていく。 描画対象のオブジェクトはリストで管理し、 それらを繰り返し処理で、内部のdrawメソッドを呼び出していく

どのまとまりをオブジェクト単位とするか考える オブジェクト内部でオブジェクトを利用してもいいので、部品化みたいな感じ それぞれの部品で、インタフェース(プロパティ)やふるまい(メソッド)と定義する 上記オブジェクトを扱うハンドリング用のシングルトンなオブジェクトを定義する。 ハンドラーやコンテキストみたいな命名とする。

“use strict”をスクリプトの先頭に書く。 何が変わるかについてはここにかいてある https://analogic.jp/use-strict/

JavaScriptの正しいコーディングのみを許可するモード

a button input textarea などのインタラクティブ要素にフォーカスが行われる

tabindex属性を付与し、 値は0に設定する

0か-1のみ -1だと、キーボードナビゲーション対象から削除される

document.defaultView でとれる

JavaScriptコードが動作しているWebブラウザのウィンドウまたはフレームを表します。 アラートなどダイアログボックスを表示させたり、ウィンドウのオープン、クローズするなどのメソッドがある。 https://so-zou.jp/web-app/tech/programming/javascript/window/

Window.getComputedStyle(p, null) を利用する ※第一引数は、Elementオブジェクトを指定する 戻り値はCSSStyleDeclaration

書き換えできない

第二引数で。擬似要素を指定できる Window.getComputedStyle(p, "::first-letter") ちなみに:hoverなど擬似クラスはとれない

グローバル変数の格納先はWindowオブジェクトなので、 var str=“foo” はwindow.strで参照できてしまう。 また、window.getComputedStyleは 単にgetComputedStyleともかける ただ、windowオブジェクトのプロパティはちゃんと明示的にかいたほうがいい

<style>〜</style>の間を表すオブジェクト 1 枚の CSS スタイルシートを表し、そのスタイルシートに含まれるルールのリストを調べたり変更したりすることができます 。 StyleSheet が親で、プロパティとメソッドを継承しています。

1 ドキュメントから取得する ドキュメントはスタイルシートをコレクション形式でプロパティで管理している。 var sheet = document.styleSheets.item(0); document.styleSheets[0]ともかける 2.スタイル要素を取得してからsheetプロパティで取得する var style = document.getElementById('mysheet'); console.log(style.sheet);

CSSStyleSheetオブジェクトのownerNodeとは、そのCSSStyleSheetのもととなるノードで、今回の場合、このCSSStyleSheetはstyle要素によって作られたから、style要素のノードが入っています

CSSRuleインターフェースを継承するオブジェクト　色々種類がある CSSStyleSheet.cssRulesプロパティでコレクション形式で取得できる。 つまり、sheet.cssRules[0]で取得できる。 https://developer.mozilla.org/ja/docs/Web/API/CSSRule

cssTextプロパティを利用すれば 読み取り専用で、取得できる。 例 var cssrule = document.styleSheets.item(0).cssRules.item(0); console.log(cssrule.cssText); で、 body { background-color: aqua; }がかえる

1 CSSStyleRule h1 { color: pink; } みたいなやつ 2 CSSMediaRule @media (min-width: 500px) { body { color: blue; } } みたいなやつ 他にも色々ある。 https://developer.mozilla.org/ja/docs/Web/API/CSSRule

CSSStyleRuleのselectorTextプロパティを利用する。 let myRules = document.styleSheets[0].cssRules; console.log(myRules[0].selectorText); // a string containing "h1".

できる！！　セレクタは変更できる

styleプロパティを利用する 取得されるのはCSSStyleDeclarationオブジェクトである。 let myRules = document.styleSheets[0].cssRules; console.log(myRules[0].style); // a CSSStyleDeclaration representing the declarations on the h1. CSSStyleDeclarationなので、以下のように変更もできる。 myRules[0].style.color = "blue";

CSSStyleDecorationのsetPropertyメソッドを利用する cssrule.style.setProperty("background-color","blue"); で書き換え可能 第一引数がプロパティ名で、第二引数に値を設定可能

文字列で、"important"を指定することができる。 background-color: blue !important;

getPropertyValueメソッド cssrule.style.getPropertyValue("background-color")で、 ”blue"あるいは"#0000ffなどの値が返ってきます。返り値は常に文字列で、もしそのプロパティがセットされていなかったら""が返ってきます。

スタイルシートそのものCSSStyleSheet(StyleSheetを継承) bodyとか、divとかpとか CSSStyleRule(CSSRuleを継承) background-color: aqua;の部分 CSSStyleDecation

CSSstyleDecationのメソッドで、 getPropertyPriorityを利用する。 getPropertyPriority("background-color")で、importantの部分のとこが取得できる もしなければこれまた""が返ってきます。

removePropertyメソッドを利用する。 cssrule.style.removeProperty("background-color");

CSSStyleDeclarationはコレクションでもあるため、 LengthやItemがつかえる cssrule.style.item(0)（またはcssrule.style[0]は"background-color"が返ります