· 8 years ago · Dec 05, 2017, 02:50 PM
1Hyperlink Styling
2
3Order
4 Links can be in multiple states at the same time, thus it's important to order them in the correct fashion
5
6link
7visited
8focus
9hover
10active
11
12
13
14Use a . to access elements
15 ex: #region would be .region
16
17Use a # to access divs
18 ex: newDiv would be #newDiv
19
20
21
22<nav>
23ex:
24
25<nav>
26 <a href="Home.html">Document Structure</a>
27 <a href="Blog.html">Writing Code</a>
28 <a href="About.html">Styles</a>
29</nav>
30
31
32<figure>
33ex:
34
35<figure>
36 <img src="orange.jpg" style="width:50px; height:50px;"/>
37 <figcaption>Fig 1: A really juicy orange.</figcaption>
38</figure>
39
40
41
42
43Methods for selecting DOM elements
44
45.getElementById
46 Gets specified element
47 ex: var div = window.getElementById(":mainDiv")
48
49.getElementsByClassName
50 Gets all the elements with the specified CSS class
51
52.getElementsByTagName
53 Gets all the elements with specified tag name
54
55.querySelector
56 Gets the first child element that matches CSS selector criteria
57
58.querySelectorAll
59 Gets all the child elements that matches CSS selector criteria
60
61
62
63ex.1:
64
65 var element = document.getElementById("outerDiv");
66 alert(element.innerHTML);
67
68
69ex.2:
70
71 window.onload = function () {
72
73 var paragraphs = document.getElementsByTagName("p");
74 alert(paragraphs.length);
75 }
76
77
78ex.3:
79
80 document.querySelectorAll("p");
81
82
83ex.4:
84
85 document.querySelector("#outerDiv");
86
87
88
89Altering the DOM
90
91
92ex.1:
93
94 var outerDiv = document.getElementById("outerDiv");
95 var element = document.createElement("article");
96 element.innerText = "My new <article> element";
97 outerDiv.appendChild(element);
98
99
100
101
102
103<video>
104
105Attributes
106
107
108src
109 Specifies which video to play local or network file
110
111autoplay
112 Sets video to autoplay if true
113
114controls
115 displays video controls if true
116
117height/width
118 Sets the height/width of the player
119
120loop
121 loops back to start at end of video if true
122
123poster
124 What image to display when video hasn't been activaed (when autoplay isn't in use)
125
126
127ex.1:
128
129 <video src="samplevideo.mp4" controls poster="picture.jpg" height="400" width="600">
130 </video>
131
132
133Browser support for <video> element
134ex.2:
135
136 <video controls height="400" width="600" poster="picture.jpg">
137 <source src="samplevideo.ogv" type="video/ogg"/>
138 <source src="samplevideo.mp4" type="audio/mp4"/>
139 <object>
140 <p>Video is not supported by this browser.</p>
141 </object>
142 </video>
143
144
145Methods and Properties
146
147.play()
148 starts video playback
149
150.pause()
151 pauses video playback
152
153.volume
154 Allows user to control volume
155
156.currentTime
157 Represents current position in video, increase or decrese to change position
158
159
160
161<audio>
162
163
164ex:
165
166 <audio controls>
167 <source src="sample.mp3" type="audio/mp3"/>
168 <source src="sample.ogg" type="audio/ogg"/>
169 <p>Your browser does not support HTML5 audio.</p>
170 </audio>
171
172
173
174<canvas>
175
176
177ex:
178
179 <canvas id="drawingSurface" width="600" height="400">
180 Your browser does not support HTML5.
181 </canvas>
182
183
184To use canvas to draw in using code you need to get the canvas's context
185ex:
186
187 window.onload = function () {
188
189 var drawingSurface = document.getElementById("drawingSurface");
190 var ctxt = drawingSurface.getContext("2d");
191 }
192
193
194Methods for drawing lines
195
196.beginPath
197 Resets/begins a new drawing path
198
199.moveTo
200 Moves the context to point set in beginPath
201
202.lineTo
203 sets end point for line
204
205.stroke
206 Creates the line
207
208
209ex.1:
210
211 ctxt.beginPath();
212 ctxt.moveTo(10, 10);
213 ctxt.lineTo(225, 350);
214 ctxt.stroke();
215
216
217ex.2:
218
219 ctxt.beginPath();
220 ctxt.moveTo(10, 10);
221 ctxt.lineTo(225, 350);
222 ctxt.lineTo(300, 10);
223 ctxt.lineTo(400, 350);
224 ctxt.stroke();
225
226
227Drawing curves
228
229Methods
230
231arc
232 standard arc
233
234quadraticCurveTo
235 arc with control over steepness
236
237bezierCurveTo
238 arc you can skew
239
240
241
242arc parameters
243
244X,Y
245 centre of circle
246
247radius
248 distance to edge from centre
249
250startAngle, endAngle
251 arc angle in radians
252
253counterclockwise
254 if true draws circle starting counter clockwise
255
256ex:
257
258 ctxt.beginPath();
259 ctxt.arc(150,100,75,0,2 * Math.PI, false);
260 ctxt.lineWidth = 25;
261 ctxt.strokeStyle = '#0f0';
262 ctxt.stroke();
263
264
265
266
267quadraticCurveTo parameters
268
269
270controlX, controlY
271 Defines control points relative from the top left of canvas
272
273endX, endY
274 end point for curve
275
276
277ex:
278
279 ctxt.beginPath();
280 ctxt.moveTo(10,380);
281 ctxt.quadraticCurveTo(300,-250,580,380);
282 ctxt.lineWidth = 25;
283 ctxt.strokeStyle = '#f00';
284 ctxt.stroke();
285
286
287
288bezierCurveTo
289
290
291controlX, controlY
292 sets control point used to stretch curve
293
294control2X, control2Y
295 sets second control point
296
297endX, endY
298 end point for curve
299
300
301ex:
302
303 ctxt.beginPath();
304 ctxt.moveTo(125, 20);
305 ctxt.bezierCurveTo(0, 200, 300, 300, 50, 400);
306 ctxt.lineWidth = 5;
307 ctxt.strokeStyle = '#f00';
308 ctxt.stroke();
309
310
311
312using path
313
314ex:
315
316 ctxt.beginPath();
317 ctxt.arc(300, 200, 75, 1.75 * Math.PI, 1.25 * Math.PI, false);
318 ctxt.lineTo(150, 125);
319 ctxt.quadraticCurveTo(300, 0, 450, 125);
320 ctxt.lineTo(353, 144);
321 ctxt.strokeStyle = "blue";
322 ctxt.lineCap = "round";
323 ctxt.lineWidth = 10;
324 ctxt.stroke();
325
326
327
328rect parameters
329
330x,y
331 origin point
332
333width
334 defines width
335
336height
337 defines height
338
339ex:
340
341 ctxt.beginPath();
342 ctxt.rect(300, 200, 150, 75);
343 ctxt.stroke();
344
345
346fill
347
348ex:
349
350 ctxt.fillStyle = "blue";
351 ctxt.fillRect(300—(x / 2), 200—(y / 2), x, y);
352
353
354
355
356Drawing images
357
358ex:
359
360 var drawingSurface = document.getElementById("drawingSurface");
361 var ctxt = drawingSurface.getContext("2d");
362 var img = new Image();
363 img.src = "orange.jpg";
364
365 img.onload = function () {
366
367 ctxt.drawImage(img, 0, 0);
368 ctxt.stroke();
369 }
370
371
372
373
374Transform
375
376ex:
377
378 transform: rotate(90deg);
379 transform: translate(50px,0px);
380 transform: skew(10deg, 10deg);
381 transform: scale(1.5);
382
383 //Combined
384 transform: translate(50px,0px) scale(1.5) skew(10deg, 10deg);
385
386
387Showing and hiding elements
388
389
390visibility property values
391
392visible
393 makes element visible
394
395hidden
396 hides element
397
398collapse
399 Collapses element where applicable, such as a table row
400
401inherit
402 Inherits visibility value from parent
403
404
405ex:
406
407 <script>
408 window.onload = function () {
409
410 document.getElementById("btnHideAnElement").onclick = function () {
411 if (document.getElementById("innerDiv").style.display == 'inline') {
412 document.getElementById("innerDiv").style.display = 'none';
413 }
414 else {
415 document.getElementById("innerDiv").style.display = 'inline';
416 }
417 }
418 }
419 </script>
420…
421 <button type="button" id="btnHideAnElement" >Show/Hide Element</button>
422
423
424
425
426
427Storage APIs
428
429Methods available to all storage objects
430
431setItem
432 Adds key/value pair to storage, if key already exists updates value
433
434getItem
435 retrives values related to specified key
436
437clear
438 Clears storage
439
440key
441 retrives key at index
442
443removeItem
444 removes specified key/value pair
445
446
447
448ex:
449
450 <script>
451 window.onload = function () {
452 document.getElementById("btnAdd").onclick = function () {
453 }
454
455 document.getElementById("btnRemove").onclick = function () {
456 }
457
458 document.getElementById("btnClear").onclick = function () {
459 }
460
461 function LoadFromStorage() {
462 }
463 }
464 </script>
465
466 <section>
467 <button type="button" id="btnAdd">Add To Storage</button>
468 <button type="button" id="btnRemove">Remove from Storage</button>
469 <button type="button" id="btnClear">Clear Storage</button>
470 </section>
471
472 <div id="storage">
473 <p>Current Storage Contents</p>
474 </div>
475
476 window.onload = function () {
477
478 LoadFromStorage();
479 document.getElementById("btnAdd").onclick = function () {
480 …
481 function LoadFromStorage() {
482
483 var storageDiv = document.getElementById("storage");
484 var tbl = document.createElement("table");
485 tbl.id = "storageTable";
486
487 if (localStorage.length > 0) {
488
489 for (var i = 0; i < localStorage.length; i++) {
490
491 var row = document.createElement("tr");
492 var key = document.createElement("td");
493 var val = document.createElement("td");
494 key.innerText = localStorage.key(i);
495 val.innerText = localStorage.getItem(key.innerText);
496 row.appendChild(key);
497 row.appendChild(val);
498 tbl.appendChild(row);
499 }
500 }
501 else {
502 var row = document.createElement("tr");
503 var col = document.createElement("td");
504 col.innerText = "No data in local storage.";
505 row.appendChild(col);
506 tbl.appendChild(row);
507 }
508 if (document.getElementById("storageTable")) {
509 document.getElementById("storageTable").replaceNode(tbl);
510 }
511 else {
512 storageDiv.appendChild(tbl);
513 }
514 }
515
516
517 document.getElementById("btnAdd").onclick = function () {
518 localStorage.setItem(document.getElementById("toStorageKey").value,
519 document.getElementById("toStorageValue").value);
520 LoadFromStorage();
521 }
522
523 document.getElementById("btnRemove").onclick = function () {
524 localStorage.removeItem(document.getElementById("toStorageKey").value);
525 LoadFromStorage();
526 }
527
528 document.getElementById("btnClear").onclick = function () {
529 localStorage.clear();
530 LoadFromStorage();
531 }
532
533
534
535
536
537
538Appacache API
539 Used to allow pages to be used offline
540
541Add manifest to html
542ex:
543
544 <html manifest="webApp.appcache">
545 …
546 </html>
547
548
549Example manifest file
550ex:
551
552 CACHE MANIFEST
553 # My Web Application Cache Manifest
554 # v.1.0.0.25
555 #
556
557 #Cache Section. All Cached items.
558 CACHE
559 /pages/page1.html
560 /pages/page2.html
561
562 #Required Network resources
563 NETWORK:
564 login.html
565
566 #Fallback items.
567 FALLBACK:
568 login.html fallback-login.html
569
570
571Creating applicationCache object
572ex:
573
574 var appCache = window.applicationCache;
575
576
577applicationCache status property
578
579Uncached
580 the web application isn't associated with an application manifest
581
582Idle
583 Caching activity is idle, most up-to-date cache is being used
584
585Checking
586 Cache is checking for updates
587
588Downloading
589 Downloading update
590
591UpdateReady
592 Updates have been successfully downloaded
593
594Obsolete
595 Manifest cannot be downloaded anymore, so cache is being deleted
596
597
598
599
600applicationCache Methods
601
602
603swapCache
604 Indicates that the cache should be replaced
605
606update
607 Tells browser to update if available
608
609
610
611applicationCache Events
612
613
614onchecking
615 Browser is checking for update or first cache is being created
616
617onnoupdate
618 No update availabe
619
620ondownloading
621 Downloading files listed in manifest
622
623onprogress
624 Files are being downloaded to cache
625
626oncached
627 Cache download completed
628
629onupdateready
630 Manifest files have been newly downloaded and swapCache might be called
631
632onobsolete
633 Manifest is no longer available
634
635onerror
636 An error has occured
637
638
639ex:
640
641 window.onload = function () {
642 var appCache = window.applicationCache;
643 appCache.oncached = function (e) { alert("cache successfully downloaded."); };
644 appCache.onupdateready = function (e) { appCache.swapCache(); };
645 }
646
647
648
649
650
651Geolocation API
652
653
654Creating geolocator object
655ex:
656
657 var geoLocator = window.navigator.geolocation;
658
659getCurrentPosition Method
660 getCurrentPosition(positionCallback, PositionErrorCallback, PositionOptions)
661
662
663PositionsOptions properties
664
665enableHighAccuracy
666 Uses more resources to get as close to an actual location
667
668timeout
669 Specifies the timeout period
670
671maximumAge
672 If this is set, API uses cached result if available rather than a new call if maximumAge value hasn't been passed.
673 In milliseconds
674
675ex:
676
677
678 window.onload = function () {
679 var geoLocator = window.navigator.geolocation;
680 var posOptions = {enableHighAccuracy: true,timeout: 45000};
681 geoLocator.getCurrentPosition(successPosition, errorPosition, posOptions);
682 }
683
684 function successPosition(pos) {
685 alert(pos);
686 }
687
688 function errorPosition(err) {
689 alert(err);
690 }
691
692
693
694watchPosition Method
695 Used to continuously poll location
696 ex: geoLocator.watchPosition(succcessCallback, errorCallback, positionOptions)
697
698
699ex:
700
701 var watcher;
702 var geoLocator;
703
704 window.onload = function () {
705 geoLocator = window.navigator.geolocation;
706 var posOptions = {enableHighAccuracy: true,timeout: 45000};
707 watcher = geoLocator.watchPosition(successPosition, errorPosition, posOptions);
708 }
709
710 function successPosition(pos) {
711 var sp = document.createElement("p");
712 sp.innerText = "Latitude: " + pos.coords.latitude + " Longitude: " + pos.coords.longitude;
713 document.getElementById("geoResults").appendChild(sp);
714 geoLocator.clearWatch(watcher);
715 }
716
717 function errorPosition(err) {
718 var sp = document.createElement("p");
719 sp.innerText = "error: " + err.message; + " code: " + err.code;
720 document.getElementById("geoResults").appendChild(sp);
721 }
722
723
724
725
726
727Using the this keyword
728
729the this keyword is a special term that reference the containing object directly
730ex:
731
732 <script>
733 //Here, "this" references the global namespace
734 this.navigator.geolocation
735
736 window.onload = function () {
737
738 //Here, "this" references the window object
739 this...
740
741 document.getElementById("aDiv").onclick = function()
742 {
743 //Here, "this" references the DIV element
744 this…
745 }
746 }
747 </script>
748
749
750
751
752
753Creating custom objects
754
755ex:
756
757 var book = {
758 ISBN: "55555555",
759 Length: 560,
760 genre: "programming",
761 covering: "soft",
762 author: "John Doe",
763 currentPage: 5,
764 title: "My Big Book of Wonderful Things",
765 flipTo: function flipToAPage(pNum) {
766 this.currentPage = pNum;
767 },
768 turnPageForward: function turnForward() {
769 this.flipTo(this.currentPage++);
770 },
771 turnPageBackward: function turnBackward() {
772 this.flipTo(this.currentPage--);
773 }
774 }
775
776
777prototypes
778 these are used when you want to use an object multiple times and on multiple pages
779
780ex:
781
782 function Book() {
783 this.ISBN = "55555555";
784 this.Length = 560;
785 this.genre= "programming";
786 this.covering = "soft";
787 this.author = "John Doe";
788 this.currentPage = 5,
789 this.flipTo = function FlipToAPage(pNum) {
790 this.currentPage = pNum;
791 },
792 this.turnPageForward = function turnForward() {
793 this.flipTo(this.currentPage++);
794 },
795 this.turnPageBackward = function turnBackward() {
796 this.flipTo(this.currentPage--);
797 }
798 }
799 var books = new Array(new Book(), new Book(), new Book());
800
801
802Objects can contain other objects
803ex:
804
805 Book.prototype = {
806 ISBN: "",
807 Length: -1,
808 genre: "",
809 covering: "",
810 author: new Author(),
811 currentPage: 0,
812 title: "",
813 …
814 }
815
816 function Author(){
817 }
818
819 function Author(firstName, lastName, gender) {
820 this.firstName = firstName;
821 this.lastName = lastName;
822 this.gender = gender;
823 }
824
825 Author.prototype = {
826 firstName:"",
827 lastName:"",
828 gender:"",
829 BookCount: 0
830 }
831
832 var books = new Array(new Book(),
833 new Book("First Edition",350, new Author("Random","Author","M"))
834 );
835
836
837
838Implementing inheritance
839
840
841Creating a derived book object
842ex:
843
844 var popupBook = Object.create(Book.protoType,{ hasSound: {value:true},
845 showPopUp:{ value: function showPop() {
846 //do logic to show a popup
847 }
848 }
849 });
850
851
852Object.create
853 takes two parameters, the object you want to create and a list of property descriptors
854
855ex:
856
857 function PopUpBook() {
858 Book.call(this);
859 }
860
861 PopUpBook.prototype = Book.prototype;
862 PopUpBook.prototype.hasSound = false;
863 PopUpBook.prototype.showPopUp = function ShowPop() { };
864
865
866
867
868
869Conditionals in expressions
870
871===
872 Evalutes if the value and underlying data type are equal, returns true/false for every element
873
874
875
876Advanced array methods
877
878
879every
880 test if any array element meets the condition
881
882ex:
883
884 var evenNumbers = new Array(0, 2, 4, 6, 8, 9, 10, 12);
885 var allEven = evenNumbers.every(evenNumberCheck, this);
886
887 if (allEven) {
888 …
889 } else {
890 …
891 }
892
893 function evenNumberCheck(value, index, array) {
894 return (value % 2) == 0;
895 }
896
897
898some
899 returns true if a single element meets the condition
900
901ex:
902
903 var evenNumbers = new Array(0, 2, 4, 6, 8, 9, 10, 12);
904 var allEven = evenNumbers.some(evenNumberCheck, evenNumbers);
905
906 if (allEven) {
907 …
908 }
909 else {
910 …
911 }
912
913 function evenNumberCheck(value, index, array) {
914 return (value % 2) == 0;
915 }
916
917
918
919filter
920 Removes items based on processing in a callback function
921 Returns a new array containg elements that returned true
922
923ex:
924
925 var evenNumbers = new Array(0, 2, 4, 6, 8, 9, 10, 12);
926 var allEven = evenNumbers.filter(evenNumberCheck, evenNumbers);
927 //work with the even numbers....
928
929 function evenNumberCheck(value, index, array) {
930 return (value % 2) == 0;
931 }
932
933
934
935ex:
936
937 var age = prompt('Enter age', '');
938 if(isNaN(age)){
939 age = 0;
940 alert('You need to enter a valid number');
941 }
942
943
944Import from other style sheet
945ex:
946
947 @charset 'UTF-8';
948 @import url('/Content/header.css');
949 @import url('/Content/menu.css');
950 @import url('/Content/sidebar.css');
951 @import url('/Content/mainContent.css');
952 @import url('/Content/footer.css');
953
954 body {
955 background-color: white;
956 color: gray;
957 }
958
959
960
961Importing fonts
962ex:
963
964 @font-face {
965 font-family: myFont;
966 src: url('Fancy_Light.ttf'),
967 url('Fancy_Light.eot'); /* IE9 */
968 }
969
970
971Creating an id selector
972An id selector is based on the id of the element. To set the style on a single button, you can
973assign an id to the button and then specify the id as the selector, prefixed with the hash (#)
974symbol. The following example sets the style on an element whose id is btnSave.
975
976#btnSave {
977 background-color: white;
978 color: gray;
979}
980
981
982Creating a class selector
983A class selector is a style with a class name of your choice, prefixed with the period (.) symbol.
984This is also called a named style. The class name can be assigned to any element through the
985class attribute. In the following example, a style is created with a class name of myStyle.
986
987.myStyle {
988 background-color: white;
989 color: gray;
990}
991
992
993
994JQuery event listener:
995ex: $('#btnSubmit').on('click', myFunction);
996
997ex.2: $('#btnDiv :nth-child(1)).click(myFunction);
998
999
1000
1001
1002Required Validation
1003ex: <input type="text" name="comment" required="required"/>
1004
1005
1006Url validation
1007ex: <input type="url" name="website" required="required" pattern="https?://.+" />
1008
1009
1010Number validation
1011ex: <input type="number" name="age" min="18" max="99" value="30" required="required" />
1012
1013
1014
1015XMLHttpRequest
1016
1017readyState codes
1018
1019 Uninitialized
1020 The open method has not been called yet.
1021
1022 Loading
1023 The send method has not been called yet.
1024
1025 Loaded
1026 The send method has been called; headers and status are available.
1027
1028 Interactive
1029 Downloading the response properties holds partial data.
1030
1031 Completed
1032 All operations are finished.
1033
1034
1035
1036 readyState
1037 0: request not initialized
1038 1: server connection established
1039 2: request received
1040 3: processing request
1041 4: request finished and response is ready
1042
1043status
1044 200 is success
1045
1046
1047ajax
1048
1049dataType
1050 file type expected back
1051
1052contentType
1053 type sent
1054
1055data
1056 data to be sent
1057
1058dataFilter
1059 function used to handle response data
1060
1061
1062
1063
1064dataType
1065ex:
1066
1067 var data = {"name":"John Doe"}
1068 $.ajax({
1069 dataType : "json",
1070 contentType: "application/json; charset=utf-8",
1071 data : JSON.stringify(data),
1072 success : function(result) {
1073 alert(result.success); // result is an object which is created from the returned JSON
1074 },
1075 });
1076
1077
1078dataFilter
1079ex.1:
1080
1081 $.ajax({
1082 url: "getData.php",
1083 dataFilter: function (data, type)
1084 {
1085 //include any conditions to filter data here
1086 //remove all commas from returned data
1087 return data.replace(",", "");
1088
1089 }
1090 });
1091
1092ex.2:
1093
1094 $.ajax({
1095 url: "getData.php",
1096 dataFilter: function (data, type)
1097 {
1098 //include any conditions to filter data here
1099 //if data is json process it in some way
1100 if (type === 'json')
1101 {
1102 var parsed_data = JSON.parse(data);
1103 $.each(parsed_data, function(i, item)
1104 {
1105 //process the json data
1106 });
1107 return JSON.stringify(parsed_data);
1108 }
1109
1110 }
1111 });
1112
1113ex:
1114
1115 var xmlhttp=new XMLHttpRequest();
1116 xmlhttp.open("GET","/addition?x=5&y=10",false);
1117 xmlhttp.send();
1118 var xmlDoc=xmlhttp.responseXML;
1119
1120
1121ex.2:
1122
1123 $(document).ready(function () {
1124 $('#btnAdd').on('click', addNumbers)
1125 });
1126
1127 function addNumbers() {
1128 var x = document.getElementById('x').value;
1129 var y = document.getElementById('y').value;
1130 var result = document.getElementById('result');
1131 var xmlhttp = new XMLHttpRequest();
1132 xmlhttp.open("GET", "/addition?x=" + x + "&y=" + y , false);
1133 xmlhttp.send();
1134 var jsonObject = JSON.parse(xmlhttp.response);
1135 result.innerHTML = jsonObject.result;
1136 }
1137
1138
1139
1140
1141ex.3:
1142
1143 function addNumbers() {
1144 var x = document.getElementById('x').value;
1145 var y = document.getElementById('y').value;
1146 var result = document.getElementById('result');
1147 var xmlhttp = new XMLHttpRequest();
1148 xmlhttp.onreadystatechange = function () {
1149 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
1150 var jsonObject = JSON.parse(xmlhttp.response);
1151 result.innerHTML = jsonObject.result;
1152 }
1153 }
1154
1155 xmlhttp.open("GET", "/addition?x=" + x + "&y=" + y, true);
1156 xmlhttp.send();
1157 }
1158
1159
1160
1161
1162
1163Storing complex objects
1164ex:
1165
1166var person = { firstName: 'Glenn', lastName: 'Johnson' };
1167localStorage.setItem('glenn', JSON.stringify(person));
1168
1169
1170Loading complex object
1171ex: var person = JSON.parse(localStorage.getItem('glenn'));
1172
1173
1174Cancelling event bubbling
1175ex: window.event.cancelBubble = true;
1176
1177
1178
1179Style sheet order
1180
11811. !important User style sheet
11822. !important Author style sheet
11833. Author style sheet
11844. User style sheet
11855. Browser’s built-in style sheet
1186
1187
1188
1189Object inheritance and override function
1190ex:
1191
1192 function parent(x) {
1193 this.id = x;
1194 }
1195
1196 parent.prototype (x) {
1197 id: 0,
1198 tostring = function () {}
1199 };
1200
1201 function derived (x) {
1202 parent.call(this, x);
1203
1204 }
1205
1206 derived.prototype = Object.create(parent.prototype, {
1207 name: {value:0},
1208 tostring: {value:function () {
1209 output.textcontent = this.id;}
1210 }
1211 });
1212
1213
1214
1215
1216encodeUri, decodeUri
1217 encodes/decodes to uri string
1218
1219ex.1:
1220
1221 var uri = "my test.asp?name=ståle&car=saab";
1222 var res = encodeURI(uri);
1223
1224 //Will output
1225 my%20test.asp?name=st%C3%A5le&car=saab
1226
1227
1228ex.2:
1229
1230 var uri = "my test.asp?name=ståle&car=saab";
1231 var enc = encodeURI(uri);
1232 var dec = decodeURI(enc);
1233
1234 //adds newline between encoded and decoded URI
1235 var res = enc + "<br>" + dec;
1236
1237 my%20test.asp?name=st%C3%A5le&car=saab // Encoded URI
1238 my test.asp?name=ståle&car=saab // Decoded URI
1239
1240
1241encode/decode UriComponent
1242
1243 encodeURI is intended for use on the full URI.
1244 encodeURIComponent is intended to be used on URI components that is any part that lies
1245 between separators (; / ? : @ & = + $ , #)
1246 in encodeURIComponent these separators are encoded also because they are regarded as text and
1247 not special characters