Writing your first JavaScript program is a great way to get started with the language. You can create a simple HTML document and include JavaScript code within it.
JavaScript can be executed by embedding JavaScript statements within the <script>...</script> HTML tags in a web page.
The placement of the <script> tags, which contain your JavaScript code, can be flexible within your web page, but conventionally, it is advised to include them within the <head> or just before </body> tags.
The <script> tag instructs the browser to interpret all the content enclosed between these tags as a script. A straightforward example of JavaScript syntax looks like this.
<script>
JavaScript code Here
</script>The script tag takes two important attributes − the language and type attributes associated with the <script> tag in HTML. These attributes help define the scripting language being used in your code.
- Language Attribute:
languageused to specify the scripting language, and traditionally it was set to “javascript” to indicate the use of JavaScript.- However, this attribute has been deprecated and is no longer recommended for use in modern HTML and XHTML standards. Instead, the language is usually inferred as JavaScript by default.
Example (not recommended):
<script language="javascript">
// JavaScript code here
</script>2. Type Attribute:
typeis now the recommended attribute to indicate the scripting language. For JavaScript, the value should be set to “text/javascript.” This makes it explicit that the code within the<script>tags is JavaScript.
Example (recommended):
<script type="text/javascript">
// JavaScript code here
</script>In modern web development, you typically don’t need to specify the type attribute because “text/javascript” is the default scripting language assumed by browsers when you use the <script> tag. However, it’s still considered good practice to include the type attribute with the “text/javascript” value for clarity and compatibility with older browsers.
Your First “Hello World!” JavaScript Code
let’s rewrite the explanation for a sample example that prints “Hello World” using JavaScript while also adding an HTML comment for compatibility:
“Let’s consider a simple example where we want to display ‘Hello World.’ Within our JavaScript code, we’ve included an optional HTML comment that encapsulates the JavaScript logic. This comment is intended to safeguard our code in case a browser doesn’t support JavaScript. The comment is concluded with ‘//–>’.
The ‘//’ is used in JavaScript to denote a comment, so we include it to ensure that a browser doesn’t interpret the end of the HTML comment as part of the JavaScript code. Following this, we invoke the document.write function, which allows us to insert a string into our HTML document.
This versatile function can be used to write text, HTML content, or a combination of both.
Here’s an example of the code in action.”
<html>
<body>
<script language = "javascript" type = "text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
</body>
</html>This code will produce the following result −
Hello World!Whitespace and Line Breaks of JavaScript
Whitespace and line breaks are an essential aspect of the JavaScript syntax. They are used for readability, organization, and to separate different parts of your code. Here’s how whitespace and line breaks are used in JavaScript:
Spaces and Indentation:
- Spaces are used to separate operators, keywords, and operands. For example, in
x = 5 + 3, spaces separate the variables, the assignment operator, and the values. - Indentation is used to structure your code for better readability. It’s common to use 2 or 4 spaces to indent code blocks within functions, loops, and conditionals.
function exampleFunction() {
if (condition) {
// Indentation for readability
console.log("Indented code block");
}
}Line Breaks:
Line breaks are used to separate different statements and code blocks. They make your code more organized and easier to follow.
In general, a new line often indicates the start of a new statement or the beginning of a new code block.
let x = 5; // Line break separates statements
let y = 10;
for (let i = 0; i < 5; i++) {
// Line break indicates the start of a new code block
console.log("Iteration " + i);
}Semicolons:
- Semicolons are used to terminate statements in JavaScript. While they are often optional (as JavaScript automatically inserts them in many cases), including them is considered a good practice to avoid potential issues.
- Semicolons can also be used to separate multiple statements on a single line.
let a = 1; let b = 2; // Multiple statements on one line with semicolonsIn JavaScript, simple statements are typically terminated with a semicolon, much like in C, C++, and Java. However, JavaScript offers the flexibility to omit the semicolon if each statement is placed on a separate line. For instance, the following code can be written without semicolons.
<script language = "javascript" type = "text/javascript">
<!--
var1 = 1
var2 = 2
//-->
</script>Whitespace within Strings:
- Spaces, tabs, and line breaks within strings are treated as regular characters. They don’t impact the code’s functionality but may be used for formatting text in the output.
let message = "This is a\nmultiline string."; // Line break within a stringComments:
- Whitespace and line breaks are often used to format and structure comments, making them more readable. Comments are essential for documenting your code.
- JavaScript allows for both C-style and C++-style comments. This means:
- Any content following a
//and extending until the end of the line is considered a comment in JavaScript and is disregarded by the interpreter. - Any content enclosed within
/*and*/is interpreted as a comment, even if it spans multiple lines. - JavaScript also acknowledges the HTML comment opening sequence
<!--as a single-line comment, akin to the//comment style. - However, JavaScript does not recognize the HTML comment closing sequence
-->as a comment ending, so it should be expressed as-->.
- Any content following a
// This is a comment
// That spans multiple linesCase Sensitivity:
JavaScript exhibits case sensitivity, which implies that language keywords, variables, function names, and all other identifiers must maintain a uniform capitalization of letters.
Therefore, in JavaScript, the identifiers “Time” and “TIME” are distinct and carry different interpretations.