JavaScript: The Definitive Guide: Activate Your Web Pages (Definitive Guides)

Author: David Flanagan
4.5
All Stack Overflow 8
This Year Stack Overflow 1
This Month Stack Overflow 1

JavaScript: The Definitive Guide: Activate Your Web Pages (Definitive Guides)

4.5

Review Date:

Comments

by anonymous   2017-08-20

Briefly, with more detail below,

  • window is the execution context and global object for that context's JS
  • document contains the HTML
  • screen describes the physical display's full screen

See W3C and Mozilla references for details about these objects. The most basic relationship among the three is that each browser tab has its own window, and a window has window.document and window.screen properties. The browser tab's window is the global context, so document and screen refer to window.document and window.screen. More details about the three objects are below, following Flanagan's JavaScript: Definitive Guide.

window

Each browser tab has its own top-level window object. Each <iframe> (and deprecated <frame>) element has its own window object too, nested within a parent window. Each of these windows gets its own separate global object. window.window always refers to window, but window.parent and window.top might refer to enclosing windows, giving access to other execution contexts. In addition to document and screen described below, window properties include

  • setTimeout() and setInterval() binding event handlers to a timer
  • location giving the current URL
  • history with methods back() and forward() giving the tab's mutable history
  • navigator describing the browser software

document

Each window object has a document object to be rendered. These objects get confused in part because HTML elements are added to the global object when assigned a unique id. E.g., in the HTML snippet

<body>
  <p id="holyCow"> This is the first paragraph.</p>
</body>

the paragraph element can be referenced by any of the following:

  • window.holyCow or window["holyCow"]
  • document.getElementById("holyCow")
  • document.body.firstChild
  • document.body.children[0]

screen

The window object also has a screen object with properties describing the physical display:

  • screen properties width and height are the full screen

  • screen properties availWidth and availHeight omit the toolbar

The portion of a screen displaying the rendered document is the viewport in JavaScript, which is potentially confusing because we call an application's portion of the screen a window when talking about interactions with the operating system. The getBoundingClientRect() method of any document element will return an object with top, left, bottom, and right properties describing the location of the element in the viewport.

by anonymous   2017-08-20

Understanding pure JavaScript first would be your first objective and learning how objects are defined there. I recommend the JavaScript: the definitive guide By David Flanagan.

Once understanding the JS model you can start looking under the hood of jQuery and understand what is being done. jQuery just takes advantage of the JavaScript language making an easy to use framework: http://www.learningjquery.com/2008/12/peeling-away-the-jquery-wrapper

by anonymous   2017-08-20

where to begin... first of all it is considered good practice to put your javascript at the bottom of the document right before the closing body tag. see the following link for an explanation as to why that is:

http://developer.yahoo.com/performance/rules.html#js_bottom

when you include javascript files at the bottom of the document you will be forced to enclose your code into functions and bind those functions to different events. javascript is very much an event driven language.

this will encourage you to write better code that will be reusable throughout your project. I wont go into a big long lecture on writing good code but i recommend picking up a good book to get you started. like Javascript The Definitive Guide.

as to the code you currently have, here's how I would do it:

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
      <select id="dd_city"></select>
      <script>
          var initPage = function() {
              var cities = Array("London", "New York");
              var selectBox = document.getElementById("dd_city");

              for( var i = 0; i < cities.length; i++)
              {
                  var option = document.createElement("option");

                  option.setAttribute("value", i);
                  option.innerHTML = cities[i];
                  selectBox.appendChild(option);
              }
          };

          window.onload = initPage();
      </script>
    </body>
</html>

see it in action at my jsfiddle.

by anonymous   2017-08-20

1) this.foo = bar

The first kind you mention makes your variables properties of a (constructor) function. In JavaScript, functions are objects. Thus, using this makes a variable a property of an object (your constructor function, in this case).

2) var x = 7

Let me start off saying that anytime you do not use var in front of a variable (save for the this stuff above), that variable will become a member of the global context object (window, for most user-agents).

Thought leaders in JavaScript and programming see global variables as a sin, or code smell. Avoid global variables as much as possible.

The issue with the first method (this) is that prior to ECMAScript 5, there was no good way to enforce privacy on object properties (as you might find in the classical C++ based languages like Java, PHP, etc). ECMAScript 5 and above allow you to assign attributes to properties for things like writability, enumerability, etc...

However, as it pertains to var, well, var always makes its variables private to the function object. You cannot access a var variable from external, client code like this

dog.age = 5 //Trying to assign the number five to a var variable.

You can make a function that has access (known as an accessor), though. In effect, when you see var, think private to this object's scope. That's the gist of it. Closure (from enclosure) is an important subject in JavaScript. When you get into using var, inevitably you start to learn about closure.

3) No key word.

Finally, using naked variables attaches all of them to the global object (window, for most user-agents). This tends to lead to confusion and debugging issues. You may inadvertently stage a collision or conflict where a value is being changed across many instances of your constructor function. It's just not the way to go.

In summary, a fantastic book on the subject of JavaScript variables is The Principles of Object Oriented JavaScript. Mr. Zakas explains things much better than Crockford and Flannagan. I highly recommend it. Know your goal. Know your problem. Avoid global variables. Learn about JavaScript's object mode and scope. I recommend JavaScript: The Definitive Guide when it comes to learning about scope and context in JavaScript.