{"id":6275,"date":"2020-09-25T22:47:38","date_gmt":"2020-09-25T13:47:38","guid":{"rendered":"https:\/\/nebikatsu.com\/en\/?p=6275"},"modified":"2020-09-25T23:32:15","modified_gmt":"2020-09-25T14:32:15","slug":"what-is-console-in-javascript-it-makes-confuse-js-beginners","status":"publish","type":"post","link":"https:\/\/nebikatsu.com\/en\/6275\/","title":{"rendered":"What is console in Javascript? It makes confuse JS beginners."},"content":{"rendered":"

\"What<\/p>\n

I started to learn Javascript. But I don’t get it what to do with what I learnt when I make websites or apps. I’m about to give up.<\/div><\/div>
<\/div><\/div><\/div>\n

Don’t you feel Javascript is just too difficult?
\nDo you feel you don’t know what you are doing when you learn Javascript?<\/p>\n

And while you are learning Javascript, you must feel “What the hell is Console? Where is it? Is Console a browser window or not?”<\/strong><\/p>\n

I felt the same way when I started learning.<\/p>\n

So I’ll teach you what the hell is Console in Javascript and you won’t confuse any more!<\/p>\n

 <\/p>\n

What is Console in Javascript? What is it for?<\/h2>\n

Why a lot of Javascript rookies give up learning? Because they don’t get the word “Console”. Then I’ll explain very simply.<\/p>\n

For example, if you make a website just using HTML, Then Just what you input will come out on the browser.<\/p>\n

But when you learn Javascript, many books and learning sites let you output texts on Console. If you could output the collect text on Console, teachers say “Well done!”. But you don’t know what you are doing and how to use console when you build a website or app.<\/p>\n

Then check the image below.<\/p>\n

\"\"<\/span><\/a><\/p>\n

When you right click anywhere on a website, “Inspect” function will appear.<\/p>\n

Then choose Inspect.<\/p>\n

\"\"<\/span><\/p>\n

The window comes out the bottom of your browser. And there is Console tab. Yes. This is Console.<\/p>\n

Console shows if your Javascript is broken or have errors.<\/p>\n

Also if you use console.log()<\/span>tag on your javascript code, then what you input will come out here too.<\/p>\n

OK, So I understand this window is Console. However, even if I could show “Hello world” or some garbage words on Console, so what? I still can’t build a website by myself with Javascript. This is bullshit, isn’t it?<\/div><\/div>
<\/div><\/div><\/div>\n
Right. Javascript beginners don’t really get it what Console is used for. That’s why, many beginners feel Javascript is too difficult and will give up. But actually Console is used for checking there are errors or not. And fix them. This is called “Debug”.<\/div><\/div>
Neby<\/div><\/div><\/div>\n

 <\/p>\n

Console is to check what is wrong with your Javascript code.<\/h3>\n

OK, so I’ll show you an example of how to use console.<\/p>\n

If you know this, you will make sense how to learn Javascript more and you are no longer rookie.<\/p>\n

For example, you want to add “voice pronounce buttons” on your website.\u00a0<\/p>\n

\"\"<\/span><\/p>\n

Demo page<\/a><\/p>\n

If you click one of buttons, it pronounce the word.
\nYou must often see these on dictionary websites.<\/p>\n

Then to build this Javascript function, I wrote the code like below.<\/p>\n

\"\"<\/p>\n

But, the button “cool” doesn’t work. But “cold” works.<\/span><\/p>\n

Then you need to look for where is the wrong part like “Where’s Wally?”. But if the code is huge, you might take a couple of days to fix the code.<\/span><\/p>\n

It’s not smart way to do. That’s why you need to use console.log()<\/span> tag!<\/p>\n

\"\"<\/p>\n

Like above. Add console.log(text);<\/span>. Then you can check whether the word “cool” is passed from HTML to Javascript or not.<\/p>\n

Open Console (right click wherever the website and choose “Inspect”) and click “Cold” button,<\/p>\n

 <\/p>\n

\"\"<\/span><\/p>\n

Then “cold” comes out on Console. It means, function play(text)<\/span> received the word properly from HTML Button.<\/p>\n

<button class=”speak-btn” onclick=”play(‘cold’)<\/span>“>Cold<\/button><\/span><\/p>\n

So now you know the code play(‘cold’)<\/span> is working properly.<\/p>\n

Then click “Cool” button next.<\/p>\n

\"\"<\/span><\/p>\n

This time, “cool” doesn’t come out, but “Uncaught ReferenceError” is came out.
\nIt means, function play(text)<\/span> didn’t receive the word from HTML property.<\/p>\n

It means…<\/p>\n

\"\"<\/span><\/p>\n

There is wrong part above console.log(text);.<\/p>\n

The mistake is play(cool)<\/span> needs to be (‘cool’)<\/span>.<\/p>\n

OK, so do you get it?<\/p>\n

If Console showed ‘cool’ properly, but still the button didn’t work. Then below console.log() had something wrong. Then you would add console.log(uttr);<\/span> next. And check whether next line is working or broken.<\/p>\n

\"\"<\/p>\n

Use Console and testing whether working properly or not, this is called “debug”.<\/p>\n

 <\/p>\n

I see. Now I understand what console.log is for.<\/div><\/div>
<\/div><\/div><\/div>\n
Great. “console.log” tag is for debug. So actually you don’t need to use it to make Javascript work. But many books and learning sites use console.log tag to check your code is working properly or not.<\/div><\/div>
Neby<\/div><\/div><\/div>\n
OK. But why just don’t they just show how to use Javascript on HTML to teach Javascript? It’s more easier to understand. Don’t you think so?<\/div><\/div>
<\/div><\/div><\/div>\n
You are very right. However, when teach Javascript basic code, and using HTML, they have to explain a lot of things and learner more confuse. Also they have to prepare more to teaching. That’s why use Console and “console.log()” and make it simple.<\/div><\/div>
Neby<\/div><\/div><\/div>\n
OK. It made a sense.<\/div><\/div>
<\/div><\/div><\/div>\n

 <\/p>\n

\n

Summary<\/span><\/p>\n

    \n
  • Console appears right click the webpage and select “Inspect”.<\/li>\n
  • console.log is used for finding errors (debugging).<\/li>\n<\/ul>\n<\/div>\n

    If you understand these. Then now you understand what you are doing properly in Javascript. Enjoy learning!<\/p>\n","protected":false},"excerpt":{"rendered":"

    I started to learn Javascript. But I don’t get it what to do with what I learnt when I make websites or apps. I’m about to give up. Don’t you feel Javascript is just too difficult? Do you feel you don’t know what you are doing when you learn Javascript? And while you are learning Javascript, you must feel “What the hell is Console? Where is it? Is Console a browser window or not?” I felt the same way when I started learning. So I’ll teach you what the hell is Console in Javascript and you won’t confuse any more! … <\/p>\n","protected":false},"author":1,"featured_media":6285,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[156],"tags":[159],"_links":{"self":[{"href":"https:\/\/nebikatsu.com\/en\/wp-json\/wp\/v2\/posts\/6275"}],"collection":[{"href":"https:\/\/nebikatsu.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nebikatsu.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nebikatsu.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nebikatsu.com\/en\/wp-json\/wp\/v2\/comments?post=6275"}],"version-history":[{"count":16,"href":"https:\/\/nebikatsu.com\/en\/wp-json\/wp\/v2\/posts\/6275\/revisions"}],"predecessor-version":[{"id":6301,"href":"https:\/\/nebikatsu.com\/en\/wp-json\/wp\/v2\/posts\/6275\/revisions\/6301"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nebikatsu.com\/en\/wp-json\/wp\/v2\/media\/6285"}],"wp:attachment":[{"href":"https:\/\/nebikatsu.com\/en\/wp-json\/wp\/v2\/media?parent=6275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nebikatsu.com\/en\/wp-json\/wp\/v2\/categories?post=6275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nebikatsu.com\/en\/wp-json\/wp\/v2\/tags?post=6275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}