Monday, August 27, 2012

JavaScript: How to Use


A JavaScript is surrounded by a <script> and </script> tag.
JavaScript is typically used to manipulate HTML elements.

The <script> Tag

To insert a JavaScript into an HTML page, use the <script> tag.

The <script> and </script> tells where the JavaScript starts and ends.

The lines between the <script> and </script> contain the JavaScript:

<script>
alert("My First JavaScript");
</script>

You don't have to understand the code above. Just take it for a fact, that the browser will interpret and execute the JavaScript code between the <script> and </script> tags.

lampSome examples have type="text/javascript" in the <script> tag. This is not required in HTML5. JavaScript is the default scripting language in all modern browsers and in HTML5.


Manipulating HTML Elements

To access an HTML element from a JavaScript, use the document.getElementById(id) method, and an "id" attribute to identify the HTML element:

Example

Access the HTML element with the specified id, and change its content:
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p id="demo">My First Paragraph</p>

<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>


</body>
</html>

Try it yourself »

The JavaScript is executed by the web browser. In this case, the browser will access the HTML element with id="demo", and replace its content (innerHTML) with "My First JavaScript".

Writing Directly into The Document Output

The example below writes a <p> element directly into the HTML document output:

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
document.write("<p>My First JavaScript</p>");
</script>


</body>
</html>

Try it yourself »


Warning

Use document.write() only to write directly into the document output.
If you execute document.write after the document has finished loading, the entire HTML page will be overwritten:

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
document.write("Oops! The document disappeared!");
}
</script>


</body>
</html>

Try it yourself »

JavaScript Introduction


JavaScript is the most popular scripting language in the world. It is the standard language used in web pages, but it is also widely used by desktop apps, mobile phone apps, and internet servers.

What You Should Already Know

You should have a basic understanding of the following:
  • HTML and CSS
If you want to study these subjects first, please click on the Home page.

What is JavaScript?

  • JavaScript is a scripting language
  • JavaScript was designed to add interactivity to HTML pages

What is a Scripting Language?

A scripting language is a lightweight programming language that supports the writing of scripts.
Scripts are code lines that can be interpreted and executed "on-the-fly", without explicit compile and link steps.

What can JavaScript do?

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


JavaScript can manipulate HTML
JavaScript can both read and change the content of HTML elements.


JavaScript can manipulate CSS
JavaScript can both read and change the style of HTML elements.


JavaScript can validate data
JavaScript can be used to validate data, like validating forms input.


JavaScript can store data
JavaScript can be used to store and retrieve information on the visitor's computer.


JavaScript can react to events
JavaScript can be set to execute when something happens, like when a user clicks on an HTML element.


JavaScript vs. Java

JavaScript and Java are two completely different languages, in both concept and design.
Java (developed by Sun Microsystems) is a complex programming language in the same category as C and C++.

JavaScript = ECMAScript

ECMA-262 is the official JavaScript standard.

JavaScript was invented by Brendan Eich at Netscape, and first appeared in Netscape Navigator (a no longer existing web browser) in1995. First it was called Mocha, then LiveScript, and finally JavaScript.

The JavaScript standard was adopted by the industry standard association ECMA in 1997.

The standard (called ECMAScript-262) was approved as an international ISO standard in 1998.

The development of ECMAScript is still in process.

JavaScript Tutorial


Our JavaScript tutorial contains hundreds of "Try it yourself" examples.
With our editor, you can edit JavaScript code online and click on a button to view the result.

Example

My First JavaScript

This is a paragraph.


Try it yourself »
Click on the "Try it yourself" button to see how it works

Use the "try it yourself" examples on every page. Change and experiment as much as possible with the code, and try to learn as much as you can about how things work.
Good luck!


JavaScript Examples


Learn by hundreds of examples!
With our editor, you can edit the source code and click on a test button to view the result.

JavaScript Quiz Test


Test your JavaScript skills at W3Schools!

JavaScript References


At Nabeel Jamil Blog's you will find a complete reference of all JavaScript objects, Browser objects, and the HTML DOM objects. Contains lot of examples!


Saturday, August 25, 2012

XML DOC


eXtensible Markup Language (XML) was designed to transport and store data.
XML document does not DO anything. It is just information wrapped in tags. Someone must
write a piece of software to send, receive or display it.

What is XML?

·         XML stands for EXtensible Markup Language
·         XML is a markup language much like HTML
·         XML was designed to carry data, not to display data
·         XML tags are not predefined. You must define your own tags
·         XML is designed to be self-descriptive
·         XML is a W3C Recommendation.

What can we do with XML?

·         Separates Data from HTML
·         Simplifies Data Sharing
·         Simplifies Data Transport
·         Simplifies Platform Changes

Creating XML
Follow the steps to make a new project:

1.      File -> New Project -> Visual C# -> Windows Forms Application
2.      Add a TextBox control (textBox1) to your form, and make it Multiline. Then enlarge it.
3. In the Using section of your code file add the library using System.Xml;

Add a new button and paste this code for its onClick method:

// Create the xml document containe
XmlDocument doc = new XmlDocument();
// Create the XML Declaration, and append it to XML document
XmlDeclaration dec = doc.CreateXmlDeclaration("1.0",
null, null);
doc.AppendChild(dec);// Create the root element
XmlElement root = doc.CreateElement("Library");
doc.AppendChild(root);
// Create Books
// Note that to set the text inside the element,
// you use .InnerText instead of .Value
//(which will throw an exception).
// You use SetAttribute to set attribute
XmlElement book = doc.CreateElement("Book");
book.SetAttribute("BookType", "Hardcover");
XmlElement title = doc.CreateElement("Title");
title.InnerText = "Door Number Three";
XmlElement author = doc.CreateElement("Author");
author.InnerText = "O'Leary, Patrick";
book.AppendChild(title);
book.AppendChild(author);
root.AppendChild(book);
book = doc.CreateElement("Book");
book.SetAttribute("BookType", "Paperback");
title = doc.CreateElement("Title");
title.InnerText = "Lord of Light";
author = doc.CreateElement("Author");
author.InnerText = "Zelanzy, Roger";
book.AppendChild(title);
book.AppendChild(author);
root.AppendChild(book);
string xmlOutput = doc.OuterXml;
textBox1.Text = xmlOutput;

4.      This code represents generation of XML with the class XmlDocument. Click Ctrl+F5 to start the program.
5.      Add a new button and the following code for its onClick method. This will show you how you can create XML with the XML Writer.

XmlWriterSettings wSettings = new XmlWriterSettings();
wSettings.Indent = true;
MemoryStream ms = new MemoryStream();
XmlWriter xw = XmlWriter.Create(ms, wSettings);// Write
Declaration
xw.WriteStartDocument();
// Write the root node
xw.WriteStartElement("Library");
// Write the books and the book elements
xw.WriteStartElement("Book");
xw.WriteStartAttribute("BookType");
xw.WriteString("Hardback");
xw.WriteEndAttribute();
xw.WriteStartElement("Title");
xw.WriteString("Door Number Three");
xw.WriteEndElement();
xw.WriteStartElement("Author");
xw.WriteString("O'Leary, Patrick");
xw.WriteEndElement();
xw.WriteEndElement();
// Write another book
xw.WriteStartElement("Book");
xw.WriteStartAttribute("BookType");
xw.WriteString("Paperback");
xw.WriteEndAttribute();
xw.WriteStartElement("Title");
xw.WriteString("Lord of Light");
xw.WriteEndElement();
xw.WriteStartElement("Author");
xw.WriteString("Zelanzy, Roger");
xw.WriteEndElement();
xw.WriteEndElement();
// Close the document
xw.WriteEndDocument();
// Flush the write
xw.Flush();
Byte[] buffer = new Byte[ms.Length];
buffer = ms.ToArray();
string xmlOutput =
System.Text.Encoding.UTF8.GetString(buffer);
textBox1.Text = xmlOutput;

6.      Add library using System.IO; and start the application so you can see the differences between the two methods.
7.      There is a third way to generate XML and it can be used in .NET Framework 3.5 and above. For it you will need to add the library using System.Xml.Linq; and again a new button with the following onClick code:
//XDocument
MessageBox.Show(new XElement("Foo",
new XAttribute("Bar", "some value"),
new XElement("Nested1", "data"),
new XElement("Nested2", "other data")
).ToString());
//XmlDocument
XmlDocument doc = new XmlDocument();
XmlElement el=(XmlElement)doc.AppendChild(doc.CreateElement("Foo"));
el.SetAttribute("Bar", "some value");
el.AppendChild(doc.CreateElement("Nested1")).InnerText = "data";
el.AppendChild(doc.CreateElement("Nested2")).InnerText="other data";
MessageBox.Show(doc.OuterXml.ToString());

8.      Start the program and test button 3. XDocument is easy to use, but when you need to work with big amounts of data it is better to use XML Writer.

Reading XML
9.      Download and save the following file ( cd_catalog.xml ) into your Bin/Debug folder of
your project.

10.  Add a button “Read XML” and in its onClick method add the code:
XmlDocument xDoc = new XmlDocument();
xDoc.Load("cd_catalog.xml");
XmlNodeList name = xDoc.GetElementsByTagName("TITLE");
XmlNodeList age = xDoc.GetElementsByTagName("ARTIST");
//XmlNodeList represents an ordered collection of nodes.
//Display the results in a message box.
string xmlText = "";
for (int i = 0; i < name.Count; i++)
{
xmlText += "Title: " + name[i].InnerText +
"\t Artist: " + age[i].InnerText +"\n";
}
MessageBox.Show(xmlText);

11.  Start the code and see the result. You can see that the file can be read element by element.
12.  To show all of the data add a DataGridView control to your form. Add another button and the following code for it:
XmlDataDocument xmlDatadoc = new XmlDataDocument();
xmlDatadoc.DataSet.ReadXml("cd_catalog.xml");
DataSet ds = new DataSet("CD DataSet");
ds = xmlDatadoc.DataSet;
dataGridView1.DataSource = ds.DefaultViewManager;
dataGridView1.DataMember = "CD";
13.    Start with CTRL+F5.