Learn Javascript Objects

 

JavaScript Objects Tutorial for Beginners

 

JS Home


What is an Object?

Object: Provides some inbuilt properties(variables) and methods.

JavaScript provides several objects that are part of its core. Each object extends an Object.

These objects are classified into 2 groups.

1. DOM (Document Object Model) 

2. BOM(Browser Object Model).

In each group you will find a collection of objects.   

BOM Objects are arranged in a Hierarchical structure, Whereas you don't find any structural organization in DOM.
 

Javascript Core Objects 

  •  String
  •  Number
  •  Date
  •  Array
  •  Boolean
  •  Math

Javascript Browser Objects: 

  •  Document
  •  History
  •  Screen
  •  Navigator
  •  location

coding-zon-js-Objects-diagram

 1. Using Core Objects

 

coding-zon-js-core-objects



 

Let’s go through with each Object, with an example.

 

String

 
<html>
<head>
<script type="text/javascript"> 
 
var text = "SampleText";
 
document.write("<br>Length = " + text.length);
 
document.write(text.toUpperCase());
document.write(text.toLowerCase());

</script> 
</head>    
<body> 
</body>
</html>

output:


length = 10
SAMPLETEXT
sampletext

MoveTopMenu

 

Using Number Object in JS: A predefined Number Object in JavaScript used to work with numbers in JavaScript. To deal with numbers, there are many methods provided in a number object. Checkout the following example.

  

<html>
<head>
<script type="text/javascript"> 
 
var n =  53.4346;
var n1 = n.toPrecision(2);
var n2 = n1.valueOf();   // converts Number objects to primitive values. 

let n1 = 9.636;
 

 
document.write("<br> toFixed: "+ n.toFixed(2)); //53.44
document.write("<br> n2 value: "+ n2); //53
document.write("<br> toPrecision (): "+ n3.toPrecision() );
document.write("<br> toPrecision:(2) "+ n3.toPrecision(2) );
document.write("<br> toPrecision:(4) "+ n3.toPrecision(4));
document.write("<br> toPrecision:(6) "+ n3.toPrecision(6));


 
</script> 
</head>    
<body> 
</body>
</html>

 output

toFixed: 53.44
n2 value: 53
toPrecision (): 9.636
toPrecision:(2) 9.7
toPrecision:(4) 9.536
toPrecision:(6) 9.63600

MenuTop


Date Object in JS:


 

<html>
<head>
<script type="text/javascript">
 
today = new Date();
document.write(today);
 
//getting time values from date
document.write("<br>");
document.write("<br>Hours=" + today.getHours());
document.write("<br>Minutes=" + today.getMinutes());
document.write("<br>Seconds=" + today.getSeconds());


</script>  
</head>    
<body> 
</body>
</html>

Tue Nov 09 2021 13:49:23 GMT+0530 (India Standard Time)

Hours=13
Minutes=49
Seconds=23

 

GoTop

Comparing two Dates: Some times it necessary to comapare two dates. you can two dates in javascript just using simple comaprison operators like >,< etc.

<html>
<head>
<script type="text/javascript">
 
var today = new Date();
 
var birthDate = new Date(2010,0,14); 
  
if (birthDate > today)
{
alert("today is before "+ birthDate );
}
else
{
alert("today is after "+ birthDate );
}
</script>  
</head>    
<body> 
</body>
</html>

output:

 today is after Thu Jan 14 2010 00:00:00 GMT+0530 (India Standard Time)

Change date and year of birthDate and try ex: 2023,0,24

output

today is before Sat Jan 14 2023 00:00:00 GMT+0530 (India Standard Time)
 

JavaScript Array Object: 

What is an Array?
An array is a special variable, which can hold more than one value, at a time.
 

example
 

<html>
<head>
<script type="text/javascript"> 
var colors = new Array(); // creating empty array
colors [0] = "red"; // adding elements to an array using index.
colors [1] = "green";
colors [2] = "blue";
document.write("<br>");
document.write(colors[0]);
</script>  
</head>   
<body> 
</body>
</html> 
 
output
red 
 

JavaScript Math Object

The Math object allows you to perform mathematical tasks.

<html>
<head>
<script type="text/javascript">
  
var piVal = Math.PI; //predifind pi values
 
document.write("<br>");
document.write("<br> Math.sqrt = " + Math.sqrt(16)); // 4
document.write("<br> Math.round = " + Math.round(4.7)); // 5
document.write("<br> Math.random = " + Math.random()); // 0-1
 
var number = Math.floor(Math.random() * 11));
 
document.write("<br> One Random No between. 1-10 = " + number );
document.write("<br> Math.floor=" + Math.floor(4.7); // 4
 
</script>  
</head> 
 
<body> 
</body>
</html>

output


Math.sqrt = 4
Math.round = 5
Math.random = 0.23228919808602844
One Random No between. 1-10 = 2
Math.floor=4

 

MoveTop

JavaScript Boolean Object 

 
Boolean() function to find out if an expression (or a variable) is 
true: 
example:
 
<html>
<head>
<script type="text/javascript">

document.write( Boolean(10 > 9));
 
</script>  
</head>  
 <body> 
</body>
</html>
output

true


 

 

 MoveTop

2. Using BOM Objects

 


Window Object in JS

Displays Current Screen Size in pixels

<html>
<head>
<script type="text/javascript"> 

document.write("<br>Screen Width = " + window.screen.width);
document.write("<br> Screen Height = " + window.screen.height);
</script>
</head> 
 
<body> 
</body>
</html>
 
output
Screen Width = 1366
Screen Height = 768

 Top↑

The history object in JS


The history object allows user back/forward in browsers history.
 

example:

 
<html>
<head> 
<script language = JavaScript>
alert("Sorry, this page is under construction");
window.history.back();
</script>
</head> 
 
<body> 
</body>
</html>
 
output displayed in an alert box. When you click 'ok'. It moves you to  the
last window, which you opened previously.
Sorry, this page is under construction
 
 
window.history.forward();
window.history.go( -2 );


The minus two means moves back two pages.
To go forward, just remove the minus sign (-).

MoveTop

 

Javascript Navigator properties

Displays Browser info

 
<html>
<head> 
<script language= "JavaScript">
alert(navigator.appName);
//alert(navigator.appVersion); //browser version
//alert(navigator.platform ); //os name
</script>
</head> 
 
<body> 
</body>
</html>

output

AppName: Netscape
AppVersion: 5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.72
Safari/537.36
AppNappVersionme: 5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/28.0.1500.72 Safari/537.36

 

Goto Top

 

Javascript location properties


Displays current location(URL) info.


<html>
<head>
<script type="text/javascript">

 
document.write("<br>");
document.write("<br> Host " + location.host);
document.write("<br> Hostname " + location.hostname);
 
//Return the entire URL of the current page. 
document.write("<br> href " + location.href); 
document.write("<br> pathname " + location.pathname);
document.write("<br> port " + location.port);
document.write("<br> protocol " + location.protocol);
 
// query portion of url 
document.write("<br> search " + location.search);

</script>
</head> 
 
<body> 
</body>
</html>

 output

if you run the above program in server you will get the following information.

http://localhost/coding-zon/javascript/location.html?user=John


host                 localhost
hostname        localhost
href                 http://localhost/coding-zon/javascript/location.html?user=John

pathname         /coding-zon/javascript/location.html
port
protocol           http:
search              ?user=John

 MoveTop

JavaScript location method


Location having a method called…
reload() : Reloads a page.

example: 
 
<html>
<head>
<script type="text/javascript">
function reloadPage()
{
window.location.reload();
alert("Page reloaded");
}
</script>
</head> 
 
<body>
<input type="button" value="Reload page" onclick="reloadPage()" />
</body>
</html>

 output

Displays one button. When you click it, alert shows- 'page reloaded' message.

 

 

 

 

JS Events

 

 

 Move ↑

 

 

 

 

 

 

 

Comments

Post a Comment

Popular posts from this blog

Using javascript pass form variables to iframe src

Image
   Open PDF in Bootstrap Modal Window   This tutorial shows How to pass a JavaScript/jQuery variable to bootstrap modal view and sets it to iframe  src attribute. It passes value dynamically to src attribute of the iframe. When the user clicks a link, it opens the URL in a popup window. This  code shows the PDF in a Model without download option by hiding the toolbar.  To show PDF toolbar in modal, just add #toolbar=1   in the above script. index.php <!DOCTYPE html> <html lang= "en" > <head> <title>Bootstrap Model with PDF Example - coding-zon</title> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <link rel= "stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" > <script src= "https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.
Read more

Creating a new PDF by Merging PDF documents using TCPDF

Image
Merging two PDFs in PHP What is PDF? The Portable Document Format. PDF stands for "Portable Document Format". Essentially, the format is used when you need to save files that cannot be modified but still need to be easily shared and printed. PDF is one of the most commonly used file types around. PDFs generally contain shareable data, such as text or photo documents etc., and are accessible to anyone who has a computer or smartphone. Unlike a Word file, which requires Microsoft Word to view or edit, most browsers will open a PDF. How to merge PDFs? You can merge several documents into one. In PHP, you have a library called TCPDF which allows you to combine one or more PDF documents to one single document. In this article, we will create a new PDF by Merging PDF documents using TCPDF. Download the PDFMerger-tcpdf.zip here. Unzip it and copy it to the PHP server. Copy the PDF files into the same folder that you want to combine. Open the file: merge-pdf-example.php Provide
Read more

Import excel file into mysql in PHP

Image
  Upload Excel file and Import  it into MySQL in PHP  Create a table in some database with given code.   Download Library - extract it, rename the folder to library . Create index.php file with given code in a server. Create excelUpload.php with given code. Create db_config.php . Create one Excel file with some sample data as shown in the below image of Excel file. Create ' uploads ' folder in the same directory. Now start server, run the index.php. Upload a .xls file. If Everything is fine, Excel data inserted in the above created MySQL table - tbl_products . PHP Version:   5.5.11 Folder Structure      Query: CREATE TABLE IF NOT EXISTS `tbl_products` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT, `productname` varchar ( 100 ) DEFAULT NULL , `description` varchar ( 100 ) DEFAULT NULL , PRIMARY KEY (`id`) )     Top index.php <!DOCTYPE html> <html> <head> <title> coding-zon Demo - Upload Excel to MySQL in PHP </title> <lin
Read more