· 8 years ago · Dec 01, 2017, 11:28 AM
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 Donwloading 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
599applicationCache Methods
600
601swapCache
602 Indicates that the cache should be replaced
603
604update
605 Tells browser to update if available
606
607
608
609applicationCache Events
610
611
612onchecking
613 Browser is checking for update or first cache is being created
614
615onnoupdate
616 No update availabe
617
618ondownloading
619 Downloading files listed in manifest
620
621onprogress
622 Files are being downloaded to cache
623
624oncached
625 Cache download completed
626
627onupdateready
628 Manifest files have been newly downloaded and swapCache might be called
629
630onobsolete
631 Manifest is no longer available
632
633onerror
634 An error has occured
635
636
637ex:
638
639 window.onload = function () {
640 var appCache = window.applicationCache;
641 appCache.oncached = function (e) { alert("cache successfully downloaded."); };
642 appCache.onupdateready = function (e) { appCache.swapCache(); };
643 }
644
645
646
647
648
649Geolocation API
650
651
652Creating geolocator object
653ex:
654
655 var geoLocator = window.navigator.geolocation;
656
657getCurrentPosition Method
658 getCurrentPosition(positionCallback, PositionErrorCallback, PositionOptions)
659
660
661PositionsOptions properties
662
663enableHighAccuracy
664 Uses more resources to get as close to an actual location
665
666timeout
667 Specifies the timeout period
668
669maximumAge
670 If this is set, API uses cached result if available rather than a new call if maximumAge value hasn't been passed.
671 In milliseconds
672
673ex:
674
675
676 window.onload = function () {
677 var geoLocator = window.navigator.geolocation;
678 var posOptions = {enableHighAccuracy: true,timeout: 45000};
679 geoLocator.getCurrentPosition(successPosition, errorPosition, posOptions);
680 }
681
682 function successPosition(pos) {
683 alert(pos);
684 }
685
686 function errorPosition(err) {
687 alert(err);
688 }
689
690
691
692watchPosition Method
693 Used to continuously poll location
694 ex: geoLocator.watchPosition(succcessCallback, errorCallback, positionOptions)
695
696
697ex:
698
699 var watcher;
700 var geoLocator;
701
702 window.onload = function () {
703 geoLocator = window.navigator.geolocation;
704 var posOptions = {enableHighAccuracy: true,timeout: 45000};
705 watcher = geoLocator.watchPosition(successPosition, errorPosition, posOptions);
706 }
707
708 function successPosition(pos) {
709 var sp = document.createElement("p");
710 sp.innerText = "Latitude: " + pos.coords.latitude + " Longitude: " + pos.coords.longitude;
711 document.getElementById("geoResults").appendChild(sp);
712 geoLocator.clearWatch(watcher);
713 }
714
715 function errorPosition(err) {
716 var sp = document.createElement("p");
717 sp.innerText = "error: " + err.message; + " code: " + err.code;
718 document.getElementById("geoResults").appendChild(sp);
719 }
720
721
722
723
724
725Using the this keyword
726
727the this keyword is a special term that reference the containing object directly
728ex:
729
730 <script>
731 //Here, "this" references the global namespace
732 this.navigator.geolocation
733
734 window.onload = function () {
735
736 //Here, "this" references the window object
737 this...
738
739 document.getElementById("aDiv").onclick = function()
740 {
741 //Here, "this" references the DIV element
742 this…
743 }
744 }
745 </script>
746
747
748
749
750
751Creating custom objects
752
753ex:
754
755 var book = {
756 ISBN: "55555555",
757 Length: 560,
758 genre: "programming",
759 covering: "soft",
760 author: "John Doe",
761 currentPage: 5,
762 title: "My Big Book of Wonderful Things",
763 flipTo: function flipToAPage(pNum) {
764 this.currentPage = pNum;
765 },
766 turnPageForward: function turnForward() {
767 this.flipTo(this.currentPage++);
768 },
769 turnPageBackward: function turnBackward() {
770 this.flipTo(this.currentPage--);
771 }
772 }
773
774
775prototypes
776 these are used when you want to use an object multiple times and on multiple pages
777
778ex:
779
780 function Book() {
781 this.ISBN = "55555555";
782 this.Length = 560;
783 this.genre= "programming";
784 this.covering = "soft";
785 this.author = "John Doe";
786 this.currentPage = 5,
787 this.flipTo = function FlipToAPage(pNum) {
788 this.currentPage = pNum;
789 },
790 this.turnPageForward = function turnForward() {
791 this.flipTo(this.currentPage++);
792 },
793 this.turnPageBackward = function turnBackward() {
794 this.flipTo(this.currentPage--);
795 }
796 }
797 var books = new Array(new Book(), new Book(), new Book());
798
799
800Objects can contain other objects
801ex:
802
803 Book.prototype = {
804 ISBN: "",
805 Length: -1,
806 genre: "",
807 covering: "",
808 author: new Author(),
809 currentPage: 0,
810 title: "",
811 …
812 }
813
814 function Author(){
815 }
816
817 function Author(firstName, lastName, gender) {
818 this.firstName = firstName;
819 this.lastName = lastName;
820 this.gender = gender;
821 }
822
823 Author.prototype = {
824 firstName:"",
825 lastName:"",
826 gender:"",
827 BookCount: 0
828 }
829
830 var books = new Array(new Book(),
831 new Book("First Edition",350, new Author("Random","Author","M"))
832 );
833
834
835
836Implementing inheritance
837
838
839Creating a derived book object
840ex:
841
842 var popupBook = Object.create(Book.protoType,{ hasSound: {value:true},
843 showPopUp:{ value: function showPop() {
844 //do logic to show a popup
845 }
846 }
847 });
848
849
850Object.create
851 takes two parameters, the object you want to create and a list of property descriptors
852
853ex:
854
855 function PopUpBook() {
856 Book.call(this);
857 }
858
859 PopUpBook.prototype = Book.prototype;
860 PopUpBook.prototype.hasSound = false;
861 PopUpBook.prototype.showPopUp = function ShowPop() { };
862
863
864
865
866
867Conditionals in expressions
868
869===
870 Evalutes if the value and underlying data type are equal, returns true/false for every element
871
872
873
874Advanced array methods
875
876
877every
878 test if any array element meets the condition
879
880ex:
881
882 var evenNumbers = new Array(0, 2, 4, 6, 8, 9, 10, 12);
883 var allEven = evenNumbers.every(evenNumberCheck, this);
884
885 if (allEven) {
886 …
887 } else {
888 …
889 }
890
891 function evenNumberCheck(value, index, array) {
892 return (value % 2) == 0;
893 }
894
895
896some
897 returns true if a single element meets the condition
898
899ex:
900
901 var evenNumbers = new Array(0, 2, 4, 6, 8, 9, 10, 12);
902 var allEven = evenNumbers.some(evenNumberCheck, evenNumbers);
903
904 if (allEven) {
905 …
906 }
907 else {
908 …
909 }
910
911 function evenNumberCheck(value, index, array) {
912 return (value % 2) == 0;
913 }
914
915
916
917filter
918 Removes items based on processing in a callback function
919 Returns a new array containg elements that returned true
920
921ex:
922
923 var evenNumbers = new Array(0, 2, 4, 6, 8, 9, 10, 12);
924 var allEven = evenNumbers.filter(evenNumberCheck, evenNumbers);
925 //work with the even numbers....
926
927 function evenNumberCheck(value, index, array) {
928 return (value % 2) == 0;
929 }
930
931
932
933ex:
934
935 var age = prompt('Enter age', '');
936 if(isNaN(age)){
937 age = 0;
938 alert('You need to enter a valid number');
939 }
940
941
942Import from other style sheet
943ex:
944
945 @charset 'UTF-8';
946 @import url('/Content/header.css');
947 @import url('/Content/menu.css');
948 @import url('/Content/sidebar.css');
949 @import url('/Content/mainContent.css');
950 @import url('/Content/footer.css');
951
952 body {
953 background-color: white;
954 color: gray;
955 }
956
957
958
959Importing fonts
960ex:
961
962 @font-face {
963 font-family: myFont;
964 src: url('Fancy_Light.ttf'),
965 url('Fancy_Light.eot'); /* IE9 */
966 }
967
968
969Creating an id selector
970An id selector is based on the id of the element. To set the style on a single button, you can
971assign an id to the button and then specify the id as the selector, prefixed with the hash (#)
972symbol. The following example sets the style on an element whose id is btnSave.
973
974#btnSave {
975 background-color: white;
976 color: gray;
977}
978
979
980Creating a class selector
981A class selector is a style with a class name of your choice, prefixed with the period (.) symbol.
982This is also called a named style. The class name can be assigned to any element through the
983class attribute. In the following example, a style is created with a class name of myStyle.
984
985.myStyle {
986 background-color: white;
987 color: gray;
988}
989
990
991
992JQuery event listener:
993ex: $('#btnSubmit').on('click', myFunction);
994
995
996
997
998Required Validation
999ex: <input type="text" name="comment" required="required"/>
1000
1001
1002
1003Url validation
1004ex: <input type="url" name="website" required="required" pattern="https?://.+" />
1005
1006Number validation
1007ex: <input type="number" name="age" min="18" max="99" value="30" required="required" />
1008
1009
1010
1011XMLHttpRequest
1012ex:
1013
1014 var xmlhttp=new XMLHttpRequest();
1015 xmlhttp.open("GET","/addition?x=5&y=10",false);
1016 xmlhttp.send();
1017 var xmlDoc=xmlhttp.responseXML;
1018
1019
1020ex.2:
1021
1022 $(document).ready(function () {
1023 $('#btnAdd').on('click', addNumbers)
1024 });
1025
1026 function addNumbers() {
1027 var x = document.getElementById('x').value;
1028 var y = document.getElementById('y').value;
1029 var result = document.getElementById('result');
1030 var xmlhttp = new XMLHttpRequest();
1031 xmlhttp.open("GET", "/addition?x=" + x + "&y=" + y , false);
1032 xmlhttp.send();
1033 var jsonObject = JSON.parse(xmlhttp.response);
1034 result.innerHTML = jsonObject.result;
1035 }
1036
1037
1038
1039
1040ex.3:
1041
1042 function addNumbers() {
1043 var x = document.getElementById('x').value;
1044 var y = document.getElementById('y').value;
1045 var result = document.getElementById('result');
1046 var xmlhttp = new XMLHttpRequest();
1047 xmlhttp.onreadystatechange = function () {
1048 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
1049 var jsonObject = JSON.parse(xmlhttp.response);
1050 result.innerHTML = jsonObject.result;
1051 }
1052 }
1053
1054 xmlhttp.open("GET", "/addition?x=" + x + "&y=" + y, true);
1055 xmlhttp.send();
1056 }
1057
1058readyState codes
1059 0 Uninitialized The open method has not been called yet.
1060 1 Loading The send method has not been called yet.
1061 2 Loaded The send method has been called; headers and status are available.
1062 3 Interactive Downloading; the response properties hold the partial data.
1063 4 Completed All operations are finished.
1064
1065
1066
1067Storing complex objects
1068ex:
1069
1070var person = { firstName: 'Glenn', lastName: 'Johnson' };
1071localStorage.setItem('glenn', JSON.stringify(person));
1072
1073
1074Loading complex object
1075ex: var person = JSON.parse(localStorage.getItem('glenn'));
1076
1077
1078Cancelling event bubbling
1079ex: window.event.cancelBubble = true;
1080
1081
1082
1083Style sheet order
1084
10851. important User style sheet
10862. important Author style sheet
10873. Author style sheet
10884. User style sheet
10895. Browser’s built-in style sheet
1090
1091
1092
1093Object inheritance and override function
1094ex:
1095
1096 function parent(x) {
1097 this.id = x;
1098 }
1099
1100 parent.prototype (x) {
1101 id: 0,
1102 tostring = function () {}
1103 };
1104
1105 function derived (x) {
1106 parent.call(this, x);
1107
1108 }
1109
1110 derived.prototype = Object.create(parent.prototype, {
1111 name: {value:0},
1112 tostring: {value:function () {
1113 output.textcontent = this.id;}
1114 }
1115 });
1116
1117
1118
1119
1120encodeUri, decodeUri
1121 encodes/decodes to uri string
1122
1123ex.1:
1124
1125 var uri = "my test.asp?name=ståle&car=saab";
1126 var res = encodeURI(uri);
1127
1128 //Will output
1129 my%20test.asp?name=st%C3%A5le&car=saab
1130
1131
1132ex.2:
1133
1134 var uri = "my test.asp?name=ståle&car=saab";
1135 var enc = encodeURI(uri);
1136 var dec = decodeURI(enc);
1137
1138 //adds newline between encoded and decoded URI
1139 var res = enc + "<br>" + dec;
1140
1141 my%20test.asp?name=st%C3%A5le&car=saab // Encoded URI
1142 my test.asp?name=ståle&car=saab // Decoded URI
1143
1144
1145encode/decode UriComponent
1146
1147 encodeURI is intended for use on the full URI.
1148 encodeURIComponent is intended to be used on URI components that is any part that lies
1149 between separators (; / ? : @ & = + $ , #)
1150 in encodeURIComponent these separators are encoded also because they are regarded as text and
1151 not special characters