Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
CTO と VPoE がプログラミング初学者向けにオンライン勉強会を開催します。 ライブ配信で Web サービスづくりを一緒に学んで行きましょう。 質問なども随時受け付けていますので、お気軽にどうぞ。ハッシュタグ #mu_zaru ムーザルちゃんねる JavaScript で ToDo アプリを作ろう (後編) YouTube Live 2020.5.28 Thur. 21:00~
Slide 2
Slide 2 text
Lv.4 Lv.3 Lv.2 Lv.1 HTML/CSS を触り始める 初学者向けです。JavaScript/PHP/Ruby などを使って Web 開発をしていきたい方向けです。Lv.2-3 をメイン対象としてます。 難易度? 書籍、Progate、ドットインストールなどで JS/PHP/Ruby 入門 スクールに通いフレームワーク Laravel/Rails や DB/Git 入門 未経験から内定圏内 / エンジニア1年目 実務 1~2年 テストコード、リファクタ、設計、インフラ 中堅 以上 Lv.5 Lv.6
Slide 3
Slide 3 text
Progate や ドットインストールなどで基礎を学び、その次 になにをしようか迷ってる方。 スクールに入るか迷ってる方。 何かをつくるのが 一番勉強になる
Slide 4
Slide 4 text
現役のエンジニア二人 赤貝が好きな CTO と デザイン勉強中のエンジニア 話す人 @mu_vpoe 居候→エンジニア→Mgr チームづくり採用など。 Twitter で虚空に放たれ た疑問に答える。数学が 好き。 ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components.
Slide 5
Slide 5 text
エディタ触りながらではなく、 動画に集中してもらって大丈夫です。 YouTube 上でも、Twitter の メンションでも構いません。 質問にはできるだけ答えていきた いと思います。 質問OK ライブ配信の動画は、 そのまま YouTube に公開します。 なので途中で抜けてもいいし、 生で見なくてもいいです。 動画公開 ソースコード公開 講義中に使うソースコードは全て GitHub に公開しています。 github.com/mu-zaru/mu-zaru-channel
Slide 6
Slide 6 text
今回つくるもの Demo ブラウザ上で動く ToDo アプリです。新規の タスク登録や、完了処理などを作ります。 データの保存は行わないので、実用には耐え ませんが、JavaScript の勉強にはちょうど 良いです。
Slide 7
Slide 7 text
前回のおさらい 見た目を作る CSS で完了したタスクを表現する 完了ボタンを押した時に、完了スタイルにする 全てのボタンを押して完了できるようにする 今回→新規タスクの登録をできるようにする 1 2 3 4 5
Slide 8
Slide 8 text
前回のおさらい
Slide 9
Slide 9 text
今回のステップ (新規タスクの登録をできるようにする) 見た目を作る id と class をつけて JS から呼び出しやすくする 入力テキストを取得する 入力したテキストを表示する 1 2 3 4
Slide 10
Slide 10 text
Step.1 まずは HTML だけで見た目を作ってみます
Slide 11
Slide 11 text
Step.2 id と class をつけて JavaScript から呼び出すくする id とは、HTML 全体の中で必ず重複しないユニークな名前をつける必要が ある。この id をつけることで JavaScript から簡単にタグを特定して呼び 出すことができる。 button = document.querySelector('#add-button'); button = document.getElementById('add-button');
Slide 12
Slide 12 text
Step.2 id と class をつけて JavaScript から呼び出すくする class は、HTML のなかに同じ名前が何個あっても問題ない。 buttons = document.querySelectorAll('.done-button'); buttons = document.getElementsByClassName('done-button'); 複数存在する前提なので、配列で返ってくる。
Slide 13
Slide 13 text
Step.2 id と class をつけて JavaScript から呼び出すくする このままだと、全てのボタンに対して「完了する」というアクションが 発生してしまう。 querySelectorAll('button') → querySelectorAll('.done-button')
Slide 14
Slide 14 text
Step.3 入力したテキストを取得する document.querySelector('input').value 指定した input タグの入力した値を .value で取得できる。
Slide 15
Slide 15 text
Step.4 タグを JavaScript で作成する element = document.createElement('要素名') 指定した要素を新しく作る element.innerText = 'text' 要素のテキストを設定 document.body.appendChild(element) 要素を body に追加
Slide 16
Slide 16 text
ありがとうございました 次回は 6/4(木)21:00 予定 「データベースとSQLが分かった気になる勉強会」 今回のソースコードはこちら github.com/mu-zaru/mu-zaru-channel 質問や感想など呟いていただけると嬉しいです ハッシュタグは #mu_zaru