Post
Ask Question

Programming Basics in JavaScript: Day 2

Introduction

This article will teach you some basic concepts of JavaScript used in Web Applications, like variables, functions, etc. 

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

Implementing JavaScript

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

  1. Embedding Code in JavaScript

    It is nothing but using an external source file. If you are working on multiple web pages and you want to apply the same JavaScript on other pages also, then you can use the same JavaScript file on 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.

    The Example for embedding code,

    script.js

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

    embedding.html 

    <!DOCTYPE html>    
<html>    
   <title>JavaScript Demo</title>    
   <head>    
   <script src="path\script.js"></script>    
</head>    
<body>    
</body>    
</html>   

    Output

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

    Welcome, JavaScript World!

  2. Inline Code in JavaScript

    It is mainly 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 of the Inline Code.

    Inline.html 

    <!DOCTYPE html>    
<html>    
<title>JavaScript Demo</title>    
<head></head>    
<body>    
<script language="javascript">    
    document.write("Welcome, JavaScript World!");    
</script>    
</body>    
</html>   

    Output

    Welcome, JavaScript World!

JavaScript Programming Basics
 

Variables in JavaScript

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

  • It can be upper case or lower case letters.
  • Numbers from 0 to 9.
  • It cannot start with digits.
  • You can use "_" and "$".
  • Reserved words or keywords cannot be used.

Example

Var _test(correct)  
Var @jeet(wrong)  

Data Type in JavaScript

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 in JavaScript

It is nothing but group statements. You can give a name to a code block 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 in JavaScript

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

Syntax 

<!DOCTYPE html>    
<html>    
<title>JavaScript Demo</title>    
<head></head>    
<body>    
<script language="javascript">    
    function userdefined()    
    {    
        document.write("User-Defined Functions!");    
    }    
    userdefined();    
</script>    
</body>    
</html>

Output

User-Defined Functions!

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

User.html 

<!DOCTYPE html>    
<html>    
<title>JavaScript Demo</title>    
<head></head>    
<body>    
<script language="javascript">    
    function userdefined()    
    {    
        alert("User-Defined Functions!");    
    }    
</script>    
<input type="button" value="user defined function" OnClick="userdefined();">    
</body>    
</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 call the JavaScript function and execute the statements; here, it is alert("").

Summary

I hope you understand the basic concepts of JavaScript. If you have any suggestions regarding this article, then please get in touch with me.

Reference

  1. Comments and Objects in JavaScript: Day 3
  2. Scope and Events in JavaScript: Day 4
  3. Array in JavaScript: Day 5
  4. Page Re-direction in JavaScript: Day 6
  5. Errors and Exception Handling in JavaScript: Day 7
  6. Debugging in JavaScript: Day 8
  7. Hosting in JavaScript: Day 9


Similar Articles