JavaScript Introduction:
JavaScript was invented by Brendan Eich at Netscape (with Navigator 2.0), and has appeared in all browsers since 1996.- JavaScript is the most popular and dynamic scripting language of the Web that allows you to build interactivity otherwise static HTML pages.
- A scripting language is a lightweight programming language.
- JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
- Everyone can use JavaScript without purchasing a license.
·
It works in all
major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari.
- This is done by embedding blocks of JavaScript code almost anywhere in your Web page.
·
JavaScript is
used in billions of Web pages to add functionality, validate forms, communicate
with the server, and much more.
- To make this work, blocks of JavaScript code are delineated by opening and closing script tags:
- script tags:
<Script ...>
JavaScript code goes here
</script>
·
Before you
continue you should have a basic knowledge of:
HTML and CSS.
·
Java and JavaScript are 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 –Features:
- JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages.
Example of a complete
script tag:
<script language=”JavaScript”>
JavaScript code goes here
</script>
- 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.
- A JavaScript can read and change the content of an HTML element.
- A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing.
- 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 that mean to store and retrieve information on the visitor's computer.
·
JavaScript is an implementation of the
ECMAScript language standard. ECMA-262 is the official JavaScript standard.
Examples Explained
1)
- To insert a JavaScript into an HTML page, use the <script> tag.
- Inside the <script> tag use the type attribute to define the scripting language.
- The <script> and </script> tells where the JavaScript starts and ends:
Syntax:
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">This is a paragraph.</p>
<script type="text/javascript">
... some JavaScript code ...
</script>
</body>
</html>
<body>
<h1>My First Web Page</h1>
<p id="demo">This is a paragraph.</p>
<script type="text/javascript">
... some JavaScript code ...
</script>
</body>
</html>
2) The lines between the <script> and </script> contain the
JavaScript and are executed by the browser.
In this case the browser will replace the content of the HTML element with id="demo",
with the current date:
Syntax:
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">This is a paragraph.</p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html>
<body>
<h1>My First Web Page</h1>
<p id="demo">This is a paragraph.</p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html>
3) Without the <script> tag(s), the browser will
treat "document.getElementById("demo").innerHTML=Date();"
as pure text and just write it to the page:
4)
<body>
<script type="text/javascript">
<!--
document.getElementById("demo").innerHTML=Date();
//-->
</script>
</body>
</html>
- Browsers that do not support JavaScript, will display JavaScript as page content.
- To prevent them from doing this, and as a part of the JavaScript standard, the HTML comment tag should be used to "hide" the JavaScript.
- The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag.
- Just add an HTML comment tag <!-- before the first JavaScript statement, and a --> (end of comment) after the last JavaScript statement, like this:
Example:
<html><body>
<script type="text/javascript">
<!--
document.getElementById("demo").innerHTML=Date();
//-->
</script>
</body>
</html>
Use of HTML tag in JavaScript:
The HTML <script> tag is used to insert a JavaScript into
an HTML page.
Note:
Try to avoid using document.write() in real life JavaScript code. The entire HTML page
will be overwritten if document.write() is used inside a function, or after the
page is loaded. However, document.write() is an easy way to demonstrate JavaScript output in a
tutorial.
Example:1
When you click
the button, date will display.
Syntax:
<html>
<head>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h2>My First Web Page</h2>
<p id="demo">This is a paragraph.</p>
<button type="button"
onclick="displayDate()">Display Date</button>
</body>
</html>
Example2: Writing to HTML Elements
The example below writes a <p> element with current
date information to the HTML document:
Syntax:
<html>
<body>
<h2>My First Web Page</h2>
<script type="text/javascript">
document.write("<p>" + Date() +
"</p>");
</script>
</body>
</html>
Example2: Changing HTML Elements
The example below writes the current date into an existing
<p> element:
Note: To manipulate HTML elements JavaScript uses the DOM method getElementById().
This method accesses the element with the specified id.
Syntax:
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">This is a paragraph.</p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html>
<body>
<h1>My First Web Page</h1>
<p id="demo">This is a paragraph.</p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html>
No comments:
Post a Comment