JAVASCRIPT
What is JavaScript?
JavaScript
is a dynamic computer programming language. It is lightweight and most commonly
used as a part of web pages, whose implementations allow client-side script to
interact with the user and make dynamic pages. It is an interpreted programming
language with object-oriented capabilities.
JavaScript
was first known as LiveScript, but Netscape changed its name to JavaScript,
possibly because of the excitement being generated by Java. JavaScript made its
first appearance in Netscape 2.0 in 1995 with the name LiveScript. The
general-purpose core of the language has been embedded in Netscape, Internet
Explorer, and other web browsers.
ü The
ECMA-262 Specification defined a standard version of the core JavaScript
language.
ü JavaScript
is a lightweight, interpreted programming language.
ü Designed
for creating network-centric applications.
ü Complementary
to and integrated with Java.
ü Open
and cross-platform
Client-side JavaScript
Client-side
JavaScript is the most common form of the language. The script should be
included in or referenced by an HTML document for the code to be interpreted by
the browser.
It
means that a web page need not be a static HTML, but can include programs that
interact with the user, control the browser, and dynamically create HTML
content.
The
JavaScript client-side mechanism provides many advantages over traditional CGI
server-side scripts. For example, you might use JavaScript to check if the user
has entered a valid e-mail address in a form field.
The
JavaScript code is executed when the user submits the form, and only if all the
entries are valid, they would be submitted to the Web Server.
JavaScript
can be used to trap user-initiated events such as button clicks, link
navigation, and other actions that the user initiates explicitly or implicitly.
Advantages of JavaScript
The
merits of using JavaScript are −
Less
server interaction − You can validate user input before sending the page off to
the server. This saves server traffic, which means less load on your server.
Immediate
feedback to the visitors − They don't have to wait for a page reload to see if
they have forgotten to enter something.
Increased
interactivity − You can create interfaces that react when the user hovers over
them with a mouse or activates them via the keyboard.
Richer
interfaces − You can use JavaScript to include such items as drag-and-drop
components and sliders to give a Rich Interface to your site visitors.
Limitations of JavaScript
We
cannot treat JavaScript as a full-fledged programming language. It lacks the
following important features −
ü Client-side
JavaScript does not allow the reading or writing of files. This has been kept
for security reason.
ü JavaScript
cannot be used for networking applications because there is no such support
available.
ü JavaScript
doesn't have any multithreading or multiprocessor capabilities.
ü Once
again, JavaScript is a lightweight, interpreted programming language that
allows you to build interactivity into otherwise static HTML pages.
Why we use JavaScript?
JavaScript is most commonly used as a client
side scripting language. This means that JavaScript code is written into an
HTML page. When a user requests an HTML page with JavaScript in it, the script
is sent to the browser and it's up to the browser to do something with it.
JavaScript Can Change
HTML Content:
One of many JavaScript HTML methods is
getElementById().
This
example uses the method to "find" an HTML element (with
id="demo") and changes the element content (innerHTML) to "Hello
JavaScript":
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change HTML
content.</p>
<button type="button"
onclick="document.getElementById('demo').innerHTML = 'Hello
JavaScript!'">Click Me!</button>
</body>
</html>
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change HTML
content.</p>
<button type="button"
onclick="document.getElementById('demo').innerHTML = 'Hello
JavaScript!'">Change HTML content</button>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn
on the light</button>
<img id="myImage"
src="pic_bulboff.gif" style="width:100px">
<button
onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn
off the light</button>
<button type="button"
onclick="document.getElementById('demo').style.fontSize='35px'">
Change HTML Styles</button>
<button type="button"
onclick="document.getElementById('demo').style.display='none'">Hide
HTML Elements</button>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Hide
HTML Elements</button>
</body>
</html>
JavaScript Where To:
In
HTML, JavaScript code must be inserted between <script> and
</script> tags.
<script>
document.getElementById("demo").innerHTML
= "My First JavaScript";
</script>
JavaScript Functions and Events:
A JavaScript function is a
block of JavaScript code, that can be executed when "asked" for.
For example, a function can
be executed when an event occurs, like when the user clicks a button.
JavaScript in <head> or <body>:
ü You
can place any number of scripts in an HTML document.
ü Scripts
can be placed in the <body>, or in the <head> section of an HTML
page, or in both.
JavaScript in <head>:
In this example, a
JavaScript function is placed in the <head> section of an HTML page.
The function is invoked
(called) when a button is clicked:
<!DOCTYPE html>
<html>
<head>
<script>
function
myFunction() {
document.getElementById("demo").innerHTML
= "Paragraph changed.";
}
</script>
</head>
<body>
<h1>A
Web Page</h1>
<p
id="demo">A Paragraph</p>
<button
type="button" onclick="myFunction()">Try
it</button>
</body>
</html>
JavaScript in <body>:
In this example, a
JavaScript function is placed in the <body> section of an HTML page.
The function is invoked
(called) when a button is clicked:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>A
Web Page</h1>
<p
id="demo">A Paragraph</p>
<button
type="button" onclick="myFunction()">Try
it</button>
<script>
function
myFunction() {
document.getElementById("demo").innerHTML
= "Paragraph changed.";
}
</script>
</body>
</html>
External JavaScript:
Scripts can also be placed
in external files:
External file: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed.";
}
ü External
scripts are practical when the same code is used in many different web pages.
ü JavaScript
files have the file extension .js.
ü To
use an external script, put the name of the script file in the src (source)
attribute of a <script> tag:
<!DOCTYPE html>
<html>
<body>
<h1>External JavaScript</h1>
<p id="demo">A
Paragraph.</p>
<button type="button"
onclick="myFunction()">Try it</button>
<p>(myFunction is stored in an
external file called "myScript.js")</p>
<script
src="myScript.js"></script>
</body>
</html>
ü You
can place an external script reference in <head> or <body> as you
like.
ü The
script will behave as if it was located exactly where the <script> tag is
located.
NOTE: External scripts cannot contain <script> tags.
External
JavaScript Advantages:
Placing scripts in external
files has some advantages:
ü It
separates HTML and code
ü It
makes HTML and JavaScript easier to read and maintain
ü Cached
JavaScript files can speed up page loads
ü To
add several script files to one page -
use several script tags:
EXAMPLE:
<script
src="myScript1.js"></script>
<script
src="myScript2.js"></script>
External References:
ü External
scripts can be referenced with a full URL or with a path relative to the
current web page.
This example uses a full URL
to link to a script:
<script
src="http://www.w3schools.com/js/myScript1.js">
</script>
This example uses a script
located in a specified folder on the current web site:
<script src="/js/myScript1.js"></script>
This example links to a script located in the same folder
as the current page:
<script
src="myScript.js"></script>
