Can we use Java Script to explain how to do programming..?? Here, I have tried to explain basics theories that are relevant to programming by using JavaScript. I think this will give a basic idea even to someone who doesn’t know anything about JavaScript.

Introduction

JavaScript is one of the most popular and widely used dynamic programming language which is used by several websites for scripting the webpages. It is an interpreted, full fledged programming language that enables dynamic interactivity on websites when applied to an HTML document. JavaScript allow to write small programs that run in the browser, and change HTML and CSS of the current document.

How does JavaScript relate to Java?

Java- A programming language used to write applications for computers and other devices.

JavaScript- A scripting language used to interact with content in a web browser and more recently in other places.

JavaScript has no connectivity with Java programming language.

Add inline JavaScript to a HTML

In HTML, JavaScript code is inserted between <script> and </script> tags. The script tag and its contents can be placed in the head of the HTML, inside body element. Where we place it depends on several factors including when we want the script to execute and whether render blocking matters. If we want the script to run before the contents of the page are rendered, add it to the head. If we want the script to run after the content of the page are rendered, add it to the body element. As a best practice, I think we should add our JS code at the end of the body section.

JavaScript in head

JavaScript in body

Add inline JavaScript in an external file

We can also place JavaScript code in external file. If we want to enter same code to the different web pages this external file is very useful. This file has extension as .js To use an external script, we should put the name of the script file in the src attribute of a <script> tag.

JavaScript Variables

Variables are containers that store values. We can declare variable by using var , let or const keyword. ES2015 introduced two important new JavaScript keywords as let and const.

JavaScript primitive data types

There are five primitive data types in JavaScript.

  1. String- represents sequence of characters
  2. Number- represents numeric values
  3. boolean- represents boolean values
  4. Undefine- represents undefined values
  5. Null- represent no values

JavaScript non-primitive data types

There are three non-primitive data types in JavaScript.

  1. Object- represents instance through which we can access members
  2. Array- represents group of similar values
  3. RegExp- represents regular expression

JavaScript Operators

Control Statements

if-else statement

The JavaScript if-else statement is used to execute the code whether condition is true or false.

Repetition statement

A repetition structure allows the programmer to specify that a script is to repeat an action while some condition remains true.

WHILE

FOR

DO..WHILE

The do..while repetition statement is similar to the while statement. In the while statement, the loop continuation test occurs at the beginning of the loop, before the body of the loop executes. The do..while statement tests the loop continuation condition after the loop body executes: therefore, the loop body always executes at least once.

Switch multiple selection statement

Some algorithm will contain a series of decisions in which a variable or expression is tested separately for each of the values it may assume, and different actions are taken for each value. JavaScript provides the switch multiple selection statement to handle such decision making.

Functions

JavaScript functions are used to perform operations. We can call JavaScript function many times to reuse the code.

Arrays

Arrays are data structures consisting of data items. JavaScript arrays are dynamic entities in that can change size after created.

Browser Objects Model

The Browser Object Model (BOM) is used to interact with the browser.

alert() → displays the alert box containing message with ok button.

confirm() → displays the confirm dialog box containing message with ok and cancel button.

prompt() → displays a dialog box to get input from the user.

open() → opens the new window.

close() → closes the current window.

setTimeout() → performs action after specified time like calling function, evaluating expressions etc.

EXAMPLE:

Document Object Model

JavaScript provides the document object for manipulating the document that is currently visible in the browser window. The document object has many useful properties and methods.

write(“string”) → writes the given string on the doucment.

writeln(“string”) → writes the given string on the doucment with newline character at the end.

getElementById() → returns the element having the given id value.

getElementsByName() → returns all the elements having the given name value.

getElementsByTagName() → returns all the elements having the given tag name.

getElementsByClassName() → returns all the elements having the given class name.

EXAMPLE:

JavaScript events

The change in the state of an object is call as an Event. we can use it to handle and verify user input.

Mouse events

We can also use keyboard events, form events, document events.

Now let’s see how to do a little project using this. We can create a TO DO LIST like as follow,

Try it your own way..

I hope this helps you to take the basics idea of JavaScript.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store