Programming Basics in JavaScript: Day 2

Jeetendra Gund
Nov 26, 2014
4.4k
0
1
Article

Introduction

With this article you wil learn some basic concepts of JavaScript used in Web Applications, like variables, functions and so on.

Before reading this article, I highly recommend reading the previous part:

Introduction to JavaScript: Day 1

Implementing JavaScript

There are two ways to use JavaScript in your web pages as follows:

Embedding Code

It is nothing but using an external source file. If you are working multiple web pages and you want apply the same JavaScript in other pages also then you can use the same JavaScript file in multiple web pages. For that use the “src” attribute of the </script> tag. Just provide the “.js” file to this attribute. Using this you can reduce the code in HTML web pages. It will help you to hide JavaScript code and share the JavaScript code across multiple HTML documents. It is called as follows.

Example for embedding code:

script.js

document.write("Welcome, JavaScript World!");

embedding.html
1. <!DOCTYPE html>
2. <html>
3. <title>JavaScript Demo</title>
4. <head>
5. <script src="path\script.js"></script>
6. </head>
7. <body>
8. </body>
9. </html>
Output

When you run this file it calls the external JavaScript file that will write in the page as follows:

Welcome, JavaScript World!
Inline Code

It is mostly used when code functionality is small. We place our code between <script>…..</script> tags. And use this tag in our HTML page as follows:

The following is an example for Inline Code.

Inline.html
1. <!DOCTYPE html>
2. <html>
3. <title>JavaScript Demo</title>
4. <head></head>
5. <body>
6. <script language="javascript">
7. document.write("Welcome, JavaScript World!");
8. </script>
9. </body>
10. </html>
Output

Welcome, JavaScript World!

Programming Basics

Variables

In this JavaScript coding we use variables to store values. The variable can store several types of data. It is declared using the keyword “var”. A variable can store any JavaScript data type like:
- String data
- Numbers
- Boolean values(true/false)
There are the following rules and conventions to declare a variable names:
- It can be upper case or lower case letters.
- Numbers from 0 to 9.
- It cannot starts with digits.
- You can used “_” and “$”.
- Reserved words or keywords cannot be used.
- Example:
  1. Var _test(correct)
  2. Var @jeet(wrong)
Data Type

There are various types used in JavaScript like the following:
- Primitive Data Type
  
  - Number (integer and floating-point numbers)
  - Boolean (logical values “true” and “false”)
  - String (a sequence of alphanumeric characters)
- Composite Data Type (or Complex data types)
  
  - Object (a collection of data)
  - Array (a sequence of values)
- Special Data Type
  
  - Null (an initial value is assigned)
  - Undefined (the variable is created but not yet assigned a value)
Functions

It is nothing but group statements. You can give a name to a block of code and use it from anywhere in your program. JavaScript has built-in functions for predefine operations like the following:
- alert(“message”).
- prompt(“message”).
- Confirm(“message”).
For this function refer to my article Dialog Box in JavaScript.
User-Defined functions

You can create user defined functions and call it when you need it. It is defined with the "function" keyword followed by the function name and parameters passed.

Syntax:
1. <!DOCTYPE html>
2. <html>
3. <title>JavaScript Demo</title>
4. <head></head>
5. <body>
6. <script language="javascript">
7. function userdefined()
8. {
9. document.write("User-Defined Functions!");
10. }
11. userdefined();
12. </script>
13. </body>
14. </html>
Output:

User-Defined Functions!

Another way to call the function in the events is like “OnClick” as follows:

User.html
1. <!DOCTYPE html>
2. <html>
3. <title>JavaScript Demo</title>
4. <head></head>
5. <body>
6. <script language="javascript">
7. function userdefined()
8. {
9. alert("User-Defined Functions!");
10. }
11. </script>
12. <input type="button" value="user defined function" OnClick="userdefined();">
13. </body>
14. </html>
Output

You can run this code. There is a button on the page “user defined function” and when you click on that it will pop up a dialog box like the following:

When you click the button it will then call the JavaScript function and execute the statements; here it is alert(“”).