JavaScript Syntax
1. Understanding the JavaScript Syntax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of JavaScript Statements</title>
</head>
<body>
<script>
let x = 5;
let y = 10;
let sum = x + y;
document.write(sum); // Prints variable value
</script>
</body>
</html>
2. Case Sensitivity in JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Case Sensitivity</title>
</head>
<body>
<script>
let myVar = "Hello World!";
console.log(myVar);
console.log(MyVar);
console.log(myvar);
</script>
<p><strong>Note:</strong> Check out the browser console by pressing the f12 key on the keyboard,
you'll see a line something like this: "Uncaught ReferenceError: MyVar is not defined".</p>
</body>
</html>
3. JavaScript Comments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Single-line Comment</title>
</head>
<body>
<script>
// This is my first JavaScript program
document.write("Hello World!");
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Multi-line Comment</title>
</head>
<body>
<script>
/* This is my first program
in JavaScript */
document.write("Hello World!");
</script>
</body>
</html>
JavaScript Variables
There are three ways to declare variables in JavaScript:
1. var,
2. let
3. const.
Naming Conventions for JavaScript Variables
These are the following rules for naming a JavaScript variable:
• A variable name must start with a letter, underscore (_), or dollar sign ($).
• A variable name cannot start with a number.
• A variable name can only contain alpha-numeric characters (A-z, 0-9) and
underscores.
• A variable name cannot contain spaces.
• A variable name cannot be a JavaScript keyword or a JavaScript reserved word.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Creating Variables in JavaScript</title>
</head>
<body>
<script>
// Creating variables
let name = "Peter Parker";
let age = 21;
let isMarried = false;
// Printing variable values
document.write(name + "<br>");
document.write(age + "<br>");
document.write(isMarried);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Declaring Variables in JavaScript</title>
</head>
<body>
<script>
// Declaring Variable
let userName;
// Assigning value
userName = "Clark Kent";
// Printing variable values
document.write(userName);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Declaring Constants in JavaScript</title>
</head>
<body>
<script>
// Declaring constant
const PI = 3.14;
// Printing constant value
document.write(PI); // 3.14
// Trying to reassign
PI = 10; // error
</script>
<p><strong>Note:</strong> Please check out the browser console by pressing the f12 key on the
keyboard.</p>
</body>
</html>
Declaring Multiple Variables at Once
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Declaring Multiple Variables in JavaScript</title>
</head>
<body>
<script>
// Declaring multiple Variables
var let = "Peter Parker", age = 21, isMarried = false;
// Printing variable values
document.write(name + "<br>");
document.write(age + "<br>");
document.write(isMarried);
</script>
</body>
</html>
JavaScript Data Types
1. The String Data Type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript String Data Type</title>
</head>
<body>
<script>
// Creating variables
let a = 'Hi there!'; // using single quotes
let b = "Hi there!"; // using double quotes
// Printing variable values
document.write(a + "<br>");
document.write(b);
</script>
</body>
</html>
2. The Number Data Type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Number Data Type</title>
</head>
<body>
<script>
// Creating variables
let a = 25;
let b = 80.5;
let c = 4.25e+6;
let d = 4.25e-6;
// Printing variable values
document.write(a + "<br>");
document.write(b + "<br>");
document.write(c + "<br>");
document.write(d);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript NaN</title>
</head>
<body>
<script>
document.write("Some text" / 2);
document.write("<br>");
document.write("Some text" / 2 + 10);
document.write("<br>");
document.write(Math.sqrt(-1));
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Infinity</title>
</head>
<body>
<script>
document.write(16 / 0);
document.write("<br>");
document.write(-16 / 0);
document.write("<br>");
document.write(16 / -0);
</script>
</body>
</html>
3. The Boolean Data Type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Boolean Data Type</title>
</head>
<body>
<script>
// Creating variables
let isReading = true; // yes, I'm reading
let isSleeping = false; // no, I'm not sleeping
// Printing variable values
document.write(isReading + "<br>");
document.write(isSleeping);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Comparisons</title>
</head>
<body>
<script>
let a = 2, b = 5, c = 10;
document.write(b > a) // Output: true
document.write("<br>");
document.write(b > c) // Output: false
</script>
</body>
</html>
4. The Undefined Data Type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Undefined Data Type</title>
</head>
<body>
<script>
// Creating variables
let a;
let b = "Hello World!"
// Printing variable values
document.write(a + "<br>");
document.write(b);
</script>
</body>
</html>
5. The Null Data Type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Null Data Type</title>
</head>
<body>
<script>
let a = null;
document.write(a + "<br>"); // Print: null
let b = "Hello World!"
document.write(b + "<br>"); // Print: Hello World!
b = null;
document.write(b) // Print: null
</script>
</body>
</html>
6. The typeof Operator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript typeof Operator</title>
</head>
<body>
<script>
// Numbers
document.write(typeof 15 + "<br>"); // Prints: "number"
document.write(typeof 42.7 + "<br>"); // Prints: "number"
document.write(typeof 2.5e-4 + "<br>"); // Prints: "number"
document.write(typeof Infinity + "<br>"); // Prints: "number"
document.write(typeof NaN + "<br>"); // Prints: "number". Despite being "Not-A-Number"
// Strings
document.write(typeof '' + "<br>"); // Prints: "string"
document.write(typeof 'hello' + "<br>"); // Prints: "string"
document.write(typeof '12' + "<br>"); // Prints: "string". Number within quotes is
document.write(typeof string
// Booleans
document.write(typeof true + "<br>"); // Prints: "boolean"
document.write(typeof false + "<br>"); // Prints: "boolean"
// Undefined
document.write(typeof undefined + "<br>"); // Prints: "undefined"
document.write(typeof undeclaredVariable + "<br>"); // Prints: "undefined"
// Null
document.write(typeof Null + "<br>"); // Prints: "object"
// Objects
document.write(typeof {name: "John", age: 18} + "<br>"); // Prints: "object"
// Arrays
document.write(typeof [1, 2, 4] + "<br>"); // Prints: "object"
// Functions
document.write(typeof function(){}); // Prints: "function"
</script>
</body>
</html>
