강의

멘토링

로드맵

Programming

/

Front-end

DOM Interaction

DOM is the foundation and essential part of dynamic applications. We cover everything from the basics to the advanced use of all events that occur in Element, Document, and Window objects. You can fully learn and use Web Components (Custom Element, Shadow DOM, Template). You can put an end to DOM with the newly opened course, "Complete DOM: Basics."

(5.0) 1 reviews

287 learners

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

What you will learn!

  • All events for Element, Document, Window

  • Web Components: Custom Element, Shadow DOM, <template>

  • Clip Board, Drag & Drop, Mutation Observer

DOM + Web Component
You need to change the fundamentals to see the flow.

Coupon discount: 49,000 won
Coupon code: https://inf.run/PwQ9w

Dynamic applications with DOM's finishing touch.

To implement user-centered dynamic applications, you need to recognize user behavior. This can be achieved through all DOM events that occur or are triggered in Element, Document, and Window objects.

Why You Need to Master Web Components Completely?

Web Components are the foundation of component development that combines HTML, CSS, DOM, and JavaScript. You need to properly understand this flow to broaden your thinking in dynamic application development.

To cover the topic deeply, broadly, and in detail, it is divided into 3 separate lectures.

  • The first lecture "DOM Basics" covers DOM fundamentals and the Window object.
  • This lecture is the second lecture on "DOM Interaction".
  • The third lecture is "DOM: CSSOM" which covers CSS-focused DOM processing.

Mastering fundamental technologies without depending on specific frameworks/libraries

You've been using frameworks and libraries, but haven't you been thirsting for the fundamental technologies? If you can fully develop dynamic web programs with vanilla coding, it won't take much time to learn libraries/frameworks even if you don't know them. The content you learn in the course also serves as the foundation for these libraries/frameworks.

You can learn DOM more easily and completely. Are you a developer who wants to develop dynamic web applications, or a developer who wants to know everything about events? I hope you experience a fundamentally transformative change with this course.

Previous DOM Course (Recommended Prerequisite)


Learning the DOM completely
The deepest and most accurate path.

Covers over 95% of the DOM specification. You can put a period on DOM.
Wide, Deep, and Detailed. No waste of time, cost, or effort.

Every time I develop a course, I always find myself contemplating implementation methods for the requirements. To decide on implementation methods, I first need to know what's supported (methods, properties, etc.).

Like the previous "Complete JavaScript Mastery" series, this course also covers over 95% of the DOM interaction specifications. The same goes for the previous "Complete DOM Mastery: Fundamentals" course. To cover content this comprehensively, an experienced and skilled instructor must invest a lot of time in creating the course. However, this is the instructor's concern, and learners should be able to see the complete picture.

It took over a year to create the second part of the "Complete DOM Mastery" course. If I had only covered about 70%, I could have made the course in much less time. However, this would only be convenient for the instructor, while learners would have to spend a lot of time trying to fill in the remaining 30%. The problem is that they don't know what that 30% consists of.

I am confident that this is a lecture I have prepared for a long time, adhering to the 95% principle so that learners can see the full picture of the DOM and broaden their thinking about dynamic applications.

Checklist is
provided.

To avoid missing any properties and methods of the interface, I created a checklist of the interface's properties and methods as shown in the image below.

This list is provided as a PDF file. You can download and check the materials in the first lesson of the [HTMLElement Interface] section.

프로퍼티, 메소드 강의순서 매치 리스트

The entire course is
one complete
scenario.

The entire series is one scenario. Rather than memorizing functions, it's designed to help you grasp the overall picture. By following along step by step in order, you can naturally learn the whole thing. Since the content doesn't overlap, you won't waste effort, time, or money. By following the lectures, you can naturally see the forest, trees, branches, and flowers all together while solidly building a strong foundation in the basics.

With the 4 established JavaScript courses, you can completely master the foundational technologies that form the basis of web development. We cover each event, property, and method deeply and broadly, but we also create scenarios that include the code that runs before and after to provide comprehensive context.

Over 40 years of
experience brings this to you.

I have incorporated into this course the experience of developing software for over 40 years, the intuitive insights that can only be felt with the passage of time, and the instinctive sense that has become second nature.

Real skills can be
developed.

DOM lectures are in a format where HTML, CSS, DOM, and JavaScript are interconnected. Therefore, to explain a single event, property, or method, you need to write 10-30 lines of code. However, when coding live, it takes a long time and learners have to wait.

To prevent such problems, we present and explain pre-coded code in advance. After that, you need to complete the coding yourself to see the whole picture and understand the flow. When developing web programs, your skills improve so that you can apply the lecture code to fit your development environment. The lecture provides basic code for the beginning and end, so you can use this to complete partial code.

💾 Practice Environment and Learning Materials

  • You can run the lecture code as-is in the latest browsers. The lecture was created in a Windows environment using Google Chrome browser version 100.
  • We provide a PDF file with interface, property, and method lists as course materials. You can download it from the first lesson in Section 2.

Q&A 💬

Q. I saw there's a lecture called "DOM Complete Mastery: Basics" - do I need to take that lecture first?

You can take this course without listening to it, but since this lecture doesn't cover basic DOM concepts, it's recommended that you listen. You may not fully understand the lecture or the content may not connect properly. Since we use terminology written in the specification, some terms may differ from commonly known ones.

Q. Is there anything I need to know before taking the course?

You should know the basics of HTML and JavaScript. You don't need to know CSS since we won't be covering it.

Q. I'm a beginner who's encountering DOM for the first time. Would it be possible for me to take this course?

There are terms and concepts used in the DOM. These are covered in "DOM Complete Mastery: Basics," so please take that course first.

Q. If I learn DOM, can I develop web programs without using frameworks/libraries?

You can develop if you know HTML, CSS, and JavaScript.


Check out the
related courses that are great to take together.

Kim Young-bo's JavaScript Series

자바스크립트 로드맵 바로가기 (40% 할인)

Kim Young-bo's DOM Series

DOM 로드맵 바로가기 (40% 할인)

Recommended for
these people

Who is this course right for?

  • Developers who want to learn dynamic web applications

  • Developers who want to learn everything about events

  • Developers who want to implement user-centered UI/UX

Need to know before starting?

  • javascript developer

  • DOM Basics

Hello
This is

9,664

Learners

396

Reviews

337

Answers

4.8

Rating

12

Courses

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

메일: 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에 관련된 책이 없었습니다.

 

 

Curriculum

All

131 lectures ∙ (21hr 3min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

1 reviews

5.0

1 reviews

  • jaeu choi님의 프로필 이미지
    jaeu choi

    Reviews 9

    Average Rating 5.0

    5

    31% enrolled

    DOM을 상세히 알 수 있어 좋아요.

    $59.40

    tonextday's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!