Skip to content

Commit 54d2c61

Browse files
codingwithsaleemcodingwithsaleem
committed
completed
1 parent af40915 commit 54d2c61

17 files changed

+1141
-0
lines changed

‎1-helloworld.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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>javaScript</title>
8+
</head>
9+
<body>
10+
<h1>learn javaScript</h1>
11+
<script>
12+
console.log("hello world")
13+
alert("hi")
14+
15+
16+
17+
</script>
18+
19+
</body>
20+
</html>

‎10-arrays.html

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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>Arrays in javaScript</title>
8+
</head>
9+
<body>
10+
<script>
11+
// let arry=["saleem",4,"Ali",undefined,null];
12+
// console.log(arry);
13+
// document.write(arry);
14+
// console.log(arry[2]);
15+
// document.write(arry[2]);
16+
17+
// also we can use this method
18+
// let arr=new Array ( "saleem",4,"Ali",undefined,null);
19+
// console.log(arr.length);
20+
// // arrays methods
21+
// arr.pop();
22+
// // console.log(arr.length);
23+
// arr.push("hassan");
24+
// // console.log(arr);
25+
// arr.splice(1,3); //it will remove from index 1 to 3
26+
// console.log(arr);
27+
28+
//practice
29+
30+
let students =[44,77,99,88,99,"fale",null,undefined];
31+
// for(i=0; i<students.length; i++){
32+
// console.log(students[i]);
33+
34+
// }
35+
36+
// using for of loop
37+
console.log(students.length);
38+
39+
for (const elements of students) {
40+
console.log(elements);
41+
}
42+
43+
44+
</script>
45+
</body>
46+
</html>

‎11-JavaScript-in-browser.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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>javaScript in browser</title>
8+
9+
</head>
10+
<body>
11+
12+
<!-- // two ways to run your javaScript
13+
1: using script tag in under body tag. which you can see we are also doing.
14+
example:
15+
<script>
16+
javaScript code
17+
</script>
18+
2: using extrenal final with src link
19+
example:
20+
<script src="#your file location"></script>
21+
22+
note: we suggest to use the 2nd method the extrenal file with src link.
23+
because it will seprate your concerns and provide browser caching which browser will save your file in his temporary memory which it will not reload your file again.
24+
now i am making extrenal javaScript file and now we will only use 2nd method.
25+
note: always give your script file link before body closing tag -->
26+
27+
28+
<script src="/javaScript/javaScript-in-browser.js"></script>
29+
</body>
30+
</html>

‎12-DOM.html

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
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>javaScript document object model</title>
8+
<style>
9+
*{
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
14+
}
15+
nav.navBar ul{
16+
display: flex;
17+
justify-content: space-around;
18+
align-items: center;
19+
background: #000;
20+
padding: 10px 10px;
21+
22+
}
23+
nav.navBar ul li{
24+
list-style: none;
25+
}
26+
nav.navBar ul li a{
27+
text-decoration: none;
28+
color: #fff;
29+
30+
31+
}
32+
</style>
33+
</head>
34+
<body>
35+
<header>
36+
<nav class="navBar">
37+
<ul>
38+
<li><a href="#">home</a></li>
39+
<li><a href="#">about</a></li>
40+
<li><a href="#">sevices</a></li>
41+
<li><a href="#">contact us</a></li>
42+
</ul>
43+
</nav>
44+
</header>
45+
<script>
46+
//1
47+
//create a navBar and change the color of first element to red
48+
49+
// let a= document.getElementsByTagName("a")
50+
// console.log(a)
51+
// a[0].style.color="red"
52+
53+
//2
54+
//change first and last element child of color to green
55+
56+
// b=document.getElementsByTagName("a")
57+
// b[0].style.color="green"
58+
// b[b.length-1].style.color="green"
59+
60+
//3
61+
//change the background of all li
62+
Array.from(document.getElementsByTagName("li")).forEach(element=>{
63+
element.style.backgroundColor="red"
64+
})
65+
66+
67+
68+
69+
70+
71+
72+
73+
74+
75+
76+
77+
78+
79+
80+
81+
82+
</script>
83+
</body>
84+
</html>

‎2-variables.html

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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>variables in javaScript</title>
8+
</head>
9+
<body>
10+
11+
12+
<script>
13+
// rules for javaScript variables:
14+
// 1: starting with number will not allow
15+
// example: let 1ali= 65;
16+
// 2: javaScript reserved word cannot used as variables
17+
// 3: javaScript is caseSencsitive
18+
19+
var x=3;
20+
var y=5;
21+
console.log(x);
22+
console.log(y);
23+
// for declering variables we use var,let,const
24+
25+
// mostly we avoid the var in programming due to it may be creat some bugs
26+
// so we prefer to use let and const variables
27+
28+
// we have 7 types of premitive datatypes in javaScript
29+
// datatypes means which type of data we can store in variables
30+
// NNSSBBU= null,number,symbol,string,boolean,bigint and undefind these are the seven datatypes
31+
// premitive datatype example:
32+
33+
let a=null;
34+
let b=5;
35+
let c=Symbol("i am a symbol");
36+
let d="saleem";
37+
let e=true;
38+
let f=BigInt("889")+ BigInt("999");
39+
let g // this is undefined;
40+
console.log(a,b,c,d,e,f,g);
41+
42+
43+
44+
45+
46+
47+
48+
49+
50+
</script>
51+
</body>
52+
</html>

‎3-objects.html

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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>objects in javaScript</title>
8+
</head>
9+
<body>
10+
<script>
11+
//we use [ ] for arrays
12+
// and { } for objects
13+
// object is non-premitive datatype
14+
15+
let student={
16+
firstName: "Saleem ",
17+
lastName: "Raza",
18+
age: 20,
19+
country: "Pakistan"
20+
21+
};
22+
console.log(student);
23+
console.log(student.country);
24+
25+
// example-2
26+
const car={
27+
make: "toyota",
28+
model: "wish",
29+
year: "2015",
30+
chissNumber: "HTN-38848",
31+
mileage: "2923KM"
32+
33+
34+
};
35+
console.log(car);
36+
console.log(car.make);
37+
38+
39+
</script>
40+
</body>
41+
</html>

‎4-operators.html

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
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>javaScripts operators</title>
8+
</head>
9+
<body>
10+
<script>
11+
/* //operators:
12+
befor understanding operator first understansd operand:
13+
operand= entities in which operators operate
14+
example: 3+5=8 ( in this example the 3 and 5 are operand and the plus sign(+) is operator)
15+
some operators are :
16+
17+
1: unary operator:
18+
it has single operand
19+
example x=-x (in which only one operator which is "x")
20+
21+
2: binary: it has more then one operands.
22+
example: a=b+c
23+
24+
3: Arithmatic operators:
25+
arithmatic operators are : plus(+),negative(-),divide(/),multiply(*),modulas(% which mean reminder of any division),exponention(**),increment(++),decrement(--)
26+
27+
4: Assignment operators:
28+
asssignment operators are: (=),(+=),(*=),(**=)
29+
30+
5: String operators:
31+
the plus(+) operator can also be used for concatenation string.
32+
33+
6:Comparision Operators:
34+
Comparision operators are: equal to(==),equal value and equal type(===),not equal(!=),grater then and equal(>=),ternary operator (?).
35+
36+
7: Logical operators:
37+
AND(&&),OR(||),NOT(!)
38+
39+
8: type operator:
40+
1: typeof(return the type of variable )
41+
2: instanceof(instance of an object type)
42+
43+
9: bidwise Operator:
44+
*/
45+
46+
// some programs practices using operators:
47+
48+
49+
let a=7;
50+
let b=7;
51+
let d=4;
52+
c=a+b;
53+
d+=b; //we can also write d=d+b;
54+
console.log(c);
55+
console.log(d);
56+
console.log(a++);
57+
console.log(a+b);
58+
console.log(a--);
59+
console.log(a+=b);
60+
61+
62+
63+
64+
65+
66+
</script>
67+
</body>
68+
</html>

‎5-if_else_condition.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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>if else condetion in javaScript</title>
8+
</head>
9+
<body>
10+
<script>
11+
let a= prompt("enter your age");
12+
if(a>=18 && a<=25){
13+
console.log(" congratulation \n you can ride or drive");
14+
}
15+
else if(a<18){
16+
console.log("sorry! \n you cannot driver nor ride");
17+
18+
}
19+
else{
20+
console.log("you enter wrong number")
21+
}
22+
23+
// tenary operators:
24+
console.log("you can" , (a<18? "not drive" : "drive"));
25+
26+
27+
28+
29+
</script>
30+
</body>
31+
</html>

0 commit comments

Comments
 (0)