Basics of JavaScript: Part 3

Harpreet Singh
Apr 30, 2015
5.9k
0
0
Article

Introduction

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

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, 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 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.

Example 2

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

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

The output is blank
.
Press f12 and you will see an Uncaught ReferenceError.

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 is applicable to the variables practically.

To create a variable we use var keyword.

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

In the preceding html, we have script tag 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.

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

So, variables in JavaScript is 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.

//this is a single line comment

Multi-Line

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

/*this is multi line
comment.
*/

Data Types in JavaScript

String

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

‘This is a string’
“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 type of variable. Based on the value assigned the type of the variable is inferred.

var x = true; // here the data type will be inferred as Boolean

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 then again initialized this variable with an integer and passed it to the alert function again.

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

The first output.