DEV Community

Cover image for How to write a javascript program.?
kuldeep patel
kuldeep patel

Posted on

How to write a javascript program.?

we need 2 things to run the javascript program...

  1. We need Code editor and -> We are using vs (Visual Studio) Code. VS Code is free to editing code. Vs code is developed by Microsoft developers.
  2. We need where to see our output? -> We use for output is Chrome. Chrome is developed by Google so it's also free to use πŸ˜….

These 2 stuff things you already know.

So in this article, we are writing our first javascript program... πŸ₯Ά. No Today we are not writing a Hello world... We are writing with Emoji to fun with javascript. Because I'm not thinking you go boring javascript.
Every javascript line end with ;

We are writing two types of javascript code. Internal and external javascript code.
first, we are discussing internal javascript

program1

So now you see in our code. First, we make a simple HTML program, and then after you want to write javascript code. Then you can use <script></script>.
You can use the <script> tag inside the <body> tag Or <head> tag

Secondly, External javascript use.

Index.html

program2

script.js
program3

Now you can see the first Index.html we are linked with the external script.

<script src="./script.js"></script>.

SRC is an attribute of the script tag. Using src you can connect with an external javascript program. And seconde file call script.js in this file we write simple code...!

Now, How do I see my output in the browser.?
If you are using Chrome, Firefox, Or any other browser the way is always one.

Open Chrome browser -> clicks on white background -> Go to Inspect
Screenshot from 2021-01-03 10-55-03

Go to the console.
Screenshot from 2021-01-03 10-59-57

Here our output πŸ‘‡
Screenshot from 2021-01-03 11-01-11

This is a long process to see our output 🀣
Click F12 to directly open the console in your browser... 😎...

What is console.log()?

The console.log() is a function in JavaScript that is used to print any kind of variables defined before in it or to just print any message that needs to be displayed to the user.

We discuss more Console.log() in the next chapter...
Thank you for reading πŸ˜‰

Top comments (2)

Collapse
 
hameed profile image
Hameed Khamis

Great explanation Kuldeep!
but how can I make pictures like the visual aids you are using(The attached picture)?

Thanks in advance

Collapse
 
ksdeveloper profile image
kuldeep patel

Hello @hameed This is making with VS code plugin.