1
00:00:00,700 --> 00:00:01,720
Welcome back everybody.

2
00:00:01,720 --> 00:00:02,440
All right.

3
00:00:02,440 --> 00:00:09,130
Let's talk a little bit about H.M.S. SS and Javascript and how it relates to Web sites and how Jair

4
00:00:09,130 --> 00:00:10,510
spin really works.

5
00:00:10,510 --> 00:00:14,950
So the first thing is that the reason why we're using Jaspan is that when we type something in we can

6
00:00:14,950 --> 00:00:20,110
see it in real time in this output here and we can run any javascript with this little button here and

7
00:00:20,140 --> 00:00:22,630
we'll get to that very shortly don't worry.

8
00:00:22,870 --> 00:00:28,750
So what I like to tell beginners is to tell that HTL displays everything on the Web site for example

9
00:00:28,750 --> 00:00:32,080
of splays images it displays.

10
00:00:32,300 --> 00:00:33,900
Displays links.

11
00:00:34,120 --> 00:00:41,290
It sets up the static parts being the parts that don't change the Internet and what CSSA does that styles

12
00:00:41,500 --> 00:00:42,090
everything.

13
00:00:42,100 --> 00:00:47,620
So if you wanted to change the text or the font or something like that you CSSA what it does is it takes

14
00:00:47,620 --> 00:00:53,320
the pressure away from the html and it puts it off its own file and it makes stylize and your web site

15
00:00:53,320 --> 00:00:54,200
a little bit easier.

16
00:00:54,250 --> 00:00:57,360
Now javascript adds in the function which is actually really important.

17
00:00:57,400 --> 00:01:02,820
And if you're in HBL 5 stuff that's exactly what a lot of Javascript can do for you.

18
00:01:02,820 --> 00:01:03,270
All right.

19
00:01:03,430 --> 00:01:09,400
So let's take a look at Ishmail first and I'm just going to give you a very small crash course in this.

20
00:01:09,400 --> 00:01:15,130
The reason is just because it explains javascript a little better so we can do is you can type in two

21
00:01:15,640 --> 00:01:18,570
paragraph tags which is the greater than a less than sign.

22
00:01:18,760 --> 00:01:23,150
And then you can type in some text like this is awesome like that.

23
00:01:23,590 --> 00:01:28,600
And then you can type slash P with the too greater than and less than signs around it and you see in

24
00:01:28,600 --> 00:01:30,310
the output here that says this is awesome.

25
00:01:30,310 --> 00:01:38,320
Now if you added another word here for example really awesome like that you can see that you can see

26
00:01:38,320 --> 00:01:39,420
that it is.

27
00:01:39,550 --> 00:01:45,580
It changes automatically so you'll also notice that there is a space here and that's because it really

28
00:01:45,580 --> 00:01:46,140
looks like this.

29
00:01:46,150 --> 00:01:47,550
But the window makes it shorter.

30
00:01:47,560 --> 00:01:48,280
All right.

31
00:01:48,280 --> 00:01:49,910
So it's really awesome.

32
00:01:50,290 --> 00:01:51,210
Get rid of that.

33
00:01:51,250 --> 00:01:57,460
Now at CSSA does here is if you type in P and you type in a curly bracket and push enter you'll see

34
00:01:57,460 --> 00:01:59,930
that two curly brackets come up.

35
00:02:00,220 --> 00:02:06,040
And the reason why this is that anything within this code relates to P-TECH so we can change the font

36
00:02:06,040 --> 00:02:11,260
we can change the color etc. and how we do that if we just change color and then let's change to red

37
00:02:11,710 --> 00:02:13,520
and he put a semi-colon at the end of that.

38
00:02:13,530 --> 00:02:17,900
Now it's really important that you learn the two topics here.

39
00:02:18,160 --> 00:02:23,740
You can see that he is a block of code and we can add in a whole bunch of other things we can change

40
00:02:23,740 --> 00:02:24,890
the font etc..

41
00:02:25,000 --> 00:02:29,200
But you'll also notice there's a semi-colon at the end of this line and you'll also notice that there

42
00:02:29,200 --> 00:02:33,670
are two curly brackets this is super important especially in javascript and a lot of other programming

43
00:02:33,670 --> 00:02:34,320
languages.

44
00:02:34,420 --> 00:02:37,710
The curly brackets make sure that this is a block of code.

45
00:02:37,750 --> 00:02:43,300
So if I taken something out here you see it won't work and sometimes what it will do is it will pop

46
00:02:43,300 --> 00:02:44,020
up an error.

47
00:02:44,050 --> 00:02:48,970
Now CSSA web development is a lot less error prone meaning that you can get away with a lot more and

48
00:02:48,980 --> 00:02:50,150
that's actually really cool.

49
00:02:50,440 --> 00:02:56,290
Now the consul here is if you were to put in something with javascript here but what are going to do

50
00:02:56,330 --> 00:02:57,900
is Amasias get rid of the cons..

51
00:02:57,910 --> 00:03:01,660
And I just want to show you a little bit of Javascript.

52
00:03:01,720 --> 00:03:04,190
And you can go you can type this and we can go.

53
00:03:04,210 --> 00:03:10,570
Alert colon and brackets quotes.

54
00:03:10,780 --> 00:03:17,530
And you can type in whatever you want this case I'll just type in pop and bracket again and semi-colon.

55
00:03:17,530 --> 00:03:17,840
All right.

56
00:03:17,840 --> 00:03:22,690
Now you'll see that when I do this you'll see that there's a warning down here.

57
00:03:22,690 --> 00:03:27,370
And the reason why there is a warning down there is because this isn't complete.

58
00:03:27,490 --> 00:03:32,860
Now for the most part every line needs a sinkhole and after that now there are certain lines that don't

59
00:03:32,860 --> 00:03:33,900
need a semi-colon.

60
00:03:33,910 --> 00:03:38,440
But for any line that you're telling the computer to do something you need a semicolon.

61
00:03:38,440 --> 00:03:40,690
So we're going to go ahead and put a semicolon there.

62
00:03:40,780 --> 00:03:45,360
And when you're first starting out the semi-colon is the number one thing that beginners forget.

63
00:03:45,350 --> 00:03:49,930
So put in that semi-colon there and there are times we don't put in any court and I will make those

64
00:03:49,930 --> 00:03:51,220
apparently obvious to you.

65
00:03:51,220 --> 00:03:51,700
All right.

66
00:03:51,820 --> 00:03:56,200
The last thing we need to do is you just need to run Yes and you'll see that this thing comes up and

67
00:03:56,200 --> 00:03:59,170
it says pop and that's exactly what we asked them to do.

68
00:03:59,170 --> 00:04:04,700
So programming is telling the computer to do a whole bunch of things.

69
00:04:04,750 --> 00:04:10,900
So we're telling the computer to literally just put up a window that says Pop we can type in something

70
00:04:10,900 --> 00:04:12,730
else like awesome like this.

71
00:04:12,730 --> 00:04:13,960
And it just says Awesome.

72
00:04:13,960 --> 00:04:14,950
That's pretty cool.

73
00:04:15,130 --> 00:04:20,080
Now what we're doing here is again we just tell the computer to do things.

74
00:04:20,110 --> 00:04:24,590
Now there are some times where you add in two backslashes like this.

75
00:04:24,620 --> 00:04:28,110
And what this is is that this is what is called a comment.

76
00:04:28,110 --> 00:04:33,490
A comment is something that you can just write in here and it can remind you what to do.

77
00:04:33,490 --> 00:04:41,640
So what we've done told the computer to do is to alert the user with a pop up.

78
00:04:41,800 --> 00:04:42,970
That's all we've done.

79
00:04:43,180 --> 00:04:48,880
And so if I were to write this in pseudo code or code that doesn't necessarily work that's what we that's

80
00:04:48,910 --> 00:04:50,200
what we've done here.

81
00:04:50,200 --> 00:04:54,550
Now if you can think of the code if you can think of something to do like I need the computer to do

82
00:04:54,550 --> 00:04:57,360
this you can find the corresponding code.

83
00:04:57,370 --> 00:05:01,950
That's really all you need to work with in with coding here.

84
00:05:01,970 --> 00:05:09,410
Now the other thing we can do is again before CSSA wasn't vetting before you know javascript was really

85
00:05:09,410 --> 00:05:12,940
a thing you could actually add this all within the HTML document.

86
00:05:12,950 --> 00:05:18,680
So the final document is really kind of the the main area of which everything happens.

87
00:05:18,680 --> 00:05:19,900
These are just separate files.

88
00:05:19,910 --> 00:05:26,610
And if we were to do this off of J.S. bin we'd have an HTML document and we would call the CSSA and

89
00:05:26,630 --> 00:05:32,870
Javascript to be like several different text files and all we would do is we would call it in here.

90
00:05:32,870 --> 00:05:40,090
But the way we do that is we type in script K and push enter a couple times and then the greater than

91
00:05:40,110 --> 00:05:48,490
less than sign because that's just how you make takes in in each T.M. and we're going to do slash script.

92
00:05:48,500 --> 00:05:53,230
And what I'm going to do is I'm going to push control X or command X if you're on a Mac and we're going

93
00:05:53,230 --> 00:05:54,230
to put that script in there.

94
00:05:54,230 --> 00:05:58,600
Now what this does is that this essentially runs the javascript.

95
00:05:58,610 --> 00:06:03,320
We've made a little section within the HTML to run javascript.

96
00:06:03,470 --> 00:06:05,690
Normally it's in a different file but you can run it.

97
00:06:05,690 --> 00:06:08,360
So if we run this here it says Awesome.

98
00:06:08,360 --> 00:06:12,950
And if we change this we can change anything they want we can change it back to Pop we can change it

99
00:06:12,950 --> 00:06:16,000
to your name you can change it to whatever you really want to.

100
00:06:16,160 --> 00:06:17,680
And we're going to go run with javascript.

101
00:06:17,690 --> 00:06:18,100
OK.

102
00:06:18,290 --> 00:06:25,980
And if I take this alert pop cut and paste it right in here and get rid of the script tags you'll see

103
00:06:25,990 --> 00:06:27,580
it's exactly the same thing.

104
00:06:27,590 --> 00:06:28,440
So it is going to go run.

105
00:06:28,520 --> 00:06:29,870
Yes it's pretty simple.

106
00:06:29,870 --> 00:06:30,150
All right.

107
00:06:30,170 --> 00:06:33,800
So we have the alert pop there so you can run it within the HTML document.

108
00:06:33,950 --> 00:06:35,440
You can even run CSX.

109
00:06:35,450 --> 00:06:40,250
You can put the style points within the tags here and you can or you can run the javascript with the

110
00:06:40,250 --> 00:06:42,980
needed HTML but generally we do it in different areas here.

111
00:06:42,980 --> 00:06:43,470
All right.

112
00:06:43,520 --> 00:06:45,410
See you guys in next tutorial.