Scribd
Upload
102 views

JavaScript Objects, Methods and Properties 2

JavaScript is used to manipulate HTML DOM objects by calling their methods and changing their properties. Methods are actions like alert() and write() that cause things to happen. Properties describe qualities like bgColor that can be dynamically changed. Event handlers like onclick attach JavaScript code to events. Common ways to select elements include getElementById() to access elements by their ID.

Uploaded by

actcool123
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
102 views

JavaScript Objects, Methods and Properties 2

JavaScript is used to manipulate HTML DOM objects by calling their methods and changing their properties. Methods are actions like alert() and write() that cause things to happen. Properties describe qualities like bgColor that can be dynamically changed. Event handlers like onclick attach JavaScript code to events. Common ways to select elements include getElementById() to access elements by their ID.

Uploaded by

actcool123
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

JavaScript Objects, Methods and Properties 2

JavaScript is used to manipulate or get information about objects in the HTML DOM. Objects in an HTML page have methods (actions, such as opening a new window or submitting a form) and properties (attributes or qualities, such as color and size). To illustrate objects, methods and properties, we will look at the code in JavaScriptBasics/Demos/javascript-2.html, a slightly modified version of JavaScriptBasics/Demos/javascript-1.html, which we looked at earlier, and at the code in JavaScriptBasics/Demos/script-2.js.

Code Sample:
JavaScriptBasics/Demos/javascript-2.html 1 2 3 <!DOCTYPE HTML> <html> 4 <head> 5 <meta charset="UTF-8"> 6 <title>JavaScript Page</title> 7 <link href="style.css" rel="stylesheet" type="text/css"> 8 <script type="text/javascript"> //Pop up an alert 9 window.alert("The page is loading"); 10</script> 11</head> 12<body> 13<p> <span onclick="document.bgColor = 'red';">Red</span> | 14 <span onclick="document.bgColor = 'white';">White</span> | 15 <span onclick="document.bgColor = 'green';">Green</span> | <span onclick="document.bgColor = 'blue';">Blue</span> 16 </p> 17 <script type="text/javascript" src="script-2.js"></script> 18</body> 19</html> 20 21

Code Sample:
JavaScriptBasics/Demos/script-2.js 1/* This script simply outputs 2 "Hello, there!" 3to the browser.

4*/ 5document.write("<p>Hello, there!</p>"); 6

Methods
Methods are the verbs of JavaScript. They cause things to happen.

window.alert()
HTML pages are read and processed from top to bottom. The JavaScript code in the initial script block at the top of JavaScriptBasics/Demos/javascript-2.html calls the alert() method of the window object. When the browser reads that line of code, it will pop up an alert box and will not continue processing the page until the user presses the OK button. Once the user presses the button, the alert box disappears and the rest of the page loads.

document.write()
The write() method of the document object is used to write out code to the page as it loads. In JavaScriptBasics/Demos/script-2.js, it simply writes out "Hello, there!"; however, it is more often used to write out dynamic data, such as the date and time on the user's machine.

Arguments
Methods can take zero or more arguments separated by commas.

Syntax
object.method(argument1, argument2);

The alert() and write() methods shown in the example above each take only one argument: the message to show or the HTML to write out to the browser.

Properties
Properties are the adjectives of JavaScript. They describe qualities of objects and, in some cases are writable (can be changed dynamically).

document.bgColor
The bgColor property of the document object is read-write. Looking back at JavaScriptBasics/Demos/javascript-2.html, the four span elements use the onclick event handler to catch click events. When the user clicks on a span, JavaScript is used to change the value of the bgColor property to a new color.

The bgColor property of document is deprecated, meaning it should not be used anymore. Instead, document.body.style.backgroundColor should be used to change the background color of the page. However, we do not get to the style property in this course, so we use bgColor for learning purposes. In practice, you can substitute document.body.style.backgroundColor for document.bgColor.

The Implicit window Object


The window object is always the implicit top-level object and therefore does not have to be included in references to objects. For example, window.document.write() can be shortened to document.write(). Likewise, window.alert() can be shortened to just alert(). Like this Javascript tutorial? Try our self-paced online Javascript courses, which includes videos and exercises in addition to the content in this Javascript tutorial. Not sure if you want to pay for that? Register for a free demo of the course.

Event Handlers
In JavaScriptBasics/Demos/javascript-2.html, we used the onclick event handler to call JavaScript code that changed the background color of the page. Event handlers are attributes that force an element to "listen" for a specific event to occur. Event handlers all begin with the letters "on". The table below lists the HTML event handlers with descriptions. HTML Event Handlers Event Handler
onblur onchange

Elements Supported
a, area, button, input, label, select, textarea input, select, textarea

Description the element lost the focus the element value was changed

onclick

All elements except applet, base, basefont, bdo, br, a pointer button font, frame, frameset, head, html, iframe, was clicked isindex, meta, param, script, style, title All elements except applet, base, basefont, bdo, br, a pointer button font, frame, frameset, head, html, iframe, was double clicked isindex, meta, param, script, style, title
a, area, button, input, label, select, textarea

ondblclick

onfocus

the element received the focus

onkeydown

All elements except applet, base, basefont, bdo, br, a key was pressed font, frame, frameset, head, html, iframe, down isindex, meta, param, script, style, title All elements except applet, base, basefont, bdo, br, a key was pressed font, frame, frameset, head, html, iframe, and released isindex, meta, param, script, style, title

onkeypress

HTML Event Handlers Event Handler


onkeyup

Elements Supported All elements except applet, base, basefont, bdo, br,
font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title frameset body

Description a key was released all the frames have been loaded the document has been loaded a pointer button was pressed down a pointer was moved within

onload onload

All elements except applet, base, basefont, bdo, br, onmousedown font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title All elements except applet, base, basefont, bdo, br, onmousemove font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title
onmouseout

All elements except applet, base, basefont, bdo, br, a pointer was font, frame, frameset, head, html, iframe, moved away isindex, meta, param, script, style, title a pointer was moved onto

All elements except applet, base, basefont, bdo, br, onmouseover font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title
onmouseup onreset onselect onsubmit onunload onunload

All elements except applet, base, basefont, bdo, br, a pointer button font, frame, frameset, head, html, iframe, was released isindex, meta, param, script, style, title
form input, textarea form frameset body

the form was reset some text was selected the form was submitted all the frames have been removed the document has been removed

For a full reference of HTML event handler attributes, see the list of attributes and the elements they apply to on the W3C web site.

The getElementById() Method


A very common way to reference HTML elements is by their ID using the getElementById() method of the document object as shown in the example below. getElementById()

Description Used to accesses/manipulate the first element with the specified id.

Syntax

Parameter

The "id" parameter is required. This refers to document.getElementById("id") the id of the HTML element you want to access/manipulate

Code Sample:
JavaScriptBasics/Demos/getElementByID.html 1 2 ---- C O D E O M I T T E D ---3 4 <p> <span onclick="document.getElementById('divRed').bgColor = 'red';"> 5 Red</span> | 6 <span onclick="document.getElementById('divOrange').bgColor = 7 'orange';"> 8 Orange</span> | <span onclick="document.getElementById('divGreen').bgColor = 'green';"> 9 Green</span> | 10 <span onclick="document.getElementById('divBlue').bgColor = 'blue';"> 11 Blue</span> 12</p> 13<table> <tr id="divRed"><td>Red</td></tr> 14 <tr id="divOrange"><td>Orange</td></tr> 15 <tr id="divGreen"><td>Green</td></tr> 16 <tr id="divBlue"><td>Blue</td></tr> 17</table> 18</body> 19</html> 20

You might also like