Introduction to JavaScript

Overview:

Every Programming languages has it’s own use case for example C is used for embedded devices and OS kernel ,C++ is used in developing softwares ,games and browsers. HTML is used for Web Page Development,CSS is used to define styles to your web pages.In the same way JavaScript is the one of the most popular programming language of web. JavaScript allow users to interact with the web pages.HTML,CSS and JavaScript is used to form the front-end design of the website.They are basically used to create a web application.

Basics:

Let’s begin with some of the basic and core concepts of javscript.

We always write the javascript code in html file inside<script></script> tag. Browser knows every action performed by user this are known as event.There are so many events such as click ,mouseover, mouseout, mousemove, keydown keyup etc. Each available event has an event handler, which is nothing but a code of javascript. JavaScript interacts with this browser through this events.

Example:

<p onclick=”alert(‘hi’)”>Hello</p> : In this example event used is click. Whenever user will click on the paragraph one dialog box comes with hi written on it.

alert():The function is used to display the text in a dialog box pop up on the screen.

Here is the ouput of above code.

Variables:

Like many other programming languages, JavaScript has variables. Variables are like the named containers you can store the data inside it and use it whenever required. Before using a variable first declare it with the var keyword as follows.

JavaScript Popup Boxes

JavaScript has three kinds of popup boxes : Alert box, confirm box, promt box.

• Alert Box:

An alert box is often used if you want to make sure information comes through to the user.

When an alert box pops up, the user will have to click "OK" to proceed. Otherwise it will hold the screen.

Syntax :

window.alert("sometext");

• Confirm Box

A confirm box is often used if you want the user to verify or accept something.

When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.

If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.

Syntax:
window.confirm("sometext");

• Prompt Box

When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.

If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.

Syntax
window.prompt("sometext");

Document Object Model (DOM)

DOM is a programming interface (API) for representing and interacting with HTML, XHTML and XML documents. It organize the elements of the document in tree structure (DOM tree) and in the DOM tree, all elements of the document are defined as objects (tree nodes) which have properties and methods.

DOM objects: window, document, history, location.

DOM methods: appendChild, createElement, reload, removeNode.

DOM properties: appName, appVersion, href.

Browser Object Model (BOM)

Unlike DOM, there is no standard defined for BOM, hence different browsers implement it in different ways. Typically, the collection of browser objects is collectively known as the Browser Object Model.

BOM main task is to manage browser windows and enable communication between the windows. Each HTML page which is loaded into a browser window becomes a Document object.

BOM objects : document, location, history, navigator,screen,frames.

Thanks for reading!!

BE 3rd year || Information Technology|| Dedicated|| Passionate||