forked from it-ebooks/75cheatsheets
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Cheat Sheets – Javascript and AJAX .html
6406 lines (6091 loc) · 249 KB
/
Cheat Sheets – Javascript and AJAX .html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript in one page : JavaScript.SU</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="JavaScript in one page : JavaScript.SU" />
<meta name="keywords" content="JavaScript in one page : JavaScript.SU" />
<style>
body {
background-color: #ffffff;
color: #000000;
}
table {
width: 100%;
}
td {
text-align: center;
vertical-align: top;
}
.code {
background-color: #FFE6BF;
color: #000000;
padding-left: 10px;
padding-right: 10px;
text-align: left;
}
.contents {
border-color: #B36B00;
border-style: solid;
border-width: thick;
color: #B36B00;
background-color: #FFE6BF;
text-align: left;
}
.description {
background-color: #FFE6BF;
color: #000000;
padding-left: 10px;
padding-right: 10px;
text-align: justify;
}
.descriptionTable {
border-color: #B36B00;
border-spacing: 0;
border-style: solid;
border-width: 1px;
vertical-align: top;
}
.descriptionTable caption {
background-color: #B36B00;
border-color: #B36B00;
border-spacing: 0;
border-style: solid;
border-width: 1px;
color: #FFFFFF;
font-weight: bold;
}
.descriptionTable th {
border-color: #B36B00;
border-spacing: 0;
border-style: solid;
border-width: 1px;
text-align: center;
}
.descriptionTable td {
border-color: #B36B00;
border-spacing: 0;
border-style: solid;
border-width: 1px;
text-align: left;
text-indent: 0.5em;
vertical-align: top;
}
.e {
margin: 1em;
text-align: left;
font-style: italic;
}
.example {
background-color:#FFE6BF;
color: #000000;
padding-left: 10px;
padding-right: 10px;
text-align: left;
}
.normalizer {
width: 280px;
}
.normalizerDescription {
width: 330px;
}
.normalizerSyntax {
width: 120px;
}
.normalizerEmpty {
width: 0px;
height: 1em;
}
.note {
font-weight: bold
}
.p {
text-align: justify;
text-indent: 2em;
}
.rules {
font-weight: bold
}
.servo {
background-color:#efCCFF;
color: #000000;
padding-left: 10px;
padding-right: 10px;
text-align: left;
}
.strong {
font-weight: bold;
}
.syntax {
background-color: #FFE6BF;
color: #000000;
font-weight: bold;
padding-left: 1em;
padding-right: 1em;
text-align: left;
}
.titleMain {
background-color: #ffffff;
color: #B36B00;
font-size: 4em;
font-weight: bold;
text-align: left;
}
.titleChapter {
background-color: #B36B00;
color: #FFFFFF;
font-size: 1.5em;
text-align: center;
}
.titleSubChapter {
background-color: #FFCC80;
color: #B36B00;
font-size: 1.5em;
text-align: center;
}
</style>
<script>
function compute(f) {
if (confirm("Are you sure?")) f.result.value = eval(f.expr.value)
else alert("Please come back again.")
}
function JSClock() {
var time = new Date();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
var temp = "" + ((hour > 12) ? hour - 12 : hour);
temp += ((minute < 10) ? ":0" : ":") + minute;
temp += ((second < 10) ? ":0" : ":") + second;
temp += (hour >= 12) ? " P.M." : " A.M.";
document.clockForm.digits.value = temp;
id = setTimeout("JSClock()",1000);
}
function initialization() {
JSClock();
}
function square(number) {
return number * number;
}
</script>
</head>
<body onload="initialization()">
<table align="center">
<tr>
<td class="normalizerEmpty"></td>
<td><div class="normalizer"> </div></td>
<td><div class="normalizer"> </div></td>
<td><div class="normalizerSyntax"> </div></td>
<td><div class="normalizerDescription"> </div></td>
<td><div class="normalizer"> </div></td>
<td><div class="normalizer"> </div></td>
</tr>
<tr><td colspan="7" class="titleMain">JavaScript in one page</td></tr>
<tr>
<td class="normalizerEmpty"></td>
<td><div class="normalizer"> </div></td>
<td><div class="normalizer"> </div></td>
<td><div class="normalizerSyntax"> </div></td>
<td><div class="normalizerDescription"> </div></td>
<td><div class="normalizer"> </div></td>
<td><div class="normalizer"> </div></td>
</tr>
<tr>
<td colspan="5" class="contents">
<b>Contents:</b><br />
<b>Review:</b> <a href="#review">Review</a>, <a href="#allocation">Allocation</a>, <a href="#simpleExamples">Simple Examples</a>;<br />
<b>JavaScript Language:</b> <a href="#values">Values</a>, <a href="#dataTypeConversion">Data type conversion</a>,
<a href="#variables">Variables</a>, <a href="#literals">Literals</a>, <a href="#expressions">Expressions</a>, <a href="#operators">Operators</a>,
<a href="#statements">Statements</a>, <a href="#functions">Functions</a>, <a href="#builtInFunctions">Built-in Functions</a>, <a href="#objects">Objects</a>,
<a href="#builtInObjects">Built-in Objects</a>, <a href="#event">Event</a>;<br />
<b>Built-in JavaScript Objects:</b>
Root (<a href="#rootProperties">Root Properties</a>, <a href="#rootMethods">Root Methods</a>),
Array (<a href="#arrayDescription">Array Description</a>, <a href="#arrayProperties">Array Properties</a>, <a href="#arrayMethods">Array Methods</a>),
Boolean (<a href="#booleanDescription">Boolean Description</a>),
Data (<a href="#dataDescription">Data Description</a>, <a href="#dataMethods">Data Methods</a>),
Function (<a href="#functionDescription">Function Description</a>),
Image (<a href="#imageDescription">Image Description</a>, <a href="#imageProperties">Image Properties</a>),
Math (<a href="#mathDescription">Math Description</a>, <a href="#mathProperties">Math Properties</a>, <a href="#mathMethods">Math Methods</a>),
Number (<a href="#numberDescription">Number Description</a>, <a href="#numberProperties">Number Properties</a>),
String (<a href="#stringDescription">String Description</a>, <a href="#stringProperties">String Properties</a>, <a href="#stringMethods">String Methods</a>);<br />
<b>Other:</b> <a href="#other">Other</a>;<br />
<b>Similar Sites:</b>
<a href="http://www.manual.su/">MANUAL</a>,
<a href="http://www.cheat-sheets.org/">Cheat sheets</a>,
<a href="http://www.html.su/">HTML</a>,
<a href="http://www.css.su/">CSS</a>,
<a href="http://www.xml.su/">XML</a>,
<a href="http://www.xml.su/dtd.html">DTD</a>,
<a href="http://www.javascript.su/">JavaScript</a>,
<a href="http://www.w3c-dom.org/">W3C DOM</a>,
<a href="http://www.sql.su/">SQL</a>,
<a href="http://www.ssi.su/">SSI</a>,
<a href="http://www.tell.su/">Tell a friend</a>,
<a href="http://www.iconsfree.org/">Free Icons</a>,
<a href="http://www.itlibitum.org/">Itlibitum, Corp.</a>.
</td>
<td><div class="normalizer"> </div></td>
<td><div class="normalizer"> </div></td>
</tr>
<tr>
<td class="normalizerEmpty"></td>
<td><div class="normalizer"> </div></td>
<td><div class="normalizer"> </div></td>
<td><div class="normalizerSyntax"> </div></td>
<td><div class="normalizerDescription"> </div></td>
<td><div class="normalizer"> </div></td>
<td><div class="normalizer"> </div></td>
</tr>
<tr>
<td class="normalizerEmpty"></td>
<td rowspan="20" colspan="2" align="center">
<table align="center">
<tr>
<td>
<!--Google adsence-referals-adsence-?-begin-->
<script type="text/javascript"><!--
google_ad_client = "pub-1858423611892674";
google_ad_width = 120;
google_ad_height = 240;
google_ad_format = "120x240_as_rimg";
google_cpa_choice = "CAAQg6aazgEaCByzL-E9BzG1KOPC93M";
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!--Google adsence-referals-adsence-?-end-->
</td>
<td>
<!--Google adsence-adsence-?-begin-->
<script type="text/javascript"><!--
google_ad_client = "pub-1858423611892674";
google_ad_width = 336;
google_ad_height = 280;
google_ad_format = "336x280_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "FF4500";
google_color_bg = "FFEBCD";
google_color_link = "DE7008";
google_color_url = "E0AD12";
google_color_text = "8B4513";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!--Google adsence-adsence-?-end-->
</td>
<td>
<!--Google adsence-referals-firefox-?-begin-->
<script type="text/javascript"><!--
google_ad_client = "pub-1858423611892674";
google_ad_width = 120;
google_ad_height = 240;
google_ad_format = "120x240_as_rimg";
google_cpa_choice = "CAAQjeWZzgEaCGUPemYRwK8bKPG193M";
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!--Google adsence-referals-firefox-?-end-->
</td>
</tr>
<tr><td colspan="3"> </td></tr>
<tr>
<td colspan="3" align="center">
<!-- Search Google -->
<center>
<form method="get" action="http://www.google.com/custom" target="_top">
<table bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="middle"></img></a>
<input type="text" name="q" size="31" maxlength="255" value=""></input>
<input type="submit" name="sa" value="Search"></input>
<input type="hidden" name="client" value="pub-1858423611892674"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="ie" value="UTF-8"></input>
<input type="hidden" name="oe" value="UTF-8"></input>
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;"></input>
<input type="hidden" name="hl" value="en"></input>
</td></tr></table>
</form>
</center>
<!-- Search Google -->
</td>
</tr>
<tr><td colspan="3"> </td></tr>
<tr>
<td colspan="3" align="center">
<!--Google AdSence Context-?-begin-->
<script type="text/javascript"><!--
google_ad_client = "pub-1858423611892674";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as_rimg";
google_cpa_choice = "CAAQnJT88AEaCMK4_ISyftj8KKSxynM";
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!--Google AdSence Context-?-end-->
</td>
</tr>
</table>
</td>
<td colspan="4" class="titleChapter">Allocation<a name="allocation"> </a></td>
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<td rowspan="40" colspan="4" class="description">
<?xml version="1.0" encoding="UTF-8"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br /><br />
<head><br />
<title>... replace with your document's title ...</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><br />
<script type="text/javascript" src="<em class="note">... insert link to file with your JavaScript code here ...</em>"></script><br /><br />
<script type="text/javascript"><br />
//<!-- Begin to hide script contents from old browsers.<br />
<em class="note">... or insert your JavaScript code here ...</em><br />
// End the hiding here. --><br />
</script><br /><br />
</head><br /><br />
<body><br />
... replace with your document's content ...<br /><br />
<script type="text/javascript"><br />
//<!-- Begin to hide script contents from old browsers.<br />
<em class="note">... or insert your JavaScript code here ...</em><br />
// End the hiding here. --><br />
</script><br /><br />
... replace with your document's content ...<br /><br />
<input type="button" value="Click Me" onClick="<em class="note">... or insert your JavaScript code here ...</em>" /><br />
<br />
<a href="... any link or sharp ..." onBlur="<em class="note">... or insert your JavaScript code here ...</em>">... replace with your text ...</a><br /><br />
... replace with your document's content ...<br />
</body><br /><br />
</html><br />
</td>
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<td colspan="2" class="titleChapter"><a name="review"> </a>Review</td>
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<td colspan="2" rowspan="20" class="description">
<strong class="note">JavaScript</strong> is a compact, object-based scripting language for developing client and server Internet applications.
Netscape Navigator interprets JavaScript statements embedded in an HTML page, and LiveWire enables you to create server-based applications similar
to Common Gateway Interface (CGI) programs.<br /><br />
<strong class="note">JavaScript</strong> is Netscape's cross-platform, object-based scripting language for client and server
applications. There are two types of JavaScript:<br />
<ul>
<li>Navigator JavaScript, also called client-side JavaScript</li>
<li>LiveWire JavaScript, also called server-side JavaScript</li>
</ul>
<strong class="note">JavaScript</strong> is a language.
Client and server JavaScript differ in numerous ways, but they have the following elements in common:
<ul>
<li>Keywords, statement syntax, and grammar</li>
<li>Rules for expressions, variables, and literals</li>
<li>Underlying object model (although Navigator and LiveWire have different object frameworks)</li>
<li>Built-in objects and functions</li>
</ul>
</td>
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<!--2 cell-->
<!--4 cell-->
</tr>
<tr>
<td class="normalizerEmpty"></td>
<td colspan="6" class="titleChapter"><a name="simpleExamples"> </a>JavaScript Simple Examples</td>
</tr>
<tr>
<td class="normalizerEmpty"></td>
<td colspan="2" class="titleSubChapter"><a name="helloWorld"> </a>Hello World!</td>
<td colspan="2" class="titleSubChapter"><a name="definingFunctions"> </a> Defining and Dalling Functions</td>
<td colspan="2" class="titleSubChapter"><a name="usingEventHandler"> </a>Using an Event Handler</td>
</tr>
<tr>
<td class="normalizerEmpty"></td>
<td class="code">
<strong>Code:</strong><br />
<html><br />
<head></head><br />
<body><br />
<strong>Example:</strong><br />
<script type="text/javascript"><br />
//<!-- <br />
document.write("Hello World!");<br />
//--><br />
</script><br />
<div>All done.</div><br />
</body><br />
</html>
</td>
<td class="example">
<strong>Example:</strong><br />
<script type="text/javascript">
//<!--
document.write("Hello World!");
//-->
</script>
<div>All done.</div>
</td>
<td class="code">
<strong>Code:</strong><br />
<html><br />
<head><br />
<script type="text/javascript"><br />
//<!-- <br />
function square(number) {<br />
return number * number;<br />
}<br />
//--><br />
</script><br />
</head><br />
<body><br />
<strong>Example:</strong><br />
<script type="text/javascript"><br />
//<!-- <br />
document.write("The function");<br />
document.write(" returned ");<br />
document.write(square(5), ".");<br />
//--><br />
</script><br />
<div>All done.</div><br />
</body><br />
</html>
</td>
<td class="example">
<strong>Example:</strong><br />
<script type="text/javascript">
//<!--
document.write("The function");
document.write(" returned ");
document.write(square(5), ".");
//-->
</script>
<div>All done.</div>
</td>
<td class="code">
<strong>Code:</strong><br />
<html><br />
<head><br />
<script type="text/javascript"><br />
//<!-- <br />
function compute(f) {<br />
if (confirm("Are you sure?"))<br />
f.result.value = eval(f.expr.value)<br />
else<br />
alert("Please come back again.")<br />
}<br />
//--><br />
</script><br />
</head><br />
<body><br />
<strong>Example:</strong><br />
<form><br />
Enter an expression:<br />
<input type="text" name="expr" size="10" value="2+2" /><br/><br />
<input type="button" value="Calculate" onClick="compute(this.form)" /><br/><br />
Result:<br />
<input type="text" name="result" size="10" /><br/><br />
</form><br />
</body><br />
</html>
</td>
<td class="example">
<strong>Example:</strong><br />
<form action="">
<table width="100%">
<tr><td align="right">Enter an expression:</td><td align="left"><input type="text" name="expr" size="10" value="2+2" /></td></tr>
<tr><td colspan="2" align="center"><input name="computeInput" type="button" value="Calculate" onclick="compute(this.form)" /></td></tr>
<tr><td align="right">Result:</td><td align="left"><input type="text" name="result" size="10" /></td></tr>
</table>
</form>
</td>
</tr>
<tr>
<td class="normalizerEmpty"></td>
<td class="titleChapter"><a name="values"> </a>Values</td>
<td colspan="2" class="titleChapter"><a name="dataTypeConversion"> </a>Data type conversion</td>
<td colspan="3" class="titleChapter">Variables<a name="variables"> </a></td>
</tr>
<tr>
<td class="normalizerEmpty"></td>
<td class="description">
<div class="p">JavaScript recognizes the following types of values:</div>
<ul>
<li><strong>Numbers</strong>, such as <em>42</em> or <em>3.14159</em></li>
<li><strong>Logical (Boolean) values</strong>, either <em>true</em> or <em>false</em></li>
<li><strong>Strings</strong>, such as <em>"Howdy!"</em></li>
<li><strong>null</strong>, a special keyword denoting a null value</li>
</ul>
</td>
<td colspan="2" class="description">
<div class="p">JavaScript is a loosely typed language. That means you do not have to specify the data type of a variable when you declare it,
and data types are converted automatically as needed during script execution. So, for example, you could define a variable as follows:</div>
<div class="e">var answer = 42</div>
<div class="p">And later, you could assign the same variable a string value, for example,</div>
<div class="e">answer = "Thanks for all the fish..."</div>
<div class="p">Because JavaScript is loosely typed, this assignment does not cause an error message.</div>
<div class="p">In expressions involving numeric and string values, JavaScript converts the numeric values to strings.
For example, consider the following statements:</div>
<div class="e">x = "The answer is " + 42<br/> y = 42 + " is the answer."</div>
<div class="p">The first statement returns the string "The answer is 42." The second statement returns the string "42 is the answer." </div>
</td>
<td colspan="3" class="description">
<div class="p">You use variables as symbolic names for values in your application. You give variables names by which you refer to
them and which must conform to certain rules.</div>
<div class="p">A JavaScript identifier, or name, must start with a letter or underscore ("_"); subsequent characters can also be digits (0-9).
Because JavaScript is case sensitive, letters include the characters "A" through "Z" (uppercase) and the characters "a" through "z" (lowercase).</div>
<div class="p">Some examples of legal names are Number_hits, temp99, and _name. </div>
<div class="p">You can declare a variable in two ways:</div>
<ul>
<li>By simply assigning it a value; for example, <em>x = 42</em></li>
<li>With the keyword var; for example, <em>var x = 42</em></li>
</ul>
<div class="p">When you set a variable identifier by assignment outside of a function, it is called a global variable,
because it is available everywhere in the current document. When you declare a variable within a function,
it is called a local variable, because it is available only within the function. Using var is optional,
but you need to use it if you want to declare a local variable inside a function that has already
been declared as a global variable.</div>
<div class="p">You can access global variables declared in one window or frame from another window or frame by specifying the window or frame name.
For example, if a variable called phoneNumber is declared in a FRAMESET document, you can refer to this variable from a child frame as parent.phoneNumber.</div>
</td>
</tr>
<tr>
<td class="normalizerEmpty"></td>
<td colspan="6" class="titleChapter"><a name="literals"> </a>Literals</td>
</tr>
<tr>
<td class="normalizerEmpty"></td>
<td colspan="6" class="description">
<div class="p">You use literals to represent values in JavaScript. These are fixed values, not variables, that you literally provide in your script.</div>
</td>
</tr>
<tr>
<td class="normalizerEmpty"></td>
<td class="titleSubChapter"><a name="integers"> </a>Integers</td>
<td class="titleSubChapter"><a name="floatingPoint"> </a>Floating-point literals</td>
<td class="titleSubChapter"><a name="boolean"> </a>Boolean literals</td>
<td colspan="3" class="titleSubChapter"><a name="string"> </a>String literals</td>
</tr>
<tr>
<td class="normalizerEmpty"></td>
<td class="description">
<div class="p">Integers can be expressed in decimal (base 10), hexadecimal (base 16), and octal (base 8). A decimal integer literal consists of
a sequence of digits without a leading 0 (zero). A leading 0 (zero) on an integer literal indicates it is in octal;
a leading 0x (or 0X) indicates hexadecimal. Hexadecimal integers can include digits (0-9) and the letters a-f and A-F.
Octal integers can include only the digits 0-7. Some examples of integer literals are: <em>42</em>, <em>0xFFF</em>, and <em>-345</em>.</div>
</td>
<td class="description">
<div class="p">A floating-point literal can have the following parts: a decimal integer, a decimal point ("."), a fraction (another decimal number),
an exponent, and a type suffix. The exponent part is an "e" or "E" followed by an integer, which can be signed (preceded by "+" or "-").
A floating-point literal must have at least one digit, plus either a decimal point or "e" (or "E").
Some examples of floating-point literals are <em>3.1415</em>, <em>-3.1E12</em>, <em>.1e12</em>, and <em>2E-12</em></div>
</td>
<td class="description">
<div class="p">The Boolean type has two literal values: <em>true</em> and <em>false</em>.</div>
</td>
<td colspan="3" class="description">
<div class="p">A string literal is zero or more characters enclosed in double (") or single (') quotation marks.
A string must be delimited by quotation marks of the same type; that is, either both single quotation marks or double quotation marks.</div>
<div class="p">The following are examples of string literals: <em>"blah"</em>, <em>'blah'</em>, <em>"1234"</em>, <em>"one line \n another line"</em>.</div>
<div class="p">In addition to ordinary characters, you can also include special characters in strings, as shown in the last element in the preceding list.</div>
<table class="descriptionTable">
<caption>Special Characters</caption>
<tr><th>Character</th><th>Meaning</th></tr>
<tr><td>\b</td><td>backspace</td></tr>
<tr><td>\f</td><td>form feed</td></tr>
<tr><td>\n</td><td>new line</td></tr>
<tr><td>\r</td><td>carriage return</td></tr>
<tr><td>\t</td><td>tab</td></tr>
<tr><td>\\</td><td>backslash character</td></tr>
</table>
<div class="p">For characters not listed in the preceding table, a preceding backslash is ignored, with the exception of a quotation mark and the backslash character itself.
You can insert quotation marks inside strings by preceding them with a backslash. This is known as escaping the quotation marks. For example,</div>
<div class="e">var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service."<br />document.write(quote)</div>
<div class="p">The result of this would be
He read "The Cremation of Sam McGee" by R.W. Service.
To include a literal backslash inside a string, you must escape the backslash character. For example, to assign the file path c:\temp to a string,
use the following:</div>
<div class="e">var home = "c:\\temp"</div>
</td>
</tr>
<tr>
<td class="normalizerEmpty"></td>
<td colspan="6" class="titleChapter"><a name="expressions"> </a>Expressions</td>
</tr>
<tr>
<td class="normalizerEmpty"></td>
<td colspan="6" class="description">
<div class="p">An expression is any valid set of literals, variables, operators, and expressions that evaluates to a single value; the value can be a number,
a string, or a logical value.</div>
<div class="p">Conceptually, there are two types of expressions: those that assign a value to a variable, and those that simply have a value. </div>
<div class="p">For example, the expression
<em>x = 7</em> is an expression that assigns x the value seven. </div>
<div class="p">This expression itself evaluates to seven. Such expressions use assignment operators. On the other hand,
the expression <em>3 + 4</em> simply evaluates to seven; it does not perform an assignment. </div>
<div class="p">The operators used in such expressions are referred to simply as operators.</div>
<div class="p">JavaScript has the following types of expressions:</div>
<ul>
<li><strong>Arithmetic:</strong> evaluates to a number, for example <em>3.14159</em></li>
<li><strong>String:</strong> evaluates to a character string, for example, <em>"Fred"</em> or <em>"234"</em></li>
<li><strong>Logical:</strong> evaluates to <em>true</em> or <em>false</em> </li>
</ul>
<div class="p">The special keyword null denotes a null value. In contrast, variables that have not been assigned a value are undefined and
will cause a runtime error if used as numbers or as numeric variables. </div>
<div class="p">Array elements that have not been assigned a value, however,
evaluate to false. For example, the following code executes the function myFunction because the array element is not defined:</div>
<div class="e">myArray=new Array()<br />if (!myArray["notThere"])<br />myFunction()</div>
<div class="p">A <strong>conditional expression</strong> can have one of two values based on a condition. The syntax is</div>
<div class="e">(condition) ? val1 : val2</div>
<div class="p">If condition is true, the expression has the value of val1. Otherwise it has the value of val2. You can use a conditional expression anywhere you would use a
standard expression.</div>
<div class="p">For example,</div>
<div class="e">status = (age >= 18) ? "adult" : "minor"</div>
<div class="p">This statement assigns the value "adult" to the variable status if age is eighteen or greater. Otherwise, it assigns the value "minor" to status.</div>
</td>
</tr>
<tr>
<td class="normalizerEmpty"></td>
<td colspan="6" class="titleChapter"><a name="operators"> </a>Operators</td>
</tr>
<tr>
<td class="normalizerEmpty"></td>
<td colspan="6" class="description">
<div class="p">JavaScript has assignment, comparison, arithmetic, bitwise, logical, string, and special operators. This section describes the operators and contains
information about operator precedence.</div>
<div class="p">There are both binary and unary operators. A binary operator requires two operands, one before the operator and one after the operator:</div>
<div class="e">operand1 operator operand2</div>
<div class="p">For example, <em>3+4</em> or <em>x*y</em>.</div>
<div class="p">A unary operator requires a single operand, either before or after the operator:</div>
<div class="e">operator operand</div>
<div class="p">or</div>
<div class="e">operand operator</div>
<div class="p">For example, <em>x++</em> or <em>++x</em>.</div>
</td>
</tr>
<tr>
<td class="normalizerEmpty"></td>
<td colspan="2" class="titleSubChapter"><a name="assignmentOperators"> </a>Assignment operators</td>
<td colspan="2" class="titleSubChapter"><a name="comparisonOperators"> </a>Comparison operators</td>
<td colspan="2" class="titleSubChapter"><a name="logicalOperators"> </a>Logical operators</td>
</tr>
<tr>
<td class="normalizerEmpty"></td>
<td colspan="2" class="description">
<div class="p">An assignment operator assigns a value to its left operand based on the value of its right operand.</div>
<div class="p">The basic assignment operator is equal (=), which assigns the value of its right operand to its left operand. That is, x = y assigns the value of y to x.</div>
<div class="p">The other operators are shorthand for standard operations, as shown in the following table:</div>
<table class="descriptionTable">
<caption>Shorthand operators</caption>
<tr><th>Shorthand operator</th><th>Meaning</th></tr>
<tr><td>x += y</td><td>x = x + y</td></tr>
<tr><td>x -= y</td><td>x = x - y</td></tr>
<tr><td>x *= y </td><td>x = x * y</td></tr>
<tr><td>x /= y</td><td>x = x / y</td></tr>
<tr><td>x %= y</td><td>x = x % y</td></tr>
<tr><td>x <<= y</td><td> x = x << y</td></tr>
<tr><td>x >>= y</td><td> x = x >> y</td></tr>
<tr><td>x >>>= y</td><td> x = x >>> y</td></tr>
<tr><td>x &= y</td><td>x = x & y</td></tr>
<tr><td>x ^= y</td><td>x = x ^ y</td></tr>
<tr><td>x |= y</td><td> x = x | y</td></tr>
</table>
</td>
<td colspan="2" class="description">
<div class="p">A comparison operator compares its operands and returns a logical value based on whether the comparison is true or not.</div>
<div class="p">The operands can be numerical or string values. When used on string values, the comparisons are based on the standard lexicographical ordering.</div>
<div class="p">They are described in the following table.</div>
<table class="descriptionTable">
<caption>Comparison operators</caption>
<tr><th>Operator</th><th>Name</th><th>Description</th><th>Example</th><th>Example Descritpion</th></tr>
<tr><td>==</td><td>Equal</td><td>Returns true if the operands are equal</td><td><em>x == y</em></td><td>Returns true if x equals y.</td></tr>
<tr><td>!=</td><td>Not equal</td><td>Returns true if the operands are not equal. </td><td><em>x != y</em></td><td>Returns true if x is not equal to y.</td></tr>
<tr><td>></td><td>Greater than</td><td>Returns true if left operand is greater than right operand. </td><td><em>x > y</em></td><td>Returns true if x is greater than y.</td></tr>
<tr><td>>=</td><td>Greater than or equal</td><td>Returns true if left operand is greater than or equal to right operand.</td><td><em>x >= y</em></td><td>Returns true if x is greater than or equal to y.</td></tr>
<tr><td><</td><td>Less than</td><td>Returns true if left operand is less than right operand.</td><td><em>x < y</em></td><td>Returns true if x is less than y.</td></tr>
<tr><td><=</td><td>Less than or equal</td><td>Returns true if left operand is less than or equal to right operand.</td><td><em>x <= y</em></td><td>Returns true if x is less than or equal to y.</td></tr>
</table>
</td>
<td colspan="2" class="description">
<div class="p">Logical operators take Boolean (logical) values as operands and return a Boolean value. They are described in the following table.</div>
<table class="descriptionTable">
<caption>Logical Operators</caption>
<tr><th>Operator</th><th>Name</th><th>Usage</th><th>Description</th></tr>
<tr><td>&&</td><td>and</td><td>expr1 && expr2</td><td>Returns true if both logical expressions expr1 and expr2 are true. Otherwise, returns false. </td></tr>
<tr><td>||</td><td>or</td><td>expr1 || expr2</td><td>Returns true if either logical expression expr1 or expr2 is true. If both are false, returns false.</td></tr>
<tr><td>!</td><td>not</td><td>!expr</td><td>If expr is true, returns false; if expr is false, returns true.</td></tr>
</table>
<div class="notes">Notes</div>
<ul>
<li><strong>false</strong> && anything is short-circuit evaluated to false.</li>
<li><strong>true</strong> || anything is short-circuit evaluated to true.</li>