Notes from Professional JavaScript for Web Developers (1)

Posted on | In | 0 comments

Professional JavaScript for Web Developers
I planned to finish Professional JavaScript for Web Developers 3rd Edition within three months. I downloaded an electronic version from Github, and the main content has 900 pages. I would read 10 pages daily after work on average, then I need 90 days for 900 pages from Feb 10 - May 10.

Chapter 1: What is Javascript?

A complete Javascript implementation is made up of three distinct parts: ECMAScript, DOM and BOM.

The Core (ECMAScript)

ECMAScript is simply a description of a language implementing all of the facets described in the specification. On a very basic level, it describes the following parts of the language:
➤ Syntax
➤ Types
➤ Statements
➤ Keywords
➤ Reserved words
➤ Operators
➤ Objects
The latest version is ECMAScript2015, also known as ES6.

The Document Object Model (DOM)

The Document Object Model (DOM) is an application programming interface (API) for XML that was extended for use in HTML. By creating a tree to represent a document, the DOM allows developers an unprecedented level of control over its content and structure.

➤ DOM Level 1 consisted of two modules: the DOM Core and the DOM HTML.

➤ DOM Level 2 introduced the following new modules：

  • DOM Views: interfaces to keep track of the various views of a document, eg.the document before and after CSS styling
  • DOM Events: interfaces for events and event handling
  • DOM Style: interfaces to deal with CSS-based styling of elements
  • DOM Traversal and Range: interfaces to traverse and manipulate a document tree

➤ DOM Level 3 further extends the DOM with the introduction of methods to load and save documents in a uniform way (contained in a new module called DOM Load and Save) and methods to validate a document (DOM Validation).

The Browser Object Model (BOM)

BOM deals with the browser window and frames, extensions including:
➤ The capability to pop up new browser windows
➤ The capability to move, resize, and close browser windows
➤ The navigator object, which provides detailed information about the browser
➤ The location object, which gives detailed information about the page loaded in the browser
➤ The screen object, which gives detailed information about the user’s screen resolution
➤ Support for cookies
➤ Custom objects such as XMLHttpRequest and Internet Explorer’s ActiveXObject

//Day 1, Feb 10, P1-12

Chapter 2: Javascript in HTML

The <script> Element

Six attributes for the <script> element

  • async — Optional. Indicates that the script should begin downloading immediately but should not prevent other actions on the page such as downloading resources or waiting for other scripts to load. Valid only for external script files.
  • defer — Optional. Indicates that the execution of the script can safely be deferred until after the document’s content has been completely parsed and displayed. Valid only for external scripts. Internet Explorer 7 and earlier also allow for inline scripts.
  • charset — Optional, rarely used. The character set of the code specified using the src attribute.
  • language — Deprecated. Originally indicated the scripting language being used by the code block (such as “JavaScript”, “JavaScript1.2”, or “VBScript”). Most browsers ignore this attribute; it should not be used.
  • src — Optional. Indicates an external file that contains code to be executed.
  • type — Optional. Replaces language; indicates the content type (also called MIME type) of the scripting language being used by the code block. Traditionally, this value has always been “text/javascript”. For React, the value can be “text/babel”.

Two ways to use the <script> element

  • Embed JavaScript code directly into the page
  • Include JavaScript from an external file

Notice

  • When using inline JavaScript code, keep in mind that you cannot have the string </script> anywhere in your code. This problem can be avoided easily by escaping the “/” character, as in this example:

    1
    2
    3
    4
    5
    <script type=”text/javascript”> 
        function sayScript(){
            alert(“<\/script>”);
        } 
    </script>

  • Be careful if you are referencing JavaScript files located on a server that you don’t control. A malicious programmer could, at any time, replace the file.

  • The <script> elements are interpreted in the order in which they appear in the page so long as the defer and async attributes are not present.

Tag Placement

Traditionally, all <script> elements were placed within the <head> element on a page to to keep external file references (CSS files and JavaScript files) in the same area. However, including all JavaScript files in the <head> of a document means that all of the JavaScript code must be downloaded, parsed, and interpreted before the page begins rendering (rendering begins when the browser receives the opening <body> tag). For pages that require a lot of JavaScript code, this can cause a noticeable delay in page rendering, during which time the browser will be completely blank.
For this reason, modern web applications typically include all JavaScript references in the <body> element, after the page content.

Deferred and Asynchronous Scripts

Inline Code vs External Files

Document Modes

//Day 2, Feb 11, P13-24

Chapter 3: Languages Basics

//Day 3, Feb 12, P25-31

//Day 4, Feb 13, P32-34

//Day 5, Feb 14, P35-4

0%