【JavaScript】DOMを操作して動きのあるTODOリストを作る【DIVE INTO CODE】

更新日:

「DIVE INTO CODE」学習記録 4日目

こんにちは。

4日目。JavaScriptを用いてHTMLを編集。DOMという仕組みと、jQueryの仕様を学ぶ。

学習内容

【DOM操作】

  • DOMとは
  • DOMツリーについて
  • ノードとは
  • HTML要素の取得
  • イベントとは
  • ノードの生成と追加、削除
  • スタイルの編集

【jQuery基礎】

  • jQueryとは
  • イベント設定とイベントパンドラ
  • トラバース
  • マニピュレーション(要素の追加や削除)

【jQuery演習】

  • タブ切り替え機能の作成
  • アコーディオン機能の作成
  • デートピッカー機能

感想

前回やってたJavaScript、

実際にどうやって使えばブラウザ上で動きを作れるんだ?

とよくわかってなかったんですが、なんとなく分かってきました。

 

JavaScriptがユーザーの入力やクリックなどを読み取って動き出す。

→DOMという仕組みを用いてJavaScriptがHTMLにアクセスする。

→JavaScriptで定義した関数のもと、HTMLが編集される。

 

すると画面が動きます。

言葉にするとやっぱりわかりづらいですね。

 

例えば、今回だとJavaScriptでノードを生成、追加、削除したり、スタイルを編集することで、

JavaScriptノード生成1

このようにクリックした項目の色のみ変えることができます。

また、

JavaScriptノード生成2

JavaScriptノード生成3

こんなんも作れます。

 

これらをいろいろ組み合わせると、

TODOリストが作れたりします。

 

記入した内容を追加したり、

JavaScriptTODOリスト1

 

やったやつを消したりみたいな。

JavaScriptTODOリスト2

 

現段階では、こういったものであれば見ながらだったら作れるようになります。

ブラウザを彩るかっこいい動きをするJavaScriptとまではいきませんが。

 

ちなみにjQueryというライブラリを使ったものであれば、

アコーディオン画像

こんなのが簡単にかけます。

オリジナリティはないですがめっちゃ便利です。

 

 

JavaScript面白いです。

 

JavaScriptがユーザーの入力やクリックなどを読み取って動き出す。

→DOMという仕組みを用いてJavaScriptがHTMLにアクセスする。

→JavaScriptで定義した関数のもと、ユーザーの入力やクリックなどをそれぞれプログラミムによって変換し、HTMLが編集される。

 

jQueryはこの「JavaScriptで定義する関数」などの典型的な部分をまとめ、かきやすくしてくれるライブラリになります。

 

HTMLから一気に詰め込みすぎてしんどいですが、次はrubyなのでそんなことも言ってられません。どうせアルゴリズムとかrailsあたりでつまづくので、さっさとやっとかないとって思ってます。

まあロングランなのであんま無理はしないようにします。

ありがとうございました。

-DIVE INTO CODE
-, , , ,

Copyright© s u p ? , 2019 All Rights Reserved.