├── Nested-loops.js
├── variables.js
├── shift-unshift.js
├── Array-Includes.js
├── Function-with-parameters.js
├── alert.js
├── For-loop.js
├── datatype.js
├── js-commnets.js
├── if-statment.js
├── confirm-box.js
├── js-in-console.js
├── if-else.js
├── let&const.js
├── Conditional-ternary-operator.js
├── break-continue.js
├── while-loop.js
├── Array-FIlter.js
├── Sort-Reverse.js
├── Array-method-2.js
├── forEachLoop.js
├── nested-loop.js
├── Is-array.js
├── Even-Odd-with-loops.js
├── Htmltags-in-js.html
├── JS-Function.js
├── pop-push.js
├── do-while.js
├── Arrays.js
├── map-method().js
├── Array-Find-FindIndex.js
├── Function-with-return-stat.js
├── JS-local-Global-var.js
├── Objects-2.js
├── Array-Of-Objects.js
├── for-in-loop.js
├── if-else-if.js
├── assignment-operator.js
├── modify-delete-array.js
├── const-var-with-array-obj.js
├── Array-Method.js
├── Some-Every.js
├── arithimatic.js
├── slice-splice.js
├── Switch-case.js
├── concat-join.js
├── Multidemensional-array.js
├── Array-index.js
├── Comparision-Operator.js
├── nested-loops-2.js
├── Date-method.js
├── Strings-methods-2.js
├── Objects.js
├── Number-Method.js
├── Strings-methods.js
├── README.md
├── Math-Methods.js
└── Js-Events.html


/Nested-loops.js:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/variables.js:
--------------------------------------------------------------------------------
1 | <script>
2 |   var a = 10;
3 |   var b = 12;
4 |   vae c = a+ b;
5 |   document.write(c);
6 | </script>
7 | 


--------------------------------------------------------------------------------
/shift-unshift.js:
--------------------------------------------------------------------------------
1 | let ary = ["Haris","Shakir","Wajid","Anas"];
2 | console.log(ary);
3 | 
4 | ary.shift();
5 | console.log(ary);
6 | 
7 | ary.unshift("Anum");
8 | console.log(ary);
9 | 


--------------------------------------------------------------------------------
/Array-Includes.js:
--------------------------------------------------------------------------------
1 | // Array includes check that the element you give it in the include function is present in the aray or not.
2 | 
3 | var a = ["Sanjay", "Aman", "Rehman", "Rahul"];
4 | var b = a.includes("Aman");
5 | console.log(b)
6 | 


--------------------------------------------------------------------------------
/Function-with-parameters.js:
--------------------------------------------------------------------------------
 1 | function sum(a,b){
 2 |     console.log(a+b);
 3 | }
 4 | sum(10,20);
 5 | 
 6 | function name(fname,lname){
 7 |     console.log("Welcome " + fname + lname + " have a nice day");
 8 | }
 9 | name("Muhammad","Shakir");
10 | 


--------------------------------------------------------------------------------
/alert.js:
--------------------------------------------------------------------------------
 1 | // alert box are used for showing some messages 
 2 | 
 3 | let x = 19;
 4 | let y = 20;
 5 | if ( x > y ){
 6 |     alert("yes " + x + " is greater than " + y);
 7 | }
 8 | else{
 9 |     alert("no " + x + " is not greator than " + y);
10 | }
11 | 


--------------------------------------------------------------------------------
/For-loop.js:
--------------------------------------------------------------------------------
 1 | // print talble of 2 using while loop.
 2 | 
 3 | for(let a = 0; a <= 20; a = a +2){
 4 |     console.log(a);
 5 | }
 6 | 
 7 | 
 8 | // print the reverse if table two
 9 | 
10 | for(let a = 20; a >= 1; a = a - 2){
11 |     console.log(a)
12 | }
13 | 
14 | 


--------------------------------------------------------------------------------
/datatype.js:
--------------------------------------------------------------------------------
 1 | let x = "Muhammad Shakir";
 2 |     x = 32;
 3 |     x = true;
 4 |     x = false;
 5 |     x = ["html" , "css" , "javascript"];
 6 |     x = { first : "Muhammad" , last : "Shakir"};
 7 |     x = undefined;
 8 |     x ;
 9 |  
10 |     console.log(x);
11 |     console.log(typeof x);
12 | 


--------------------------------------------------------------------------------
/js-commnets.js:
--------------------------------------------------------------------------------
1 | 
2 |     <script>
3 |         document.write("Hello <br>") // this will print a hello on web browser.
4 |         document.write("This is Muhammad Shakir")
5 |          /* 
6 |                 This will print This is Muhammad Shakir on the web browser.
7 |         */
8 |     </script>
9 | 


--------------------------------------------------------------------------------
/if-statment.js:
--------------------------------------------------------------------------------
 1 | // if is a block of code that runs when a particular condition becomes true.
 2 | 
 3 | 
 4 | let today = "monday";
 5 | if(today === "monday"){
 6 |     console.log("Game Development Class");
 7 | }
 8 | 
 9 | let x = 21;
10 | let y = 22;
11 | if(x < y){
12 |     console.log(typeof x);
13 | }
14 | 
15 | 


--------------------------------------------------------------------------------
/confirm-box.js:
--------------------------------------------------------------------------------
 1 | ///Confrim box are used for ask some type of questions fom users and on you have to answer it in yes or no.
 2 | // on every yes or no you can procede any program further.
 3 | 
 4 | let b = confirm("Do you know muhammad shakir-dev?");
 5 | if(b){
 6 |     alert("wohooo Thanks.")
 7 | }
 8 | else{
 9 |     alert("Go and google it noww...!!!")
10 | }
11 | 


--------------------------------------------------------------------------------
/js-in-console.js:
--------------------------------------------------------------------------------
 1 |      var x = 50; 
 2 |         console.log(x);
 3 | 
 4 |         console.log([1,2,3]);
 5 | 
 6 |         console.table([1, 2, 3]);
 7 | 
 8 |         console.error("Something went wrong."); 
 9 | 
10 |         console.time("Test");
11 |         console.warn("This is just warning");
12 |         console.timeEnd("Test");
13 |         //console.clear();
14 | 


--------------------------------------------------------------------------------
/if-else.js:
--------------------------------------------------------------------------------
 1 | // if is a block of code that runs when a particular condition becomes trye.
 2 | // else is also a block of code that runs when an if statment becomes false.
 3 | 
 4 | let today = "monday";
 5 | if(today === "monday"){
 6 |     console.log("Game Development Class");
 7 | }
 8 | 
 9 | let x = 21;
10 | let y = 22;
11 | if(x < y){
12 |     console.log(typeof x);
13 | }
14 | 


--------------------------------------------------------------------------------
/let&const.js:
--------------------------------------------------------------------------------
 1 | <script>
 2 |      
 3 |      let a = "Muhammad Shakir";
 4 |          a = " Muhammad Shakir-dev ";
 5 |          document.write(a);   // output is Muhammad Shakir-dev
 6 |          
 7 |       const b = "5th Feburary";
 8 |             b = "6th";
 9 |             document.write(b)    // error becuase const varibles are never decleared again
10 |  
11 | </script>
12 | 


--------------------------------------------------------------------------------
/Conditional-ternary-operator.js:
--------------------------------------------------------------------------------
1 | // Work same as if else condition but a little bit different from that like in conditional ternary we cannot write more than one conditions and there
2 | // syntax are totally different.
3 | 
4 | let today = "Monday";
5 | let className;
6 | className = "Yes it is" + " " + (today === "Monday" ? "True" : "False") + " today is game class";
7 | console.log(className);
8 | 


--------------------------------------------------------------------------------
/break-continue.js:
--------------------------------------------------------------------------------
 1 | for(let a = 1; a <=10; a++){
 2 |     
 3 |         if(a == 3){
 4 |             console.log("Number " + a + " is Gemini lucky number");
 5 |             continue;
 6 |         } 
 7 |         if(a == 5){
 8 |             console.log("Number " + a + " is Aquaris lucky number");
 9 |             continue;
10 |         }
11 |         
12 |     console.log("Number " + a );
13 | }
14 | 


--------------------------------------------------------------------------------
/while-loop.js:
--------------------------------------------------------------------------------
 1 | // loops helps you to print multiple things at once with a single block of code.
 2 | 
 3 | // print talble of 2 using while loop.
 4 | 
 5 | let start = 0;
 6 | while(start <= 20){
 7 |     console.log(start) 
 8 |     start =  start + 2;
 9 | }
10 | 
11 | // print the reverse if table two
12 | 
13 | let a = 20;
14 | while(a >= 1){
15 |     console.log(a);
16 |     a = a - 2;
17 | }
18 | 


--------------------------------------------------------------------------------
/Array-FIlter.js:
--------------------------------------------------------------------------------
 1 | // let's practice Array Filter.
 2 | // Arry FIlter works for all values of array.
 3 | // Array Filter checks the condition and make a spearters of all the values that satifies the condition.
 4 | 
 5 | let ary = [10,12,15,16,17,19,20,25,29,30];
 6 | 
 7 | function checkAdults(age){
 8 |     return age >=  18;
 9 | };
10 | 
11 | let search = ary.filter(checkAdults);
12 | console.log(search);
13 | 


--------------------------------------------------------------------------------
/Sort-Reverse.js:
--------------------------------------------------------------------------------
 1 | // how to use sort and reverse array methods or functions in javascript.
 2 | 
 3 | let ary =  ["Javascript","Python","Ruby","Golang"];
 4 | console.log(ary); // print it without sorting.
 5 | 
 6 | ary.sort(); // let's sort it
 7 | console.log(ary); // now print the sorted array.
 8 | 
 9 | ary.reverse(); // let's reverse it.
10 | console.log(ary); // now reversely print the sorted array.
11 | 


--------------------------------------------------------------------------------
/Array-method-2.js:
--------------------------------------------------------------------------------
 1 | // let's practice a new way to create arrays in javascript.
 2 | 
 3 |   let ary = new Array(3);
 4 | 
 5 |       for (let g = 0; g < 3; g++) {
 6 |         ary[g] = prompt("Enter a value : ");
 7 |       }
 8 | 
 9 |       document.write("<ul>");
10 |       for (let a = 0; a < 3; a++) {
11 |         document.write("<li>" + ary[a] + "</li>");
12 |       }
13 | 
14 |       document.write("</ul>");
15 | 


--------------------------------------------------------------------------------
/forEachLoop.js:
--------------------------------------------------------------------------------
 1 | let team = ["Muhammad Shakir","Anum Mustafa","Shiza Junaid","Haris Awan"];
 2 | function tLoop(value, index){
 3 |     console.log(index + " " + value)
 4 | }
 5 | team.forEach(tLoop);
 6 | 
 7 | 
 8 | // another way of using forEach loop
 9 | let team1 = ["Muhammad Shakir","Anum Mustafa","Shiza Junaid","Haris Awan"];
10 | team1.forEach(function(value, index){
11 | console.log(index + " " + value)
12 | })
13 | 


--------------------------------------------------------------------------------
/nested-loop.js:
--------------------------------------------------------------------------------
 1 | // If you want to make a loop inside another loop than it's called nested loop.
 2 | // wirte a program in javascript that prints counting from 1 to 100.
 3 |  for( var a = 1; a <= 100; a = a+10){
 4 |      for(var b = a; b < a+10; b++){
 5 |          console.log(b + " ");
 6 |      }
 7 |      console.log("<br>");
 8 |  }
 9 |  
10 |  // in this program i use nested loops for printing this program.
11 |  
12 | 


--------------------------------------------------------------------------------
/Is-array.js:
--------------------------------------------------------------------------------
 1 | // lets practice isArray.
 2 | // IS ARRAY CHECKS WHEATEHR THE VARIABLE IS OF ARRAY DATATYPE OR NOT.
 3 | // You can use it inside of an if statment like i use or you can use it any where else you want. 
 4 |  let a = ["Gdsc","Gdg","GCE","Mlas"];
 5 |  console.log(a);
 6 |   
 7 |   if(Array.isArray(a)){
 8 |       console.log("This is an array");
 9 |   } else{
10 |       console.log("This is not an array");
11 |   }
12 |  
13 | 


--------------------------------------------------------------------------------
/Even-Odd-with-loops.js:
--------------------------------------------------------------------------------
 1 | // let's create a program that prints out even and odd number using loops;
 2 | 
 3 | // create a program in js that prints all the even number betwwen 1 to 20 using loops.
 4 | 
 5 | for(let a = 0; a<=20; a++){
 6 |     if(a % 2 == 0){
 7 |         console.log(a)
 8 |     }
 9 | }
10 | 
11 | // write a program that print even number.
12 | 
13 | for(let b = 0; b<=10; b++){
14 |     if(b % 2 != 0){
15 |         console.log(b)
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/Htmltags-in-js.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>lect-03</title>
 8 |     <script>
 9 |         document.write("Hello World <br>");
10 |         document.write("Muhammad Shakir-dev")
11 |     </script>
12 | </head>
13 | <body>
14 |     
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/JS-Function.js:
--------------------------------------------------------------------------------
 1 | // function helps to minize your code by removing unwanted code.
 2 | 
 3 | function introduction() {
 4 |     console.log("Hi Folks it's me Muhammad Shakir");
 5 |     console.log("For google i'm Muhammad Shakir-dev")
 6 | }
 7 | 
 8 | introduction();
 9 | 
10 | function skills(){
11 |     console.log("I'm a Front-end Developer");
12 |     console.log("I'm a UI/UX Designer");
13 |     console.log("I'm a content creator");
14 | }
15 | 
16 | skills();
17 | 
18 | 


--------------------------------------------------------------------------------
/pop-push.js:
--------------------------------------------------------------------------------
 1 | // if you want to delete last element of you array than you can use pop().
 2 | // pop() only deletes the last element from you array.
 3 | 
 4 | // if you want to add an element in your array at last then you can use push().
 5 | // push can only add elements at last.
 6 | 
 7 | 
 8 | let ary =  ["Javascript","Python","Ruby","Golang"];
 9 | console.log(ary);
10 | 
11 | ary.pop();
12 | console.log(ary);
13 | 
14 | ary.push("Java");
15 | console.log(ary);
16 | 
17 | 


--------------------------------------------------------------------------------
/do-while.js:
--------------------------------------------------------------------------------
 1 | // do while loop works same as while loop but it  1 directly comes inside the loop and print the statment and from the second time it checkes the condition.
 2 | 
 3 | // print talble of 2 using while loop.
 4 | 
 5 | let start =  0;
 6 | do{
 7 |     console.log(start);
 8 |     start = start + 2;
 9 | }while(start <= 20);
10 | 
11 | // print the reverse if table two
12 | 
13 | let a = 20;
14 | do{
15 |     console.log(a);
16 |     a = a - 2;
17 | }while(a >= 1);
18 | 
19 | 


--------------------------------------------------------------------------------
/Arrays.js:
--------------------------------------------------------------------------------
 1 | // let's dirty our hands with Javascript arrays.
 2 | 
 3 | // to initialize and print a simple array 
 4 | var ary = [10,20,30,40,50];
 5 | console.log(ary);
 6 | 
 7 | // to print something specific from array.
 8 | var ary = [10,20,30,40,50];
 9 | console.log(ary[0],ary[3],ary[4]);
10 | 
11 | // to print an array with a help of a loops .
12 | var ary = [10,20,30,40,50];
13 | var sum = 0;
14 | for(var a = 0; a <=4; a++){
15 |     sum = sum + ary[a];
16 | }
17 |     console.log(sum);
18 | 


--------------------------------------------------------------------------------
/map-method().js:
--------------------------------------------------------------------------------
 1 | // lets understand the use of map methods in objetc  and arrays.
 2 | 
 3 | let ary = [1,2,3,4,5,6,7,8,9,10];
 4 | function test(x){
 5 |     return x*2;
 6 | };
 7 | 
 8 | let finalary = ary.map(test);
 9 | console.log(finalary);
10 | 
11 | 
12 | let a = [
13 |     
14 |     {name : "muhammad shakir", age  : 21},
15 |     {name : "muhammad haris", age : 21}
16 |     ]
17 |     
18 | function test1(x){
19 |     return x.name + " " + x.age;
20 | }
21 | 
22 | let b = a.map(test1);
23 | console.log(b);
24 | 


--------------------------------------------------------------------------------
/Array-Find-FindIndex.js:
--------------------------------------------------------------------------------
 1 | // find array
 2 | // print out the element that satifying the condition.
 3 | var a = [10,29,18,21];
 4 | function checkAdult(age){
 5 |     return age >=18;
 6 | }
 7 | 
 8 | let search = a.find(checkAdult);
 9 | console.log(search);
10 | 
11 | 
12 | // findexIndexOf
13 | // prints the index number if the elemnt which is satisfying the condition.
14 | var a = [10,29,18,21];
15 | function checkAdult(age){
16 |     return age >=18;
17 | }
18 | 
19 | let search = a.findIndex(checkAdult);
20 | console.log(search);
21 | 


--------------------------------------------------------------------------------
/Function-with-return-stat.js:
--------------------------------------------------------------------------------
 1 | // Function with return value means that you want to reuse the function later but not right now.
 2 | 
 3 | function fullName(fname,lname){
 4 |     var a = fname + " " + lname;
 5 |     return a;
 6 | }
 7 | 
 8 | var fn = fullName("Muhammad","Shakir");
 9 | console.log(fn);
10 | 
11 | // percentage calculator system.
12 | 
13 | function sum(Pf,Dsa,Oop){
14 |     var a = Pf + Dsa + Oop;
15 |     return a;
16 | }
17 | 
18 | function percentage(tt){
19 |     var per = tt/300 * 100;
20 |     console.log(per);
21 | }
22 | 
23 | var total = sum(90,80,88);
24 | percentage(total);
25 | 


--------------------------------------------------------------------------------
/JS-local-Global-var.js:
--------------------------------------------------------------------------------
 1 | // var a = 10; -- global varibles
 2 | // function sum(num1,num2){
 3 | //    var b = 25 --  local variables
 4 | // }
 5 | 
 6 | // Global variable :: You can acces a global variables inside and outside of the function.
 7 | let a  = "Muhammad Shakir";
 8 | function name(){
 9 | console.log(a);
10 | }
11 | name();
12 | console.log(a);
13 | 
14 | // local variable :  you cannot acces a local variale outside of the fuctioins.
15 | function community(){
16 |   let b = "Google Developer Stduent Club's";
17 |   console.log(b);
18 | }
19 | community();
20 | console.log(b);
21 | 
22 | 
23 | 
24 | 
25 | 


--------------------------------------------------------------------------------
/Objects-2.js:
--------------------------------------------------------------------------------
 1 | // A New way to create objects in javascript.
 2 | 
 3 | // First initialize a variable and make that variable a new objects.
 4 | let a  = new Object();
 5 | 
 6 | // Now you can give variable a which is now an obejcts any properties or values you want at any time you want.
 7 | 
 8 | a.firstName = "Muhammad",
 9 | a.lastName  = "Shakir",
10 | a.skills = ["HTML","CSS","JavaScript","Tailwind CSS","Git","Ajax","WebAPI"],
11 | a.fullName = function(){
12 |     return this.firstName + " " + this.lastName;
13 | }
14 | 
15 | // Now simply print the values.
16 | console.log(a.fullName());
17 | console.log(a.skills);
18 | 


--------------------------------------------------------------------------------
/Array-Of-Objects.js:
--------------------------------------------------------------------------------
 1 | // let's understand how to create objects inside of an array.
 2 | // And how to print this array of objects with the help of for loop.
 3 | 
 4 | // First initiallize a varibale of data array. and create an obejct in it.
 5 | let student  = [
 6 |     
 7 |     {name : "Muhammad Shakir", rank : 1},
 8 |     {name : "Muhammad Haris", rank  : 2},
 9 |     {name : "Syed Wajid" , rank : 3}
10 |     
11 |     ];
12 | 
13 | // now let's create a fro loop to print all value.
14 | 
15 | for(let a = 0; a < 3; a ++){
16 |     document.write("Name : " + student[a].name + " , " + "Rank : " + student[a].rank);
17 | };
18 | 


--------------------------------------------------------------------------------
/for-in-loop.js:
--------------------------------------------------------------------------------
 1 | // let's see how we can print all the values of an object in javascript using for in loop.
 2 | 
 3 | let user1 = {
 4 |     fullName : "Muhammad Shakir",
 5 |     department : "Software Engineering",
 6 |     section : "5-A"
 7 | };
 8 | 
 9 | let user2 ={
10 |     fullName : "Abdullah Farroq",
11 |     department : "Artifical Intelligence",
12 |     section : "5-B"
13 | }
14 | 
15 | // Now print the values of both objects using for/in loop.
16 | for(let values in user1){
17 |     console.log(values + " : " + user1[values]);
18 | }
19 | 
20 | for(let keys in user2){
21 |     console.log(keys + " : " + user2[keys]);
22 | }
23 | 


--------------------------------------------------------------------------------
/if-else-if.js:
--------------------------------------------------------------------------------
 1 | // when you want to set a scope of multiple conditions that have multiples answsers so there you can use if else if.
 2 | 
 3 | var per = prompt("Enter your Percentage : ");
 4 | 
 5 | if( per >= 80 && per <=100){
 6 |     console.log("you are in merit");
 7 | }
 8 | else if( per >= 60 && per <= 79){
 9 |     console.log("you are in first division");
10 | }
11 | else if( per >= 45 && per <= 59){
12 |     console.log("you are in second division");
13 | }
14 | else if( per >= 33 && per <= 44){
15 |     console.log("you are in third division");
16 | }
17 | else if( per < 33){
18 |     console.log("you are fail");
19 | }
20 | else{
21 |     console.log("enter a valid percentage between 0 - 100");
22 | }
23 | 
24 | 


--------------------------------------------------------------------------------
/assignment-operator.js:
--------------------------------------------------------------------------------
 1 | // equal to operator.
 2 | let x = 12;
 3 | let y = 5;
 4 | let z = (x+y);
 5 |     z--
 6 | 
 7 | document.write(z);
 8 | 
 9 | // addition assignment operator.
10 | let x = 12;
11 | let y = 48;
12 |     x=x+y;
13 | console.log(x)
14 | 
15 | // subtraction assignment operator.
16 | let x = 12;
17 | let y = 48;
18 |     x=x-y;
19 | console.log(x)
20 | 
21 | // multiplication assignment operator.
22 | let x = 12;
23 | let y = 48;
24 |     x=x*y;
25 | console.log(x)
26 | 
27 | //division assignment operator
28 | let x = 48;
29 | let y = 12;
30 |     x=x/y;
31 | console.log(x)
32 | 
33 | // modulus assignment operator.
34 | let x = 48;
35 | let y = 12;
36 |     x=x%y;
37 | console.log(x)
38 | 
39 | // exponential assignment operator.
40 | let x = 2;
41 | let y = 10;
42 |     x=x**y;
43 | console.log(x)
44 | 


--------------------------------------------------------------------------------
/modify-delete-array.js:
--------------------------------------------------------------------------------
 1 | // how to modify and delete array elements in javascript.
 2 |  let ary = ["Muhammad Anas", 21, "BSSE"];
 3 |  console.log(ary);  // first print it without modifying.
 4 |  
 5 | ary[0] = "Muhammad Shakir";
 6 | console.log(ary);  // now let's print the modified array.
 7 | 
 8 | // how to delete any array element in js.
 9 | 
10 | let ary1 = ["Google","Microsoft","GitHub","Meta"];
11 | console.log(ary1) // first print the array without deleting any element.
12 | 
13 | delete ary[1];
14 | console.log(ary) // lets print the array after deleting an element from it.
15 | 
16 | // note. delete will only remove the element but not it's space. the space  at which the index elemnet has placed are stiil there you can add a new element in it. i will show you how.
17 | ary[1] = "Youtube";
18 | console.log(ary);
19 | 


--------------------------------------------------------------------------------
/const-var-with-array-obj.js:
--------------------------------------------------------------------------------
 1 | // let see the use of const variable with array and objects.
 2 | // Overall you cannot change tor reassign const variables values.
 3 | // what if your array or oebjcts are const you can change its values by a trick.
 4 | 
 5 | const user0 = ["muhammad Shakir",21];
 6 | const user1 = {
 7 |     name : "muhammad shakir",
 8 |     age : 21,
 9 | }
10 | 
11 | // lets say i want to change both user1 and user0 values.
12 | // worng way.
13 | user0 = ["muhammad haris",22];
14 | user1 = {
15 |     name : "muhammad haris",
16 |     age : 21
17 | }
18 | 
19 | console.log(user0);
20 | console.log(user1);
21 | 
22 | // right ways.
23 | user0[0] = "muhammad haris";
24 | user0[1] = 22;
25 | 
26 | console.log(user0);
27 | 
28 | user1.name = "Muhammad Shakir";
29 | user1.age = 22;
30 | 
31 | console.log(user1.details())
32 | 
33 | 


--------------------------------------------------------------------------------
/Array-Method.js:
--------------------------------------------------------------------------------
 1 | // there are three tyepes of methods that are used in arrays.
 2 | // toString().
 3 | // valueOf().
 4 | // fill().
 5 | 
 6 | // toString() are sinmply coverts any type of Array into a sigle string.
 7 | // Note : After coverting it to a srting you will not be able to apply any array function or methods on it.
 8 | let ary = ["Muhammad","Shakri","Dev"];
 9 | ary.toString();
10 | console.log(ary);
11 | console.log(typeof(ary));
12 | 
13 | 
14 | // ValueOf is default funciton of array to print all of its values.
15 | let ary = ["Muhammad","Shakri","Dev"];
16 | console.log(ary);
17 | 
18 | let ary1 = ["Muhammad","Haris"];
19 | ary1.valueOf();
20 | console.log(ary1);
21 | 
22 | //fill() is used to add a static values to the current array.
23 | let ary = ["Muhammad Shakir","Muhammad Haris","Rehan Sattar"];
24 | ary.fill("-Dev");
25 | console.log(ary);
26 | 


--------------------------------------------------------------------------------
/Some-Every.js:
--------------------------------------------------------------------------------
 1 | // check weather tha condition is ture or not.   
 2 | // some return only ture and fasle boolean values.
 3 | // some only work whne you call a fucntion with in that.
 4 | 
 5 | let ages = [10, 12, 13, 17, 19];
 6 | let adultAge = ages.some(checkAdult);
 7 | console.log(adultAge);
 8 | 
 9 | function checkAdult(age) {
10 |     return age >= 18 
11 | };
12 | 
13 | // for fasle.
14 | 
15 | let ages = [10, 12, 13, 17, 11];
16 | let adultAge = ages.some(checkAdult);
17 | console.log(adultAge);
18 | 
19 | function checkAdult(age) {
20 |     return age >= 18 
21 | };
22 | 
23 | // every works same as some but.
24 | // every only give ture when all the conditions are true.
25 | let ages = [18, 19, 20, 21, 19];
26 | 
27 | function checkAdult(age){
28 |     return age >= 18
29 | }
30 | 
31 | let adultAges = ages.every(checkAdult);
32 | console.log(adultAges);
33 | 
34 | 
35 |  
36 | 


--------------------------------------------------------------------------------
/arithimatic.js:
--------------------------------------------------------------------------------
 1 | // addition
 2 | let x = 12;
 3 | let y = 24;
 4 | let z = (x+y);
 5 | 
 6 | document.write(z);
 7 | 
 8 | // subtraction
 9 | let x = 12;
10 | let y = 24;
11 | let z = (x-y);
12 | 
13 | document.write(z);
14 | 
15 | // multiplicaiton
16 | let x = 12;
17 | let y = 2;
18 | let z = (x*y);
19 | 
20 | document.write(z);
21 | 
22 | // division
23 | let x = 12;
24 | let y = 2;
25 | let z = (x/y);
26 | 
27 | document.write(z);
28 | 
29 | //exponentation
30 | let x = 12;
31 | let y = 2;
32 | let z = (x**y);
33 | 
34 | document.write(z);
35 | 
36 | // modulus (reminder)
37 | let x = 12;
38 | let y = 5;
39 | let z = (x%y);
40 | 
41 | document.write(z);
42 | 
43 | // incriment
44 | let x = 12;
45 | let y = 5;
46 | let z = (x+y);
47 |     z++
48 | 
49 | document.write(z);
50 | 
51 | // decriment
52 | let x = 12;
53 | let y = 5;
54 | let z = (x+y);
55 |     z--
56 | 
57 | document.write(z);
58 | 
59 | 


--------------------------------------------------------------------------------
/slice-splice.js:
--------------------------------------------------------------------------------
 1 | // if you want to print out some specific values from array then use slice.
 2 | //  slice has two parameters slice(start,end)
 3 | // let's practice it. here i want to print out shakir, rehan, and saad so i give a starting point to it which is from index-1 and an ending point which
 4 | // is index-4
 5 | 
 6 | let ary = ["Hais","Shakir","Rehan","Saad","Wajid"];
 7 | let f_ary = ary.slice(1,4);
 8 | console.log(f_ary);
 9 | 
10 | //  if you don't want to add new values in the starting or at the ending of your array then use splice.
11 | // note one thing that splice don't create a new array it just make changes to the existing array.
12 | // you have to pass three parameters in splice and these three parameters are : "From Where you want to add", "How many you want to deelete", "New values"
13 | 
14 | let xGdsc = ["Danella","Osama","Usman","Urwa","Mahnoor"];
15 | console.log(xGdsc);
16 | 
17 | xGdsc.splice(1 , 4, "Wajid","Shakir","Anum","Haris","Shiza");
18 | console.log(xGdsc);
19 | 
20 | 


--------------------------------------------------------------------------------
/Switch-case.js:
--------------------------------------------------------------------------------
 1 | // Switch cases are also another from of if else condition.
 2 | // in which you can write conditions using camperision operators.
 3 | // the break in switch means that if any point or at any case if you condition becomes true the other conditions will not printed. 
 4 | // defualt work same as else.
 5 | 
 6 | let day = prompt("Enter a day i will tell you your class : ");
 7 | switch(day){
 8 |     case "monday": console.log("Game Development class")
 9 |     break;
10 |     
11 |     case "tuesday": console.log("Professional Practices class")
12 |     break;
13 |     
14 |     case "wednesday": console.log("Information Security class") 
15 |     break;
16 |     
17 |     case "thursday": console.log("Software Testing")
18 |     break;
19 |     
20 |     case "friday": console.log("Web Engineering Class")
21 |     break;
22 |     
23 |     case "saturday": console.log("weekend no class")
24 |     break;
25 |     
26 |     case "sunday": console.log("weekend no class")
27 |     break;
28 |     
29 |     default: console.log("enter a valid day with lower alphabats") 
30 | }
31 | 


--------------------------------------------------------------------------------
/concat-join.js:
--------------------------------------------------------------------------------
 1 | // concat means to add to different arrays.
 2 | // in js you can concat arrays in different ways but i will tell you only how to concat arrays using just concat() function.
 3 | // you can concat upto multiple arrays if you want.
 4 | 
 5 |  let team1 = ["Shakir","Wajid","Haris"];
 6 |  let team2 = ["Anum","Anas","Ammad"];
 7 |  let team3 = ["jamal","hadi"];
 8 |  
 9 |  console.log(team1);
10 |  console.log(team2);
11 |  
12 |  let finalteam = team1.concat(team2,team3);
13 |  console.log(finalteam);
14 |  
15 | // join() simply joins all the array value and truned it into a sngel string.
16 | // you can use symbols between elements.
17 | 
18 |  let dev = ["Muhammad","Shakir","Dev"];
19 |  let fname = dev.join(" - ");
20 |  console.log(fname);
21 |  console.log(typeof(fname));
22 | 
23 | // example no 3
24 | // write a program in js in which concat two arrays and then join that arrays to form a single string.
25 | 
26 | let ary1 = ["Muhammad","Shakir","Dev"];
27 | let ary2 = ["Muhmmad","Haris","Dev"];
28 | 
29 | let fary = ary1.concat(ary2);
30 | console.log(fary);
31 | 
32 | let testary = fary.join("-");
33 | console.log(testary);
34 | 


--------------------------------------------------------------------------------
/Multidemensional-array.js:
--------------------------------------------------------------------------------
 1 | // array inside another array is called multidimensional array. 
 2 | // simple table.
 3 | let ary = [
 4 |       ["Muhammad Shakir", "BSSE", "6th", "Morning"],
 5 |       ["Muhammad Haris", "BSSE", "6th", "Morning"],
 6 |       ["Wajid Hussain", "BSSE", "6th", "Morning"]
 7 |     ]
 8 | 
 9 |   document.write("<table border='1px' cellspacing='0'>");
10 |     for (let a = 0; a < 4; a++) {
11 |       document.write("<tr>")
12 |       for (let b = 0; b < 4; b++) {
13 |         document.write("<td>" + ary[a][b] + "</td>");
14 |       document.write("</tr>")
15 |       }
16 |     }
17 |   document.write("</table>")
18 | 
19 | 
20 | // proper table.
21 |     var ary = [
22 |       ["Muhammad Shakir", "Front-end Developer"],
23 |       ["Rehan Sattar", "Full stack developer"],
24 |       ["Saad Pasta", "Software engineer"],
25 |     ]
26 | document.write("<table border='1px' cellspacing='0'>")
27 |     for(let a = 0; a < ary.length; a++){
28 |       document.write("<tr>")
29 |       for(let b = 0; b < ary[a].length; b++){
30 |         document.write("<td>" + ary[a][b] + "</td>")
31 |       }
32 |       document.write("</tr>")
33 |     }
34 | document.write("</table>")
35 | 
36 | 


--------------------------------------------------------------------------------
/Array-index.js:
--------------------------------------------------------------------------------
 1 | // lastindexOf just gives you the index number of array element you want to search. but if the element you are looking for are not present in the array 
 2 | // then it will show you -1 which means that the element you want to search are not present in this array. 
 3 | 
 4 | let xGdsc = ["Danella","Osama","Mahnoor","Usman","Shakir","Wajid"];
 5 | let nGdsc = ["Wajid","Shakir","Haris"];
 6 | 
 7 | let fGdsc = xGdsc.concat(nGdsc);
 8 | console.log(fGdsc);
 9 | 
10 | let search = fGdsc.indexOf("Shakir",5);
11 | console.log(search);
12 | 
13 | 
14 | // for looking an element that is not present in array.
15 | let xGdsc = ["Danella","Osama","Mahnoor","Usman","Shakir","Wajid"];
16 | let nGdsc = ["Wajid","Shakir","Haris"];
17 | 
18 | let fGdsc = xGdsc.concat(nGdsc);
19 | console.log(fGdsc);
20 | 
21 | let search = fGdsc.indexOf("Anum",0);
22 | console.log(search);
23 | 
24 | // lastIndexOf wroks same as the indexOf but from the last of your array.
25 | 
26 | let xGdsc = ["Danella","Osama","Mahnoor","Usman","Shakir","Wajid"];
27 | let nGdsc = ["Wajid","Shakir","Haris"];
28 | 
29 | let fGdsc = xGdsc.concat(nGdsc);
30 | console.log(fGdsc);
31 | 
32 | let search = fGdsc.lastIndexOf("Shakir", 6);
33 | console.log(search);
34 | 


--------------------------------------------------------------------------------
/Comparision-Operator.js:
--------------------------------------------------------------------------------
 1 | // there are 7 comparision operators that we use in javascript.
 2 | // = = [equal to ]
 3 | // = = = [equal value and data type]
 4 | // ! = [ not equal value]
 5 | // > [greater than]
 6 | // < [less than]
 7 | // >= [greator than and equal to]
 8 | // <= [less tahn and equal to]
 9 | 
10 | /* Equal to Comparison Operators */
11 | let x = 24;
12 | let y = 24;
13 | console.log(x==y);
14 | 
15 | /* Equal value and equal type Comparison Operators */
16 | let x = 21;
17 | let y = '21';
18 | console.log(x === y);
19 | 
20 | /* Not Equal Comparison Operators */
21 | let x = 82;
22 | let y = 12;
23 | console.log(x != y);
24 | 
25 | /* Not Equal value or not equal type Comparison Operators */
26 | let x = 22;
27 | let y = 23;
28 | console.log(x !== y);
29 | 
30 | /* Greater Than Comparison Operators */
31 | let x = 2;
32 | let y = 3;
33 | console.log( x > y);
34 | 
35 | /* Less Than Comparison Operators */
36 | let x = 2;
37 | let y = 3;
38 | console.log( x < y);
39 | 
40 | /* Greater Than or Equal To Comparison Operators */
41 | let x = 2;
42 | let y = 3;
43 | console.log( x >= y);
44 | 
45 |  /* Less Than or Equal To Comparison Operators */
46 | let x = 2;
47 | let y = 3;
48 | console.log( x <= y);
49 | 
50 | 
51 | 


--------------------------------------------------------------------------------
/nested-loops-2.js:
--------------------------------------------------------------------------------
 1 | // let's practice nested loops a bit more.
 2 | 
 3 | // nested loops practice question 1.
 4 | 
 5 |         for (let a = 1; a <= 5; a++) {
 6 |             for (let b = 1; b <= a; b++) {
 7 |                 document.write(b);
 8 |             }
 9 |             document.write("<br>");
10 |         }
11 |       
12 | // nested loops practice question 2.
13 | 
14 |         for(let a = 1; a <= 5; a++){
15 |             for(let b = 1; b <= a; b++){
16 |                 document.write(a);
17 |             }
18 |             document.write("<br>");
19 |         }
20 |         
21 | // nested loops practice question 3.
22 | 
23 |         for(let a = 5; a >= 1; a--){
24 |             for(let b = 1; b <=a; b++){
25 |                 document.write(a)
26 |             }
27 |             document.write("<br>")
28 |         }
29 |     
30 | // nested loops pratice question 4;
31 |         for(let a = 5; a >= 1; a--){
32 |             for(let b = 1; b <=a; b++){
33 |                 document.write("*")
34 |             }
35 |             document.write("<br>")
36 |         }
37 | //nested loops practice question 5;
38 |         for(let a = 5; a >=1; a--){
39 |             for(let b = a; b >=1; b--){
40 |                 document.write(b);
41 |             }
42 |             document.write("<br>");
43 |         }
44 | 


--------------------------------------------------------------------------------
/Date-method.js:
--------------------------------------------------------------------------------
 1 |   // date methods in javascript
 2 |   // there are 16 methods that we will learn in this tutorial.
 3 |   // before getting our hands dirty with date methods some important thing that you should know.
 4 |   // You can use date methods by creating a varibale a new date object.
 5 | 
 6 |   // now by writing new Date() demodate has become an object of date method.
 7 |   let demoDate = new Date();
 8 |   console.log(demoDate);
 9 | 
10 |   // toDateString for converting date into readable format.
11 |   console.log(demoDate.toDateString());
12 | 
13 |   // date methods in javascript
14 | 
15 |   let dateDemo = new Date();
16 | 
17 |   // to see the date in proper order
18 |   console.log(dateDemo.toDateString());
19 | 
20 |   // to just print the date
21 |   console.log(dateDemo.getDate());
22 | 
23 |   // to get full year
24 |   console.log(dateDemo.getFullYear());
25 | 
26 |   // to get month
27 |   // for january its 0 and for december its 11
28 |   console.log(dateDemo.getMonth());
29 | 
30 |   // to get day
31 |   // for monday it's 1 and for sunday it's 1
32 |   // monday 1
33 |   // tues 2
34 |   // wed 3
35 |   // thursday 4
36 |   console.log(dateDemo.getDay());
37 | 
38 | 
39 |   // get hours
40 |   console.log(dateDemo.getHours());
41 | 
42 |   // get minutes
43 |   console.log(dateDemo.getMinutes());
44 | 
45 |   // get milli second
46 |   console.log(dateDemo.getMilliseconds());
47 | 
48 | 
49 |   // how to print full date.
50 |   let dateDemo = new Date();
51 |   console.log(dateDemo.getDate() + "/" + dateDemo.getMonth() + "/" + dateDemo.getFullYear());
52 | 
53 | 


--------------------------------------------------------------------------------
/Strings-methods-2.js:
--------------------------------------------------------------------------------
 1 | // lets start with charAT.
 2 | // in charAT you will define a position and at that position if any character is present then that character will be printed.
 3 | 
 4 |        let name = "Muhammad Shakir";
 5 |        let x = name.charAt(10);
 6 |        console.log(x);
 7 | 
 8 | // charCodeAt()
 9 |         let userget = prompt("Enter an aplhabet or symbol : ");
10 |         let find = userget.charCodeAt();
11 |         console.log(find);
12 | 
13 | // fromCharCode()
14 |         let find2 = String.fromCharCode(97);
15 |         console.log(find2);
16 | 
17 | // repeat()
18 | // Repeat method or funciton are simply repeats or print your string mutiple time you to your given input.
19 | 
20 |        let str = "hello world ";
21 |        let finalStr = str.repeat(10);
22 |        console.log(finalStr);
23 | 
24 | // String split function or method split every word of a string and make a seperate array of that.
25 | 
26 |        let str = "I'm a Front-end Engineer";  // string 
27 |        let finalStr = str.split(" ");  // split() function     
28 |        console.log(finalStr);  // Output
29 |        console.log(typeof(finalStr)); // Output "Object"
30 | // slice string function works same as array slice function. it will give the output from the string according to your given paramerters.
31 | 
32 |        let str = "hello world javascript is super amazing";
33 |        let finalStr = str.slice(11);
34 |        console.log(str);
35 |        console.log(finalStr);
36 | 
37 | // sub str work same as slice but there is a little bit difference in that.
38 |        let str = "hello world.....!!!";
39 |        let finalstr = str.substr(0,5);
40 |        console.log(finalstr);
41 | 
42 | // sub string work same as slice but i will give you output which is present between two parameters
43 | 
44 |        let str = "hello world";
45 |        let x = str.substring(0,9);
46 |        console.log(x);
47 | 
48 | // toString covert any data type variable into string
49 | 
50 |     let number = 12;
51 |     document.write(number + "<br><br>");
52 |     document.write(typeof(number) + "<br><br>");
53 |     let num = number.toString();
54 |     
55 |     document.write(num + "<br><br>");
56 |     document.write(typeof(num));
57 | 


--------------------------------------------------------------------------------
/Objects.js:
--------------------------------------------------------------------------------
 1 | //let's learn javascript objects.
 2 | // Objects are the advanced vresion of Array in javascript.
 3 | // Objects are denoted by {}.
 4 | // You can create an aray inside of an object.
 5 | // you can create multiple functions called methods inside of an object.
 6 | // you can print oibjects proerties inside of a function.
 7 | // we can make an nested objects inside of the same parent object.
 8 | 
 9 | 
10 | // Example NO 1
11 | let user1 = {
12 |     fullName : "Muhammad Shakir",
13 |     age : 21,
14 |     skills : ["HTML","CSS","Javascript","Tailwind CSS","React.js","Node.js","Git"      ,"GitHub"],
15 |     Salary : function(){
16 |         return 55000;
17 |     }
18 | }
19 | 
20 | console.log(user1.fullName);
21 | console.log(user1.age);
22 | console.log(user1.skills);
23 | console.log(user1.Salary());
24 | 
25 | // Example no 2.
26 | 
27 | 
28 | let user1 = {
29 |     fName : "Muhammad",
30 |     lName : "Shakir",
31 |     age : 21,
32 |     skills : ["HTML","CSS","Javascript","Tailwind CSS","React.js","Node.js","Git"      ,"GitHub"],
33 |     Salary : function(){
34 |         return 55000;
35 |     },
36 |     
37 |     fullName : function(){
38 |         return this.fName + " " + this.lName;
39 |     }
40 |     
41 | }
42 | 
43 | console.log(user1.fullName);
44 | console.log(user1.age);
45 | console.log(user1.skills);
46 | console.log(user1.Salary());
47 | console.log(user1.fullName());
48 | 
49 | // example 3.
50 | //let's learn javascript objects.
51 | // Objects are the advanced vresion of Array in javascript.
52 | // Objects are denoted by {}.
53 | // You can create an aray inside of an object.
54 | // you can create multiple functions called methods inside of an object.
55 | 
56 | let user1 = {
57 |     fName : "Muhammad",
58 |     lName : "Shakir",
59 |     age : 21,
60 |     skills : ["HTML","CSS","Javascript","Tailwind CSS","React.js","Node.js","Git"      ,"GitHub"],
61 |     Salary : function(){
62 |         return 55000;
63 |     },
64 |     
65 |     fullName : function(){
66 |         return this.fName + " " + this.lName;
67 |     },
68 |     
69 |     location : {
70 |         city : "Karachi",
71 |         Address : "a-1139 Gulshan-e-Hadeed phase-1",
72 |         compLocation : function(){
73 |         return this.city + " " + this.Address;
74 |     }
75 |     
76 | },
77 |     
78 | 
79 |     
80 | }
81 | 
82 | console.log(user1.location.compLocation());
83 | 


--------------------------------------------------------------------------------
/Number-Method.js:
--------------------------------------------------------------------------------
 1 |   // there are seven number methods used in javascript and all these are mentioned below.
 2 | 
 3 |   // Number = used to convert strings into number.
 4 |   // parseInt = used to convert decimal and strings into number.
 5 |   // parseFloat = used to print decimal values.
 6 |   // isInteger = used to check that either your number is of integer type or not.
 7 |   // isFinite = used to check that either your number is finite or not.
 8 |   // toFixed = used to print the values after points according to your given parameter.
 9 |   // toPrecision = used to roundoff the values after the points according to your given parameter. 
10 | 
11 | 
12 |   // Step no 1 : Get input from user.
13 |   let getUser = prompt("Enter a number i will add plus 10 in that : "); 
14 |   // Step no 2:  Use Number method to convert string into number.
15 |   let num = Number(getUser);
16 |   // Step no 3 : Print the final result with addition of 10.
17 |   console.log(num + 10);
18 | 
19 | 
20 |   //parseInt
21 |   let userGet = prompt("Enter a decimal number i will convert that no interger : ");
22 |   let num = parseInt(userGet);
23 |   console.log(num)
24 | 
25 |   //pasrseFloat
26 |   let userGet = prompt("Enter a decimal no i will add 5 in that : ");
27 |   let num = parseFloat(userGet);
28 |   console.log(num + 5);
29 | 
30 |   // Note that all the functions that are starting from is only return boolean values that is true and false. Because they are mostly used to check the conditions.
31 |   // you have to use isFinite and isInteger with Number. i.e = Number.isFinite and Number.isInteger
32 |   // isFinite()  is used to check that weather your number is finite or infinite.
33 |   let userGet = prompt("Enter a no i will tell you it's finite or not : ");
34 |   let num = isFinite(userGet);
35 |   console.log(num);
36 | 
37 |   // inInteger() is used to check that weather your number is an integer or not.
38 |   let userGet = prompt("Enter a no i will tell is it an integer or not : ");
39 |   let num = Number.isInteger(userGet);
40 |   console.log(num);
41 | 
42 |   // toFixed() used to show lumsum value or you can say roundoff value after point.
43 |   let userGet = parseFloat(prompt("Enter a value i will round of that value : "));
44 |   let num  = userGet.toFixed(2);
45 |   console.log(num);
46 | 
47 |   // toPrecision()
48 |   // toPrecision() used to round off proper values if the value after the points are bigger than 5 it will roundoff it if not the same value will printed.
49 |   let userGet = parseFloat(prompt("Enter a value i will round of that value : "));
50 |   let num  = userGet.toPrecision(2);
51 |   console.log(num);
52 | 
53 | 
54 | 
55 | 
56 | 
57 | 


--------------------------------------------------------------------------------
/Strings-methods.js:
--------------------------------------------------------------------------------
 1 | // let's understand Js String methods.
 2 | // we are goning to cover 22 string methods and the first one is property.
 3 | // which is string lenght
 4 | // lenght is used to find the lenght of out string.
 5 | 
 6 |         let str = "Hello World It's me Muhammad Shakir-dev";
 7 |         let x = str.length;
 8 |         document.write(str + "<br><br>");
 9 |         document.write("The lenght of this string is  : " + x);
10 | 
11 | // now let's lean toUpperCase() and toLowerCase() sting methods in js.
12 |         let str = "Hello World It's me Muhammad Shakir-dev";
13 |         let x = str.toLowerCase();
14 |         document.write(x + "<br><br>");
15 |         x = str.toUpperCase();
16 |         document.write(x)
17 | 
18 | // includes use for searching something inside of your existing string. and if the letter or word you are seaching for is present in the exsisting ary then\
19 | // it will show you boolean true and if not it will show you boolean fasse.
20 | 
21 |         let str = "Hello World It's me Muhammad Shakir-dev";
22 |         let x = str.includes("Hello");
23 |         document.write(x);
24 | 
25 |         let str = "Hello World It's me Muhammad Shakir-dev";
26 |         let x = str.includes("wajid");
27 |         document.write(x);
28 | 
29 | /// noe we have two new methods one is startsWith() and second is endsWiths().
30 | // both of these will give you the output in boolean trure or false.
31 | 
32 | let str = "Muhammad Shakir";
33 | let x = str.startsWith("Muhammad");
34 | console.log(x);
35 | 
36 | x = str.endsWith("Haris");
37 | console.log(x);
38 | 
39 | // search works same as includes but it haa a little bit diference because.
40 | // includes print just boolean ture and false but search prints the index number
41 | // of the word you are looking for.
42 | 
43 | let str = "Muhammad Shakir";
44 | let x = str.search("Shakir");
45 | console.log(x);
46 | 
47 | 
48 | // match works same as includes and search but it will create an array of the words you are  searching for.
49 | let str = "Hello World this is me Muhammad Shakir dev. Im an Opensource Contributor and a Front-end Develoepr and a content creator";
50 | let x = str.match("and");
51 | console.log(x);
52 | 
53 | // indexOf and lastIndexOf work same as arrays methods .
54 | // indexOf start from the begineening of your string and show the index number of
55 | // the word you are searching for. And last indexOf start with the end of you arrray.
56 | 
57 | 
58 |     let str = "Hello This is Muhammad Shakir. He is a Developer";
59 |     let x = str.indexOf("is");
60 |     console.log(x);
61 |     
62 |     x = str.lastIndexOf("is");
63 |     console.log(x);
64 | 
65 | // lets understand replace. Is used to replace a word with a new word.
66 | 
67 | let str = "Html, CSS, TailwindCSS, Javascript, NodeJs";
68 | let x = str.replace("CSS","CSS-3");
69 | console.log(x);
70 | 
71 | // here i'm replace are with is using local parameters. 
72 | let skills  = "My skills are in front-end development";
73 | let a = skills.replace(/are/g , "is");
74 | console.log(a);
75 | 
76 | // trim is used to remove all the extra spaces from the left and right side of your string.
77 | let str = "       javascript      ";
78 | let b = str.trim();
79 | alert(b);
80 | 
81 | 
82 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Javascript-Basics
 2 | > This repository will help you to learn all the basic of javsscript in a proper manner step by step. 
 3 | 
 4 | ## Reuired Things.
 5 | > <a href= "https://code.visualstudio.com/">VS Code</a> 
 6 | 
 7 | ## What is Javascript?
 8 | > JavaScript is a high-level, interpreted programming language that is widely used for front-end web development. It was created by Brendan Eich in 1995 while he was working at Netscape Communications Corporation. Initially, JavaScript was called LiveScript, but it was later renamed to JavaScript for marketing purposes. Since then, JavaScript has evolved significantly and is now used for a wide range of purposes, including server-side programming, desktop application development, and mobile app development.
 9 | 
10 | ## Why is JavaScript So Popular?
11 | > There are several reasons why JavaScript has become the most popular programming language, including:
12 | 
13 | > It's Easy to Learn: JavaScript is a beginner-friendly language that's easy to learn and understand. Unlike other programming languages, JavaScript doesn't require a lot of setup or configuration. All you need is a text editor and a web browser, and you can start coding.
14 | 
15 | > It's Versatile: JavaScript is a versatile language that can be used for a wide range of purposes, from front-end web development to server-side programming. This versatility has made JavaScript the go-to language for developers who want to build complex web applications.
16 | 
17 | > It Has a Large Community: JavaScript has one of the largest developer communities in the world. There are countless online resources, tutorials, and forums where developers can learn and share their knowledge. This vast community has helped to make JavaScript more accessible and easier to use.
18 | 
19 | > It's Constantly Evolving: JavaScript is a constantly evolving language that's always adapting to meet the needs of developers. New frameworks and libraries are being created all the time, making it easier to build complex applications quickly.
20 | 
21 | ## Outline of this course.
22 | 1. JS Introduction	
23 | 2. JS Implementation	
24 | 3. HTML Tags in Javascript	
25 | 4. JS Comments	
26 | 5. JS Variables	
27 | 6. JS Variables ( Let & Const )	
28 | 7. JS Data Types	
29 | 8. JS Arithmetic Operators	
30 | 9. JS Assignment Operators	
31 | 10. JS with Google Chrome Console	
32 | 11. JS Comparison Operators	
33 | 12. JS If Statement	
34 | 13. JS Logical Operators	
35 | 14. JS If Else Statement	
36 | 15. JS If Else If Statement	
37 | 16. JS Conditional Ternary Operator	
38 | 17. JS Switch Case	
39 | 18. JS Alert Box	
40 | 19. JS Confirm Box	
41 | 20. JS Prompt Box	
42 | 21. JS Functions	
43 | 22. JS Functions with Parameters	
44 | 23. JS Functions with Return Value	
45 | 24. JS Global & Local Variable	
46 | 25. JS Events	
47 | 26. JS While Loop	
48 | 27. JS Do While Loop	
49 | 28. JS For Loop	
50 | 29. JS Break & Continue Statement	
51 | 30. JS Even & Odd with Loops	
52 | 31. JS Nested Loop	JavaScript Nested Loop - II
53 | 32. JS Arrays	
54 | 33. JS Create Arrays Method - II	
55 | 34. JS Multidimensional Arrays	
56 | 35. JS Modify & Delete Array	
57 | 36. JS Array Sort & Reverse	
58 | 37. JS Array Pop & Push	
59 | 38. JS Array Shift & Unshift	
60 | 39. JS Array Concat & Join	
61 | 40. JS Array Slice & Splice	
62 | 41. JS isArray	
63 | 42. JS Array index	
64 | 43. JS Array Includes	
65 | 44. JS Array Some & Every	
66 | 45. JS Array find & find index	
67 | 46. JS Array Filter	
68 | 47. JS Array Methods	
69 | 48. JS forEach Loop	
70 | 49, JS Objects	
71 | 50. JS Objects - II	
72 | 51. JS Array of Objects	
73 | 52. JS Const Variable with Array & Objects	
74 | 53. JS For in Loop	
75 | 54. JS Map Method	
76 | 55. JS String Methods	
77 | 56. JS String Methods - II	
78 | 57. JS Number Methods	
79 | 58. JS Math Methods	
80 | 59. JS Date Methods
81 | 


--------------------------------------------------------------------------------
/Math-Methods.js:
--------------------------------------------------------------------------------
  1 |   // there are 12 maths methods used in javscript.
  2 |   // ceil()
  3 |   // floor()
  4 |   // round()
  5 |   // trunc()
  6 |   // max(x,y,z.........,n)
  7 |   // min(x,y,z,........,n)
  8 |   // sqrt()
  9 |   // cbrt()
 10 |   // pow()
 11 |   // random()
 12 |   // abs()
 13 |   // pi
 14 | 
 15 |   // it is mostly used in complex accounting applications, used for making video games and also used for animation.
 16 |   // You should use Math before using any of the following maths mthods.
 17 | 
 18 |   // Ceil is used for roundoff your value for positive value input the output is there uper value.
 19 |   // for input negative value the output is its downside value.
 20 |   let userInput = prompt("Enter a value i will rounudoff it : ");
 21 |   let x = Math.ceil(userInput);
 22 |   console.log(x);
 23 | 
 24 |   // floor is simply the reverse iof ceil it will print upward value for positive negative onces and donwards values for positive once.
 25 |   let userInput = prompt("Enter a value : ");
 26 |   let x = Math.floor(userInput);
 27 |   console.log(x);
 28 | 
 29 |   // Rround is simply rounds offs your given input if your input is in decimal and the value after the point is bigger than .5 then it will upward it if not it will donward roundoff it.
 30 |   let userInput = prompt("Enter a value for round off : ");
 31 |   let x = Math.round(userInput);
 32 |   console.log(x);
 33 | 
 34 |   // trunc() will only return you an interger value not a decimal value.
 35 |   let userInput = prompt("Enter a decimal value i will convert it into integre : ");
 36 |   let x = Math.trunc(userInput);
 37 |   console.log(x);
 38 | 
 39 |   // max() is used to find the maximun number from your given inputs.
 40 |   // min() us used to find the minimum number from your given inputs.
 41 | 
 42 |   let x = Math.min(2,4,5,6,7);
 43 |   console.log("The minimum value is  : " + x);
 44 | 
 45 |   let y = Math.max(10,20,30,40);
 46 |   console.log("The maximum value is  : " + y);
 47 | 
 48 | 
 49 | // sqrt() use to find the square root of any number
 50 | // cbrt()  use to find the cube root of any number
 51 | 
 52 |   let userInput = parseInt(prompt("For cbrt enter 1 and for sqrt enter 2 : "));
 53 |   if(userInput === 1){
 54 |       let x = parseInt(prompt("Enter a number : "));
 55 |       let y = Math.cbrt(x);
 56 |       console.log("The cubic root of this no is  : " + y);
 57 | 
 58 |   }
 59 |   else if(userInput === 2){
 60 |       let a = parseInt(prompt("Enter a number : "));
 61 |       let b = Math.sqrt(a);
 62 |       console.log("The square root of this no is  : " + b);
 63 |   }
 64 |   else{
 65 |       console.log("please select right operation");
 66 |   }
 67 |     
 68 |     // pow() is used to find the power of any value, there are two parameters in it one is the base and the other is how many time your want to multiply the number itself
 69 |     let usrInput = Math.pow(4,3);
 70 |     console.log("The ans is  : " + usrInput);
 71 | 
 72 |     // Random number guessing game in javascript using Math.random() function.
 73 |     // Random Number guessing game in javascript.
 74 |     let score = 0;
 75 | 
 76 |     function randomNumber() {
 77 |       return Math.floor(Math.random() * 10) + 1;
 78 |     }
 79 | 
 80 |     function startGame() {
 81 |       const guessNumber = randomNumber();
 82 |       const usrInput = parseInt(prompt("Guess a number between 1 to 10  : "));
 83 | 
 84 |       if (usrInput === guessNumber) {
 85 |         score += 5;
 86 |         alert(`Congratulations you guess the right number your score is ${score}`);
 87 |         const playAgain = confirm("Do you want to play again ? ");
 88 |         if (playAgain) {
 89 |           return startGame();
 90 |         } else {
 91 |           alert(`Thanks for playing your score is ${score}`);
 92 |         }
 93 |       } else {
 94 |         alert(`Sorry you guess the wrong number the number was ${guessNumber}`)
 95 |         startGame()
 96 |       }
 97 |     }
 98 | 
 99 |     startGame();
100 | 
101 |   // we have covered all maths functions and methods now the last one is our property which is called PI it is used to print the value of Pi.
102 |   let pi = Math.PI;
103 |   console.log("The value of PI is  : " + pi);
104 | 
105 | 
106 | 
107 | 
108 | 
109 | 
110 | 


--------------------------------------------------------------------------------
/Js-Events.html:
--------------------------------------------------------------------------------
  1 | // Javascript Evenst.
  2 | // Mouse Events.
  3 | // Click, Double Click, Right Click. Mouse Hover,Mouse out, Mouse up. Mouse Down
  4 | 
  5 | // Keyboard Events.
  6 | // Key Press, Key Up,
  7 | 
  8 | // Window Events.
  9 | //Load, Unload, Resize and Scroll.
 10 | 
 11 | // Events are used to call functions in javascript.
 12 | 
 13 | // onclick
 14 | <!DOCTYPE html>
 15 | <html lang="en">
 16 |   <head>
 17 |     <meta charset="UTF-8" />
 18 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 19 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 20 |     <title>lect-05</title>
 21 |     <script>
 22 |           function sayHi(){
 23 |             alert("Hello have a nice day!!")
 24 |           }
 25 |     </script>
 26 | 
 27 |     <style>
 28 |       body{
 29 |         background-color: aliceblue;
 30 |       }
 31 |       button{
 32 |         display: block;
 33 |         width: 150px;
 34 |         height: 50px;
 35 |         margin:100px auto 0px auto;
 36 |         border: none;
 37 |         outline: none;
 38 |         font-size: 18px;
 39 |         color: orangered;
 40 |         background-color: white;
 41 |         box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
 42 |         border-radius: 5px;
 43 |         cursor: pointer;
 44 |       }
 45 |     </style>
 46 |   </head>
 47 |   <body>
 48 |     <button onclick="sayHi()">Click me</button>
 49 |   </body>
 50 | </html>
 51 | 
 52 | //ondbclick
 53 | <!DOCTYPE html>
 54 | <html lang="en">
 55 |   <head>
 56 |     <meta charset="UTF-8" />
 57 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 58 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 59 |     <title>lect-05</title>
 60 |     <script>
 61 |           function sayHi(){
 62 |             alert("Hello have a nice day!!")
 63 |           }
 64 |     </script>
 65 | 
 66 |     <style>
 67 |       body{
 68 |         background-color: aliceblue;
 69 |       }
 70 |       button{
 71 |         display: block;
 72 |         width: 150px;
 73 |         height: 50px;
 74 |         margin:100px auto 0px auto;
 75 |         border: none;
 76 |         outline: none;
 77 |         font-size: 18px;
 78 |         color: orangered;
 79 |         background-color: white;
 80 |         box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
 81 |         border-radius: 5px;
 82 |         cursor: pointer;
 83 |       }
 84 |     </style>
 85 |   </head>
 86 |   <body>
 87 |     <button ondblclick="sayHi()">Click me</button>
 88 |   </body>
 89 | </html>
 90 | 
 91 | //oncontextmenu : rightclick
 92 | <!DOCTYPE html>
 93 | <html lang="en">
 94 |   <head>
 95 |     <meta charset="UTF-8" />
 96 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 97 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 98 |     <title>lect-05</title>
 99 |     <script>
100 |           function sayHi(){
101 |             confirm("Do you want to see the seetings")
102 |           }
103 |     </script>
104 | 
105 |     <style>
106 |       body{
107 |         background-color: aliceblue;
108 |       }
109 |       button{
110 |         display: block;
111 |         width: 150px;
112 |         height: 50px;
113 |         margin:100px auto 0px auto;
114 |         border: none;
115 |         outline: none;
116 |         font-size: 18px;
117 |         color: orangered;
118 |         background-color: white;
119 |         box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
120 |         border-radius: 5px;
121 |         cursor: pointer;
122 |       }
123 |     </style>
124 |   </head>
125 |   <body>
126 |     <button oncontextmenu = "sayHi()">Click me</button>
127 |   </body>
128 | </html>
129 | 
130 | // onmouseout
131 | <!DOCTYPE html>
132 | <html lang="en">
133 |   <head>
134 |     <meta charset="UTF-8" />
135 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
136 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
137 |     <title>lect-05</title>
138 |     <script>
139 |           function sayHi(){
140 |             confirm("Do you really wants to leave the window")
141 |           }
142 |     </script>
143 | 
144 |     <style>
145 |       body{
146 |         background-color: aliceblue;
147 |       }
148 |       button{
149 |         display: block;
150 |         width: 150px;
151 |         height: 50px;
152 |         margin:100px auto 0px auto;
153 |         border: none;
154 |         outline: none;
155 |         font-size: 18px;
156 |         color: orangered;
157 |         background-color: white;
158 |         box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
159 |         border-radius: 5px;
160 |         cursor: pointer;
161 |       }
162 |     </style>
163 |   </head>
164 |   <body>
165 |     <button onmouseout = "sayHi()">Click me</button>
166 |   </body>
167 | </html>
168 | 
169 | //onmouseenter
170 | <!DOCTYPE html>
171 | <html lang="en">
172 |   <head>
173 |     <meta charset="UTF-8" />
174 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
175 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
176 |     <title>lect-05</title>
177 |     <script>
178 |           function sayHi(){
179 |             alert("OHHH you are hovering me..!")
180 |           }
181 |     </script>
182 | 
183 |     <style>
184 |       body{
185 |         background-color: aliceblue;
186 |       }
187 |       button{
188 |         display: block;
189 |         width: 150px;
190 |         height: 50px;
191 |         margin:100px auto 0px auto;
192 |         border: none;
193 |         outline: none;
194 |         font-size: 18px;
195 |         color: orangered;
196 |         background-color: white;
197 |         box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
198 |         border-radius: 5px;
199 |         cursor: pointer;
200 |       }
201 |     </style>
202 |   </head>
203 |   <body>
204 |     <button onmouseenter = "sayHi()">Click me</button>
205 |   </body>
206 | </html>
207 | 
208 | // onmousedown
209 | <!DOCTYPE html>
210 | <html lang="en">
211 |   <head>
212 |     <meta charset="UTF-8" />
213 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
214 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
215 |     <title>lect-05</title>
216 |     <script>
217 |           function sayHi(){
218 |             alert("OHHH you are clicking me..!")
219 |           }
220 |     </script>
221 | 
222 |     <style>
223 |       body{
224 |         background-color: aliceblue;
225 |       }
226 |       button{
227 |         display: block;
228 |         width: 150px;
229 |         height: 50px;
230 |         margin:100px auto 0px auto;
231 |         border: none;
232 |         outline: none;
233 |         font-size: 18px;
234 |         color: orangered;
235 |         background-color: white;
236 |         box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
237 |         border-radius: 5px;
238 |         cursor: pointer;
239 |       }
240 |     </style>
241 |   </head>
242 |   <body>
243 |     <button onmousedown = "sayHi()">Click me</button>
244 |   </body>
245 | </html>
246 | 
247 | //onmouseup
248 | <!DOCTYPE html>
249 | <html lang="en">
250 |   <head>
251 |     <meta charset="UTF-8" />
252 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
253 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
254 |     <title>lect-05</title>
255 |     <script>
256 |           function sayHi(){
257 |             alert("OHHH you are clicking me..!")
258 |           }
259 |     </script>
260 | 
261 |     <style>
262 |       body{
263 |         background-color: aliceblue;
264 |       }
265 |       button{
266 |         display: block;
267 |         width: 150px;
268 |         height: 50px;
269 |         margin:100px auto 0px auto;
270 |         border: none;
271 |         outline: none;
272 |         font-size: 18px;
273 |         color: orangered;
274 |         background-color: white;
275 |         box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
276 |         border-radius: 5px;
277 |         cursor: pointer;
278 |       }
279 |     </style>
280 |   </head>
281 |   <body>
282 |     <button onmouseup = "sayHi()">Click me</button>
283 |   </body>
284 | </html>
285 | 
286 | // The kay events or keyboards events can only works inside a body tag or inside a form tag.
287 | <!DOCTYPE html>
288 | <html lang="en">
289 |   <head>
290 |     <meta charset="UTF-8" />
291 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
292 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
293 |     <title>lect-05</title>
294 |     <script>
295 |           function sayHi(){
296 |             alert("OHHH you are using yourkeyboard :(")
297 |           }
298 |     </script>
299 | 
300 |     <style>
301 |       body{
302 |         background-color: aliceblue;
303 |       }
304 |       button{
305 |         display: block;
306 |         width: 150px;
307 |         height: 50px;
308 |         margin:100px auto 0px auto;
309 |         border: none;
310 |         outline: none;
311 |         font-size: 18px;
312 |         color: orangered;
313 |         background-color: white;
314 |         box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
315 |         border-radius: 5px;
316 |         cursor: pointer;
317 |       }
318 |     </style>
319 |   </head>
320 |   <body  onkeydown = "sayHi()">
321 |     <button>Click me</button>
322 |   </body>
323 | </html>
324 | 
325 | // onkeyup
326 | <!DOCTYPE html>
327 | <html lang="en">
328 |   <head>
329 |     <meta charset="UTF-8" />
330 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
331 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
332 |     <title>lect-05</title>
333 |     <script>
334 |           function sayHi(){
335 |             alert("OHHH you are using yourkeyboard :(")
336 |           }
337 |     </script>
338 | 
339 |     <style>
340 |       body{
341 |         background-color: aliceblue;
342 |       }
343 |       button{
344 |         display: block;
345 |         width: 150px;
346 |         height: 50px;
347 |         margin:100px auto 0px auto;
348 |         border: none;
349 |         outline: none;
350 |         font-size: 18px;
351 |         color: orangered;
352 |         background-color: white;
353 |         box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
354 |         border-radius: 5px;
355 |         cursor: pointer;
356 |       }
357 |     </style>
358 |   </head>
359 |   <body  onkeyup = "sayHi()">
360 |     <button>Click me</button>
361 |   </body>
362 | </html>
363 | 
364 | 
365 | 
366 | 
367 | 


--------------------------------------------------------------------------------