justinbmeyer/javascript.md

## javascript.md

      
    Raw
  

              javascript.md
            
          
    Before learning JavaScript, it's important to learn how it fits into the larger picture of the Browser and DOM (and your web app).
To start, lets walk through a very basic "Hello World" web page. Assume that the server at helloworld.com has this HTML file:
<html>
  <head>
    <script type='text/javascript'>
      alert('Hello JS');
    </script>
  </head>
  <body>
    <h1>Hello DOM</h1>
  </body>
</html>
What happens immediately after a user enters the URL for helloworld.com and presses enter?


First, the browser creates a HTTP request for index.html. The server returns the HTML as part of the HTTP response.


The browser feeds the HTML to it's DOM engine which begins processing the HTML and building a HTML document and its HTML elements. In this example, it creates a DocumentElement when it sees the html tag, and a child head element when it sees the head tag.


When a script tag is encountered, the browser passes the contents of that script tag to it's JavaScript engine to be evaluated.


The JavaScript engine tokenizes and parses the code and runs it statement by statement. When it sees alert("Hello JS"), it looks up the function alert references, and calls it with "Hello JS" as an argument. Alert pauses JavaScript execution until a user clicks ok. Once the user clicks ok, JavaScript moves to evaluate the next statement ... which in this case, there is none.


When JavaScript has finished running, the DOM resumes processing the remaining HTML. It creates the body element and the H1 element, displaying the text "Hello Dom" to the user.


It's important to notice that JavaScript execution pauses the processing of HTML into DOM Elements. We don't see "Hello Dom" until after "Hello JS" has been displayed and the user clicked "ok".
Now, if we change the script tag to <script src="js/hellojs.js"></script> the process is very similar to before; however there will be an additional HTTP request made to the server to retrieve the JavaScript file. While the file is being retrieved AND while the JavaScript is being evaluated, the DOM is paused. That is why it is important to load JavaScript in the bottom of the page: so that the user is able to see the content of the web page before the JavaScript is loaded.
Our revised HTML:
<html>
  <head>
  </head>
  <body>
    <h1>Hello DOM</h1>
    <script src="js/helloworld.js"></script>
</body> 
</html>
Code in languages like Java or C is compiled to byte or machine code. When your app runs, it reads instructions from code and operates on data.js
Dynamic Languages, like JavaScript are different. Instead of a strong separation between code and data, your application's code and data is built one statement at a time. You are effectively programming your program.
For example, what happens when a script tag like <script type='text/javascript' src='myapp.js'></script> loads the following code?
var JS = {};
JS.says = function(message){
  alert('JavaScript Says "'+message+"'")
};

JS.says("Hello World");
After making an HTTP request for the contents of myapp.js, it passes the contents to the browser's JavaScript engine. The JavaScript engine tokenizes, and parses the code. Then it runs each statement, one at a time, building your program in memory. Lets look at this visually:
Dynamic Language
Explanation of graphical representation of JavaScript
Types Primitive v Object Types
Functions

functions don't belong to any object / class
"this"
Closures

Prototypal Inheritance

DOT operator
NEW operator