1
00:00:00,810 --> 00:00:05,880
This video I'm going to demonstrate how we can write javascript in a separate file that we can then

2
00:00:05,880 --> 00:00:09,280
include in an him file and get to run in the browser.

3
00:00:09,300 --> 00:00:15,510
So rather than having to type all of our code in our consul here which only exists until we are fresh

4
00:00:15,510 --> 00:00:20,520
the page or close the window we can now get things to persist and save in a file.

5
00:00:21,210 --> 00:00:24,750
So to do this we need to have in each team file.

6
00:00:25,560 --> 00:00:30,610
So I have one here in sublime It's called index that each team I'll call it whatever you want.

7
00:00:31,020 --> 00:00:33,760
And we just need to put our basic him in here.

8
00:00:33,840 --> 00:00:36,930
So I'm going to call this script demo.

9
00:00:37,620 --> 00:00:40,160
And then we don't have to put anything here if we don't want to.

10
00:00:40,170 --> 00:00:50,040
But just to make it clear that it's the same page I'm going to put Julius do including J S files and

11
00:00:50,040 --> 00:00:51,300
save.

12
00:00:52,050 --> 00:00:56,130
So I'm going to go ahead and open this up in the browser just so we have it.

13
00:00:56,190 --> 00:00:59,100
So it looks like this including Geass files.

14
00:00:59,130 --> 00:01:03,900
And just like any other site I can open up the console if I wanted to and I could start typing some

15
00:01:03,900 --> 00:01:09,960
javascript here but the whole point was that we'd be typing a javascript in a separate file.

16
00:01:10,350 --> 00:01:13,560
So to do that I first need to make a separate file.

17
00:01:13,830 --> 00:01:18,900
So I'm going to make a new file and save it and I'm just going to call it script Dot.

18
00:01:18,940 --> 00:01:19,480
Yes.

19
00:01:19,500 --> 00:01:22,010
And the important part is the J.S. at the end.

20
00:01:22,380 --> 00:01:27,570
So that tells the browser tell sublime It tells everything this is a javascript file and I'm going to

21
00:01:27,570 --> 00:01:34,650
save it in the same directory and then I'm going to put a single line to javascript here to start.

22
00:01:34,980 --> 00:01:43,010
Alert Hello from the js file so we can just see if it's working.

23
00:01:43,080 --> 00:01:45,360
If we get this alert.

24
00:01:45,570 --> 00:01:50,370
So right now if we just refresh the page it's not connected the file.

25
00:01:50,370 --> 00:01:54,520
Or each time a file knows nothing about the javascript file so it doesn't work.

26
00:01:54,660 --> 00:01:59,190
So we need to connect them in the way that we do that is using a script tag.

27
00:01:59,550 --> 00:02:06,810
So you can either type script and hit tab and that will give it to and sublime or you can type it yourself

28
00:02:06,840 --> 00:02:13,150
and it looks like this script and it's not self-closing So we need to have the closing tag.

29
00:02:14,690 --> 00:02:20,640
And then we need the source attribute and that source attribute needs to be equal to the file that we

30
00:02:20,640 --> 00:02:21,700
want to load.

31
00:02:21,900 --> 00:02:26,070
And I'm actually going to start by putting a file that doesn't exist here just to show you something

32
00:02:26,640 --> 00:02:27,330
wrong.

33
00:02:27,480 --> 00:02:35,130
Yes and if I save this and go back to the browser and I refresh and I open up my console you'll see

34
00:02:35,130 --> 00:02:37,770
it tells me failed to load resource error.

35
00:02:37,770 --> 00:02:41,340
File not found it couldn't find wrong.

36
00:02:41,400 --> 00:02:44,770
Yes so that's all I want to show.

37
00:02:44,850 --> 00:02:49,320
If we put the wrong name there it will actually tell us that it can't find the file but only in the

38
00:02:49,320 --> 00:02:49,900
console.

39
00:02:50,010 --> 00:02:54,630
So it's not going to break the site it's just going to show it to people who know where to look.

40
00:02:54,630 --> 00:02:58,250
Mainly developers so I'm going to put the right file here.

41
00:02:58,290 --> 00:03:01,270
Scripts just Jesus save.

42
00:03:01,680 --> 00:03:05,890
Go back to the browser and refresh and I now get my alert.

43
00:03:06,030 --> 00:03:10,010
So any time this page loads that code is going to run automatically.

44
00:03:10,200 --> 00:03:14,820
So unlike my javascript console when code runs when I hit enter

45
00:03:16,750 --> 00:03:18,470
.

46
00:03:19,080 --> 00:03:23,160
So in this case whenever refresh the page the code runs.

47
00:03:23,250 --> 00:03:28,040
So what I want to do now is go back to the javascript file and just add a few lines instead of just

48
00:03:28,040 --> 00:03:28,790
the alert.

49
00:03:28,890 --> 00:03:34,620
I want to have a few lines that asks the user for his or her name and then it just prints out a message

50
00:03:34,820 --> 00:03:39,810
that says Nice to meet you whatever the user entered.

51
00:03:40,290 --> 00:03:43,690
So to do that we're going to use prompt.

52
00:03:43,810 --> 00:03:46,920
So that's our first line prompt.

53
00:03:46,950 --> 00:03:52,660
What is your name to capitalize that.

54
00:03:53,460 --> 00:03:56,940
And then we're going to store that in a variable so we can use that later.

55
00:03:56,970 --> 00:04:01,030
I'm going to save our user name equals prompt.

56
00:04:01,050 --> 00:04:03,010
What is your name.

57
00:04:03,330 --> 00:04:07,610
And then the next step is to use that username to then greet the user.

58
00:04:07,800 --> 00:04:10,790
So I'm just going to say Nice to meet you.

59
00:04:10,990 --> 00:04:11,810
Username.

60
00:04:11,940 --> 00:04:14,460
So we're going to do an alert and to cancel that log.

61
00:04:14,490 --> 00:04:19,010
So let's start with our alert alert.

62
00:04:19,020 --> 00:04:24,040
Nice to meet you make sure we have the right spacing in there.

63
00:04:24,320 --> 00:04:26,360
Plus user name

64
00:04:29,520 --> 00:04:31,910
and a that log.

65
00:04:32,130 --> 00:04:36,600
Just so we can see it in two places.

66
00:04:36,600 --> 00:04:41,520
Also great to meet you.

67
00:04:41,520 --> 00:04:43,520
Plus username.

68
00:04:43,710 --> 00:04:50,060
So we're concatenating the strings together two different times one to alert them in one to cancel bot

69
00:04:50,070 --> 00:04:50,970
log.

70
00:04:51,540 --> 00:04:55,250
So now let's go back to the browser we refresh.

71
00:04:55,350 --> 00:04:56,670
First thing that happens.

72
00:04:56,730 --> 00:05:01,870
It asks us for a name so we're going to put in my dog's nickname Tator.

73
00:05:02,220 --> 00:05:05,680
OK it tells me nice to meet you Tator.

74
00:05:06,270 --> 00:05:10,170
And if I opened up the console I'll see.

75
00:05:10,230 --> 00:05:11,840
Also great to meet you Tator.

76
00:05:12,510 --> 00:05:19,650
And also you can see it tells me script yes line 3 so later when we have crazy complicated files and

77
00:05:19,650 --> 00:05:25,990
something goes wrong we'll be able to see exactly where and what line number in our file.

78
00:05:26,160 --> 00:05:27,540
So that's all I want to show there.

79
00:05:27,540 --> 00:05:34,260
Those three methods we had prompt to ask the user for some input and it stores it in a variable alert

80
00:05:34,590 --> 00:05:40,320
just to be obnoxious and alert something in the little pop up and cancel about log which just print

81
00:05:40,320 --> 00:05:41,340
something to the console