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.

Talk Python's Mastodon Michael Kennedy's Mastodon