JavaScript Syntax

JavaScript syntax is the set of rules that define a correctly structured JavaScript program. JavaScript consists of JavaScript statements that are placed within the <script> </script> HTML tags in a web page, or within the external JavaScript file having .js extension.

JavaScript Syntax- Attributes

JavaScript has two following attributes:

  • Language : Language attribute is used to specify what scripting language you are using. Typically, its value will be JavaScript. Although recent versions of HTML (and XHTML, its successor) have phased out the use of this attribute.
  • Type : Type attribute is used to specify what is now recommended to indicate the scripting language in use and its value should be set to “text/JavaScript”.

JavaScript Syntax – Values

JavaScript syntax can be defined by the following two values:

  • Fixed values: Fixed values are called Literals.
  • Variable values: Variable values are called Variables.

JavaScript Code Placement

JavaScript provides 3 places to put the JavaScript code:

  1. within <body> tag
  2. within <head >tag
  3. External JavaScript file.

For example, the code in the <body> tag can be inserted as presented in the following example

<html>
<body>

<p id="tacode"></p>
<button type="button" onclick="Fun()">click here</button>
<script>
function Fun() {
  document.getElementById("tacode").innerHTML = "It is changed";
}
</script>
</body>
</html> 
</script>

</body>
</html>

Output

image 68

JavaScript Code as External File

Scripts can be placed in external files, which has some advantages:

  • It is used to separate HTML and code
  • It is used to make HTML and JavaScript easier to read and maintain
  • Page loads can be speed up by cached JavaScript.
<!DOCTYPE html>
<html>
<body>

<p id="tacode"></p>

<button type="button" onclick="Fun()">Click</button>

<p>(myFunction is stored in an external file called "data.js")</p>

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

</body>
</html>

Output

image 69

JavaScript Case Sensitivity

JavaScript is case-sensitive. This means that variables, language keywords, function names, and other identifiers must always be typed with a consistent capitalization of letters.

For example, the variable myVar must be typed myVar not MyVar or myvar. Similarly, the method name getElementById() must be typed with the exact case not as getElementByID().

<!DOCTYPE html>
<html>
<body>
<p id="tacode"></p>

<script>
var fn, ln;
fn = "Ali";
ln = "Sheri";
document.getElementById("tacode").innerHTML = ln;
</script>

</body>
</html>

Output

JavaScript Syntax

Whitespace and Line Breaks

JavaScript ignores all tabs, spaces, and newlines in the program. So we can format and indent our programs freely in a consistent and neat way to make code easy to understand and read.

Semicolons are Optional

JavaScript statements are followed by a semicolon but it allows us to omit these semicolons if each of your statements is placed on a separate line like the below example:

But in case the values are written in the same then semi-colon is mandatory.