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