Scribd
Upload
101 views

Built-In Objects in Javascript

The document discusses 6 built-in JavaScript objects: Math, Number, Date, Boolean, String, and Window. It provides examples of using their properties and methods, such as Math.sqrt(), Number.toFixed(), Date.getTime(), Boolean.valueOf(), String.charAt(), and Window.alert(). Regular expressions and error handling with try/catch are also covered briefly.

Uploaded by

Jayaprasanna
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
101 views

Built-In Objects in Javascript

The document discusses 6 built-in JavaScript objects: Math, Number, Date, Boolean, String, and Window. It provides examples of using their properties and methods, such as Math.sqrt(), Number.toFixed(), Date.getTime(), Boolean.valueOf(), String.charAt(), and Window.alert(). Regular expressions and error handling with try/catch are also covered briefly.

Uploaded by

Jayaprasanna
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 39

Built-in Objects in Javascript

• Built-in objects are as follows:


1. Math Object
2. Number Object
3. Date Object
4. Boolean Object
5. String Objects
6. Window Object
• These objects are used for simple data
processing in the JavaScript.
1.Math Object

• Math object is a built-in static object.


• It is used for performing complex math
operations.
• For example…
document. write(math.min(4.5,7,8));
• The above statement will result in 4.5
Math Methods
<html>
<head>
<title>JavaScript Math Object Methods</title>
</head>
<body>
<h3> Square root of 100 is </h3>
<script type="text/javascript">

var num=100;
document.write("<h3> " +Math.sqrt(num)+"</h3>");
document.write("<h3> " +Math.ceil(num)+"</h3>");
document.write("<h3> " +Math.floor(num)+"</h3>");

</script>
</body>
</html>
2. Number Object

• JavaScript Number is a built-in wrapper object


which is used to work with numerical values.
• A Number object can be created using the
Number() constructor.
• If we use the Number() constructor with the
new keyword we can create the Number
object.
• For example
let num = new Number(SOME_NUMERIC_VALUE);
Number Object Methods
Example
<html>
<head>
<title>Using Number Object</title>
</head>
<body>
<script type="text/javaScript">
let num = new Number('18.907');
document.write(num.toExponential() +"<br/>");
document.write(num.toFixed() +"<br/>");
document.write(num.toPrecision(3) +"<br/>");
document.write(typeof num.toString() +"<br/>");
document.write(num.valueOf() +"<br/>");
</script>
</body>
</html>

Output:
1.8907e+1
19
18.9
string
18.907
3.Date Object
• Date is a data type.
• Date object manipulates date and time.
• Date() constructor takes no arguments.
• Date object allows you to get and set the year, month,
day, hour, minute, second and millisecond fields.
Syntax:
var variable_name = new Date();

Example:
var current_date = new Date();
Date Object Methods
Methods Description
Date() Returns current date and time.
getDate() Returns the day of the month.
getDay() Returns the day of the week.
getFullYear() Returns the year.
getHours() Returns the hour.
getMinutes() Returns the minutes.
getSeconds() Returns the seconds.
getMilliseconds() Returns the milliseconds.

getTime() Returns the number of milliseconds since


January 1, 1970 at 12:00 AM.
Returns the timezone offset in minutes
getTimezoneOffset() for the current locale.
getMonth() Returns the month.
setDate() Sets the day of the month.
setFullYear() Sets the full year.
setHours() Sets the hours.
setMinutes() Sets the minutes.
setSeconds() Sets the seconds.
setMilliseconds() Sets the milliseconds.
Date Object Methods
Sets the number of
setTime() milliseconds since January 1,
1970 at 12:00 AM.
setMonth() Sets the month.
Returns the date portion of
toDateString() the Date as a human-readable
string.
Returns the Date object as a
toLocaleString()
string.
Returns the Date object as a
toGMTString()
string in GMT timezone.
Returns the primitive value of
valueOf()
a Date object.
<html>
<body>
<center>
<h2>Date Methods</h2>
<script type="text/javascript">
var d = new Date();
document.write("<b>Locale String:</b> " + d.toLocaleString()+"<br>");
document.write("<b>Hours:</b> " + d.getHours()+"<br>");
document.write("<b>FullYear:</b> " + d.getFullYear()+"<br>");
document.write("<b>Minutes:</b> " + d.getMinutes()+"<br>");
</script>
</center>
</body>
</html>

Output:
Date Methods
Locale String: 24/4/2023, 8:57:07 pm
Hours: 20
FullYear: 2023
Minutes: 57
4.Boolean Object
• The Boolean object represents two values,
either "true" or "false".
• If value parameter is omitted or is 0, -0, null,
false, NaN, undefined, or the empty string (""),
the object has an initial value of false.
Syntax
• Use the following syntax to create a boolean
object.
var val = new Boolean(value);
Boolean Object Methods
<html>
<head>
<title>JavaScript valueOf() Method</title>
</head>
<body>
<script type = "text/javascript">
var flag = new Boolean(false);
document.write( "flag.valueOf is : " + flag.valueOf() );
</script>
</body>
</html>

Output
flag.valueOf is : false
5.String Object
• String objects are used to work with text.
• It works with a series of characters.
• Syntax:
var variable_name = new String(string);

Example:
var s = new String(string);
String Object
Methods
Methods Description
charAt() It returns the character at the specified index.
It returns the ASCII code of the character at the specified
charCodeAt() position.
concat() It combines the text of two strings and returns a new string.
indexOf() It returns the index within the calling String object.
match() It is used to match a regular expression against a string.
replace() It is used to replace the matched substring with a new substring.
search() It executes the search for a match between a regular expression.
slice() It extracts a session of a string and returns a new string.

split() It splits a string object into an array of strings by separating the


string into the substrings.
toLowerCase() It returns the calling string value converted lower case.
toUpperCase() Returns the calling string value converted to uppercase.
<html>
<body>
<center>
<script type="text/javascript">
var str = "CareerRide Info";
var s = str.split();
document.write("<b>Char At:</b> " + str.charAt(1)+"<br>");
document.write("<b>CharCode At:</b> " + str.charCodeAt(2)+"<br>");
document.write("<b>Index of:</b> " + str.indexOf("ide")+"<br>");
document.write("<b>Lower Case:</b> " + str.toLowerCase()+"<br>");
document.write("<b>Upper Case:</b> " + str.toUpperCase()+"<br>");
</script>
<center>
</body>
</html>
6. Window Object

Window Object
• The window object represents a window in
browser. An object of window is created
automatically by the browser.
• Window is the object of browser, it is not the
object of javascript. The javascript objects are
string, array, date etc.
Window Object Methods

Method Description
displays the alert box containing message with
alert()
ok button.
displays the confirm dialog box containing
confirm()
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.
performs action after specified time like calling
setTimeout()
function, evaluating expressions etc.
<html>
<head >
<title> window object </title>
</head >
<body>
<script type="text/javascript">
function msg(){
alert("Hello Alert Box");
}
</script>
<input type="button" value="click" onclick="msg()"/>
</body>
</html>
• https://www.javatpoint.com/window-object
Regular Expression
RegExp Object
• A regular expression is a pattern of characters.
• The pattern is used to do pattern-matching
"search-and-replace" functions on text.
• In JavaScript, a RegExp Object is a pattern
with Properties and Methods.
Syntax
/pattern/modifier(s);
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Do a case-insensitive search for "w3schools" in a string:</p>
<p id="demo"></p>
<script>
let text = "Visit W3Schools";
let pattern = /w3schools/i;
let result = text.match(pattern);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
Example explained:
w3schools -The pattern to search for
/w3schools/ -A regular expression
/w3schools/i -A case-insensitive regular
expression
JavaScript Errors
(Exceptions)
Throw, and Try...Catch...Finally
• The try statement defines a code block to run
(to try).
• The catch statement defines a code block to
handle any error.
• The finally statement defines a code block to
run regardless of the result.
• The throw statement defines a custom error.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Error Handling</h2>
<p>How to use <b>catch</b> to display an error.</p>
<p id="demo"></p>
<script>
try {
addlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
</body>
</html>
JavaScript try and catch
• The try statement allows you to define a block of code to be
tested for errors while it is being executed.
• The catch statement allows you to define a block of code to be
executed, if an error occurs in the try block.
• The JavaScript statements try and catch come in pairs:
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
The throw Statement
• The throw statement allows you to create a
custom error.
• Technically you can throw an exception (throw
an error).
• The exception can be a JavaScript String, a
Number, a Boolean or an Object:
throw "Too big"; //throw a text
throw 500; // throw a number
JavaScript Events
• The change in the state of an object is known as an
Event.
• In html, there are various events which represents that
some activity is performed by the user or by the
browser.
• When javascript code is included in HTML, js react over
these events and allow the execution. This process of
reacting over the events is called Event Handling. Thus,
js handles the HTML events via Event Handlers.
• For example, when a user clicks over the browser, add
js code, which will execute the task to be performed on
the event.
Mouse events

Event Performed Event Handler Description

click onclick When mouse click on


an element
When the cursor of
mouseover onmouseover the mouse comes over
the element
When the cursor of
mouseout onmouseout the mouse leaves an
element
When the mouse
mousedown onmousedown button is pressed over
the element
When the mouse
mouseup onmouseup button is released over
the element

When the mouse


mousemove onmousemove movement takes place.
Keyboard events

Event Performed Event Handler Description

When the user


onkeydown &
Keydown & Keyup press and then
onkeyup
release the key
Form events
Event Performed Event Handler Description
When the user
focus onfocus focuses on an
element
When the user
submit onsubmit
submits the form
When the focus is
blur onblur away from a form
element
When the user
modifies or
change onchange
changes the value
of a form element
Window/Document events

Event Performed Event Handler Description

When the browser


load onload finishes the loading of
the page

When the visitor


leaves the current
unload onunload
webpage, the
browser unloads it

When the visitor


resize onresize resizes the window of
the browser
<html>
<head>
<h1> Javascript Events </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">
function mouseoverevent()
{
alert("This is JavaTpoint");
}
</script>
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>
</body>
</html>
Exercise-1
<button-------------- ="alert('Hello')">Click
me.</button>

Answer: onclick
Exercise-2
<button----------- =“---------------">Click
me.</button>

Answer: onclick
myFunction()
Exercise-3
<div ------------="this.style.backgroundColor='red'">myDIV.</div>

Answer:

onmouseover
Validation
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<form action="/action_page.php" method="post">


<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>

<p>If you click submit, without filling out the text field,
your browser will display an error message.</p>

</body>
</html>

You might also like