|
Server : Apache/2.4.62 System : FreeBSD fbsdweb2.web.rcn.net 14.1-RELEASE FreeBSD 14.1-RELEASE releng/14.1-n267679-10e31f0946d8 GENERIC amd64 User : www ( 80) PHP Version : 8.3.8 Disable Function : NONE Directory : /domains/bburke/xInHouseWebPages/ |
Upload File : |
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Web Site Development Tips</title>
<meta name="Microsoft Theme" content="copy-of-blends 011, default">
</head>
<body background="../_themes/copy-of-blends/blegtext.gif" bgcolor="#CCCCCC" text="#000000" link="#0000FF" vlink="#CC3300" alink="#0000FF"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica">
<p align="center"><font size="7">Web Site Development Tips</font></p>
<!--msthemeseparator--><p align="center"><img src="../_themes/copy-of-blends/blesepa.gif" width="600" height="10"></p>
<div align="center">
<center>
<!--mstheme--></font><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="200" id="AutoNumber3">
<tr>
<td width="100%"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica">
<p align="center"><a href="WebDevelopment.htm">Web Development Tips</a><!--mstheme--></font></td>
</tr>
</table><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica">
</center>
</div>
<p align="center"><b><font size="4">Tips added 08/24/2004</font></b></p>
<div align="center">
<center>
<!--mstheme--></font><table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" id="AutoNumber4" bordercolordark="#000000" bordercolorlight="#999999">
<tr>
<td width="50%" align="center"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica">
<p align="center"><span style="font-face: Courier New">
<a href="#A quick way to sum powers of 2">A quick way to sum powers of 2</a></span><!--mstheme--></font></td>
<td width="50%" align="center"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"><span style="font-face: Courier New">
<a href="#Dynamically change a Web page from the client side with innerHTML and innerText">
Dynamically change a Web page from the client side with innerHTML and
innerText</a></span><!--mstheme--></font></td>
</tr>
<tr>
<td width="50%" align="center"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"><span style="font-face: Courier New">
<a href="#Alias Web servers on local machines (Windows)">Alias Web servers
on local machines (Windows)</a></span><!--mstheme--></font></td>
<td width="50%" align="center"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"><span style="font-face: Courier New">
<a href="#Finding the right size units for your CSS layouts">Finding the
right size units for your CSS layouts</a></span><!--mstheme--></font></td>
</tr>
<tr>
<td width="50%" align="center"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"><span style="font-face: Courier New">
<a href="#Be careful of how skipped lines affect formatting in your HTML and XSLT code">
Be careful of how skipped lines affect formatting in your HTML and XSLT
code</a></span><!--mstheme--></font></td>
<td width="50%" align="center"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"><span style="font-face: Courier New">
<a href="#For more understandable error reporting, use the JavaScript console in Gecko-based browsers">
For more understandable error reporting, use the JavaScript console in
Gecko-based browsers</a></span><!--mstheme--></font></td>
</tr>
<tr>
<td width="50%" align="center"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"><span style="font-face: Courier New">
<a href="#Be careful when creating JavaScript variables on the server side">
Be careful when creating JavaScript variables on the server side</a></span><!--mstheme--></font></td>
<td width="50%" align="center"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"><span style="font-face: Courier New">
<a href="#Force Internet Explorer to display design-time changes to a Flash animation (IE 5.x+, Macromedia Flash MX)">
Force Internet Explorer to display design-time changes to a Flash
animation (IE 5.x+, Macromedia Flash MX)</a></span><!--mstheme--></font></td>
</tr>
<tr>
<td width="50%" align="center"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"><span style="font-face: Courier New">
<a href="#Convert to milliseconds when adding time in JavaScript">Convert
to milliseconds when adding time in JavaScript</a></span><!--mstheme--></font></td>
<td width="50%" align="center"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"><span style="font-face: Courier New">
<a href="#Make sure 33 + 33 = 66 in your JavaScript code">Make sure 33 +
33 = 66 in your JavaScript code</a></span><!--mstheme--></font></td>
</tr>
<tr>
<td width="50%" align="center"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"><span style="font-face: Courier New">
<a href="#Dont be clueless when it comes to comments">Don't be clueless
when it comes to comments</a></span><!--mstheme--></font></td>
<td width="50%" align="center"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"><span style="font-face: Courier New">
<a href="#Make your XHTML backward-compatible with Appendix C">Make your
XHTML backward-compatible with Appendix C</a></span><!--mstheme--></font></td>
</tr>
<tr>
<td width="50%" align="center"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"><span style="font-face: Courier New">
<a href="#Dont be lulled into leaving units out of your CSS code">Don't be
lulled into leaving units out of your CSS code</a></span><!--mstheme--></font></td>
<td width="50%" align="center"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"><span style="font-face: Courier New">
<a href="#Plan for language expansion when your site goes global">Plan for
language expansion when your site goes global</a></span><!--mstheme--></font></td>
</tr>
<tr>
<td width="50%" align="center"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"><span style="font-face: Courier New">
<a href="#Dont forget to edit URLs in free scripts">Don't forget to edit
URLs in free scripts</a></span><!--mstheme--></font></td>
<td width="50%" align="center"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"><span style="font-face: Courier New">
<a href="#Properly report search request errors to users">Properly report
search request errors to users</a></span><!--mstheme--></font></td>
</tr>
<tr>
<td width="50%" align="center"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"><span style="font-face: Courier New">
<a href="#Dont let strings throw off your switch statements (JavaScript)">
Don't let strings throw off your switch statements (JavaScript)</a></span><!--mstheme--></font></td>
<td width="50%" align="center"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"><span style="font-face: Courier New">
<a href="#Save yourself from time-guzzling searches for the right color. Just remember the sweet sixteen.">
Save yourself from time-guzzling searches for the right color. Just
remember the sweet sixteen.</a></span><!--mstheme--></font></td>
</tr>
<tr>
<td width="50%" align="center"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"><span style="font-face: Courier New">
<a href="#Dont overtax your query strings">Don't overtax your query
strings</a></span><!--mstheme--></font></td>
<td width="50%" align="center"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"><span style="font-face: Courier New">
<a href="#Separate script tags can help insulate good JavaScript code from bad">
Separate script tags can help insulate good JavaScript code from bad</a></span><!--mstheme--></font></td>
</tr>
<tr>
<td width="100%" colspan="2"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica">
<p align="center"><span style="font-face: Courier New">
<a href="#Use maxlength properly to match client-side user expectations with server-side capabilities">
Use maxlength properly to match client-side user expectations with
server-side capabilities</a></span><!--mstheme--></font></td>
</tr>
</table><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica">
</center>
</div>
<p align="center"><b><font size="4">Tips added 09/07/2004</font></b></p>
<div align="center">
<center>
<!--mstheme--></font><table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber5" bordercolordark="#000000" bordercolorlight="#999999">
<tr>
<td width="50%"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica">
<p align="center">
<a href="#Build your own mathematical algorithms right in JavaScript">
Build your own mathematical algorithms right in JavaScript</a><!--mstheme--></font></td>
<td width="50%"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica"> <!--mstheme--></font></td>
</tr>
</table><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica">
</center>
</div>
<p><span style="font-face: Courier New"><b>
<a name="A quick way to sum powers of 2">A quick way to sum powers of 2</a></b><br>
<br>
A lot of development tasks involve working with powers of 2. For example, you
may use enum declarations with powers of 2 in your server-side code, store data
on the server in binary format, or keep track of user choices by assigning
different powers of 2 to your HTML form elements.<br>
<br>
If you ever need to sum the powers of 2 up to a certain power (e.g., to
calculate the highest possible combination of enum values), here's a quick
shortcut for you: Just take the next power of 2 and subtract 1. For example, to
sum the powers of 2 up to 2-to-the-4th, you could program a loop to do 1 + 2 + 4
+ 8 + 16 = 31. But the easier way is to just add 1 to your power to get
2-to-the-5th = 32 and subtract 1 to get 31. You can easily prove this by
induction since (2 to the x+1) times 2 is (2 to the x+2).</span></p>
<p><span style="font-face: Courier New"><b>
<a name="Alias Web servers on local machines (Windows)">Alias Web servers on
local machines (Windows)</a></b><br>
<br>
If clients of your Web application want to use an alias for the server, there's
an easy way for them to do this in Windows. They simply have to edit the HOST
file. For instance, in Windows XP, go to the C:\Windows\system32\drivers\etc
folder. In there, find the file called HOSTS, and then add the IP and alias name
to the list. You can alias the server as "mydomain" with the following entry
(where xxx.xxx.xx.xx stands for the IP address of the Web server):<br>
<br>
xxx.xxx.xx.xx mydomain<br>
<br>
Now, instead of typing "<a href="http://xxx.xxx.xx.xx/address.html,">http://xxx.xxx.xx.xx/address.html,</a>"
users can type "<a href="http://mydomain/address.html.">http://mydomain/address.html.</a>"</span></p>
<p><span style="font-face: Courier New"><b>
<a name="Be careful of how skipped lines affect formatting in your HTML and XSLT code">
Be careful of how skipped lines affect formatting in your HTML and XSLT code</a></b><br>
<br>
It's generally best to make your HTML code as readable as possible. Indenting
and skipping lines can help if you or someone else ever needs to modify the code
later on. However, you have to be careful that you don't adversely affect the
document formatting in the process. For example, consider this HTML code:<br>
<br>
Contact<br>
<br>
<a href="mailto:<a href="mailto:Edgar@not_real.com"><br>
Edgar<br>
</a><br>
<br>
or<br>
<br>
<a href="mailto:<a href="mailto:Alicia@not_real.com"><br>
Alicia<br>
</a>.<br>
<br>
The way the beginning and end tags are put on separate lines looks very pretty.
But unfortunately, the links will look a bit odd on a browser because you'll see
an underlined space after the names. So it's better to put the end tags
immediately after the names:<br>
<br>
Contact<br>
<br>
<a href="mailto:<a href="mailto:Edgar@not_real.com"><br>
Edgar</a><br>
<br>
or<br>
<br>
<a href="mailto:<a href="mailto:Alicia@not_real.com"><br>
Alicia</a>.<br>
<br>
If you're working in XSLT, the same principle applies. With XSLT, code
readability is crucial, but it's often too easy to forget that skipping lines
can affect formatting. In the following code, if you move the end tag (</a>) to
the end of the previous line, you'll fix the problem:<br>
<br>
<a href="mailto:{contacts/first/@email}"><br>
<xsl:value-of select="contacts/first" /><br>
</a><br>
<br>
<br>
<b><a name="Be careful when creating JavaScript variables on the server side">Be
careful when creating JavaScript variables on the server side</a></b><br>
<br>
Writing JavaScript from your server-side code can be a great way to create a
dynamic, flexible site. But you should also be aware of the risks. For example,
suppose you generate your variable names from product codes stored in the
database. While this may be a great scheme, what do you do if the database entry
is "", a number, a duplicate of a previous entry, or a reserved word? Any of
those circumstances could cause your JavaScript variable to be invalid.<br>
<br>
To make such an automatic coding scheme work, you need to make sure your code
checks for anything that will cause improper JavaScript to occur. Remember also
that when generating variable names, it's safer to append something at the
beginning so that<br>
the variable doesn't start with a number. This is important because it's common
for errors or other unforeseen circumstances to result in a function returning a
number, such as 0. That will cause a JavaScript error since JavaScript variables
can't start with a number.<br>
<br>
Another thing to watch out for is differences between what the server-side code
generates in a development environment as compared to a production environment.
Lots of puzzling situations have resulted because the same JavaScript seemed to
work for the developer but not for the client. Well, wait a minute, was it
really the same JavaScript? Different environment means different variables
means a different Web page. And of course, Murphy's law instructs us that the
combination of factors most likely to cause a problem are found in the
production environment, not the testing environment.<br>
</span></p>
<p><span style="font-face: Courier New"><b>
<a name="Convert to milliseconds when adding time in JavaScript">Convert to
milliseconds when adding time in JavaScript</a></b><br>
<br>
To keep time uniform, JavaScript represents it as the number of milliseconds
since midnight January 1st, 1970 GMT. As a result, whenever you want to
mathematically manipulate a time, you'll need to convert everything to
milliseconds.<br>
<br>
For example, the following code illustrates how to add eight hours to the
current time:<br>
<br>
var dtHere = new Date();<br>
var oneDayFromNow = dtHere.getTime() + (8 * 60 * 60 * 1000);<br>
dtHere.setTime(oneDayFromNow);</span></p>
<p><span style="font-face: Courier New"><b>
<a name="Dont be clueless when it comes to comments">Don't be clueless when it
comes to comments</a></b><br>
<br>
A lot of developers seem to be clueless about what comments to include in code.
And that makes someone who is unlucky enough to<br>
have to decipher that code clueless as well. At a minimum, functions should
include a description of what they're for. Furthermore, sections of code that
aren't self-explanatory should be explained. And you should describe everything
that a developer needs to know regarding what arguments to pass into your
functions.<br>
<br>
Comments warning about any limitations regarding arguments are particularly
important. This is especially true for languages that aren't strongly-typed,
such as JavaScript and VBScript. In these languages, there's not much you can do
to prevent a developer from passing any kind of datatype into your functions. Of
course, for added robustness, you can make your code check that the arguments
fit expectations. However, in some cases the added checking may not always be
worth the extra time spent in coding and processing. So you may need to fall
back on just writing clear comments. //Got that?</span></p>
<p><span style="font-face: Courier New"><b>
<a name="Dont be lulled into leaving units out of your CSS code">Don't be lulled
into leaving units out of your CSS code</a></b><br>
<br>
Internet Explorer browsers are notoriously easy-going when it comes to putting
unit indicators after CSS properties. For instance, even IE 6.0 will accept the
following property setting:<br>
<br>
<style type="text/css"><br>
.someClass {border:solid 6 green}<br>
</style><br>
<br>
even though the border's width value (6) doesn't indicate which unit to use. In
the absence of a specific unit, IE uses a default. Other browsers, however, like
Mozilla and Netscape Navigator 6.2 and 7.0 won't. Instead, they ignore the
property setting all together. With this behavior in mind, make sure to add
units where appropriate to all your CSS properties.</span></p>
<p><span style="font-face: Courier New"><b>
<a name="Dont forget to edit URLs in free scripts">Don't forget to edit URLs in
free scripts</a></b><br>
<br>
Are you using free scripts you downloaded from some site? Beware: Sometimes
these contain links back to the site they came from. For example, we know of one
person who used a script for a mousetrail. Well, about every 20th time a user
clicks on that site now, he's redirected to the site the script came from. Now,
we're certainly not saying you should deny credit to authors who share their
scripts. Go ahead and give credit, create a link to the author's site, etc. But
just don't let that code randomly direct your users to some free scripts site
when they least expect it! It's always good to search for URL's in the script to
make sure that doesn't happen. Otherwise, you might annoy your users--not to
mention, embarrass yourself.</span></p>
<p><span style="font-face: Courier New"><b>
<a name="Dont let strings throw off your switch statements (JavaScript)">Don't
let strings throw off your switch statements (JavaScript)</a></b><br>
<br>
JavaScript's "switch" statements are very useful for evaluating multiple cases
without having to resort to lots of "if" statements. However, one common mistake
with switch statements is forgetting to make sure the datatypes agree. For
example, values passed from an HTML form will have the string datatype. So to
compare these values to numeric cases, you need to convert to a number, which
you can do with the Number() constructor, as follows:<br>
<br>
switch(Number(strValue)) {<br>
case 1:<br>
//Code to execute if strValue = 1.<br>
break;<br>
case 2:<br>
//Code to execute if strValue = 2.<br>
break;<br>
default:<br>
//Code to execute if none of the cases are met.<br>
break;<br>
}<br>
</span></p>
<p><span style="font-face: Courier New"><b>
<a name="Dont overtax your query strings">Don't overtax your query strings</a></b><br>
<br>
You might consider the query string to be an easy way to pass information to and
from your Web pages. However, if you want the flexibility to be able to pass a
lot of information, then query strings are probably not the way to go. That�s
because the maximum URL length for most Internet Explorer browsers is
approximately 2,083 characters, according to Microsoft.com. While this may seem
like a huge number, if you�re appending hundreds of records to a string, you can
surpass that threshold pretty quickly. So if your page has a value you have to
pass to the server or to another page, consider using a hidden field instead.</span></p>
<p><span style="font-face: Courier New"><b>
<a name="Dynamically change a Web page from the client side with innerHTML and innerText">
Dynamically change a Web page from the client side with innerHTML and innerText</a></b><br>
<br>
If you need your Web page to change in response to a user action, but no new
information is needed from the server, it's often desirable to make the changes
take place on the client side. As long as users have JavaScript enabled, page
changes can take place much quicker and more smoothly on the client side than
they could if you had to reload the page. The innerHTML and innerText properties
of the document object can help you make these quick page changes. Both
properties replace the contents inside a tag with the text you specify. However,
innerText encodes any markup symbols you use so that they're displayed as text,
whereas innerHTML interprets whatever you pass it as HTML. <br>
<br>
As you may know, these properties originated in the Microsoft Internet Explorer
browser. The developers of the Mozilla Web browser have added them to their
JavaScript DOM as well. As a result, you have the ability to dynamically change
Web page content in IE 4.0+, NN 6.0+, and Mozilla 0.9+, like so:<br>
<br>
<html><head><br>
<script language="JavaScript" type="text/javascript"><br>
function changeMe(){<br>
var mylink = document.getElementById("myLink")<br>
mylink.innerText = "Wow, I changed it!"<br>
}<br>
</script></head><br>
<body><br>
<a id="myLink" href="myPage2.html">My Other Page</a><br>
<form><input type="button" value="Click" onclick="changeMe()"/></form><br>
</body><br>
</html><br>
<br>
Do keep in mind that when you make changes this way, the altered version of the
page won't show up in the browser history; so if the user goes to another page
and returns using the Back or Forward button, the original version of the page
will show. Also, remember that the related properties, outerHTML and outerText,
aren't supported by Netscape.<br>
<br>
<b><a name="Finding the right size units for your CSS layouts">Finding the right
size units for your CSS layouts</a></b><br>
<br>
CSS gives you a lot of power over the various graphical dimensions of your page,
such as borders. But to wield this power, you need to figure out which values
CSS allows. In a previous tip, we showed you the importance of specifying the
correct units. There are three units you can use for size, as follows:<br>
<br>
em is equal to the font size of the relevant font.<br>
ex is equal to the size of a lower case "x" in the relevant font.<br>
px is equal to one pixel. <br>
<br>
Note that the first two are based on whatever font would apply to the
element affected by the style. To find out more about the <br>
units CSS accepts for size, visit: <br>
<br>
<a href="http://www.w3.org/TR/CSS2/syndata.html#value-def-length">
www.w3.org/TR/CSS2/syndata.html#value-def-length</a><br>
<br>
<br>
<b>
<a name="For more understandable error reporting, use the JavaScript console in Gecko-based browsers">
For more understandable error reporting, use the JavaScript console in
Gecko-based browsers</a></b><br>
<br>
When you encounter JavaScript errors in Internet Explorer, they'll be in your
face (as long as you select the Display A Notification About Every Script Error
check box which is located in the Browsing section on the Advanced tab under
Tools | Internet Options). That's good for catching them in the first place (in
Netscape, you might never notice the errors). However, when it comes to figuring
out what the error is, Netscape beats IE in spades. Case in point: IE gives you
messages such as "Expected identifier" and "Object expected." So, what's wrong
with the code? How do you fix it? Who knows?</span></p>
<p><span style="font-face: Courier New"><br>
Compare this with what we see when we open the same error-ridden file in
Netscape Navigator or Mozilla and navigate to Tools | Web<br>
Development | JavaScript Console. The messages say things like "missing variable
name." There's nothing like good 'ole English! And certain error messages even
show pictures of your code with an arrow pointing to exactly the character
that's incorrect. What's more, instead of a flurry of confusing dialogue boxes,
you see the errors in order. That make</span></p>
<p><span style="font-face: Courier New"><b>
<a name="Force Internet Explorer to display design-time changes to a Flash animation (IE 5.x+, Macromedia Flash MX)">
Force Internet Explorer to display design-time changes to a Flash animation (IE
5.x+, Macromedia Flash MX)</a></b><br>
<br>
While Macromedia Flash MX lets you quickly test a Flash movie at design-time,
you'll often want to see how the animation works in the browser. If you've ever
worked with a Flash animation in IE, however, you may have encountered some
bizarre results. In short, if you load an animation in Internet Explorer, modify
the underlying Flash file, resave the movie, and then press [F5] to refresh the
browser window, the movie in IE won't reflect the changes.<br>
<br>
This problem occurs because IE always uses the Flash file that it has cached on
the local PC. To fix this behavior, you'll need to erase the files from the
cache. In IE, to do so, select Tools | Internet Options from the main menu.
Then, when IE displays the Internet Options dialog box, click the Delete Files
button in the Temporary Internet Files section on the General tab. Click OK
after IE completes the operation. Now, press [F5] to refresh the Web page. When
you do, IE updates the animation to reflect your recent changes.</span></p>
<p><span style="font-face: Courier New"><b>
<a name="Make sure 33 + 33 = 66 in your JavaScript code">Make sure 33 + 33 = 66
in your JavaScript code</a></b><br>
<br>
As useful as JavaScript is, it doesn't always convert values into their
appropriate data types when you perform an operation on them. For instance, in
many scripting languages, the statement <br>
"33" + 33<br>
<br>
would produce 66, despite the fact that the first value is a string, instead of
a number.<br>
<br>
In JavaScript, however, the above expression produces:<br>
<br>
3333<br>
<br>
As a result, you must convert values manually. This is because the + character,
in addition to being the addition symbol, is also the concatenation character.<br>
<br>
String to number conversions play an especially important role when you retrieve
values from JavaScript cookies. As you know, JavaScript stores all cookie values
as one big string. As a result, if the cookie contains a number, and then you
want to perform some basic mathematical operation on it later, you'll need to
convert it to the proper data type--in this case, a number.<br>
<br>
Fortunately, JavaScript provides two main functions to do so:</span></p>
<p><span style="font-face: Courier New"><br>
parseInt() and parseFloat(). The parseInt() function converts a<br>
number into an integer (whole numbers only), while parseFloat()<br>
converts value into a floating-point value. The following HTML<br>
page shows an example of how to use the two functions:<br>
<br>
<html><head><title>Number conversion</title></head><br>
<body><br>
<script language="JavaScript" type="text/javascript"><br>
var sNumInt = "33"<br>
var sNumFlt = "33.23"<br>
<br>
document.write("<h1>" + sNumInt + " + " + sNumFlt + " = " <br>
+ (parseInt(sNumInt) + parseFloat(sNumFlt)) + "</h1>")<br>
</script><br>
<br>
</body></html><br>
</span></p>
<p><span style="font-face: Courier New"><b>
<a name="Make your XHTML backward-compatible with Appendix C">Make your XHTML
backward-compatible with Appendix C</a></b><br>
<br>
Sometimes you'll hear about various appendices in discussions about the Web
standards on the W3C site (www.w3.org). These appendices are simply portions of
a given specification. Appendix C (www.w3.org/TR/xhtml1/#guidelines) is the
portion of the XHTML<br>
1.0 standard that talks about how to make XHTML backward-compatible with
browsers intended to interpret HTML. The recommendations in Appendix C provide a
way to make a smoother, easier transition between HTML and XHTML.<br>
<br>
One of key points is that if you use the XHTML shorthand for empty elements, you
should insert a space between the element<br>
name and the closing slash--i.e.,<br>
<br>
<br /><br>
<br>
instead of<br>
<br>
<br/><br>
<br>
If the element is one that wouldn't typically be expected to be empty, then use
the full form:<br>
<br>
<title></title><br>
<br>
Also, to make XHTML display on older browsers properly, you may need to use a
meta tag with the http-equiv and content attributes, which also allows you to
define a given character set, like so:<br>
<br>
<meta http-equiv="Content-type"<br>
content="text/html; charset=EUC-JP" /></span></p>
<p><span style="font-face: Courier New"><b>
<a name="Plan for language expansion when your site goes global">Plan for
language expansion when your site goes global</a></b><br>
<br>
Think you can plan all your Web layout in English and then get a translator to
translate it into other languages? Pas aussi rapidement! You need to consider
that some languages require more characters than what you've written in English.
So remember to plan in advance and make sure that your site will still lay out
properly if the text is 30 percent longer.</span></p>
<p><span style="font-face: Courier New"><b>
<a name="Properly report search request errors to users">Properly report search
request errors to users</a></b><br>
<br>
One of the most important commodities on the Internet is trust, and you don't
get much trust if you mislead users. Now you may think you'd never mislead your
users. But suppose the search utility on your site has an error, causing your
results to be empty. It's common to simply return the phrase, "No results
matched your search criteria." But that's misleading. Users walk away thinking
the item they searched for isn't in the database, when that's just not the case.
If you're unable to report anything more specific, at least say "Could not
process your search request. Please change your search criteria." And make sure
you simulate error situations in your testing to ensure that the appropriate
message is coming back. The last thing you want is to convince users you don't
have what they want, when you really do.</span></p>
<p><span style="font-face: Courier New"><b>
<a name="Save yourself from time-guzzling searches for the right color. Just remember the sweet sixteen.">
Save yourself from time-guzzling searches for the right color. Just remember the
sweet sixteen.</a></b><br>
<br>
Sometimes it can take forever looking for the right numbers to enter to get a
certain color on your Web page. While you need to enter numbers to get highly
specialized colors, you can save yourself lots of time by just keeping a list of
these sixteen pre-defined color names in the HTML 4.0 specification:<br>
<br>
aqua<br>
black<br>
blue<br>
fuchsia<br>
gray<br>
green<br>
lime<br>
maroon<br>
navy<br>
olive<br>
purple<br>
red<br>
silver<br>
teal<br>
white<br>
yellow<br>
<br>
If you're defining your colors in CSS, be to sure to consult with the CSS
standard for acceptable color values, at this address: <br>
<br>
<a href="http://www.w3.org/TR/CSS2/syndata.html#color-units">
http://www.w3.org/TR/CSS2/syndata.html#color-units</a><br>
<br>
<b>
<a name="Separate script tags can help insulate good JavaScript code from bad">
Separate script tags can help insulate good JavaScript code from bad</a></b><br>
<br>
As developers, sometimes we like to think of ourselves as perfect. However,
whether you blame other developers, clients, etc., the fact remains that
mistakes happen. Unfortunately, often one bad apple in a script ruins the whole
batch. For example, consider the following code:<br>
<br>
<script language="javaScript" type="text/javascript"><br>
//Lots of code...<br>
var 0t = "la";<br>
//Lots of other code...<br>
<br>
function Myfunction() {<br>
alert(document.form1.txtbox.value);}<br>
</script><br>
<br>
Anything that tries to call the function Myfunction will fail. In fact, when
debugging a case such as this, it's very easy to assume that there's something
wrong with Myfunction. But that isn't necessarily the case. We simply added a
bad variable declaration above it. Since variables can't begin with numbers,
JavaScript stops working at the first line in the script.<br>
<br>
If the part of the code that had the error turned out not to be that critical,
it's really a shame that it messed up your wonderful function. But you can
insulate against this problem by simply creating different script blocks, so
that each piece of functionality fails or succeeds separately, like this:<br>
<br>
<br>
<script language="javaScript" type="text/javascript"><br>
//Lots of code...<br>
var 0t = "la";<br>
//Lots of other code...<br>
</script><br>
<script language="javaScript" type="text/javascript"><br>
<br>
function Myfunction() {<br>
alert(document.form1.txtbox.value);}<br>
</script><br>
</span></p>
<p><span style="font-face: Courier New"><b>
<a name="Use maxlength properly to match client-side user expectations with server-side capabilities">
Use maxlength properly to match client-side user expectations with server-side
capabilities</a></b><br>
<br>
As we mentioned in a previous tip, one of the worst things you can do on your
site is to mislead users. One way you may unintentionally mislead users is if
your input field lacks the correct maxlength value.<br>
<br>
For example, suppose your site has an input field for searching, and someone
types in a search string of 300 characters. If your server-side code can only
handle 50 characters, then you'll get an error. Even if you report the error
properly, why did you let the user type in 300 when you knew you could only
accept 50? To avoid making your users frustrated, your input tag should include
a maxlength attribute like this:<br>
<br>
<input name="search" size="50" maxlength="50"><br>
<br>
Of course, when you use maxlength, make sure you use it properly. Two of the
most common mistakes with maxlength are confusing it with the width attribute,
and letting it get out of sync with the server. For instance, the following tag
doesn't set the maximum number of characters that can be entered; the size
attribute only tells the browser how wide to make the field appear:<br>
<br>
<input name="search" size="50"><br>
<br>
Similarly, even if you set the maxlength, it won't do any good if it isn't
up-to-date! For that reason, it's best not to hardcode this value. Instead,
write it with your server-side code, filling it with whatever variable your
server-side code is using.</span><span style="FONT-SIZE: 10pt; font-face: Courier New"><br>
</span></p>
<p><b><a name="Build your own mathematical algorithms right in JavaScript">Build
your own mathematical algorithms right in JavaScript</a></b><br>
<br>
Naturally, you don't usually use client-side JavaScript to perform the kind of
math required to send a probe up to Mars. (Just imagine the folks at NASA doing
everything in Internet Explorer.) But if you do need to do a calculation that
JavaScript's built-in math functionality can't handle, you may want to look at
the following Web site:<br>
<br>
<a href="http://www.ecs.umass.edu/ece/koren/arith/simulator/">
www.ecs.umass.edu/ece/koren/arith/simulator/</a><br>
<br>
This companion site to Israel Koren's book "Computer Arithmetic Algorithms"
contains some serious math--all in JavaScript!<font size="2"><br>
</font></p>
<!--mstheme--></font></body>
</html>