Javascript Was Designed To Add Interactivity To HTML Pages
Javascript Was Designed To Add Interactivity To HTML Pages
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)
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++.
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
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:
· 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.
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
120 | P a g e
</body>
</html>
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.
<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.
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
5.Open the file in the browser.Browser will show the output as shown in the sample
program output.
<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).
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">
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?
<body onload="someFunction();otherFunction();">
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.
<a href="javascript:someFunction();otherFunction();">
Click Here
</a>
<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?
<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?
<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.