JavaScript syntax refers to the rules that define how JavaScript programs are structures:
// How to create variables:
var x;
let y;
// How to use variables:
x = 5;
y = 6;
let z = x + y; // z will hold the sum of x and y
JavaScript values can be categorized into two types:
- Fixed values
- Variable values
Fixed values are known as Literals, while variable values are referred to as Variables.
JavaScript Literals
There are important syntax rules regarding fixed values, particularly literals.
1. Numbers can be written with or without decimals. Here are examples of both:
let withoutDecimals = 100;
let withDecimals = 100.5;
2. Strings are text, written within double or single quotes:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Strings can be written with double or single quotes.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 'John Doe';
</script>
</body>
</html>
JavaScript Variables
In programming, variables serve as containers for storing data values.
JavaScript employs the keywords var, let, and const for declaring variables.
An equal sign (=)is used to assign values to variables.
Here's an example of how a variable is defined and assigned in JavaScript:
var x; // x is declared as a variable
x = 6; // Now, x is assigned the value 6
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>In this example, x is defined as a variable.
Then, x is assigned the value of 6:</p>
<p id="demo"></p>
<script>
let x;
x = 6;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
JavaScript Operators
JavaScript uses arithmetic operators (+-*/) to compute values.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Operators</h2>
<p>JavaScript uses arithmetic operators to compute values (just like algebra).</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = (5 + 6) * 10;
</script>
</body>
</html>
JavaScript uses an assignment operator (=) to assign values to variables.
<!DOCTYPE html>
<html>
<body>
<h2>Assigning JavaScript Values</h2>
<p>In JavaScript the = operator is used to assign values to variables.</p>
<p id="demo"></p>
<script>
let x, y;
x = 5;
y = 6;
document.getElementById("demo").innerHTML = x + y;
</script>
</body>
</html>
JavaScript Expressions
An expression in programming consists of values, variables, and operators combined in a way that ultimately computes to a single value.
This process of computing the value is known as an evaluation.
For instance, the expression 5 * 10 evaluates to 50:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Expressions</h2>
<p>Expressions compute to values.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 * 10;
</script>
</body>
</html>
Expressions can also contain variable values:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Expressions</h2>
<p>Expressions compute to values.</p>
<p id="demo"></p>
<script>
var x;
x = 5;
document.getElementById("demo").innerHTML = x * 10;
</script>
</body>
</html>
The values can be of various types, such as numbers and strings.
For example, "John" + " " + "Doe", evaluates to "John Doe":
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Expressions</h2>
<p>Expressions compute to values.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "John" + " " + "Doe";
</script>
</body>
</html>
JavaScript Keywords
JavaScript keywords are used to identify actions to be performed.
The "let" keyword tells the browser to create variables:
<!DOCTYPE html>
<html>
<body>
<h2>The <b>let</b> Keyword Creates Variables</h2>
<p id="demo"></p>
<script>
let x, y;
x = 5 + 6;
y = x * 10;
document.getElementById("demo").innerHTML = y;
</script>
</body>
</html>
The "var" keyword also tells the browser to create variables.
<!DOCTYPE html>
<html>
<body>
<h2>The var Keyword Creates Variables</h2>
<p id="demo"></p>
<script>
var x, y;
x = 5 + 6;
y = x * 10;
document.getElementById("demo").innerHTML = y;
</script>
</body>
</html>
In the examples provided, whether you use var or let will yield the same outcome.
You will explore more about the differences between var and let and when to use each later in this tutorial.
JavaScript Comments
Not all JavaScript statements are "executed".
Code after double slashes // or between */ and * / is treated as a comment.
Comments are ignored, and will not be executed:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comments are NOT Executed</h2>
<p id="demo"></p>
<script>
let x;
x = 5;
// x = 6; I will not be executed
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
JavaScript Identifiers / Names
Identifiers are the names used in JavaScript for variables, functions, and keywords.
The naming rules for identifiers are consistent across most programming languages. In JavaScript, an identifier must start with:
- A letter (A-Z or a-z)
- A dollar sign ($)
- An underscore (_)
Characters that follow can include letters, digits, underscores, or dollar signs. These rules ensure that JavaScript identifiers are properly recognized and differentiated within the code.
NOTE:
In JavaScript, identifiers cannot start with numbers. This rule helps JavaScript easily distinguish between identifiers and numeric values. Starting identifiers with letters, dollar signs, or underscores ensures they are recognized correctly in the code.
JavaScript is Case Sensitive
All JavaScript identifiers are case sensitive.
The variables and, are two different variables:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript is Case Sensitive</h2>
<p>Try to change lastName to lastname.</p>
<p id="demo"></p>
<script>
let lastname, lastName;
lastName = "Doe";
lastname = "Peterson";
document.getElementById("demo").innerHTML = lastName;
</script>
</body>
</html>
JavaScript does not interpret LET or Let as the keyword let.
JavaScript and Camel Case
Historically, programmers have employed various methods to combine multiple words into a single variable name, but not all are suitable for JavaScript:
Hyphens:
- Example:
first-name, last-name,master-card,inter-city
- Hyphens are not permitted in JavaScript identifiers as they are used for subtraction operations.
Underscore:
- Example:
first_name,last_name,master_card,inter_city
- Using underscores is a common practice in many programming languages and is allowed in JavaScript.
Upper Camel Case (Pascal Case):
- Example:
FirstName,LastName,MasterCard,InterCity
- This naming convention starts with an uppercase letter and is often used for classes in JavaScript.
Lower Camel Case:
- Example:
firstName,lastName,masterCard,interCity
- JavaScript programmers frequently use lower camel case, where the first letter is lowercase followed by additional concatenated words starting with uppercase letters. This is the preferred style for naming variables and functions in JavaScript.
JavaScript Character Set
JavaScript utilizes the Unicode character set, which encompasses nearly all characters, punctuation marks, and symbols used globally.
This extensive character set allows JavaScript to support a wide variety of languages and scripts, making it highly versatile for web development across different regions and cultures.
