자바스크립트 중고급: 엔진 핵심
김영보
4개 강좌로 구성된 자바스크립트 바이블 강좌의 2번째 강좌입니다. 자바스크립트 엔진 이해를 통해 자바스크립트에 최적화된 프로그램을 개발할 수 있습니다. 자신 있게 시스템을 설계할 수 있습니다.
Basic
JavaScript
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."
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 Components
You have to change the fundamentals to see the flow.
Coupon discount
Discount from 77,000 won to 33,000 won.
Coupon number: https://inf.run/Btxsi
The end of DOM for dynamic applications.
To implement user-centric, dynamic applications, you need to recognize user behavior. This can be accomplished using any DOM event that occurs or is triggered by the Element, Document, and Window objects.
Why should you learn Web Components completely?
Web Components are the foundation of component development, combining HTML, CSS, the DOM, and JavaScript. Understanding this flow will broaden your perspective on dynamic application development.
To cover the topic in depth, breadth, and detail, we will divide it into three lectures.
- The first lecture, "DOM Basics", covers DOM basics and the Window object.
- This lecture is the second lecture, "DOM Interaction".
- The third lecture, "DOM: CSSOM", covers CSS-centric DOM processing.
Understanding fundamental technologies without relying on specific frameworks/libraries
Are you using frameworks and libraries but lacking the fundamental skills? If you can fully develop dynamic web applications with vanilla code, learning them won't take much time, even if you don't know the libraries or frameworks. The content you learn in this course also serves as the foundation for these libraries and frameworks.
You can learn the DOM more easily and thoroughly. Are you a developer looking to develop dynamic web applications or want to understand the ins and outs of events? This course will provide you with a fundamentally transformative experience.
Previous DOM lectures (recommended prerequisite course)
Learning the DOM in its entirety
The deepest and most accurate path.
Covers over 95% of the DOM spec. You can put a period to the DOM.
Wide, deep, and detailed. No time, money, or effort wasted.
Whenever developing a course, I always have to consider how to implement the requirements. To determine how to implement them, I first need to understand what is supported (methods, properties, etc.).
As with the previous "Complete JavaScript" series, this course covers over 95% of the DOM interaction specification. The previous "Complete DOM: Basics" lecture was no exception. Covering this much material so thoroughly would require a skilled and experienced instructor to invest significant time and effort in creating a course. However, this is the instructor's responsibility; learners should be able to access the entire course.
It took over a year to create the second part of the "Complete DOM" course. I could have completed the course in much less time if I had covered only 70% of the material. However, this would only be convenient for the instructor, while students would have to spend a lot of time trying to fill in the remaining 30%. The problem is, I don't know what that 30% is.
I'm confident that this course has been prepared over a long period of time, adhering to the 95% principle, to enable students to see the entire DOM and broaden their thinking about dynamic applications.
Checklist
Provides.
To avoid missing any properties or methods of the interface, I created a checklist of the properties and methods of the interface as shown in the image below.
This list is available as a PDF file. You can download and review the materials from the first lesson in the [HTMLElement Interface] section.
The whole lecture
A complete one
This is a scenario .
The entire series is a single scenario. It's not about memorizing functions, but rather getting a feel for the overall picture. By following each step in order, you'll naturally learn the entire story. Since there's no duplication of content, you won't waste effort, time, or money. By following the lectures, you'll naturally see the forest, the trees, the branches, and the flowers, solidifying your fundamentals.
With these four JavaScript courses, you'll gain a complete understanding of the fundamental technologies that form the foundation of web development. We cover events, properties, and methods in depth and breadth, but we also create scenarios to illustrate the code surrounding these events.
For over 40 years
It comes from experience.
I have poured my experience of developing software for over 40 years into this lecture, sharing the sensory aspects that can only be felt over time, the animalistic senses.
Real skills
You can raise it.
The DOM course combines HTML, CSS, the DOM, and JavaScript. Therefore, explaining a single event, property, or method requires 10 to 30 lines of code. However, live coding takes a long time, and students have to wait.
To avoid these issues, we provide pre-coded code and explain it. Afterwards, you'll need to complete the code yourself to see the entirety and understand the flow. This will help you develop your skills by adapting the course code to your development environment when developing web programs. The course provides basic code for both the beginning and end, allowing you to use it to complete partial code.
💾 Practice environment and learning materials
- You can run the course code as is in any modern browser. The course was created using Windows and Google Chrome version 100.
- We provide a PDF file listing interfaces, properties, and methods as lecture material. You can download it from the first lesson in Section 2.
Q&A 💬
Q. There is a lecture titled " Complete DOM: Basics ". Do I need to take that lecture first?
You can attend the course without listening, but it's recommended, as this lecture doesn't cover basic DOM concepts. You may not fully understand the lecture or find the content disjointed. Because it uses terminology specified in the specification, some terms may differ from commonly known terms.
Q. Is there anything I should know before attending the lecture?
You should know the basics of HTML and JavaScript. CSS isn't covered, so you don't need to know it.
Q. I am a beginner who is new to DOM. Can I still take the course?
There are terms and concepts used in the DOM. These are covered in "DOM Complete: Basics," so please take that lecture first.
Q. If I learn DOM, can I develop web programs without using frameworks/libraries?
If you know HTML, CSS, and JavaScript, you can develop.
It's good to listen together
Check out the related lectures .
Kim Young-bo 's JavaScript series
Kim Young-bo 's DOM series
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
9,630
Learners
392
Reviews
337
Answers
4.8
Rating
12
Courses
소프트웨어 개발을 좋아하는 개발자입니다.
동영상: 12개
Rust 비기너 강좌 제작중, 2025.09 오픈 예정
클린업 자바스크립트: 점프업
클린업 자바스크립트: 베이스 빌드업
자바스크립트 비기너, 자바스크립트 중고급
모던 자바스크립트(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
$59.40
tonextday's other courses
Check out other courses by the instructor!
Similar courses
Explore other courses in the same field!
![[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드Course Thumbnail](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![[코드캠프] 시작은 프리캠프Course Thumbnail](https://cdn.inflearn.com/public/courses/329913/cover/eee923cc-911b-4c2d-a445-9fddee8e5992/thumbnail-precamp.png?f=avif&w=420)
![부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프Course Thumbnail](https://cdn.inflearn.com/public/courses/333092/cover/5a3043a4-fc2d-4b25-9096-306c8f707b5b/333092.jpg?f=avif&w=420)
![제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]Course Thumbnail](https://cdn.inflearn.com/public/files/courses/336946/cover/01jv48md3p02hgkwt4yh1svf3j?f=avif&w=420)
![[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스Course Thumbnail](https://cdn.inflearn.com/public/files/courses/332860/cover/01jnwb77yxra1hp8cm9hed0wnd?f=avif&w=420)
