JavaScript: -Light weight Interpreted and JIT compiled programming language Light weight=>occupy less memory Interpreted=> line by line Compiled: translated at a time JIT-translates only when requested AOT-translates before its requested In browser who will compile/interpret your code: Browser engine Outside who will compile the code: -babel -V8 -node JS is a language that supports various programming paradigms: -structural programming -functional programming -imperative programming -OOPS JS is a language used in various application areas: -client side -server side -database -animation Why JS is called client side? How it will reduce the burden? -DOM Manipulation 1)Adding elements 2)updating data into element 3)handling styles dynamically BOM (Browser Interaction) History Navigation Location Document validation Send data to server only what is required Evolution of JS: CERN[council for European research and nuclear] lab built a script called ECMA for a browser called mosaic. Mosaic is the first browser. Netscape communication developed a browser called as Netscape communicator very popular browser ECMA script was not good for them so they hired a person called brendon to design scripting language he designed mocha which was later renamed to livescript unable to manage the live script so they gave it to sun microsystem they renamed it to Java script Issues of JS: -Not a strongly typed language ex: int age we have defined the type of variable as integer but in JS we don't define the type ex: var a; -Not strictly typed language -Not following programming rules (using shortcuts) -lot of inconsistency in code will come -JS is implicitly not strict we need to make it externally ex: -not an OOP language,it supports some feature of OOPS solution for this -Typescript Integrating JS into browser Just like CSS: -Inline -Embedded -External Inline:

Hi all

Embedded: writing ur java script code inside the same file Question here is whether we need to write inside - tag or inside tag There is no rule defined for writing your code either inside head or body using concept called roundtrip we decide as a dev that where we should write our code which wouldn't hamper the performance Round trip: Round trip is a communication mechanism used by server and client architecture. In head section we keep content which is requested frequently: title link meta script style base mime (multipurpose internet mail extension) its used to identify type of data.its used so that software can know how to handle it ex: in ur system u have files with extension as .htm,.pdf,.jpg Issue with emebedded: Ways to access the elements: -using DOM hierarchy -its a native method for browser -faster to access and render -use index for element which needs to update constantly ex: Register

Register

challenges: -using index and navigating to element increase ur code length -also if the element position changes it will again create an issue -code needs to be updated JS can access the element by using reference name -access the element directly by referring his name challenges: -if we have multiple parents for the element the code will be lengthy -name is not unique ex: Register

Register

JS can reference element by using ID using document method document.getElementById("") hybrid: -window.form[1].btnRegister="xys" CSS has various selectors -type -class -id -rational -structural etc JS uses document.querySelector() for referring selectors syntax: -
document.querySelector("img").src="../aagag" document.querySelector(".btn).value="xyd" document.querySelector("#container").xxxx="sgsg" How to access button without a class? document.querySelector("input[type=button]").value="agag" ex: we have other methods available who doesn't target a single element but multiples: -document.getElementsByTagName() -document.getElementsClassName() Why we need language? -for communication(send request and get response) Any language we will get input and output mechanism Js input methods -Query String Prompt Form Input elements Output: alert() confirm document.write innerHTML innerText console methods JS output techniques rendering some info/content on UI/screen alert() -browser window method -pops a msgbox in browser -display a message or result -not allowed to perform any other task alert("message|expression") alert("welcome") alert(10+20) alert("addition" + (30+40)) it doesn't allow formats alert("hello") return hello \n no cancel ,provides only ok to confirm confirm -similar to alert -option to cancel Boolean: ok true cancel-false confirm("message|expression") document.write render output on new screen render message|expression|markup document.write("message|expression|markup") innerText and textContent these are output methods and properties that can render output into any HTML container that can display text

  • ex: Output

    note: innerText and textContent are same document.querySelector("p").textContent="message|expression" innerHTML -similar to textContent|innerText but it can do formatting syntax: document.querySelector("p").innerHTML="message|expression|markup" outerHTML: -outerHTML is used to replace the current content with specified new element -innerHTML is used to append current content into target element document.querySelector("p").outerHTML = "Deleted" Input: -A page can accept input from user in order to process the request and get customer response -queryString -prompt -form input elements queryString: -from URL a query string is appended to URL by question mark? key and value collection http://127.0.0.1:5500/public/output.html?key=value key can be any name and value always has to be a string even if u type a number it will be treated as a string ex: Output

    Hello!!

    prompt its a window method it pops up a input box to allow user input a value prompt syntax: prompt("Enter msg","optional message") prompt will return three different results based on scenario: -User doesn't enter anything but click ok=>will return empty -User enter value and click OK =>will return that value -User Click cancel=>will return null Output

    note: Cannot change anything inside prompt except message form input elements: -include checkbox,inputbox radio button,dropdown etc -JS can use DOM methods to access value from these elements Output

    https://leetcode.com/studyplan/30-days-of-javascript/ designing a input form ( ex : Inox movies) Inox //getting values from user and displaying it Inox