AJAX is a collection of following technology components:-
• HTML/XHTML and CSS, for marking up and styling the information.
• JavaScript is used to connect to the server behind the scenes, uploading and downloading data. The JavaScript technology may then use the content to update or modify the Document Object Model (DOM) of the HTML page.
• XML is sometimes used as the format for transferring data between the server and client, although any format will work
HTML
• HTML stands for Hyper Text Markup Language
• It is the predominant markup language for web pages.
• It provides a means to describe the structure of text-based information in a document by denoting certain text as headings, paragraphs, lists, and so on — and to supplement that text with interactive forms, embedded images, and other objects.
• An HTML file is a text file containing small markup tags
• The markup tags tell the Web browser how to display the page
• An HTML file must have an htm or html file extension
- An HTML file can be created using a simple text editor
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
XML
• XML stands for Extensible Markup Language.
• XML is designed to transport and store data. It is intended to carry data, not to display data
• XML is a markup language much like HTML
• XML tags are not predefined. You must define your own tags
• XML is designed to be self-descriptive
• XML is not a replacement for HTML. HTML is about displaying information, while XML is about carrying information.
XML Example
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
Javascript
JavaScript is used in millions of Web pages to improve the design, validate forms, detect browsers, create cookies, and much more. JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Mozilla, Firefox, Netscape, and Opera.
• JavaScript is a scripting language
• JavaScript was designed to add interactivity to HTML pages
• A scripting language is a lightweight programming language
• 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++.
Where do we use javascript?
• 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
JavaScript in HTML page
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
Scripts in both the body and the head section
<html>
<head>
<script type="text/javascript">
....
</script>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>
Using an External JavaScript
<html>
<head>
<script language="javascript" src="abc.js"></script>
</head>
<body>
</body>
</html>
Javascript
One can access the Web page and the browser itself from JavaScript with a variety of built-in objects.
• The objects are like:
-document (which refers to a Web page)
-window (which refers to the browser window)
-history ( which refers to a history list that lets the browser navigate forward and backward)
• Each of these objects has methods and properties.
-calling a method to make something happen
-setting the value of a property to configure those objects
• Few useful object methods:
-document.write lets you write text to the current Web page.
-history.go moves the browser to a page in the browser's history.
-window.open opens a new browser window.
Javascript
• Few of the useful properties that are available:
-document.bgcolor holds the background color of the current page.
-document.fgcolor holds the foreground color of the current page.
-document.lastmodified holds the date the page was last modified.
-document.title holds the title of the page.
-location.hostname holds the name of the page's host.
-navigator.appName holds the type of the browser.
• Each of these objects has methods and properties.
-calling a method to make something happen
-set the value of a property to configure those objects
Javascript responding to browser events
• An event occurs when something happens in the browser: the mouse moves or is clicked, a scroll bar is scrolled, a button is pressed.
• When an event occurs, JavaScript code can be notified of the event, which means that code can respond to that event appropriately.
• Some of the events are:
-onabort: Happens when an action is aborted.
-onblur: Happens when an element loses the input focus.
-onchange: Happens when data in a component like a text field changes.
-onclick: Happens when an element is clicked.
-ondblclick: Happens when an element is double-clicked.
-ondragdrop:Happens when a drag-drop operation is undertaken.
-onerror: Happens when there's been a JavaScript error.
-onfocus: Happens when an element gets the focus
-onkeydown:Happens when a key goes down.
-onkeypress: Happens when a key is pressed and the key code is available.
-onkeyup: Happens when a key goes up.
-onload: Happens when the page loads.
-onmousedown: Happens when a mouse button goes down.
-onmousemove: Happens when the mouse moves.
-onmouseout: Happens when the mouse leaves an element.
-onmouseover: Happens when the mouse moves over an element.
-onmouseup: Happens when a mouse button goes up.
-onreset: Happens when the user clicks a Reset button.
-onresize: Happens when an element or page is resized.
-onsubmit: Happens when the user clicks a Submit button.
-onunload:Happens when a page is unloaded.
JavaScript event example
<html>
<head>
</head>
<body onmousedown="alert('You clicked the page.')">
<h1>
Clicking this page will display an alert box.
</h1>
Give it a try.
</body>
</html>
Creating Functions in javascript
• A JavaScript function is a set of code statements that are specifically executed only when we want them to be.
• Those statements are set off from the rest of the code by surrounding them with { and } in the body of the function.
• A function is just like the methods we just saw—like the document object's write method—except that a function isn't connected to an object.
• We use the keyword function to define a new function, then give the name of the function, followed by a pair of parentheses. Then you use curly braces, { and }, to enclose the JavaScript statements you want to run when the function is called.
Creating Functions in javascript - Example 1
<html>
<head>
<title>A first JavaScript example</title>
<script language="javascript">
function showMessage ()
{
............
}
</script>
</head>
<body onload="showMessage()">
<h1>A first JavaScript example</h1>
</body>
</html>
Creating Functions in javascript - Example 2
<html>
<head>
<title>A first JavaScript example</title>
<script language="javascript">
function showMessage ()
{
document.getElementById('targetDiv').innerHTML = "You are using JavaScript";
}
</script>
</head>
<body onload="showMessage()">
<h1>Second JavaScript example</h1>
<div id="targetDiv"> </div>
</body></html>
No comments:
Post a Comment