1
00:00:02,310 --> 00:00:04,650
We already worked with the the DOM,

2
00:00:04,650 --> 00:00:07,230
we created elements, inserted them,

3
00:00:07,230 --> 00:00:09,110
we queried for elements,

4
00:00:09,120 --> 00:00:11,010
you learned how to work with elements.

5
00:00:11,010 --> 00:00:14,770
Now in this module we'll take it one step further,

6
00:00:14,940 --> 00:00:18,540
we'll have a more detailed look at what we can do with DOM elements,

7
00:00:18,540 --> 00:00:24,540
we'll work with their coordinates, their sizes, we'll learn how to attach data to them and we'll have

8
00:00:24,540 --> 00:00:31,470
a look at what else the browser offers us when it comes to working with what the user sees and experiences

9
00:00:31,500 --> 00:00:37,830
in the browser window. In detail in this module, we will have a look at how we can attach data to DOM

10
00:00:37,890 --> 00:00:41,000
elements and why we might want to do that.

11
00:00:41,100 --> 00:00:45,030
We will work with element coordinates and sizes

12
00:00:45,030 --> 00:00:50,970
so that you learn how you can use Javascript to find out where an element sits and which size it has

13
00:00:50,970 --> 00:00:53,520
and how you can also modify these values.

14
00:00:53,520 --> 00:00:59,880
We'll also have a look at a concept called templates and I will also show you how you can add scripts

15
00:00:59,880 --> 00:01:07,400
dynamically, so how you can load scripts and create scripts with Javascript, which is pretty meta I guess

16
00:01:07,590 --> 00:01:12,720
and as I mentioned we'll have a look at what else the browser offers to us and there, we'll have a look

17
00:01:12,720 --> 00:01:18,900
at the navigator object, the location object and window.history and you will learn what these things

18
00:01:19,020 --> 00:01:25,050
are, what we can do with them and why they exist. For most things in this module, we'll use this little

19
00:01:25,110 --> 00:01:29,550
application we worked on in the last course module which was optional,

20
00:01:29,610 --> 00:01:35,190
so if you skipped that last module you'll find a finished snapshot attached and you can use that.

21
00:01:35,310 --> 00:01:40,770
I would recommend that you go through the code and get acquainted to it, one thing which I want to highlight

22
00:01:40,770 --> 00:01:46,290
which you learned about earlier but which we haven't used in a real project before is that in this

23
00:01:46,290 --> 00:01:51,690
project I actually pass functions around as callback functions,

24
00:01:51,690 --> 00:01:59,670
for example here to make sure that in this project where we got two boxes with projects, we can move

25
00:01:59,670 --> 00:02:01,800
projects between these two boxes

26
00:02:01,920 --> 00:02:08,520
and for that, we pass functions around into our two project list objects which are two instances based

27
00:02:08,520 --> 00:02:14,400
on the same class to trigger different actions in different instances of these classes.

28
00:02:14,430 --> 00:02:18,690
So just have a thorough look through this code and if you want to learn how we wrote this and why we wrote

29
00:02:18,690 --> 00:02:24,840
it like this, check out this last course section. With that, let's dive right in and let's have a closer

30
00:02:24,840 --> 00:02:27,050
look at what we can do in the DOM

31
00:02:27,060 --> 00:02:29,070
and with all these cool DOM elements.