Post
Ask Question

Basics of JavaScript: Part 3

Introduction

In the previous part of this series, we discussed Inline and External JavaScript. We also talked about the advantages of using External JavaScript, and in addition, we also discussed where the script tag should be placed in HTML. 

Reference

Basics of JavaScript- Part 1
Basics of JavaScript- Part 2

This article discusses the following topics,

  • Is JavaScript case sensitive
  • Comments in JavaScript
  • Data types in JavaScript

Is JavaScript case-sensitive?

Yes, JavaScript is a case-sensitive scripting language. Variables names, keywords, methods, and event handlers are all case-sensitive.

Example 1

In the previous part of this series, we saw how to use an alert function. We will be using the same alert function for this example.

<html>    
    <head>    
        <title></title>    
    </head>    
    <body>    
        <script type="text/javascript">    
            alert('alert function invoked');    
        </script>    
    </body>    
</html>   

We have a very pretty simple example. All we have is a script tag in the body section.

Inside the script tag, all we are doing is, we are calling the alert function. So, when we open this file in a browser, the browser will execute this JavaScript.

Basics of JavaScript: Part 3

Example 2

In this example, we will use the same demo, but we will change the function from alert to Alert this time.

<script type="text/javascript">    
   Alert('alert function invoked');    
</script>  

Basics of JavaScript: Part 3

The output is blank.

Press f12, and you will see an Uncaught ReferenceError.

Basics of JavaScript: Part 3

Example 3

In the previous example, we saw that functions in JavaScript are case-sensitive. Theoretically, this case-sensitive logic is applied to all functions, variables, and event handlers. But now, let's see if this logic applies to the variables practically.

To create a variable, we use the var keyword.

<html>    
    <head>    
        <title></title>    
    </head>    
    <body>    
        <script type="text/javascript">    
            var myVariable = 'Welcome to JavaScript Tutorials';    
            alert(myVariable);    
        </script>    
    </body>    
</html>   

We have a script tag in the preceding HTML in the body section. Inside this script tag, we have created a variable "myVariable" and initialized this variable with a string text.

In the alert function, we passed this myVariable as a parameter.

Basics of JavaScript: Part 3

Now let's change the variable name from myVariable to MyVariable in the alert function.

<script type="text/javascript">    
   var myVariable = 'Welcome to JavaScript Tutorials';    
   alert(MyVariable);    
</script>   

You will get a blank web page.

Press f12

Basics of JavaScript: Part 3

So, variables in JavaScript are case-sensitive.

Comments in JavaScript

There are 2 ways to add comments to JavaScript.

Single-Line

To add a single-line comment, we use two forward slashes. The single-line comment ends at the end of the line.

  1. //this is a single-line comment   

Multi-Line

We use a forward slash suffixed with an asterisk (*) to add a multi-line comment. This multi-line ends with an asterisk (*) suffixed with a forward slash.

  1. /* This is multi-line  
  2. comment.  
  3. */   

Data Types in JavaScript
 

String

We can use a single quote or a double quote to add a string.

  1. 'This is a string'  
  2. "This is also a string"  

Numeric

We don't have separate data types for integers and decimals. We have one Numbers data type for every numeric value.

Boolean

True and false

With JavaScript, we always use a var keyword to create any variable. Based on the value assigned, the type of the variable is inferred.

  1. var x = true; // here the data type will be inferred as Boolean  
  1. var y = ‘Hello’; // here the data type will be inferred as String  

In JavaScript, we can assign an integer value to a string variable because JavaScript is a dynamically typed language, meaning that JavaScript variable data types are automatically converted at runtime based on the requirements.

Example

<html>    
    <head>    
        <title></title>    
    </head>    
    <body>    
        <script type="text/javascript">    
            var a = 'Hello';    
            alert(a);    
            a = 123;    
            alert(a);    
        </script>    
    </body>    
</html>   

In the preceding example, we have a variable "a" inside the script tag that contains a string value.

We passed this variable to the alert function that displays the string value in an alert window.

After passing this "a" variable to the alert function, we again initialized it with an integer and passed it to the alert function again.

So, let's see what output we will get.

The first output.

Basics of JavaScript: Part 3

Click Ok.

Basics of JavaScript: Part 3

So, the data type is converted automatically at run time.

I hope you like this.

Thank you.


Similar Articles