In this chapter, we are going to learn another way to execute JavaScript. It is a very practical tool, fun to play with, which is Console. So far, to execute JavaScript, we have created web pages or files. But sometimes there are other simple situations where you only want to execute a few lines of code without creating a file. In those situations, you can use this tool. Right-click and select Inspect. And look for a tab named Console. If you click it, you will see this screen where a cursor is blinking. By using Console, you can execute JavaScript code instantly without creating a file. For example, what do you use when you need to do cast accounts? You can use a calculator. Similarly, in real life, sometimes we need to process data. When that happens, personally, I open the Console and execute JavaScript to process various data. For example, let's look at this web page. Let me first copy and paste this text. Let's say in this text, we want to know how many characters there are.

Can you count? Probably not so easy, right? In that case, if we wrap the text with quotation marks like this, the content between the quotation marks are defined as characters. And in JavaScript, to count the number of characters of a string, you can use a command called length. And you need to add a period before it. And that's it. We just wrote the code to get the number of characters. Now, I'm going to wrap it with alert. Do you remember what alert is? Yes, it's for an alert window. Like this. Time to check the result! There we go. It's 765. Count them yourself if you have enough time! XD. So this is another way to execute JavaScript. In any daily situation, where you need to execute minor JS code but you want to avoid the hassle of creating a file, you can also use this tool to execute JS instantly. And from a more practical point of view, The JavaScript code we are executing in Console runs as if it is embedded in the web page.

In other words, the JavaScript we are executing here is targeting the web page we are currently looking at. Based on this, we can even do this: What you are seeing is the page of my group Coding Everybody. Let me share an anecdote. There's a community policy. It's sort of a guideline I've developed to make sure the group is run smoothly. But not many people read it. So I thought hard how to make more people read it and came up with an idea of hosting an event. I offered two books as prizes and requested to leave a comment once they read it. And I would pick 2 people at random and send the books to them. To my surprise, so many people participated as many as 1,697 members! But there was a problem. The number 1,697 gave me a headache - an emotional ambivalence. On one hand, I was so excited. On the other hand, I was so worried. How can I fairly select the winners at random? 1,697 is beyond what you can manage manually.

In other words, if you try to do it manually, you will end up facing a really frustrating situation. And when I'm in this frustrating situation, what if JavaScript comes to rescue you as the savior? I'm going to right-click on the screen and select Inspect. And you will see developer tools. Among them, Look for Elements. The Elements tab shows HTML code in the web page. If you press esc in this screen, along with the HTML code above, you can also see the Console. And if you click Console, the Console will be displayed full-size. When you press esc in Elements, Console appears below. And if you press esc once again, Console will disappear again. And at this point, let me show you the code I had written a while ago. It randomly extracts comments as many as I want. So I'm going to copy this and paste it over here. And let's say I want to select 4 people. Do you see number of winners right here? Type in 4. And this line starting with comment selector is

indicating the method used to find the HTML code - the HTML code of each comment. It's okay if you don't understand what I just said. Anyway, if you finally manage to run it, the code right here shuffles the retrieved data at random and picks 4 people out of it. Let's run it. Ta-da! As you see, 4 winners were selected. If you want to execute it again, you can paste the copied code here again. But if you press the upper arrow key, the used code will be displayed again on the screen. Then, let's say we select 3 people this time. Let's press enter. As you see, another three winners are selected. There's a lot I want to talk about through this example. But let me share a few of them. As you can see, when we say we use web pages or JavaScript, that can mean that you aim for a grand goal of creating a web page or even a website. However, it can also mean that when you face an issue while using a website.

you can resolve it by writing simple but rough code, which is just good enough for your needs and context. So, benefits of coding are not just about whether to become a developer or not. Rather, coding gives us various opportunities at different levels, which enable us to solve problems faced in real life. So, I hope that rather than setting up an ambitious goal, you figure out your own way to solve your real-life problems more casually. And I also want you to remember that if you use Console to execute JavaScript code, the JavaScript code will run from the web page that you are currently looking at.

WEB2 JavaScript - 5.HTML과 JS의 만남 (콘솔)

일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다.

채널 공개키 : MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDbU/jgeYLWbmUB5pk/wlqMs+2qsOOPgN2ydxOsrWe8JJUXzj5ovsUmjfBSwLjajT6SyO00ulne3zja2PzEZC2wnJCgvZ6lr/ZLvA9yUqmrKRNaPCfjS0OtBGosccoJssHdaB5i8H73dKI9jimeybLU11Hzb6a86EAaDFkM6bYaBwIDAQAB
