Learn DOM Manipulation with Easy Modern JavaScript

Focused View

Juan Lizarazo

7:19:49

98 View

01.01-what is the dom.mp4

02:28

01.02-your first dom update.mp4

05:16

01.03-course project code dom adventure.mp4

03:44

02.01-html and the dom.mp4

04:53

02.02-dom standards.mp4

05:08

02.03-the bom.mp4

03:36

02.04-the cssom.mp4

02:43

02.05-the tree (data structure).mp4

04:38

02.06-the dom tree.mp4

10:46

02.07-the dom and javascript.mp4

01:13

03.01-app architecture.mp4

08:19

03.02-challenge solution the exit screen.mp4

03:50

03.03-app skeleton.mp4

05:05

03.04-the splash screen file.mp4

02:51

03.05-including the assets.mp4

02:53

04.01-wiring the splash screen element.mp4

02:20

04.02-creating elements at runtime.mp4

03:20

04.03-appending html strings width append().mp4

02:27

04.04-appending nodes with append or appendchild.mp4

03:21

04.05-script order matters.mp4

04:11

05.01-specifying classes to elements.mp4

03:57

05.02-working with static styles.mp4

03:30

05.03-defining styles at runtime.mp4

04:17

05.04-querying the dom to find elements.mp4

05:05

06.01-the pixel pipeline.mp4

02:27

06.02-identifying bad practices.mp4

03:35

06.03-profiling runtime performance.mp4

03:38

06.04-batching dom updates with document fragments.mp4

05:09

06.05-too many nodes.mp4

03:37

07.01-removing nodes from the dom.mp4

06:11

07.02-the animation frames.mp4

05:37

07.03-our animate method.mp4

04:28

07.04-our working animation.mp4

05:30

07.05-stopping the animation.mp4

07:38

08.01-lets build the level.mp4

01:35

08.02-2. our state model to control the dom from state..mp4

09:48

08.03-normalizing attributes.mp4

04:01

08.04-our level class.mp4

04:25

08.05-arrays references and non-iterable empty slots.mp4

04:44

08.06-building our state with an ugly oneliner.mp4

05:04

08.07-write code for humans and normalize your code.mp4

04:30

08.08-rendering the level element.mp4

04:55

08.09-hmm things are getting messy.mp4

06:07

09.01-easy bundling.mp4

05:32

09.02-bundle with the start script.mp4

01:27

09.03-our dev server.mp4

02:26

09.04-lets use domcontentloaded and es modules (esm).mp4

06:30

09.05-dynamic style elements with css as esm imports.mp4

04:16

10.01-designing the shape of our state.mp4

02:03

10.02-initializing our state in preparation to render dom elements.mp4

05:09

10.03-dom updates from state.mp4

07:47

10.04-updates to state are reflected in the dom.mp4

02:57

10.05-modeling and rendering our chip walls.mp4

05:46

11.01-the player-tech approach.mp4

01:57

11.02-rendering the player with the dom.mp4

07:14

11.03-box model and global styles.mp4

06:07

11.04-manipulating inline styles with the dom.mp4

03:32

11.05-moving the player by changing its state.mp4

06:26

11.06-dom keyboard event listeners.mp4

06:44

11.07-mapping and filtering dom events data.mp4

03:48

11.08-can the player move-tech approach.mp4

02:33

11.09-preventing overlapping dom elements.mp4

11:51

11.10-prepare interactive frames.mp4

07:57

11.11-resetting classname and adding interactive frames on dom events.mp4

06:17

11.12-update frames without moving the element on dom events.mp4

03:20

12.01-adding random dom elements.mp4

06:01

12.02-dom events when pressing the space key.mp4

04:50

12.03-creating elements on dom events.mp4

05:00

12.04-z-index manifest.mp4

04:23

12.05-dynamic element ids with the dom.mp4

06:30

12.06-interacting with other elements using the state model.mp4

06:10

12.07-remove surrounding walls.mp4

03:43

13.01-adding the portal to the screen.mp4

06:58

13.02-random elements on the screen.mp4

04:53

13.03-grouping inline css dom updates.mp4

02:46

13.04-exiting the game when two elements cross paths.mp4

04:10

13.05-challenge your turn to build the exit screen.mp4

03:22

13.06-challenge solution my turn to build the exit screen.mp4

04:23

13.07-hiding the portal behind a wall.mp4

04:59

13.08-removing dom event listeners.mp4

04:23

14.01-rendering the splash screen.mp4

03:52

14.02-swapping screens.mp4

02:24

14.03-animating the portal.mp4

04:02

14.04-css kit-animations.mp4

03:25

14.05-request animation frame and delaying animations.mp4

09:12

14.06-animating with a parent css class.mp4

02:58

14.07-old tv effect.mp4

01:50

14.08-animating with delayed animation.mp4

10:48

14.09-optimizing frames.mp4

02:49

14.10-final frame optimizations.mp4

03:52

15.01-dynamic audio elements.mp4

07:01

15.02-interactive sound effects with dom events.mp4

03:47

15.03-delayed audio effects with callbacks and dom events.mp4

03:38

15.04-final lecture final sound effect exiting the game.mp4

03:11

9781801810180 Code.zip

Description

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. This is what we are going to use when we work with JavaScript and interact in any way dynamically with the document.

When one uses Angular, Vue, React, or any other library or framework to create modern web applications, the DOM is what these use under the hood.

This course will make you stand out as a JavaScript developer. You will get a clear understanding of the DOM fundamentals. The course will help you understand what the DOM is and how to interact dynamically with an HTML document. We will build user interfaces using modern and easy JavaScript with classes, private attributes, and DOM APIs.

Learn optimization techniques and apply easy bundling techniques that include dynamic CSS loading. We will search for documentation; memorizing all the DOM interfaces is not required. While building the game application, you will understand how to interact with the DOM and user input through event listeners.

More details

User Reviews

Rating

average 0

Total votes0

Focused display

JavaScript

Juan Lizarazo

Instructor's Courses

Juan Lizarazo is a software engineer based in Salt Lake City, Utah, with a focused background in web app development, cloud, leadership, team scaling, and distributed applications. He is also a software engineering instructor, who has experience in teaching computer science-related topics such as data structures and algorithms to students all over the US. He has made contributions to open-source, talked at conferences, and answered questions on Stack Overflow.

PacktPub

View courses PacktPub

Packt is a publishing company founded in 2003 headquartered in Birmingham, UK, with offices in Mumbai, India. Packt primarily publishes print and electronic books and videos relating to information technology, including programming, web design, data analysis and hardware.