Scribd
Upload
4 views30 pages

Web Tech Unit3

The <object> tag in HTML is used to embed external resources like web pages, images, and media players, although for specific types of content, other tags like <img>, <iframe>, <video>, and <audio> are recommended. The document also discusses various HTML event attributes that can trigger actions, including global, form, keyboard, mouse, drag, clipboard, and media events. Additionally, it covers the Window and Navigator objects, detailing their properties and methods for interacting with the browser and the document structure.

Uploaded by

kowsalyaproj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views30 pages

Web Tech Unit3

The <object> tag in HTML is used to embed external resources like web pages, images, and media players, although for specific types of content, other tags like <img>, <iframe>, <video>, and <audio> are recommended. The document also discusses various HTML event attributes that can trigger actions, including global, form, keyboard, mouse, drag, clipboard, and media events. Additionally, it covers the Window and Navigator objects, detailing their properties and methods for interacting with the browser and the document structure.

Uploaded by

kowsalyaproj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

Introduction-Object in HTML

Definition and Usage

The <object> tag defines a container for an external resource.

The external resource can be a web page, a picture, a media player, or a plug-in application.

To embed a picture, it is better to use the <img> tag.

To embed HTML, it is better to use the <iframe> tag.

To embed video or audio, it is better to use the <video> and <audio> tags.

Plug-ins

The <object> tag was originally designed to embed browser Plug-ins.

Plug-ins are computer programs that extend the standard functionality of the browser.

Plug-ins have been used for many different purposes:

 Run Java applets


 Run ActiveX controls
 Display Flash movies
 Display maps
 Scan for viruses
 Verify a bank id
 Attributes

Attribute Value Description

data URL Specifies the URL of the resource to be used by the object

form form_id Specifies which form the object belongs to


height pixels Specifies the height of the object

name name Specifies a name for the object

type media_type Specifies the media type of data specified in the data attribute

width pixels Specifies the width of the object

HTML Event
Global Event Attributes

HTML has the ability to let events trigger actions in a browser, like starting a JavaScript when a
user clicks on an element.

To learn more about programming events, please visit our JavaScript tutorial.

Below are the global event attributes that can be added to HTML elements to define event
actions.

Window Event Attributes

Events triggered for the window object (applies to the <body> tag):

Attribute Value Description

onafterprint script Script to be run after the document is printed

onbeforeprint script Script to be run before the document is printed


onbeforeunload script Script to be run when the document is about to be unloaded

onerror script Script to be run when an error occurs

onhashchange script Script to be run when there has been changes to the anchor part of the a
URL

onload script Fires after the page is finished loading

onmessage script Script to be run when the message is triggered

onoffline script Script to be run when the browser starts to work offline

ononline script Script to be run when the browser starts to work online

onpagehide script Script to be run when a user navigates away from a page

Form Events

Events triggered by actions inside a HTML form (applies to almost all HTML elements, but is
most used in form elements):
Attribute Value Description

onblur script Fires the moment that the element loses focus

onchange script Fires the moment when the value of the element is changed

onfocus script Fires the moment when the element gets focus

oninput script Script to be run when an element gets user input

oninvalid script Script to be run when an element is invalid

onreset script Fires when the Reset button in a form is clicked

onsearch script Fires when the user writes something in a search field (for
<input="search">)

onselect script Fires after some text has been selected in an element

onsubmit script Fires when a form is submitted


Keyboard Events

Attribute Value Description

onkeydown script Fires when a user is pressing a key

onkeypress script Fires when a user presses a key

onkeyup script Fires when a user releases a key

Mouse Events

Attribute Value Description

onclick script Fires on a mouse click on the element

ondblclick script Fires on a mouse double-click on the element

onmousedown script Fires when a mouse button is pressed down on an element

onmousemove script Fires when the mouse pointer is moving while it is over an element

onmouseout script Fires when the mouse pointer moves out of an element
onmouseover script Fires when the mouse pointer moves over an element

onmouseup script Fires when a mouse button is released over an element

onmousewheel script Deprecated. Use the onwheel attribute instead

onwheel script Fires when the mouse wheel rolls up or down over an element

Drag Events

Attribute Value Description

ondrag script Script to be run when an element is dragged

ondragend script Script to be run at the end of a drag operation

ondragenter script Script to be run when an element has been dragged to a valid drop target

ondragleave script Script to be run when an element leaves a valid drop target

ondragover script Script to be run when an element is being dragged over a valid drop target
ondragstart script Script to be run at the start of a drag operation

ondrop script Script to be run when dragged element is being dropped

onscroll script Script to be run when an element's scrollbar is being scrolled

Clipboard Events

Attribute Value Description

oncopy script Fires when the user copies the content of an element

oncut script Fires when the user cuts the content of an element

onpaste script Fires when the user pastes some content in an element

Media Events

Events triggered by medias like videos, images and audio (applies to all HTML elements, but is
most common in media elements, like <audio>, <embed>, <img>, <object>, and <video>).

Attribute Value Description

onabort script Script to be run on abort


oncanplay script Script to be run when a file is ready to start playing (when it has
buffered enough to begin)

oncanplaythrough script Script to be run when a file can be played all the way to the end
without pausing for buffering

onerror script Script to be run when an error occurs when the file is being
loaded

onloadeddata script Script to be run when media data is loaded

onloadedmetadata script Script to be run when meta data (like dimensions and duration)
are loaded

onloadstart script Script to be run just as the file begins to load before anything is
actually loaded

onpause script Script to be run when the media is paused either by the user or
programmatically

onplay script Script to be run when the media is ready to start playing

onplaying script Script to be run when the media actually has started playing

onprogress script Script to be run when the browser is in the process of getting the
media data

onratechange script Script to be run each time the playback rate changes (like when a
user switches to a slow motion or fast forward mode)

onseeked script Script to be run when the seeking attribute is set to false
indicating that seeking has ended

onseeking script Script to be run when the seeking attribute is set to true
indicating that seeking is active
Misc Events
Attribute Value Description

ontoggle script Fires when the user opens or closes the <details> element
Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</head>

<body onload="myFunction()">
<h1>Hello World!</h1>
</body>

</html>
Output
Hello World!

Window Object

The window object represents an open window in a browser.

If a document contain frames (<iframe> tags), the browser creates one window object for the
HTML document, and one additional window object for each frame.
Window Object Properties
Property Description

closed Returns a boolean true if a window is closed.

console Returns the Console Object for the window.


See also The Console Object.

defaultStatus Deprecated.

document Returns the Document object for the window.


See also The Document Object.

frameElement Returns the frame in which the window runs.

frames Returns all window objects running in the window.


history Returns the History object for the window.
See also The History Object.

innerHeight Returns the height of the window's content area (viewport) including scrollbars

innerWidth Returns the width of a window's content area (viewport) including scrollbars

length Returns the number of <iframe> elements in the current window

localStorage Allows to save key/value pairs in a web browser. Stores the data with no
expiration date

location Returns the Location object for the window.


See also the The Location Object.

name Sets or returns the name of a window

navigator Returns the Navigator object for the window.


See also The Navigator object.

opener Returns a reference to the window that created the window

outerHeight Returns the height of the browser window, including toolbars/scrollbars

outerWidth Returns the width of the browser window, including toolbars/scrollbars

pageXOffset Returns the pixels the current document has been scrolled (horizontally) from
the upper left corner of the window

pageYOffset Returns the pixels the current document has been scrolled (vertically) from the
upper left corner of the window

parent Returns the parent window of the current window

screen Returns the Screen object for the window


See also The Screen object

screenLeft Returns the horizontal coordinate of the window relative to the screen
screenTop Returns the vertical coordinate of the window relative to the screen

screenX Returns the horizontal coordinate of the window relative to the screen

screenY Returns the vertical coordinate of the window relative to the screen

sessionStorage Allows to save key/value pairs in a web browser. Stores the data for one
session

scrollX An alias of pageXOffset

scrollY An alias of pageYOffset

self Returns the current window

status Deprecated. Avoid using it.

top Returns the topmost browser window

Window Object Methods

Method Description

addEventListener() Attaches an event handler to the window

alert() Displays an alert box with a message and an OK button

atob() Decodes a base-64 encoded string


blur() Removes focus from the current window

btoa() Encodes a string in base-64

clearInterval() Clears a timer set with setInterval()

clearTimeout() Clears a timer set with setTimeout()

close() Closes the current window

confirm() Displays a dialog box with a message and an OK and a Cancel button

focus() Sets focus to the current window

getComputedStyle() Gets the current computed CSS styles applied to an element

getSelection() Returns a Selection object representing the range of text selected by the
user

matchMedia() Returns a MediaQueryList object representing the specified CSS media


query string
moveBy() Moves a window relative to its current position

moveTo() Moves a window to the specified position

open() Opens a new browser window

print() Prints the content of the current window

prompt() Displays a dialog box that prompts the visitor for input

removeEventListener() Removes an event handler from the window

requestAnimationFrame() Requests the browser to call a function to update an animation before


the next repaint

resizeBy() Resizes the window by the specified pixels

resizeTo() Resizes the window to the specified width and height

scroll() Deprecated. This method has been replaced by the scrollTo() method.
scrollBy() Scrolls the document by the specified number of pixels

scrollTo() Scrolls the document to the specified coordinates

setInterval() Calls a function or evaluates an expression at specified intervals (in


milliseconds)

setTimeout() Calls a function or evaluates an expression after a specified number of


milliseconds

stop() Stops the window from loading

Example
<!DOCTYPE html>
<html>
<body>

<h1>The Window Object</h1>


<h2>The frames Property</h2>

<p>Number of frames in this window:</p>

<p id="demo"></p>

<iframe style="width:100%;height:100px"></iframe>
<iframe style="width:100%;height:100px"></iframe>
<iframe style="width:100%;height:100px"></iframe>

<script>
let length = window.length;
document.getElementById("demo").innerHTML = length;
</script>

</body>
</html>

Output
Property / Method Description

activeElement Returns the currently focused element in the document

addEventListener() Attaches an event handler to the document

adoptNode() Adopts a node from another document

anchors Deprecated

applets Deprecated

baseURI Returns the absolute base URI of a document

body Sets or returns the document's body (the <body> element)

charset Deprecated

characterSet Returns the character encoding for the document

close() Closes the output stream previously opened with document.open()


cookie Returns all name/value pairs of cookies in the document

HTML DOM

The HTML DOM is an Object Model for HTML. It defines:

 HTML elements as objects


 Properties for all HTML elements
 Methods for all HTML elements
 Events for all HTML elements

The HTML DOM (Document Object Model)

When a web page is loaded, the browser creates a Document Object Model of the page.

The HTML DOM model is constructed as a tree of Objects:

Document Object Properties and Methods

The following properties and methods can be used on HTML documents:

Finding HTML Elements

When you want to access HTML elements with JavaScript, you have to find the elements first.

There are a couple of ways to do this:

 Finding HTML elements by id


 Finding HTML elements by tag name
 Finding HTML elements by class name
 Finding HTML elements by CSS selectors
 Finding HTML elements by HTML object collections

Finding HTML Element by Id

The easiest way to find an HTML element in the DOM, is by using the element id.

This example finds the element with id="intro":

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p id="intro">Finding HTML Elements by Id</p>


<p>This example demonstrates the <b>getElementsById</b> method.</p>

<p id="demo"></p>

<script>
const element = document.getElementById("intro");

document.getElementById("demo").innerHTML =
"The text from the intro paragraph is: " + element.innerHTML;

</script>

</body>
</html>
Output

JavaScript HTML DOM

Finding HTML Elements by Id

This example demonstrates the getElementsById method.

The text from the intro paragraph is: Finding HTML Elements by Id

Example
<!DOCTYPE html>
<html>
<body onclick="myFunction()">

<h1>The Document Object</h1>


<h2>The activeElement Property</h2>

<input type="text" value="An input field">


<button>A Button</button>

<p>Click anywhere in the document to display the active element:</p>

<p id="demo"></p>

<script>
function myFunction() {
const element = document.activeElement.tagName;
document.getElementById("demo").innerHTML = element;
}
</script>

</body>
</html>
Output

The Document Object

The activeElement Property

An input field
A Button

Click anywhere in the document to display the active element:

BUTTON

The Window Navigator Object

The navigator object contains information about the browser.

The navigator object is a property of the window object.


The navigator object is accessed with:

window.navigator or just navigator:

Navigator Object Properties

Property Description

appCodeName Returns browser code name

appName Returns browser name

appVersion Returns browser version

cookieEnabled Returns true if browser cookies are enabled

geolocation Returns a geolocation object for the user's location

language Returns browser language

onLine Returns true if the browser is online

platform Returns browser platform


product Returns browser engine name

userAgent Returns browser user-agent header

Navigator Object Methods

Method Description

javaEnabled() Returns true if the browser has Java enabled

taintEnabled() Removed in JavaScript version 1.2 (1999).

Example
<!DOCTYPE html>
<html>
<body>

<h1>The Window Navigator Object</h1>


<h2>The cookieEnabled Property</h2>

<p id="demo"></p>

<script>
let cookies = navigator.cookieEnabled;
document.getElementById("demo").innerHTML = "Cookies enabled: " + cookies;
</script>

</body>
</html>
Output

The Window Navigator Object

The cookieEnabled Property


Cookies enabled: true

Browser Object Model


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

The default object of browser is window means you can call all the functions of window by
specifying window or directly. For example:
1. window.alert("hello javatpoint");
You can use a lot of properties (other objects) defined underneath the window object like
document, history, screen, navigator, location, innerHeight, innerWidth,

Form Object

The Form object represents an HTML <form> element.

Access a Form Object

You can access a <form> element by using getElementById():

Create a Form Object

You can create a <form> element by using the document.createElement() method:

Form Object Collections

Collection Description

elements Returns a collection of all elements in a form

Form Object Properties


Property Description

acceptCharset Sets or returns the value of the accept-charset attribute in a form


action Sets or returns the value of the action attribute in a form

autocomplete Sets or returns the value of the autocomplete attribute in a form

encoding Alias of enctype

enctype Sets or returns the value of the enctype attribute in a form

length Returns the number of elements in a form

Form Object Methods


Method Description

reset() Resets a form

submit() Submits a form

Example
<!DOCTYPE html>
<html>
<body>
<p>Enter some text in the fields below, then press the "Submit form" button to submit the
form.</p>
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
</body>
</html>
Output

Screen Object

the screen object contains information about the visitor's screen.


Screen Object Properties

Property Description

availHeight Returns the height of the screen (excluding the Windows Taskbar)

availWidth Returns the width of the screen (excluding the Windows Taskbar)

colorDepth Returns the bit depth of the color palette for displaying images

height Returns the total height of the screen

pixelDepth Returns the color resolution (in bits per pixel) of the screen
width Returns the total width of the screen

Example
<!DOCTYPE html>
<html>
<body>

<h1>The Window Screen Object</h1>


<h2>The width Property</h2>

<p id="demo"></p>

<script>
let width = screen.width;
document.getElementById("demo").innerHTML = width + "px";
</script>

</body>
</html>
Output

The Window Screen Object

The width Property


1366px

Build in Object
JavaScript provides various built-in objects. Each object contains properties and methods. Some
of the built-in objects in Javascript are:

 Array
 Date
 Math
 String
 Number
Array object

The properties available on Array object are:

Property Description

Length Returns the number of elements in the array

Constructor Returns the function that created the array object

Prototype Allows us to add properties and methods to an array object

Method Description

reverse() Reverses the array elements

concat() Joins two or more arrays

sort() Sort the elements of an array

push() Appends one or more elements at the end of an array

pop() Removes and returns the last element

shift() Removes and returns the first element

unshift() Adds one or more elements at the beginning of an array


Math object

The Math object provides a number of properties and methods to work with Number values.
Among the methods there are sin and cos for trigonometric functions, floor and round for
truncating and rounding the given numbers and max for returning the maximum of given
numbers.

Properties available on Math object are:

Property Description

PI The value of Pi

E The base of natural logarithm e


LN2 Natural logarithm of 2

LN10 Natural logarithm of 10

LOG2E Base 2 logarithm of e

LOG10E Base 10 logarithm of e

SQRT2 Square root of 2

SQRT1_2 Square root of 1/2

Methods available on Math object are:

Method Description

max(a,b) Returns largest of a and b

min(a,b) Returns least of a and b

round(a) Returns nearest integer

ceil(a) Rounds up. Returns the smallest integer greater than or equal to a

floor(a) Rounds down. Returns the largest integer smaller than or equal to
a
Date object

At times you there will be a need to access the current date and time and also past and future
date and times. JavaScript provides support for working with dates and time through
the Date object.

Date objected is created using the new operator and one of the Date’s constructors. Current date
and time can be retrieved as shown below:
var today = new Date( );
Methods available on Date object are:

Method Description
Date() Creates a Date object with the current date and time of the
browser’s PC
Date(“Month,dd, yyyy This creates a Date object with the specified string
hh:mm:ss”)
Date(“Month dd, yyyy”) This creates a Date object with the specified string
Date(yy,mm,dd,hh,mm,ss) This creates a Date object with the specified string
Date(yy,mm,dd) This creates a Date object with the specified date
String object

A string is a collection of characters. Most of the times in scripts, there is a need to work with
strings. JavaScript provides various properties and methods to work with String objects.
Whenever a String property or method is used on a string value, it will be coerced to a String
object.

One most frequently used property on String objects is length. The length property gives the
number of characters in the given string. Consider the following example:
var str = “Hello World”;

var len = str.length;


Methods available on String objects are:

Method Description
anchor() Create a HTML anchor element around the specified string
big() Create a HTML big element around the specified string
charAt(index) Returns the character at specified index
charCodeAt(index) Returns the unicode value of the character at specified index
Number Object

The number object contains a collection of useful properties and methods to work with Numbers.
The properties include: MAX_VALUE (represents largest number that is available),
MIN_VALUE (represents smallest number that is available), NaN (represents Not a Number),
POSITIVE_INFINITY (special value to represent infinity), NEGATIVE_INFINITY (special
value to represent negative infinity) and PI (represents value of π.

var cost = 250;

var output = cost.toString( );


User-defined Objects
User-defined objects in JavaScript are custom objects created by the programmer for specific
programming tasks. They are associated with properties and methods.
For example, a person is an object. The properties of a person are name, height, weight, age, etc.
All persons have these properties, but values of those person’s properties may differ from person
to person.
The actions (called functions) of a person include eat(), sleep(), play(), work(), etc.

In JavaScript, there are three ways to create user-defined objects to manage enormous tasks and
data sets within an application. They are:
 By object literal
 By creating an instance of Object directly (using new keyword)
 Using object constructor
Object literal is the simplest and the most popular way to create a user-defined object in
JavaScript. We can create a user-defined object with several properties by using object literal, as
follows:
var person = {

// Declaration of properties of an object person.

firstName: "John",

lastName: "Herry",

age: 25,

skinColor: "White"

};

In the above code, we have created an object called person, which holds four properties:
firstName, lastName, age, and skinColor. The values contained in each property are “John”,
“Herry”, 25, and “White” respectively.

Example

<html>

<head>

<title>User defined Object Example</title>

<script>

var person = {
firstName:"John",

lastName:"Herry",

age: 25,

skinColor:"White"

};

// Accessing properties of person object.

document.write("First name: " +person.firstName+ "<br>");

document.write("Last name: " +person.lastName+ "<br>");

document.write("Age: " +person.age+ "<br>");

document.write("Skin color: " +person.skinColor);

</script>

</head>

<body>

</body>

</html>

Output:

First name: John

Last name: Herry

Age: 25

Skin color: White

You might also like