Mastering PyCharm Transcripts
Chapter: Client-side web apps
Lecture: Basic HTML and JavaScript

Login or purchase this course to watch this video and the rest of the course contents.
0:01 Now let's play around with some of the HTML and Javascript features here.
0:05 Notice in the web clients side I have made a web app
0:08 because we're also going to have a Node JS thing over here
0:11 so let's go and open this, we can say open this in the browser, default,
0:15 and here we just have our default test bed
0:18 and what we need is we just want to see the console
0:20 we're going to go down there and see the output,
0:22 nothing yet but it's coming.
0:24 So let's open this and our Javascript file here
0:27 and we're going to write a function
0:29 so let's suppose that we're going to write a function
0:32 it's called run at load, not taking any parameters or anything
0:35 and right away PyCharm is saying hold on, hold on,
0:38 here's a function it's not being called anywhere in this project.
0:41 So it's really nice that we have this dead code detection
0:44 but let's go ahead and call that, notice auto complete as you would expect there
0:47 and we're going to come over here and let's just
0:51 person = "Jeff" and then I'm not going to do a console.log the person's name, right?
0:58 we could even do something like nice to meet you, like so.
1:05 Now there's something we're doing wrong here, can you catch it?
1:08 Obviously there is something wrong with person but what is it?
1:11 I guess it depends how much Javascript you write,
1:13 but is it that we made person in here global.
1:16 And we need to run this of course,
1:18 I haven't put the link in to pull in the Javascript
1:21 so we can do that quickly like so
1:23 and generally I put my Javascript at the end
1:26 unless it's one of the front end framework type things,
1:29 there we go, nice to meet you Jeff, that's cool,
1:32 but now there's also this person object that's global,
1:36 so what do we forget— we forgot to do var,
1:39 and there's a ton of these things, just like in the Python part
1:43 we saw a bunch of little fixes or code intentions
1:45 over here in PyCharm we also have them, like so.
1:49 So this is really nice that you get these code corrections and whatnot
1:54 if this took parameters something like that,
1:57 it would come over here and we would know that these are not being used,
2:02 so there are all sorts of nice little checks that we have in our Javascript code.
2:11 The other thing to keep on your mind I guess
2:13 let's just add one more Javascript file here
2:16 let's call this home.js and over here we can actually do some other stuff
2:22 let's say define another function, registerAction,
2:27 actionName, something like that
2:32 so go over here and then let's just add a registerAction really quick,
2:35 load or something, remember in this place we had a runAtLoad
2:41 so again we have run at load talks about where it comes from
2:45 and all those types of things,
2:47 it even has help with modules and dependencies and things like that
2:51 when you're working with multiple files
2:53 especially around the Node JS type of things
2:55 so I probably need some more interesting Javascript
2:57 to show you a bunch of the features
2:59 but you have many of the code intentions,
3:01 you have the refactoring all the things that you guys would expect.
3:04 So we come over here and refactor
3:06 actually let's refactor this one, it's more interesting across
3:10 so we can come over here and say runAtLoadButOnce
3:14 go back here, runAtLoadButOnce, it's beautiful.
3:19 Okay, so the Javascript tools are really great
3:23 we already saw a lot of the HTML and CSS stuff on the server side
3:26 but of course, it's the same story here.