Statements - JavaScript Basics - Source Code & Projects

Statements are “instructions” to be “executed” by Web Browser.

JS Statement

This is a simple statement to write “Code Projects” inside Html element.

<!DOCTYPE html>
<html>
<body>

<h1>JS Statements</h1>
<p>JS statements are executed by browser.</p>
<p id="ex"></p>

<script>
document.getElementById("ex").innerHTML = "Code Projects";
</script>

</body>
</html>

Output :

JS Programs

JS programs contains many JavaScript statements and statements are executed in order as they are written, 1 by 1. Below a, b, c are the values and at last value of c is displayed :

<!DOCTYPE html>
<html>
<body>

<h1>JS Statements</h1>
<p id="ex"></p>

<script>
var a, b, c;
a = 10;
b = 20;
c = a + b;
document.getElementById("ex").innerHTML = c;
</script>
</body>
</html>

Output :

Semicolons

Js Statements are separated by Semicolons ( ; )

<!DOCTYPE html>
<html>
<body>

<h1>JS Statements</h1>
<p> JS Statements are Separated by semicolons </p>
<p id="ex"></p>

<script>
var a, b, c;
a = 10;
b = 20;
c = a + b;
document.getElementById("ex").innerHTML = c;
</script>

</body>
</html>

Output :

White Space

Multiple spaces are ignored by JS. To make your codes more readable you can add White Spaces which makes your statements clear to read and understand.

var a = b + c;

var person = "Harry";

Line Breaks & Line Lengths

To read codes clearly its better to break the line when it doesn’t fit in a single line and the best part to break line is after an operator.

<!DOCTYPE html>
<html>
<body>

<h1>JS Statements</h1>
<p> Its better to break code line after an operator or a comma to read it clearly!! </p>
<p id="ex"></p>

<script>
document.getElementById("ex").innerHTML =
"Code Projects";
</script>

</body>
</html>

Output :

Code Blocks

Use of code blocks is to define statements to be executed together.

<!DOCTYPE html>
<html>
<body>
<h1>JS Statements</h1>
<p> Between { & } code blocks are written! </p>
<p id="ex"></p>
<p id="exx"></p>
<button type="button" onclick="myFunction()">Click Me</button>

<script>
function myFunction() {
 document.getElementById("ex").innerHTML = "Code Projects";
 document.getElementById("exx").innerHTML = "Projects, Tutorials & More . .";
}
</script>

</body>
</html>

Output :

Trending now