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