If you are into web development, you’ll come across JavaScript at some point. It is one of the three major languages in Web Development among HTML and CSS.

RUNNING JAVASCRIPT IN BROWSER CONSOLE

You don’t need a complex coding environment to work with JavaScript (that comes later…), you can run your first lines of JavaScript code in your Chrome or any browser itself, because all browsers support running JavaScript in their respective consoles even without an internet connection. 

Right-click anywhere on the browser window, selecting ‘Inspect’ from the dropdown menu and go to ‘Console’.

This should open the console where you can run your JS code.

YOUR FIRST LINES OF JS CODE

You can do your basic mathematical calculations in the console, like 2+2, 2*2, 1000000/20 and so on….

But let us do something more JavaScript specific. You can use the following functions to perform some tasks on your browser.

alert(): The ‘alert()’ method generates an alert in the browser window. For example, ‘alert(“Hello, World!”)’ will generate an alert pop-up saying ‘Hello, World!’.

console.log(): This function acts like a print() statement or a cout statement in JavaScript (if JavaScript is your first programming language then don’t bother figuring out what it means…). It prints a statement in the console itself. For example, ‘console.log(“Hello, World!”)’ will print ‘Hello, World!’ in the console.

CLICKING BUTTONS ON WEBPAGES USING CLASS NAME

Go to a webpage that has a clickable button on it. I am using ‘https://www.facebook.com’ for example. 

Right-click on the button and select ‘Inspect’. 

Copy the class name from the element code and open the console.

Type ‘document.querySelector(.<class_name>)’ and replace ‘<class_name>’ with the class name you copied and press Enter. This will select the button you want to click.

Note: Do not miss the period (.) before the class name. A class name is denoted with a period before it.

To click the button use: 

‘document.querySelector(.<class_name>).click()’

And replace ‘<class_name>’ with the class name you copied and press Enter again. This will click on the button.

CLICKING BUTTONS ON WEBPAGES USING ID

If an element has an id, it’s even easier to target it. You can just mention the id in the console and it will be targeted.

Although this may not work with ids with a special operator like a dash (-). For such ids, you can use:

document.getElementById(<id>)

Replace ‘<id>’ with the id of the element you want to target.

And you can click on it using:

document.getElementById(<id>).click()

CONCLUSION

Those are some of the many things you can do with a browser using JavaScript. In the upcoming lessons, we will step out of the browser console and move to an actual IDE designed to run JavaScript and write some code of our own.

Give us a LIKE 👍 and FOLLOW, if you like our content and want more. We won’t let you down😉

If you have a doubt, query or any feedback, I would love to learn about it in the comments below👇

You can chat with me and other programmers from our community by joining our telegram group Follow the link and become an important and valued part of our programming community today. See you there!!!

I’ll be back with some new knowledge very soon, until then…..

    HAVE AN AMAZING DAY !!!!