JavaScript syntax consists of a set of rules that tell you how to write your code. You can add JavaScript code to an HTML document using <script> tags. These tags can be placed anywhere in your HTML, but it’s generally a good idea to put them within the <head> section. Here’s a simple example of how to include JavaScript in your HTML:
<script>
// Your JavaScript code goes here
</script>
The <script> tag has two important attributes:
- Language: Specifies the scripting language. For JavaScript, it’s usually set to “javascript”. However, modern HTML doesn’t require this attribute.
- Type: Indicates the scripting language. The value should be “text/javascript”. In HTML5, this is the default, so you can skip this attribute.
So your JavaScript might look like this:
<script type="text/javascript">
// Your JavaScript code
</script>
Your First JavaScript Code
Let’s write a simple JavaScript program that prints “Hello World”. We use the document.write method to add text to our HTML document.
<html>
<head>
<title>Your first JavaScript program</title>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
This will display “Hello World!” on the webpage.
JavaScript Values
JavaScript can handle two types of values:
- Literals: Fixed values like
10or"Hello". - Variables: Dynamic values that can change.
JavaScript Literals
Here’s an example:
<html>
<body>
<script>
document.write(10); // Number Literal
document.write("<br />"); // Line-break
document.write("Hello"); // String Literal
</script>
</body>
</html>
This will display:
10
Hello
JavaScript Variables
Variables store data values. You can define variables using var, let, or const.
<html>
<body>
<script>
let a = 5; // Variable Declaration
document.write(a); // Using variable
document.write("<br>");
let b = "One";
document.write(b);
</script>
</body>
</html>
This will display:
5
One
Whitespace and Line Breaks
JavaScript ignores extra spaces, tabs, and newlines, so feel free to format your code neatly.
Semicolons
While semicolons are often used to end statements, they are optional if each statement is on a new line.
<script>
var1 = 10
var2 = 20
</script>
But if you put statements on a single line, use semicolons:
<script>
var1 = 10; var2 = 20;
</script>
Case Sensitivity
JavaScript is case-sensitive. This means Time and time are different variables.
<html>
<body>
<script>
let a = "time";
let b = "Time";
document.write("a == b? " + (a == b));
</script>
</body>
</html>
This will display:
a == b? false
JavaScript and Camel Case
JavaScript variables often use camel case:
- Pascal Case:
SmartWatch - Lower Camel Case:
smartWatch - Underscore:
smart_watch
JavaScript Keywords
JavaScript has several keywords like function, let, var, and const. Here’s an example:
<html>
<body>
<script>
function getSum(first, second) {
var sum = first * second;
document.write("The sum of " + first + " and " + second + " is " + sum);
}
let first = 3;
const second = 4;
getSum(first, second);
</script>
</body>
</html>
This will display:
The sum of 3 and 4 is 12
JavaScript Identifiers
Identifiers name variables, functions, and objects. They must start with a letter, $, or _ and cannot start with a digit or hyphen.
Comments in JavaScript
JavaScript supports both single-line (//) and multi-line (/* ... */) comments.
<script>
// This is a single-line comment
/*
This is a
multi-line comment
*/
</script>
Operators in JavaScript
JavaScript includes various operators for arithmetic, logic, and more. Example:
<html>
<body>
<script>
var1 = 10;
var2 = 20;
var3 = var1 * var2;
var4 = 10 + 20;
document.write(var3 + " " + var4);
</script>
</body>
</html>
This will display:
200 30
Expressions in JavaScript
Expressions combine values, variables, and operators to compute a value. Example:
<html>
<body>
<script>
let a = 10;
let b = 2;</script>
</body>
</html>
JavaScript Character Set
JavaScript supports Unicode characters, including special symbols and emojis. For example:
←displays a left arrow (←)8360displays the Rupees symbol (₹)
There’s so much more to JavaScript syntax, but this should give you a solid start. We’ll cover more advanced topics in future lessons! Happy coding! 🚀