1.12.2 Syntax errors

Unintuitive error-handling behavior

Certain invalid syntax constructs, when parsed, result in DOM trees that are highly unintuitive.

For example, the following markup fragment results in a DOM with an hr element that is an earlier sibling of the correspondingtable element:

...
Errors with optional error recovery

To allow user agents to be used in controlled environments without having to implement the more bizarre and convoluted error handling rules, user agents are permitted to fail whenever encountering a parse error.
Errors where the error-handling behavior is not compatible with streaming user agents

Some error-handling behavior, such as the behavior for the 

... example mentioned above, are incompatible with streaming user agents (user agents that process HTML files in one pass, without storing state). To avoid interoperability problems with such user agents, any syntax resulting in such behavior is considered invalid.

Errors that can result in infoset coercion

When a user agent based on XML is connected to an HTML parser, it is possible that certain invariants that XML enforces, such as comments never containing two consecutive hyphens, will be violated by an HTML file. Handling this can require that the parser coerce the HTML DOM into an XML-compatible infoset. Most syntax constructs that require such handling are considered invalid.
Errors that result in disproportionally poor performance

Certain syntax constructs can result in disproportionally poor performance. To discourage the use of such constructs, they are typically made non-conforming.

For example, the following markup results in poor performance, since all the unclosed i elements have to be reconstructed in each paragraph, resulting in progressively more elements in each paragraph:
He dreamt.
He dreamt that he ate breakfast.
Then lunch.
And finally dinner.

The resulting DOM for this fragment would be:

p

i

#text: He dreamt.




p

i

i

#text: He dreamt that he ate breakfast.






p

i

i

i

#text: Then lunch.








p

i

i

i

i

#text: And finally dinner.












Errors involving fragile syntax constructs

There are syntax constructs that, for historical reasons, are relatively fragile. To help reduce the number of users who accidentally run into such problems, they are made non-conforming.

For example, the parsing of certain named character references in attributes happens even with the closing semicolon being omitted. It is safe to include an ampersand followed by letters that do not form a named character reference, but if the letters are changed to a string that does form a named character reference, they will be interpreted as that character instead.
In this fragment, the attribute’s value is “?bill&ted“:
Bill and Ted
In the following fragment, however, the attribute’s value is actually “?art©“, not the intended “?art&copy“, because even without the final semicolon, “&copy” is handled the same as “©” and thus gets interpreted as “©“:
Art and Copy
To avoid this problem, all named character references are required to end with a semicolon, and uses of named character references without a semicolon are flagged as errors.
Thus, the correct way to express the above cases is as follows:
Bill and Ted 
Art and Copy <!-- the & has to be escaped, since &copy is a named character reference -->

Errors involving known interoperability problems in legacy user agents

Certain syntax constructs are known to cause especially subtle or serious problems in legacy user agents, and are therefore marked as non-conforming to help authors avoid them.

For example, this is why the U+0060 GRAVE ACCENT character (`) is not allowed in unquoted attributes. In certain legacy user agents, it is sometimes treated as a quote character.


Another example of this is the DOCTYPE, which is required to trigger no-quirks mode, because the behavior of legacy user agents in quirks mode is often largely undocumented.

Errors that risk exposing authors to security attacks

Certain restrictions exist purely to avoid known security problems.

For example, the restriction on using UTF-7 exists purely to avoid authors falling prey to a known cross-site-scripting attack using UTF-7.

Cases where the author’s intent is unclear

Markup where the author’s intent is very unclear is often made non-conforming. Correcting these errors early makes later maintenance easier.

For example, it is unclear whether the author intended the following to be an h1 heading or an h2 heading:
Contact details

Cases that are likely to be typos

When a user makes a simple typo, it is helpful if the error can be caught early, as this can save the author a lot of debugging time. This specification therefore usually considers it an error to use element names, attribute names, and so forth, that do not match the names defined in this specification.

For example, if the author typed  instead of 
















, this would be flagged as an error and the author could correct the typo immediately.


Errors that could interfere with new syntax in the future

In order to allow the language syntax to be extended in the future, certain otherwise harmless features are disallowed.

For example, “attributes” in end tags are ignored currently, but they are invalid, in case a future change to the language makes use of that syntax feature without conflicting with already-deployed (and valid!) content.



Some authors find it helpful to be in the practice of always quoting all attributes and always including all optional tags, preferring the consistency derived from such custom over the minor benefits of terseness afforded by making use of the flexibility of the HTML syntax. To aid such authors, conformance checkers can provide modes of operation wherein such conventions are enforced.
1.12.3 Restrictions on content models and on attribute values
This section is non-normative.
Beyond the syntax of the language, this specification also places restrictions on how elements and attributes can be specified. These restrictions are present for similar reasons:

Errors involving content with dubious semantics

To avoid misuse of elements with defined meanings, content models are defined that restrict how elements can be nested when such nestings would be of dubious value.
For example, this specification disallows nesting a section element inside a kbd element, since it is highly unlikely for an author to indicate that an entire section should be keyed in.

Errors that involve a conflict in expressed semantics

Similarly, to draw the author’s attention to mistakes in the use of elements, clear contradictions in the semantics expressed are also considered conformance errors.

In the fragments below, for example, the semantics are nonsensical: a separator cannot simultaneously be a cell, nor can a radio button be a progress bar.



Another example is the restrictions on the content models of the ul element, which only allows li element children. Lists by definition consist just of zero or more list items, so if a ul element contains something other than an li element, it’s not clear what was meant.

Cases where the default styles are likely to lead to confusion

Certain elements have default styles or behaviors that make certain combinations likely to lead to confusion. Where these have equivalent alternatives without this problem, the confusing combinations are disallowed.
For example, div elements are rendered as block boxes, and span elements as inline boxes. Putting a block box in an inline box is unnecessarily confusing; since either nesting just div elements, or nesting just span elements, or nesting span elements insidediv elements all serve the same purpose as nesting a div element in a span element, but only the latter involves a block box in an inline box, the latter combination is disallowed.
Another example would be the way interactive content cannot be nested. For example, a button element cannot contain atextarea element. This is because the default behavior of such nesting interactive elements would be highly confusing to users. Instead of nesting these elements, they can be placed side by side.

Errors that indicate a likely misunderstanding of the specification

Sometimes, something is disallowed because allowing it would likely cause author confusion.
For example, setting the disabled attribute to the value “false” is disallowed, because despite the appearance of meaning that the element is enabled, it in fact means that the element is disabled (what matters for implementations is the presence of the attribute, not its value).

Errors involving limits that have been imposed merely to simplify the language

Some conformance errors simplify the language that authors need to learn.
For example, the area element’s shape attribute, despite accepting both circ and circle values in practice as synonyms, disallows the use of the circ value, so as to simplify tutorials and other learning aids. There would be no benefit to allowing both, but it would cause extra confusion when teaching the language.

Errors that involve peculiarities of the parser

Certain elements are parsed in somewhat eccentric ways (typically for historical reasons), and their content model restrictions are intended to avoid exposing the author to these issues.

For example, a form element isn’t allowed inside phrasing content, because when parsed as HTML, a form element’s start tag will imply a p element’s end tag. Thus, the following markup results in two paragraphs, not one:
Welcome. Name: 
It is parsed exactly like the following:
Welcome. 
Name: 


Errors that would likely result in scripts failing in hard-to-debug ways

Some errors are intended to help prevent script problems that would be hard to debug.
This is why, for instance, it is non-conforming to have two id attributes with the same value. Duplicate IDs lead to the wrong element being selected, with sometimes disastrous effects whose cause is hard to determine.

Errors that waste authoring time

Some constructs are disallowed because historically they have been the cause of a lot of wasted authoring time, and by encouraging authors to avoid making them, authors can save time in future efforts.
For example, a script element’s src attribute causes the element’s contents to be ignored. However, this isn’t obvious, especially if the element’s contents appear to be executable script — which can lead to authors spending a lot of time trying to debug the inline script without realizing that it is not executing. To reduce this problem, this specification makes it non-conforming to have executable script in a script element when the src attribute is present. This means that authors who are validating their documents are less likely to waste time with this kind of mistake.

Errors that involve areas that affect authors migrating to and from XHTML

Some authors like to write files that can be interpreted as both XML and HTML with similar results. Though this practice is discouraged in general due to the myriad of subtle complications involved (especially when involving scripting, styling, or any kind of automated serialization), this specification has a few restrictions intended to at least somewhat mitigate the difficulties. This makes it easier for authors to use this as a transitionary step when migrating between HTML and XHTML.
For example, there are somewhat complicated rules surrounding the lang and xml:lang attributes intended to keep the two synchronized.
Another example would be the restrictions on the values of xmlns attributes in the HTML serialization, which are intended to ensure that elements in conforming documents end up in the same namespaces whether processed as HTML or XML.

Errors that involve areas reserved for future expansion

As with the restrictions on the syntax intended to allow for new syntax in future revisions of the language, some restrictions on the content models of elements and values of attributes are intended to allow for future expansion of the HTML vocabulary.
For example, limiting the values of the target attribute that start with an U+005F LOW LINE character (_) to only specific predefined values allows new predefined values to be introduced at a future time without conflicting with author-defined values.

Errors that indicate a mis-use of other specifications

Certain restrictions are intended to support the restrictions made by other specifications.
For example, requiring that attributes that take media queries use only valid media queries reinforces the importance of following the conformance rules of that specification.


1.13 Suggested reading
This section is non-normative.
The following documents might be of interest to readers of this specification.

Character Model for the World Wide Web 1.0: Fundamentals [CHARMOD]


This Architectural Specification provides authors of specifications, software developers, and content developers with a common reference for interoperable text manipulation on the World Wide Web, building on the Universal Character Set, defined jointly by the Unicode Standard and ISO/IEC 10646. Topics addressed include use of the terms ‘character’, ‘encoding’ and ‘string’, a reference processing model, choice and identification of character encodings, character escaping, and string indexing.


Unicode Security Considerations [UTR36]


Because Unicode contains such a large number of characters and incorporates the varied writing systems of the world, incorrect usage can expose programs or systems to possible security attacks. This is especially important as more and more products are internationalized. This document describes some of the security considerations that programmers, system analysts, standards developers, and users should take into account, and provides specific recommendations to reduce the risk of problems.


Web Content Accessibility Guidelines (WCAG) 2.0 [WCAG]


Web Content Accessibility Guidelines (WCAG) 2.0 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Following these guidelines will also often make your Web content more usable to users in general.


Authoring Tool Accessibility Guidelines (ATAG) 2.0 [ATAG]


This specification provides guidelines for designing Web content authoring tools that are more accessible for people with disabilities. An authoring tool that conforms to these guidelines will promote accessibility by providing an accessible user interface to authors with disabilities as well as by enabling, supporting, and promoting the production of accessible Web content by all authors.


User Agent Accessibility Guidelines (UAAG) 2.0 [UAAG]


This document provides guidelines for designing user agents that lower barriers to Web accessibility for people with disabilities. User agents include browsers and other types of software that retrieve and render Web content. A user agent that conforms to these guidelines will promote accessibility through its own user interface and through other internal facilities, including its ability to communicate with other technologies (especially assistive technologies). Furthermore, all users, not just users with disabilities, should find conforming user agents to be more usable.







4.2.3 The base element


The base element allows authors to specify the document base URL for the purposes of resolving relative URLs, and the name of the defaultbrowsing context for the purposes of following hyperlinks. The element does not represent any content beyond this information.Categories:
Metadata content.
Contexts in which this element can be used:
In a head element containing no other base elements.
Content model:
Empty.
Tag omission in text/html:
No end tag.
Content attributes:
Global attributes
href — Document base URL
target — Default browsing context for hyperlink navigation and form submission
DOM interface:

interface HTMLBaseElement : HTMLElement {
           attribute DOMString href;
           attribute DOMString target;
};


There must be no more than one base element per document.
A base element must have either an href attribute, a target attribute, or both.
The href content attribute, if specified, must contain a valid URL potentially surrounded by spaces.
A base element, if it has an href attribute, must come before any other elements in the tree that have attributes defined as taking URLs, except the html element (its manifest attribute isn’t affected by base elements).

If there are multiple base elements with href attributes, all but the first are ignored.

The target attribute, if specified, must contain a valid browsing context name or keyword, which specifies which browsing context is to be used as the default when hyperlinks and forms in the Document cause navigation.
A base element, if it has a target attribute, must come before any elements in the tree that represent hyperlinks.

If there are multiple base elements with target attributes, all but the first are ignored.
The href IDL attribute, on getting, must return the result of running the following algorithm:


If the base element has no href content attribute, then return the document base URL and abort these steps.


Let fallback base url be the Document‘s fallback base URL.


Let url be the value of the href attribute of the base element.


Resolve url relative to fallback base url (thus, the base href attribute isn’t affected by xml:base attributes or base elements).


If the previous step was successful, return the resulting absolute URL and abort these steps.


Otherwise, return the empty string.


The href IDL attribute, on setting, must set the href content attribute to the given new value.
The target IDL attribute must reflect the content attribute of the same name.


In this example, a base element is used to set the document base URL:


    
        This is an example for the <base> element
        
    
    
        
Visit the archives.

    

The link in the above example would be a link to “http://www.example.com/news/archives.html“.





	

	

				Δεν επιτρέπεται σχολιασμός στο b&h-pro-webd-tables-html-consuming-consumed-archive/ from simple html and js to dhtml , to html 5 and js sem 5-6	







	 
js-html-domain-edu-
	
Filed under: Notes —  admin @ 03:34 

	

		




JavaScript is a Scripting Language
A scripting language is a lightweight programming language.
JavaScript is programming code that can be inserted into HTML pages.
JavaScript inserted into HTML pages, can be executed by all modern web browsers.
JavaScript is easy to learn.





Example
document.write(“

This is a heading
“);
document.write(“
This is a paragraph
“);





example listed below about the boolean object

Boolean Object
The Boolean object represents two values: “true” or “false”.
The following code creates a Boolean object called myBoolean:

var myBoolean=new Boolean();

If the Boolean object has no initial value, or if the passed value is one of the following:

0
-0
null
“”
false
undefined
NaN

the object is set to false. For any other value it is set to true (even with the string “false”)!








http://www.w3schools.com/js/js_statements.asp




http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_style



http://backbone.codeschool.com/levels/1

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environmentsas well such as node.js or Apache CouchDB.
The JavaScript standard is ECMAScript. As of 2012, all modern browsers fully support ECMAScript 5.1. Older browsers support at least ECMAScript 3. A 6th major revision of the standard is in the works. The current progress of different new and improved features can be followed on the dedicated wiki.
This section of the site is dedicated to the JavaScript language itself, the parts that are not specific to Web pages, or other host environments. For information about APIs specific to Web pages, please see DOM. Read more about how DOM and JavaScript fit together in the DOM Reference.


from
http://en.wikipedia.org/wiki/JavaScript_syntax


v

JavaScript syntax

From Wikipedia, the free encyclopedia









This article includes a list of references, but its sources remain unclear because it has insufficientinline citations. Please help to improve this article by introducing more precise citations. (May 2011)






Part of a series on


JavaScript




JavaScript syntax
JavaScript library
Unobtrusive JavaScript







v
  
t
  
e






The syntax of JavaScript is the set of rules that define a correctly structured JavaScript program.
The examples below make use of the alert function for standard text output. The JavaScript standard library lacks an official standard text output function. However, given that JavaScript is mainly used forclient-side scripting within modern web browsers, and that almost all web browsers provide the alertfunction, alert is used in the examples.





Contents
  [hide] 

1 Origins
2 Basics

2.1 Case sensitivity
2.2 Whitespace and semicolons
2.3 Comments


3 Variables
4 Primitive data types

4.1 Undefined
4.2 Null
4.3 Number
4.4 String
4.5 Boolean


5 Native objects

5.1 Array
5.2 Date
5.3 Error
5.4 Math
5.5 Regular expression

5.5.1 Character classes
5.5.2 Character matching
5.5.3 Repeaters
5.5.4 Anchors
5.5.5 Subexpression
5.5.6 Flags
5.5.7 Advanced methods
5.5.8 Capturing groups


5.6 Function


6 Operators

6.1 Arithmetic
6.2 Assignment

6.2.1 Destructuring assignment


6.3 Comparison
6.4 Logical
6.5 Bitwise
6.6 String


7 Control structures

7.1 Compound statements
7.2 If … else
7.3 Conditional operator
7.4 Switch statement
7.5 For loop
7.6 For … in loop
7.7 While loop
7.8 Do … while loop
7.9 With
7.10 Labels


8 Functions
9 Objects

9.1 Creating objects
9.2 Methods
9.3 Constructors
9.4 Inheritance


10 Exception handling
11 Native functions and methods

11.1 eval (expression)


12 See also
13 Notes
14 References
15 External links





[edit]Origins
Brendan Eich summarized the ancestry of the syntax in the first paragraph of the JavaScript 1.1 specification[1] as follows:

JavaScript borrows most of its syntax from Java, but also inherits from Awk and Perl, with some indirect influence from Self in its object prototype system.

[edit]Basics
[edit]Case sensitivity
JavaScript is case sensitive. It is common to start the name of a constructor with a capitalised letter, and the name of a function or variable with a lower-case letter.
[edit]Whitespace and semicolons
Spaces, tabs and newlines used outside of string constants are called whitespace. Unlike C, whitespace in JavaScript source can directly impact semantics. Because of a technique called “automatic semicolon insertion” (ASI), some statements that are well formed when a newline is parsed will be considered complete (as if a semicolon were inserted just prior to the newline). Programmers are advised to supply statement-terminating semicolons explicitly because it may lessen unintended effects of the automatic semicolon insertion.[2]


return
a + b;
 
// Returns undefined. Treated as:
//   return;
//   a + b;



But:


a = b + c
(d + e).foo()
 
// Treated as:
//   a = b + c(d + e).foo();



[edit]Comments
Comment syntax is the same as in C++ and many other languages.


// a short, one-line comment
 
/* this is a long, multi-line comment
   about my script. May it one day
   be great. */
 
/* Comments /* may not be nested */ Syntax error */



[edit]Variables
Variables in standard JavaScript have no type attached, and any value can be stored in any variable. Variables are declared with a var statement, multiple variables can be declared at once. An identifier must start with a letter, underscore (_), or dollar sign ($); subsequent characters can also be digits (0-9). Because JavaScript is case sensitive, letters include the characters “A” through “Z” (uppercase) and the characters “a” through “z” (lowercase). Starting with JavaScript 1.5, ISO 8859-1 or Unicode letters (or \uXXXX Unicode escape sequences) can be used in identifiers.[3] In certain JavaScript implementations, the at sign (@) can be used in an identifier, this is contrary to the specifications and not supported in newer implementations. Variables are lexically scoped at function level (not block level as in C), and this does not depend on order (forward declaration is not necessary): if a variable is declared inside a function (at any point, in any block), then inside the function, the name will resolve to that variable. This is equivalent in block scoping to variables being forward declared at the top of the function, and is referred to as hoisting.[4] However, the variable value is undefined until it is initialized, and forward reference is not possible. Thus a var x = 1 statement in the middle of the function is equivalent to avar x declaration statement at the top of the function, and a x = 1 assignment statement at that point in the middle of the function – only the declaration is hoisted, not the assignment.
Functions statements, whose effect is to declare a variable of type Function and assign a value to it, are similar to variable statements, but in addition to hoisting the declaration, they also hoist the assignment – as if the entire statement appeared at the top of the containing function – and thus forward reference is also possible: the location of a function statement within an enclosing function is irrelevant.
Block scoping can be produced by wrapping the entire block in a function and then executing it; this is known as the immediately-invoked function expression pattern.
Variables declared outside any function are global. If a variable is declared in a higher scope, it can be accessed by child functions.
Here is an example of variable declarations and global values:


var x = 0; // A global variable, because it is not in any function
 
function f() {
  var z = 'foxes', r = 'birds'; // 2 local variables
  m = 'fish'; // global because it wasn't declared anywhere before
  function child() {
     var r = 'monkeys'; // This variable is local and does not affect the "birds" r of the parent function.
     z = 'penguins'; // The child function is able to access the variables of the parent function, this is called closure.
  }
  twenty = 20; // This variable is declared on the next line, but usable anywhere in the function, even before, as here
  var twenty;
  child();
  return x; // We can use x here because it is global
}
f();
alert(z); // This line will raise a ReferenceError exception because the value of z is no longer available



When JavaScript tries to resolve an identifier, it looks in the local function scope. If this identifier is not found, it looks in the outer function that declared the local one, and so on along the scope chain until it reaches the global scope where global variables reside. If it is still not found, JavaScript will raise a ReferenceError exception.
When assigning an identifier, JavaScript does exactly the same process to retrieve this identifier, except that if it is not found in the global scope, it will create the “variable” as a property of the global object.[5] As a consequence, a variable never declared will be global if assigned. Declaring a variable (with the keyword var) in the global code (i.e. outside of any function body), assigning a never declared identifier or adding a property to theglobal object (usually window) will also create a new global variable.
Note that JavaScript’s strict mode forbids the assignment of an undeclared variable, which avoids global namespace pollution.
[edit]Primitive data types
The JavaScript language provides a handful of primitive data types. Some of the primitive data types also provide a set of named values that represent the extents of the type boundaries. These named values are described within the appropriate sections below.
[edit]Undefined
The value of “undefined” is assigned to all uninitialized variables, and is also returned when checking for object properties that do not exist. In a Boolean context, the undefined value is considered a false value.
Note: undefined is considered a genuine primitive type. Unless explicitly converted, the undefined value may behave unexpectedly in comparison to other types that evaluate to false in a logical context.


var test;                  // variable declared but not defined, ...
                           // ... set to value of undefined
var testObj = {};
alert(test);               // test variable exists but value not ...
                           // ... defined, displays undefined
alert(testObj.myProp);     // testObj exists, property does not, ...
                           // ... displays undefined
alert(undefined == null);  // unenforced type during check, displays true
alert(undefined === null); // enforce type during check, displays false



Note: There is no built-in language literal for undefined. Thus (x == undefined) is not a foolproof way to check whether a variable is undefined, because in versions before ECMAScript 5, it is legal for someone to write var undefined = "I'm defined now";. A more robust approach is to compare using (typeof x === 'undefined').
Functions like this won’t work as expected:


function isUndefined(x) { var u; return x === u; } // like this...
function isUndefined(x) { return x === void 0; }   // ... or that one



Here, calling isUndefined(my_var) raises a ReferenceError if my_var is an unknown identifier, whereas typeof my_var === 'undefined'doesn’t.
[edit]Null
Unlike undefined, null is often set to indicate that something has been declared but has been defined to be empty. In a Boolean context, the value of null is considered a false value in JavaScript.
Note: Null is a true primitive-type within the JavaScript language, of which null (note case) is the single value. As such, when performing checks that enforced type checking, the null value will not equal other false types. Surprisingly, null is considered an object by typeof.


alert(null == undefined);         // unenforced type during check, displays true
alert(null === undefined);        // enforce type during check, displays false
alert(typeof null === 'object');  // true



[edit]Number
Numbers are represented in binary as IEEE-754 Doubles, which provides an accuracy nearly 16 significant digits. Because they are floating pointnumbers, they do not always exactly represent real numbers, including fractions.
This becomes an issue when comparing or formatting numbers. For example:


alert(0.2 + 0.1 == 0.3); // displays false
alert(0.94 - 0.01); // displays 0.9299999999999999



As a result, a routine such as the toFixed() method should be used to round numbers whenever they are formatted for output.
Numbers may be specified in any of these notations:


345;    // an "integer", although there is only one numeric type in JavaScript
34.5;   // a floating-point number
3.45e2; // another floating-point, equivalent to 345
0377;   // an octal integer equal to 255
0xFF;   // a hexadecimal integer equal to 255, digits represented by the ...
        // ... letters A-F may be upper or lowercase



The extents +∞, −∞ and NaN (Not a Number) of the number type may be obtained by two program expressions:


Infinity;  // Positive Infinity (negative obtained with -Infinity for instance)
NaN;       // The Not-A-Number value, also returned as a failure in ...
           // ... string-to-number conversions



These three special values correspond and behave as the IEEE-754 describes them.
The Number constructor, or a unary + or -, may be used to perform explicit numeric conversion:


var myString = "123.456";
var myNumber1 = Number(myString);
var myNumber2 = +myString;



When used as a constructor, a numeric wrapper object is created (though it is of little use):


myNumericWrapper = new Number(123.456);



[edit]String
A string in JavaScript is a sequence of characters. In JavaScript, strings can be created directly by placing the series of characters between double or single quotes.


var greeting = "Hello, world!";
var anotherGreeting = 'Greetings, people of Earth.';



You can access individual characters within a string using the charAt method (provided by String.prototype). This is the preferred way when accessing individual characters within a string because it also works in non-modern browsers:


var h = greeting.charAt(0);



In modern browsers, individual characters within a string can be accessed (as strings with only a single character) through the same notation as arrays:


var h = greeting[0];



However, JavaScript strings are immutable:


greeting[0] = "H"; // Not working.



Applying the equality operator (“==”) to two strings returns true if the strings have the same contents, which means: of same length and same cases (for alphabets). Thus:


var x = "world";
var compare1 = ("Hello, " +x == "Hello, world"); // Now compare1 contains true.
var compare2 = ("Hello, " +x == "hello, world"); // Now compare2 contains  ...
                                                  // ... false since the ...
                                                  // ... first characters ...
                                                  // ... of both operands ...
                                                  // ... are not of the same case.



You cannot use quotes of the same type inside the quotes unless they are escaped.


var x = '"Hello, world!" he said.' // Just fine.
var x = ""Hello, world!" he said." // Not good.
var x = "\"Hello, world!\" he said." // That works by replacing " with \"



It is possible to create a string using the String constructor:


var greeting = new String("Hello, world!");



These objects have a valueOf method returning the primitive string wrapped into them:


var s = new String("Hello !");
typeof s; // Is 'object'.
typeof s.valueOf(); // Is 'string'.



Equality between two String objects does not behave as with string primitives:


var s1 = new String("Hello !");
var s2 = new String("Hello !");
s1 == s2; // Is false, because they are two distinct objects.
s1.valueOf() == s2.valueOf(); // Is true.



[edit]Boolean
JavaScript provides a Boolean data type with true and false literals. The typeof operator returns the string "boolean" for these primitive types. When used in a logical context, 0, -0, null, NaN, undefined, and the empty string ("") evaluate as false due to automatic type coercion. Thecomplement evaluates as true, including the strings "0", "false" and any object (except null). Automatic type coercion by the equality comparison operators (== and !=) can be avoided by using the type checked comparison operators, (=== and !==).
When type conversion is required, JavaScript converts String, Number, Boolean, or Object operands as follows:[6]

Number and String
The string is converted to a number value. JavaScript attempts to convert the string numeric literal to a Number type value. First, a mathematical value is derived from the string numeric literal. Next, this value is rounded to nearest Number type value.
Boolean
If one of the operands is a Boolean, the Boolean operand is converted to 1 if it is true or to 0 if it is false.
Object
If an object is compared with a number or string, JavaScript attempts to return the default value for the object. An object is converted to a primitive String or Number value, using the .valueOf() or .toString() methods of the object. If this fails, a runtime error is generated.

Douglas Crockford advocates the terms “truthy” and “falsy” to describe how values of various types behave when evaluated in a logical context, especially in regard to edge cases.[7] The binary logical operators returned a Boolean value in early versions of JavaScript, but now they return one of the operands instead. The left–operand is returned if it can be evaluated as: false, in the case of conjunction (a && b), or true, in the case ofdisjunction (a || b); otherwise the right–operand is returned. Automatic type coercion by the comparison operators may differ for cases of mixed boolean and number-compatible operands (including strings that can be evaluated as a number, or objects that can be evaluated as such a string) because the boolean operand will be compared as a numeric value. This may be unexpected. An expression can be explicitly cast to a boolean primitive by doubling the logical negation operator (!!), using the Boolean() function, or using the conditional operator (c ? t : f).



//Automatic type coercion
alert(true  ==    2 ); // false... true  → 1 !== 2 ←  2
alert(false ==    2 ); // false... false → 0 !== 2 ←  2
alert(true  ==    1 ); // true.... true  → 1 === 1 ←  1
alert(false ==    0 ); // true.... false → 0 === 0 ←  0
alert(true  ==   "2"); // false... true  → 1 !== 2 ← "2"
alert(false ==   "2"); // false... false → 0 !== 2 ← "2"
alert(true  ==   "1"); // true.... true  → 1 === 1 ← "1"
alert(false ==   "0"); // true.... false → 0 === 0 ← "0"
alert(false ==   "" ); // true.... false → 0 === 0 ← ""
alert(false ==   NaN); // false... false → 0 !== NaN
 
//Type checked comparison (no conversion of types and values)
alert(true === 1);     // false... data types do not match
 
//Explicit type coercion
alert(true === !!2);   // true.... data types and values match
alert(true === !!0);   // false... data types match but values differ
alert( 1  ? true : false); // true.... only ±0 and NaN are “falsy” numbers
alert("0" ? true : false); // true.... only the empty string is “falsy”
alert(Boolean({}));    // true.... all objects are “truthy” except null




The new operator can be used to create an object wrapper for a Boolean primitive. However, the typeof operator does not return "boolean" for the object wrapper, it returns "object". Because all objects evaluate as true, a method such as .valueOf(), or .toString(), must be used to retrieve the wrapped value. For explicit coercion to the Boolean type, Mozilla recommends that the Boolean() function (without new) be used in preference to the Boolean object.



var b = new Boolean(false);   // Object  false {}
var t = Boolean(b);           // Boolean true
var f = Boolean(b.valueOf()); // Boolean false
var n = new Boolean(b);       // Not recommended
n = new Boolean(b.valueOf()); // Preferred
 
if (0 || -0 || "" || null || undefined || b.valueOf() || !new Boolean() || !t) {
    alert("Never this");
} else if ([] && {} && b && typeof b === "object" && b.toString() === "false") {
    alert("Always this");
}




[edit]Native objects
The JavaScript language provides a handful of native objects. JavaScript native objects are considered part of the JavaScript specification. JavaScript environment notwithstanding, this set of objects should always be available.
[edit]Array
An Array is a JavaScript object prototyped from the Array constructor specifically designed to store data values indexed by integer keys. Arrays, unlike the basic Object type, are prototyped with methods and properties to aid the programmer in routine tasks (for example, join, slice, and push).
As in the C family, arrays use a zero-based indexing scheme: A value that is inserted into an empty array by means of the push method occupies the 0th index of the array.


var myArray = [];            // Point the variable myArray to a newly ...
                             // ... created, empty Array
myArray.push("hello world"); // Fill the next empty index, in this case 0
alert(myArray[0]);           // Equivalent to alert("hello world");



Arrays have a length property that is guaranteed to always be larger than the largest integer index used in the array. It is automatically updated if one creates a property with an even larger index. Writing a smaller number to the length property will remove larger indices.
Elements of Arrays may be accessed using normal object property access notation:


myArray[1];   // the 2nd item in myArray
myArray["1"];



The above two are equivalent. It’s not possible to use the “dot”-notation or strings with alternative representations of the number:


myArray.1;     // syntax error
myArray["01"]; // not the same as myArray[1]



Declaration of an array can use either an Array literal or the Array constructor:


myArray = [0, 1,, , 4, 5];            // array with length 6 and 6 elements, ...
                                  // ... including 2 undefined elements
myArray = new Array(0, 1, 2, 3, 4, 5); // array with length 6 and 6 elements
myArray = new Array(365);         // an empty array with length 365



Arrays are implemented so that only the elements defined use memory; they are “sparse arrays“. Setting myArray[10] = 'someThing' andmyArray[57] = 'somethingOther' only uses space for these two elements, just like any other object. The length of the array will still be reported as 58.
One can use the object declaration literal to create objects that behave much like associative arrays in other languages:


dog = {color: "brown", size: "large"};
dog["color"]; // results in "brown"
dog.color;    // also results in "brown"



One can use the object and array declaration literals to quickly create arrays that are associative, multidimensional, or both. (Technically, JavaScript does not support multidimensional arrays, but one can mimic them with arrays-of-arrays.)


cats = [{color: "brown", size: "large"},
        {color: "black", size: "small"}];
cats[0]["size"];      // results in "large"
 
dogs = {rover: {color: "brown", size: "large"},
        spot:  {color: "black", size: "small"}};
dogs["spot"]["size"]; // results in "small"
dogs.rover.color;     // results in "brown"



[edit]Date
A Date object stores a signed millisecond count with zero representing 1970-01-01 00:00:00 UT and a range of ±108 days. There are several ways of providing arguments to the Date constructor. Note that months are zero-based.


new Date()                       // create a new Date instance representing the current time/date.
new Date(2010, 2, 1)             // create a new Date instance representing 2010-Mar-01 00:00:00
new Date(2010, 2, 1, 14, 25, 30) // create a new Date instance representing 2010-Mar-01 14:25:30
new Date("2010-3-1 14:25:30")    // create a new Date instance from a String.



Methods to extract fields are provided, as well as a useful toString:


var d = new Date(2010, 2, 1, 14, 25, 30); // 2010-Mar-01 14:25:30
 
// Displays '2010-3-1 14:25:30':
alert(d.getFullYear() + '-' + (d.getMonth()+1) + '-' + d.getDate() + ' '
      + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds());
 
// Built-in toString returns something like 'Mon Mar 01 2010 14:25:30 GMT-0500 (EST)':
alert(d);



[edit]Error




This section requires expansion. (April 2011)



Custom error messages can be created using the Error class:


throw new Error("Something went wrong.");



Nested within conditional statements, such instantiations can substitute for try/catch blocks:


var emailAddress = prompt("Please enter your e-mail address:", "");
if (!emailAddress || emailAddress.length == 0) {
        throw new Error("Excuse me: You must enter your e-mail address to continue.");
}



[edit]Math
The Math object contains various math-related constants (for example, π) and functions (for example, cosine). (Note the “Math” object has no constructor, unlike Array or Date. All its methods are “static”, AKA “class” methods.) All the trigonometric functions use angles expressed in radians, not degrees or grads.

Properties of the Math object


Property
Returned value
rounded to 5 digits
Description


Math.E
2.7183
e: Natural logarithm base


Math.LN2
0.69315
Natural logarithm of 2


Math.LN10
2.3026
Natural logarithm of 10


Math.LOG2E
1.4427
Logarithm to the base 2 of e


Math.LOG10E
0.43429
Logarithm to the base 10 of e


Math.PI
3.14159
π: circumference/diameter of a circle


Math.SQRT1_2
0.70711
Square root of ½


Math.SQRT2
1.4142
Square root of 2




Methods of the Math object


Example
Returned value
rounded to 5 digits
Description


Math.abs(-2.3)
2.3
Absolute value: (x < 0) ? -x : x


Math.acos(Math.SQRT1_2)
0.78540 rad. = 45°
Arccosine


Math.asin(Math.SQRT1_2)
0.78540 rad. = 45°
Arcsine


Math.atan(1)
0.78540 rad. = 45°
Half circle arctangent (-π/2 to +π/2)


Math.atan2(-3.7, -3.7)
-2.3562 rad. = -135°
Whole circle arctangent (-π to +π)


Math.ceil(1.1)
2
Ceiling: round up to smallest integer ≥ argument


Math.cos(Math.PI/4)
0.70711
Cosine


Math.exp(1)
2.7183
Exponential function: e raised to this power


Math.floor(1.9)
1
Floor: round down to largest integer ≤ argument


Math.log(Math.E)
1
Natural logarithm, base e


Math.max(1, -2)
1
Maximum: (x > y) ? x : y


Math.min(1, -2)
-2
Minimum: (x < y) ? x : y


Math.pow(-3, 2)
9
Exponentiation (raised to the power of): Math.pow(x, y) gives xy


Math.random()
0.17068
Pseudorandom number between 0 (inclusive) and 1 (exclusive)


Math.round(1.5)
2
Round to the nearest integer; half fractions are rounded up (e.g. 1.5 rounds to 2)


Math.sin(Math.PI/4)
0.70711
Sine


Math.sqrt(49)
7
Square root


Math.tan(Math.PI/4)
1
Tangent



[edit]Regular expression
Main article: Regular expression


/expression/.test(string);
"string".search(/expression/);
"string".replace(/expression/,replacement);
 
// Here are some examples
if(/Tom/.test("My name is Tom")) alert("Hello Tom!");
alert("My name is Tom".search(/Tom/));                    // == 11 (letters before Tom)
alert("My name is Tom".replace(/Tom/,"John"));            // == "My name is John"



[edit]Character classes


// \d   - digit
// \D   - non digit
// \s   - space
// \S   - non space
// \w   - word char
// \W   - non word
// [ ]  - one of
// [^ ] - one not of
//  -   - range
 
if (/\d/.test('0'))                   alert('Digit');
if (/[0-9]/.test('6'))                alert('Digit');
if (/[13579]/.test('1'))              alert('Odd number');
if (/\S\S\s\S\S\S\S/.test('My name')) alert('Format OK');
if (/\w\w\w/.test('Tom'))           if (/[a-zA-Z]/.test('B'))             alert('Letter');



[edit]Character matching


// A...Z a...z 0...9  - alphanumeric
// \u0000...\uFFFF    - Unicode hexadecimal
// \x00...\xFF        - ASCII hexadecimal
// \t                 - tab
// \n                 - new line
// \r                 - CR
// .                  - any character
// |                  - OR
 
if (/T.m/.test('Tom')) alert ('Hi Tom, Tam or Tim');
if (/A|B/.test("A"))   alert ('A or B');



[edit]Repeaters


// ?     - 0 or 1 match
// *     - 0 or more
// +     - 1 or more
// {n}   - exactly n
// {n,}  - n or more
// {0,n}  - n or less
// {n,m} - range n to m
 
if (/ab?c/.test("ac"))        alert("OK"); // match: "ac", "abc"
if (/ab*c/.test("ac"))        alert("OK"); // match: "ac", "abc", "abbc", "abbbc" etc.
if (/ab+c/.test("abc"))       alert("OK"); // match: "abc", "abbc", "abbbc" etc.
if (/ab{3}c/.test("abbbc"))   alert("OK"); // match: "abbbc"
if (/ab{3,}c/.test("abbbc"))  alert("OK"); // match: "abbbc", "abbbbc", "abbbbbc" etc.
if (/ab{1,3}c/.test("abc"))   alert("OK"); // match: "abc","abbc", "abbbc"



[edit]Anchors


// ^   - string starts with
// $   - string ends with
 
if (/^My/.test("My name is Tom"))   alert ("Hi!");
if (/Tom$/.test("My name is Tom"))  alert ("Hi Tom!");



[edit]Subexpression


// ( )   - groups characters
 
if (/water(mark)?/.test("watermark"))  alert("Here is water!"); // match: "water", "watermark",
if (/(Tom)|(John)/.test("John"))       alert("Hi Tom or John!");



[edit]Flags


// /g   - global
// /i   - ignore upper/lower case
// /m   - allow matches to span multiple lines
 
alert("hi tom!".replace(/Tom/i,"John"));      // == "hi John!"
alert("ratatam".replace(/ta/,"tu"));          // == "ratutam"
alert("ratatam".replace(/ta/g,"tu"));         // == "ratutum"



[edit]Advanced methods


my_array = my_string.split(my_delimiter);
// example
my_array = "dog,cat,cow".split(",");            // my_array==("dog","cat","cow");
 
my_array = my_string.match(my_expression);
// example
my_array = "We start at 11:30, 12:15 and 16:45".match(/\d\d:\d\d/g); // my_array=("11:30","12:15","16:45");



[edit]Capturing groups


var myRe = /(\d{4}-\d{2}-\d{2}) (\d{2}:\d{2}:\d{2})/;
var results = myRe.exec("The date and time are 2009-09-08 09:37:08.");
if (results) {
    alert("Matched: " + results[0]); // Entire match
    var my_date = results[1]; // First group == "2009-09-08"
    var my_time = results[2]; // Second group == "09:37:08"
    alert("It is " + my_time + " on " + my_date);
} else alert("Did not find a valid date!");



[edit]Function
Every function in JavaScript is an instance of the Function object:


//x,y is the argument. 'return x+y' is the function body, which is the last in the argument list.
var add = new Function('x', 'y', 'return x+y');
var t = add(1, 2);
alert(t);   //3



The add function above may also be defined using the following pattern.


function add(x, y) {
    return x + y;
}
var t = add(1, 2);
alert(t);  //3



A function instance has properties and methods.


function subtract(x, y) {
    return x - y;
}
 
alert(subtract.length);//2,expected amount of arguments.
alert(subtract.toString());
 
/*
function subtract(x, y) {
    return x - y;
}
*/



[edit]Operators
The ‘+’ operator is overloaded: it is used for string concatenation and arithmetic addition. This may cause problems when inadvertently mixing strings and numbers. As a unary operator, it can convert a numeric string to a number.


// Concatenate 2 strings
alert('He' + 'llo');  // displays Hello
 
// Add two numbers
alert(2 + 6);   // displays 8
 
// Adding a number and a string results in concatenation
alert(2 + '2');       // displays 22
alert('$' + 3 + 4);   // displays $34, but $7 may have been expected
alert('$' + (3 + 4)); // displays $7
 
// Convert a string to a number
alert(+'2' === 2); // displays true
alert(+'Hello'); // displays NaN



[edit]Arithmetic
JavaScript supports the following binary arithmetic operators:
+     Addition
-     Subtraction
*     Multiplication
/     Division (returns a floating-point value)
%     Modulus (returns the integer remainder)

JavaScript supports the following unary arithmetic operators:
+     Unary conversion of string to number
-     Unary negation (reverses the sign)
++    Increment (can be prefix or postfix)
--    Decrement (can be prefix or postfix)



var x = 1;
alert(++x);  // displays: 2
alert(x++);  // displays: 2; x becomes 3 then
alert(x);    // displays: 3
alert(x--); //  displays: 3; x becomes 2 then
alert(x);   //  displays: 2
alert(--x); //  displays: 1



[edit]Assignment
=     Assign
+=    Add and assign
-=    Subtract and assign
*=    Multiply and assign
/=    Divide and assign
%=    Modulus and assign

Assignment of primitive types


var x = 9;
x += 1; 
alert(x);  // displays: 10
x *= 30;
alert(x);  // displays: 300
x /= 6;
alert(x);  // displays: 50
x -= 3;
alert(x);  // displays: 47
x %= 7;
alert(x);  // displays: 5



Assignment of object types


var obj_1 = {a: 1}; // assign reference of newly created object to variable obj_1
var obj_2 = {a: 0};
var obj_3 = obj_2; // obj_3 references the same object as obj_2 does
 
obj_2.a = 2;
alert(obj_1.a + " " + obj_2.a + " " + obj_3.a);  // displays 1 2 2
 
obj_2 = obj_1; // obj_2 now references the same object as variable obj_1
               //  obj_3 now the only reference to what obj_2 referenced
alert(obj_1.a + " " + obj_2.a + " " + obj_3.a);   // displays 1 1 2
 
obj_2.a = 7;// modifies obj_1
alert(obj_1.a + " " + obj_2.a + " " + obj_3.a);   // displays 7 7 2



[edit]Destructuring assignment
In Mozilla’s JavaScript, since version 1.7, destructuring assignment allows the assignment of parts of data structures to several variables at once. The left hand side of an assignment is a pattern that resembles an arbitrarily nested object/array literal containing l-lvalues at its leafs which are to receive the substructures of the assigned value.


var a, b, c, d, e;
[a, b] = [3, 4];
alert(a + ',' + b); // displays: 3,4
e = {foo: 5, bar: 6, baz: ['Baz', 'Content']};
var arr = [];
({baz: [arr[0], arr[3]], foo: a, bar: b}) = e;
alert(a + ',' + b + ',' + arr);         // displays: 5,6,Baz,,,Content
[a, b] = [b, a];                        // swap contents of a and b
alert(a + ',' + b);                     // displays: 6,5



[edit]Comparison
==    Equal
!=    Not equal
>     Greater than
>=    Greater than or equal to
<     Less than
<=    Less than or equal to
===   Identical (equal and of the same type)
!==   Not identical

When comparing variables which are objects they are considered to be different if their objects are not the same object, even if the values of them are the same, so:
var obj1 = {a: 1};
var obj2 = {a: 1};
var obj3 = obj1;
alert(obj1 == obj2);   //false
alert(obj3 == obj1);   //true

See also String.
[edit]Logical
JavaScript provides four logical operators:

unary negation (NOT = !a)
binary disjunction (OR = a || b) and conjunction (AND = a && b)
ternary conditional (c ? t : f)

In the context of a logical operation, any expression evaluates to true except the following:

Strings: "", '',
Numbers: 0, -0, NaN,
Special: null, undefined,
Boolean: false.

The Boolean function can be used to explicitly convert to a primitive of type Boolean:


// Only empty strings return false
alert(Boolean("")      === false);
alert(Boolean("false") === true);
alert(Boolean("0")     === true);
 
// Only zero and NaN return false
alert(Boolean(NaN) === false);
alert(Boolean(0)   === false);
alert(Boolean(-0)  === false); // equivalent to -1*0
alert(Boolean(-2)  === true );
 
// All objects return true
alert(Boolean(this) === true);
alert(Boolean({})   === true);
alert(Boolean([])   === true);
 
// These types return false
alert(Boolean(null)      === false);
alert(Boolean(undefined) === false); // equivalent to Boolean()



The NOT operator evaluates its operand as a Boolean, and returns the negation. Using the operator twice in a row, as a double negative, explicitly converts an expression to a primitive of type Boolean:


alert( !0 === Boolean(!0));  alert(Boolean(!0) === !!1);    alert(!!1 === Boolean(1));
alert(!!0 === Boolean(0));   alert(Boolean(0) === !1);      alert(!1 === Boolean(!1));
alert(!"" === Boolean(!"")); alert(Boolean(!"") === !!"s"); alert(!!"s" === Boolean("s"));
alert(!!"" === Boolean("")); alert(Boolean("") === !"s");   alert(!"s" === Boolean(!"s"));



The ternary operator can also be used for explicit conversion:


alert([] == false);  alert([] ? true : false); // “truthy”, but the comparison uses [].toString()
alert([0] == false); alert([0]? true : false); // [0].toString() == "0"
alert("0" == false); alert("0"? true : false); // "0" → 0 … (0==0) … 0 ← false
alert([1] == true);  alert([1]? true : false); // [1].toString() == "1"
alert("1" == true);  alert("1"? true : false); // "1" → 1 … (1==1) … 1 ← true
alert([2] != true);  alert([2]? true : false); // [2].toString() == "2"
alert("2" != true);  alert("2"? true : false); // "2" → 2 … (2!=1) … 1 ← true



Expressions that use features such as post–incrementation, (i++), have an anticipated side effect. JavaScript provides short-circuit evaluation of expressions; the right operand is only executed if the left operand does not suffice to determine the value of the expression.


alert(a || b);    // When a is true, there is no reason to evaluate b.
alert(a && b);    // When a is false, there is no reason to evaluate b.
alert(c ? t : f); // When c is true, there is no reason to evaluate f.



In early versions of JavaScript and JScript, the binary logical operators returned a Boolean value (like most C–derived programming languages). However, all contemporary implementations return one of their operands instead:


alert(a || b); // if a is true, return a, otherwise return b
alert(a && b); // if a is false, return a, otherwise return b



Programmers who are more familiar with the behavior in C might find this feature surprising, but it allows for a more concise expression of patterns likenull coalescing:


var s = t || "(default)"; // assigns t, or the default value if t is null, empty, etc.



[edit]Bitwise




This section requires expansion. (April 2011)



JavaScript supports the following binary bitwise operators:
&     And
|     Or
^     Xor

<<    Shift left  (zero fill)
>>    Shift right (sign-propagating); copies of the leftmost bit (sign bit) are shifted in from the
      left.
>>>   Shift right (zero fill)

      For positive numbers, >> and >>> yield the same result.

JavaScript supports the following unary bitwise operators:
~     Not (inverts the bits)

[edit]String
=     Assignment
+     Concatenation
+=    Concatenate and assign

Examples


str = "ab" + "cd";   // "abcd"
str += "e";          // "abcde"
 
str2 = "2"+2         // "22", not "4" or 4.



[edit]Control structures
[edit]Compound statements
A pair of curly brackets { } and an enclosed sequence of statements constitute a compound statement, which can be used wherever a statement can be used.
[edit]If … else


if (expr) {
   //statements;
} else if (expr2) {
   //statements;
} else {
   //statements;
}



this is also possible


if (exprA exprB) {
   //statements;
} else if (expr2) {
   //statements;
} else {
   //statements;
}



[edit]Conditional operator
The conditional operator creates an expression that evaluates as one of two expressions depending on a condition. This is similar to the if statement that selects one of two statements to execute depending on a condition. I.e., the conditional operator is to expressions what if is to statements.


 result = condition ? expression : alternative;



is the same as:


 if (condition) {
   result = expression;
 } else {
   result = alternative;
 }



Unlike the if statement, the conditional operator cannot omit its “else-branch”.
[edit]Switch statement
The syntax of the JavaScript Switch statement is as follows:


 switch (expr) {
   case SOMEVALUE:
     //statements;
     break;
   case ANOTHERVALUE:
     //statements;
     break;
   default:
     //statements;
     break;
 }




break; is optional; however, it is usually needed, since otherwise code execution will continue to the body of the next case block.
Add a break statement to the end of the last case as a precautionary measure, in case additional cases are added later.
Strings literal values can also be used for the case values.
Expressions can be used instead of values.
case default: is optional.
Braces are required.

[edit]For loop
The syntax of the JavaScript for loop is as follows:


 for (initial; condition; loop statement) {
   /*
     statements will be executed every time
     the for{} loop cycles, while the
     condition is satisfied
   */
 }



or


 for (initial; condition; loop statement(iteration)) // one statement



[edit]For … in loop
The syntax of the JavaScript For … in loop is as follows:


 for (var property_name in some_object) {
   //statements using some_object[property_name];
 }




Iterates through all enumerable properties of an object.
Iterates through all used indices of array including all user-defined properties of array object if any. Thus it may be better to use a traditional for loop with a numeric index when iterating over arrays.
There are differences between the various web browsers with regard to which properties will be reflected with the for…in loop statement. In theory, this is controlled by an internal state property defined by the ECMAscript standard called “DontEnum”, but in practice each browser returns a slightly different set of properties during introspection. It is useful to test for a given property using if (some_object.hasOwnProperty(property_name)) { ... }. Thus, adding a method to the array prototype withArray.prototype.newMethod = function() {...} may cause for … in loops to loop over the method’s name.

[edit]While loop
The syntax of the JavaScript while loop is as follows:


 while (condition) {
   statement1;
   statement2;
   statement3;
   ...
 }



[edit]Do … while loop
The syntax of the JavaScript do … while loop is as follows:


 do {
   statement1;
   statement2;
   statement3;
   ...
 } while (condition);



[edit]With
The with statement sets the default object for the set of statements that follow.


 with (document) {
   var a = getElementById('a');
   var b = getElementById('b');
   var c = getElementById('c');
 };




Note the absence of document. before each getElementById() invocation.

The semantics are similar to the with statement of Pascal.
[edit]Labels
JavaScript supports nested labels in most implementations. loops or blocks can be labeled for the break statement, and loops for continue. Althoughgoto is a reserved word,[8] goto is not implemented in JavaScript.


loop1: for (var a = 0; a < 10; a++) {
   if (a == 4) {
       break loop1; // Stops after the 4th attempt
   }
   alert('a = ' + a);
   loop2: for (var b = 0; b < 10; ++b) {
      if (b == 3) {
         continue loop2; // Number 3 is skipped
      }
      if (b == 6) {
         continue loop1; // Continues the first loop, 'finished' is not shown
      }
      alert('b = ' + b);
   }
   alert('finished')
}
block1: {
    alert('hello'); // Displays 'hello'
    break block1;
    alert('world'); // Will never get here
}
goto block1; // Parse error.



[edit]Functions
A function is a block with a (possibly empty) parameter list that is normally given a name. A function may use local variables. If you exit the function without a return statement, the value undefined is returned.


function gcd(segmentA, segmentB) {
    var diff = segmentA - segmentB;
    if (diff == 0) 
        return segmentA;
    return diff > 0 ? gcd(segmentB, diff) : gcd(segmentA, -diff);
}
alert(gcd(60, 40)); // 20
 
var mygcd=gcd; // mygcd is a reference to the same function as gcd. Note no argument ()s.
alert(mygcd(60, 40)); // 20



Functions are first class objects and may be assigned to other variables.
The number of arguments given when calling a function may not necessarily correspond to the number of arguments in the function definition; a named argument in the definition that does not have a matching argument in the call will have the value undefined (which can be implicitly cast to false). Within the function, the arguments may also be accessed through the arguments object; this provides access to all arguments using indices (e.g.arguments[0], arguments[1], ... arguments[n]), including those beyond the number of named arguments. (While the arguments list has a .length property, it is not an instance of Array; it does not have methods such as .slice(), .sort(), etc.)


function add7(x, y) {
   if (!y) {
      y = 7;
   }
   alert(x + y + arguments.length);
};
add7(3); // 11
add7(3, 4); // 9



All parameters are passed by value (for objects, it is the reference to the object that is passed).


var obj1 = {a : 1};
var obj2 = {b : 2};
function foo(p) {
  p = obj2; // Ignores actual parameter
  p.b = arguments[1];
}
foo(obj1, 3); // Does not affect obj1 at all.  3 is additional parameter
alert(obj1.a + " " + obj2.b); // writes 1 3



Functions can be declared inside other functions, and access the outer function’s local variables. Furthermore they implement full closures by remembering the outer function’s local variables even after the outer function has exited.


var v = "Top";
var bar, baz;
function foo() {
  var v = "fud";
  bar = function() { alert(v) };
  baz = function(x) { v = x; };
}
foo();
baz("Fugly");
bar(); // Fugly (not fud) even though foo() has exited.
alert(v); // Top



[edit]Objects
For convenience, types are normally subdivided into primitives and objects. Objects are entities that have an identity (they are only equal to themselves) and that map property names to values (“slots” in prototype-based programming terminology). Objects may be thought of as associative arrays or hashes, and are often implemented using these data structures. However, objects have additional features, such as a prototype chain[clarification needed], which ordinary associative arrays do not have.
JavaScript has several kinds of built-in objects, namely Array, Boolean, Date, Function, Math, Number, Object, RegExp and String. Other objects are “host objects”, defined not by the language but by the runtime environment. For example, in a browser, typical host objects belong to the DOM (window, form, links, etc.).
[edit]Creating objects
Objects can be created using a constructor or an object literal. The constructor can use either a built-in Object function or a custom function. It is a convention that constructor functions are given a name that starts with a capital letter:


// Constructor
var anObject = new Object();
 
// Object literal
var objectA = {};
var objectA2 = {};  // A != A2, {}s create new objects as copies.
var objectB = {index1: 'value 1', index2: 'value 2'};
 
// Custom constructor (see below)



Object literals and array literals allow one to easily create flexible data structures:


var myStructure = {
  name: {
    first: "Mel",
    last: "Smith"
  },
  age: 33,
  hobbies: ["chess", "jogging"]
};



This is the basis for JSON, which is a simple notation that uses JavaScript-like syntax for data exchange.
[edit]Methods
A method is simply a function that is assigned to the value of an object’s slot. Unlike many object-oriented languages, there is no distinction between a function definition and a method definition. Rather, the distinction occurs during function calling; a function can be called as a method.
When called as a method, the standard local variable this is just automatically set to the object instance to the left of the “.”. (There are also call andapply methods that can set this explicitly—some packages such as jQuery do unusual things with this.)
In the example below, Foo is being used as a constructor. There is nothing special about a constructor, it is just a method that is invoked after the object is created. this is set to the newly created object.
Note that in the example below, Foo is simply assigning values to slots, some of which are functions. Thus it can assign different functions to different instances. There is no prototyping in this example.


function px() {return this.prefix + "X";}
 
function Foo(yz) {
  this.prefix = "a-";
  if (yz > 0) {
    this.pyz = function() {return this.prefix + "Y";};
  } else {
    this.pyz = function() {return this.prefix + "Z";};
  }
  this.m1 = px;
}
 
var foo1 = new Foo(1);
var foo2 = new Foo(0);
foo2.prefix = "b-";
 
alert("foo1/2 " + foo1.pyz() + foo2.pyz());
// foo1/2 a-Y b-Z
 
foo1.m3 = px; // Assigns the function itself, not its evaluated result, i.e. not px()
var baz = {"prefix": "c-"};
baz.m4 = px; // No need for a constructor to make an object.
 
alert("m1/m3/m4 " + foo1.m1() + foo1.m3() + baz.m4());
// m1/m3/m4 a-X a-X c-X
 
foo1.m2(); // Throws an exception, because foo1.m2 doesn't exist.



[edit]Constructors
Constructor functions simply assign values to slots of a newly created object. The values may be data or other functions.
Example: Manipulating an object


function MyObject(attributeA, attributeB) {
  this.attributeA = attributeA;
  this.attributeB = attributeB;
}
 
MyObject.staticC = "blue"; // On MyObject Function, not obj
alert(MyObject.staticC); // blue
 
obj = new MyObject('red', 1000);
 
alert(obj.attributeA); // red
alert(obj["attributeB"]); // 1000
 
alert(obj.staticC); // undefined
obj.attributeC = new Date(); // add a new property
 
delete obj.attributeB; // remove a property of obj
alert(obj.attributeB); // undefined
 
delete obj; // remove the whole Object (rarely used)
alert(obj.attributeA); // throws an exception



The constructor itself is stored in the special slot constructor. So


function Foo(){}
// Use of 'new' sets prototype and constructor slots (for example, 
// Foo.prototype = {}; // would set constructor to Object).
x = new Foo();
// The above is almost equivalent to
y = {};
y.constructor = Foo;
y.constructor();
// Except
x.constructor == y.constructor // true
x instanceof Foo // true
y instanceof Foo // false
z = new  {constructor: Foo}.constructor();
z instanceof Foo // true.
// Changing Foo.prototype after 'new' has been called can change the
// instanceof results, until it is changed back with the identical value.



Functions are objects themselves, which can be used to produce an effect similar to “static properties” (using C++/Java terminology) as shown below. (The function object also has a special prototype property, as discussed in the Inheritance section below.)
Object deletion is rarely used as the scripting engine will garbage collect objects that are no longer being referenced.
[edit]Inheritance
JavaScript supports inheritance hierarchies through prototyping in the manner of Self.
In the following example, the Derived class inherits from the Base class. When d is created as a Derived, the reference to the base instance of Base is copied to d.base.
Derive does not contain a value for aBaseFunction, so it is retrieved from Base when aBaseFunction is accessed. This is made clear by changing the value of base.aBaseFunction, which is reflected in the value of d.aBaseFunction.
Some implementations allow the prototype to be accessed or set explicitly using the __proto__ slot as shown below.


function Base() {
  this.anOverride = function() {alert("Base::anOverride()");};
 
  this.aBaseFunction = function() {alert("Base::aBaseFunction()");};
}
 
function Derived() {
  this.anOverride = function() {alert("Derived::anOverride()");};
}
 
base = new Base();
Derived.prototype = base; // Must be before new Derived()
 
d = new Derived(); // Copies Derived.prototype to d instance's hidden prototype slot.
 
base.aBaseFunction = function() {alert("Base::aNEWBaseFunction()")}
 
d.anOverride(); // Derived::anOverride()
d.aBaseFunction(); // Base::aNEWBaseFunction()
alert(d.aBaseFunction == Derived.prototype.aBaseFunction); // true
 
alert(d.__proto__ == base); // true in Mozilla-based implementations but false in many other implementations.



The following shows clearly how references to prototypes are copied on instance creation, but that changes to a prototype can affect all instances that refer to it.


function m1() {return "One";}
function m2() {return "Two";}
function m3() {return "Three";}
 
function Base() {}
 
Base.prototype.m = m2;
bar = new Base();
alert("bar.m " + bar.m()); // bar.m Two
 
function Top() {this.m = m3;}
t = new Top();
 
foo = new Base();
Base.prototype = t;
// No effect on foo, the *reference* to t is copied.
alert("foo.m " + foo.m()); // foo.m Two
 
baz = new Base();
alert("baz.m " + baz.m()); // baz.m Three
 
t.m = m1; // Does affect baz, and any other derived classes.
alert("baz.m1 " + baz.m()); // baz.m1 One



In practice many variations of these themes are used, and it can be both powerful and confusing.
[edit]Exception handling
JavaScript includes a try ... catch ... finally exception handling statement to handle run-time errors.
The try ... catch ... finally statement catches exceptions resulting from an error or a throw statement. Its syntax is as follows:


try {
  // Statements in which exceptions might be thrown
} catch(errorValue) {
  // Statements that execute in the event of an exception
} finally {
  // Statements that execute afterward either way
}



Initially, the statements within the try block execute. If an exception is thrown, the script’s control flow immediately transfers to the statements in the catch block, with the exception available as the error argument. Otherwise the catch block is skipped. The Catch block can throw(errorValue) if it does not want to handle a specific error.
In any case the statements in the finally block are always executed. This can be used to free resources, although memory is automatically garbage collected.
Either the catch or the finally clause may be omitted. The catch argument is required.
The Mozilla implementation allows for multiple catch statements, as an extension to the ECMAScript standard. They follow a syntax similar to that used in Java:


try { statement; }
catch (e if e == "InvalidNameException")  { statement; }
catch (e if e == "InvalidIdException")    { statement; }
catch (e if e == "InvalidEmailException") { statement; }
catch (e)                                 { statement; }



In a browser, the onerror event is more commonly used to trap exceptions.


onerror = function (errorValue, url, lineNr) {...; return true;};



[edit]Native functions and methods
(Not related to web browsers.)
[edit]eval (expression)
Evaluates expression string parameter, which can include assignment statements. Variables local to functions can be referenced by the expression.


(function foo() {
  var x=7;
  alert("val " + eval("x+2"));
})(); // shows val 9.










	

	

				Δεν επιτρέπεται σχολιασμός στο js-html-domain-edu-	





7 Απριλίου 2013

	 
types-strbrd-wed-anim-schls
	
Filed under: Notes —  admin @ 19:19 

	

		



01. the walt diseny strbrd




A storyboard is a sequence of images and words drawn together on a page to form a plausible narrative.
Storyboards are routinely used in the movie making business to ‘preview’ a movie before a single shot is taken. Not only does a storyboard allow for a dress rehearsal of the final product but by the very fact of being posted on the wall,it elicits early feedback and encourages quick, painless editing, leading to significant savings in time and resources.
Disney was a storyboarding freak!
A storyboard is an apt metaphor for how we make sense of our own life history. Storyboarding can be used to sense emergent patterns in our own life story and to envision the life experiences that we wish to welcome into our future.
Try storyboarding the past and future events in your Life!

Disney
Storyboard Inventor: Walter Elias Disney
http://www.youtube-nocookie.com/embed/kgmhoQnQZNY

02. strbrd and 3d space

—- mechanical flipbook

Mark Rosen and Wendy Marvel, Mechanical Flipbook. Photo by Luke Neve for Kinetica


[vimeo http://www.vimeo.com/48901714 w=500&h=281] 
01 HORSEINMOTION from Wendy Marvel on Vimeo.
03.strboarding interactivity
**
the origins of storyboard are in the film history , where a series of panels roughly depicts snapshots from an intented film sequence in porder to get the idea across about the eventual scene. Similarly, for inreractive system design, the storyboards provide snapshots of interface at particular points in the interaction.
Evaluating customers or user imprassions of the storyboards can determine relatively quickly if the design is heading in the right direction.
students examples-











tvscreen

-movie svreen- theatre-tv
the perception of the scale- the tv-human scale-phycological implications-being with another.

-how the action happens in z axis.
–                                                              







//// ////////////




	

	

				Δεν επιτρέπεται σχολιασμός στο types-strbrd-wed-anim-schls	







	 
maeda-rec-links-prog-dsgn
	
Filed under: Notes —  admin @ 18:55 

	

		



http://www.maedastudio.com/index.php


	

	

				Δεν επιτρέπεται σχολιασμός στο maeda-rec-links-prog-dsgn	







	 

	
Filed under: Notes —  admin @ 15:37 

	

		

Architectures without Place [diaporama]

Construccions al bosc d’Olot by Josep Pujiula [1974]
As in the rest of Spain, Catalonian history is marked for the General Franco’s dictatorship from 1939 to 1975. The Franco era was characterised by repression of pro-democracy and left-wing organisations. In the middle of the repression, the post-war years led Catalonia to an economical growth which started in 1959 and, according to the Museo d’Història de Catalunya, “led [Catalonia] to major economic and social changes: foreign capital came into the country; industry diversified; tourism developed; waves of immigration from within Spain occurred; and the consumer society became established.“
Within this context, it is interesting to discover some of the projects presented on the exhibition and publication Architectures without Place, which analyzes a particular vision of architectural production in Catalonia since 1968. As if we were talking about other phantom city, the aim of the exhibition was to limit the study to architectures that do not physically exist but nonetheless help us to understand the present-day reality in all its complexity. As we can read on the exhibition web-site:

The great majority are ideal projects that never got off the architect’s drawing board. Others are projects that have changed as a result of being altered or demolished, or are ephemeral architecture projects conceived for a brief existence: among these, set designs form a group apart by virtue of their specific logic and clearly differentiated conditioning factors.

There are many facts to think about, as how any dictatorship affects architecture and culture in general terms or how the economical limitations have been the seed for creativity and multidisciplinarity on those years, when architectures were proposed or imagined by creative talents from other disciplines such as film, the visual arts and especially the comic.

Modern Iconography. América Sánchez [1980]
Housing was not the exemption. While architects and artist were dreaming on a better and free world, the economic growth that started in those years has affected the architectural production, with the use of new materials and communication tools that allowed architects to know what was happening abroad in the architectural arena. Some historical facts such as the promulgation of the Stabilisation Plan [a plan to cut inflation and reduce the balance of payments] in July 1959, when the régime abandoned the despotic interventionist approach that it had maintained since 1939, had influenced the ideals of architects and creative minds that lived in Catalonia. Again from the Museo d’Història de Catalunya

This [economical] expansion took place without any type of urban planning nor the slightest degree of democratic control over the economy. Urban chaos and the lack of a basic infrastructure were common in the large cities and the tourist areas on the coast.

On those years, homes underwent major changes: New materials, such as chipboard and Formica, revolutionised furniture making. The flood of new domestic appliances continued unabated, and residents’ comfort was dramatically improved by electric fridges, washing machines, dishwashers, radios and televisions, as we can see in the following project:

Reforma apartament Stéphanie. Lluís Clotet and Òscar Tusquets [Studio PER, 1974-79]

Reforma apartament Stéphanie. Lluís Clotet and Òscar Tusquets [Studio PER, 1974-79]
After this brief historical reflection, here is a [diaporama] with some architectures proposed or imagined in which the discussion about the city is carried out from a perspective that, remote from the particular servitudes of the architecture profession, often gives it a greater lucidity.

Naus industrials Josep Ignasi Llorens and Alfons Soldevila [1980]

Infatables. Josep Ponsatí [1971]

Club de golf a Sant Cugat del Vallès. MBM Arquitectes [1970]

Carretera de les aigües. Emili Donato [1981]

City in Space. Ricardo Bofill, Taller de Arquitectura [1968]
The exhibition was designed with a non-chronological narrative of events which aimed to offer a more reflective and multifaceted reading of the content, providing us with the elements for a debate on the role of architecture and its interaction with the socio-political context. General Franco died on 20 November 1975 and the opening up of the regime led to democracy by another route, political reform. In June 1977, the first free elections since 1936 were held. This socio-political changes drives us to reflect on the paradigm of the relationship between the architect and society.
We want to finish with the thought that architecture and architectural communication has often been related with activism in the political context, using image and media as political manifestos. As Beatriz Colominatold us in an interview, “you have to think that in the decade of the 1970s, the political agenda was almost part of our architectural curriculum.” And she adds:

I think that we are facing a very interesting era, because architecture always develops in a deeper way in moments of crisis. In the decade of the 60s and 70s, we had the oil crisis, the war, and other conflicts and we had the time to think about ecology, emergency housing, new materials, the space program, etc. And now that we are living in a similar state of the world, we can discover again some similar responses and recover the principles that we have lost.

Utopias as activism and polemical reaction, keep on going. In the current years, when Barcelona is facing a “star-architect-fever” on its architectural development, Beth Galí reflects this political and economical situation in Catalonia with her project La Sagrera Família [also included in the exhibition], a paper-architecture project aimed to condemn the mediatization of a monument like Gaudi’s Sagrada Familia:

La Sagrera Família, Barcelona. Beth Galí [2000]
But is it Architecture?* | Beniamino Servino


I’m an ephemeral and not too discontented citizen of a metropolis thought to be modern because all known taste has been avoided in the furnishing and exterior of houses as well as the city plan. Here you cannot point out a trace of a single monument to superstition. Morals and language are reduced to their simplest expression, in short! These millions not needing to know each other pursue their education, work, and old age so identically that the course of their lives must be several times shorter than absurd statistics allow this continent’s people. So, from my window, I see fresh spectres roaming through thick eternal fumes – our woodland shade, our summer night! – New Furies, before my cottage which is my homeland, my whole heart, since all here resembles this – Death without tears, our active daughter and servant, desperate Love and pretty Crime whimpering in the mud of the street.
	

	

				Δεν επιτρέπεται σχολιασμός στο 	







	 

	
Filed under: Notes —  admin @ 15:30 

	

		

Stop Obeying! | Resistant Checklist by Lebbeus Woods
Resist whatever seems inevitable.
.
Resist people who seem invincible.
.
Resist any idea that contains the word algorithm.
.
Resist the idea that architecture is a building.
.
Resist the idea that architecture can save the world.
.
Resist the hope that you’ll get that big job.
.
Resist buying an automobile of any kind.
.

.
Resist people who are satisfied.
.
Resist getting big jobs.
.
Resist taking the path of least resistance.
.
Resist the growing conviction that They are right.
.
Resist the idea that you need a client to make architecture.
.
Resist people who tell you to resist.
.
Resist writing what They wish you would write.
.
Resist assuming that the locus of power is elsewhere.
.
Resist any idea that equates architecture and ownership.
.
Resist the thought that life is simple, after all.

	

	

				Δεν επιτρέπεται σχολιασμός στο 	





« Newer Posts — Older Posts »







search

				

					Αναζήτηση για:
					
					
				
			
about
Courses
About I
About III
ΦΩΤΟΓΡΑΦΙΕΣ ΕΡΓΑΣΤΗΡΙΟΥ
LINKS





 Powered by WordPress



    

	
error: Content is protected !!