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"
Sources - [ChatGPT, W3Schools, mdn, lydia hallie, Apna college, Akshay saini etc. ]
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 OR class(modern JS) for inheritance.
- 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
- Similarly we can attach CSS to HTML in head of html like =>
<link rel="stylesheet" href="style.css">
- Using innerHTML. [Common way- document.getElementById(id)]
- Writing into the browser console, using console.log(). [Used for debugging]
- Writing into an alert box, using window.alert(). OR just alert().
- Js print [window.print()]
- Using document.write().[delete all existing HTML, used for testing]
NOTE : How to take input data => prompt()
NOTE : We can not run js on browser directly, HTML connects our code(JS) to browser.
NOTE : If you write script tag in head, you woun't be able to access document elements console.dir(document.body); // will give nothing => That's why we put script at the end.