JavaScript and HTML Tricks

简介: Here are some of my favorite JavaScript and HTML tricks. There are a wide variety of options: from storing and using hidden data to making HTML forms and lists look great.
Here are some of my favorite JavaScript and HTML tricks. There are a wide variety of options: from storing and using hidden data to making HTML forms and lists look great. Each topic has a brief introduction showing you how it will improve your Web site. Then I'll go into each technique in detail.
  • Embedding data in hidden HTML elements and retrieving text lines in a platform-independent fashion
  • Randomizing data with JavaScript
  • Using a stylish form fieldset
  • Making clickable descriptions for checkboxes and radio buttons by using labels
  • Using CSS list-style-image to make beautiful bulleted lists

Introduction

The last time we discussed How to Use a JavaScript Query String Parser. Now we will discuss five more valuable JavaScript and HTML techniques and tricks.

Many times I've stored data in hidden HTML elements for scripts. It's a great way to keep prices and product names handy for e-commerce, or for lists of data that will be formatted by a script. To do that, it's necessary to interpret the lines of data in an operating-system independent way. I've even used this technique to store the radio programming information for a weekly radio schedule. Data stored this way can be graceful at degrading for older browsers. As an example, the radio schedule I mentioned was typed as preformatted text visible to older browsers, but transformed into a dynamically navigable Web page by JavaScript.

Another thing that comes up frequently is randomizing data that is used by a JavaScript program. Random links, images, statisics research and mathematical analysis come to mind as immediate applications.

My Web programming has never been the same since I learned how to use fieldsets to make beautiful forms in Web pages. Best of all, there's no bandwidth intensive imagery to use - it's built into the HTML!

While on the topic of forms, usability and efficiency increase in importance when check boxes and radio buttons are provided with clickable descriptions. Many people expect to click the descriptions, anyway, from experience with other programs. It would be sad to disappoint them, especially when HTML provides an excellent and natural way of doing it.

As a Grand Finale, you'll learn about one of the classic tricks of stylesheets. Using deluxe bullets for your lists will make your Web site more professional and appealing.

Getting Data From Text Lines in Hidden HTML Elements

Data for a script program can be embedded efficiently directly into the HTML source code, either in a hidden input field or a hidden HTML element. A script which reads this data has to perform a small number of steps.

  • Hide the data contents of the hidden field in the HTML document
  • Refer to the data using the document object model
  • Normalize the line breaks for cross-platform compatibility
  • Separate the lines into an array using a simple JavaScript function
  • Trim white space and remove empty lines or comments if desired
    1. <form>
    2.   <input type="hidden" id="domains" value="
    3.   0011.us
    4.   123abc.us
    5.   1mans.com
    6.   hesbest.com
    7.   9900.us
    8.   herclothing.info
    9.   findher.info
    10.   allme.us
    11.   dropoff.us
    12.   cyou.us
    13.   o-1.us
    14.   meadowlark.us
    15.   uuuuu.us
    16.   os-i.org
    17.   supergreat.us
    18.   nicewebsite.us
    19.   " />
    20. </form>
    21. <script type="text/javascript">
    22. function getLinesFromHidden(a) {
    23.   var e = document.getElementById(a);
    24.   if (!e)
    25.   return [];
    26.   var s = e.value;
    27.   s = s.replace(//r/n|/r/g, '/n');
    28.   return s.split('/n');
    29. }
    30. function trimWhiteSpace(a) {
    31.   var i;
    32.   for (i=0; i<a.length; i++)
    33.   a[i] = a[i].replace(/^/s+|/s+$/g, '');
    34.   return a;
    35. }
    36. function removeEmpty(a) {
    37.   var b = [], i;
    38.   for (i=0; i<a.length; i++)
    39.   if (a[i])
    40.   b[b.length] = a[i];
    41.   return b;
    42. }
    43. domainList = getLinesFromHidden('domains');
    44. domainList = removeEmpty(trimWhiteSpace(domainList));
    45. domainList.sort();
    46. d = document;
    47. function showList(a) {
    48.   d.write('<blockquote>', a.join('<br />'), '</blockquote>');
    49. }
    50. showList(domainList);
    51. </script>

The result is displayed below:

Result

Later, I'll write an article discussing some spreadsheet and statistics functions which can be applied to data embedded into an HTML document. At the end of every semester I prepare a quality of teaching report which uses these functions to compute statistics and correlations from classroom data. The first step is how to interpret text lines as comma separated values (CSV) or as data fields delimited in other ways.

Randomizing Data with JavaScript

Often I want to show data in random order. Somtimes I just want to pick a few random things out of many. Just as often I want to show all of the information, but in a randomized order, similar to shuffling a deck of cards. To do this we can use the JavaScript sorting algorithm in combination with a customized sorting comparison function that will randomize the sorted order.

The comparison function returns a value greater than zero or less than zero depending on which element should be sorted first. When the sorting algorithm is executed the data will be randomized if the comparison function gives each comparison of elements an equal probability of being greater than zero or less than zero.

  1. <script type="text/javascript">
  2. randomComparison = function(a, b) {
  3.   return Math.random()-.5;
  4. };
  5. domainList.sort(randomComparison);
  6. showList(domainList);
  7. </script>

Result

Some high-speed sorting algorithms are unstable, and might not result in all data being truly randomized. In a sense, one could say that the sorting algorithm divides up the data too fast for the randomizing to occur. A truly random shuffling has the property that each element has the same probability of being assigned to each location, or equivalently, each permutation of objects is equally likely. As far as I know, Safari is the only browser which may have an unstable sorting algorithm, resulting in the domain uuuuu.us being sorted to the last position most of the time, although other domains appear to be randomly placed. Unstable sorting algorithms may be fine, depending on the application.

There are also iterative methods for sorting. Iterative sorting methods are useful because the computational cost of one iteration is O(N) rather than O(n log N). A precise estimate is typically from N/2 to 2N. The data is not completely sorted after one iteration, but that's fine when the data ranking is based on subjective criteria such as clicking popularity or Google PageRank. Usually a good iterative sorting method guarantees that at least the lowest and highest ranked items are sorted to the correct positions.

Using a stylish form fieldset

One of the coolest form elements built into HTML is the fieldset. It relies on the browser to create a look that can't be replicated using ordinary HTML commands. It has the sophistication of images without the development effort, server load or extra client bandwidth.

A fieldset must be contained in a form. If you want to use one elsewhere, just surround it with form tags, provided that you're not interrupting another form, of course. One form can contain as many fieldsets as you wish.

  1. <form>
  2.   <fieldset>
  3.   <legend>Please enter your Yahoo! Login Information</legend>
  4.   <table>
  5.     <tr><th>User name</th>
  6.     <td><input type="text" name="name" /></td></tr>
  7.     <tr><th>Password</th>
  8.     <td><input type="password" name="password" /></td></tr>
  9.     <tr><th>Security</th>
  10.     <td colspan="2"><input type="radio" name="secure" value="home" id="secure_home" />
  11.     <label for="secure_home">Remember my user name and password on this computer</label><br />
  12.     <input type="radio" name="secure" value="group" id="secure_group" checked="checked" />
  13.     <label for="secure_group">Remember my user name only</label><br />
  14.     <input type="radio" name="secure" value="public" id="secure_public" />
  15.     <label for="secure_public">Do not remember my user name or password</label></td></tr>
  16.     <tr><th><input type="submit" value="Login to Yahoo!" /></th></tr>
  17.   </table>
  18.   </fieldset>
  19. </form>

Result

Please enter your Yahoo! Login Information
User name
Password
Security Remember my user name and password on this computer
Remember my user name only
Do not remember my user name or password

Using Labels to Create Checkboxes and Radio Buttons With Clickable Descriptions

You'll notice in the form above that one can click on the descriptions of the security options in order to choose the desired option. To do this, each radio button must be labeled with an HTML ID. The clickable description has an attribute for="HTML ID" which allows the browser to understand that the radio button should be selected when the user clicks the description.

This is a natural thing for people to do at your Web site. It's difficult to navigate a mouse to select a small checkbox or radio button in comparison to simply clicking the description. Clickable descriptions make Web designs more efficient, and the the user experience more satisfying and enjoyable. Yet it's surprising how many HTML developers don't write their forms this way.

Using List-Style-Image to Make Beautiful Bulleted Lists

In HTML, an unordered list (the ul and li elements) is one of the easiest ways to organize information. It looks like this.

  • Meat
  • Potatoes
  • Water

Lists like this are a best friend to anyone who wants to organize their Web page and make the best use of both white space and text. But did you know that through stylesheets there can be much more to a simple bulleted list?

One can spice up their lists by using any bullet of their choice, and a stylesheet which replaces the default black circular bullet with a nice-looking image. This is done by selecting the li elements contained in the unordered lists and specifing a URL corresponding to the list-style-image attribute.

The best thing about list-style-image is that stylesheets already provide this new design tool, making complicated graphic design work unnecessary.

Here's how it works:

  1. <style type="text/css">
  2. ul.orangearrow li {
  3.   list-style-image: url(http://0--0.us/0067_circular_arrow.png);
  4. }
  5. </style>
  6. <ul class="orangearrow">
  7.   <li>meat</li>
  8.   <li>potatoes</li>
  9.   <li>water</li>
  10. </ul>

Result

  • Meat
  • Potatoes
  • Water
目录
相关文章
|
3月前
|
存储 JavaScript 前端开发
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
|
3月前
|
JavaScript 前端开发
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
|
5天前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
23 2
|
1月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
42 3
|
1月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
41 4
|
1月前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
55 0
html5+three.js公路开车小游戏源码
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
102 6
|
2月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
123 1
|
3月前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
3月前
|
小程序 JavaScript 前端开发
你的生日是星期几?HTML+JavaScript帮你列出来
你的生日是星期几?HTML+JavaScript帮你列出来