Effective PyCharm Transcripts
Chapter: Client-side web apps
Lecture: JavaScript features and editor
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Next up let's do some basic Javascript. So over here we can create a Javascript file just call this 'site.js' and we'd like to create a function.
0:11
We saw that PyCharm has awesome editor features for Python code. Well, basically the same thing for Javascript.
0:19
So we come over and create a function or if you wanna even go shorter and go down here and hit that.
0:24
Give us a chance to name it will say run at startup and I have some parameters. Will be message. Perfect.
0:34
So we'll just in this one will just get some sort of console notice, console dialog, all sorts of awesome auto complete running at startup.
0:45
And we'll just put the message there. All looking good. Let's just go and run this Now. We'll say run at startup. This is the startup message.
0:57
And let's also create a variable here. Let's create something like let's say a person's name or something like that.
1:06
That person is going to be sarah and then we're going to print out the person's name plus some kind of message that goes over like this.
1:15
So we should be able to see it. Notice there's some warnings were going to come back to that. I would like to run this javascript over on this page.
1:24
So there we go. And let's even run that at the bottom. I typically like my javascript at the bottom.
1:31
All right. So this should have actually already rerun it. Let's go look at the console here and see what's going on.
1:39
We've got Sarah running at startup. This is the message of the startup. Super, cool. What if we wanted to know more about that?
1:47
Let's put a breakpoint. What is the value of person? It's Sarah. What is the message?
1:55
This is the startup message. This is actually a really big deal of folks.
1:59
I don't know how often you've tried to debug inside of the dev tools of chrome It's not a huge treat to be honest.
2:06
I don't find it to be very productive or helpful. This on the other hand, this is incredible, right? You've got all the details of,
2:14
you know, you would want for a regular debugger but inside there. So debugging, Javascript delightful. Alright, let's put that away for a minute.
2:24
We also have this error going on here, so we want to fix this. What is going on. The other thing we can notice over here one of these
2:32
This is the one we have if we go to hear type person, look there's a person object, this is global.
2:38
There's a global thing called Sarah person of the value Sarah, that's because we forgot to use var. Well, luckily PyCharm has our back,
2:47
it says you really should be using something like var. But it was proposing to make it let all right. So let and const are new,
2:55
Javascript, variable declaration rather than just var, for example, const is constant in this case a const would have been fine.
3:04
All right, because the value is never changing. Let me put it back too far really quick. There might be some code that you have.
3:10
That's ECMA script 5 where this is all there is and it works good. You don't want PyCharm to tell you,
3:16
I want you to switch to the newer version of javascript when you need the old
3:19
one. So we can actually come over here to language and framework java script and it will let you pick if you go back here to the previous version.
3:33
Go away. Yes, it goes away because that was all you could do in that version of javascript. So you can decide which version of javascript that you want
3:41
I'm going to go with the latest and in that case it will propose to automatically let us convert to let or const you can see a lot of the stuff
3:49
you're really, really familiar with from the editor in Python. Well, it's the same thing here.
3:55
Let me do a quick commit on these things and notice we get all the same source control features, everything. Finally,
4:07
let's actually rename this run at startup. Does a web page startup? I don't know. Not really. Maybe it loads.
4:13
So rename this to run at page load and it says you're going to make a change. Yes, we want to do that.
4:22
So even if this run at startup was used across multiple javascript files that refactor
4:28
rename would have successfully renamed it in a safe way across all those things. Super, Super, Javascript editing environment.
4:37
Why? Because this is basically WebStorm, and we're looking at it from this perspective.