12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/learn_js/learn.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | //🔴
3 | //// VARIABLES (1) /////////////////////////
4 |
5 | // let x= 'hello'; //variable you can change and
6 | // x=10; // it's block scope.
7 |
8 | /* (2) */
9 |
10 | // const x='hello'; //variable you can not change
11 | //x=10; ⛔ ERROR // it's block scope.
12 |
13 |
14 | /* (3) */
15 |
16 | // var x='hello'; //variable you can change
17 | // x=10; //it's value and its function scope.
18 |
19 |
20 | //🔴
21 | //// if statement /////////////////////////
22 |
23 |
24 | // nothing change from c & c++ & java & ... (:
25 |
26 | //if ( condition)
27 | //{
28 | //
29 | //}
30 | // else if(condition)
31 | //{
32 | //
33 | //}
34 | //else
35 | //{
36 | //
37 | //}
38 |
39 | //🔴
40 | ////Switch statement /////////////////////////
41 |
42 | // switch(variable){
43 | // case condition that has relation with variable :
44 | // console.log(any thing);
45 | // break;
46 | // case two :
47 | // console.log(x);
48 | // break;
49 | // default :
50 | // console.log(x);
51 |
52 | // }
53 |
54 |
55 |
56 | //🔴
57 | //// special condition /////////////////////////
58 |
59 | // const age = 19;
60 |
61 | // age>= 18 ? console.log('you are 19 years old') :
62 | // console.log("you are not 19 years old ");
63 |
64 |
65 |
66 |
67 | //🔴
68 | //// Number & String method /////////////////////////
69 |
70 | // const str = '2004';
71 | // const num = 2004;
72 | // console.log(str);
73 | // console.log(Number(str));// -> convert str to num.
74 | //console.log(num);
75 | // console.log(String(num)); // -> convert num to str.
76 |
77 |
78 | //🔴
79 | //// JS With sum str & num /////////////////////////
80 |
81 | //let n = '1' + 1; // -> 11
82 | // if there string in the sum operation js
83 | //will convert every thing to string .
84 |
85 | /* (2) */
86 |
87 | //let a= '10'-'4'-'3'-'2' +5; // 15
88 |
89 | // if there string in the sub operation js
90 | //will convert every thing to num .
91 |
92 | // so 10 - 4 = 6 -> (1)
93 | // 6 - 3 = 3 ->(2)
94 | // 3 - 2 = 1 ->(3)
95 | // 1 + '5' = 15 -> the final answer.
96 |
97 | /* (3) */
98 |
99 | // let x= '5' * 10; // 50
100 | // x = '5' / 10 ; // 0.5
101 | // x= '5'/'10'; // 0.5
102 | // x= '5'*'10';
103 | // console.log(x); //50
104 |
105 |
106 |
107 |
108 | //🔴
109 | //// functions /////////////////////////
110 |
111 | // const x =function logger(parameters)
112 | // {
113 | // console.log("welcome to js");
114 | // return value; // return to const x
115 | // }
116 |
117 |
118 | /* Arrow function (2) */
119 | // let h=4, l=6, n=5;
120 | // const x = (a,b,c) =>(a+b+c) / 3;
121 |
122 | // console.log(x(h,l,n));
123 |
124 |
125 |
126 |
127 |
128 | //🔴
129 | //// Arrays methods /////////////////////////
130 |
131 | // const friends = [' gorge ', 'josef', 'ali'];
132 |
133 |
134 | // friends.push('garma');
135 | // ['gorge' , 'josef' , 'ali' , 'garma'] like vectors in c++ -> vector x ; x.push-back(10);
136 |
137 | // friends.length; // = 4 now //🍏
138 |
139 | // friends.unshift('john');//🍏
140 | // ['john','gorge','josef','ali']
141 |
142 | // friends.pop(); // delete last element//🍏
143 |
144 | // friends.shift(); // delete first element //🍏
145 |
146 | //friends.indexOf('ali'); // 2//🍏
147 |
148 | //friends.indexOf('bob'); // -1 not there
149 |
150 | //friends.includes('ali')
151 | // true//🍏
152 | //friends.includes('steven')
153 | // false
154 |
155 |
156 | //friends.slice(2)
157 | // remove first two elements
158 | //and store it in a new variable//🍏
159 |
160 |
161 |
162 | //friends.splice(2)
163 | // remove first two elements
164 | // from the main array delete it . //🍏
165 |
166 |
167 |
168 |
169 | //friends.reverse(); // ['ali','josef','george']
170 | //reverse all array //🍏
171 |
172 |
173 | //const friends2 = [ ' kero ' , 'hana' , 'fahd'];
174 | //friends.concat(friends2);
175 | // [' gorge ' , 'josef' , 'ali' ,
176 | //'fahd' , ' hana', 'kero',];//🍏
177 |
178 |
179 |
180 | //friends2.join('-');//🍏
181 | // kero-hana-fahd-
182 |
183 |
184 |
185 |
186 | // const arr = ['100','-125','50','12'];
187 |
188 | // console.log(arr.includes(150));
189 | // // includes method is when you looking for//🍏
190 | // // only one value and if it there return true
191 |
192 |
193 | // console.log(arr.some(mov => mov > 0 ));
194 | // here you can set move variable and it is value
195 | // is over than 0 if there any number over than
196 | // 0 in the array it will return true//🍏
197 |
198 |
199 | // console.log(arr.every(mov => mov > 0 ));
200 | // if every element in the array > 0//🍏
201 | // return true else return false
202 |
203 |
204 |
205 | // const arr2= [[1,2,3],[4,5,6],7,8];
206 | // console.log(arr2.flat());
207 | // it will remove any nested arrays and //🍏
208 | // flat all the array
209 |
210 |
211 | //try this
212 |
213 | // const arr3 = [1,[2,[3,4]],5];
214 | // console.log(arr3.flat());
215 | // output : [ 1, 2, [ 3, 4 ], 5 ]
216 | // because this method remove only one //🍏
217 | // nested array .
218 |
219 |
220 |
221 |
222 |
223 | //🔴
224 | //// Objects /////////////////////////
225 |
226 | // const Jonas =
227 | // {
228 |
229 | // firstName: 'girgis',
230 | // lastName : 'Elghattas',
231 | // birthYear: 2004 ,
232 |
233 | // calcAge : function(birthYear)
234 | // {
235 | // return 2023 - birthYear;
236 | // }
237 |
238 | // }
239 |
240 |
241 |
242 |
243 | //🔴
244 | //// Loops /////////////////////////
245 |
246 | // for(let rep =1 ; rep <=10 ; rep++)
247 | // {
248 | // console.log("you can do it !");
249 | // }
250 |
251 | // let x=1
252 | // while(x<=10)
253 | // {
254 | // console.log("you can do it !");
255 | // x++;
256 | // }
257 |
258 |
259 |
260 |
261 | // 🔴
262 | // // Random number /////////////////////////
263 |
264 | // let dice = Math.trunc(Math.random()*6)+1;
265 | // Mah.trunk give a integer digit no fractions
266 |
267 | // math.random() give any number between 0.000 to 1.000.
268 |
269 | //math.random() * 6 give number between 0.000 to 5.000
270 |
271 | //(math.random() * 6 ) + 1 give number between
272 | // 1.00000 to 6.000000
273 |
274 |
275 |
276 | //🔴
277 | //// MAP(FLAT MAP) | FILTER | REDUCE /////////////////////////
278 |
279 |
280 | /* MAP */
281 | // map returns a new array containing
282 | // the results of applying a n operation
283 | // on all original array elements
284 |
285 | /* flatMap */
286 | // it flat the answer after map it for
287 | // more information about flat go to
288 | // array methods
289 |
290 |
291 |
292 | /* FILTER */
293 | // filter return a new array containing
294 | // the array elements that passed
295 | // a specific test condition .
296 |
297 |
298 | /* REDUCE*/
299 | //reduce boils all array elements down to one
300 | //single value (adding elements together )
301 | //------------------------------------
302 |
303 | const movements =[200,450 ,-400 ,3000,-650 ,-100];
304 | // const eruTousd =2;
305 | // const movementsusd = movements.map(function(mov)
306 | // {
307 | // return mov * eruTousd; // OR//🍏
308 | // return 23;
309 | // });
310 | //OR
311 | // const movementsusd = movements.map(mov => mov*eruTousd);
312 | // console.log(movements);//🍏
313 | // console.log(movementsusd);
314 |
315 | // ANOTHER SOLUTION
316 |
317 | // const movementsusdfor = [];
318 | // for(const mov of movements)movementsusdfor.
319 | // push(mov * eruTousd);//🍏
320 | // console.log(movementsusdfor);
321 |
322 | /* FILTER */
323 |
324 | // const deposits = movements.filter(mov=> mov > 0);
325 | // console.log(deposits);//🍏
326 |
327 | //----ANOTHER SOLUTION
328 | // const depositsfor = [];//🍏
329 | // for(const mov of movements) if(mov>0)depositsfor.
330 | // push(mov);
331 | // console.log(depositsfor);
332 |
333 |
334 | /* REDUCE */
335 |
336 | const balance = movements.reduce(function
337 | (acc,cur,i,arr)
338 | {
339 | console.log('Iteration'+i+': '+acc);
340 | return acc+cur;//🍏
341 | },0 );
342 |
343 | console.log(balance);
344 |
345 |
346 | // ANOTHER SOLUTION---------//
347 |
348 | // let balance2 = 0;
349 | // for (const mov of movements ) balance2+= mov;
350 | // console.log(balance2);//🍏
351 |
352 |
353 |
354 |
355 |
356 | //🔴
357 | //// Sort the array /////////////////////////
358 |
359 | const num = [ 5 , 4 , 6 , 3 , 1 ,2];
360 |
361 | //----------------------------
362 | // i want from the smallest numbers //🍏
363 | //to be in first's place and the biggest
364 | //numbers be in the last's place so we do that
365 | //-----------------------------
366 |
367 |
368 | // num.sort( (a,b) =>
369 | // {
370 | // if (a>b) return -1;
371 | // else if (b>a) return 1;
372 | // });
373 | // console.log(num);
374 |
375 | // in sorting we loop over the array
376 | // with any to parameters in order that will
377 | // be A & B === index [0] & [1] or [2] [3]
378 | // whatever
379 |
380 | /* 🔥 And we have rule that said 🔥 */
381 |
382 |
383 | // if we return any number smaller tha 0
384 | // it will sort === A then B
385 | // and if we return any number
386 | // is bigger than 0 it will sort === B then A
387 |
388 |
389 | /* So what do you think the
390 | output will be of this code */
391 |
392 | // num.sort( (a,b) => //🍏
393 | // {
394 | // if (a>b) return -3; // any neg num
395 | // else if (b>a) return 12; // any pos num
396 | // });
397 | // console.log(num);
398 |
399 |
400 |
401 |
402 |
403 |
404 | //🔴
405 | //// checking num | math /////////////////////////
406 |
407 | /* checking if the value is number */
408 | //🍏
409 | // console.log( Number.isFinite('20')); // false
410 | // console.log( Number.isFinite(15)); // true
411 | // console.log( Number.isFinite(1/0));// false
412 |
413 |
414 | /* checking if the value is integer */
415 |
416 | //🍏
417 | // console.log( Number.isInteger('20')); // false
418 | // console.log( Number.isInteger(15)); // true
419 | // console.log( Number.isInteger(5.00)); // true
420 | // console.log( Number.isInteger(1/0));// false
421 |
422 |
423 |
424 | /* Maths methods */ //NAN-> not a number
425 |
426 | //🍏
427 |
428 | // console.log(Math.sqrt(25)); // 5
429 |
430 | // console.log(Math.max(5,10,45,2));// 45
431 |
432 | // console.log(Math.min(5,10,45,2));// 2
433 |
434 |
435 | // console.log(Math.min(5,'23px',45,2));// NAN
436 |
437 |
438 | // console.log(Math.PI * Number.
439 | //parseFloat('10px') **2);
440 | // use math pi to get the area of the circle
441 | // here R = 10 px;
442 |
443 |
444 | // console.log(Math.trunc(Math.random() * 6)+1);
445 | //🍏
446 | /* How it works */
447 | //math.trunc is to give a integer number
448 | // and we use then math.random to give a
449 | // random number from 0 to 1
450 | // then use * 6 to become the max value
451 | // can be from 0 to 6 but random will stop in 5
452 | // because random can not be the max value
453 | // that you set
454 | // then + 1 to be from 1 to 6 amd
455 | // that what dice game did .
456 |
457 | //🍏
458 | // console.log(Math.round(23.3));
459 | // // if the fraction part is from 0.0 to 0.4
460 | // // it give the lower number 23.3 become 23
461 | // console.log(Math.round(23.5));
462 | // // if the fraction part is from 0.5 to 0.9
463 | // // it give the higher number 23.5 become 24
464 |
465 |
466 |
467 |
468 |
469 | //🍏
470 | // console.log((2.758).toFixed(1)); // 2.8
471 | // console.log((2.758).toFixed(2)); // 2.76
472 | // console.log((2.758).toFixed(3)); // 2.758
473 |
474 |
475 |
476 | //🔴
477 | //// For EACH /////////////////////////
478 |
479 | // const array = ['el1', 'el2', 'el3', 'el4','el5'];
480 |
481 | // array.forEach(function(element, index, array) {
482 | // console.log(`Element: ${element}, Index: ${index}`);
483 | // });//🍏
484 |
485 |
486 |
487 | //forEach() that allows
488 | // you to iterate over the elements of an array
489 | // and perform a specified action for each element
490 | //The forEach() method takes a callback function
491 | // as an argument and executes that function
492 | // once for each element in the array.The callback
493 | // function can take up to three arguments:
494 | // the current element being processed,the index
495 | // of the current element, and the array itself.
496 |
497 | // const array2 =[1,2,3,4,5];
498 | // array2.forEach((x) => x += 10);
499 | // console.log(array2);
500 | // 11 12 13 14 15 //🍏
501 |
502 |
503 |
504 |
505 |
506 | //🔴
507 | //// Date & Time /////////////////////////
508 |
509 |
510 | // const timeNow = new Date();
511 | // console.log(timeNow);//🍏
512 |
513 |
514 |
515 | // const now = new Date();
516 | // console.log(now);
517 | // const day = now.getDate();
518 | // console.log(day);
519 | // const month= now.getMonth();
520 | // console.log(month);//🍏
521 | // const year = now.getFullYear();
522 | // console.log(year);
523 | // const hour = now.getHours();
524 | // console.log(hour);
525 | // const min = now.getMinutes();
526 | // console.log(min);
527 |
528 |
529 | // const future = new Date();
530 | // future.setFullYear(2040);
531 | // console.log(future);//🍏
532 |
533 |
534 | // const future = new Date(2037 , 10 , 19, 15 ,23);
535 | // console.log(future);//🍏
536 |
537 | //🔴🔴🔴🔴
538 | //labelDate.textContent = new Intl.DateTimeFormat('en-GB').format(now);
539 |
540 |
541 | // you can also include to it the hours and minutes
542 | // by using new Intl.DateTimeFormat('en-GB' , option) that and pass to the function the obj you want like that
543 |
544 | // const option = {
545 | // hour:"numeric",
546 | // minute:"numeric",
547 | // day:"numeric",
548 | // month:"numeric"
549 | // };
550 |
551 |
552 | // you can add more to get the full date as you want and
553 |
554 | // you can call it like that
555 |
556 | //Intl.DateTimeFormat(locale , option)
557 |
558 | //const locale = navigator.language;
559 | //4/14/2024, 7:32 PM will be like that
560 |
561 |
562 | // and there is also number format
563 |
564 | //🔴🔴🔴 to know more about en-GB check (iso language code table ) or go to 🔥🔥 www.lingoes.net🔥🔥
565 | //🔴🔴🔴
566 |
567 | /* DO A SPECIFIC CODE IN SPECIFIC TIME */
568 |
569 | // setTimeout( () => console.log('your pizza has arrived 🍕')
570 |
571 | // , 5000); // after 5 second will work
572 | // console.log('waiting...');
573 |
574 |
575 |
576 |
577 |
578 |
579 |
580 |
581 |
582 |
583 |
584 |
585 | //🔴🔴🔴🔴🔴 very important (DOM)document
586 | // object model
587 |
588 | //// HOW to selecting creating ///////////////////////
589 | //// and deleting elements ///////////////////////
590 |
591 |
592 | // document.querySelector('.header'); // class
593 | // document.querySelector('#header--1'); // id
594 | // document.querySelector('h3'); // tag
595 |
596 | // these methods select the first
597 | // element with the class or the tag name
598 | // in all html file
599 | // but also we know that we can't
600 | // but two same name to different id's
601 | // there is only one id with that name
602 | //-----------------------------
603 |
604 | // document.querySelectorAll('.section');
605 | // document.querySelectorAll('div');
606 | // this will select all classes = 'section'
607 | // or tag in the hole html file
608 | //-------------------------------
609 |
610 |
611 | // document.getElementById('section--1');
612 | //document.getElementsByTagName('h1');
613 | // take the element with specific id or tag name.
614 | //-----------------------------------
615 |
616 |
617 | /* Style */
618 |
619 | // //rgb(255,255,255)
620 | // const randomInt = (min,max)=>
621 | // Math.floor(Math.random()*(max-min+1)+min);
622 |
623 | // const randomColor = ( )=>
624 | // `rgb(${randomInt(0, 255)},${randomInt(0,255)}
625 | // ,${randomInt(0,255)})`;
626 | // console.log(randomColor(0, 255));
627 |
628 | // document.querySelector('.nav__link')
629 | // .addEventListener('click', function(e)
630 | // {
631 | // this.style.backgroundColor= randomColor();
632 | // });
633 | // document.querySelector('.nav__links')
634 | // .addEventListener('click', function(e)
635 | // {
636 | // this.style.backgroundColor= randomColor();
637 | // // // // // });
638 | // document.querySelector('.nav')
639 | // .addEventListener('click', function(e)
640 | // {
641 | // this.style.backgroundColor= randomColor();
642 | // });
643 |
644 | // });
645 |
646 | // CREATE ELEMENT
647 |
648 | // const message =document.querySelector('div');
649 | // message.classList.add('cookie-message');
650 |
651 | //🔴🔴🔴🔴🔴 smooth section transition
652 |
653 | // document.querySelectorAll('.nav__link').forEach
654 | // (function(el)
655 | // {
656 | // el.addEventListener('click',function(e)
657 | // {
658 | // e.preventDefault();
659 | // const id = this.getAttribute('href');
660 | // document.querySelector(id).scrollIntoView({
661 |
662 |
663 | // behavior:'smooth'
664 |
665 |
666 | // });
667 |
668 | /*OR THE BEST SOLUTION */
669 |
670 |
671 | // document.querySelector('.nav__links').addEventListener(
672 | // 'click',function()
673 | // {
674 | // if(e.target.classList.contains('nav__link'))
675 | // {
676 |
677 |
678 | // const id =this.getAttribute('href');
679 | // console.log(id);
680 | // document.querySelector(id).scrollIntoView({
681 | // behavior:'smooth'
682 | // });
683 |
684 | // }
685 |
686 |
687 |
688 |
689 |
690 |
691 | // }
692 | // );
693 |
694 |
695 |
696 |
697 | //🔴🔴🔴🔴🔴 GET into parent
698 | //element and chose the child and more...
699 |
700 |
701 | // console.log(h1.parentNode);
702 | // console.log(h1.childNode);
703 | // it give you all information about
704 | // parents and childs and how to get into them.
705 |
706 | /*--------------------------------- */
707 | // h1.queryselectorAll('.h2');
708 | //you get into h1 and chose all h2
709 | // into it
710 |
711 | /*--------------------------------- */
712 | // h1.firstElementChild.style.color = 'white'
713 | // h1.lastElementChild.style.color = 'white'
714 |
715 | //select the only first child of
716 | //an h1 parent element . or last child
717 | // and change it,s color to white
718 |
719 | /*--------------------------------- */
720 |
721 | // h1.closest('.header').style.background = 'blue';
722 |
723 | //it,s will select the nearest parent element
724 | //that have child call h1.
725 |
726 |
727 | /*--------------------------------- */
728 |
729 |
730 |
731 | // console.log(h1.previousElementSibling);
732 | // //// any previous element after h1 element in the
733 | // //same scope(parent) like h2 or div;
734 | // console.log(h1.nextSibling);
735 | // // any next txt after h1 element in the
736 | // //same scope(parent);
737 | // console.log(h1.previousSibling);
738 | // // any previous txt or div after h1 element in the
739 | // //same scope(parent);
740 | // console.log(h1.nextElementSibling);
741 |
742 |
743 |
744 | /*--------------------------------- */
745 |
746 |
747 |
748 |
749 |
750 |
751 |
752 |
753 |
754 | //🔴🔴🔴🔴🔴
755 | //🔴🔴🔴🔴🔴
756 | //🔴🔴🔴🔴🔴
757 | // A great effect with js you will use very much
758 |
759 | // nav.addeventlistener('mouseover',function(e){
760 |
761 | // if(e.target.classList.contains('nav__link'))
762 | // {
763 | // const clicked = e.target;
764 | // const siblings = link.closest('.nav').querySelectorAll
765 | // ('.nav__link');
766 | // const logo = link.closest('.nav').querySelector('img');
767 | // siblings.forEach(el => {
768 | // if(el!==link)
769 | // {
770 | // el.style.opacity=0.5;
771 | // }
772 | // logo.style.opacity = 0.5;
773 | // });
774 | // }
775 |
776 | // });
777 |
778 |
779 |
780 | // });
781 |
782 |
783 |
784 | // nav.addEventListener('mouseout',function(e)
785 | // {
786 | // if(e.target.classList.contains('nav__link'))
787 | // {
788 | // const clicked = e.target;
789 | // const siblings = link.closest('.nav').querySelectorAll
790 | // ('.nav__link');
791 | // const logo = link.closest('.nav').querySelector('img');
792 | // siblings.forEach(el => {
793 | // if(el!==link)
794 | // {
795 | // el.style.opacity=1;
796 | // }
797 | // logo.style.opacity = 1;
798 | // });
799 | // }
800 | // });
801 |
802 |
803 | //-----------------------------------
804 | //🔴🔴🔴🔴🔴 THE OOP IN JS
805 | //-----------------------------------
806 |
807 | // 'use strict';
808 |
809 |
810 | // const person = function(firstName , birthYear)
811 | // {
812 | // //Instance properties
813 | // this.name = firstName;
814 | // this.born = birthYear;
815 |
816 | // //This is bad practice because of bad performance
817 | // // this.calcAge = function ()
818 | // // {
819 | // // console.log(2023 - this.birthYear);
820 | // // }
821 |
822 | // };
823 |
824 |
825 |
826 |
827 | //-------------------------------------
828 | //1. New {} is created
829 | //2. Function is called , this = {}
830 | //3.{} Linked to prototype
831 | //4. function automatically return {}
832 | //-------------------------------------
833 |
834 | // const girgis = new person('Girgis',2004);
835 | // // console.log(girgis);
836 | // // const ali = new person('Ali',2003);
837 | // // console.log(ali);
838 | // // console.log(girgis instanceof person);
839 |
840 | // //-----------------------------------------
841 |
842 | // console.log(person.prototype); //constructor
843 |
844 | // person.prototype.calcAge= function()
845 | // {
846 | // console.log(2023 - this.birthYear);
847 | // };
848 |
849 | // girgis.calcAge();
850 |
851 | //---------------------------------------
852 | // //Class expression
853 | // const personCl = class
854 | // {
855 |
856 | // }
857 | //---------------------------------------
858 |
859 |
860 | //Class declaration
861 |
862 | // class personCl
863 | // {
864 |
865 | // constructor(firstName,birthYear)
866 | // {
867 | // this.firstName = firstName;
868 | // this.birthYear = birthYear;
869 | // }
870 | // calcAge()
871 | // {
872 | // console.log(2023 - this.birthYear);
873 | // }
874 |
875 | // }
876 | // const jessica = new personCl('jessica',2001);
877 |
878 | // console.log(jessica);
879 | // jessica.calcAge();
880 | // console.log(jessica.__proto__ === personCl.prototype);
881 |
882 | // personCl.prototype.greet = function()
883 | // {
884 |
885 | // console.log(`Hey ! ${this.firstName}`);
886 |
887 | // }
888 |
889 |
890 | // jessica.greet();
891 |
892 | //--------------------------------------------
893 |
894 | // 1. Classes are not hoisted
895 | // hoisted mean we can use them before declare
896 | // them in our code.
897 |
898 | // 2. Class are first-class citizen
899 | // we can pass them into function and call
900 | // back them from function
901 |
902 |
903 |
904 | // 3. Class are executed in strict mode always.
905 |
906 | //--------------------------------------------
907 |
908 |
909 | // const account = {
910 | // owner : 'girgis',
911 | // movements : [200,530,120,300],
912 |
913 | // get latest()
914 | // {
915 | // return this.movements.slice(-1).pop();
916 | // },
917 |
918 | // set latest(mov)
919 | // {
920 | // this.movements.push(mov);
921 | // }
922 |
923 |
924 |
925 | // }
926 | // console.log(account.latest);
927 |
928 | // account.latest = 50;
929 | // console.log(account.movements);
930 |
931 |
932 |
933 |
934 | // class car { constructor(make,speed)
935 | // {
936 |
937 | // this.make=make;
938 | // this.speed = speed;
939 | // }
940 | // accelerate()
941 | // {
942 | // this.speed +=10;
943 | // console.log(`${this.make} is going at ${this.speed} km/h`);
944 | // }
945 | // brake()
946 | // {
947 | // this.speed -=5;
948 | // console.log(`${this.make} is going at ${this.speed}km/h`);
949 | // }
950 | // get speedus()
951 | // {
952 | // return this.speed/1.6;
953 | // }
954 | // set speedus(speed)
955 | // {
956 | // this.speed = speed*1.6;
957 | // }
958 | // }
959 | // const ford= new car('ford',120);
960 | // console.log(ford.speedus);
961 | // ford.accelerate();
962 | // ford.accelerate();
963 | // ford.brake();
964 |
965 | // ford.speedus = 50;
966 | // console.log(ford);
967 |
968 | //-----------------------------------
969 | //🔴🔴🔴🔴🔴 advancedDom
970 | //-----------------------------------
971 |
972 | // if you want to add style to all css page
973 | // you will need to select document.docimentElement
974 |
975 |
976 | // add element at first child of header(prepend) or at last element(apend)
977 | //header.prepend(string)
978 | //header.apend(string)
979 |
980 | //but you can add only once if you want to add it multiple times
981 | // will need to clone node first .colneNode(string)
982 |
983 | //header.after(string) add before header
984 | //header.before(String) add after header
985 |
986 |
987 |
988 | //getComputedStyle() is what in the css sheet and you can not get
989 | // the style from the normal style.color for example
990 |
991 |
992 | // data is a special attribute come with class and it
993 | // set like that (data-lablablaaa = value) to set it
994 |
995 |
996 |
997 | // e.target() the item that event happen on it (realy the element)
998 | // e.currentTarget() the element where the event is atatch to
999 | // not always be the realy element clicked may be the parent
1000 | // or what ever the event atatch to and is === this key word
1001 |
1002 | // stop event propagation mean that stop when i clicked the child
1003 | // element the parent element effect USE
1004 | // e.stopPropagation();
1005 |
1006 | // if tou have event on child and parent and click on child
1007 | // the parent also will active the event on it
1008 |
1009 |
1010 |
1011 | //-----------------------------------
1012 | //🔴🔴🔴🔴🔴 eventDelegation
1013 | //-----------------------------------
1014 |
1015 |
1016 | /* 🔴 addEventListener (True)(false)🔴 ThirdParameter
1017 |
1018 | if you set the third parameter on add event listener to
1019 | true (capturing phase) will start from the DOM->child element
1020 | the event will happen on the parent first then the child
1021 | if you set to false(defult) (bubbling phase) the event
1022 | will start listen from child->DOM mean that the event will
1023 | happen on the child first then the parent
1024 | */
1025 |
1026 |
1027 | // 🔴🔴very very important domTraversing 🔴🔴
1028 |
1029 | /*
1030 | ////🔴 select children🔴 ////
1031 | h1.children;👇
1032 | return only child tags inside the parent h1 in array
1033 | h1.firstElementChild;
1034 | h1.lastElementChild;
1035 |
1036 | ////🔴 select parents🔴 ////
1037 |
1038 | h1.parentElement
1039 | the direct parent element tag!!
1040 |
1041 | h1.closest(className);👇🔥
1042 | will search for the closest parent element that have
1043 | this className and select it the (reverse of queryselector)
1044 |
1045 | ////🔴 select sibling🔴 ////
1046 | h1.previousElementSibling
1047 | h1.nextElementSibling
1048 |
1049 |
1050 | */
1051 |
1052 |
1053 |
1054 | ////🔴🔴 localStorage🔴🔴 ////
1055 |
1056 | /*
1057 | 🔴 Set Item🔴
1058 | localStorage.setItem('key', string);👇🔥
1059 | this will store string in the url so if you get out the page
1060 | and return the data will still there
1061 | ----------------------------------🔥
1062 | if you have object the localStorage only take string
1063 | so you need to convert obj->str by using
1064 | JSON.stringify(the obj);
1065 | ----------------------------------🔥
1066 | if you set localStorage multiple times to the same key
1067 | it will make array of strings(objects) by the order
1068 | you enter them
1069 |
1070 | 🔴Get Item🔴
1071 |
1072 | localStorage.getItem('key');👇🔥
1073 | will return the string you stored on it but if you stored
1074 | obj and want to return the obj str->obj
1075 | use JSON.parse(the string)
1076 | ----------------------------------🔥
1077 | Dont use for big data because its blocking API slow down
1078 | your application
1079 | ----------------------------------🔥
1080 | 🔴remove Item🔴
1081 |
1082 | localStorage.removeItem('key');
1083 | remove the item from the local storage if you dont
1084 | want to remove but set it to empty you can use
1085 | lacalStorage.setItem('the same key' , "");
1086 | will not delete it but make it empty
1087 | */
1088 |
1089 | ////🔴🔴 AsyncJs🔴🔴 ////
1090 |
1091 | /*
1092 | 🔴call Api data by name 🔴
1093 | const request = new XMLHttpRequest();
1094 | request.open('GET', 'https://restcountries.com/v3.1/name/egypt');
1095 | request.send();
1096 | request.addEventListener('load', ()=> console.log(this.responseText););
1097 |
1098 |
1099 | 🔴 Promise 🔴
1100 |
1101 | fetch build a promise for us but what is promise
1102 |
1103 | a promise is a container for data that will be send
1104 | in the future like respond will come from APi
1105 | we do not need to use events to handle asynchronous
1106 | function
1107 |
1108 | there is two steps during make promises
1109 | pending and settled
1110 | pending mean it wait for be use or to recive data
1111 | settled is after promise been used will return two
1112 | state fulfilled mean that succefully get the data
1113 | rejected mean that there is error happen when promis
1114 | try to get the data
1115 |
1116 |
1117 | fetch('API endpoint link').then(function(response))
1118 | (.then) is a function that get function
1119 | the function that then get can recive the data that
1120 | the api send to us we always call it the respond
1121 | from the api and with this data we can do any thing
1122 | so the respond itself is obj have the data but you
1123 | need to convert it to json like that response.json()
1124 | and return it to be another promise to handele by
1125 | then and use the data
1126 |
1127 | dont ask me why we create two promises that the way
1128 | javascript creator do it 🤷
1129 |
1130 | fetch(Api).then(function(reponse){return respnse.json()})
1131 | .then(function(data){console.log(data)});
1132 |
1133 | note that .then take another function to catch the errors
1134 | fetch((respond)=> respond ).then(()=> , (erorr)=>return erorr);
1135 | but there is a beter way to do that by
1136 | use catch method on the end of all then program
1137 |
1138 |
1139 |
1140 |
1141 | 🔴 async key word 🔴
1142 | async you can but it before the function and it will
1143 | convert the function to async function and will return
1144 | promise after this function end
1145 | inside async function we can have one or more
1146 | await and what await do is basicaly wait for
1147 | the fetch or any thing to finsh before send the
1148 | promise back
1149 |
1150 |
1151 | await Promise.all([promise , promise , promise])
1152 | can take multiple promises and store it in array
1153 | of obj
1154 |
1155 | you have await Promise.race([Api url or promise , promise , promise ])
1156 | that will return one promise the fastest one respond
1157 |
1158 | Promise.allSettled([p , p , p ])
1159 | will return all the promise the only change between
1160 | the all and allSettled if any promise in the all
1161 | reject it will not return it but in allSttled will
1162 | return the rejected promises
1163 |
1164 | 🔴 use async await instead of fetch().then() 🔴
1165 | ------------------------------------------------
1166 | const getAdvice = async function () {
1167 | const res = await fetch("API");
1168 | const data = await res.json();
1169 | };
1170 | -------------------------------------------------
1171 | fetch(Api).then(function(reponse){return respnse.json()})
1172 | .then(function(data){console.log(data)});
1173 | -------------------------------------------------
1174 |
1175 | */
1176 | /*
1177 | 🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴
1178 | 🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴
1179 | 🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴
1180 | 🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴
1181 | 👇👇😄REACT😄👇👇
1182 | */
1183 | // npx create-react-app@5 projectName
1184 | // @5 mean version five and that not nesseary
1185 |
1186 | /*
1187 |
1188 | the is components and props in react
1189 | components like this 👇
1190 | function Pizza(props)
1191 | {
1192 | return (<>
1193 |
1194 |
1195 |
{props.name}
1196 |
1197 | )
1198 | }
1199 | every thing in react is component actualy
1200 | now you can pass (props) like that or like that 👇
1201 | function Pizza({name1 , name2 , ...etc})
1202 | and use these names instead of props.theName
1203 |
1204 |
1205 | 🔥props are just an object 🔥
1206 | has string or any thing
1207 | const obj = { value:'welcome'}; like this
1208 |
1209 | 🔴controll eleement be like that 🔴
1210 |