1
00:00:00,570 --> 00:00:05,320
So this is going to be a pretty quick video about the chrome javascript developer Cantal.

2
00:00:05,370 --> 00:00:10,560
So before we actually dive into writing javascript code in the syntax we're going to start by figuring

3
00:00:10,560 --> 00:00:12,370
out where we write the code.

4
00:00:12,600 --> 00:00:17,910
And so in chrome one of the places we can do that is a javascript developer con..

5
00:00:18,360 --> 00:00:24,420
So as we mentioned a few times Chrome has great developer tools some of which we've already seen like

6
00:00:24,420 --> 00:00:26,340
the H Tim L and C Ss.

7
00:00:26,340 --> 00:00:30,200
Inspector you can click the magnifying glass.

8
00:00:30,200 --> 00:00:31,160
Click an element.

9
00:00:31,680 --> 00:00:38,420
View the HGA now we can edit things needed him team and we can edit and view the success.

10
00:00:38,430 --> 00:00:39,980
So we've seen that before.

11
00:00:40,170 --> 00:00:50,820
To get here we can right click and inspect element or we can also go to View developer developer tools

12
00:00:50,830 --> 00:00:50,920
.

13
00:00:51,090 --> 00:00:54,420
And there's a shortcut here that you see command option.

14
00:00:55,410 --> 00:01:01,460
So that's to get to the elements tab but you'll notice there's another tab over here which says con.

15
00:01:01,470 --> 00:01:01,650
.

16
00:01:01,830 --> 00:01:05,070
So this is the javascript developer con..

17
00:01:05,190 --> 00:01:11,490
So in a nutshell this is a place where we can go and write javascript in our browser so developers don't

18
00:01:11,490 --> 00:01:18,470
write full javascript applications in this console here just like developers don't write an entire style

19
00:01:18,470 --> 00:01:21,770
sheet in the browser using this VSS inspector.

20
00:01:21,870 --> 00:01:28,470
What you use it for is interacting with C assess or understanding how something works or testing something

21
00:01:28,470 --> 00:01:31,860
out and then you go make the changes in your CSSA file.

22
00:01:32,160 --> 00:01:34,980
So down the line we'll do the same thing with a javascript.

23
00:01:35,040 --> 00:01:39,990
We'll use the console to play around with games to test things out but then we'll actually implement

24
00:01:40,530 --> 00:01:45,960
a full javascript file that persists and that we save to our to our machine rather than just in the

25
00:01:45,960 --> 00:01:47,070
browser.

26
00:01:47,070 --> 00:01:51,930
So we are going to start out by writing our javascript inside of the chrome console and that won't last

27
00:01:51,930 --> 00:01:52,710
very long.

28
00:01:52,770 --> 00:01:57,870
It's just going to be a quick easy way for us to get up and going without having to focus on setting

29
00:01:57,870 --> 00:02:01,300
up a project setting up our files and linking them together correctly.

30
00:02:01,320 --> 00:02:04,350
We'll just open up her browser and type in javascript here.

31
00:02:04,650 --> 00:02:09,330
So to illustrate how the javascript console works I have some pre-written code that I'm going to paste

32
00:02:09,330 --> 00:02:12,280
in and execute before I do that though.

33
00:02:12,390 --> 00:02:16,990
I just want to point out that the focus here is not on the syntax so don't panic.

34
00:02:17,070 --> 00:02:21,330
We're going to spend lots of time going over how this code works in future videos.

35
00:02:21,570 --> 00:02:22,530
What is the focus here.

36
00:02:22,530 --> 00:02:23,820
Is the process.

37
00:02:23,820 --> 00:02:26,570
So all I want you to understand I can put some code here.

38
00:02:26,910 --> 00:02:32,130
It doesn't matter what the code actually does it just put some code there and then I can hit enter and

39
00:02:32,130 --> 00:02:33,330
it will be executed.

40
00:02:33,540 --> 00:02:36,320
So this code happens to do a simple animation.

41
00:02:36,340 --> 00:02:40,850
It adds five pixels to the width of the image every 100 milliseconds.

42
00:02:41,190 --> 00:02:42,760
So hasn't done anything yet.

43
00:02:42,800 --> 00:02:45,680
As soon as I hit enter though it starts running.

44
00:02:46,230 --> 00:02:48,550
Likewise I can type other code.

45
00:02:48,660 --> 00:02:54,130
So here's a very simple program just going to pop up a little message for me.

46
00:02:54,540 --> 00:02:57,190
Hello everyone.

47
00:02:57,770 --> 00:03:02,930
And I hit enter and that pop up is executed and that code runs.

48
00:03:03,480 --> 00:03:06,250
So that's all I want to show about the javascript console.

49
00:03:06,270 --> 00:03:15,840
You can pop it up on any page using command option J or by going to view developer javascript console

50
00:03:16,230 --> 00:03:20,960
or by opening up the elements inspector and clicking on cons..

51
00:03:20,970 --> 00:03:22,500
So we're going to spend a lot of time here.