Skip to content

Commit d9bee7a

Browse files
AnkitKumarMishra5AnkitKumarMishra5
committed
JavaScript: Fundamentals, Data Types, Popups, Operators
1 parent ada0898 commit d9bee7a

4 files changed

Lines changed: 231 additions & 0 deletions

File tree

‎JavaScript/Basics.html‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>JavaScript</title>
7+
</head>
8+
<body>
9+
<h1 id="main-heading"></h1>
10+
<script>
11+
// console.log('Rick')
12+
// console.log('Dee')
13+
// console.log('Sylvia')
14+
// console.log(5)
15+
// console.log(false)
16+
// console.log(undefined)
17+
// console.log(null)
18+
19+
// var x // Declaring x variable
20+
// var x = 10 // Initializing x variable
21+
22+
// var x = 10
23+
// const PI = 3.14 // Constant
24+
25+
// x = 20 // Assign 20 to x
26+
27+
// console.log(x)
28+
29+
// var city = 'New York'
30+
// var lastName = "Ashton"
31+
// var test1 = 10
32+
33+
var x = 10
34+
// console.log(x)
35+
// alert(x)
36+
// document.write(x)
37+
document.getElementById('main-heading').innerHTML = 'Introduction to JavaScript'
38+
</script>
39+
<!-- <script src="script1.js"></script> -->
40+
</body>
41+
</html>
42+
43+
<!--
44+
# JavaScript:
45+
- Programming Language
46+
- Used in web development to make websites dynamic/interactive
47+
- Used to add logic in Client (FE), Server (BE), Mobile Applications, etc.
48+
49+
- Add JavaScript to HTML
50+
- script tag (Head/Body)
51+
- Internal: <script>console.log('Hi')</script>
52+
- External: <script src="[link]"></script>
53+
54+
- Data Types ***
55+
- Primitive
56+
- String (Eg.:'Jonathan', 'New York', 'A', etc.)
57+
- Number (Eg.: 5, 37483499, 12.76, -102, etc.)
58+
- Boolean (true / false)
59+
- null (Empty placeholder, set manually)
60+
- undefined (Default value)
61+
- Non Primitive
62+
- Objects
63+
64+
- Variables & Constants:
65+
- Store data
66+
- Variables: Changing over time (var)
67+
- Constant: Remains fixed over time (const)
68+
- Syntax:
69+
- var x = 10
70+
- const name = 20
71+
- Declare/Initialize (Either)
72+
- Declare: var x
73+
- Initialize: var x = 10
74+
- Assign: x = 20
75+
- Naming conventions:
76+
- Never start with number
77+
- Cannot contain spaces (single word - camelCase)
78+
- Cannot contain special characters other than _ and $
79+
- Cannot use reserved keywords
80+
81+
- Display Output
82+
- console.log("Hi") **: Console
83+
- alert(): Basic popup on the webpage
84+
- document.write(): Appends data to the HTML document
85+
- document.getElementById('id').innerHTML: Add HTML inside an element with a specific ID
86+
87+
- Additiona note:
88+
- JS is loosely typed language
89+
- Comment:
90+
- Single line: //
91+
- Multi-line: /* */
92+
93+
# Future
94+
- Objects
95+
- var/let/const
96+
-->

‎JavaScript/Operators.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Operators</title>
7+
</head>
8+
<body>
9+
<h1>Operators</h1>
10+
<script>
11+
/*
12+
# Operators: Perform logical operations
13+
- Arithmetic Operators **
14+
- Addition (+)
15+
- Subtraction (-)
16+
- Multiplication (*)
17+
- Division (/)
18+
- Modulus (Remainder) (%)
19+
- Increment (++)
20+
- Pre-increment (++x): Increment, then access
21+
- Post-increment (x++): Access, then increment
22+
- Decrement (--)
23+
- Pre-decrement (++x): Decrement, then access
24+
- Post-decrement (x++): Access, then decrement
25+
- Exponential (**)
26+
- Assignment Operators
27+
- Assignment (=)
28+
- Addition Assignment (+=)
29+
- Subtraction Assignment (-=)
30+
- Multiplication Assignment (*=)
31+
- Division Assignment (/=)
32+
- Modulus Assignment (%=)
33+
- Exponential Assignment (**=)
34+
- Comparison Operators ** (Return boolean: true/false)
35+
- Greater than (>)
36+
- Lesser than (<)
37+
- Greater than or equal to (>=)
38+
- Lesser than or equal to (<=)
39+
- Equality Operator (==): Equal value, not data type
40+
- Identity Operator (===): Equal value + data type (Strict equality operator)
41+
- Inequality Operator (!=): Not equal
42+
- Non-Identity Operator (!==): Not equal + data type
43+
- Logical Operators ** (Return boolean: true/false)
44+
- Logical AND (&&): All TRUE -> TRUE
45+
- Logical OR (||): ONE TRUE -> TRUE
46+
- Logical NOT (!): TRUE -> FALSE, FALSE -> TRUE
47+
*/
48+
49+
// var x = 20
50+
// var y = 10
51+
// var z = 15
52+
// var a = 20
53+
// console.log(x+y)
54+
// console.log(x-y)
55+
// console.log(x*y)
56+
// console.log(x/y)
57+
// console.log(x%z)
58+
59+
// console.log(++x)
60+
// console.log(x++)
61+
// console.log(x)
62+
63+
// console.log(--x)
64+
// console.log(x--)
65+
// console.log(x)
66+
67+
// console.log(4**2)
68+
69+
// x+=5 // x = x + 5
70+
// x-=5 // x = x - 5
71+
// x*=5 // x = x * 5
72+
// x/=5 // x = x / 5
73+
// x%=5 // x = x % 5
74+
// x**=5 // x = x ** 5
75+
76+
// console.log(x > y)
77+
// console.log(x < y)
78+
// console.log(x >= y)
79+
// console.log(x <= y)
80+
81+
// var a = 10
82+
// var b = 10
83+
// var c = '10'
84+
// console.log(a == b)
85+
// console.log(a == c)
86+
// console.log(a === c)
87+
// console.log(a != b)
88+
// console.log(a != c)
89+
// console.log(a !== c)
90+
91+
var x = 5
92+
var y = 10
93+
var z = 15
94+
95+
// console.log(z > y && z > x)
96+
// console.log(z > y || x > z)
97+
// console.log(!true)
98+
// console.log(!false)
99+
</script>
100+
</body>
101+
</html>

‎JavaScript/Popups.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Popups in JS</title>
7+
</head>
8+
<body>
9+
<h1>Popups in JS</h1>
10+
11+
<script>
12+
// alert('You have successfully logged in!')
13+
// var result = confirm('Are you sure you want to log out?')
14+
// console.log(result)
15+
// var result = prompt('Enter your name')
16+
// console.log(result)
17+
</script>
18+
</body>
19+
</html>
20+
21+
<!--
22+
# Popups
23+
- alert(): Alert box
24+
- Inform the user
25+
- One button: OK
26+
- confirm(): Confirmation box
27+
- Ask user yes/no based questions
28+
- Two buttons: OK, Cancel
29+
- prompt(): User input box
30+
- Collect user input
31+
- Two buttons: OK, Cancel
32+
- Input field
33+
-->

‎JavaScript/script1.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
console.log('Hi from external script1.js')

0 commit comments

Comments
 (0)