「DIVE INTO CODE」学習記録 4日目
こんにちは。
4日目。JavaScriptを用いてHTMLを編集。DOMという仕組みと、jQueryの仕様を学ぶ。
学習内容
【DOM操作】
- DOMとは
- DOMツリーについて
- ノードとは
- HTML要素の取得
- イベントとは
- ノードの生成と追加、削除
- スタイルの編集
【jQuery基礎】
- jQueryとは
- イベント設定とイベントパンドラ
- トラバース
- マニピュレーション（要素の追加や削除）
【jQuery演習】
- タブ切り替え機能の作成
- アコーディオン機能の作成
- デートピッカー機能
感想
前回やってたJavaScript、
実際にどうやって使えばブラウザ上で動きを作れるんだ？
とよくわかってなかったんですが、なんとなく分かってきました。
JavaScriptがユーザーの入力やクリックなどを読み取って動き出す。
→DOMという仕組みを用いてJavaScriptがHTMLにアクセスする。
→JavaScriptで定義した関数のもと、HTMLが編集される。
すると画面が動きます。
言葉にするとやっぱりわかりづらいですね。
例えば、今回だとJavaScriptでノードを生成、追加、削除したり、スタイルを編集することで、
このようにクリックした項目の色のみ変えることができます。
また、
こんなんも作れます。
これらをいろいろ組み合わせると、
TODOリストが作れたりします。
記入した内容を追加したり、
やったやつを消したりみたいな。
現段階では、こういったものであれば見ながらだったら作れるようになります。
ブラウザを彩るかっこいい動きをするJavaScriptとまではいきませんが。
ちなみにjQueryというライブラリを使ったものであれば、
こんなのが簡単にかけます。
オリジナリティはないですがめっちゃ便利です。
JavaScript面白いです。
JavaScriptがユーザーの入力やクリックなどを読み取って動き出す。
→DOMという仕組みを用いてJavaScriptがHTMLにアクセスする。
→JavaScriptで定義した関数のもと、ユーザーの入力やクリックなどをそれぞれプログラミムによって変換し、HTMLが編集される。
jQueryはこの「JavaScriptで定義する関数」などの典型的な部分をまとめ、かきやすくしてくれるライブラリになります。
HTMLから一気に詰め込みすぎてしんどいですが、次はrubyなのでそんなことも言ってられません。どうせアルゴリズムとかrailsあたりでつまづくので、さっさとやっとかないとって思ってます。
まあロングランなのであんま無理はしないようにします。
ありがとうございました。