How to use javascript in browser ?

This is the most important thing for a front end developer to know.

To use javascript with a web browser, we need to follow these steps::
  1. create an html file (with .html extension)
  2. Add a script tag just before the closing tag of body tag. This tag is used to write javascript code. 
<script>
  // basic javaScript code
  alert("Hello, World!");
</script>

  1. In the above script tag(inside html file), either we write custom javascript or we simply give the relative path of javascript file and we write our javascript in that file(with .js extension). And this is the preferred way of writing javascript in a separate file. 
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript usage in separate files</h2>
<p id="para">Hola amigo</p>

<button type="button" onclick="handleSubmit()">submit</button>

// other js file connected here with script tag
<script type="text/javascript" src="./app.js"></script>

</body>
</html>

//js file
app.js
-----

function handleSubmit() {
  document.getElementById("para").innerHTML = "Amigo changed.";
}


A script tag has an opening tag(<script>) and a closing tag (</script>). The opening tag has one very special attribute called src attribute which will contain the relative path of javascript file if we are writing javascript in separate file.

Using Node.js for server-side JavaScript in backend

We can use javascript in the backend also. But backend javascript never runs on browser. It runs on Node.js. In the future, we might have courses on nodejs programming too.

Code editors and tools

For running javascript in browser, we do not need any tools. We only need code editors.
There are many code editors in the market such as vs code, sublime text, webstorm etc, but i normally use vscode. It is on of the best code editor for frontend development.

Online code editors for writing javascript

Now, we have 2 types of online code editors, first is where we can write algorithm logic or functional code without any DOM related methods(only with map, reduce, filter, for loop kind of logic), then we use REPL.

Second is where we write some html (may or may not some css too) and then DOM manipulation with DOM methods such as document.getElementById, document.querySelector, document.createElement etc then we use a very popular online editor CodePen.

Although we have many more choices but these 2 are the best recommended one.

PrevNext