Sie sind auf Seite 1von 32

1.

Ans:

JavaScript Functions

A JavaScript function is a block of code designed to perform a


particular task.

A JavaScript function is executed when "something" invokes it (calls


it).

JavaScript Function Syntax

A JavaScript function is defined with the function keyword,


followed by a name, followed by parentheses ().

Function names can contain letters, digits, underscores, and dollar


signs (same rules as variables).

The parentheses may include parameter names separated by


commas:
(parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly
brackets: {}

function name(parameter1, parameter2, parameter3) {


code to be executed
}

Function parameters are the names listed in the function


definition.

Function arguments are the real values received by the


function when it is invoked.
Inside the function, the arguments (the parameters) behave as local
variables.

Function Invocation

The code inside the function will execute when


"something" invokes (calls) the function:

When an event occurs (when a user clicks a button)

When it is invoked (called) from JavaScript code

Automatically (self invoked)

You will learn a lot more about function invocation later in this
tutorial.

Function Return

When JavaScript reaches a return statement, the function will


stop executing.

If the function was invoked from a statement, JavaScript will "return"


to execute the code after the invoking statement.

Functions often compute a return value. The return value is


"returned" back to the "caller":

Example

Calculate the product of two numbers, and return the result:

var x = myFunction(4, 3); // Function is


called, return value will end up in x
function myFunction(a, b) {
return a * b; // Function
returns the product of a and b
}

The result in x will be:

12

Why Functions?

You can reuse code: Define the code once, and use it many times.

You can use the same code many times with different arguments, to
produce different results.

2. Ans:

Handling Events with JavaScript:

Events occur when some sort of interaction takes place in a web


page. This can be the end user clicking on something, moving the
mouse over a certain element or pressing down certain keys on the
keyboard. An event can also be something that happens in the web
browser, such as the web page completing the loading of a page, or
the user scrolling or resizing the window.

Through the use of JavaScript, you can detect when certain events
happen, and cause things to occur in response to those events.

When events happen to an HTML element in a web page, it checks to


see if any event handlers are attached to it. If the answer is yes, it
calls them in respective order, while sending along references and
further information for each event that occurred. The event handlers
then act upon the event.

There are two types of event order: event capturing and event
bubbling.

Event capturing starts with the outer most element in the DOM and
works inwards to the HTML element the event took place on and
then out again. For example, a click in a web page would first check
the HTML element for onclick event handlers, then
the body element, and so on, until it reaches the target of the
event.

Event bubbling works in exactly the opposite manner: it begins by


checking the target of the event for any attached event handlers,
then bubbles up through each respective parent element until it
reaches the HTML element.

Few events are:

Attribute Value Description

Offline script Triggers when the document


goes offline

Onabort script Triggers on an abort event

onafterprint script Triggers after the document is


printed

onbeforeonload script Triggers before the document


loads

onbeforeprint script Triggers before the document is


printed
onblur script Triggers when the window loses
focus

oncanplay script Triggers when media can start


play, but might has to stop for
buffering

oncanplaythrough script Triggers when media can be


played to the end, without
stopping for buffering

onchange script Triggers when an element


changes

onclick script Triggers on a mouse click

3.Ans:

Element positioning with CSS:

For DHTML content developers, the most important feature of CSS is


the ability to use ordinary CSS style attributes to specify the visibility,
size, and precise position of individual elements of a document. In
order to do DHTML programming, it is important to understand how
these style attributes work. They are summarized in Table 18-2 and
documented in more detail in the sections that follow.
CSS positioning and visibility attributes

Attribute(s) Description

position Specifies the type of positioning applied to an element

top, left Specifies the position of the top and left edges of an element

bottom, right Specifies the position of the bottom and right edges of an element
width, height Specifies the size of an element

Specifies the "stacking order" of an element relative to any overlapping


z-index
elements; defines a third dimension of element positioning

display Specifies how and whether an element is displayed

visibility Specifies whether an element is visible

Defines a "clipping region" for an element; only portions of the element


clip
within this region are displayed

overflow Specifies what to do if an element is bigger than the space allotted for it

The position Attribute

The CSS position attribute specifies the type of positioning applied to an


element. The four possible values for this attribute are:
static

This is the default value and specifies that the element is positioned according
to the normal flow of document content (for most Western languages, this is
left to right and top to bottom.) Statically positioned elements are not DHTML
elements and cannot be positioned with the top, left, and other attributes.
To use DHTML positioning techniques with a document element, you must first
set its position attribute to one of the other three values.
absolute

This value allows you to specify the position of an element relative to its
containing element. Absolutely positioned elements are positioned
independently of all other elements and are not part of the flow of statically
positioned elements. An absolutely positioned element is positioned either
relative to the <body> of the document or, if it is nested within another
absolutely positioned element, relative to that element. This is the most
commonly used positioning type for DHTML.
fixed
This value allows you to specify an element's position with respect to the
browser window. Elements with fixed positioning do not scroll with the rest
of the document and thus can be used to achieve frame-like effects. Like
absolutely positioned elements, fixed-position elements are independent of all
others and are not part of the document flow. Fixed positioning is a CSS2
feature and is not supported by fourth-generation browsers. (It is supported in
Netscape 6 and IE 5 for the Macintosh, but it is not supported by IE 5 or IE 6 for
Windows).
relative

When the position attribute is set to relative, an element is laid out


according to the normal flow, and its position is then adjusted relative to its
position in the normal flow. The space allocated for the element in the normal
document flow remains allocated for it, and the elements on either side of it
do not close up to fill in that space, nor are they "pushed away" from the new
position of the element. Relative positioning can be useful for some static
graphic design purposes, but it is not commonly used for DHTML effects.

4.Ans:

Primitive Data Types

Any value that you use is of a certain type. In JavaScript, there are the
following primitive data types:

Numberthis includes floating point numbers as well as integers, for


example 1, 100, 3.14.

Stringany number of characters, for example "a", "one", "one 2 three".

Booleancan be either true or false.

Undefinedwhen you try to access a variable that doesn't exist, you get
the special value undefined. The same will happen when you have
declared a variable, but not given it a value yet. JavaScript will initialize it
behind the scenes, with the value undefined.
Nullthis is another special data type that can have only one value, the
null value. It means no value, an empty value, nothing. The difference
with undefined is that if a variable has a value null, it is still defined, it
only happens that its value is nothing. You'll see some examples shortly.

Any value that doesn't belong to one of the five primitive types listed
above is an object. Even null is considered an object, which is a little
awkwardhaving an object (something) that is actually nothing. The
data types in JavaScript the data types are either:

Primitive (the five types listed above), or

Non-primitive (objects)

Finding out the Value Type the typeof Operator

If you want to know the data type of a variable or a value, you can use the
special typeof operator. This operator returns a string that represents the
data type. The return values of using typeof can be one of the following
"number", "string", "boolean", "undefined", "object", or "function". In
the next few sections, you'll see typeof in action using examples of each
of the five primitive data types.

Numbers

The simplest number is an integer. If you assign 1 to a variable and then


use the typeof operator, it will return the string "number". In the
following example you can also see that the second time we set a
variable's value, we don't need the var statement.

>>> var n = 1;
>>> typeof n;
"number"
>>> n = 1234;
>>> typeof n;
"number"

Numbers can also be floating point (decimals):

>>> var n2 = 1.23;


>>> typeof n;
"number"
You can call typeof directly on the value, without assigning it to a
variable first:

>>> typeof 123;


"number"

Octal and Hexadecimal Numbers

When a number starts with a 0, it's considered an octal number. For


example, the octal 0377 is the decimal 255.

>>> var n3 = 0377;


>>> typeof n3;
"number"
>>> n3;
255

The last line in the example above prints the decimal representation of
the octal value. While you may not be very familiar with octal numbers,
you've probably used hexadecimal values to define, for example, colors in
CSS stylesheets.

In CSS, you have several options to define a color, two of them being:

Using decimal values to specify the amount of R (red), G (green) and B


(blue) ranging from 0 to 255. For example rgb(0, 0, 0) is black
and rgb(255, 0, 0) is red (maximum amount of red and no green or blue).

Using hexadecimals, specifying two characters for each R, G and B. For


example, #000000 is black and #ff0000 is red. This is because ff is the
hexadecimal for 255.

In JavaScript, you put 0x before a hexadecimal value (also called hex for
short).

>>> var n4 = 0x00;


>>> typeof n4;
"number"
>>> n4;
0
>>> var n5 = 0xff;
>>> typeof n5;
"number"
>>> n5;
255

Exponent Literals

1e1 (can also be written as 1e+1 or 1E1 or 1E+1) represents the number
one with one zero after it, or in other words 10. Similarly, 2e+3 means
the number 2 with 3 zeros after it, or 2000.

>>> 1e1
10
>>> 1e+1
10
>>> 2e+3
2000
>>> typeof 2e+3;
"number"

2e+3 means moving the decimal point 3 digits to the right of the number
2. There's also 2e-3 meaning you move the decimal point 3 digits to the
left of the number 2.

>>> 2e-3
0.002
>>> 123.456E-3
0.123456
>>> typeof 2e-3
"number"

Infinity

There is a special value in JavaScript called Infinity. It represents a


number too big for JavaScript to handle. Infinity is indeed a number, as
typing typeof Infinity in the console will confirm. You can also quickly
check that a number with 308 zeros is ok, but 309 zeros is too much. To
be precise, the biggest number JavaScript can handle is
1.7976931348623157e+308 while the smallest is 5e-324.

>>> Infinity
Infinity
>>> typeof Infinity
"number"
>>> 1e309
Infinity
>>> 1e308
1e+308

Dividing by 0 will give you infinity.

>>> var a = 6 / 0;
>>> a
Infinity

Infinity is the biggest number (or rather a little bigger than the biggest),
but how about the smallest? It's infinity with a minus sign in front of it,
minus infinity.

>>> var i = -Infinity;


>>> i
-Infinity
>>> typeof i
"number"

Does this mean you can have something that's exactly twice as big as
Infinityfrom 0 up to infinity and then from 0 down to minus infinity?
Well, this is purely for amusement and there's no practical value to it.
When you sum infinity and minus infinity, you don't get 0, but
something that is called NaN (Not A Number).

>>> Infinity - Infinity


NaN
>>> -Infinity + Infinity
NaN

Any other arithmetic operation with Infinity as one of the operands will
give you Infinity:

>>> Infinity - 20
Infinity
>>> -Infinity * 3
-Infinity
>>> Infinity / 2
Infinity
>>> Infinity - 99999999999999999
Infinity

NaN

What was this NaN you saw in the example above? It turns out that
despite its name, "Not A Number", NaN is a special value that is also a
number.

>>> typeof NaN


"number"
>>> var a = NaN;
>>> a
NaN

You get NaN when you try to perform an operation that assumes
numbers but the operation fails. For example, if you try to multiply 10 by
the character "f", the result is NaN, because "f" is obviously not a valid
operand for a multiplication.

>>> var a = 10 * "f";


>>> a
NaN

NaN is contagious, so if you have even only one NaN in your arithmetic
operation, the whole result goes down the drain.
>>> 1 + 2 + NaN
NaN

Strings

A string is a sequence of characters used to represent text. In JavaScript,


any value placed between single or double quotes is considered a string.
This means that 1 is a number but "1" is a string. When used on
strings, typeof returns the string "string".

>>> var s = "some characters";


>>> typeof s;
"string"
>>> var s = 'some characters and numbers 123 5.87';
>>> typeof s;
"string"

Here's an example of a number used in string context:

>>> var s = '1';


>>> typeof s;
"string"

If you put nothing in quotes, it's still a string (an empty string):

>>> var s = ""; typeof s;


"string"

As you saw before, when you use the plus sign with two numbers, this is
the arithmetic operation addition. However, if you use the plus sign on
strings, this is a string concatenation operation and it returns the two
strings glued together.

>>> var s1 = "one"; var s2 = "two"; var s = s1 + s2; s;


"onetwo"
>>> typeof s;
"string"

The dual function of the + operator can be a source of errors. Therefore,


it is always best to make sure that all of the operands are strings if you
intend to concatenate them, and are all numbers if you intend to add
them. You will learn various ways to do so further in the article.

String Conversions

When you use a number-like string as an operand in an arithmetic


operation, the string is converted to a number behind the scenes. (This
works for all operations except addition, because of addition's
ambiguity)

>>> var s = '1'; s = 3 * s; typeof s;


"number"
>>> s
3
>>> var s = '1'; s++; typeof s;
"number"
>>> s
2

A lazy way to convert any number-like string to a number is to multiply it


by 1 (a better way is to use a function called parseInt()):

>>> var s = "100"; typeof s;


"string"
>>> s = s * 1;
100
>>> typeof s;
"number"

If the conversion fails, you'll get NaN:

>>> var d = '101 dalmatians';


>>> d * 1
NaN

A lazy way to convert anything to a string is to concatenate it with an


empty string.

>>> var n = 1;
>>> typeof n;
"number"
>>> n = "" + n;
"1"
>>> typeof n;
"string"

Operators:

Operators take one or two values (or variables), perform an operation,


and return a value. Let's check out a simple example of using an
operator, just to clarify the terminology.

>>> 1 + 2
3

In this code:

+ is the operator

The operation is addition

The input values are 1 and 2 (the input values are also called operands)

The result value is 3

Instead of using the values 1 and 2 directly in the operation, you can use
variables. You can also use a variable to store the result of the operation,
as the following example demonstrates:

>>> var a = 1;
>>> var b = 2;
>>> a + 1
2
>>> b + 2
4
>>> a + b
3
>>> var c = a + b;
>>> c
3
The following table lists the basic arithmetic operators:

Operator Operation Example


symbol

+ Addition >>> 1 + 2

- Subtraction >>> 99.99 - 11

88.99

* Multiplication >>> 2 * 3

/ Division >>> 6 / 4

1.5

% Modulo, the >>> 6 % 3


reminder of a
0
division
>>> 5 % 3

It's sometimes useful to


test if a number is even
or odd. Using the
modulo operator it's
easy. All odd numbers
will return 1 when
divided by 2, while all
even numbers will
return 0.

>>> 4 % 2
0

>>> 5 % 2

++ Increment a Post-increment is when


value by 1 the input value is
incremented after it's
returned.

>>> var a = 123; var b =


a++;

>>> b

123

>>> a

124

The opposite is pre-


increment; the input
value is first
incremented by 1 and
then returned.

>>> var a = 123; var b =


++a;

>>> b

124

>>> a

124

-- Decrement a Post-decrement
value by 1
>>> var a = 123; var b =
a--;
>>> b

123

>>> a

122

Pre-decrement

>>> var a = 123; var b =


--a;

>>> b

122

>>> a

122

When you type var a = 1; this is also an operation; it's the simple
assignment operation and = is the simple assignment operator.

There is also a family of operators that are a combination of an


assignment and an arithmetic operator. These are called compound
operators. They can make your code more compact. Let's see some of
them with examples.

>>> var a = 5;
>>> a += 3;
8

In this example a += 3; is just a shorter way of doing a = a + 3;

>>> a -= 3;
5

Here a -= 3; is the same as a = a - 3;

Similarly:

>>> a *= 2;
10
>>> a /= 5;
2
>>> a %= 2;
0

In addition to the arithmetic and assignment operators discussed above,


there are other types of operators, as you'll see later in this article series.

5.Ans:

JavaScript Control Statements

This page descibes the use of JaveScript control statements such as


the if statement, while statement, the for statement, and the switch
statement. It provides examples.

if

if (value == 3)

document.write("Value is three")

else

document.write("Value is not three")

While

var i = 0

while (i < 3)
{

i++

Do While

The example prints the days of the week.

days = new
Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Fri
day","Saturday")

var day = 0

do

document.write(days[day] + " is day " + eval(day+1) + " of the


week.<BR>\n")

day++

} while (day < 7)

For

The following example will determine what numeric day of the week
Wednesday falls on.

days = new
Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Satu
rday")

var day = "Wednesday"

var place

for (i = 0;i < days.length;i++)

{
if (day == days[i])

place = i + 1

document.write(day + " is day " + place + " in the week.<BR>\n")

The switch statement

Runs one or more commands based on the value of the expression being
evaluated. An example is:

switch (day) {

case 1:

document.write("Sunday<BR>\n")

break

case 2:

document.write("Monday<BR>\n")

break

case 3:

document.write("Tuesday<BR>\n")

break

case 4:

document.write("Wednesday<BR>\n")

break

case 5:

document.write("Thursday<BR>\n")
break

case 6:

document.write("Friday<BR>\n")

break

case 7:

document.write("Saturday<BR>\n")

break

default:

document.write("Invalid Weekday<BR>\n")

break

Break

The break statement may be used to break out of a while, if, switch, dowhile,
or for statement. The break causes program control to fall to the statement
following the iterative statement. The break statement now supports a label
which allows the specification of a location for the program control to jump
to. The following code will print "Wednesday is day 4 in the week".

days = new
Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Satu
rday")

var day = "Wednesday"

var place

for (i = 0;i < days.length;i++)

if (day == days[i]) break;


}

place = i + 1

document.write(day + " is day " + place + " in the week.<BR>\n")

Continue

The continue statement does not terminate the loop statement, but allows
statements below the continue statement to be skipped, while the control
remains with the looping statement. The loop is not exited. The example
below does not include any ratings values below 5.

ratings = new Array(6,9,8,4,5,7,8,10)

var sum = 0;

var reviews = 0

for (i=0; i < ratings.length; i++)

if (ratings[i] < 5) continue

sum += ratings[i];

reviews++;

var average = sum/reviews

For in Statement

Executes a loop similar to a for statement that executes for all the properties
in an object. The example below lists all properties and their values for the
document object. The document is the HTML page being displayed.

for (i in document)

document.write("Property = " + i + " Value = " + document[i] + "<BR>\n")


}

A few of the properties and their values are:

Property = activeElement Value = [object]

Property = alinkColor Value = #ff0000

Property = all Value = [object]

Property = anchors Value = [object]

Property = applets Value = [object]

Property = bgColor Value = #ffffff

Property = body Value = [object]

Property = cookie Value = pageCount=9

Property = defaultCharset Value = iso-8859-1

Property = domain Value =

Property = embeds Value = [object]

Property = fgColor Value = #000000

Property = fileCreatedDate Value = Thursday, September 21, 2000

With Statement

Eliminates references to the object within the statement by identifying the


default object to be used inside the braces. This example prints out the
document properties and values without referencing the document object to
perform the function.

with (document)

{
for (i in this)

write("Property = " + i + " Value = " + document[i] + "<BR>\n")

Eg: if (hour < 18) {


greeting = "Good day";
}

6.Ans:

var Compont= function(name)

{ this.name=name;

this.add=function(){this.prototype.countInstances++;};

this.add();

};

7.Ans:

function countChar(val) {

var len=val.value.length;

var ctext = len+ Chars;

var str= val.value;

var parts=[];

var partSize = 160;

while(str) {

if(str.length < partSize) {


var rtext = (partSize str.length) + Chars Remaining

parts.push(str);

break;

else

parts.push(str.substr(0,partSize));

str = str.substr(pasrSize);

var ptext= parts.length + Parts;

$(#text-character).val(ctext);

$(#text-parts).val(ptext);

$(#text-remaining).val(rtext);

8.Ans:
Javascript Navigator Object:

Contains information about the version, mimetype and what plug-ins


users have installed of Navigator in use.
Can not be created by the user. It is automatically created by the
javascript runtime engine.
Javascript Navigator Object : Properties

Name Description Version


appCodeName Specifies the code Implemented in
name of the JavaScript 1.0
browser.

appName Specifies the name Implemented in


of the browser. JavaScript 1.0

appVersion Specifies version Implemented in


information for the JavaScript 1.0
Navigator.

language Indicates the Implemented in


translation of the JavaScript 1.2
Navigator being
used.

mimeTypes An array of all Implemented in


MIME types JavaScript 1.1
supported by the
client.

platform Indicates the Implemented in


machine type for JavaScript 1.2
which the Navigator
was compiled.

plugins An array of all plug- Implemented in


ins currently JavaScript 1.1
installed on the
client.

userAgent Specifies the user- Implemented in


agent header. JavaScript 1.0

Javascript Navigator Object : Methods

Name Description Version


javaEnabled Tests whether Java Implemented in
is enabled. JavaScript 1.1

taintEnabled Specifies whether Implemented in


data tainting is JavaScript 1.1
enabled.

9.Ans:

JavaScript:

is a high-level, dynamic, untyped, and interpreted programming


language. It has been standardized in the ECMAScript language
specification. Alongside HTML and CSS, JavaScript is one of the three core
technologies of World Wide Web content production; the majority
of websites employ it, and all modern Web browsers support it without the
need for plug-ins. JavaScript is prototype-based with first-class functions,
making it a multi-paradigm language, supporting object-
oriented, imperative, and functional programming styles. It has an API for
working with text, arrays, dates and regular expressions, but does not
include any I/O, such as networking, storage, or graphics facilities, relying for
these upon the host environment in which it is embedded.

Although there are strong outward similarities between JavaScript and Java,
including language name, syntax, and respective standard libraries, the two
are distinct languages and differ greatly in their design. JavaScript was
influenced by programming languages such as Self and Scheme.

JavaScript is also used in environments that are not Web-based, such


as PDF documents, site-specific browsers, and desktop widgets. Newer
and faster JavaScript virtual machines (VMs) and platforms built upon them
have also increased the popularity of JavaScript for server-side Web
applications. On the client side, developers have traditionally
implemented JavaScript as an interpreted language, but more recent
browsers perform just-in-time compilation. Programmers also
use JavaScript in video-game development, in crafting desktop and mobile
applications, and in server-side network programming with run-time
environments such as Node.js.

Browser and plugin coding errors:

JavaScript provides an interface to a wide range of browser capabilities, some


of which may have flaws such as buffer overflows. These flaws can allow
attackers to write scripts that would run any code they wish on the user's
system. This code is not by any means limited to
another JavaScript application. For example, a buffer overrun exploit can
allow an attacker to gain access to the operating system's API with superuser
privileges.

These flaws have affected major browsers including Firefox, Internet


Explorer, and Safari.

Plugins, such as video players, Adobe Flash, and the wide range
of ActiveX controls enabled by default in Microsoft Internet Explorer, may
also have flaws exploitable via JavaScript (such flaws have been exploited in
the past).

In Windows Vista, Microsoft has attempted to contain the risks of bugs such as
buffer overflows by running the Internet Explorer process with limited
privileges.Google Chrome similarly confines its page renderers to their own
"sandbox".

Sandbox implementation errors

Web browsers are capable of running JavaScript outside the sandbox, with
the privileges necessary to, for example, create or delete files. Of course, such
privileges aren't meant to be granted to code from the Web.

Incorrectly granting privileges to JavaScript from the Web has played a role in
vulnerabilities in both Internet Explorer and Firefox. In Windows XP Service
Pack 2, Microsoft demoted JScript's privileges in Internet Explorer.
Microsoft Windows allows JavaScript source files on a computer's hard
drive to be launched as general-purpose, non-sandboxed programs
(see: Windows Script Host). This makes JavaScript (like VBScript) a
theoretically viable vector for a Trojan horse, although JavaScript Trojan
horses are uncommon in practice.

10.Ans:

Dynamic Content in Java:

This is the simplest way to modify content dynamically- using


the innerHTML property. By using this property, supported in all modern
browsers we can assign new HTML or text to any containment element
(such as <div> or <span>), and the page is instantly updated and
reflowed to show the new content.

Here are the dynamic content properties:

Dynamic content properties

The complete content (including HTML tags, if any) of an element.


innerHTML
Supported in all browsers.

innerText The complete textual content of an element. Non standard, supported in IE


only.

textContent Similar to the IE proprietary innerText property


above, textContent gets or sets the textual content of an element. It
differs from innerText in the following ways:

textContent gets the content of all elements,


including <script> and <style> elements, while
IE's innerText does not.

innerText is aware of style and will not return the text of hidden
elements, whereas textContent will.

As innerText is aware of CSS styling, it will trigger a reflow,


whereas textContent will not.

textContent is supported in IE9+ and all other modern browsers from


other vendors.
Identical to the above, except when assigning a new value to it, this value
outerText
replaces the element itself as well. Non standard, supported in IE only.

The complete content of an element, including the element itself.


outerHTML
Supported in all browsers.

If you've never seen the above four properties before, distinguishing


between them can undoubtedly become confusing. Here's a diagram with
a sample HTML content <div id="test>, and the reach each of the four
properties hold over it:

Both innerText and innerHTML represent what's contained inside the


element, though the later includes its HTML makeup as well. The outer
properties operate in the same manner, except that their range covers
the element itself..

Using the alert() method of JavaScript, we can easily see these four
properties in action:

1<div id="test"><b>This is sample HTML content</b></div>

1<script type="text/javascript">

2alert("InnerText is: "+test.innerText)

3alert("InnerHTML is: "+test.innerHTML)

4alert("outerText is: "+test.outerText)

5alert("outerHTML is: "+test.outerHTML)

6</script>

If the four properties at this point still look like quadruplets to you, that's
ok. The fact of the matter is, 99% of the time, innerHTML is all you'll be
using to create dynamic content.

Dynamic content example using innerHTML

Armed with the above new information, we can now move forward with
implementing dynamic content in IE. All that's involved is setting the
innerHTML property of a containment element to a new value, effectively
altering what's displayed.

Example:

CodingForums.com- Web coding and development forums

Here is the source code:

<div id="dcontent" style="width:100%; background-color:


#E2E2FC; padding-left: 5px"></div>

<script type="text/javascript">

var mycontent=new Array()


mycontent[0]=' <img src="http://javascriptkit.com/m1.gif">
Learn about JavaScript and get free scripts at <a
href="http://javascriptkit.com">JavaScript Kit!</a>'
mycontent[1]=' <img src="http://javascriptkit.com/m2.gif">
Visit <a href="http://dynamicdrive.com">Dynamic Drive</a> for
the best DHTML scripts and components on the web!'
mycontent[2]=' <img src="http://javascriptkit.com/m3.gif"> The
<a href="http://www.cssdrive.com/">CSS Drive</a> CSS gallery
and examples.'
mycontent[3]=' <img src="http://javascriptkit.com/m4.gif">
CodingForums.com- Web coding and development forums'

var i=0

function altercontent(){
dcontent.innerHTML=mycontent[i];
i=(i==mycontent.length-1)? 0 : i+1
setTimeout("altercontent()", 3000)
}

window.onload=altercontent

</script>

Das könnte Ihnen auch gefallen