강의

멘토링

로드맵

Programming

/

Front-end

DOM インタラクション

DOM は動的アプリケーションの必須であり、基盤です。 Element、Document、Window オブジェクトで発生する、発生させるすべてのイベントを基本から活用まで扱います。Web Component (Custom Element、Shadow DOM、Template) を完全に学び、活用することができます。 開講された「DOM 完全終了: 基本」講座と合わせて、DOM の終止符を打つことができます。

  • tonextday
dom
javascript
자바스크립트
event
html
DOM
JavaScript
HTML/CSS

こんなことが学べます

  • Element、Document、Window のすべてのイベント

  • Web コンポーネント: カスタム要素、シャドウ DOM、<template>

  • クリップボード、ドラッグ&ドロップ、ミューテーションオブザーバー

DOM + Web Component
根本を変えなければ流れが見えません。

クーポン割引:49,000円で
クーポン番号:https://inf.run/PwQ9w

動的アプリケーションのためのDOMの終止符。

ユーザー中心の動的アプリケーションを実装するには、ユーザーの行動を認識する必要があります。Element、Document、Windowオブジェクトで発生する、または発生させるすべてのDOMイベントでこれを行うことができます。

Webコンポーネントを完全に学ぶべき理由とは?

Web ComponentはHTML、CSS、DOMそしてJavaScriptを組み合わせたコンポーネント開発の基盤です。この流れを正しく理解してこそ、動的アプリケーション開発の思考を広げることができます。

深く広く、そして詳細に扱うために、3つの講義に分けて扱います。

  • 最初の講義「DOM基本」では、DOM基本とWindowオブジェクトを扱います。
  • 本講義は2番目の講義で「DOMインタラクション」です。
  • 3番目の講義は「DOM: CSSOM」で、CSS中心のDOM処理を扱います。

特定のフレームワーク/ライブラリに依存しない根本技術の習得

フレームワークやライブラリを使っているものの、根本技術に飢えてはいませんでしたか?皆さんがバニラコーディングで動的ウェブプログラムを完全に開発できるなら、ライブラリ/フレームワークを知らなくても学習にそれほど時間はかかりません。講義で学ぶ内容もこのようなライブラリ/フレームワークの基盤となります。

DOMをより簡単に、完全に学ぶことができます。動的なWebアプリケーションを開発したい開発者、イベントのすべてを知りたい開発者の方ですか?この講義で根本から変わる体験をしてみてください。

前回のDOM講義(推奨前提コース)


DOMを完全に学ぶ
最も深く正確な道。

DOMスペックの95%以上を扱います。DOMの終止符を打つことができます。
広く(Wide)、深く(Deep)、詳細(Detail)です。時間、コスト、労力を無駄にしません。

講義を開発するたびに、いつも要求事項に対する実装方法を悩むことになります。実装方法を決定するには、まずサポートしているもの(メソッド、プロパティなど)を知る必要があります。

以前の「JavaScript完全攻略」シリーズもそうですが、今回の講義もDOMインタラクション仕様の95%以上を扱います。前回の「DOM完全攻略:基礎編」講義も同様です。このように内容を完全に扱うには、実力と経験のある講師が時間をかけて講義を作らなければなりません。しかし、これは講師の事情であり、学習者は全体を見ることができなければなりません。

「DOM完全マスター」講義の第2編を作るのに1年以上かかりました。70%程度しか扱わなかったなら、もっと短い時間で講義を作ることができたでしょう。しかし、そうなると講師の立場からは楽になるだけで、学習者は残りの30%を埋めるための努力に多くの時間を費やさなければなりません。問題は、この30%に該当するものが何なのか分からないという事実です。

学習者の皆さんがDOMの全体を見て、動的アプリケーションの思考を広げることができるよう、95%という原則を守り抜き、長い時間をかけて準備した講義だと自信を持っています。

チェックリスト
提供します。

インターフェースのプロパティとメソッドを漏らさないために、下の画像のようにインターフェースのプロパティとメソッドをチェックリスト形式で作成しました。

このリストはPDFファイルで提供いたします。セクション[HTMLElementインターフェース]の最初の授業で資料をダウンロードしてご確認いただけます。

プロパティ、メソッド講義順序マッチリスト

講義全体が
完全に一つの
シナリオです。

シリーズ全体が一つのシナリオです。機能を暗記するのではなく、全体の感覚を掴む形です。順序通りに一つずつ付いてきていただければ、自然に全体を学ぶことができます。内容が重複しないため、それに伴う努力、時間、費用を無駄にしません。講義に付いてきていただければ、自然に森、木、枝、花を幅広く見ながら、基本の深さをしっかりと固めることができます。

開設された4つのJavaScript講義と共に、Web開発の基盤となる基礎技術を完全にマスターすることができます。イベント、プロパティ、メソッドの一つ一つを深く幅広く扱いますが、さらにこれらが実行される前後のコードをシナリオとして作成して扱います。

40年以上
経験から生まれます。

40年以上ソフトウェアを開発してきた経験、時間が経ってこそ初めて感じることができる感覚的なもの、動物的感覚となったものを講義に込めました。

本当の実力
身につけることができます。

DOM講義は、HTML、CSS、DOM、JavaScriptが連携した形です。そのため、イベント、プロパティ、メソッドを一つ説明するには10〜30行のコードを書く必要があります。しかし、ライブでコーディングすると時間がかかり、学習者は待たなければなりません。

このような問題を防ぐため、事前にコーディングされたコードを提示し説明します。その後は皆さんが直接コーディングを完了してこそ全体を見ることができ、流れを把握することができます。ウェブプログラムを開発する際、講義コードを開発環境に合わせて適用できるよう実力が向上します。講義では前後の基本コードを提供するため、これを活用して部分的なコードを完成させることができるでしょう。

💾 実習環境および学習資料

  • 最新ブラウザで講義のコードをそのまま実行できます。講義はWindows環境、Google Chrome ブラウザ100バージョンで制作されました。
  • 講義資料としてインターフェース、プロパティ、メソッドリストのPDFファイルを提供します。セクション2の最初の授業でダウンロードできます。

Q&A 💬

Q. "DOM完全マスター:基本"という講座があるようですが、その講座を先に受講する必要がありますか?

聞かなくても受講することはできますが、この講義ではDOMの基本概念を扱わないため、聞くことをお勧めします。講義を完全に理解できなかったり、内容が繋がらなかったりする可能性があります。仕様書に記載された用語を使用するため、一般的に知られている用語と異なるものもある可能性があります。

Q. 講義を受講する前に知っておくべき内容はありますか?

HTML、JavaScript の基本はご存知である必要があります。CSS は扱わないので、知らなくても大丈夫です。

Q. DOMを初めて触るビギナーですが、受講は可能でしょうか?

DOMで使用される用語、概念があります。これを「DOM完全マスター:基本」で扱っていますので、その講義を先に受講してください。

Q. DOMを学べば、フレームワーク/ライブラリを使わずにWebプログラムを開発できますか?

HTML、CSS、JavaScriptを知っていれば開発できます。


一緒に受講すると良い
関連講義を確認してみてください。

キム・ヨンボJavaScriptシリーズ

JavaScriptロードマップはこちら (40%割引)

キム・ヨンボDOMシリーズ

DOMロードマップへ (40% 割引)

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 動的 Web アプリケーションを学習したい開発者

  • イベントのすべてを学びたい開発者

  • ユーザー中心の UI/UX を実現したい開発者

前提知識、
必要でしょうか?

  • JavaScript 開発者

  • DOM の基本

こんにちは
です。

9,664

受講生

396

受講レビュー

337

回答

4.8

講座評価

12

講座

소프트웨어 개발을 좋아하는 개발자입니다.

메일: tonextday@gmail.com

동영상: 12개
Rust 강좌 제작중

클린업 자바스크립트: 점프업
클린업 자바스크립트: 베이스 빌드업
자바스크립트 비기너, 자바스크립트 중고급
모던 자바스크립트(ES6+) 기본, 모던 자바스크립트(ES6+) 심화
DOM 기본, DOM 인터랙션
React 비기너, React 완전 끝내기
요구분석 구현 방법
자바스크립트 머신러닝 TensorFlow.js

저서: 9권
몰입! 자바스크립트
ECMAScript 6
HTML5
DOM 스크립팅
자바스크립트 정규표현식
요구분석을 위한 Event Process 모델링
머신러닝 TensorFlow.js,
Ajax 활용, prototype.js 완전분석  
9권 중에서 8권은 국내 최초 저자입니다.
특히, "머신러닝 TensorFlow.js JavaScript"는 출판하는 시점에 amazon.com에 관련된 책이 없었습니다.

 

 

カリキュラム

全体

131件 ∙ (21時間 3分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

1件

5.0

1件の受講レビュー

  • mandala52469358님의 프로필 이미지
    mandala52469358

    受講レビュー 9

    平均評価 5.0

    5

    31% 受講後に作成

    DOMを詳しく知れて良いです。

    ¥9,215

    tonextdayの他の講座

    知識共有者の他の講座を見てみましょう!

    似ている講座

    同じ分野の他の講座を見てみましょう!