E2E JS
Content => JS INTRO, VARIABLES, OPERATORS
- Node (v20 or above)
- VsCode
- Clone a repo from github in local.
- Open in VsCode
- create a file with .js extension
- to run a simple JS program run -
node filename=> e.g- "node intro.js"
Computer is an electronic device which takes input from user, process it under the control of
programs and gives output to the users and saves in the storage.
Program- It is a set of instruction(s). We can write pgms in any lang.
- Low level lang(1st & 2nd GEN)
- High level lang [3rd(c++, Java, JS ), 4th(Python), 5th(Ruby, Perl), Rust, c#, swift, Go ]
Compiled vs Interpreted languages
Compiled-
- First need to compile(generates compiled file=> temp in c++, .class in java) then RUN.
- Don't run at all if there is error.
- E.g. = c, c++, Java, Rust, Go
Interpreted-
- Usually go line by line.
- Partially run till error encounters.
- E.g. = JS, Python
JS is Interpreted, dynamically typed, (FP && OOPS), executed by browser and single threaded lang.(We can make node multithreaded). JavaScript is an OOPs language that uses prototypes rather than using classes for inheritance. We can use classes for inheritance(ES6) in more clean/intuitive way.
- JS is only language that a browser understands. (We have other languages that transpiled to JS e.g. TS, Dart, WebAssembly)
- JS can Change/Show/Hide HTML content.
- JS can change HTML styles (CSS).
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html> [Placing scripts at the bottom of the <body> element improves the display speed]
document.getElementById("demo").style.fontSize = "35px"; -- Changing CSS using JS
- It separates HTML and code thus easier to read and maintain.
- Cached JavaScript files can speed up page loads.
External JS References
- With a full URL
<script src="https://www.w3schools.com/js/myScript.js" > </script> - With a file path
<script src="/jsLogic/myScript.js defer"></script>) // Here defer attribute ensures that script is executed after HTML is fully parsed (avoids loading HTML). Add script tag in head of HTML - Without any path
- Using innerHTML. [Common way- document.getElementById(id)]
- Using document.write().[delete all existing HTML, used for testing]
- Writing into an alert box, using window.alert(). OR just alert().
- Writing into the browser console, using console.log(). [Used for debugging]
- Js print [window.print()]
- JS Code Blocks {}
- JS Statements(Instructions)
- Keywords, Comments, [JS identifiers are case sensitive.]
- Variables are container for storing data.
Note - JS variable can hold any type of data. (Variable name can start with $,_ or with alphabets only).
- VARIABLE Declaration & initialization
- Global scope & block scope
Note - Before ES6, JS had only Global scope and function scope, there was nothing like block scope.
- let => Block Scope, cannot be Redeclared in the same scope, can be reassign
- const => Block Scope, cannot be Redeclared in the same scope, can'nt be reassign, must be assign a value when decleared. It does not define a constant value. It defines a constant reference to a value. Means we can'nt Reassign a constant array but can change elements of array(same for objects)
- var => Global scope, can be Redeclared.
Note - let and const does not bind this.
const cars = ["Saab", "Volvo", "BMW"]; // We can not reassign this const array but can change the elements of array.
cars = ["Toyota", "Volvo", "Audi"]; // ERROR - Expressions(Algebra)
- Arithmetic Operators [ + , - , * , / , % , **(exponential), ++ -- ]
- Assignment operator [ = ] (See logical assignment operator.)
- Comparison Operators [ ==, !==, < , <= , > , >= , ===(equal value and equal type) , !==(not equal value or equal type)]
- Loical operators [ && , || , ! ]
- Type oprators[typeof(Returns the type of a variable), instanceof(Returns true if an object is an instance of an object type)]
- Bitwise Operators [ &, | , ~(not- uniary operator) , ^(xor) , << , >> , >>>]
- Ternary operator ( ? )
Note - Bit operators work on 32 bits numbers.
Note - Nullish coalescing assignment operator(??=) => If the first value is undefined or null,the second value is assigned.