Effective PyCharm (2021 edition) Transcripts
Chapter: Client-side web apps
Lecture: JavaScript features and editor

Learn more about this course
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.