Categorias: Todos - variables - functions - scope - javascript

por Mike Ton 11 anos atrás

406

Browser

In the realm of web development, particularly with JavaScript, understanding the intricacies of variables, functions, and their scopes is crucial. JavaScript, unlike some other languages such as C, requires careful handling of variable declarations to avoid issues such as implied globals which can lead to unintended consequences.

Browser

Browser

Script

Javascript
bad parts

semicolon insertion

scope

function scoped, not block scope

javascript

declare all variables at the top of each function

C

declare variable at site of first use

global variables

window.foo = value

window is global object of web browsers

add to property of global object

var foo = value;

var statement outside of any function

foo = value

implied global

use variable without declaring it

timers

returns unique id

clearTimeout(id);

clearInterval(id);

var id = setInterval(fn, delay);

var id = setTimeout(fn, delay);

notes

never interrupt another currently running timer

browser object

function object

Closure

An inner function enjoys that context even after the parent functions have returned

The context of an inner function includes the scope of the outer function

tip

declare all function before using

declare variables at top of function

invocation

recursion

quicksort

when a function calls itself

parameters

arguments

extra parameters placed into argument collection

read only structure; wise

array like, but not exactly

this

key to prototypal inheritance

allows a single function object instance to service many functions

contains reference to the object of invocation

return

all functions return something; "undefined" if not specifiec

statement

function foo( ) {};

can't put in if statement because of variable hoisting

relaxes the req that functions should be declared before usage; sloppy

moved to the top of the scope in which it's defined

requires name

expression

var foo = function foo( ) {};

preferable

makes it clear that functions are values

Change
Time/Event
Spatial Layout

XPCOM

component
interface

Release

AddRef

QueryInterface

Type Library

A type library provides a common data format or interchange mechanism for describing the methods, attributes, parameters, and interfaces of a component. By establishing a common format, the same interfaces can be described across multiple platforms and multiple programming languages. This is useful for supporting a generic marshalling or proxy mechanism. Using the type info, a program can determine every parameter of any given method or attribute on some interface. With this knowledge, it can move data back and forth between the interface and some other environment. That other environment can be a scripting engine or a proxy mechanism for crossing thread, process, or network boundaries. In the case of a scripting engine, this is how a component gets defined in the scripting environment so that scripted code can invoke methods on a component's interface. XPConnect is an additional layer built on top of XPCOM that can marshal an XPCOM interface into the JavaScript engine by reading an XPCOM type library file. XPConnect also allows XPCOM components to be written entirely in JavaScript so you can have C++ code call a JS component, or use JS to load and manipulate a compiled C++ component. In addition to JavaScript, the Python language has been added as another scripting alternative using a mechanism similar to XPConnect.

aggregation

You'll need to understand the difficult component topic of aggregation. Aggregation is a means for placing a component inside another larger component where the larger component delegates the responsibility of some of its interfaces to the internal component. This is nothing more than information hiding, which is one of the tenets of object-oriented programming. The issue of aggregation arises from the fact that all XPCOM interfaces must include the QueryInterface method. This means that your code, when using a component, has the ability to switch from one interface to another. This creates a problem when trying to write a new component that extends another, existing component. The QueryInterface method on the pre-existing component must somehow be able to respond to requests for new, additional interfaces introduced by the new derived component without any prior knowledge of the new code. If that sounds a bit wicked, it is.

proxy

access components in another

machine

process

CrossPlatformComponentObjectModel
XPCOM is tailored toward providing modular component support at the application level, so proxy services only support multiple threads sharing an otherwise non-reentrant component. If you wish to access a component remotely, you will have to write your own proxy to marshal data back and forth to the remote object. There are some existing components that can help you do this, so it isn't actually as tough as it sounds.

<html>

<head>

<title>Mike is damn cool</title>

</head>

<body>

<svg mt_Datagjxmlns='http://www.w3.org/2000/svg'>

<path d="M 200,200 l 150,0 a150,150 0 0,0 -37,-97 z" fill="red" stroke="black" stroke-width="2" stroke-linejoin="round" />

</svg>

</body>

</html>

fill
stroke

linejoin

width

color

d

arc

quadratic

S (x2 y2 x y)

C (x1 y1 x2 y2 x y)

T (x y)

Q (x1 y1 x y)

elliptical

A (rx ry x-axis-rotation large-arc sweep x y )

line

vertical

V (y)

horizontal

H (x)

L (x y)

move

rel

m (x y)

abs

M (x y)

URL

Paint
Render Pixel
Flow
Display List
Parser
return Tree
Fetch
Cache
Skeleton
StyleSheet

framework

skeleton.css

base.css

content

layout.css

.
class
#

DOM

selector
document

tag

.getElementbyTagName('body')

=document.body

id

.getElementById('name')

.childNodes[0]

sibling

.nextSibling

.previousSibling

last

.lastChild

=childNodes.length

1st

.firstChild

=.childNodes[0]

alt

.childNodes

.item(0)

.parentNode

traversal types

TreeWalker

hiearchy

NodeIterator

content; flattened

ready()
HTML

elements

inline

block

Screen

h

768

w

make images less than

760

800

1024

length of scroll bar

40

984

size="num"

width="pixel/percentage"

<a> == anchor?

href="#"

on same page : different section/element/div

href=""

url link

  • item 2
  • item 1
  • item 2
  • item 1
  • type

    file

    upload

    dropdown

    checkbox

    radio

    text

    area

    field

    action

    URI

    file:

    mailto:

    ftp:

    http:

    event

    onsubmit = "javascript function"

    submit button

    method

    post

    storing, updating, e-mail, order a product

    get

    retrieve data

    media

    Flash

    Function

    Data

    data

    put table near graph

    search engines can't

    off

    w/h = size of image

    alt text describing image

    text content

    ..

    vector

    SVG

    pixel

    png, gif, jpg

    layout

    table

    JavaScript

    event handling

    mode

    trickling

    Wrong. Outdated Netscape 4 model avoid

    Raphael

    bubbling

    event is given to target, then parent and on up until handled or canceled

    node["on" + type] = f;

    node.onclick = f;

    non inline version

    Netscape, works every where

    put at bottom, pages will wait for script to load and execute

    library

    Jquery

    plugin

    User Interface

    slider, controls, accordion...etc

    Ajax

    loading content from pages and dealing with JSON data

    Effects

    basic animations: moving, hiding/showing objects

    Dom Events and helper functions

    Manipulation and CSS

    functions for editing and changing doc content

    Selection and traversal

    finding and navigating document contents

    CSS

    *(all elements on the page)

    tag#id.className

    tag.className

    .className

    #identifier

    tagname

    Core function and utility

    load()
    init()