Lesson6「DOMとオブジェクト指向」

この練習は本入部生のみ閲覧できます。

本入部はこちら

学習概要

javascriptから操作するDOMという概念とオブジェクト指向について学んでいきます。

補足

ログインが必要です

この練習でわからない所を質問する※部活外の質問はできません

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson6「DOMとオブジェクト指向」の内容※SEO用のため読めません

はい今回はどのとオブジェクト指向について学んでいきたいと思います。

どうというのはですね HTML の要素に対してそこにアクセスをしてその要素の情報を書き換えたりですとか削除したりそういった操作はできる仕組みのことを言います。

例えばですね今までにあった HTML で書いた文章があったとしますこれがですねブラウザの中ではどういう風な形になっているかというとブラウザの中ではこのようなものが作られてますこれはですねドームツリーと呼ばれるもので要素ごとに枝分かれをさせてお互いの関係わかりやすくしたものになりますこの度も釣りにある一つ一つのものを能動といいます要素と同じ意味合いなんですけれども JavaScript の方では濃度と呼んでますどんなプログラミング言語でもそうなんですが機会というのは上から下へ行動4で行きますなので HTML の文章ですね上から下に4で行くんですがまずですねドキュメントと呼ばれるロードが作られますへその下 HTML タグを次に詠み込みますのでそうすると HTML の濃度が出来上がりますでその中にヘッドというタグ次読み込まれてヘッドの濃度が出来上がりますそして meta タグが読み込まれてメーター濃度が出来上がってタイトルタグ読み込まれてタイトルの音ができますそしてその下に BODY タグ読み込まれてボディ濃度ができて H 1タグ P タグ読み込まれてそれぞれの音ができてその P タグの中に A タグがありますので英語ができるというような順番でドムツリーが出来上がっていますこの度のツリーが出来上がることによってですねお互いの濃度の親子関係だとか兄弟関係というのが分かるようになります例えば HTML とヘッドノードこれは親子関係になりますそして H 1濃度と P 濃度これは兄弟関係になりますニドム釣りを作ることによって機械の方でお互いの関係性というのが把握できるなりますこの度もという仕組みとですね JavaScript 何が関係しているかというとこの JavaScript いうのはものども元にですね HTML CSS というものを操作していますなので止めが出来上がる前にですねその濃度に対して操作をしようとしてもエラーになってしまうんですね酒ともやりましたがプログラミング言語とはうえから順に読み込まれていきますのでこのようにですね一つ一つ上から順にロードが作られていくような形になりますそして BODY タグが読み込まれてボディノートが作られた後にですね Script タグで JS JavaScript のコードは書かれていますなのでこれが実行されますその実行する処理が例えば H 1タグに対して何かを操作したいと言うなコードがあった場合ですね H 1タグというのはまだ読み込まれていませんので H は濃度というのは出来上がっていませんなのでこの JavaScript のコードはですねエラーになってしまうんですね前にもですね JavaScript のコードを書くときは操作する要素の後に書きましょうという話をしたかと思うんですけれどもそれは実はこういう理由からだったんですねこのようにですねその操作する要素の後にコードを書くというやり方でもいいんですけれども毎回毎回操作する要素に対して下に行動変えていると面倒なので JavaScript を書く場合は必ずこういった形で書くようにしてください Script タグの中にですねこのような形で書きます Windows イベントリスナーとしてかっこで囲ってですねシングルコーテーションまたダブルクォーテーションで domcontentloaded としてカンマで区切ってですね function とかまコレ関数ですねえかっことして中学校でその中に実際のスクリプトマコードレス音を変えていきますそして中学校が終わったらまたカンマで区切ってホルスト書いてかっこで最後閉じて命令文の最後につけるセミコロンをつけて終わりという形しますこのスクリプト自体はですねどこに書いていただいても大丈夫です同じようなものですねども content load というそのものともう一つロードと呼ばれるものを使った形のものがありますインターネットですね本によって書き方がバラバラなんですけれどもそれぞれ意味合いが違ってきますどのコントロールとの方はブラウザの作り終わったらその中のスクリプトが実行されるものですそしてロードの方は そのためが作り終わってさらに画像や CSS が全て読み込まれてから実行されるような形になりますブラウザというのはですねまずドームを作ってその後に画像や CSS を読み込んで画面に表示させるんですねあの手このロードの場合はブラウザの画面に画像が全て表示されてから実行されるのものになりますどちらを使ってもですね動作にそこまで変わりはないんですけれども基本的にですね JavaScript はどの操作していくので子供を作り終わった段階で実行してしまっても大丈夫なんですねでどのコントロールを使うようにお勧めします実際にその書き方で書いたサンプルのコードがこちらになります Script タグは BODY タグの閉じタグの前に変えてありますブラウザは上から HTML 4で行きます途中にスクリプトで JavaScript のコードがありますけれども HTML が全て読み込まれてないのでまだ実行はされませんどうして HTML の読み込みが終わるとブラウザの中でドームツリーがすべて出来上がっていますこれ初めて JavaScript のコードが実行されますコードの中を見てみると JavaScript のコードが実行されますコードの中を見てみるとバーナードと書かれてますという変数を作ってますねそして Document . Get ELEMENT by ID と書いてありますこれ何かというとドキュメントというオブジェクトの中にある Get ELEMENT by ID というメソッドを呼び出していますそしてタイトルというものかっこ中入れてますこの Get ELEMENT by ID というのはですね ID 属性がかっこの中の値のものを取得しますというメソッドになりますから今回タイトルなので ID 属性がタイトルのものを取得します ID 属性がタイトルのものは H 安宅ですね一番のオブジェクトと呼ばれるんですけども後で説明しますが一番のオブジェクトを能動という変数に入れていますそしてそのしたノードという変数ですねま H 1オブジェクトそのままですけれどもその H 1オブジェクトの中にあるドットスタイルと書いてスタイルプロパティの中のドットカラーと書いてカラープロパティその中に RGB で指定したカラーを代入していますのでカラーのプロパティを変えているんですね今の説明でですねオブジェクトプロパティメソッドと呼ばれるちょっと聞き慣れない言葉が出てきました分かりにくかったと思うんですが実は JavaScript というのはオブジェクトを操作する言語になります先ほども操作すると話しましたけれどもどの程度も実はオブジェクトなんですねオブジェクトというのはプロパティというものとメソッドというものを持っていますどういうことかと言うとですね例えば私たちの現実世界には犬という生き物がいますねその犬には研修であったり毛の色であったりま体重であったり体調身長といったものそのものに対しての情報というものがついてますねま属性と呼ばれるものですそして犬というのは食べたり増えたり舐めたりといったそのものが行える行動アクションと呼ばれるものがあります思うんですね私たちの世界の犬というのはそれぞれの情報を持っていてまた行える行動というアクションというものがあります私たちの世界の物体というのはすべてこういったように成り立っているんですねといえば車でも同じです車という物体があってそれに対してまいろうだとか射手座とかといった情報属性がありますそしてそれぞれの車には行える行動というのがあります走るですとかクラクションを鳴らすですとかという形で必ず分けることはできるんですねそしてプログラムの世界でもですね同じようにある物体オブジェクトと呼ばれるものがありますそのオブジェクトにはですね色々な情報というのが詰まっていますその情報を保管しているのは変数ですそしてそのオブジェクトにはですね行えるアクション行動というものがありますを実行できる処理ですねその書類というのはそれぞれ関数というものでまとまっていますこのようにオブジェクトというのはそれぞれ情報を持っていて行える処理というものが思っていますそのオブジェクトの中にある変数関数というものはそれぞれプロパティと呼ばれてメソッドと呼ばれます間変数関数と同じなんですがオブジェクトの中にあるだけでプロパティと呼ばれて関数のことをメソッドと呼んでるだけですこのようにですね現実世界の考え方はおプログラムの世界にも取り入れてですね同じような仕組みを使ってプログラムを作っていくというのがオブジェクト指向をというものになっていてそういった仕組みを持った件後のことをオブジェクト指向言語と言います HTML しげさ全然違うんですけれどもこの JavaScript に関してはオブジェクト指向言語と呼ばれるものでありますオブジェクト指向という考え方を元にしてオブジェクトを操作する言語ということですね JavaScript ではですねこのような考え方を元にして色々なオブジェクトがあります例えば先ほど出てきましたドキュメントオブジェクトですね返しのプロパティだとかメソッドと呼ばれるものを持っています HTML の要素ノードですねを書き換えたり操作したりするためのオブジェクトになりますか伝えるための処理ですねメソッドなどを持っているということです他にもですね画面を操作するためのウィンドウオブジェクトこれはブラウザの画面横幅縦幅だとかのプロパティと呼ばれる 持っていたりそれを処理するためのメソッドを持っていたりします他にもですね location オブジェクトと呼ばれるのだったり string オブジェクトと呼ばれ者だったりというものがありますこのようなオブジェクトのプロパティメソッドを使って操作していくというものは JavaScript のオブジェクト指向言語が俺のもとにですね先ほどの行動をまた見てみたいと思いますそうすると歯のを取ってドキュメントと呼ばれるオブジェクトの中に. Get ELEMENT by ID という形で Get ELEMENT by ID というメソッドがありますこれは指定した ID 属性のオブジェクトを取ってくるメソッドになります7で ID 属性がタイトルのオブジェクトを取ってきますそれが H 1のオブジェクトですねそして一番のオブジェクトを H 1タグですけれどもそれにはですねスタイルと呼ばれるプロパティを持っていますそしてそのスタイルのプロパティの中にはですねカラーと呼ばれる文字色であったりバックグラウンドと呼ばれる背景色であったりいろんなプロパティ情報を持っていますその中のカラーというプロパティ情報ですね他使えていますコナンですねオブジェクトを操作するにはオブジェクト名と書いてメソッド名ですねを書くとそのメソッドを実行することができます引数がある場合は引数の値を入れてあげますそしてオブジェクトのプロパティを操作したい場合は同じようにオブジェクト名ドットとしてプロパティ名を指定してあげてその中に値を代入してあげるという形になりますそのオブジェクトにあるメソッドだとかプロパティどんなものがあるのかってもどうやって調べるのかなんですけれども去年的にインターネットで検索していただくとすぐに出てきますかなり数が多いので全部は紹介できないんですけれどもまずはこちらのものだけ覚えていただければと思います先ほどのドキュメントオブジェクトを使って HTML のオブジェクト取得する方法ですね今まであれすね Get ELEMENT by ID というものと Get ELEMENT by TAG name TAG 名で取得するものだったり Get Elements by Class name Class 名から取得する方法だったりそれぞれで別れたんですけれども今は一律ですね Document . query selector としてかっこの中に CSS と同じですね同じセレクターというもの入れます ID 属性を指定したかったら# ID の名前だったクラス属性だったらドットとしてクラスの名前を入れたりとか出しで CSS の指定方法と同じように指定することはできますそうした形で指定することでその喉のオブジェクトを取ることができます実際変えてみたコードはこちらですね query selector シャープで ID 属性を指定して今回はですね Inner HTML というプロパティにアクセスをしてその中身を書き換えていますそうすると H 1タグの見出しの文字が書き換わるという形になりますこのようにですねどうも操作しながら値を書き換えるということをしていくのが JavaScript というものになりますはいいかがだったでしょうかまたはオブジェクト指向オブジェクトというものですねちょっと理解しにくいかもしれないんですが Java 部の方で詳しく説明をしていきますのでそちらを参考にしていただければと思いますではまた次回お会いしましょうさよなら