JavaScriptのセンターピン

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