This example demonstrates the use of namespaces in JavaScript. The basic idea is this, whenever you write JavaScript code, encapsulate all your code in a single global variable. This should prevent any naming collsions or other problems when you insert other JavaScript libraries into the page. For this example, all the Javascript code is contained in the Blue namespace.
In addition, this page also demonstrates how to handle events from an HTML select or combo box using JQuery. Selecting one a list name causes the list displayed to be automatically inserted into the document. View the source to examine the page in detail.
Source for this File
Note that the include for JQuery is not shown in this source file, but you can assume it is included.
1 <!-- Start Main Content -->
2 <div id="main">
3 <style type="text/css">
4
5 #SelectListForm { text-align:center; }
6 #SelectListForm select{ width:400px; font-size:1.1em;}
7
8 /* Thin Link Table */
9 .ThinListTable { width:625px;}
10
11 </style>
12
13 <p>This example demonstrates the use of namespaces in JavaScript. The basic idea is this, whenever you write JavaScript code, encapsulate all your code in a single global variable. This should prevent any naming collsions or other problems when you insert other JavaScript libraries into the page. For this example, all the Javascript code is contained in the Blue namespace.</p>
14 <p>In addition, this page also demonstrates how to handle events from an HTML select or combo box using JQuery. Selecting one a list name causes the list displayed to be automatically inserted into the document. View the source to examine the page in detail.</p>
15
16 <form id="SelectListForm" method="" action"#">
17 <select name="SelectList" id="ListSelect">
18 <option value="main" selected="true">Main</option>
19 <option value="home">Home</option>
20 <option value="work">Work</option>
21 </select>
22 </form>
23
24 <div class="ThinListTable">
25 </div>
26
27
28 <p><a href="javascript:getSource()">View Source</a></p>
29
30
31 </div>
32
33 <script type="text/javascript">
34
35 // View Source
36 function getSource(){
37 window.open("view-source:" + location.href);
38 return;
39 }
40
41 var Blue = {
42 obj:{}, // List Objects
43 gen:{} // General Functions
44 }
45
46
47 Blue.obj.List = function(newName){
48 this.listName = newName;
49 this.itemArr = new Array();
50 }
51
52
53 Blue.obj.List.prototype.addItem = function(newItem){
54 this.itemArr.push(newItem);
55 }
56
57 Blue.obj.List.prototype.deleteItem = function(index){
58 this.itemArr.splice(item);
59 }
60
61 Blue.obj.List.prototype.writeList= function(){
62 var outStr = "<ul>\n";
63 for (var item in this.itemArr) {
64 outStr = outStr + "<li>" + this.itemArr[item] + "</li>\n";
65 }
66 outStr = outStr + "</ul>\n";
67 $('.ThinListTable').html(outStr);
68 }
69
70 Blue.obj.List.prototype.printList = function(){
71 alert(this.itemArr[1]);
72 }
73
74
75 Blue.gen.comboSelect = function(){
76 listIndex = $('#ListSelect').val();
77 if (listIndex == "main"){
78 mainList.writeList();
79 return;
80 }
81
82 if (listIndex == "home"){
83 homeList.writeList();
84 return;
85 }
86
87 if (listIndex == "work"){
88 workList.writeList();
89 return;
90 }
91
92 }
93
94
95
96 // Your Source Code Here
97
98 function start(){
99 // Start function
100 $('#ListSelect').change(Blue.gen.comboSelect);
101
102
103
104 // Create Main List
105 mainList = new Blue.obj.List("main");
106 mainList.addItem("List Item 1");
107 mainList.addItem("List Item 2");
108 mainList.addItem("List Item 3");
109 mainList.addItem("List Item 4");
110 mainList.writeList();
111
112 // Create Home List
113 homeList = new Blue.obj.List("home");
114 homeList.addItem("Apples");
115 homeList.addItem("Milk");
116 homeList.addItem("Bread");
117 homeList.addItem("Chips");
118
119 // Create Work List
120 workList = new Blue.obj.List("work");
121 workList.addItem('write email');
122 workList.addItem('attend meeting');
123 workList.addItem('deliver report')
124
125
126 }
127
128 $(document).ready(start);
129 </script>
130
131 <!-- End Main Content -->
132