t_hazawaの日記

株式投資とWebエンジニアリングのブログです。株式投資の目次は→です。 https://t-hazawa.hatenablog.com/entry/2021/02/12/220933

JavaScript中級者になろう 5章・6章を読んだ

Webエンジニアリング

前: JavaScript中級者になろう 3章・4章を読んだ - t_hazawaの日記

経緯

  • 私物AWSでRDSをLambdaで止めることに成功した
  • 息抜きかねて　5章　短ければ六章も
    • 短そうなので6章まで

概要

  • 知らないことが多くなってきた

第五章　CSSの操作

五章第一回 計算済みスタイル — JavaScript初級者から中級者になろう — uhyohyo.net

五章第一回　計算済みスタイル

  • 計算済みスタイル

  • var style = document.defaultView.getComputedStyle(p, null);

  •  console.log(style.backgroundColor);

  • document.defaultViewは、見ての通り、documentが持つdefaultviewプロパティです。これは、現在のドキュメントに対応するwindowオブジェクトというものを取得します

  • なぞだったwindowオブジェクト

  • getComputedStyleによって取得したスタイルは、HTMLElementのstyleとは違い、書き換えできません。

  • 擬似要素はcssの用語で、例えば::first-letterのようなものです。

  • 似た形でも、:hoverや:visitedなどは擬似クラスと呼ばれ、擬似要素ではないのでこの方法は使えません。擬似クラスはコロンが1つ、擬似要素はコロンが2つという違いがありますので気をつけましょう。ただし、歴史的経緯により、擬似要素でもコロン1つで書かれることがあります（:first-letterなど）

  • 実は、もうひとつdomにもともと存在している変数としてwindowがあります

  • 上でdocument.defaultViewと書いていたのはwindowと書いても構いません。

  • windowは実はグローバルオブジェクトです。グローバルオブジェクトというのは特殊なオブジェクトで、グローバル変数は実はグローバルオブジェクトのプロパティである

  • var str = "foo"; console.log(window.str); // "foo"

  • 実はwindow.getComputedStyleは単にgetComputedStyleのようにグローバル変数として扱っても利用できます

  • 結局のところ、document.defaultView.getComputedStyleは単にgetComputedStyleと書くことができます。ただ、windowをグローバル変数として扱うのは分かりにくいしバグの元なので、なるべくやらないようにしましょう。

五章第二回　CSSの構造

五章第二回 CSSの構造 — JavaScript初級者から中級者になろう — uhyohyo.net

  • CSSStyleSheetは、CSSそのもの

  • link要素を使って外部のCSSを読み込んだ場合も、そのlink要素についてCSSStyleSheetがつくられます。

  • document.styleSheets
  • ＜style> 要素ごとにできそう
  •   var style = document.getElementById('mysheet');
console.log(style.sheet);

  • sheet.disabled = true;

  • スタイルシートをまるごと無効にできる
  • ownerNode で、どのstyle要素やlink要素かをとれるらしい
  • ここのCSSルールは セレクタごとに CSSRule というオブジェクトになる
  • CSSStyleSheet.cssRules[0].cssText

  • cssTextは読み取り専用です

  • {} は CSSStyleRule
  • .selectorText は変更可能
  • .style は CSSStyleDeclaration 変更可能
  • また今回は省略しましたが、実は第三引数を指定することが可能です。　の前まで　2021/10/18 1:13 30m
  • .getPropertyValue()
  • .removeProperty()
  • {} 以外でのスタイルシートの指定
  • @charset "utf-8"; とか
  • @import "style.css";

五章第三回　CSSの操作

五章第三回 CSSの操作 — JavaScript初級者から中級者になろう — uhyohyo.net

  • cssでは、このように重複する指定があった場合、後ろにあるほうが優先されます。 (セレクタとかで同順位だったら)

第六章 XMLとXHTML

六章第一回　XML・XHTMLとは

六章第一回 XML・XHTMLとは — JavaScript初級者から中級者になろう — uhyohyo.net

  • svgという画像フォーマットがありますが、その中身はxmlファイルです

  • DOMでは、HTMLだけでなくXMLも扱えます

  • いままでの関数はみな XMLでも使える　
  • xmlDocument.documentElement;
  • ルート要素を得る

  • もともとhtmlはxmlとは似ていても少し違うものでしたが、そこで、htmlをxml文書の一種として書けるようにしたものを作り ました。 それがxhtmlです。(普及せず)

  • html5 に負けた xhtml
  • 要素名や属性名は小文字 (xhtml)

  • xmlが大文字と小文字を区別するからこのようなことになっています。

  • HTMLでは ＜ul> ＜li>あああ ＜li>いいい ＜li>ううう ＜/ul>
  • も実は可能 (閉じタグなし)
  • ＜img> も閉じないといけない xhtml
  • ＜img ... /> でよい

  • XHTMLは廃れましたが、これの影響を受けてHTMLなのに
    のように書かれているサイトがたまに見られます。HTMLではこのような記法をする必要はありませんが、一応許容されています。 - なるほど

  • script要素の中身の全体が<![CDATA[ ? ]]>で囲まれています。これで囲んだ部分はCDATAセクションといって、style要素やscript要素の中身は普通これにします（絶対というわけではありませんが）。

  • CDATAセクションの中では特別な意味を持つ文字も記述できることになっています。つまり、< >などはタグを記述するのに使われる記号だから、普通< >のように書く必要がありますが、CDATAセクションの中ではこれらはそのまま書くことが出来ます。

六章第二回　名前空間

六章第二回 名前空間 — JavaScript初級者から中級者になろう — uhyohyo.net

  • xmlns は xml name space だったのだなぁ

  • 同じabcdでも、aaaに属するそれとbbbに属するそれは異なる要素として扱われます。

  • "http://example.com/aaa"が名前空間です。aaa自体は名前空間接頭辞

  • そのurlが表すインターネット上のページなどが存在しなくても構いません (重複する可能性が低いからURIを名前空間として使ってるだけ)

  • この文書全体は何らかの別のフォーマットに従っているはずです。しかし「ユーザーリスト」の部分はそれとは独立した別のフォーマットを利用しているので、これらは区別したくなります。ここで出てくるのが名前空間です。

  • 実際に自分で名前空間を作ることは少ないでしょう。実際には、XHTMLやSVGなど既存のフォーマットにはちゃんと名前空間が定義されていますから、それをちゃんと扱えるようになることが名前空間を学ぶ大きな意義です。

  • デフォルト名前空間というものがあります。それはつまり、名前空間接頭辞の無いタグがどの名前空間に属するか

  • xmlnsも無い場合は、「名前空間が無い」という扱いになります。

  • xhtmlは決まった名前空間に属することになっています。その名前空間は、http://www.w3.org/1999/xhtmlです

  • XHTML以外の自分が勝手に作った要素をブラウザは当然知りませんから、そこにそういうタグがあってそういう構造をしていることは認識できても、それがどういう意味なのかは分かってくれません。だから、気を利かせてリストっぽく描画してくれたりはしません。描画をいい感じにするにはやはりCSSを使います。実はCSSでも名前空間を扱うことができますので、気になる人は調べてみましょう。

六章第三回　XMLとDOM

六章第三回 XMLとDOM — JavaScript初級者から中級者になろう — uhyohyo.net

  • tagNameには名前空間接頭辞も含んだタグ名が入っている

  • このように名前空間接頭辞も含んだタグ名は「qualified name」の略で「qname」とよばれます

  • 同じ名前空間でも名前空間接頭辞は人によって違う可能性があり、名前空間接頭辞の情報はあまり役に立ちません

  • .prefix .localName .namespaceURI (書き換え不可)

  • tagnameなども書き換えられない

  • document.createElementNS("http://www.w3.org/1999/xhtml", "xhtml:p"); 引数も2つに増えていて、1つめが名前空間のURI、2つめが接頭辞つきのタグ名（QName）です。

  • テキストノードは特に名前空間に属したりはしないので、特に変わりません。

  • 名前空間を含む文書で普通のcreateelementを使用した場合、名前空間に属しません。ただし、xhtml文書の場合は親切にも自動で"http://www.w3.org/1999/xhtml"に設定してくれます

  • document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "a")

  • 普通のgetElementsByTagNameの場合、指定するのはQNameです。名前空間は関係なく指定されたQNameを持つ要素が列挙されます。

  • ちなみに、getElementsByTagNameNSの第一引数に"*"を指定すると、全ての名前空間から探すことができます。i

  • 属性も名前空間を持ちます。

  • タグ名に接頭辞がつかない場合はデフォルト名前空間に属することになっていましたが、属性の場合はそのような名前空間に属しません。

  • 属性に接頭辞をつけた場合、その属性はグローバル属性というものになります。この属性は、「要素から独立している」のだそうです。一応要素とくっついていますが、要素に属しているというわけではないらしいです

  • xhtmlで書かれた文書に何か独自の情報を追加したいとき、このように別の名前空間の属性を要素の属性としてくっつけておくことができます。

  • getAttributeNS, setAttributeNS

  • getAttributeNSではローカル名だった第二引数が、setAttributeNSではQName（接頭辞も含む名前）になっている

感想

  • 知らないことがたくさんあった

時間まとめ

  • 2021/10/18にはじめた
  • 2021/10/20 におわった
  • 30 + 29+ 30 + 3 + 14(ブログ) = 106分
  • 累計: 582分

次: JavaScript中級者になろう 7章・8章を読んだ - t_hazawaの日記