Web programming Tutorial

string to url slug convert in php

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigsutiedcvL5Ve8jDelSLTF6dGFV2HFF4rATBpMEXb14CD4FpIa4FVkQAkd7gOHb6LzYzXBQ67iAureuFHpF0kzdHUFYmYgleSZqt5zn87Jku4CDA04rA7kVE0DESM44qC8auOAepOyMJb/s1600/Simple-php-function-to-create-SEO-friendly-URL-slugs-from-String-574x250.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="139" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigsutiedcvL5Ve8jDelSLTF6dGFV2HFF4rATBpMEXb14CD4FpIa4FVkQAkd7gOHb6LzYzXBQ67iAureuFHpF0kzdHUFYmYgleSZqt5zn87Jku4CDA04rA7kVE0DESM44qC8auOAepOyMJb/s320/Simple-php-function-to-create-SEO-friendly-URL-slugs-from-String-574x250.jpg" width="320" /></a></div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Function:</span><br />
<?php<br />
<br />
function create_slug($string, $ext='.html'){<br />
    $replace = '-';   <br />
    $string = strtolower($string);<br />
<br />
    //remove query string<br />
    if(preg_match("#^http(s)?://[a-z0-9-_.]+\.[a-z]{2,4}#i",$string)){<br />
        $parsed_url = parse_url($string);<br />
        $string = $parsed_url['host'].' '.$parsed_url['path'];<br />
<br />
        //if want to add scheme eg. http, https than uncomment next line<br />
        //$string = $parsed_url['scheme'].' '.$string;<br />
    }<br />
<br />
    //replace / and . with white space<br />
    $string = preg_replace("/[\/\.]/", " ", $string);<br />
<br />
    $string = preg_replace("/[^a-z0-9_\s-]/", "", $string);<br />
<br />
    //remove multiple dashes or whitespaces<br />
    $string = preg_replace("/[\s-]+/", " ", $string);<br />
<br />
    //convert whitespaces and underscore to $replace<br />
    $string = preg_replace("/[\s_]/", $replace, $string);<br />
<br />
    //limit the slug size<br />
    $string = substr($string, 0, 100);<br />
<br />
    //slug is generated<br />
    return ($ext) ? $string : $string;<br />
}   <br />
?><br />
<br />
<span style="font-size: large;">Use It:</span><br />
$string = "how to become a php expert?";<br />
$slug = create_slug($string);<br />
<br />
//it will return<br />
//how-to-become-a-php-expert</div>

string to url slug convert in php

Function: function create_slug($string, $ext='.html'){ $replace = '-'; $string = strtolower($string); //remove query string if(preg_match("#^http(s)?://[a-z0-9-_.]+\.[a-z]{2,4}#i",$string)){ $parsed_url = parse_url($string); $string = $parsed_url['host'].' '.$pars…

23Dec2013

Javascript Using the document.getElementsByName Method

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1cw78VpqJNzel1piK7DKHJO53dnjvKzswkQbGtDi2p4pBPmEiManU57m3_iSVD01W40RZDrmwgFWIAL40W852SWTCknEtcTyjN9NUloppdl3KlX2OSN2uepMGT7xN9BN-ZlenEjaVHjfk/s1600/best-javascript.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1cw78VpqJNzel1piK7DKHJO53dnjvKzswkQbGtDi2p4pBPmEiManU57m3_iSVD01W40RZDrmwgFWIAL40W852SWTCknEtcTyjN9NUloppdl3KlX2OSN2uepMGT7xN9BN-ZlenEjaVHjfk/s320/best-javascript.jpg" width="320" /></a></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
This method takes in as argument the <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">name</em> attribute value of elements to be retrieved and returns a collection of desired matching elements.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
In the code snippet below, let us say we need to get a reference to the <select> element with the name attribute <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">mail_format</em>.</div>
<pre><div class="container">
<div class="line number1 index0 alt2"><code class="xml plain"><</code><code class="xml keyword">select</code> <code class="xml color1">name</code><code class="xml plain">=</code><code class="xml string">"mail_format"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"slt_mail_format"</code><code class="xml plain">></code></div>
<div class="line number2 index1 alt1"><code class="xml plain"><</code><code class="xml keyword">option</code> <code class="xml color1">value</code><code class="xml plain">=</code><code class="xml string">"TEXT"</code><code class="xml plain">>Plain Text</</code><code class="xml keyword">option</code><code class="xml plain">></code></div>
<div class="line number3 index2 alt2"><code class="xml plain"><</code><code class="xml keyword">option</code> <code class="xml color1">value</code><code class="xml plain">=</code><code class="xml string">"HTML"</code><code class="xml plain">>HTML</</code><code class="xml keyword">option</code><code class="xml plain">></code></div>
<div class="line number4 index3 alt1"><code class="xml plain"></</code><code class="xml keyword">select</code><code class="xml plain">></code></div>
</div>
&nbsp;
</pre>
<div>
<br /></div>
<div>
<span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">We could access the desired element in this way:</span></div>
<div>
<pre><div class="container">
<div class="line number1 index0 alt2"><code class="jscript keyword">var</code> <code class="jscript plain">mail_format_elements = document.getElementsByName(</code><code class="jscript string">'mail_format'</code><code class="jscript plain">);</code></div>
</div></pre>
<pre><div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">See All Code below:</strong></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">demo4.html</strong></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></strong></div>
<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Demo: Using getElementByName to get the elements in a form</title>
<script script type="text/javascript" src="demo4.js"></script>
</head>
<body>

<form name ="subscribe" id="subscribe_frm" action="#">
<div>
<p><label for="name">Your Name: </label><input type="text" name="name" id="txt_name"></p>
<p><label for="email">Your Email: </label><input type="text" name="email" id="txt_email"></p>
<p><label for="mail_format">Mail Format: <select name="mail_format" id="slt_mail_format">
<option value="TEXT">Plain Text</option>
<option value="HTML">HTML</option>
</select></p>
<p><input type="button" name="submit1" value="Elements with name='mail_format' attribute" onclick="processFormData('mail_format');" ></p>
<p><input type="button" name="submit2" value="Elements with name='email' attribute" onclick="processFormData('email');" ></p>
</div>

</form>
</pre>
<div>
</div>
<div>
<strong style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">And demo4.js</strong></div>
<div>
<strong style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;"><pre style="color: black; font-weight: normal; line-height: normal; text-align: start;">function processFormData(name_attr)
{

var mail_format_elements = document.getElementsByName(name_attr);

var message = "The form has the following elements with the 'name' attribute = '" + name_attr + "': \n\n";

for (i=0; i<mail_format_elements.length; i++) {
message += mail_format_elements[i].tagName + ' element with "id" attribute = "' + mail_format_elements[i].getAttribute("id") + '"\n';
}

alert(message);

}
</pre>
<div>
</div>
</strong></div>
</pre>
</div>
<br /></div>

Javascript Using the document.getElementsByName Method

This method takes in as argument the name attribute value of elements to be retrieved and returns a collection of desired matching elements. In the code snippet below, let us say we need to get a reference to the element with the name attribute mail_format. select name="mail_format" id="slt_mail_f…

19Nov2013

Javascript Other Cross-browser ways of accessing form element objects

<html>
<head>
<title>Demo: Using getElementByTagNameto get the elements in a form</title>
<script script type="text/javascript" src="demo2.js"></script>
</head>
<body>

<form name ="subscribe" id="subscribe_frm" action="#">
<div>
<p><label for="name">Your Name: </label><input type="text" name="name" id="txt_name"></p>
<p><label for="email">Your Email: </label><input type="text" name="email" id="txt_email"></p>
<p><label for="mail_format">Mail Format: <select name="mail_format" id="slt_mail_format">
<option value="TEXT">Plain Text</option>
<option value="HTML">HTML</option>
</select></p>
<p><input type="button" name="submit" value="submit" onclick="processFormData();" ></p>
</div>

</form></pre>
<pre><h2 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Example demo2.js</h2>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
What if we only wanted to access <input> elements with the type attribute as text? We could do it in the following way:</div>
<pre>function processFormData()
{

var inputs = document.getElementsByTagName('input');

var message = 'The form has the following input elements: \n\n';

for (var i = 0; i < inputs.length; i++) {
message += inputs[i].tagName + " element with 'type' attribute = '" + inputs[i].getAttribute('type') + "' and 'name' attribute = '" + inputs[i].getAttribute('name') + "'\n";
}

alert(message);

}</pre>
<pre><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify; white-space: normal;">This time, the elements retrieved do not include the element: <input type=”button”>.</span></pre>
<pre><h2 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Example Demo3.html</h2>
<div>
<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Demo: Using getElementsByTagName to get the elements in a form</title>
<script script type="text/javascript" src="demo3.js"></script>
</head>
<body>

<form name ="subscribe" id="subscribe_frm" action="#">
<div>
<p><label for="name">Your Name: </label><input type="text" name="name" id="txt_name"></p>
<p><label for="email">Your Email: </label><input type="text" name="email" id="txt_email"></p>
<p><label for="mail_format">Mail Format: <select name="mail_format" id="slt_mail_format">
<option value="TEXT">Plain Text</option>
<option value="HTML">HTML</option>
</select></p>
<p><input type="button" name="submit" value="submit" onclick="processFormData();" ></p>
</div>

</form>
</pre>
</div>
<div>
</div>
<div>
<h2 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Example Demo3.js</h2>
</div>
<div>
<pre>function processFormData()
{

var inputs = document.getElementsByTagName('input');

var message = "The form has the following input elements with the 'type' attribute = 'text': \n\n";

for (var i=0; i < inputs.length; i++) {
if (inputs[i].getAttribute('type') == 'text') {
message += inputs[i].tagName + " element with the 'name' attribute = '" + inputs[i].getAttribute('name') + "'\n";
}
}

alert(message);

}
</pre>
</div>
<div>
</div>
</pre>
</pre>
</div>
<br /></div>

Javascript Other Cross-browser ways of accessing form element objects

There are two other cross-browser ways of accessing form elements: document.getElementsByTagName anddocument.getElementsByName. USING THE DOCUMENT.GETELEMENTSBYTAGNAME METHOD This method takes in as argument the name of a tag (element) and returns an array of all matching tags (elements) found in t…

19Nov2013

Javascript Checking for getElementById support

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ekH30_kkTijwt3fx2ukqJXDF-pNKupM638wpom5qMC5UeeElRTEZJjEsPeium4C9x3WWX0cXNAncBVBvb-uO1jlEB5PxFtOtYYHzwa0dYuVElAbhyPNtBPeJCWCNpfFQjOKU8kFG4LBN/s1600/javascriptpicmd2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ekH30_kkTijwt3fx2ukqJXDF-pNKupM638wpom5qMC5UeeElRTEZJjEsPeium4C9x3WWX0cXNAncBVBvb-uO1jlEB5PxFtOtYYHzwa0dYuVElAbhyPNtBPeJCWCNpfFQjOKU8kFG4LBN/s320/javascriptpicmd2.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">All modern browsers support getElementById() method. However if you are to support very old browsers, use the following function:</span></div>
<pre>function getElement (id)
{
if (document.getElementById)
{
return document.getElementById(id);
}
else if (document.all)
{
return window.document.all[id];
}
else if (document.layers)
{
return window.document.layers[id];
}
}
</pre>
<div>
<br /></div>
<div>
<br /></div>
<br /></div>

Javascript Checking for getElementById support

All modern browsers support getElementById() method. However if you are to support very old browsers, use the following function: function getElement (id) { if (document.getElementById) { return document.getElementById(id); } else if (document.all) { return window.document.all[id]; } else if (docum…

19Nov2013

Javascript access and validation the form and input elements

<html>
<head>
<title>Demo: Using getElementById to get the elements in a form</title>
<script script type="text/javascript" src="demo1.js"></script>
</head>
<body>
<a href="javascript:toggleFormVisibility();" id="sub">Subscribe to our Newsletter!</a>
<form name ="subscribe" id="subscribe_frm" action="#" style="display: none">
<div>
<p>Please enter your subscription information:</p>
<p><label for="name">Your Name: </label><input type="text" name="name" id="txt_name"></p>
<p><label for="email">Your Email: </label><input type="text" name="email" id="txt_email"></p>
<p><label for="mail_format">Mail Format: <select name="mail_format" id="slt_mail_format">
<option value="TEXT">Plain Text</option>
<option value="HTML">HTML</option>
</select></p>
<p><input type="button" name="submit" value="submit" onclick="processFormData();" ></p>
</div>
<a href="javascript:toggleFormVisibility();" id="nosub" style="display: none">No, Thank you! Some other time, perhaps....</a>
</form>
</pre>
</div>
<div>
</div>
<div>
<h2 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Example demo1.js</h2>
</div>
<div>
<pre>function trim(str) {
return str.replace(/^\s+|\s+$/g, '');
}

function checkEmail(email)
{

var pattern=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;

if(pattern.test(email)) {
return true;
} else {
return false;
}

}

function toggleFormVisibility()
{
var frm_element = document.getElementById('subscribe_frm');
var sub_link_element = document.getElementById('sub');
var nosub_link_element = document.getElementById('nosub');

var vis = frm_element.style;

if(vis.display=='' || vis.display=='none') {
vis.display = 'block';
sub_link_element.style.display='none';
nosub_link_element.style.display='';
} else {
vis.display = 'none';
sub_link_element.style.display='block';
nosub_link_element.style.display='none';
}

}

function processFormData()
{

var name_element = document.getElementById('txt_name');
var email_element = document.getElementById('txt_email');
var mail_format_element = document.getElementById('slt_mail_format');

var name = trim(name_element.value);
var email = trim(email_element.value);
var mail_format = mail_format_element.value;

var error_message = 'The following fields had errors in them: \n\n';
var data = 'You entered the following information: \n\n';

var error_flag = false;

if(name == '') {
error_message += 'Name: Please enter your name\n';
error_flag = true;
} else {
data += 'Name: ' + name + '\n';
}

if(!checkEmail(email)) {
error_message += 'Email: Please enter a valid email address';
error_flag = true;
} else {
data += 'Email: ' + email + '\n';
}

data += 'Mail Format: ' + mail_format;

if(error_flag) {
alert(error_message);
} else {
alert(data);
}

}
</pre>
</div>
<div>
</div>
<div>
<span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify; white-space: normal;">In this demo, we toggle the visibility of the form. This is done by accessing the form element <form> which we have seen above and setting its </span><em style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">display</em><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify; white-space: normal;"> property as shown in the code below:</span></div>
<div>
<span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify; white-space: normal;">
</span></div>
<div>
<pre>function toggleFormVisibility()
{
var frm_element = document.getElementById('subscribe_frm');
var sub_link_element = document.getElementById('sub');
var nosub_link_element = document.getElementById('nosub');

var vis = frm_element.style;

}
</pre>
</div>
<div>
</div>
<div>
<h2 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Input validation</h2>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
The code below makes sure that the field is not empty.
First, we trim out any leading and trailing blank space.</div>
<pre>function trim(str) {
return str.replace(/^\s+|\s+$/g, '');
}
</pre>
</div>
<div>
</div>
<div>
<span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify; white-space: normal;">The code below validates the </span><em style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">txt_name</em><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify; white-space: normal;"> field in our processFormData function.</span></div>
<div>
<pre>var name_element = document.getElementById (‘txt_name’);</pre>
<div>
<div><code>if</code> <code>(trim(name_element.value) == </code><code>''</code><code>)</code></div>
<div><code>{</code></div>
<div><code>   </code><code>alert (</code><code>'Please enter your name'</code><code>);</code></div>
<div><code>}</code></div>
</div>
<pre></pre>
<pre>
</pre>
<pre>
</pre>
</div>
</pre>
</div>
</div>

Javascript access and validation the form and input elements

Demo: Using getElementById to get the elements in a form Subscribe to our Newsletter! Please enter your subscription information: Your Name: Your Email: Mail Format: Plain Text HTML No, Thank you! Some other time, perhaps.... Example demo1.js function trim(str) { return str.replace(/^\s+|\s+$/g,…

19Nov2013

Accessing Form Elements using getElementById

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ekH30_kkTijwt3fx2ukqJXDF-pNKupM638wpom5qMC5UeeElRTEZJjEsPeium4C9x3WWX0cXNAncBVBvb-uO1jlEB5PxFtOtYYHzwa0dYuVElAbhyPNtBPeJCWCNpfFQjOKU8kFG4LBN/s1600/javascriptpicmd2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ekH30_kkTijwt3fx2ukqJXDF-pNKupM638wpom5qMC5UeeElRTEZJjEsPeium4C9x3WWX0cXNAncBVBvb-uO1jlEB5PxFtOtYYHzwa0dYuVElAbhyPNtBPeJCWCNpfFQjOKU8kFG4LBN/s320/javascriptpicmd2.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">In order to access the </span><code style="background-color: white; border: 0px; color: #373737; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"></code><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">form element, we can use the method getElementById() like this:</span></div>
<pre>var name_element = document.getElementById('txt_name');
</pre>
<div>
<br /></div>
<div>
<span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">The getElementById() call returns the input element object with ID ‘txt_name’ . Once we have the object, we can get the properties and call the methods of the object. For example, to get the value of the input element, get the value attribute.</span></div>
<div>
<span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;"><br /></span></div>
<div>
<pre></pre>
<div>
<div><code>var</code> <code>name = name_element.value;</code></div>
</div>
<pre>
</pre>
</div>
<div>
<br /></div>
<div>
<span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">Similarly, it is possible to access the <form> element:</span></div>
<div>
<pre></pre>
<div><code>var</code> <code>frm_element = document.getElementById (</code><code>'subscribe_frm'</code><code>);</code></div>
<div></pre>
<pre>
</pre>
</div>
</div>

Accessing Form Elements using getElementById

In order to access the form element, we can use the method getElementById() like this: var name_element = document.getElementById('txt_name'); The getElementById() call returns the input element object with ID ‘txt_name’ . Once we have the object, we can get the properties and call the methods of t…

19Nov2013

Use getElementById to get the elements in a form

Your Name: <input type="text" name="name" id="txt_name" />

Your Email: <input type="text" name="email" id="txt_email" />

</form>
</pre>
<div>
<br /></div>
<div>
<span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">There are elements such as <input/> and containers like <form> </form> Each element can have attributes associated with it, such as:</span></div>
<div>
<span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;"><br /></span></div>
<div>
<pre><input type="text" name="name" id="txt_name"></pre>
<pre><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify; white-space: normal;">ere, the <input/> element has three attributes: </span><em style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">type</em><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify; white-space: normal;">, </span><em style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">name</em><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify; white-space: normal;"> and </span><em style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">id</em><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify; white-space: normal;">. The </span><em style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">id</em><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify; white-space: normal;">attribute uniquely identifies this particular element.</span></pre>
</div>
<br /></div>

Use getElementById to get the elements in a form

There are many ways of accessing form elements, of which the easiest is by using the cross-browser W3C DOM document.getElementById() method. Before we learn more about this method, it would be useful to know something about the Document Object Model (DOM), the concept of HTML nodes or elements, and…

19Nov2013

JavaScript Date and Time Object

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1cw78VpqJNzel1piK7DKHJO53dnjvKzswkQbGtDi2p4pBPmEiManU57m3_iSVD01W40RZDrmwgFWIAL40W852SWTCknEtcTyjN9NUloppdl3KlX2OSN2uepMGT7xN9BN-ZlenEjaVHjfk/s1600/best-javascript.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1cw78VpqJNzel1piK7DKHJO53dnjvKzswkQbGtDi2p4pBPmEiManU57m3_iSVD01W40RZDrmwgFWIAL40W852SWTCknEtcTyjN9NUloppdl3KlX2OSN2uepMGT7xN9BN-ZlenEjaVHjfk/s320/best-javascript.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
The Date object is useful when you want to display a date or use a timestamp in some sort of calculation. In Java, you can either make a Date object by supplying the date of your choice, or you can let JavaScript create a Date object based on your visitor’s system clock. It is usually best to let JavaScript simply use the system clock.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
When creating a Date object based on the computer’s (not web server’s!) internal clock, it is important to note that if someone’s clock is off by a few hours or they are in a different time zone, then the Date object will create a different times from the one created on your own computer.</div>
<h1 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
JavaScript Date Today (Current)</h1>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
To warm up our JavaScript Date object skills, let’s do something easy. If you do not supply any arguments to the Date constructor (this makes the Date object) then it will create a Date object based on the visitor’s internal clock.</div>
<pre><h4>It is now
<script type="text/javascript">

</script>
</h4>
</pre>
<div>
<br /></div>
<div>
<pre><h4>It is now
<script type="text/javascript">

</script>
</h4>
</pre>
</div>
<div>
<br /></div>
<div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Nothing shows up! That’s because we still don’t know the methods of the Date object that let us get the information we need (i.e. Day, Month, Hour, etc).</div>
<h1 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Get the JavaScript Time</h1>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
The Date object has been created, and now we have a variable that holds the current date! To get the information we need to print out, we have to utilize some or all of the following functions:</div>
<ul style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; list-style: square; margin: 0px 0px 1.625em 2.5em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getTime()</strong> – Number of milliseconds since 1/1/1970 @ 12:00 AM</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getSeconds()</strong> – Number of seconds (0-59)</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getMinutes()</strong> – Number of minutes (0-59)</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getHours()</strong> – Number of hours (0-23)</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getDay()</strong> – Day of the week(0-6). 0 = Sunday, … , 6 = Saturday</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getDate()</strong> – Day of the month (0-31)</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getMonth()</strong> – Number of month (0-11)</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getFullYear()</strong> – The four digit year (1970-9999)</li>
</ul>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Now we can print out the date information. We will be using the <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getDate</em>, <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getMonth</em>, and <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getFullYear</em>methods in this example.</div>
<pre><h4>It is now
<script type="text/javascript">

</script>
</h4>
</pre>
</div>
<div>
<br /></div>
<div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Output</strong></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<br /></div>
<h4 style="background-color: white; border: 0px; clear: both; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; font-weight: inherit; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
It is now 1/31/2012 !</h4>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Notice that we added 1 to the <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">month</em> variable to correct the problem with January being 0 and December being 11. After adding 1, January will be 1, and December will be 12.</div>
<h1 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
JavaScript Current Time Clock</h1>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Now, instead of displaying the date we, will display the format you might see on a typical digital clock — HH:MM AM/PM (H = Hour, M = Minute).</div>
<pre><h4>It is now
<script type="text/javascript">

</script>
</h4>
</pre>
</div>
<div>
<br /></div>
<div>
<strong style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">Output:</strong></div>
<div>
<strong style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"><pre style="color: black; font-weight: normal; line-height: normal; text-align: start;"><h4>It is now<span>  </span>
<script type="text/javascript">

</script>
</h4></pre>
<pre style="color: black; font-weight: normal; line-height: normal; text-align: start;"><div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Output:</strong></div>
<h4 style="border: 0px; clear: both; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: inherit; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
It is now 12:51 PM</h4>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Above, we check to see if either the <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">hours</em> or <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">minutes</em> variable is less than 10. If it is, then we need to add a zero to the beginning of minutes. This is not necessary, but if it is 1:01 AM, our clock would output “1:1 AM”, which doesn’t look very nice at all!</div>
</pre>
</strong></div>
</div>

JavaScript Date and Time Object

The Date object is useful when you want to display a date or use a timestamp in some sort of calculation. In Java, you can either make a Date object by supplying the date of your choice, or you can let JavaScript create a Date object based on your visitor’s system clock. It is usually best to let J…

19Nov2013

JavaScript Popups

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ekH30_kkTijwt3fx2ukqJXDF-pNKupM638wpom5qMC5UeeElRTEZJjEsPeium4C9x3WWX0cXNAncBVBvb-uO1jlEB5PxFtOtYYHzwa0dYuVElAbhyPNtBPeJCWCNpfFQjOKU8kFG4LBN/s1600/javascriptpicmd2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ekH30_kkTijwt3fx2ukqJXDF-pNKupM638wpom5qMC5UeeElRTEZJjEsPeium4C9x3WWX0cXNAncBVBvb-uO1jlEB5PxFtOtYYHzwa0dYuVElAbhyPNtBPeJCWCNpfFQjOKU8kFG4LBN/s320/javascriptpicmd2.jpg" width="320" /></a></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
However, we will show you how to make windows popup for reasonable occasions, like when you want to display extra information, or when you want to have something open a new window that isn’t an HTML anchor tag (i.e. a hyperlink).</div>
<h1 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline;">
JavaScript window.open Function</h1>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
The <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">window.open()</em> function creates a new browser window, customized to your specifications, without the use of an HTML anchor tag. In this example, we will be making a function that utilizes the <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">window.open()</em>function.</div>
<pre><html>
<head>
<script type="text/javascript">

</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup()" value="POP!">
</form>
<p onClick="myPopup()">CLICK ME TOO!</p>
</body>
</html>
</pre>
<div>
<br /></div>
<div>
<form style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<input style="color: #373737; line-height: 1.625;" type="button" value="POP!" /></form>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
CLICK ME TOO!</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
This works with pretty much any tag that can be clicked on, so please go ahead and experiment with this fun little tool. Afterwards, read on to learn more about the different ways you can customize the JavaScript window that <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">pops</strong> up.</div>
<h1 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
JavaScript Window.Open Arguments</h1>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
There are three arguments that the <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">window.open</em> function takes:</div>
<ol start="1" style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 1.625em 2.5em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">The relative or absolute URL of the webpage to be opened.</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">The text name for the window.</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">A long string that contains all the different properties of the window.</li>
</ol>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Naming a window is very useful if you want to manipulate it later with JavaScript. However, this is beyond the scope of this lesson, and we will instead be focusing on the different properties you can set with your brand spanking new JavaScript window. Below are some of the more important properties:</div>
<ul style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; list-style: square; margin: 0px 0px 1.625em 2.5em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">dependent</strong> – Subwindow closes if the parent window (the window that opened it) closes</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">fullscreen</strong> – Display browser in fullscreen mode</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">height</strong> – The height of the new window, in pixels</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">width</strong> – The width of the new window, in pixels</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">left</strong> – Pixel offset from the left side of the screen</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">top</strong> – Pixel offset from the top of the screen</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">resizable</strong> – Allow the user to resize the window or prevent the user from resizing, currently broken in Firefox.</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">status</strong> – Display or don’t display the status bar</li>
</ul>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Dependent, fullscreen, resizable, and status are all examples of ON/OFF properties. You can either set them equal to zero to turn them off, or set them to one to turn them ON. There is no inbetween setting for these types of properties.</div>
<h1 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Upgraded JavaScript Popup Window!</h1>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Now that we have the tools, let’s make a sophisticated JavaScript popup window that we can be proud of!</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
HTML & JavaScript Code:</div>
<pre></p>
<p onclick="myPopup()"><head>
<script type="text/javascript">

</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup2()" value="POP2!">
</form>
<p onClick="myPopup2()">CLICK ME TOO!</p>
</body></pre>
<pre><form style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<input style="color: #373737; line-height: 1.625;" type="button" value="POP2!" /></form>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
CLICK ME TOO!</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Now, that is a prime example of a worthless popup! When you make your own, try to have them relate to your content, like a small popup with no navigation that just gives the definition or explanation of a word, sentence, or picture!</div>
</pre>
</div>
<br /></div>

JavaScript Popups

However, we will show you how to make windows popup for reasonable occasions, like when you want to display extra information, or when you want to have something open a new window that isn’t an HTML anchor tag (i.e. a hyperlink). JavaScript window.open Function The window.open() function creates a …

19Nov2013

JavaScript Time Delay

</body>
</html>
</pre>
<div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
The most important part of getting the delay to work is being sure to use the JavaScript function<em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">setTimeout</em>. We want the <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">delayer()</em> function to be used after 5 seconds or 5000 milliseconds (5 seconds), so we pass the <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">setTimeout()</em> two arguments.</div>
<ul style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; list-style: square; margin: 0px 0px 1.625em 2.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">‘delayer()’</strong> – The function we want <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">setTimeout()</em> to execute after the specified delay.</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">5000</strong> – the number of millisecods we want <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">setTimeout()</em> to wait before executing our function. 1000 miliseconds = 1 second.</li>
</ul>
</div>
<br /></div>

JavaScript Time Delay

Implementing a timed delay in JavaScript is useful in the following situations: Showing an “Update your bookmark” page when you have to change URLs or page locations For download sites that wish to have a timed delay before the download starts To refresh a webpage once every specified number of sec…

19Nov2013

JavaScript Window.Location

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ekH30_kkTijwt3fx2ukqJXDF-pNKupM638wpom5qMC5UeeElRTEZJjEsPeium4C9x3WWX0cXNAncBVBvb-uO1jlEB5PxFtOtYYHzwa0dYuVElAbhyPNtBPeJCWCNpfFQjOKU8kFG4LBN/s1600/javascriptpicmd2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ekH30_kkTijwt3fx2ukqJXDF-pNKupM638wpom5qMC5UeeElRTEZJjEsPeium4C9x3WWX0cXNAncBVBvb-uO1jlEB5PxFtOtYYHzwa0dYuVElAbhyPNtBPeJCWCNpfFQjOKU8kFG4LBN/s320/javascriptpicmd2.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: start;">Control over what page is loaded into the browser rests in the JavaScript property </span><em style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: start; vertical-align: baseline;">window.location</em><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: start;">. By setting </span><em style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: start; vertical-align: baseline;">window.location</em><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: start;"> equal to a new URL, you will in turn change the current webpage to the one that is specified. If you wanted to redirect all your visitors to www.google.com when they arrived at your site, you would just need the script below:</span></div>
<pre><pre><script type="text/javascript">

</script></pre></pre>
<br /></div>

JavaScript Window.Location

Control over what page is loaded into the browser rests in the JavaScript property window.location. By setting window.location equal to a new URL, you will in turn change the current webpage to the one that is specified. If you wanted to redirect all your visitors to www.google.com when they arrive…

19Nov2013

JavaScript Print Function

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1cw78VpqJNzel1piK7DKHJO53dnjvKzswkQbGtDi2p4pBPmEiManU57m3_iSVD01W40RZDrmwgFWIAL40W852SWTCknEtcTyjN9NUloppdl3KlX2OSN2uepMGT7xN9BN-ZlenEjaVHjfk/s1600/best-javascript.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1cw78VpqJNzel1piK7DKHJO53dnjvKzswkQbGtDi2p4pBPmEiManU57m3_iSVD01W40RZDrmwgFWIAL40W852SWTCknEtcTyjN9NUloppdl3KlX2OSN2uepMGT7xN9BN-ZlenEjaVHjfk/s320/best-javascript.jpg" width="320" /></a></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
The JavaScript print function performs the same operation as the print option that you see at the top of your browser window or in your browser’s “File” menu. The JavaScript print function will send the contents of the webpage to the user’s printer.</div>
<h1 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
JavaScript Print Script – window.print()</h1>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
The JavaScript print function <em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">window.print()</em> will print the current webpage when executed. In this example script, we will be placing the function on a JavaScript button that will perform the print operation when the<em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">onClick</em> event occurs.</div>
<pre><html>

</body>
</html>
</pre>
<div>
<br /></div>
<div>
<h2 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Display:</h2>
<form style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<input style="color: #373737; line-height: 1.625;" type="button" value="Print This Page" /></form>
<form style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
If you click this button you should be prompted with whatever application your computer uses to handle its print functionality.<div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
<h1 style="border: 0px; clear: both; color: black; font-family: inherit; font-size: 15px; font-style: inherit; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline;">
JavaScript Redirect</h1>
<div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
You’re moving to a new domain name. You have a time-delay placeholder on your download site. You have a list of external web servers that are helping to mirror your site. What will help you deal with and/or take advantage of these situations? JavaScript redirects will.</div>
<div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
When your webpage is moved, you’d probably want to notify your visitors of the change. One good way is to place a “redirect page” at the old location which, after a timed delay, will forward visitors to the new location of your webpage. You can do just this with a JavaScript redirection.</div>
</form>
</div>
<br /></div>

JavaScript Print Function

The JavaScript print function performs the same operation as the print option that you see at the top of your browser window or in your browser’s “File” menu. The JavaScript print function will send the contents of the webpage to the user’s printer. JavaScript Print Script – window.print() The Java…

19Nov2013

JavaScript Alert Prompt and Confirm function

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1cw78VpqJNzel1piK7DKHJO53dnjvKzswkQbGtDi2p4pBPmEiManU57m3_iSVD01W40RZDrmwgFWIAL40W852SWTCknEtcTyjN9NUloppdl3KlX2OSN2uepMGT7xN9BN-ZlenEjaVHjfk/s1600/best-javascript.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1cw78VpqJNzel1piK7DKHJO53dnjvKzswkQbGtDi2p4pBPmEiManU57m3_iSVD01W40RZDrmwgFWIAL40W852SWTCknEtcTyjN9NUloppdl3KlX2OSN2uepMGT7xN9BN-ZlenEjaVHjfk/s320/best-javascript.jpg" width="320" /></a></div>
<h3 style="background-color: white; border: 0px; clear: both; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px; font-weight: inherit; letter-spacing: 0.1em; line-height: 2.6em; margin: 0px; outline: 0px; padding: 0px; text-align: justify; text-transform: uppercase; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><br /></strong></h3>
<h3 style="background-color: white; border: 0px; clear: both; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px; font-weight: inherit; letter-spacing: 0.1em; line-height: 2.6em; margin: 0px; outline: 0px; padding: 0px; text-align: justify; text-transform: uppercase; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">JAVASCRIPT ALERT EXAMPLE 1:</strong></h3>
<div>
<span style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="font-family: inherit; font-style: inherit; font-weight: normal;"></strong>

<HTML>
<HEAD>
<TITLE>Using alert Boxes</TITLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>

<BODY>
<H1>Using alert Boxes</H1>
<FORM>
<INPUT TYPE="BUTTON" ONCLICK="displayer()" VALUE="Click Me!">
</FORM>
</BODY>
<HTML></pre>
<pre style="font-family: inherit; font-style: inherit; font-weight: normal;">
</pre>
<h2 style="font-family: inherit; font-style: inherit; font-weight: bold; text-align: left;">
Prompt</h2>
<div style="font-family: inherit; font-style: inherit; font-weight: bold;">
<pre style="font-weight: normal;"><h2 align="center"><strong>JavaScript Confirm function</strong></h2>
&nbsp;

<html>
<head>
<title>A Simple Page</title>
<script language="javascript">

</script>
</head>
<body>

</body>
</html>
</pre>
</div>
<div style="font-family: inherit; font-style: inherit; font-weight: bold;">
<br /></div>
<div style="font-weight: bold;">
Confirm function</div>
<div style="font-weight: bold;">
<pre style="font-weight: normal;"><html>
<head>
<title>A Simple Page</title>
<script language="javascript">

</script>
</head>
<body>

</body>
</html>
</pre>
</div>
<div style="font-weight: bold;">
<br /></div>
<div>
<h2 style="text-align: left;">
<span style="border: 0px; font-family: inherit; font-style: inherit; font-weight: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">CONFIRM DIALOG RETURNS BOOLEAN VALUE:</span></h2>
</div>
<div style="font-weight: bold;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="font-weight: normal;"><html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">

</script>
</head>
<body>

</body>
</html>
</pre>
<div>
<br /></div>
<div>
<h2 style="text-align: left;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">USE CONFIRM DIALOG IN IF STATEMENT:</strong></h2>
</div>
<div>
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="font-weight: normal;"><html>
<head>
<script Language="Javascript" type = "text/javascript">
<!--
var newurl

function CheckRequest(newurl)
{
if (confirm("Do you want to visit " + newurl + " site.")) {
return true
} else {
return false
}
}

//-->
</script>
<title>Capturing Links</title>
</head>
<P><A href="http://www.google.com" onClick = "return CheckRequest('java2s')">Java</A></P>
<P><A href="http://www.netscape.com" onClick = "return CheckRequest('Netscape')">Netscape</A></P>
</body>
</html>
</pre>
<div>
<br /></div>
<div>
<strong style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">Use confirms method in if statement:</strong></div>
<div>
<strong style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"><pre style="color: black; font-weight: normal; line-height: normal; text-align: start;"><html>
<head>
<script language="JavaScript" type = "text/javascript">
<!--
var username = prompt("Type your name:", "");

if (confirm("Your name is: " + username + ". Is that correct?") == true )
{
alert("Hello " + username);
}
else
{
alert("Hi");
}
//-->
</script>
</head>
</html>
</pre>
<div>
<br /></div>
</strong></div>
</strong></div>
</strong></div>
</span></div>
</div>

JavaScript Alert Prompt and Confirm function

JAVASCRIPT ALERT EXAMPLE 1: Using alert Boxes Using alert Boxes Prompt JavaScript Confirm function 1 A Simple Page Confirm function A Simple Page

19Nov2013

JavaScript Array

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsUVFQRS0MuzA_0NAEBdPxiCGCn_qumSAB7swhlAjQBMtaa1hnZgddEOK2xtpts6I4fHrZ9lFItWNSlohDczySzH-5XckB6PdZzBb3b0l5j38t5zliFPJq7FhT5fx2xewtuNfzxNdZQD9a/s1600/javascript_call.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsUVFQRS0MuzA_0NAEBdPxiCGCn_qumSAB7swhlAjQBMtaa1hnZgddEOK2xtpts6I4fHrZ9lFItWNSlohDczySzH-5XckB6PdZzBb3b0l5j38t5zliFPJq7FhT5fx2xewtuNfzxNdZQD9a/s1600/javascript_call.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h2 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Array Constructors:</strong></h2>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<br /></div>
<table border="0" cellpadding="0" cellspacing="0" style="background-color: white; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-spacing: 0px; border-width: 0px 0px 1px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; width: 690px;"><tbody style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<tr style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><td nowrap="nowrap" style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-width: 1px 0px 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 6px 10px 6px 0px; vertical-align: baseline;" valign="top"><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">var variable = </code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">new </strong></code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Array()</code><br /><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">var variable = <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">new </strong>Array(<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">int</strong>)</code><br /><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">var variable = <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">new </strong>Array(arg1, ..., argN)</code></td></tr>
</tbody></table>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
These constructors create a new array and initialize the Array object based on the arguments passed in the parameter list.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
The constructor that has no arguments sets the length property to 0.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
int– An array is created and its length property is set to the value int.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
arg1,…argN–An array is created and the array is populated with the arguments. The array length property is set to the number of arguments in the parameter list.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
The newly created array is returned from the constructor</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Use Array’s Constructor</strong></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<br /></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Arrays stores multiple data based on a numbered position into one storage structure.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
The index starts at 0 and goes up.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
JavaScript supports having arrays within arrays, called multidimensional arrays.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
One-Dimensional array</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
To create an instance of an array, you use the new operator along with the Array object.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
There are four ways to declare an array.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
First, an empty array can be created by leaving the constructor parameters empty:</div>
<table border="0" cellpadding="0" cellspacing="0" style="background-color: white; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-spacing: 0px; border-width: 0px 0px 1px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; width: 690px;"><tbody style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<tr style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><td nowrap="nowrap" style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-width: 1px 0px 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 6px 10px 6px 0px; vertical-align: baseline;" valign="top"><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">var x = </code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">new </strong></code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Array();</code></td></tr>
</tbody></table>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
The second way to create an array is to fill in the constructor parameters with the array elements.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
An array can contain elements of various types:</div>
<table border="0" cellpadding="0" cellspacing="0" style="background-color: white; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-spacing: 0px; border-width: 0px 0px 1px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; width: 690px;"><tbody style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<tr style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><td nowrap="nowrap" style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-width: 1px 0px 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 6px 10px 6px 0px; vertical-align: baseline;" valign="top"><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">var x = </code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">new </strong></code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Array(</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"A"</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">,</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"BB"</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">,</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"CCC"</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">,</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">1</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">,</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">5</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">,</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">8</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">);</code></td></tr>
</tbody></table>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
The third way to create an array is to fill in the constructor parameter with the size of the array.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
This initializes the array to hold the number of elements specified, but does not specify the actual elements.</div>
<table border="0" cellpadding="0" cellspacing="0" style="background-color: white; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-spacing: 0px; border-width: 0px 0px 1px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; width: 690px;"><tbody style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<tr style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><td nowrap="nowrap" style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-width: 1px 0px 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 6px 10px 6px 0px; vertical-align: baseline;" valign="top"><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">var x = </code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">new </strong></code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Array(</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">6</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">);</code></td></tr>
</tbody></table>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
The fourth way to create an array is to use the array square brackets to fill in the array elements directly.</div>
<table border="0" cellpadding="0" cellspacing="0" style="background-color: white; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-spacing: 0px; border-width: 0px 0px 1px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; width: 690px;"><tbody style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<tr style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><td nowrap="nowrap" style="border-top-color: rgb(221, 221, 221); border-top-style: solid; border-width: 1px 0px 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 6px 10px 6px 0px; vertical-align: baseline;" valign="top"><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">var x = [</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"A"</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">,</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"BB"</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">,</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"CCC"</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">,</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">1</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">,</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">5</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">,</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">8</code><code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">];</code></td></tr>
</tbody></table>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<br /></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </strong><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></strong><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Creating an Array and Accessing Its Elements:</strong></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></strong></div>
<pre><html>
<body>
<h2>Creating and Accessing Arrays</h2>
<script language="JavaScript">
<!--
numArray = new Array(4,6,3);

document.write("[0]=",numArray[0],"<br>");
document.write("[1]=",numArray[1],"<br>");
document.write("[2]=",numArray[2]);
//End Hide-->
</script>
</body>
</html>
</pre>
<div>
<br /></div>
<div>
<h2 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Create an array using the Object() constructor:</strong></h2>
</div>
<div>
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="font-weight: normal;"><html>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
var myArray = Object();
myArray.length=3;   //array position zero
myArray[1]="A";
myArray[2]="B";
myArray[3]="C";

document.write("The myArray holds:  ");

for(x=1; x<=myArray.length; x++) {
document.write(myArray[x],"  ");
}
-->
</SCRIPT>
</body>
</html></pre>
<pre style="font-weight: normal;"><h2 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Array declaration with element count:</strong></h2>
<div>
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="font-weight: normal;"><html>
<head>
<title>A Simple Page</title>
<script language="javascript">

</script>
</head>
<body>

</body>
</html>
</pre>
<div>
</div>
<div>
<strong style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">Initialize a string array during declaration and check the array size:</strong></div>
<div>
<strong style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;"><pre style="color: black; font-weight: normal; line-height: normal; text-align: start;"><html>
<head>
<title>A Simple Page</title>
<script language="javascript">

</script>
</head>
<body>

</body>
</html>
</pre>
<div>
</div>
<div>
<strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Define two arrays and use for statement to output their values:</strong></div>
<div>
<strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="color: black; font-weight: normal; line-height: normal; text-align: start;"><html>
<head>
<title>Define two arrays and use for statement to ouput their values</title>

</head>
<body>

<h1>Define two arrays and use for statement to ouput their values</h1>

var myArray    = new Array();
myArray[0] = "A";
myArray[1] = "B";
myArray[2] = "C";
myArray[3] = "D";
myArray[4] = "E";

var myArray2    = new Array();
myArray2[0] = "1";
myArray2[1] = "2";
myArray2[2] = "3";
myArray2[3] = "4";
myArray2[4] = "5";

for (var i=0; i<myArray.length; i++) {
document.write("<tr><td>" + myArray[i] + "</td>");
document.write("<td>" + myArray2[i] + "</td></tr>");
}

//-->
</script>

</table>

</body>
</html>
</pre>
<div>
</div>
<div>
<strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Store strings in array:</strong></div>
<div>
<strong style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="color: black; font-weight: normal; line-height: normal; text-align: start;"><html>
<head>
<title>Store strings in array</title>

</head>
<body>
<P>

var myArray = new Array();
myArray[0] = "AAA";
myArray[1] = "BBB";
myArray[2] = "CCC";
for (var i=0; i<myArray.length; i++) {
document.write("Element " +i+ " contains: " +myArray[i]+ "<br />");
}

//-->
</script>

</p>

</body>
</html></pre>
<pre style="color: black; font-weight: normal; line-height: normal; text-align: start;"><h1 style="border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
JavaScript Array Sorting</h1>
<div>
<span style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; text-align: justify; white-space: normal;">Imagine that you wanted to sort an array alphabetically before you wrote the array to the browser. Well, this code has already been written and can be accessed by using the Array’s </span><em style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">sort</em><span style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; text-align: justify; white-space: normal;"> method.</span></div>
<div>
<pre><script type="text/javascript">
<!--
var myArray2= new Array();

myArray2[0] = "Football";
myArray2[1] = "Baseball";
myArray2[2] = "Cricket";

document.write(myArray2.sort());

//-->
</script>
</pre>
</div>
<div>
</div>
<div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Output:</strong></div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </strong>Baseball,Cricket,Football</div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Get Array length:</strong></div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></strong></div>
<pre><html>
<head>
<title>Get Array length</title>

var x = new Array(2,3,4);

alert(x.length);

//-->
</script>

</head>
<body>

</body>
</html>
</pre>
</div>
<div>
</div>
</pre>
</strong></div>
</strong></div>
</strong></div>
</strong></div>
</pre>
</strong></div>
</div>

JavaScript Array

Array Constructors: var variable = new Array()var variable = new Array(int)var variable = new Array(arg1, ..., argN) These constructors create a new array and initialize the Array object based on the arguments passed in the parameter list. The constructor that has no arguments sets the length prope…

19Nov2013