Page is a not externally linkable
JAB_Creations - 6:21 pm on Oct 25, 2010 (gmt 0)
How about a little basic code? :)
Basic example...
var a = '1';
alert(a);
var b = 1;
alert(b);
Evolving that example by adding break lines and typeof...
var a = '1';
alert(a+'\n\n'+typeof a);
var b = 1;
alert(b+'\n\n'+typeof b);
Also where you declare a variable determines it's scope, if it's outside of a function it's global and every function can access that variable whereas if it's inside of a function then it can only be accessed by that function.
var a = '1';//global scope
function my_example()
{
var b = 1;//local scope
}
You'll also want to get in to arrays and how to access information in arrays. There are associative arrays such as the following...
var ids = {'example1':'text','example2':4};
alert(ids['example1']+' = '+typeof ids['example1']);
alert(ids['example2']+' = '+typeof ids['example2']);
This is a visual example of how an understanding of JavaScript can evolve over time.
Another thing to consider like I said earlier is to take advantage of all the JavaScript consoles. While Firefox is awesome all-round it doesn't catch all errors, Opera is better at that where Firefox fails. IE and Safari will also catch some things the others won't. Firefox will warn you about stricter stuff which I encourage to acknowledge.
You can also try debugging your code directly...
try {alert(c);} catch(err) {alert(err);}
You'll also want to get in to events such as the onload event which I use an anonymous function in order to be able to add more function calls later.
Save this as example1.xhtml and open it with Firefox or Opera. Safari does not handle malformed XML correctly and the last time I checked Internet Explorer 9 (currently still in beta 1) while it understands XHTML will also not handle malformed XML correctly. To see what I'm talking about remove the '/' from the </h1> ending tag of the h1 element, save, and reload in each browser. Firefox and Opera will break the page and tell you what is wrong so you can fix it, IE9 and Safari won't and IE8 and older can't handle this (see my earlier post). While that may seem like a lot of details this will drastically save you a ton of time in the long run, it's sort of like driving a super car...you may be doing it correct and safely the first time though you might be a little uneasy because you're inexperienced though once you get used to it you just can't go back to regular HTML. I always learned best by example with something that worked, so here you go...
example1.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<meta name="description" content="Example description." />
<meta name="keywords" content="word 1, something spiffy, mm donuts" />
<meta name="language" content="en" />
<meta name="robots" content="INDEX, FOLLOW" />
<base href="http://localhost/" />
<!--
Move your scripts to external files at a later point.
Only put global variables and your window.onload event in onload/don't cache.
Cache index.js, don't store global variables there.
<script src="scripts/index.js" type="text/javascript"></script>
<script src="scripts/onload.js" type="text/javascript"></script>
-->
<script type="text/javascript">
//<![CDATA[
//XHTML needs to escape scripting, use the first and last line of JavaScript comments to do this.
my_example_function(parameter1,parameter2)
{
alert('parameter1 = '+parameter1+'\n\nparameter2 = '+parameter2);
}
window.onload = function()
{
alert('Oh hai!');
my_example_function('ABC',123);
// Add more functions to call here later on.
}
//]]>
</script>
</head>
<body>
<h1>JavaScript example</h1>
</body>
</html>
Now combined with the PHP code I would recommend if you want to get this running in the most ideal situation get yourself a copy of XAMPP. XAMPP is an almost instantaneous web-server that can run PHP and MySQL. To get this to work in Internet Explorer 8 and older we just modify the code a little as in my example below which if you use for a basis for all your code will really help you learn a lot faster then you could in any other way provided you test with all four browsers (Firefox, Opera, Safari, and IE with IE being the last browser you test in because it's least standards compliant).
- John
example1.xhtml
<?php
if (isset($_SERVER['HTTP_ACCEPT']))
{
$mime_ua = stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml');
if ($mime_ua) {$mime = 'application/xhtml+xml';}
else {$mime = 'text/html';}
}
else {$mime = 'text/html';}
header('content-type: '.$header->mime.'; charset=utf-8');
echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<meta name="description" content="Example description." />
<meta name="keywords" content="word 1, something spiffy, mm donuts" />
<meta name="language" content="en" />
<meta name="robots" content="INDEX, FOLLOW" />
<base href="http://localhost/" />
<!--
Move your scripts to external files at a later point.
Only put global variables and your window.onload event in onload/don't cache.
Cache index.js, don't store global variables there.
<script src="scripts/index.js" type="text/javascript"></script>
<script src="scripts/onload.js" type="text/javascript"></script>
-->
<script type="text/javascript">
//<![CDATA[
//XHTML needs to escape scripting, use the first and last line of JavaScript comments to do this.
my_example_function(parameter1,parameter2)
{
alert('parameter1 = '+parameter1+'\n\nparameter2 = '+parameter2);
}
window.onload = function()
{
alert('Oh hai!');
my_example_function('ABC',123);
// Add more functions to call here later on.
}
//]]>
</script>
</head>
<body>
<h1>JavaScript example</h1>
</body>
</html>