Skip to content

Commit 927e759

Browse files
committed
updated varBas with additional info
1 parent 6a507eb commit 927e759

File tree

1 file changed

+65
-0
lines changed

1 file changed

+65
-0
lines changed

JavaScript Outlines/Variables&DataTypes.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -402,10 +402,75 @@
402402
console.log(emailGreeting()) //=> Hello Joe,
403403

404404

405+
/*
406+
What is a browser and how does a webpage render?
407+
408+
• A browser is a piece of software made up of several components responsible for specific pieces of work.
409+
410+
o The browser is an orchestration of a bunch of little engines.
411+
 HTML, CSS, JS, HTTP, Events, and other engines that are manipulating the DOM, which is an in-memory representation of what your web page looks like.
412+
413+
o A browser renders website by sending a request, getting and processing it, displaying it, and updating it.
414+
 When you type in an address in your browser, the bowser uses an http engine to access the internet and make a request from the user to get the website.
415+
 The server accepts that request and sends back all the files the user requested.
416+
 Now that the bowser has all the files (e.g. HTML, CSS, JavaScript), those engines process those files to build up the DOM and displays it on the page.
417+
 When you interact with the page (i.e. event) will alter the DOM and update (i.e. re-renders) the display.
418+
419+
o The browsers HTTP engine handles requests and Reponses.
420+
 The browser sends a request, the server sends a response if it is valid.
421+
422+
o The browser only understands JavaScript as the scripting language here.
423+
 The bowser does not understand angular or react, it only understands JavaScript.
424+
425+
*/
426+
427+
428+
/*
429+
How does a browser handle a JS file when it hits the JavaScript engine?
405430
431+
• A browser handles JS by allocating chunks of memory, creating a global object, process it in 2 phases (creation and execution), assign values to variables, and set aside memory for calls.
406432
407433
434+
o The JavaScript engine is in control even before you feed it any JavaScript.
435+
 JavaScript will reach the browser via the JS. In fact, the JavaScript will reach the browser even if the there is no code in the JS file. This is because only the JavaScript engine reaches the DOM. The code that you write only goes as far as the JavaScript file. In a way, the engine rewrites the code.
436+
 The JavaScript engine creates the window object before any JS is fed to it.
408437
438+
The Process for executing JavaScript:
439+
440+
441+
o First , a chunk of memory is created by the JavaScript engine to execute code in it.
442+
 This is called an execution context and is known as global execution.
443+
 However, the best way to think of this is as a chunk of memory.
444+
445+
o Second , the JavaScript engine creates an global object.
446+
 This global object is created inside the execution context and creates a variable called this which is set to a window object. (this = obj  obj: window).
447+
• So if you type “this” in your browser, you will see the window object.
448+
• This is what will happen every time you feed a JavaScript file to a JavaScript engine.
449+
450+
o Third , if there is code to process, the JavaScript completes 2 phases in the first pass.
451+
 The first phase is the creation phase.
452+
• In the creation phase, where the engine looks for variables and functions.
453+
o If the JavaScript engine passes a variable, it sets aside some memory and hoists the variable up-top to refer to later. Initially, a variable is set to undefined as all variables are.
454+
o If the JavaScript engine passes a function, it will grab the whole value and put that into memory.
455+
 The second phase is the execution phase.
456+
• In the execution phase, the engine processes all the code.
457+
458+
Window.a = undefined;
459+
Window.foo = function foo() {…};
460+
461+
o Fourth , on the second pass, the engine assigns values to variables.
462+
 The variable that memory was set aside for is now assigned a value ( let foo = ‘Hi’ )
463+
Window.a = ‘Hi’;
464+
Window.foo = function foo() {…};
465+
466+
467+
o Fifth , function calls set aside a piece of memory
468+
 The chunk of memory is created using the execution context with the value of “foo”.
469+
 Then, the JavaScript engine creates an object with the value of foo ( obj: foo ) and also a context for this called foo ( this = foo ).
470+
 The engine will also reference the outer environment (i.e. scope), which is pointing to the global context in this case.
471+
472+
473+
*/
409474

410475

411476

0 commit comments

Comments
 (0)