Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScriptのセンターピン

yosi
August 08, 2022

 JavaScriptのセンターピン

yosi

August 08, 2022
Tweet

More Decks by yosi

Other Decks in Programming

Transcript

  1. P r e s e n t e d b y y o s h i
    チーム開発。
    JavaScriptで
    いかがでしょう👀??

    View Slide

  2. View Slide

  3. View Slide

  4. センターピンとは??
    ところで,,,,


    View Slide

  5. 一番効果が望める力点




    View Slide

  6. 一番効果が望める力点




    View Slide

  7. プログラミング言語にも
    センターピンはございます。


    View Slide

  8. 範囲を先取りする。


    View Slide

  9. 視点
    1.HTMLの主要のタグ


    View Slide

  10. JSはHTMLのtagu内のidを基点にしている!
    →パターンはある程度決まってる!
    どういう時に使われる?
    ・フォームの送信(生成・新規作成)
    ・link移動(非同期通信)
    ・テーブル(表示一覧)
    なぜHTML??


    View Slide

  11. 視点
    2.イベントハンドラ


    View Slide

  12. ある特定の操作をトリガー(基点)として動きます。
    →この基点がイベントハンドラ!
    ・clickした時
    ・ボタン状をホバーした時
    ・LINKに飛んだ時
    etc
    イベントハンドラ


    View Slide

  13. ある特定の操作を基点として動きます。
    →この基点がイベントハンドラ!
    JSの主要な要素は全てHTMLのタグが発火箇所にな
    ります!
    イベントハンドラ一覧(抜粋)


    View Slide

  14. 視点
    3.関数表記


    View Slide

  15. JSの記述は関数型言語に近い思想になります!
    知っておきたいこと
    ・オブジェクト指向
    ・関数指向
    書き方
    ・無名関数
    ・コールバック関数
    なぜ関数??

    View Slide

  16. 視点
    4.DOM操作


    View Slide

  17. ブラウザ側がブラウザAPIは使用する際に
    JavaScriptをデファクトスタンダードで扱えるように
    してるから。
    JavaScriptでブラウザAPIを動かしています。
    その際にブラウザAPI側で書くドキュメントの各要素をオ
    ブジェクト的に動かせるようになってる。
    →これがDOM操作!
    なぜJSがフロントで必要??

    View Slide

  18. ブラウザ側がブラウザAPIは使用する際に
    JavaScriptをデファクトスタンダードで扱えるように
    してるから。
    JavaScriptでブラウザAPIを動かしています。
    その際にブラウザAPI側で書くドキュメントの各要素をオ
    ブジェクト的に動かせるようになってる。
    →これがDOM操作!
    なぜJSがフロントで必要??

    View Slide

  19. 範囲を先取りする。


    View Slide

  20. 御清聴ありがとうございました


    View Slide