tag:blogger.com,1999:blog-50501015021744984442024-03-05T13:55:04.256+05:00PHP DevelopersPHP Developer, PHP, HTML, XHTML, CSS, XML, MySQL, DREAMWEAVER, ADOBE PHOTOSHOPNabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.comBlogger180125tag:blogger.com,1999:blog-5050101502174498444.post-62153793685523188882019-08-28T12:43:00.000+05:002019-08-28T12:43:02.804+05:00MySqli Connection Class in PHP<div dir="ltr" style="text-align: left;" trbidi="on">
Here below is given the Connection class<br />
<br />
<br />
<span style="white-space: pre;"> </span>class Database<br />
<span style="white-space: pre;"> </span>{<br />
<span style="white-space: pre;"> </span>var $sServer;<br />
<span style="white-space: pre;"> </span>var $sDatabase;<br />
<span style="white-space: pre;"> </span>var $sUsername;<br />
<span style="white-space: pre;"> </span>var $sPassword;<br />
<br />
<span style="white-space: pre;"> </span>var $dbConnection;<br />
<span style="white-space: pre;"> </span>var $dbResultSet;<br />
<br />
<span style="white-space: pre;"> </span>var $iCount;<br />
<span style="white-space: pre;"> </span>var $iFieldsCount;<br />
<span style="white-space: pre;"> </span>var $iAutoNumber;<br />
<span style="white-space: pre;"> </span>var $sError;<br />
<br />
<span style="white-space: pre;"> </span>function Database( )<br />
<span style="white-space: pre;"> </span>{<br />
<span style="white-space: pre;"> </span>$this->sServer = DB_SERVER;<br />
<span style="white-space: pre;"> </span>$this->sDatabase = DB_NAME;<br />
<span style="white-space: pre;"> </span>$this->sUsername = DB_USER;<br />
<span style="white-space: pre;"> </span>$this->sPassword = DB_PASSWORD;<br />
<br />
<span style="white-space: pre;"> </span>$this->dbConnection = NULL;<br />
<span style="white-space: pre;"> </span>$this->dbResultSet = NULL;<br />
<br />
<span style="white-space: pre;"> </span>$this->iCount = 0;<br />
<span style="white-space: pre;"> </span>$this->iAutoNumber = 0;<br />
<span style="white-space: pre;"> </span>$this->sError = NULL;<br />
<br />
<span style="white-space: pre;"> </span>if (!$this->dbConnection)<br />
<span style="white-space: pre;"> </span>$this->connect( );<br />
<span style="white-space: pre;"> </span>}<br />
<br />
<span style="white-space: pre;"> </span>function connect( )<br />
<span style="white-space: pre;"> </span>{<br />
<span style="white-space: pre;"> </span>$this->dbConnection = @mysqli_connect($this->sServer, $this->sUsername, $this->sPassword, $this->sDatabase);<br />
<br />
<span style="white-space: pre;"> </span>if (!$this->dbConnection)<br />
<span style="white-space: pre;"> </span>{<br />
<span style="white-space: pre;"> </span>print "Error: Unable to connect to the database Server.";<br />
<span style="white-space: pre;"> </span>exit( );<br />
<span style="white-space: pre;"> </span>}<br />
<br />
<br />
<span style="white-space: pre;"> </span>if (!@mysqli_select_db($this->dbConnection, $this->sDatabase))<br />
<span style="white-space: pre;"> </span>{<br />
<span style="white-space: pre;"> </span>print "Error: Unable to locate the Database.";<br />
<span style="white-space: pre;"> </span>exit( );<br />
<span style="white-space: pre;"> </span>}<br />
<span style="white-space: pre;"> </span>}<br />
<br />
<br />
<span style="white-space: pre;"> </span>function query($sQuery, $bFlag = false)<br />
<span style="white-space: pre;"> </span>{<br />
<span style="white-space: pre;"> </span>@mysqli_free_result($this->dbResultSet);<br />
<br />
<span style="white-space: pre;"> </span>$this->dbResultSet = @mysqli_query($this->dbConnection, $sQuery);<br />
<br />
<span style="white-space: pre;"> </span>if (!$this->dbResultSet)<br />
<span style="white-space: pre;"> </span>{<br />
<span style="white-space: pre;"> </span>$this->sError = @mysqli_error($this->dbConnection);<br />
<span style="white-space: pre;"> </span>$this->iCount = 0;<br />
<span style="white-space: pre;"> </span>$this->iFieldsCount = 0;<br />
<br />
<span style="white-space: pre;"> </span>return false;<br />
<span style="white-space: pre;"> </span>}<br />
<br />
<span style="white-space: pre;"> </span>else<br />
<span style="white-space: pre;"> </span>{<br />
<span style="white-space: pre;"> </span>$this->iCount = @mysqli_num_rows($this->dbResultSet);<br />
<span style="white-space: pre;"> </span>$this->iFieldsCount = @mysqli_num_fields($this->dbResultSet);<br />
<br />
<span style="white-space: pre;"> </span>return true;<br />
<span style="white-space: pre;"> </span>}<br />
<br />
<span style="white-space: pre;"> </span>}<br />
<br />
<br />
<span style="white-space: pre;"> </span>function getCount( )<br />
<span style="white-space: pre;"> </span>{<br />
<span style="white-space: pre;"> </span>return $this->iCount;<br />
<span style="white-space: pre;"> </span>}<br />
<br />
<br />
<span style="white-space: pre;"> </span>function getField($iIndex, $sField)<br />
<span style="white-space: pre;"> </span>{<br />
<br />
<span style="white-space: pre;"> </span>if ($this->dbResultSet === false)<br />
<span style="white-space: pre;"> </span>return false;<br />
<br />
<span style="white-space: pre;"> </span>if ($iIndex >= @mysqli_num_rows($this->dbResultSet))<br />
<span style="white-space: pre;"> </span>return false;<br />
<br />
<span style="white-space: pre;"> </span>if (@is_string($sField) && !(@strpos($sField, ".") === false))<br />
<span style="white-space: pre;"> </span>{<br />
<span style="white-space: pre;"> </span>$sTableField = @explode(".", $sField);<br />
<span style="white-space: pre;"> </span>$sField = -1;<br />
<span style="white-space: pre;"> </span>$sTableFields = @mysqli_fetch_fields($this->dbResultSet);<br />
<br />
<span style="white-space: pre;"> </span>for ($sRowId = 0; $sRowId < @mysqli_num_fields($this->dbResultSet); $sRowId++)<br />
<span style="white-space: pre;"> </span>{<br />
<span style="white-space: pre;"> </span>if ($sTableFields[$sRowId]->table == $sTableField[0] && $sTableFields[$sRowId]->name == $sTableField[1])<br />
<span style="white-space: pre;"> </span>{<br />
<span style="white-space: pre;"> </span>$sField = $sRowId;<br />
<span style="white-space: pre;"> </span>break;<br />
<span style="white-space: pre;"> </span>}<br />
<span style="white-space: pre;"> </span>}<br />
<br />
<span style="white-space: pre;"> </span>if ($sField == -1)<br />
<span style="white-space: pre;"> </span>return false;<br />
<span style="white-space: pre;"> </span>}<br />
<br />
<span style="white-space: pre;"> </span>@mysqli_data_seek($this->dbResultSet, $iIndex);<br />
<br />
<span style="white-space: pre;"> </span>$sDbLine = @mysqli_fetch_array($this->dbResultSet);<br />
<br />
<span style="white-space: pre;"> </span>return isset($sDbLine[$sField])? $sDbLine[$sField] : false;<br />
<br />
<span style="white-space: pre;"> </span>}<br />
<br />
<br />
<span style="white-space: pre;"> </span>function execute($sQuery, $bFlag = true)<br />
<span style="white-space: pre;"> </span>{<br />
@mysqli_free_result($this->dbResultSet);<br />
<br />
if (!@mysqli_query($this->dbConnection, $sQuery))<br />
{<br />
$this->sError = @mysqli_error($this->dbConnection);<br />
$this->iCount = 0;<br />
$this->iFieldsCount = 0;<br />
<br />
return false;<br />
}<br />
<br />
else<br />
{<br />
$this->iAutoNumber = @mysqli_insert_id($this->dbConnection);<br />
$this->iCount = 0;<br />
$this->iFieldsCount = 0;<br />
}<br />
<br />
<span style="white-space: pre;"> </span>return true;<br />
<span style="white-space: pre;"> </span>}<br />
<br />
<br />
<span style="white-space: pre;"> </span>function close( )<br />
<span style="white-space: pre;"> </span>{<br />
<span style="white-space: pre;"> </span>@mysqli_free_result($this->dbResultSet);<br />
<span style="white-space: pre;"> </span>@mysqli_close($this->dbConnection);<br />
<span style="white-space: pre;"> </span>}<br />
<br />
<br />
<span style="white-space: pre;"> </span>function error( )<br />
<span style="white-space: pre;"> </span>{<br />
<span style="white-space: pre;"> </span>return $this->sError;<br />
<span style="white-space: pre;"> </span>}<br />
<span style="white-space: pre;"> </span>}<br />
<div>
<br /></div>
</div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-58107031227415593562016-01-26T13:33:00.000+05:002016-01-26T13:33:01.243+05:00HTML Forms: jQuery Basics - Getting Started<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
So what is jQuery? From the jQuery web site: "<em>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.</em>"</div>
<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
Okay, but what does that mean to me? Put simply, jQuery will help you write JavaScript faster using a simpler syntax. Instead of writing extra lines of code or the writing the same code over and over, you can use jQuery to consolidate the code. jQuery will do the heavy lifting while you can concentrate on the more important stuff.</div>
<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
jQuery also supports the idea of plugins. Plugins allow people to create mini-libraries that complement jQuery. The plugins can be anything from form validation to picture slide shows. We will look at plugins in future articles.</div>
<h2 style="background-color: white; font-family: Helvetica, Arial; font-size: 16px; margin-top: 10px;">
Where to Start</h2>
<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
The first thing you will need to do to start using jQuery is to decide if you want to host the jQuery library or use a content delivery network (CDN). If you plan on hosting the jQuery library, you will need to download it from the jQuery web site (http://jquery.com) and upload it to your web server.</div>
<div id="olal-container" style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px;">
</div>
<div style="background-color: white; clear: both; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px;">
</div>
<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
The best way to use jQuery is to use a CDN. Both Microsoft and Google offer jQuery on their CDNs. There are several advantages to doing this. The first is that a CDN is spread out over the Internet. When someone comes to your web site and requests the jQuery library, it will be provided to them by the closest hosting site. This will help speed up the download of the library to their local machine. Which brings us to another point, the jQuery library is cached on the user's machine to help with speed.</div>
<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
The second reason is that if the user has been to another web site that had this CDN reference, the user will already have the jQuery file on their system. This will speed up the loading of your web page since they will not need to download the file again.</div>
<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
When you are looking at the different libraries for jQuery, you will notice there are two. One of them has a ".min" in the file name. This is a "minified" version of the file. It is smaller and will load faster. Why two versions? The non-minified version is easier to read, but since there is a lot of white space, it makes the file larger. It is used to help with debugging.</div>
<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
So whenever possible, always use the CDN and the minified version. This will help speed up your web site.</div>
<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
Next we need to create a reference to the jQuery library. This is done by adding a line in between the opening (<head>) and closing (</head>) HTML header tags. We will use the Microsoft CDN.</div>
<pre style="background-color: white; font-size: 12px; line-height: 19.2px; white-space: pre-wrap; word-wrap: break-word;"> <head>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
</head>
</pre>
<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
jQuery works like normal JavaScript in the fact that you use <script> tags to denote the script. These can be placed in the head section or the body section of your web page.</div>
<pre style="background-color: white; font-size: 12px; line-height: 19.2px; white-space: pre-wrap; word-wrap: break-word;"> <script>
Your script goes here
</script>
</pre>
<h2 style="background-color: white; font-family: Helvetica, Arial; font-size: 16px; margin-top: 10px;">
A Quick Example</h2>
<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
First, start by creating an HTML document. You can call this anything you want. Enter the code below:</div>
<pre style="background-color: white; font-size: 12px; line-height: 19.2px; white-space: pre-wrap; word-wrap: break-word;"> <html>
<head>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<a href="#">Click Me</a>
</body>
</html>
</pre>
<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
Currently, the link "Click Me" does nothing. Let us change that. Enter the code below in between the script tags.</div>
<pre style="background-color: white; font-size: 12px; line-height: 19.2px; white-space: pre-wrap; word-wrap: break-word;"> $(document).ready(function(){
$("a").click(function(event){
alert("You clicked me!");
});
});
</pre>
<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
What we did here was add a click event to the "Click Me" link. When it was clicked, it showed a JavaScript alert.</div>
<h2 style="background-color: white; font-family: Helvetica, Arial; font-size: 16px; margin-top: 10px;">
What is Up with the $</h2>
<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
The dollar sign ($) denotes a jQuery constructor. It can be written either as $() or jQuery(). The dollar sign is just a shortcut. All jQuery constructors must start with this.</div>
<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
The constructor starts with a $ and the selector is enclosed in parenthesis. A selector can be an element (tag), an element ID, an element class name. This is similar to the way CSS works. In the example above, we used the anchor tag (a) as a selector. When you use a selector, jQuery searches through the Document Object Model (DOM) to find all selectors that match. In the case of the example above, if we had more than one anchor tag, all anchor tags would now have a click event.</div>
<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
Since selectors work similar to CSS, you will need to specify the selectors in a similar way. When referencing HTML elements, you will just use the element as is. See the following examples:</div>
<pre style="background-color: white; font-size: 12px; line-height: 19.2px; white-space: pre-wrap; word-wrap: break-word;"> $("a") - all anchor tags
$("p") - all paragraph tags
$("p.subject") - all paragraph tags with a class of subject
</pre>
<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
When referencing class names, you must specify the period (.) before the class name as in the following examples:</div>
<pre style="background-color: white; font-size: 12px; line-height: 19.2px; white-space: pre-wrap; word-wrap: break-word;"> $(".subject") - all elements with the class name of subject
$("p.subject") - all paragraph tags with a class of subject
</pre>
<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
And last, when referencing IDs, you must specify the # before the ID name:</div>
<pre style="background-color: white; font-size: 12px; line-height: 19.2px; white-space: pre-wrap; word-wrap: break-word;"> $("#subject") - the element with the ID of subject
</pre>
<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
There are a few other types of selectors and we will talk about those in future articles. For now, these basic selectors should get you started.</div>
<h2 style="background-color: white; font-family: Helvetica, Arial; font-size: 16px; margin-top: 10px;">
Making Sure the Document is Ready</h2>
<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
As with JavaScript, you may want to execute your jQuery code after the HTML document has completely loaded and is ready to be manipulated. This is where the $(document).ready function comes in to play. This will keep the JavaScript and jQuery code unloaded until the document is ready. Once the document has loaded, the function will execute. This keeps the code from executing before the document is ready which could cause issues. If you tried to manipulate a DOM element before it was ready, you would lose that functionality.</div>
<h2 style="background-color: white; font-family: Helvetica, Arial; font-size: 16px; margin-top: 10px;">
Conclusion</h2>
<div style="background-color: white; font-family: Helvetica, Arial; font-size: 12px; line-height: 19.2px; padding: 5px 0px 0px;">
This article should be able to get you started using jQuery. The great thing about jQuery is that is does not replace JavaScript, just makes it better. Check back later as we will dive deeper into jQuery.</div>
<h3 style="background-color: white; font-family: Helvetica, Arial; font-size: 14px;">
Complete Code Example</h3>
<pre style="background-color: white; font-size: 12px; line-height: 19.2px; white-space: pre-wrap; word-wrap: break-word;"> <html>
<head>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("You clicked me!");
});
});
</script>
</head>
<body>
<a href="#">Click Me</a>
</body>
</html></pre>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-51277524522081965352013-02-05T13:48:00.001+05:002013-02-07T12:40:25.444+05:00HTML Basic Webpage and Template designing<div dir="ltr" style="text-align: left;" trbidi="on">
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<br />
<div class="MsoNoSpacing">
Confirming that we acknowledge that various people today
use <a href="http://www.fbcovercollection.com/" target="_blank">Content Management System CMS or Content Administration Frameworks</a> to take
care of your net space or resource. There are still webmasters who do custom
work. The pages of their areas have a private touch. It may be attractive or
engaging for the clients to see restricted part of its substance. This
presupposes presenting a defense, for which I will represent, using a table
that is indigent upon a class made as CSS. </div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
This should begin with, make a class that could be
recovered as we stated as a<a href="http://comwebsoft.blogspot.com/" target="_blank"> CSS template</a>. This class may have the going hand in
hand with structure:</div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<a href="http://www.fbcovercollection.com/" target="_blank">.styleClass</a></div>
<a href="http://www.fbcovercollection.com/" target="_blank">
</a><br />
<div class="MsoNoSpacing">
<a href="http://www.fbcovercollection.com/" target="_blank"><span style="mso-spacerun: yes;"> </span>{</a></div>
<a href="http://www.fbcovercollection.com/" target="_blank">
</a><br />
<div class="MsoNoSpacing" style="text-indent: .5in;">
<a href="http://www.fbcovercollection.com/" target="_blank">background-color: #000;</a></div>
<a href="http://www.fbcovercollection.com/" target="_blank">
</a><br />
<div class="MsoNoSpacing">
<a href="http://www.fbcovercollection.com/" target="_blank"><span style="mso-tab-count: 1;"> </span>border:
1px solid #ccc;</a></div>
<a href="http://www.fbcovercollection.com/" target="_blank">
</a><br />
<div class="MsoNoSpacing">
<a href="http://www.fbcovercollection.com/" target="_blank"><span style="mso-tab-count: 1;"> </span>padding:
2px 2px 2px 2px;</a></div>
<a href="http://www.fbcovercollection.com/" target="_blank">
</a><br />
<div class="MsoNoSpacing">
<a href="http://www.fbcovercollection.com/" target="_blank">}</a></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
The class name is .<i style="mso-bidi-font-style: normal;">styleClass</i>.
It several parameters working elaborate as under: </div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<b style="mso-bidi-font-weight: normal;">1. </b><span class="hps"><b style="mso-bidi-font-weight: normal;"><span lang="EN" style="mso-ansi-language: EN;">background-</span></b></span><b style="mso-bidi-font-weight: normal;"><span lang="EN" style="mso-ansi-language: EN;">color:</span></b><span lang="EN" style="mso-ansi-language: EN;"> </span><span style="mso-spacerun: yes;"> </span>The background color of the .<i style="mso-bidi-font-style: normal;">styleClass</i> is Black and its code is #000.
</div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<b style="mso-bidi-font-weight: normal;">2. border:</b><span style="mso-spacerun: yes;"> </span>Borders of the
class that has a thickness of 1 pixel and its color code # CCC. </div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<b style="mso-bidi-font-weight: normal;">3. padding:</b> It shows the detachment between the internal edge and
the territory in which the content material is to be call for working. For our
situation is 2 pixels on every last one of the four sides. </div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
To call this class can utilize two strategies.
Introducing into the zone <head>…</head> document the definition as
follows:</div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<a href="http://www.fbcovercollection.com/" target="_blank"><style type=”text/css”></a></div>
<a href="http://www.fbcovercollection.com/" target="_blank">
</a><br />
<div class="MsoNoSpacing" style="margin-left: .5in;">
<a href="http://www.fbcovercollection.com/" target="_blank">background-color: #000;</a></div>
<a href="http://www.fbcovercollection.com/" target="_blank">
</a><br />
<div class="MsoNoSpacing" style="margin-left: .5in;">
<a href="http://www.fbcovercollection.com/" target="_blank">border: 1px solid #ccc;</a></div>
<a href="http://www.fbcovercollection.com/" target="_blank">
</a><br />
<div class="MsoNoSpacing" style="margin-left: .5in;">
<a href="http://www.fbcovercollection.com/" target="_blank">padding: 2px 2px 2px 2px;</a></div>
<a href="http://www.fbcovercollection.com/" target="_blank">
</a><br />
<div class="MsoNoSpacing">
<a href="http://www.fbcovercollection.com/" target="_blank"></style></a></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNormal" style="line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span class="hps"><span lang="EN" style="mso-ansi-language: EN;">Or</span></span><span lang="EN" style="mso-ansi-language: EN;"> <span class="hps">create</span> <span class="hps">a style sheet</span>, <span class="hps">if
you have not</span> <span class="hps">already created</span>, <span class="hps">and
put in</span> <span class="hps">the same</span> <span class="hps">class</span> <span class="hps">definition</span> <span class="hps">box.</span> <span class="hps">If</span>
<span class="hps">that sheet</span> <span class="hps">is called</span> <span class="hps">styles.css</span> <span class="hps">and css in</span> <span class="hps">the</span>
<span class="hps">styles</span> <span class="hps">folder</span>, <span class="hps">you
must</span> <span class="hps">call</span> <span class="hps">in your</span> <span class="hps">document</span>, <span class="hps">also</span> <span class="hps">within
the area</span> <span class="hps"><head></span> <span class="hps">...</span> <span class="hps"><</span>/ <span class="hps">head></span>, <span class="hps">with</span>
<span class="hps">the following statement</span>:</span><br />
</div>
<div class="MsoNormal" style="line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<a href="http://comwebsoft.blogspot.com/" target="_blank"><span lang="EN" style="mso-ansi-language: EN;"><link href=”css/styles.css”rel=”stylesheet” type=”text/css” media=”all” /></span></a></div>
<div class="MsoNormal" style="line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<br />
<span class="hps"><span lang="EN" style="mso-ansi-language: EN;">What you need to do now is utilization the style on your locale website,
your blogs and web pages. To do this we will make a table used to keep the
content. Something similar to the following:</span></span><span lang="EN" style="mso-ansi-language: EN;"></span></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<a href="http://www.fbcovercollection.com/" target="_blank"><div class=”styleClass”></a></div>
<div class="MsoNoSpacing">
<a href="http://www.fbcovercollection.com/" target="_blank"> <table width=”100%”>
</a></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<a href="http://www.fbcovercollection.com/" target="_blank"><span style="mso-tab-count: 1;"> </span><tr></a></div>
<a href="http://www.fbcovercollection.com/" target="_blank">
</a><br />
<div class="MsoNoSpacing" style="margin-left: .5in;">
<a href="http://www.fbcovercollection.com/" target="_blank"><span style="mso-tab-count: 2;"> </span><td></a></div>
<a href="http://www.fbcovercollection.com/" target="_blank">
</a><br />
<div class="MsoNoSpacing" style="margin-left: .5in;">
<a href="http://www.fbcovercollection.com/" target="_blank"><span style="mso-tab-count: 3;"> </span>This
is a test page.</a></div>
<a href="http://www.fbcovercollection.com/" target="_blank">
</a><br />
<div class="MsoNoSpacing" style="margin-left: .5in;">
<a href="http://www.fbcovercollection.com/" target="_blank"><span style="mso-tab-count: 2;"> </span></td></a></div>
<a href="http://www.fbcovercollection.com/" target="_blank"> </tr></a><br />
<a href="http://www.fbcovercollection.com/" target="_blank"> </table></a><span style="display: none; mso-hide: all;"></span>
<br />
<div class="MsoNoSpacing">
<a href="http://www.fbcovercollection.com/" target="_blank"></div></a></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNormal">
Save this file as index.html and open it into your browser
and see the results. Enjoy it!</div>
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Normal</w:View>
<w:Zoom>0</w:Zoom>
<w:TrackMoves/>
<w:TrackFormatting/>
<w:PunctuationKerning/>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:DoNotPromoteQF/>
<w:LidThemeOther>EN-US</w:LidThemeOther>
<w:LidThemeAsian>X-NONE</w:LidThemeAsian>
<w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript>
<w:Compatibility>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
<w:UseAsianBreakRules/>
<w:DontGrowAutofit/>
<w:SplitPgBreakAndParaMark/>
<w:EnableOpenTypeKerning/>
<w:DontFlipMirrorIndents/>
<w:OverrideTableStyleHps/>
</w:Compatibility>
<m:mathPr>
<m:mathFont m:val="Cambria Math"/>
<m:brkBin m:val="before"/>
<m:brkBinSub m:val="--"/>
<m:smallFrac m:val="off"/>
<m:dispDef/>
<m:lMargin m:val="0"/>
<m:rMargin m:val="0"/>
<m:defJc m:val="centerGroup"/>
<m:wrapIndent m:val="1440"/>
<m:intLim m:val="subSup"/>
<m:naryLim m:val="undOvr"/>
</m:mathPr></w:WordDocument>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:LatentStyles DefLockedState="false" DefUnhideWhenUsed="true"
DefSemiHidden="true" DefQFormat="false" DefPriority="99"
LatentStyleCount="267">
<w:LsdException Locked="false" Priority="0" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Normal"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="heading 1"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 2"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 3"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 4"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 5"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 6"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 7"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 8"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 9"/>
<w:LsdException Locked="false" Priority="39" Name="toc 1"/>
<w:LsdException Locked="false" Priority="39" Name="toc 2"/>
<w:LsdException Locked="false" Priority="39" Name="toc 3"/>
<w:LsdException Locked="false" Priority="39" Name="toc 4"/>
<w:LsdException Locked="false" Priority="39" Name="toc 5"/>
<w:LsdException Locked="false" Priority="39" Name="toc 6"/>
<w:LsdException Locked="false" Priority="39" Name="toc 7"/>
<w:LsdException Locked="false" Priority="39" Name="toc 8"/>
<w:LsdException Locked="false" Priority="39" Name="toc 9"/>
<w:LsdException Locked="false" Priority="35" QFormat="true" Name="caption"/>
<w:LsdException Locked="false" Priority="10" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Title"/>
<w:LsdException Locked="false" Priority="1" Name="Default Paragraph Font"/>
<w:LsdException Locked="false" Priority="11" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtitle"/>
<w:LsdException Locked="false" Priority="22" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Strong"/>
<w:LsdException Locked="false" Priority="20" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Emphasis"/>
<w:LsdException Locked="false" Priority="59" SemiHidden="false"
UnhideWhenUsed="false" Name="Table Grid"/>
<w:LsdException Locked="false" UnhideWhenUsed="false" Name="Placeholder Text"/>
<w:LsdException Locked="false" Priority="1" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="No Spacing"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 1"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 1"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 1"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 1"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 1"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 1"/>
<w:LsdException Locked="false" UnhideWhenUsed="false" Name="Revision"/>
<w:LsdException Locked="false" Priority="34" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="List Paragraph"/>
<w:LsdException Locked="false" Priority="29" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Quote"/>
<w:LsdException Locked="false" Priority="30" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Quote"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 1"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 1"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 1"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 1"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 1"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 1"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 1"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 1"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 2"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 2"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 2"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 2"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 2"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 2"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 2"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 2"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 2"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 2"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 2"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 2"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 2"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 2"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 3"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 3"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 3"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 3"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 3"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 3"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 3"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 3"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 3"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 3"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 3"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 3"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 3"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 3"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 4"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 4"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 4"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 4"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 4"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 4"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 4"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 4"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 4"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 4"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 4"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 4"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 4"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 4"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 5"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 5"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 5"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 5"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 5"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 5"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 5"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 5"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 5"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 5"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 5"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 5"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 5"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 5"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 6"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 6"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 6"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 6"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 6"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 6"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 6"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 6"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 6"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 6"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 6"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 6"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 6"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 6"/>
<w:LsdException Locked="false" Priority="19" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtle Emphasis"/>
<w:LsdException Locked="false" Priority="21" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Emphasis"/>
<w:LsdException Locked="false" Priority="31" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtle Reference"/>
<w:LsdException Locked="false" Priority="32" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Reference"/>
<w:LsdException Locked="false" Priority="33" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Book Title"/>
<w:LsdException Locked="false" Priority="37" Name="Bibliography"/>
<w:LsdException Locked="false" Priority="39" QFormat="true" Name="TOC Heading"/>
</w:LatentStyles>
</xml><![endif]--><!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin-top:0in;
mso-para-margin-right:0in;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0in;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}
</style>
<![endif]--></div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-13165221829741268402012-08-31T10:43:00.002+05:002012-08-31T10:43:49.183+05:00JavaScript and HTML DOM Reference<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
JavaScript Objects Reference</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The references describe the properties and methods of each object, along with examples.</div>
<ul style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<li><a href="http://www.w3schools.com/jsref/jsref_obj_array.asp" style="color: #900b09;">Array object</a></li>
<li><a href="http://www.w3schools.com/jsref/jsref_obj_boolean.asp" style="color: #900b09;">Boolean object</a></li>
<li><a href="http://www.w3schools.com/jsref/jsref_obj_date.asp" style="color: #900b09;">Date object</a></li>
<li><a href="http://www.w3schools.com/jsref/jsref_obj_math.asp" style="color: #900b09;">Math object</a></li>
<li><a href="http://www.w3schools.com/jsref/jsref_obj_number.asp" style="color: #900b09;">Number object</a></li>
<li><a href="http://www.w3schools.com/jsref/jsref_obj_string.asp" style="color: #900b09;">String object</a></li>
<li><a href="http://www.w3schools.com/jsref/jsref_obj_regexp.asp" style="color: #900b09;">RegExp object</a></li>
<li><a href="http://www.w3schools.com/jsref/jsref_obj_global.asp" style="color: #900b09;">Global properties and functions</a></li>
</ul>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Browser Objects Reference</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The references describe the properties and methods of each object, along with examples.</div>
<ul style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<li><a href="http://www.w3schools.com/jsref/obj_window.asp" style="color: #900b09;">Window object</a></li>
<li><a href="http://www.w3schools.com/jsref/obj_navigator.asp" style="color: #900b09;">Navigator object</a></li>
<li><a href="http://www.w3schools.com/jsref/obj_screen.asp" style="color: #900b09;">Screen object</a></li>
<li><a href="http://www.w3schools.com/jsref/obj_history.asp" style="color: #900b09;">History object</a></li>
<li><a href="http://www.w3schools.com/jsref/obj_location.asp" style="color: #900b09;">Location object</a></li>
</ul>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Core DOM Objects Reference</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The references describe the properties and methods of each object, along with examples.</div>
<ul style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<li><a href="http://www.w3schools.com/jsref/dom_obj_node.asp" style="color: #900b09;">DOM Node</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_nodelist.asp" style="color: #900b09;">DOM NodeList</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_namednodemap.asp" style="color: #900b09;">DOM NamedNodeMap</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_core_document.asp" style="color: #900b09;">DOM Document</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_element.asp" style="color: #900b09;">DOM Element</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_attr.asp" style="color: #900b09;">DOM Attr</a></li>
</ul>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
HTML DOM Objects Reference</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The references describe the properties and methods of each object, along with examples.</div>
<ul style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<li><a href="http://www.w3schools.com/jsref/dom_obj_document.asp" style="color: #900b09;">Document object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_event.asp" style="color: #900b09;">Event object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_all.asp" style="color: #900b09;">HTMLElement object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_anchor.asp" style="color: #900b09;">Anchor object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_area.asp" style="color: #900b09;">Area object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_base.asp" style="color: #900b09;">Base object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_body.asp" style="color: #900b09;">Body object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_pushbutton.asp" style="color: #900b09;">Button object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_form.asp" style="color: #900b09;">Form object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_frame.asp" style="color: #900b09;">Frame/IFrame object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_frameset.asp" style="color: #900b09;">Frameset object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_image.asp" style="color: #900b09;">Image object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_button.asp" style="color: #900b09;">Input Button object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_checkbox.asp" style="color: #900b09;">Input Checkbox object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_fileupload.asp" style="color: #900b09;">Input File object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_hidden.asp" style="color: #900b09;">Input Hidden object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_password.asp" style="color: #900b09;">Input Password object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_radio.asp" style="color: #900b09;">Input Radio object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_reset.asp" style="color: #900b09;">Input Reset object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_submit.asp" style="color: #900b09;">Input Submit object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_text.asp" style="color: #900b09;">Input Text object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_link.asp" style="color: #900b09;">Link object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_meta.asp" style="color: #900b09;">Meta object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_object.asp" style="color: #900b09;">Object object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_option.asp" style="color: #900b09;">Option object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_select.asp" style="color: #900b09;">Select object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_style.asp" style="color: #900b09;">Style object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_table.asp" style="color: #900b09;">Table object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_tabledata.asp" style="color: #900b09;">td / th object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_tablerow.asp" style="color: #900b09;">tr object</a></li>
<li><a href="http://www.w3schools.com/jsref/dom_obj_textarea.asp" style="color: #900b09;">Textarea object</a></li>
</ul>
<br class="Apple-interchange-newline" /></div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-87810913232689002442012-08-31T10:42:00.003+05:002012-08-31T10:42:54.695+05:00JavaScript Quiz Test<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="intro" style="color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 14px; margin-top: 10px;">
You can test your JavaScript skills with W3Schools' Quiz.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
The Test</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The test contains 20 questions and there is no time limit.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The test is not official, it's just a nice way to see how much you know, or don't know, about JavaScript.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Count Your Score</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 20 points.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Good luck! <a href="http://www.w3schools.com/quiztest/quiztest.asp?qtest=JavaScript" style="color: #900b09;" target="_top">Start the JavaScript Quiz</a></div>
<br class="Apple-interchange-newline" /></div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-18944025585391720582012-08-31T10:42:00.000+05:002012-08-31T10:42:06.744+05:00JavaScript HTML DOM Examples<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="intro" style="color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 14px; margin-top: 10px;">
Examples of using JavaScript to access and manipulate the HTML DOM objects.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Document Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_text" style="color: #900b09;" target="_blank">Write text to the output with document.write()</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_formattext" style="color: #900b09;" target="_blank">Write formatted text to the output with document.write()</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_anchors" style="color: #900b09;" target="_blank">Return the number of anchors in a document</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_anchors2" style="color: #900b09;" target="_blank">Return the innerHTML of the first anchor in a document</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_forms" style="color: #900b09;" target="_blank">Return the number of forms in a document</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_forms2" style="color: #900b09;" target="_blank">Return the name of the first form in a document</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_images" style="color: #900b09;" target="_blank">Return the number of images in a document</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_images2" style="color: #900b09;" target="_blank">Return the id of the first image in a document</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_links" style="color: #900b09;" target="_blank">Return the number of links in a document</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_links2" style="color: #900b09;" target="_blank">Return the id of the first link in a document</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_cookie" style="color: #900b09;" target="_blank">Return all name/value pairs of cookies in a document</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_domain" style="color: #900b09;" target="_blank">Return the domain name of the server that loaded the document</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_lastmodified" style="color: #900b09;" target="_blank">Return the date and time the document was last modified</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_referrer" style="color: #900b09;" target="_blank">Return the URL of the document that loaded the current document</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_title" style="color: #900b09;" target="_blank">Return the title of a document</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_url" style="color: #900b09;" target="_blank">Return the full URL of a document</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_open" style="color: #900b09;" target="_blank">Open an output stream, and add some text</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_open2" style="color: #900b09;" target="_blank">Open an output stream in a new window, and add some text</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_writeln" style="color: #900b09;" target="_blank">Difference between write() and writeln()</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_getelementbyid" style="color: #900b09;" target="_blank">Alert innerHTML of an element with a specific ID</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_getelementsbyname" style="color: #900b09;" target="_blank">Alert the number of elements with a specific name</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_getelementsbytagname" style="color: #900b09;" target="_blank">Alert the number of elements with a specific tagname</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
More Document object examples in our <a href="http://www.w3schools.com/jsref/dom_obj_document.asp" style="color: #900b09;">JavaScript reference</a>.</div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Anchor Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_anchor_charset" style="color: #900b09;" target="_blank">Return and set the value of the charset attribute of a link</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_anchor_href" style="color: #900b09;" target="_blank">Return the value of the href attribute of a link</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_anchor_hreflang" style="color: #900b09;" target="_blank">Return and set the value of the hreflang attribute of a link</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_anchor_name" style="color: #900b09;" target="_blank">Return the name of an anchor</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_anchor_rel" style="color: #900b09;" target="_blank">Return the relationship between the current document and the linked document</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_anchor_target" style="color: #900b09;" target="_blank">Change the target attribute of a link</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_anchor_type" style="color: #900b09;" target="_blank">Return the value of the type attribute of a link</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
More Anchor object examples in our <a href="http://www.w3schools.com/jsref/dom_obj_anchor.asp" style="color: #900b09;">JavaScript reference</a>.</div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Area Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_area_alt" style="color: #900b09;" target="_blank">Return the alternate text for an area in an image-map</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_area_coords" style="color: #900b09;" target="_blank">Return the coordinates of an area in an image-map</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_area_hash" style="color: #900b09;" target="_blank">Return the anchor part of the href attribute of an area</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_area_host" style="color: #900b09;" target="_blank">Return the hostname:port for an area in an image-map</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_area_hostname" style="color: #900b09;" target="_blank">Return the hostname for an area in an image-map</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_area_port" style="color: #900b09;" target="_blank">Return the port for an area in an image-map</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_area_href" style="color: #900b09;" target="_blank">Return the href of an area in an image-map</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_area_pathname" style="color: #900b09;" target="_blank">Return the pathname for an area in an image-map</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_area_protocol" style="color: #900b09;" target="_blank">Return the protocol for an area in an image-map</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_area_search" style="color: #900b09;" target="_blank">Return the querystring part of the href attribute of an area</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_area_shape" style="color: #900b09;" target="_blank">Return the shape of an area in an image-map</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_area_target" style="color: #900b09;" target="_blank">Return the value of the target attribute for an area in an image-map</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
More Area object examples in our <a href="http://www.w3schools.com/jsref/dom_obj_area.asp" style="color: #900b09;">JavaScript reference</a>.</div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Base Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_base_href" style="color: #900b09;" target="_blank">Return the base URL for all relative URLs on a page</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_base_target" style="color: #900b09;" target="_blank">Return the base target for all links on a page</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
More Base object examples in our <a href="http://www.w3schools.com/jsref/dom_obj_base.asp" style="color: #900b09;">JavaScript reference</a>.</div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Button Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_button_disabled" style="color: #900b09;" target="_blank">Set a button to disabled when clicked</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_button_name" style="color: #900b09;" target="_blank">Return the name of a button</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_button_type" style="color: #900b09;" target="_blank">Return the type of a button</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_button_value" style="color: #900b09;" target="_blank">Return the text displayed on a button</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_button_form" style="color: #900b09;" target="_blank">Return the id of the form a button belongs to</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
More Button object examples in our <a href="http://www.w3schools.com/jsref/dom_obj_pushbutton.asp" style="color: #900b09;">JavaScript reference</a>.</div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Form Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_elements" style="color: #900b09;" target="_blank">Return the value of each element in a form</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_acceptcharset" style="color: #900b09;" target="_blank">Return the value of the accept-charset attribute in a form</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_action" style="color: #900b09;" target="_blank">Return the value of the action attribute in a form</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_enctype" style="color: #900b09;" target="_blank">Return the value of the enctype attribute in a form</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_length" style="color: #900b09;" target="_blank">Return the number of elements in a form</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_method" style="color: #900b09;" target="_blank">Return the method for sending form data</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_name" style="color: #900b09;" target="_blank">Return the name of a form</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_target" style="color: #900b09;" target="_blank">Return the value of the target attribute in a form</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_reset" style="color: #900b09;" target="_blank">Reset a form</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_submit" style="color: #900b09;" target="_blank">Submit a form</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
More Form object examples in our <a href="http://www.w3schools.com/jsref/dom_obj_form.asp" style="color: #900b09;">JavaScript reference</a>.</div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Frame/IFrame Objects</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_align" style="color: #900b09;" target="_blank">Align an iframe</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_contentdocument" style="color: #900b09;" target="_blank">Change the background color of the document contained in an iframe</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_frameborder" style="color: #900b09;" target="_blank">Return the value of the frameborder attribute in an iframe</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_frameborder2" style="color: #900b09;" target="_blank">Remove frameborder of an iframe</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_height" style="color: #900b09;" target="_blank">Change the height and width of an iframe</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_longdesc" style="color: #900b09;" target="_blank">Return the value of the longdesc attribute in an iframe</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_marginheight" style="color: #900b09;" target="_blank">Return the value of the marginheight attribute in an iframe</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_marginwidth" style="color: #900b09;" target="_blank">Return the value of the marginwidth attribute in an iframe</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_name" style="color: #900b09;" target="_blank">Return the value of the name attribute in an iframe</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_scrolling" style="color: #900b09;" target="_blank">Return and set the value of the scrolling attribute in an iframe</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_src" style="color: #900b09;" target="_blank">Change the src attribute of an iframe</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
More Frame/IFrame object examples in our <a href="http://www.w3schools.com/jsref/dom_obj_frame.asp" style="color: #900b09;">JavaScript reference</a>.</div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Image Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_align" style="color: #900b09;" target="_blank">Align an image</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_alt" style="color: #900b09;" target="_blank">Return the alternate text of an image</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_border" style="color: #900b09;" target="_blank">Add border to an image</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_height" style="color: #900b09;" target="_blank">Change the height and width of an image</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_hspace" style="color: #900b09;" target="_blank">Set the hspace and vspace properties of an image</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_longdesc" style="color: #900b09;" target="_blank">Return the value of the longdesc attribute of an image</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_lowsrc" style="color: #900b09;" target="_blank">Create a link to a low-resolution version of an image</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_name" style="color: #900b09;" target="_blank">Return the name of an image</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_src" style="color: #900b09;" target="_blank">Change the src of an image</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_usemap" style="color: #900b09;" target="_blank">Return the value of the usemap attribute of a client-side image-map</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
More Image object examples in our <a href="http://www.w3schools.com/jsref/dom_obj_image.asp" style="color: #900b09;">JavaScript reference</a>.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
</div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Event Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onblur" style="color: #900b09;" target="_blank">onblur - Execute a JavaScript when a user leaves an input field</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange" style="color: #900b09;" target="_blank">onchange - Execute a JavaScript when a user changes the content of an input field</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick" style="color: #900b09;" target="_blank">onclick - Execute a JavaScript when a button is clicked</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_ondblclick" style="color: #900b09;" target="_blank">ondblclick - Execute a JavaScript when a button is double-clicked</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onerror" style="color: #900b09;" target="_blank">onerror - Execute a JavaScript if an error occurs when loading an image</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onfocus" style="color: #900b09;" target="_blank">onfocus - Execute a JavaScript when an input field gets focus</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeydown" style="color: #900b09;" target="_blank">onkeydown - Execute a JavaScript when a user is pressing/holding down a key</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeypress" style="color: #900b09;" target="_blank">onkeypress - Execute a JavaScript when a user is pressing/holding down a key</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeyup" style="color: #900b09;" target="_blank">onkeyup - Execute a JavaScript when the user releases a key</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_body_onload" style="color: #900b09;" target="_blank">onload - Execute a JavaScript immediately after a page has been loaded</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_onload" style="color: #900b09;" target="_blank">onload - Execute a JavaScript immediately after an image has been loaded</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousedown" style="color: #900b09;" target="_blank">onmousedown + onmouseup - Execute scripts when pressing/releasing a mouse button</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousedown2" style="color: #900b09;" target="_blank">onmousedown - Alert which mouse button the user pressed</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_srcelement" style="color: #900b09;" target="_blank">onmousedown - Alert the name of the element a user clicked on</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousemove" style="color: #900b09;" target="_blank">onmousemove + onmouseout - Execute scripts when moving the mouse pointer over/out of an image</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover" style="color: #900b09;" target="_blank">onmouseover + onmouseout - Execute scripts when moving the mouse over/out of an image</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onresize" style="color: #900b09;" target="_blank">onresize - Execute a JavaScript when the browser window is resized</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onselect" style="color: #900b09;" target="_blank">onselect - Execute a JavaScript after some text has been selected</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onunload" style="color: #900b09;" target="_blank">onunload - Execute a JavaScript before the browser closes the document</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_event_keycode" style="color: #900b09;" target="_blank">What is the keycode of the key pressed?</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_event_clientxy" style="color: #900b09;" target="_blank">What are the coordinates of the cursor?</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_event_screenxy" style="color: #900b09;" target="_blank">What are the coordinates of the cursor, relative to the screen?</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_event_shiftkey" style="color: #900b09;" target="_blank">Was the shift key pressed?</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_event_type" style="color: #900b09;" target="_blank">Which event type occurred?</a></div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Option and Select Objects</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_select_disabled" style="color: #900b09;" target="_blank">Disable and enable a dropdown list</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_select_form" style="color: #900b09;" target="_blank">Get the id of the form that contains the dropdown list</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_select_length" style="color: #900b09;" target="_blank">Get the number of options in the dropdown list</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_select_size" style="color: #900b09;" target="_blank">Turn the dropdown list into a multiline list</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_select_multiple" style="color: #900b09;" target="_blank">Select multiple options in a dropdown list</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_select_options" style="color: #900b09;" target="_blank">Alert the selected option in a dropdown list</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_option_index" style="color: #900b09;" target="_blank">Alert the index of the selected option in a dropdown list</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_option_settext" style="color: #900b09;" target="_blank">Change the text of the selected option</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_select_remove" style="color: #900b09;" target="_blank">Remove options from a dropdown list</a></div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Table, TableHeader, TableRow, TableData Objects</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_border" style="color: #900b09;" target="_blank">Change the width of a table border</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_paddspac" style="color: #900b09;" target="_blank">Change the cellPadding and cellSpacing of a table</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_frame" style="color: #900b09;" target="_blank">Specify frames of a table</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_rules" style="color: #900b09;" target="_blank">Specify rules for a table</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_rows" style="color: #900b09;" target="_blank">InnerHTML of a row</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_cells" style="color: #900b09;" target="_blank">InnerHTML of a cell</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_createcaption" style="color: #900b09;" target="_blank">Create a caption for a table</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_deleterow" style="color: #900b09;" target="_blank">Delete rows in a table</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_insertrow" style="color: #900b09;" target="_blank">Add rows to a table</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_tablerow_insertcell" style="color: #900b09;" target="_blank">Add cells to a table row</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_tablerow_align" style="color: #900b09;" target="_blank">Align the cell content in a table row</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_tablerow_valign" style="color: #900b09;" target="_blank">Vertical align the cell content in a table row</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_tablecell_align" style="color: #900b09;" target="_blank">Align the cell content in a single cell</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_tablecell_valign" style="color: #900b09;" target="_blank">Vertical align the cell content in a single cell</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_tablerow_cells" style="color: #900b09;" target="_blank">Change the content of a table cell</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_tablecell_colspan" style="color: #900b09;" target="_blank">Change the colspan of a table row</a></div>
<br class="Apple-interchange-newline" /></div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com1tag:blogger.com,1999:blog-5050101502174498444.post-12952895947924124222012-08-31T10:41:00.000+05:002012-08-31T10:41:17.127+05:00JavaScript Browser Objects Examples<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="intro" style="color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 14px; margin-top: 10px;">
Examples of using JavaScript to access and manipulate the Browser objects.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Window Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_alert" style="color: #900b09;" target="_blank">Display an alert box</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_alert2" style="color: #900b09;" target="_blank">Display an alert box with line-breaks</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_confirm" style="color: #900b09;" target="_blank">Display a confirm box, and alert what the visitor clicked</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt" style="color: #900b09;" target="_blank">Display a prompt box</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_window_popup" style="color: #900b09;" target="_blank">Create a pop-up window</a> <a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_openwindow" style="color: #900b09;" target="_blank">Open a new window when clicking on a button</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_openallwindow" style="color: #900b09;" target="_blank">Open a new window and control its appearance</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_multiwindows" style="color: #900b09;" target="_blank">Open multiple new windows</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_win_blur" style="color: #900b09;" target="_blank">Assure that the new window does NOT get focus (send it to the background)</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_win_focus" style="color: #900b09;" target="_blank">Assure that the new window GETS focus</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_win_close" style="color: #900b09;" target="_blank">Close the new window</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_win_closed" style="color: #900b09;" target="_blank">Checks whether the new window has been closed or not</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_win_name" style="color: #900b09;" target="_blank">Return the name of the new window</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_win_opener" style="color: #900b09;" target="_blank">Write some text to the source (parent) window</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_win_moveby" style="color: #900b09;" target="_blank">Move the new window relative to its current position</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_win_moveto" style="color: #900b09;" target="_blank">Move the new window to the specified position</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_print" style="color: #900b09;" target="_blank">Print the current page</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_window_resizeby" style="color: #900b09;" target="_blank">Resize a window by the specified pixels</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_window_resizeto" style="color: #900b09;" target="_blank">Resize a window to a specified size</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_window_scrollby" style="color: #900b09;" target="_blank">Scroll the content by the specified number of pixels</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_window_scrollto" style="color: #900b09;" target="_blank">Scroll the content to a specified position</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing2" style="color: #900b09;" target="_blank">A simple timing</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_stop" style="color: #900b09;" target="_blank">Set and stop a timer with setTimeout() and clearTimeout()</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_setinterval" style="color: #900b09;" target="_blank">Set and stop a timer with setInterval() and clearInterval()</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
More Window object examples in our <a href="http://www.w3schools.com/jsref/obj_window.asp" style="color: #900b09;">JavaScript reference</a>.</div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Navigator Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=try_nav_all" style="color: #900b09;" target="_blank">All details about the visitor's browser</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
More Navigator object examples in our <a href="http://www.w3schools.com/jsref/obj_navigator.asp" style="color: #900b09;">JavaScript reference</a>.</div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Screen Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_screen_all" style="color: #900b09;" target="_blank">All details about the visitor's screen</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
More Screen object examples in our <a href="http://www.w3schools.com/jsref/obj_screen.asp" style="color: #900b09;">JavaScript reference</a>.</div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
History Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_his_length" style="color: #900b09;" target="_blank">Return the number of URLs in the history list</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_his_back" style="color: #900b09;" target="_blank">Create a back button on a page</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_his_forward" style="color: #900b09;" target="_blank">Create a forward button on a page</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_his_go" style="color: #900b09;" target="_blank">Load a specific URL from the history list</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
More History object examples in our <a href="http://www.w3schools.com/jsref/obj_history.asp" style="color: #900b09;">JavaScript reference</a>.</div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Location Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_loc_host" style="color: #900b09;" target="_blank">Return the hostname and port of the current URL</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_loc_href" style="color: #900b09;" target="_blank">Return the entire URL of the current page</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_loc_pathname" style="color: #900b09;" target="_blank">Return the path name of the current URL</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_loc_protocol" style="color: #900b09;" target="_blank">Return the protocol portion of the current URL</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_loc_assign" style="color: #900b09;" target="_blank">Load a new document</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_loc_reload" style="color: #900b09;" target="_blank">Reload the current document</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_loc_replace" style="color: #900b09;" target="_blank">Replace the current document</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_breakout" style="color: #900b09;" target="_blank">Break out of a frame</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
More Location object examples in our <a href="http://www.w3schools.com/jsref/obj_location.asp" style="color: #900b09;">JavaScript reference</a>.</div>
<br class="Apple-interchange-newline" /></div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-24837119206277048452012-08-31T10:40:00.002+05:002012-08-31T10:40:24.629+05:00JavaScript Objects Examples<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="intro" style="color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 14px; margin-top: 10px;">
Examples of using the built-in JavaScript objects.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
String Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_length_string" style="color: #900b09;" target="_blank">Return the length of a string</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_str_style" style="color: #900b09;" target="_blank">Style strings</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_indexof" style="color: #900b09;" target="_blank">Return the position of the first occurrence of a text in a string - indexOf()</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_match" style="color: #900b09;" target="_blank">Search for a text in a string and return the text if found - match()</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_replace" style="color: #900b09;" target="_blank">Replace characters in a string - replace()</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
More String object examples in our <a href="http://www.w3schools.com/jsref/jsref_obj_string.asp" style="color: #900b09;">JavaScript reference</a>.</div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Date Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_date" style="color: #900b09;" target="_blank">Use Date() to return today's date and time</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_gettime" style="color: #900b09;" target="_blank">Use getTime() to calculate the number of milliseconds since 1970</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_setfullyear2" style="color: #900b09;" target="_blank">Use setFullYear() to set a specific date</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_toutcstring" style="color: #900b09;" target="_blank">Use toUTCString() to convert today's date (according to UTC) to a string</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_date_weekday" style="color: #900b09;" target="_blank">Use getDay() and an array to write a weekday, and not just a number</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock" style="color: #900b09;" target="_blank">Display a clock</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
More Date object examples in our <a href="http://www.w3schools.com/jsref/jsref_obj_date.asp" style="color: #900b09;">JavaScript reference</a>.</div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Array Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_array" style="color: #900b09;" target="_blank">Create an array</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_concat" style="color: #900b09;" target="_blank">Join two arrays - concat()</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_concat2" style="color: #900b09;" target="_blank">Join three arrays - concat()</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_join" style="color: #900b09;" target="_blank">Join all elements of an array into a string - join()</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_pop" style="color: #900b09;" target="_blank">Remove the last element of an array - pop()</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_push" style="color: #900b09;" target="_blank">Add new elements to the end of an array - push()</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_reverse" style="color: #900b09;" target="_blank">Reverse the order of the elements in an array - reverse()</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_shift" style="color: #900b09;" target="_blank">Remove the first element of an array - shift()</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_slice_array" style="color: #900b09;" target="_blank">Select elements from an array - slice()</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_sort" style="color: #900b09;" target="_blank">Sort an array (alphabetically and ascending) - sort()</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_sort2" style="color: #900b09;" target="_blank">Sort numbers (numerically and ascending) - sort()</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_sort3" style="color: #900b09;" target="_blank">Sort numbers (numerically and descending) - sort()</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_splice" style="color: #900b09;" target="_blank">Add an element to position 2 in an array - splice()</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_tostring_array" style="color: #900b09;" target="_blank">Convert an array to a string - toString()</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_unshift" style="color: #900b09;" target="_blank">Add new elements to the beginning of an array - unshift()</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
More Array object examples in our <a href="http://www.w3schools.com/jsref/jsref_obj_array.asp" style="color: #900b09;">JavaScript reference</a>.</div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Boolean Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_boolean" style="color: #900b09;" target="_blank">Check Boolean value</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
More Boolean object examples in our <a href="http://www.w3schools.com/jsref/jsref_obj_boolean.asp" style="color: #900b09;">JavaScript reference</a>.</div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Math Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_round" style="color: #900b09;" target="_blank">Use round() to round a number</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_random" style="color: #900b09;" target="_blank">Use random() to return a random number between 0 and 1</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_max" style="color: #900b09;" target="_blank">Use max() to return the number with the highest value of two specified numbers</a><br /><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_min" style="color: #900b09;" target="_blank">Use min() to return the number with the lowest value of two specified numbers</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_celsius" style="color: #900b09;" target="_blank">Convert Celsius to Fahrenheit</a></div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
General</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_object_for_in" style="color: #900b09;" target="_blank">Use a for...in statement to loop through the elements of an object</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
More Math object examples in our <a href="http://www.w3schools.com/jsref/jsref_obj_math.asp" style="color: #900b09;">JavaScript reference</a>.</div>
<br class="Apple-interchange-newline" /></div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-45726980884286753252012-08-31T10:39:00.002+05:002012-08-31T10:39:45.473+05:00JavaScript Examples<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Basic JavaScript Examples</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_write" style="color: #900b09;" target="_blank">Write to the Document with JavaScript</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_dom" style="color: #900b09;" target="_blank">Change HTML elements with JavaScript</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_externalexample" style="color: #900b09;" target="_blank">An external JavaScript</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b><a href="http://www.w3schools.com/js/js_howto.asp" style="color: #900b09;">Examples explained</a></b></div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
JavaScript Statements, Comments and Blocks</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_statements" style="color: #900b09;" target="_blank">JavaScript statements.</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_blocks" style="color: #900b09;" target="_blank">JavaScript blocks.</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_comments1" style="color: #900b09;" target="_blank">Single line comments.</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_comments2" style="color: #900b09;" target="_blank">Multiple lines comments.</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_comments3" style="color: #900b09;" target="_blank">Single line comment to prevent execution.</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_comments4" style="color: #900b09;" target="_blank">Multiple lines comment to prevent execution.</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b><a href="http://www.w3schools.com/js/js_statements.asp" style="color: #900b09;">Examples explained</a></b></div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
JavaScript Variables</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_variable" style="color: #900b09;" target="_blank">Declare a variable, assign a value to it, and display it</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b><a href="http://www.w3schools.com/js/js_variables.asp" style="color: #900b09;">Examples explained</a></b></div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
JavaScript Conditional If ... Else</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_ifthen" style="color: #900b09;" target="_blank">If statement</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_ifthenelse" style="color: #900b09;" target="_blank">If...else statement</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_randomlink" style="color: #900b09;" target="_blank">Random link</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_switch" style="color: #900b09;" target="_blank">Switch statement</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b><a href="http://www.w3schools.com/js/js_if_else.asp" style="color: #900b09;">Examples explained</a></b></div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
JavaScript Popup Boxes</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_alert" style="color: #900b09;" target="_blank">Alert box</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_alert2" style="color: #900b09;" target="_blank">Alert box with line breaks</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_confirm" style="color: #900b09;" target="_blank">Confirm box</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt" style="color: #900b09;" target="_blank">Prompt box</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b><a href="http://www.w3schools.com/js/js_popup.asp" style="color: #900b09;">Examples explained</a></b></div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
JavaScript Functions</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_function1" style="color: #900b09;" target="_blank">Call a function</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_function2" style="color: #900b09;" target="_blank">Function with an argument</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_functionarg2" style="color: #900b09;" target="_blank">Function with an argument 2</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_function_return2" style="color: #900b09;" target="_blank">Function that returns a value</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_function_return" style="color: #900b09;" target="_blank">Function with arguments, that returns a value</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b><a href="http://www.w3schools.com/js/js_functions.asp" style="color: #900b09;">Examples explained</a></b></div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
JavaScript Loops</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_fornext" style="color: #900b09;" target="_blank">For loop</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_fornext_header" style="color: #900b09;" target="_blank">Looping through HTML headers</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_while" style="color: #900b09;" target="_blank">While loop</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_dowhile" style="color: #900b09;" target="_blank">Do While loop</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_break" style="color: #900b09;" target="_blank">Break a loop</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_continue" style="color: #900b09;" target="_blank">Break and continue a loop</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_object_for_in" style="color: #900b09;" target="_blank">Use a for...in statement to loop through the elements of an object</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b><a href="http://www.w3schools.com/js/js_loop_for.asp" style="color: #900b09;">Examples explained</a></b></div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
JavaScript Events</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_events" style="color: #900b09;" target="_blank">Acting to the onclick event</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_imagemap" style="color: #900b09;" target="_blank">Acting to the onmouseover event</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b><a href="http://www.w3schools.com/js/js_events.asp" style="color: #900b09;">Examples explained</a></b></div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
JavaScript Error Handling</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_try_catch" style="color: #900b09;" target="_blank">The try...catch statement</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_try_catch2" style="color: #900b09;" target="_blank">The try...catch statement with a confirm box</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_onerror" style="color: #900b09;" target="_blank">The onerror event</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b><a href="http://www.w3schools.com/js/js_try_catch.asp" style="color: #900b09;">Examples explained</a></b></div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Advanced JavaScript Examples</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_cookie_username" style="color: #900b09;" target="_blank">Create a welcome cookie</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing1" style="color: #900b09;" target="_blank">Simple timing</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing2" style="color: #900b09;" target="_blank">Another simple timing</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_infinite" style="color: #900b09;" target="_blank">Timing event in an infinite loop</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_stop" style="color: #900b09;" target="_blank">Timing event in an infinite loop - with a Stop button</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock" style="color: #900b09;" target="_blank">A clock created with a timing event</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_create_object1" style="color: #900b09;" target="_blank">Create a direct instance of an object</a><br /><a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_create_object2" style="color: #900b09;" target="_blank">Create an object constructor</a></div>
<br class="Apple-interchange-newline" /></div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com1tag:blogger.com,1999:blog-5050101502174498444.post-31808011480479757842012-08-31T10:38:00.003+05:002012-08-31T10:38:58.954+05:00Have You Learned JavaScript?<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
JavaScript Summary</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
This tutorial has taught you how to add JavaScript to your HTML pages, to make your web site more dynamic and interactive.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
You have learned how to create responses to events, validate forms and how to make different scripts run in response to different scenarios.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
You have also learned how to create and use objects, and how to use JavaScript's built-in objects.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
For more information on JavaScript, please look at our <a href="http://www.w3schools.com/js/js_examples.asp" style="color: #900b09;">JavaScript examples</a> and our <a href="http://www.w3schools.com/jsref/default.asp" style="color: #900b09;">JavaScript reference</a>.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Now You Know JavaScript, What's Next?</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The next step is to learn about the HTML DOM, jQuery, and AJAX.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
If you want to learn about server-side scripting, the next step is to learn ASP or PHP.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b><br /></b></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b>HTML DOM</b></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The HTML DOM defines a standard way for accessing and manipulating HTML documents.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The HTML DOM is platform and language independent and can be used by any programming language like Java, JavaScript, and VBScript.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
If you want to learn more about the DOM, please visit our <a href="http://www.w3schools.com/htmldom/default.asp" style="color: #900b09;">HTML DOM tutorial</a>.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b><br /></b></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b>jQuery</b></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
jQuery is a JavaScript Library.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
jQuery greatly simplifies JavaScript programming.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
If you want to learn more about jQuery, please visit our <a href="http://www.w3schools.com/jquery/default.asp" style="color: #900b09;">jQuery tutorial</a>.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b><br /></b></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b>AJAX</b></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
AJAX = Asynchronous JavaScript and XML.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
AJAX is not a new programming language, but a new way to use existing standards.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
AJAX is about exchanging data with a server, and update parts of a web page - without reloading the whole page.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
If you want to learn more about AJAX, please visit our <a href="http://www.w3schools.com/ajax/default.asp" style="color: #900b09;">AJAX tutorial</a>.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b><br /></b></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b>ASP / PHP</b></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
While scripts in an HTML file are executed on the client (in the browser), scripts in an ASP/PHP file are executed on the server.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
With ASP/PHP you can dynamically edit, change or add any content of a Web page, respond to data submitted from HTML forms, access any data or databases and return the results to a browser, customize a Web page to make it more useful for individual users.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Since ASP/PHP files are returned as plain HTML, they can be viewed in any browser.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
If you want to learn more about ASP, please visit our <a href="http://www.w3schools.com/asp/default.asp" style="color: #900b09;">ASP tutorial</a>.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
If you want to learn more about PHP, please visit our <a href="http://www.w3schools.com/php/default.asp" style="color: #900b09;">PHP tutorial</a>.</div>
</div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-44883916063603803972012-08-31T10:37:00.000+05:002012-08-31T10:37:15.134+05:00JavaScript Create Your Own Objects<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="intro" style="font-family: verdana, helvetica, arial, sans-serif;">
</div>
<div class="intro">
Objects are useful to organize information.</div>
<hr style="font-size: 12px;" />
<div class="tryit_ex" style="font-size: 12px;">
<h2>
Try it Yourself - Examples</h2>
</div>
<div style="font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_create_object1" target="_blank">Create a direct instance of an object</a></div>
<div style="font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_create_object2" target="_blank">Create a template for an object</a></div>
<hr style="font-size: 12px;" />
<h2 style="font-weight: normal;">
JavaScript Objects</h2>
<div style="font-size: 12px;">
Earlier in this tutorial we have seen that JavaScript has several built-in objects, like String, Date, Array, and more. In addition to these built-in objects, you can also create your own.</div>
<div style="font-size: 12px;">
<br /></div>
<div style="font-size: 12px;">
An object is just a special kind of data, with a collection of properties and methods.</div>
<div style="font-size: 12px;">
<br /></div>
<div style="font-size: 12px;">
Let's illustrate with an example: A person is an object. Properties are the values associated with the object. The persons' properties include name, height, weight, age, skin tone, eye color, etc. All persons have these properties, but the values of those properties will differ from person to person. Objects also have methods. Methods are the actions that can be performed on objects. The persons' methods could be eat(), sleep(), work(), play(), etc.</div>
<h3 style="font-weight: normal;">
Properties</h3>
<div style="font-size: 12px;">
The syntax for accessing a property of an object is:</div>
<div class="code notranslate" style="font-size: 12px;">
<br /></div>
<div class="code notranslate" style="font-size: 12px;">
objName.propName</div>
<div style="font-size: 12px;">
<br /></div>
<div style="font-size: 12px;">
You can add properties to an object by simply giving it a value. Assume that the personObj already exists - you can give it properties named firstname, lastname, age, and eyecolor as follows:</div>
<div class="code notranslate" style="font-size: 12px;">
<br /></div>
<div class="code notranslate" style="font-size: 12px;">
personObj.firstname="John";<br />personObj.lastname="Doe";<br />personObj.age=30;<br />personObj.eyecolor="blue";<br /><br />document.write(personObj.firstname);</div>
<div style="font-size: 12px;">
<br /></div>
<div style="font-size: 12px;">
The code above will generate the following output:</div>
<div class="code notranslate" style="font-size: 12px;">
John</div>
<h3 style="font-weight: normal;">
Methods</h3>
<div style="font-size: 12px;">
An object can also contain methods.</div>
<div style="font-size: 12px;">
<br /></div>
<div style="font-size: 12px;">
You can call a method with the following syntax:</div>
<div class="code notranslate" style="font-size: 12px;">
<br /></div>
<div class="code notranslate" style="font-size: 12px;">
objName.methodName()</div>
<div style="font-size: 12px;">
<b><br /></b></div>
<div style="font-size: 12px;">
<b>Note:</b> Parameters required for the method can be passed between the parentheses.</div>
<div style="font-size: 12px;">
To call a method called sleep() for the personObj:</div>
<div class="code notranslate" style="font-size: 12px;">
personObj.sleep();</div>
<br style="font-size: 12px;" /><hr style="font-size: 12px;" />
<h2 style="font-weight: normal;">
Creating Your Own Objects</h2>
<div style="font-size: 12px;">
There are different ways to create a new object:</div>
<div style="font-size: 12px;">
<b><br /></b></div>
<div style="font-size: 12px;">
<b>1. Create a direct instance of an object</b></div>
<div style="font-size: 12px;">
<br /></div>
<div style="font-size: 12px;">
The following code creates a new instance of an object, and adds four properties to it:</div>
<div class="code notranslate" style="font-size: 12px;">
<br /></div>
<div class="code notranslate" style="font-size: 12px;">
personObj=new Object();<br />personObj.firstname="John";<br />personObj.lastname="Doe";<br />personObj.age=50;<br />personObj.eyecolor="blue";</div>
<div style="font-size: 12px;">
alternative syntax (using object literals):</div>
<div class="code notranslate" style="font-size: 12px;">
personObj={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};</div>
<div style="font-size: 12px;">
Adding a method to the personObj is also simple. The following code adds a method called eat() to the personObj:</div>
<div class="code notranslate" style="font-size: 12px;">
personObj.eat=eat;</div>
<div style="font-size: 12px;">
<b><br /></b></div>
<div style="font-size: 12px;">
<b>2. Create an object constructor</b></div>
<div style="font-size: 12px;">
<br /></div>
<div style="font-size: 12px;">
Create a function that construct objects:</div>
<div class="code notranslate" style="font-size: 12px;">
<br /></div>
<div class="code notranslate" style="font-size: 12px;">
function person(firstname,lastname,age,eyecolor)<br />{<br />this.firstname=firstname;<br />this.lastname=lastname;<br />this.age=age;<br />this.eyecolor=eyecolor;<br />}</div>
<div style="font-size: 12px;">
<br /></div>
<div style="font-size: 12px;">
Inside the function you need to assign things to this.propertyName. The reason for all the "this" stuff is that you're going to have more than one person at a time (which person you're dealing with must be clear). That's what "this" is: the instance of the object at hand.</div>
<div style="font-size: 12px;">
<br /></div>
<div style="font-size: 12px;">
Once you have the object constructor, you can create new instances of the object, like this:</div>
<div class="code notranslate" style="font-size: 12px;">
<br /></div>
<div class="code notranslate" style="font-size: 12px;">
var myFather=new person("John","Doe",50,"blue");<br />var myMother=new person("Sally","Rally",48,"green");</div>
<div style="font-size: 12px;">
You can also add some methods to the person object. This is also done inside the function:</div>
<div class="code notranslate" style="font-size: 12px;">
function person(firstname,lastname,age,eyecolor)<br />{<br />this.firstname=firstname;<br />this.lastname=lastname;<br />this.age=age;<br />this.eyecolor=eyecolor;<br /><br />this.newlastname=newlastname;<br />}</div>
<div style="font-size: 12px;">
<br /></div>
<div style="font-size: 12px;">
Note that methods are just functions attached to objects. Then we will have to write the newlastname() function:</div>
<div class="code notranslate" style="font-size: 12px;">
<br /></div>
<div class="code notranslate" style="font-size: 12px;">
function newlastname(new_lastname)<br />{<br />this.lastname=new_lastname;<br />}</div>
<div style="font-size: 12px;">
<br /></div>
<div style="font-size: 12px;">
The newlastname() function defines the person's new last name and assigns that to the person. </div>
<div style="font-size: 12px;">
<br /></div>
<div style="font-size: 12px;">
JavaScript knows which person you're talking about by using "this.". So, now you can write: myMother.newlastname("Doe").</div>
<br />
</div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-44971645618830126002012-08-31T10:33:00.007+05:002012-08-31T10:33:59.296+05:00JavaScript Timing Events<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
<br /></h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
With JavaScript, it is possible to execute some code at specified time-intervals. This is called timing events.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
It's very easy to time events in JavaScript. The two key methods that are used are:</div>
<ul style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<li>setInterval() - executes a function, over and over again, at specified time intervals</li>
<li>setTimeout() - executes a function, once, after waiting a specified number of milliseconds</li>
</ul>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b>Note:</b> The setInterval() and setTimeout() are both methods of the HTML DOM Window object.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
The setInterval() Method</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The setInterval() method will wait a specified number of milliseconds, and then execute a specified function, and it will continue to execute the function, once at every given time-interval.</div>
<h3 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 14px; font-weight: normal;">
Syntax</h3>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
setInterval("<i>javascript function</i>",<i>milliseconds</i>);</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The first parameter of setInterval() should be a function.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The second parameter indicates the length of the time-intervals between each execution.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b><br /></b></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b>Note:</b> There are 1000 milliseconds in one second.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="example" style="background-color: #e5eecc; background-image: url(http://www.w3schools.com/images/bgfadegreen.gif); background-repeat: repeat no-repeat; border: 1px solid rgb(212, 212, 212); clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 8px; width: 616px;">
<h2 class="example" style="background-color: transparent; color: #617f10; font-size: 14px; font-weight: normal; margin-bottom: 10px; margin-top: 0px;">
Example</h2>
Alert "hello" every 3 seconds:<br />
<div class="example_code notranslate" style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 606px;">
setInterval(function(){alert("Hello")},3000);</div>
<br /><a class="tryitbtn" href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_setinterval1" style="background-color: #98bf21; border: 1px solid rgb(255, 255, 255); color: white; display: block; font-size: 11px; font-weight: bold; margin-left: 1px; outline: rgb(152, 191, 33) solid 1px; padding: 3px 0px 4px; text-align: center; text-decoration: none; width: 120px;" target="_blank">Try it yourself »</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The example show you how the setInterval() method works, but it is not very likely that you want to alert a message every 3 seconds.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Below is an example that will display the current time. The setInterval() method is used to execute the function once every 1 second, just like a digital watch.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="example" style="background-color: #e5eecc; background-image: url(http://www.w3schools.com/images/bgfadegreen.gif); background-repeat: repeat no-repeat; border: 1px solid rgb(212, 212, 212); clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 8px; width: 616px;">
<h2 class="example" style="background-color: transparent; color: #617f10; font-size: 14px; font-weight: normal; margin-bottom: 10px; margin-top: 0px;">
Example</h2>
Display the current time:<br />
<div class="example_code notranslate" style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 606px;">
function myFunction()<br />{<br />setInterval(function(){myTimer()},1000);<br />}<br /><br />function myTimer()<br />{<br />var d=new Date();<br />var t=d.toLocaleTimeString();<br />document.getElementById("demo").innerHTML=t;<br />}</div>
<br /><a class="tryitbtn" href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_setinterval2" style="background-color: #98bf21; border: 1px solid rgb(255, 255, 255); color: white; display: block; font-size: 11px; font-weight: bold; margin-left: 1px; outline: rgb(152, 191, 33) solid 1px; padding: 3px 0px 4px; text-align: center; text-decoration: none; width: 120px;" target="_blank">Try it yourself »</a></div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
How to Stop the Execution?</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The clearInterval() method is used to stop further executions of the function specified in the setInterval() method.</div>
<h3 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 14px; font-weight: normal;">
Syntax</h3>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
clearInterval(<em>intervalVariable</em>)</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
To be able to use the clearInterval() method, you must use a global variable when creating the interval method:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
myVar=setInterval("<i>javascript function</i>",<i>milliseconds</i>);</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Then you will be able to stop the execution by calling the clearInterval() method.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="example" style="background-color: #e5eecc; background-image: url(http://www.w3schools.com/images/bgfadegreen.gif); background-repeat: repeat no-repeat; border: 1px solid rgb(212, 212, 212); clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 8px; width: 616px;">
<h2 class="example" style="background-color: transparent; color: #617f10; font-size: 14px; font-weight: normal; margin-bottom: 10px; margin-top: 0px;">
Example</h2>
Same example as above, but we have added a "Stop the timer" button:<br />
<div class="example_code notranslate" style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 606px;">
var myVar;<br /><br />function myFunction()<br />{<br />myVar=setInterval(function(){myTimer()},1000);<br />}<br /><br />function myTimer()<br />{<br />var d=new Date();<br />var t=d.toLocaleTimeString();<br />document.getElementById("demo").innerHTML=t;<br />}<br /><br />function myStopFunction()<br />{<br />clearInterval(myVar);<br />}</div>
<br /><a class="tryitbtn" href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_setinterval3" style="background-color: #98bf21; border: 1px solid rgb(255, 255, 255); color: white; display: block; font-size: 11px; font-weight: bold; margin-left: 1px; outline: rgb(152, 191, 33) solid 1px; padding: 3px 0px 4px; text-align: center; text-decoration: none; width: 120px;" target="_blank">Try it yourself »</a></div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
The setTimeout() Method</h2>
<h3 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 14px; font-weight: normal;">
Syntax</h3>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
setTimeout("<i>javascript function</i>",<i>milliseconds</i>);</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The setTimeout() method will wait the specified number of milliseconds, and then execute the specified function.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The first parameter of setTimeout() should be a function.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The second parameter indicates how many milliseconds, from now, you want to execute the first parameter.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="example" style="background-color: #e5eecc; background-image: url(http://www.w3schools.com/images/bgfadegreen.gif); background-repeat: repeat no-repeat; border: 1px solid rgb(212, 212, 212); clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 8px; width: 616px;">
<h2 class="example" style="background-color: transparent; color: #617f10; font-size: 14px; font-weight: normal; margin-bottom: 10px; margin-top: 0px;">
Example</h2>
Wait 3 seconds, then alert "Hello":<br />
<div class="example_code notranslate" style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 606px;">
setTimeout(function(){alert("Hello")},3000);</div>
<br /><a class="tryitbtn" href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing1" style="background-color: #98bf21; border: 1px solid rgb(255, 255, 255); color: white; display: block; font-size: 11px; font-weight: bold; margin-left: 1px; outline: rgb(152, 191, 33) solid 1px; padding: 3px 0px 4px; text-align: center; text-decoration: none; width: 120px;" target="_blank">Try it yourself »</a></div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
How to Stop the Execution?</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The clearTimeout() method is used to stop the execution of the function specified in the setTimeout() method.</div>
<h3 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 14px; font-weight: normal;">
Syntax</h3>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
clearTimeout(<em>timeoutVariable</em>)</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
To be able to use the clearTimeout() method, you must use a global variable when creating the timeout method:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
myVar=setTimeout("<i>javascript function</i>",<i>milliseconds</i>);</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Then, if the function has not allready being executed, you will be able to stop the execution by calling the clearTimeout() method.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="example" style="background-color: #e5eecc; background-image: url(http://www.w3schools.com/images/bgfadegreen.gif); background-repeat: repeat no-repeat; border: 1px solid rgb(212, 212, 212); clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 8px; width: 616px;">
<h2 class="example" style="background-color: transparent; color: #617f10; font-size: 14px; font-weight: normal; margin-bottom: 10px; margin-top: 0px;">
Example</h2>
Same example as above, but we have added a "Stop the alert" button:<br />
<div class="example_code notranslate" style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 606px;">
var myVar;<br /><br />function myFunction()<br />{<br />myVar=setTimeout(function(){alert("Hello")},3000);<br />}<br /><br />function myStopFunction()<br />{<br />clearTimeout(myVar);<br />}</div>
<br /><a class="tryitbtn" href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_settimeout2" style="background-color: #98bf21; border: 1px solid rgb(255, 255, 255); color: white; display: block; font-size: 11px; font-weight: bold; margin-left: 1px; outline: rgb(152, 191, 33) solid 1px; padding: 3px 0px 4px; text-align: center; text-decoration: none; width: 120px;" target="_blank">Try it yourself »</a></div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<div class="tryit_ex" style="clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 50px; margin-bottom: 5px; width: 600px;">
<h2 style="font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px; padding-top: 5px;">
More Examples</h2>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing2" style="color: #900b09;" target="_blank">Another simple timing</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock" style="color: #900b09;" target="_blank">A clock created with a timing event</a></div>
<br class="Apple-interchange-newline" /></div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-28707718291140045882012-08-29T15:18:00.002+05:002012-08-29T15:18:56.913+05:00JavaScript Form Validation<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
JavaScript Form Validation</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
JavaScript can be used to validate data in HTML forms before sending off the content to a server.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Form data that typically are checked by a JavaScript could be:</div>
<ul style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<li>has the user left required fields empty?</li>
<li>has the user entered a valid e-mail address?</li>
<li>has the user entered a valid date?</li>
<li>has the user entered text in a numeric field?</li>
</ul>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Required Fields</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The function below checks if a field has been left empty. If the field is blank, an alert box alerts a message, the function returns false, and the form will not be submitted:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
function validateForm()<br />{<br />var x=document.forms["myForm"]["fname"].value;<br />if (x==null || x=="")<br /> {<br /> alert("First name must be filled out");<br /> return false;<br /> }<br />}</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The function above could be called when a form is submitted:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="example" style="background-color: #e5eecc; background-image: url(http://www.w3schools.com/images/bgfadegreen.gif); background-repeat: repeat no-repeat; border: 1px solid rgb(212, 212, 212); clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 8px; width: 616px;">
<h2 class="example" style="background-color: transparent; color: #617f10; font-size: 14px; font-weight: normal; margin-bottom: 10px; margin-top: 0px;">
Example</h2>
<div class="example_code notranslate" style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 606px;">
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post"><br />First name: <input type="text" name="fname"><br /><input type="submit" value="Submit"><br /></form></div>
<br /><a class="tryitbtn" href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_form_validation" style="background-color: #98bf21; border: 1px solid rgb(255, 255, 255); color: white; display: block; font-size: 11px; font-weight: bold; margin-left: 1px; outline: rgb(152, 191, 33) solid 1px; padding: 3px 0px 4px; text-align: center; text-decoration: none; width: 120px;" target="_blank">Try it yourself »</a></div>
<br style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;" /><hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
E-mail Validation</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The function below checks if the content has the general syntax of an email.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
This means that the input data must contain an @ sign and at least one dot (.). Also, the @ must not be the first character of the email address, and the last dot must be present after the @ sign, and minimum 2 characters before the end:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
function validateForm()<br />{<br />var x=document.forms["myForm"]["email"].value;<br />var atpos=x.indexOf("@");<br />var dotpos=x.lastIndexOf(".");<br />if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)<br /> {<br /> alert("Not a valid e-mail address");<br /> return false;<br /> }<br />}</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The function above could be called when a form is submitted:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="example" style="background-color: #e5eecc; background-image: url(http://www.w3schools.com/images/bgfadegreen.gif); background-repeat: repeat no-repeat; border: 1px solid rgb(212, 212, 212); clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 8px; width: 616px;">
<h2 class="example" style="background-color: transparent; color: #617f10; font-size: 14px; font-weight: normal; margin-bottom: 10px; margin-top: 0px;">
Example</h2>
<div class="example_code notranslate" style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 606px;">
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post"><br />Email: <input type="text" name="email"><br /><input type="submit" value="Submit"><br /></form></div>
<br /><a class="tryitbtn" href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_form_validate_email" style="background-color: #98bf21; border: 1px solid rgb(255, 255, 255); color: white; display: block; font-size: 11px; font-weight: bold; margin-left: 1px; outline: rgb(152, 191, 33) solid 1px; padding: 3px 0px 4px; text-align: center; text-decoration: none; width: 120px;" target="_blank">Try it yourself »</a></div>
<br class="Apple-interchange-newline" /></div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-84860218978564523662012-08-29T15:17:00.001+05:002012-08-29T15:17:37.617+05:00JavaScript Cookies<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="intro" style="color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 14px; margin-top: 10px;">
A cookie is often used to identify a user.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
What is a Cookie?</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
A cookie is a variable that is stored on the visitor's computer. Each time the same computer requests a page with a browser, it will send the cookie too. With JavaScript, you can both create and retrieve cookie values.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Examples of cookies:</div>
<ul style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<li>Name cookie - The first time a visitor arrives to your web page, he or she must fill in her/his name. The name is then stored in a cookie. Next time the visitor arrives at your page, he or she could get a welcome message like "Welcome John Doe!" The name is retrieved from the stored cookie</li>
<li>Date cookie - The first time a visitor arrives to your web page, the current date is stored in a cookie. Next time the visitor arrives at your page, he or she could get a message like "Your last visit was on Tuesday August 11, 2005!" The date is retrieved from the stored cookie</li>
</ul>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Create and Store a Cookie</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
In this example we will create a cookie that stores the name of a visitor. The first time a visitor arrives to the web page, he or she will be asked to fill in her/his name. The name is then stored in a cookie. </div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The next time the visitor arrives at the same page, he or she will get welcome message.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
First, we create a function that stores the name of the visitor in a cookie variable:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
function setCookie(c_name,value,exdays)<br />{<br />var exdate=new Date();<br />exdate.setDate(exdate.getDate() + exdays);<br />var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());<br />document.cookie=c_name + "=" + c_value;<br />}</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The parameters of the function above hold the name of the cookie, the value of the cookie, and the number of days until the cookie expires.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
In the function above we first convert the number of days to a valid date, then we add the number of days until the cookie should expire. After that we store the cookie name, cookie value and the expiration date in the document.cookie object.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Then, we create another function that returns a specified cookie:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
function getCookie(c_name)<br />{<br />var i,x,y,ARRcookies=document.cookie.split(";");<br />for (i=0;i<ARRcookies.length;i++)<br />{<br /> x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));<br /> y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);<br /> x=x.replace(/^\s+|\s+$/g,"");<br /> if (x==c_name)<br /> {<br /> return unescape(y);<br /> }<br /> }<br />}</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The function above makes an array to retrieve cookie names and values, then it checks if the specified cookie exists, and returns the cookie value.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Last, we create the function that displays a welcome message if the cookie is set, and if the cookie is not set it will display a prompt box, asking for the name of the user, and stores the username cookie for 365 days, by calling the setCookie function:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
function checkCookie()<br />{<br />var username=getCookie("username");<br /> if (username!=null && username!="")<br /> {<br /> alert("Welcome again " + username);<br /> }<br />else<br /> {<br /> username=prompt("Please enter your name:","");<br /> if (username!=null && username!="")<br /> {<br /> setCookie("username",username,365);<br /> }<br /> }<br />}</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
All together now:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="example" style="background-color: #e5eecc; background-image: url(http://www.w3schools.com/images/bgfadegreen.gif); background-repeat: repeat no-repeat; border: 1px solid rgb(212, 212, 212); clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 8px; width: 616px;">
<h2 class="example" style="background-color: transparent; color: #617f10; font-size: 14px; font-weight: normal; margin-bottom: 10px; margin-top: 0px;">
Example</h2>
<div class="example_code notranslate" style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 606px;">
<!DOCTYPE html><br /><html><br /><head><br /><script><br />function getCookie(c_name)<br />{<br />var i,x,y,ARRcookies=document.cookie.split(";");<br />for (i=0;i<ARRcookies.length;i++)<br /> {<br /> x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));<br /> y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);<br /> x=x.replace(/^\s+|\s+$/g,"");<br /> if (x==c_name)<br /> {<br /> return unescape(y);<br /> }<br /> }<br />}<br /><br />function setCookie(c_name,value,exdays)<br />{<br />var exdate=new Date();<br />exdate.setDate(exdate.getDate() + exdays);<br />var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());<br />document.cookie=c_name + "=" + c_value;<br />}<br /><br />function checkCookie()<br />{<br />var username=getCookie("username");<br />if (username!=null && username!="")<br /> {<br /> alert("Welcome again " + username);<br /> }<br />else<br /> {<br /> username=prompt("Please enter your name:","");<br /> if (username!=null && username!="")<br /> {<br /> setCookie("username",username,365);<br /> }<br /> }<br />}<br /></script><br /></head><br /><body onload="checkCookie()"><br /></body><br /></html></div>
<br /><a class="tryitbtn" href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_cookie_username" style="background-color: #98bf21; border: 1px solid rgb(255, 255, 255); color: white; display: block; font-size: 11px; font-weight: bold; margin-left: 1px; outline: rgb(152, 191, 33) solid 1px; padding: 3px 0px 4px; text-align: center; text-decoration: none; width: 120px;" target="_blank">Try it yourself »</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The example above runs the checkCookie() function when the page loads.</div>
<br class="Apple-interchange-newline" /></div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-16318951639805844392012-08-29T15:16:00.002+05:002012-08-29T15:16:19.682+05:00JavaScript Browser Detection<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="intro" style="color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 14px; margin-top: 10px;">
The Navigator object contains information about the visitor's browser.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Browser Detection</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Almost everything in this tutorial works on all JavaScript-enabled browsers. However, there are some things that just don't work on certain browsers - especially on older browsers.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Sometimes it can be useful to detect the visitor's browser, and then serve the appropriate information.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The Navigator object contains information about the visitor's browser name, version, and more.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<img alt="Note" src="http://www.w3schools.com/jsref/lamp.gif" style="border: 0px;" /> <b>Note:</b> There is no public standard that applies to the navigator object, but all major browsers support it.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
The Navigator Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The Navigator object contains all information about the visitor's browser:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="example" style="background-color: #e5eecc; background-image: url(http://www.w3schools.com/images/bgfadegreen.gif); background-repeat: repeat no-repeat; border: 1px solid rgb(212, 212, 212); clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 8px; width: 616px;">
<h2 class="example" style="background-color: transparent; color: #617f10; font-size: 14px; font-weight: normal; margin-bottom: 10px; margin-top: 0px;">
Example</h2>
<div class="example_code notranslate" style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 606px;">
<div id="example"></div><br /><br /><script><br /><br />txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";<br />txt+= "<p>Browser Name: " + navigator.appName + "</p>";<br />txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";<br />txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";<br />txt+= "<p>Platform: " + navigator.platform + "</p>";<br />txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";<br /><br />document.getElementById("example").innerHTML=txt;<br /><br /></script></div>
<br /><a class="tryitbtn" href="http://www.w3schools.com/js/tryit.asp?filename=try_nav_all" style="background-color: #98bf21; border: 1px solid rgb(255, 255, 255); color: white; display: block; font-size: 11px; font-weight: bold; margin-left: 1px; outline: rgb(152, 191, 33) solid 1px; padding: 3px 0px 4px; text-align: center; text-decoration: none; width: 120px;" target="_blank">Try it yourself »</a></div>
<br class="Apple-interchange-newline" /></div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-23720269696436726602012-08-29T15:15:00.001+05:002012-08-29T15:15:32.457+05:00JavaScript RegExp Object<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="intro" style="color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 14px; margin-top: 10px;">
RegExp, is short for regular expression.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Complete RegExp Object Reference</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
For a complete reference of all the properties and methods that can be used with the RegExp object, go to our <a href="http://www.w3schools.com/jsref/jsref_obj_regexp.asp" style="color: #900b09;">complete RegExp object reference</a>.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The reference contains a brief description and examples of use for each property and method!</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
What is RegExp?</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
A regular expression is an object that describes a pattern of characters.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
When you search in a text, you can use a pattern to describe what you are searching for.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
A simple pattern can be one single character.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
A more complicated pattern can consist of more characters, and can be used for parsing, format checking, substitution and more.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Regular expressions are used to perform powerful pattern-matching and "search-and-replace" functions on text.</div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Syntax</h2>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
var patt=new RegExp(pattern,modifiers);<br /><br />or more simply:<br /><br />var patt=/pattern/modifiers;</div>
</div>
<ul style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<li>pattern specifies the pattern of an expression</li>
<li>modifiers specify if a search should be global, case-sensitive, etc.</li>
</ul>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
RegExp Modifiers</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Modifiers are used to perform case-insensitive and global searches.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The i modifier is used to perform case-insensitive matching.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The g modifier is used to perform a global match (find all matches rather than stopping after the first match).</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="example" style="background-color: #e5eecc; background-image: url(http://www.w3schools.com/images/bgfadegreen.gif); background-repeat: repeat no-repeat; border: 1px solid rgb(212, 212, 212); clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 8px; width: 616px;">
<h2 class="example" style="background-color: transparent; color: #617f10; font-size: 14px; font-weight: normal; margin-bottom: 10px; margin-top: 0px;">
Example 1</h2>
Do a case-insensitive search for "w3schools" in a string:<br />
<div class="example_code notranslate" style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 606px;">
var str="Visit W3Schools";<br />var patt1=/w3schools/i;</div>
The <span class="marked" style="background-color: transparent; color: #e80000;">marked</span> text below shows where the expression gets a match:<br />
<div class="example_code notranslate" style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 606px;">
Visit <span class="marked" style="background-color: transparent; color: #e80000;">W3Schools</span></div>
<br /><a class="tryitbtn" href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_regexp_i" style="background-color: #98bf21; border: 1px solid rgb(255, 255, 255); color: white; display: block; font-size: 11px; font-weight: bold; margin-left: 1px; outline: rgb(152, 191, 33) solid 1px; padding: 3px 0px 4px; text-align: center; text-decoration: none; width: 120px;" target="_blank">Try it yourself »</a></div>
<br style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;" /><div class="example" style="background-color: #e5eecc; background-image: url(http://www.w3schools.com/images/bgfadegreen.gif); background-repeat: repeat no-repeat; border: 1px solid rgb(212, 212, 212); clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 8px; width: 616px;">
<h2 class="example" style="background-color: transparent; color: #617f10; font-size: 14px; font-weight: normal; margin-bottom: 10px; margin-top: 0px;">
Example 2</h2>
Do a global search for "is":<br />
<div class="example_code notranslate" style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 606px;">
var str="Is this all there is?";<br />var patt1=/is/g;</div>
The <span class="marked" style="background-color: transparent; color: #e80000;">marked</span> text below shows where the expression gets a match:<br />
<div class="example_code notranslate" style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 606px;">
Is th<span class="marked" style="background-color: transparent; color: #e80000;">is</span> all there <span class="marked" style="background-color: transparent; color: #e80000;">is</span>?</div>
<br /><a class="tryitbtn" href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_regexp_g" style="background-color: #98bf21; border: 1px solid rgb(255, 255, 255); color: white; display: block; font-size: 11px; font-weight: bold; margin-left: 1px; outline: rgb(152, 191, 33) solid 1px; padding: 3px 0px 4px; text-align: center; text-decoration: none; width: 120px;" target="_blank">Try it yourself »</a></div>
<br style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;" /><div class="example" style="background-color: #e5eecc; background-image: url(http://www.w3schools.com/images/bgfadegreen.gif); background-repeat: repeat no-repeat; border: 1px solid rgb(212, 212, 212); clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 8px; width: 616px;">
<h2 class="example" style="background-color: transparent; color: #617f10; font-size: 14px; font-weight: normal; margin-bottom: 10px; margin-top: 0px;">
Example 3</h2>
Do a global, case-insensitive search for "is":<br />
<div class="example_code notranslate" style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 606px;">
var str="Is this all there is?";<br />var patt1=/is/gi;</div>
The <span class="marked" style="background-color: transparent; color: #e80000;">marked</span> text below shows where the expression gets a match:<br />
<div class="example_code notranslate" style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 606px;">
<span class="marked" style="background-color: transparent; color: #e80000;">Is</span> th<span class="marked" style="background-color: transparent; color: #e80000;">is</span> all there <span class="marked" style="background-color: transparent; color: #e80000;">is</span>?</div>
<br /><a class="tryitbtn" href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_regexp_g_2" style="background-color: #98bf21; border: 1px solid rgb(255, 255, 255); color: white; display: block; font-size: 11px; font-weight: bold; margin-left: 1px; outline: rgb(152, 191, 33) solid 1px; padding: 3px 0px 4px; text-align: center; text-decoration: none; width: 120px;" target="_blank">Try it yourself »</a></div>
<br style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;" /><hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
test()</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The test() method searches a string for a specified value, and returns true or false, depending on the result.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The following example searches a string for the character "e":</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="example" style="background-color: #e5eecc; background-image: url(http://www.w3schools.com/images/bgfadegreen.gif); background-repeat: repeat no-repeat; border: 1px solid rgb(212, 212, 212); clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 8px; width: 616px;">
<h2 class="example" style="background-color: transparent; color: #617f10; font-size: 14px; font-weight: normal; margin-bottom: 10px; margin-top: 0px;">
Example</h2>
<div class="example_code notranslate" style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 606px;">
var patt1=new RegExp("e");<br />document.write(patt1.test("The best things in life are free"));</div>
Since there is an "e" in the string, the output of the code above will be:<br />
<div class="example_code notranslate" style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 606px;">
true</div>
<br /><a class="tryitbtn" href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_regexp_test" style="background-color: #98bf21; border: 1px solid rgb(255, 255, 255); color: white; display: block; font-size: 11px; font-weight: bold; margin-left: 1px; outline: rgb(152, 191, 33) solid 1px; padding: 3px 0px 4px; text-align: center; text-decoration: none; width: 120px;" target="_blank">Try it yourself »</a></div>
<br style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;" /><hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
exec()</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The exec() method searches a string for a specified value, and returns the text of the found value. If no match is found, it returns <i>null.</i></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The following example searches a string for the character "e":</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="example" style="background-color: #e5eecc; background-image: url(http://www.w3schools.com/images/bgfadegreen.gif); background-repeat: repeat no-repeat; border: 1px solid rgb(212, 212, 212); clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 8px; width: 616px;">
<h2 class="example" style="background-color: transparent; color: #617f10; font-size: 14px; font-weight: normal; margin-bottom: 10px; margin-top: 0px;">
Example 1</h2>
<div class="example_code notranslate" style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 606px;">
var patt1=new RegExp("e");<br />document.write(patt1.exec("The best things in life are free"));</div>
Since there is an "e" in the string, the output of the code above will be:<br />
<div class="example_code notranslate" style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 606px;">
e</div>
<br /><a class="tryitbtn" href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_regexp_exec" style="background-color: #98bf21; border: 1px solid rgb(255, 255, 255); color: white; display: block; font-size: 11px; font-weight: bold; margin-left: 1px; outline: rgb(152, 191, 33) solid 1px; padding: 3px 0px 4px; text-align: center; text-decoration: none; width: 120px;" target="_blank">Try it yourself »</a></div>
<br class="Apple-interchange-newline" /></div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-82535040855996520952012-08-29T15:14:00.000+05:002012-08-29T15:14:06.088+05:00JavaScript Math Object<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="intro" style="color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 14px; margin-top: 10px;">
The Math object allows you to perform mathematical tasks.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<div class="tryit_ex" style="clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 50px; margin-bottom: 5px; width: 600px;">
<h2 style="font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px; padding-top: 5px;">
Try it Yourself - Examples</h2>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_round" style="color: #900b09;" target="_blank">round()</a><br />How to use round().</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_random" style="color: #900b09;" target="_blank">random()</a><br />How to use random() to return a random number between 0 and 1.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_max" style="color: #900b09;" target="_blank">max()</a><br />How to use max() to return the number with the highest value of two specified numbers.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_min" style="color: #900b09;" target="_blank">min()</a><br />How to use min() to return the number with the lowest value of two specified numbers.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Complete Math Object Reference</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
For a complete reference of all the properties and methods that can be used with the Math object, go to our <a href="http://www.w3schools.com/jsref/jsref_obj_math.asp" style="color: #900b09;">complete Math object reference</a>.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The reference contains a brief description and examples of use for each property and method!</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Math Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The Math object allows you to perform mathematical tasks.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The Math object includes several mathematical constants and methods.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b><br /></b></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b>Syntax for using properties/methods of Math:</b></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b><br /></b></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
var x=Math.PI;<br />var y=Math.sqrt(16);</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b><br /></b></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b>Note:</b> Math is not a constructor. All properties and methods of Math can be called by using Math as an object without creating it.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Mathematical Constants</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
JavaScript provides eight mathematical constants that can be accessed from the Math object. These are: E, PI, square root of 2, square root of 1/2, natural log of 2, natural log of 10, base-2 log of E, and base-10 log of E.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
You may reference these constants from your JavaScript like this:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
Math.E<br />Math.PI<br />Math.SQRT2<br />Math.SQRT1_2<br />Math.LN2<br />Math.LN10<br />Math.LOG2E<br />Math.LOG10E</div>
</div>
<br style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;" /><hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Mathematical Methods</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
In addition to the mathematical constants that can be accessed from the Math object there are also several methods available.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The following example uses the round() method of the Math object to round a number to the nearest integer:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
document.write(Math.round(4.7));</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The code above will result in the following output:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
5</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The following example uses the random() method of the Math object to return a random number between 0 and 1:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
document.write(Math.random());</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The code above can result in the following output:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
0.6193570049945265</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The following example uses the floor() and random() methods of the Math object to return a random number between 0 and 10:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
document.write(Math.floor(Math.random()*11));</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The code above can result in the following output:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
6</div>
</div>
<br class="Apple-interchange-newline" /></div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-10124386100109899512012-08-29T15:12:00.003+05:002012-08-29T15:12:47.268+05:00JavaScript Boolean Object<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="intro" style="color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 14px; margin-top: 10px;">
The Boolean object is used to convert a non-Boolean value to a Boolean value (true or false).</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<div class="tryit_ex" style="clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 50px; margin-bottom: 5px; width: 600px;">
<h2 style="font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px; padding-top: 5px;">
Try it Yourself - Examples</h2>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_boolean" style="color: #900b09;" target="_blank">Check Boolean value</a><br />Check if a Boolean object is true or false.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Complete Boolean Object Reference</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
For a complete reference of all the properties and methods that can be used with the Boolean object, go to our <a href="http://www.w3schools.com/jsref/jsref_obj_boolean.asp" style="color: #900b09;">complete Boolean object reference</a>.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The reference contains a brief description and examples of use for each property and method!</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Create a Boolean Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The Boolean object represents two values: "true" or "false".</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The following code creates a Boolean object called myBoolean:</div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
var myBoolean=new Boolean();</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
If the Boolean object has no initial value, or if the passed value is one of the following:</div>
<ul style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<li>0</li>
<li>-0</li>
<li>null</li>
<li>""</li>
<li>false</li>
<li>undefined</li>
<li>NaN</li>
</ul>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
the object is set to false. For any other value it is set to true (even with the string "false")!</div>
<div class="chapter" style="font-family: verdana, helvetica, arial, sans-serif; font-size: 17px; height: 20px; margin: 0px; padding: 0px; width: 634px;">
<br class="Apple-interchange-newline" /></div>
</div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-26247019149731417132012-08-29T15:11:00.002+05:002012-08-29T15:11:49.092+05:00JavaScript Array Object<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="intro" style="color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 14px; margin-top: 10px;">
The Array object is used to store multiple values in a single variable.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<div class="tryit_ex" style="clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 50px; margin-bottom: 5px; width: 600px;">
<h2 style="font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px; padding-top: 5px;">
Try it Yourself - Examples</h2>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_array" style="color: #900b09;" target="_blank">Create an array</a><br />Create an array, assign values to it, and write the values to the output.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
(You can find more examples at the bottom of this page)</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Complete Array Object Reference</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
For a complete reference of all the properties and methods that can be used with the Array object, go to our <a href="http://www.w3schools.com/jsref/jsref_obj_array.asp" style="color: #900b09;">complete Array object reference</a>.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The reference contains a brief description and examples of use for each property and method!</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
What is an Array?</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
An array is a special variable, which can hold more than one value, at a time.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
var car1="Saab";<br />var car2="Volvo";<br />var car3="BMW";</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300?</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The best solution here is to use an array!</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
An array can hold all your variable values under a single name. And you can access the values by referring to the array name.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Each element in the array has its own ID so that it can be easily accessed.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Create an Array</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
An array can be defined in three ways.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The following code creates an Array object called myCars:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
1:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
var myCars=new Array(); // regular array (add an optional integer<br />myCars[0]="Saab"; // argument to control array's size)<br />myCars[1]="Volvo";<br />myCars[2]="BMW";</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
2:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
var myCars=new Array("Saab","Volvo","BMW"); // condensed array</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
3:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
var myCars=["Saab","Volvo","BMW"]; // literal array</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b><br /></b></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b>Note:</b> If you specify numbers or true/false values inside the array then the variable type will be Number or Boolean, instead of String.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Access an Array</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
You can refer to a particular element in an array by referring to the name of the array and the index number. The index number starts at 0.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The following code line:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
document.write(myCars[0]);</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
will result in the following output:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
Saab</div>
</div>
<br style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;" /><hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Modify Values in an Array</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
To modify a value in an existing array, just add a new value to the array with a specified index number:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
myCars[0]="Opel";</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Now, the following code line:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
document.write(myCars[0]);</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
will result in the following output:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
Opel</div>
</div>
<br style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;" /><hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<div class="tryit_ex" style="clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 50px; margin-bottom: 5px; width: 600px;">
<h2 style="font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px; padding-top: 5px;">
More Examples</h2>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_concat" style="color: #900b09;" target="_blank">Join two arrays - concat()</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_concat2" style="color: #900b09;" target="_blank">Join three arrays - concat()</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_join" style="color: #900b09;" target="_blank">Join all elements of an array into a string - join()</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_pop" style="color: #900b09;" target="_blank">Remove the last element of an array - pop()</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_push" style="color: #900b09;" target="_blank">Add new elements to the end of an array - push()</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_reverse" style="color: #900b09;" target="_blank">Reverse the order of the elements in an array - reverse()</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_shift" style="color: #900b09;" target="_blank">Remove the first element of an array - shift()</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_slice_array" style="color: #900b09;" target="_blank">Select elements from an array - slice()</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_sort" style="color: #900b09;" target="_blank">Sort an array (alphabetically and ascending) - sort()</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_sort2" style="color: #900b09;" target="_blank">Sort numbers (numerically and ascending) - sort()</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_sort3" style="color: #900b09;" target="_blank">Sort numbers (numerically and descending) - sort()</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_splice" style="color: #900b09;" target="_blank">Add an element to position 2 in an array - splice()</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_tostring_array" style="color: #900b09;" target="_blank">Convert an array to a string - toString()</a></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_unshift" style="color: #900b09;" target="_blank">Add new elements to the beginning of an array - unshift()</a></div>
<br class="Apple-interchange-newline" /></div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-37632759145373711092012-08-29T15:10:00.000+05:002012-08-29T15:10:07.709+05:00JavaScript Date Object<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="tryit_ex" style="clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 50px; margin-bottom: 5px; width: 600px;">
<h2 style="font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px; padding-top: 5px;">
Try it Yourself - Examples</h2>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_date" style="color: #900b09;" target="_blank">Return today's date and time</a><br />How to use the Date() method to get today's date.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_getfullyear" style="color: #900b09;" target="_blank">getFullYear()</a><br />Use getFullYear() to get the year.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_gettime" style="color: #900b09;" target="_blank">getTime()</a><br />getTime() returns the number of milliseconds since 01.01.1970.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_setfullyear2" style="color: #900b09;" target="_blank">setFullYear()</a><br />How to use setFullYear() to set a specific date.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_toutcstring" style="color: #900b09;" target="_blank">toUTCString()</a><br />How to use toUTCString() to convert today's date (according to UTC) to a string.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_date_weekday" style="color: #900b09;" target="_blank">getDay()</a><br />Use getDay() and an array to write a weekday, and not just a number.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock" style="color: #900b09;" target="_blank">Display a clock</a><br />How to display a clock on your web page.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Complete Date Object Reference</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
For a complete reference of all the properties and methods that can be used with the Date object, go to our <a href="http://www.w3schools.com/jsref/jsref_obj_date.asp" style="color: #900b09;">complete Date object reference</a>.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The reference contains a brief description and examples of use for each property and method!</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Create a Date Object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The Date object is used to work with dates and times. </div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Date objects are created with the Date() constructor.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
There are four ways of initiating a date:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
new Date() // current date and time<br />new Date(milliseconds) //milliseconds since 1970/01/01<br />new Date(dateString)<br />new Date(year, month, day, hours, minutes, seconds, milliseconds)</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Most parameters above are optional. Not specifying, causes 0 to be passed in.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Once a Date object is created, a number of methods allow you to operate on it. Most methods allow you to get and set the year, month, day, hour, minute, second, and milliseconds of the object, using either local time or UTC (universal, or GMT) time.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
All dates are calculated in milliseconds from 01 January, 1970 00:00:00 Universal Time (UTC) with a day containing 86,400,000 milliseconds.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Some examples of initiating a date:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
var today = new Date()<br />var d1 = new Date("October 13, 1975 11:13:00")<br />var d2 = new Date(79,5,24)<br />var d3 = new Date(79,5,24,11,33,0)</div>
</div>
<br style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;" /><hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Set Dates</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
We can easily manipulate the date by using the methods available for the Date object.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
In the example below we set a Date object to a specific date (14th January 2010):</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
var myDate=new Date();<br />myDate.setFullYear(2010,0,14);</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
And in the following example we set a Date object to be 5 days into the future:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
var myDate=new Date();<br />myDate.setDate(myDate.getDate()+5);</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b><br /></b></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b>Note:</b> If adding five days to a date shifts the month or year, the changes are handled automatically by the Date object itself!</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Compare Two Dates</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The Date object is also used to compare two dates.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The following example compares today's date with the 14th January 2100:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
var x=new Date();<br />x.setFullYear(2100,0,14);<br />var today = new Date();<br /><br />if (x>today)<br /> {<br /> alert("Today is before 14th January 2100");<br /> }<br />else<br /> {<br /> alert("Today is after 14th January 2100");<br /> }</div>
</div>
<br class="Apple-interchange-newline" /></div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-49693627131855575752012-08-29T15:08:00.000+05:002012-08-29T15:08:15.146+05:00JavaScript String Object<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="tryit_ex" style="clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 50px; margin-bottom: 5px; width: 600px;">
<h2 style="font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px; padding-top: 5px;">
Try it Yourself - Examples</h2>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_length_string" style="color: #900b09;" target="_blank">Return the length of a string</a><br />How to return the length of a string.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_str_style" style="color: #900b09;" target="_blank">Style strings</a><br />How to style strings.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_lower_upper" style="color: #900b09;" target="_blank">The toLowerCase() and toUpperCase() methods</a><br />How to convert a string to lowercase or uppercase letters.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_match" style="color: #900b09;" target="_blank">The match() method</a><br />How to search for a specified value within a string.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_replace" style="color: #900b09;" target="_blank">Replace characters in a string - replace()</a><br />How to replace a specified value with another value in a string.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_indexof" style="color: #900b09;" target="_blank">The indexOf() method</a><br />How to return the position of the first found occurrence of a specified value in a string.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Complete String Object Reference</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
For a complete reference of all the properties and methods that can be used with the String object, go to our <a href="http://www.w3schools.com/jsref/jsref_obj_string.asp" style="color: #900b09;">complete String object reference</a>.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The reference contains a brief description and examples of use for each property and method!</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
String object</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The String object is used to manipulate a stored piece of text.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b><br /></b></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<b>Examples of use:</b></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The following example uses the length property of the String object to find the length of a string:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
var txt="Hello world!";<br />document.write(txt.length);</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The code above will result in the following output:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
12</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The following example uses the toUpperCase() method of the String object to convert a string to uppercase letters:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
var txt="Hello world!";<br />document.write(txt.toUpperCase());</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The code above will result in the following output:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
HELLO WORLD!</div>
</div>
<br class="Apple-interchange-newline" /></div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-25056585399083947152012-08-29T15:06:00.002+05:002012-08-29T15:06:56.352+05:00JavaScript Objects Introduction<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="intro" style="color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 14px; margin-top: 10px;">
JavaScript is an Object Based Programming language.</div>
<div class="intro" style="color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 14px; margin-top: 10px;">
An Object Based Programming language allows you to define your own objects and make your own variable types.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Object Based Programming</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
JavaScript is an Object Based Programming language, and allows you to define your own objects and make your own variable types.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
However, creating your own objects will be explained later, in the Advanced JavaScript section. We will start by looking at the built-in JavaScript objects, and how they are used. The next pages will explain each built-in JavaScript object in detail.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Note that an object is just a special kind of data. An object has properties and methods.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Properties</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Properties are the values associated with an object.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
In the following example we are using the length property of the String object to return the number of characters in a string:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
<script><br />var txt="Hello World!";<br />document.write(txt.length);<br /></script></div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The output of the code above will be:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
12</div>
</div>
<br style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;" /><hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Methods</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Methods are the actions that can be performed on objects.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
In the following example we are using the toUpperCase() method of the String object to display a text in uppercase letters:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
<script><br />var str="Hello world!";<br />document.write(str.toUpperCase());<br /></script></div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The output of the code above will be:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
HELLO WORLD!</div>
</div>
<br class="Apple-interchange-newline" /></div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-10019376283017497882012-08-28T13:25:00.001+05:002012-08-28T13:25:41.260+05:00JavaScript Guidelines<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="intro" style="color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 14px; margin-top: 10px;">
Some other important things to know when scripting with JavaScript. </div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
JavaScript is Case Sensitive</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
A function named "myfunction" is not the same as "myFunction" and a variable named "myVar" is not the same as "myvar".</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
JavaScript is case sensitive - therefore watch your capitalization closely when you create or call variables, objects and functions.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
White Space</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
JavaScript ignores extra spaces. You can add white space to your script to make it more readable. The following lines are equivalent:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
var name="Hege";<br />var name = "Hege";</div>
</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Break up a Code Line</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
You can break up a code line <b>within a text string</b> with a backslash. The example below will be displayed properly:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
document.write("Hello \<br />World!");</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
However, you cannot break up a code line like this:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
document.write \<br />("Hello World!");</div>
</div>
<br class="Apple-interchange-newline" /></div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-6478191857255753452012-08-28T13:24:00.002+05:002012-08-28T13:24:29.959+05:00JavaScript Special Characters<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="intro" style="color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 14px; margin-top: 10px;">
In JavaScript you can add special characters to a text string by using the backslash sign.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Insert Special Characters</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The backslash (\) is used to insert apostrophes, new lines, quotes, and other special characters into a text string.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Look at the following JavaScript code:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
var txt="We are the so-called "Vikings" from the north.";<br />document.write(txt);</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
In JavaScript, a string is started and stopped with either single or double quotes. This means that the string above will be chopped to: We are the so-called</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
To solve this problem, you must place a backslash (\) before each double quote in "Viking". This turns each double quote into a string literal:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
var txt="We are the so-called \"Vikings\" from the north.";<br />document.write(txt);</div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
JavaScript will now output the proper text string: We are the so-called "Vikings" from the north.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The table below lists other special characters that can be added to a text string with the backslash sign:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<table class="reference" style="background-color: white; border-collapse: collapse; border: 1px solid rgb(195, 195, 195); color: black; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; text-align: start; width: 633px;"><tbody>
<tr><th align="left" style="background-color: #e5eecc; border: 1px solid rgb(195, 195, 195); padding: 3px; vertical-align: top;">Code</th><th align="left" style="background-color: #e5eecc; border: 1px solid rgb(195, 195, 195); padding: 3px; vertical-align: top;">Outputs</th></tr>
<tr><td style="border: 1px solid rgb(195, 195, 195); padding: 3px; vertical-align: top;">\'</td><td style="border: 1px solid rgb(195, 195, 195); padding: 3px; vertical-align: top;">single quote</td></tr>
<tr><td style="border: 1px solid rgb(195, 195, 195); padding: 3px; vertical-align: top;">\"</td><td style="border: 1px solid rgb(195, 195, 195); padding: 3px; vertical-align: top;">double quote</td></tr>
<tr><td style="border: 1px solid rgb(195, 195, 195); padding: 3px; vertical-align: top;">\\</td><td style="border: 1px solid rgb(195, 195, 195); padding: 3px; vertical-align: top;">backslash</td></tr>
<tr><td style="border: 1px solid rgb(195, 195, 195); padding: 3px; vertical-align: top;">\n</td><td style="border: 1px solid rgb(195, 195, 195); padding: 3px; vertical-align: top;">new line</td></tr>
<tr><td style="border: 1px solid rgb(195, 195, 195); padding: 3px; vertical-align: top;">\r</td><td style="border: 1px solid rgb(195, 195, 195); padding: 3px; vertical-align: top;">carriage return</td></tr>
<tr><td style="border: 1px solid rgb(195, 195, 195); padding: 3px; vertical-align: top;">\t</td><td style="border: 1px solid rgb(195, 195, 195); padding: 3px; vertical-align: top;">tab</td></tr>
<tr><td style="border: 1px solid rgb(195, 195, 195); padding: 3px; vertical-align: top;">\b</td><td style="border: 1px solid rgb(195, 195, 195); padding: 3px; vertical-align: top;">backspace</td></tr>
<tr><td style="border: 1px solid rgb(195, 195, 195); padding: 3px; vertical-align: top;">\f</td><td style="border: 1px solid rgb(195, 195, 195); padding: 3px; vertical-align: top;">form feed</td></tr>
</tbody></table>
<br class="Apple-interchange-newline" /></div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0tag:blogger.com,1999:blog-5050101502174498444.post-11579332210590355382012-08-28T13:23:00.000+05:002012-08-28T13:23:30.083+05:00JavaScript Throw Statement<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="intro" style="color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 14px; margin-top: 10px;">
The throw statement allows you to create an exception.</div>
<hr style="background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; height: 1px;" />
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
The Throw Statement</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The throw statement allows you to create an exception. If you use this statement together with the try...catch statement, you can control program flow and generate accurate error messages.</div>
<h3 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 14px; font-weight: normal;">
Syntax</h3>
<div class="code notranslate" style="background-color: #e5eecc; border: 1px solid rgb(212, 212, 212); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 5px; width: 622px;">
<div style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 612px;">
throw <i>exception</i></div>
</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The exception can be a string, integer, Boolean or an object.</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
Note that <i>throw</i> is written in lowercase letters. Using uppercase letters will generate a JavaScript error!</div>
<h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 19px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Example</h2>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
The example below determines the value of a variable called x. If the value of x is higher than 10, lower than 5, or not a number, we are going to throw an error. The error is then caught by the catch argument and the proper error message is displayed:</div>
<div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">
<br /></div>
<div class="example" style="background-color: #e5eecc; background-image: url(http://www.w3schools.com/images/bgfadegreen.gif); background-repeat: repeat no-repeat; border: 1px solid rgb(212, 212, 212); clear: both; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin: 0px; padding: 8px; width: 616px;">
<h2 class="example" style="background-color: transparent; color: #617f10; font-size: 14px; font-weight: normal; margin-bottom: 10px; margin-top: 0px;">
Example</h2>
<div class="example_code notranslate" style="background-color: white; border: 1px solid rgb(212, 212, 212); font-family: 'courier new'; font-size: 13px; padding: 4px; width: 606px;">
<!DOCTYPE html><br /><html><br /><body><br /><script><br />var x=prompt("Enter a number between 5 and 10:","");<br />try<br /> {<br /> if(x>10)<br /> {<br /> throw "Err1";<br /> }<br /> else if(x<5)<br /> {<br /> throw "Err2";<br /> }<br /> else if(isNaN(x))<br /> {<br /> throw "Err3";<br /> }<br /> }<br />catch(err)<br /> {<br /> if(err=="Err1")<br /> {<br /> document.write("Error! The value is too high.");<br /> }<br /> if(err=="Err2")<br /> {<br /> document.write("Error! The value is too low.");<br /> }<br /> if(err=="Err3")<br /> {<br /> document.write("Error! The value is not a number.");<br /> }<br /> }<br /></script><br /></body><br /></html></div>
<br /><a class="tryitbtn" href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_throw" style="background-color: #98bf21; border: 1px solid rgb(255, 255, 255); color: white; display: block; font-size: 11px; font-weight: bold; margin-left: 1px; outline: rgb(152, 191, 33) solid 1px; padding: 3px 0px 4px; text-align: center; text-decoration: none; width: 120px;" target="_blank">Try it yourself »</a></div>
<br style="font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;" /><div class="chapter" style="font-family: verdana, helvetica, arial, sans-serif; font-size: 17px; height: 20px; margin: 0px; padding: 0px; width: 634px;">
<br class="Apple-interchange-newline" /></div>
</div>
<div class="blogger-post-footer">Http://www.fbcovercollection.com/</div>Nabeel Jamilhttp://www.blogger.com/profile/16312282635929666992noreply@blogger.com0