JS Syntax

Overview

JavaScript syntax refers to the rules and conventions that dictate how you write valid JavaScript code. Understanding these rules is crucial for creating functional and readable programs.

Importing Js

Using JavaScript in an HTML file involves including your JavaScript code and utilizing it within your webpage. Here's a detailed explanation of how to use and import JavaScript in an HTML file:

Inline JavaScript:

You can embed JavaScript directly into your HTML file using <script> tags. This is often used for small scripts or quick interactions.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
  <title>Inline JavaScript</title>
</head>
<body>
   <h1>Inline JavaScript</h1>
  
   <button onclick="alert('Hello, World!')">Click me</button>
  
   <script>
     // Your JavaScript code here
     function sayHello() {
       alert("Hello from inline script!");
     }
  </script>
</body>
</html>

External JavaScript:

For larger scripts or when you want to keep your HTML and JavaScript separate, you can use external JavaScript files.

1) Create a JavaScript File:

Create a .js file, e.g., script.js, and add your JavaScript code:

Try yourself 
        
            // script.js
function sayHello() {
  alert("Hello from external script!");
}
2) Include External JavaScript File:

In your HTML file, include the external JavaScript file using the <script> tag:

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
  <title>External JavaScript</title>
</head>
<body>
  <h1>External JavaScript</h1>
  
  <button onclick="sayHello()">Click me</button>
  
  <!-- Include the external JavaScript file -->
  <script src="script.js"></script>
</body>
</html>

Basic Structure

JavaScript code is structured using semicolons to terminate statements and curly braces to define code blocks.

Try yourself 
        
            // Statements are terminated with semicolons
let x = 5;
let y = 10;

let resultText = "x is less than y";

// Code blocks are enclosed in curly braces
if (x < y) {
    document.getElementById("demo").innerHTML = resultText;
}

Case Sensitivity

JavaScript is case-sensitive, meaning that variables and function names with different capitalization are treated as distinct.

Try yourself 
        
            var myVariable = 42;
var MyVariable = "Hello";

document.getElementById("first").innerHTML = myVariable;
document.getElementById("second").innerHTML = MyVariable;

console.log(myVariable);   // Outputs: 42
console.log(MyVariable);   // Outputs: Hello

Comments

Comments are used to provide explanations and notes within your code.

Try yourself 
        
            // This is a single-line comment

/* This is a
   multi-line
   comment */

Statements

JavaScript code is made up of various statements, which perform actions or produce values.

Try yourself 
        
            var greeting = "Hello, ";
var name = "Alice";
var message = greeting + name; // Assignment statement

if (name === "Alice") {        // Conditional statement
    DisplayName(message);      // Function call statement
}

function DisplayName(name){
    document.getElementById("first").innerHTML = name;
}

Variables

Variables are used to store data. They are declared using var, let, or const.

Try yourself 
        
            var age = 25;       // Old way, less preferred now
let name = "John";   // Variable value can be changed
const PI = 3.14;     // Variable value is constant

Data Types

JavaScript supports several fundamental data types: numbers, strings, booleans, null, and undefined.

Try yourself 
        
            let numberVar = 42;        // Number
let price = 19.99;         // Floating-point number
let stringVar = "Hello";   // String
let booleanTrue = true;    // Boolean
let booleanFalse = false;  // Boolean
let nullVar = null;        // Null
let undefinedVar;          // Undefined
let id = Symbol("unique identifier"); // Represents a unique and immutable value often used as object property keys.

Reserved Keywords

JavaScript has reserved words that cannot be used as variable or function names.

Try yourself 
        
            var var = "This is a reserved word"; // Syntax error!

Variables and Statements

Try yourself 
        
            var firstName = "John";
var lastName = "Doe";

if (firstName === "John") {
    document.getElementById("first").innerHTML = "Hello, " + firstName + " " + lastName;
}

Summary

Mastering JavaScript syntax ensures your code is correctly structured and easily understandable.