Javascript Was Designed To Add Interactivity To HTML Pages

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 8

JavaScript

JavaScript was designed to add interactivity to HTML pages

118 | P a g e
JavaScript is a scripting language (a scripting language is a lightweight programming language)

A JavaScript consists of lines of executable computer code

A JavaScript is usually embedded directly into HTML pages

JavaScript is an interpreted language (means that scripts execute without preliminary


compilation)

Everyone can use JavaScript without purchasing a license

Are Java and JavaScript the Same?

NO!

Java and JavaScript are two completely different languages in both concept and design!

Java (developed by Sun Microsystems) is a powerful and much more complex programming
language - in the same category as C and C++.

What can a JavaScript Do?

JavaScript gives HTML designers a programming tool - HTML authors are normally not
programmers, but JavaScript is a scripting language with a very simple syntax! Almost
anyone can put small "snippets" of code into their HTML pages

JavaScript can put dynamic text into an HTML page - A JavaScript statement like this:
document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page

JavaScript can react to events - A JavaScript can be set to execute when something
happens, like when a page has finished loading or when a user clicks on an HTML element

JavaScript can read and write HTML elements - A JavaScript can read and change the
content of an HTML element

JavaScript can be used to validate data - A JavaScript can be used to validate form data before
it is submitted to a server. This saves the server from extra processing

JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect
the visitor's browser, and - depending on the browser - load another page specifically designed
for that browser

JavaScript can be used to create cookies - A JavaScript can be used to store and
retrieve information on the visitor's computer

The Advantages and Disadvantages of JavaScript

119 | P a g e
We've already seen some of the advantages of JavaScript, like cross-browser support,
validating data on the client, and being able to create more sophisticated user interfaces.

JavaScript effects are also much faster to download than some other front-end technologies like
Flash and Java applets. In fact, unless you're writing a massive JavaScript application, it's quite
likely that no significant extra download time will be added to a page by using JavaScript on it.
Nor do users need to download a plugin before they can view your JavaScript, as they would
with Flash for example, they simply need a browser that supports it – and, of course, most
modern browsers do.

Other advantages include the fact that you don't need any extra tools to write JavaScript, any
plain text or HTML editor will do, so there's no expensive development software to buy. It's
also an easy language to learn, and there's a thriving and supportive online community of
JavaScript developers and information resources.

The disadvantages of JavaScript, as with most web development, are almost entirely related to
browser compatibility.

While the advances in browser programmability we've seen over recent years are, generally
speaking, a good thing, if you don't implement them with care you can create a lot of
inconsistencies and broken pages quite unintentionally using JavaScript. Code that works
just great on IE4 might not work at all on Netscape 4, what works in NN6 doesn‘t always
work in NN 4, and so on.

In essence, there are two main problems with JavaScript and browsers:

· The different JavaScript versions in different browsers.

· Browser programmability: the HTML elements and features of the browser that can be
accessed through any scripting language. (IE4 , for example, makes most of the page and HTML
accessible to scripts, but Navigator 4 limits what can be accessed and manipulated.)

The HTML <script> tag is used to insert a JavaScript into an HTML page.

How to Put a JavaScript Into an HTML Page

<html>

<body>

<script type="text/javascript">

document.write("Hello World!")

</script>

120 | P a g e
</body>

</html>

The code above will produce this output on an HTML page:

Hello World!

Example Explained

To insert a JavaScript into an HTML page, we use the <script> tag (also use the type attribute
to define the scripting language).

So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and ends:

<html>

<body>

<script type="text/javascript">

...

</script>

</body>

</html>

The word document.write is a standard JavaScript command for writing output to a page.

By entering the document.write command between the <script type="text/javascript"> and


</script> tags, the browser will recognize it as a JavaScript command and execute the code
line. In this case the browser will write Hello World! to the page:

<html>

<body>

<script type="text/javascript">

document.write("Hello World!")

121 | P a g e
</script>

</body>

</html>

Note: If we had not entered the <script> tag, the browser would have treated the
document.write("Hello World!") command as pure text, and just write the entire line on the page.

Ending Statements With a Semicolon?

With traditional programming languages, like C++ and Java, each code statement has to end
with a semicolon.

Many programmers continue this habit when writing JavaScript, but in general, semicolons are
optional! However, semicolons are required if you want to put more than one statement on a
single line.

Sample Program

Function with arguments, that returns a value

1. Create HTML file by using vi editor.

2. Define Tags HTML,body tags.

3. Inside body tag ,define the table tags.

4. Save the file with .html extension

5.Open the file in the browser.Browser will show the output as shown in the sample
program output.

Program Source Code :

<html>

<head>

<script type="text/javascript">

function product(a,b)

122 | P a g e
{

return a*b

</script>

</head>

<body>

<script type="text/javascript">

document.write(product(4,3))

</script>

<p>The script in the body section calls a function with two parameters (4 and

3).</p> <p>The function will return the product of these two parameters.</p>

</body>

</html>

Output :

12

The script in the body section calls a function with two parameters (4 and 3).

The function will return the product of these two parameters.

Questions :

Q1.How do you get the page background image to stay fixed when the page is scrolled?

123 | P a g e
Ans.The technique is called watermarking.

One simple way is to add bgproperties="fixed" to the body tag, like this:

<body bgproperties="fixed">

Note that this typically only works in Internet Explorer browsers.

Another way of doing it that also works in later Netscape browsers (6.x & up) is to add this style
script to the <head> of your page:

<style>
body {background-attachment:fixed}
</style>

Q2.How do you call more than one JavaScript function in a body tag (or other)
event handler?

Ans.Simple. End each function call with a semi-colon ;


Like this:

<body onload="someFunction();otherFunction();">

or, say, in a mouseover...

onMouseOver="someFunction();otherFunction();"

In JavaScript, the semi-colon is essentially an end-of-line marker. Within reasonable limits, you
can actually write a whole script inside of an event handler.

The same thing applies to the href="javascript:etc" structure. For instance:

<a href="javascript:someFunction();otherFunction();">
Click Here
</a>

Q3. How do you make a window "pop under" when it is opened?

Put this as early in the <head> of the page as possible:

<script>
self.blur();
</script>

That tells the window to "lose focus" as soon as it reads the self.blur(); -- which makes the
window "jump behind" the window that is currently in focus.

124 | P a g e
Q4. How can you set a window's size when it is opened?

Put this as early in the <head> of the page as possible:

<script>
self.resizeTo(100,200);
</script>

Set the dimensions in the parentheses. The first number is the width; the second is the height.

Q5.How can you make certain a window will "come to the front" when it is loaded?

Add onload="self.focus();" to the body tag, like this:

<body onload="self.focus();">

As soon as the window is fully loaded, it will "take focus" and move in front of any other
open windows.

You might also like