JavaScript Developer

Novo blog

2008-10-08T23:34:00.003-03:00

Ola amigos, essa postagem é apenas na esperança que alguém ainda tenha esse blog marcado em algum lugar (se é que isso é possível), bom, lancei hoje meu novo blog, dessa vez sobre assuntos de desenvolvimento em geral, e iniciei com um post sobre porque devemos utilizar UTF-8.

Como esse blog e generalista terei mais ideias para postar e pretendo postar com mais frequência, quem gostava desse blog deve gostar do novo também ;)

Entao acessem: http://wilker-dev.blogspot.com/

Vlw!

DOM - Básico

2006-10-23T14:33:00.000-03:00

E ae galera! Pow, to atrasadão com vocês... mal ae, tava sem tempo no trabalho esses dias, mas hoje vamos voltar aos estudos :)

O que raios é DOM?
DOM é a sigla para Document Object Model (Modelo de Objecto de Documento), ele é uma API para ler e escrever XML (é a padrão da W3C e tem sua implementação na maioria das linguagens atuais). Com o DOM é possivel localizar elementos dentro de um XML, alterar atributos, criar novos elementos e outros recursos.

DOM em JavaScript
No JavaScript particularmente, o DOM é de vital importância, enquanto em outras linguages você usa o DOM para realmente ler, escrever e salvar documentos XML, no JavaScript ele é usado para mudar a página dinâmicamente. Você deve saber que a página web é mostrada na tela após o conteudo HTML (ou XHTML) ser carregado, a grande jogava do DOM no JavaScript é que com ele você muda os atributos do HTML atual, e automaticamente a exibição é atualizada! Se você associar isso ao fato de conseguir alterar também o CSS dos elementos, os efeitos que podem ser gerados estão além do que muita gente pensa quanto a capacidade de sites. Essa arte de mexer com elementos usando DOM no JavaScript é chamada DHTML, quando você ver esse nome na net, não se assuste, DHTML não é uma linguagem, é apenas o uso do JavaScript para mexer com HTML ;)

Começando com DOM
Bom, vamos passar a escrever agora todo o HTML no código, pois como vamos mexer no HTML, não da pra ter apenas código JavaScript (eu me refiro ao usar o esqueleto de código que eu passei no primeiro artigo, e realmente, é possivel fazer DHTML sem ter código HTML prévio, mas vamos deixar isso para depois).

Nosso documento HTML que será usado inicialmente (use ele, o resto iremos colocar somente na tag script):

<html>
<head>
 <title> :: JavaScript Developer - Aprendendo DOM :: </title>
 <script type="text/javascript">
  //o codigo vira aqui
 </script>
</head>
<body>
<form id="meuFormulario">
<table>
 <tr>
  <td valign="top">Linguagens que programa:</td>
  <td>
   <div id="camposCheck">
    <input type="checkbox" name="linguagens[]" /> PHP<br />
    <input type="checkbox" name="linguagens[]" /> JavaScript<br />
    <input type="checkbox" name="linguagens[]" /> C++<br />
    <input type="checkbox" name="linguagens[]" /> Java<br />
    <input type="checkbox" name="linguagens[]" /> CSS<br />
   </div>
   <div id="fastCheckDiv" style="display: none;">
    <a href="#" id="marcaTodosLink">Marcar Todos</a>
    <a href="#" id="desmarcaTodosLink">Desmarcar Todos</a>
   </div>
  </td>
 </tr>
 <tr>
  <td></td>
  <td><button type="submit">Enviar Formulário</button></td>
 </tr>
</table>
</form>
</body>
</html>

Iremos comecar com o mais simples, os formulários, mas antes eu gostaria de expor um conceito muito bem aceito hoje em dia, que é o conceito do JavaScript "não obstrutivo".

JavaScript não obstrutivo
O que seria isso? É simplesmente fazer o uso do JavaScript sem faze-lo obrigatório para visualização, fazendo com que dessa forma, o JavaScript seja apenas um adicional, e não fundamental. E como fazer isso? A primeira coisa a ser feita, é deixar tudo funcionando sem JavaScript, como vocês podem ver, o formulário do código acima não tem nada de JavaScript, mas se clicar-mos no botão de enviar, o formulário vai ser enviado sem nenhum problema, entao ja temos a solução no HTML, e agora iremos apenas incrementar mais interatividade. No JavaScript não obstrutivo nós não colocamos código JavaScript no meio do HTML, no lugar de fazer isso apenas nomeamos elementos com ID, e depois os pegamos usando o DOM!

Voltando ao formulario
OK, nesse formulário iremos incrementar uma função pra marcar e desmarcar todos os checkbox mais facilmente. obs: eu ia fazer uma validação com um campo de nome também, mas isso usuária muito código, e parar um evento de forma não obstrutiva não é tão simples, entao prefiro deixar isso para quando formos falar de eventos em futuros artigos.

Como sempre, primeiro o código, depois explicações ;)

function $(obj) {
 return document.getElementById(obj);
}

function marcaBoxes(marcar) {
 var boxesContainer = $('camposCheckDiv');
 var childs = boxesContainer.childNodes;
 
 for(var i = 0; i < childs.length; i++) {
  var node = childs[i];
  
  if(node.nodeType == 1 && node.tagName == "INPUT")
   node.checked = marcar;
 }
}

window.onload = function() {
 var marcaTudoObj = $('marcaTodosLink');
 var desmarcaTudoObj = $('desmarcaTodosLink');
 var fastCheckObj = $('fastCheckDiv');
 
 marcaTudoObj.onclick = function() {
  marcaBoxes(true);
 };
 
 desmarcaTudoObj.onclick = function() {
  marcaBoxes(false);
 };
 
 fastCheckObj.style.display = '';
};

Vamos com calma, esse script tem várias coisas novas, vamos pelo começo:

A função $(obj) -> eu já disse antes que para mexer com os elementos de forma não obstrutiva, devemos colocar ID neles, para pegar isso com o DOM, mas eu ainda não tinha falado como fazer isso. Primeiro de tudo, a variável pré-definida document é o objeto principal do DOM, vamos falar mais sobre ela depois, por enquanto, saibamos que ela tem um método chamado getElementById(), e como claramente o nome diz, esse método serve justamente para pegar a referência para em elemento dentro do HTML atual. O que a função $() faz é apenas servir de atalho para document.getElementById(), porque convenhamos, escrever document.getElementById() o tempo todo é uma me***. Futuramente vamos ver como deixar essa função ainda melhor.

A função marcaBoxes(marcar) -> essa é a função principal para o nosso sistema, é ela que vai lá e marca / desmarca os checkbox, o parêmetro marcar serve para indicar se ela vai marcar ou desmarcar os checkbox. Vamos estuda-la passo a passo:

var boxesContainer = $('camposCheckDiv'); => essa linha pega o elemento DIV que está contendo os nossos checkbox, precisamos de algo que circunde nosso checkbox para poder pega-los de forma dinâmica e eficiente

var childs = boxesContainer.childNodes; => essa é legal, todos os objetos HTML tem uma propriedade chamada childNodes, o childNodes é um array contendo todos as referencias para os elementos dentro do dele. Ou seja, como nossos checkboxes estão dentro de boxesContainer, então entre os childNodes do boxesContainer estão todos os nossos checkboxes que devem ser marcados / desmarcados

for(var i = 0; i < childs.length; i++) { => iniciamos nosso loop pelos childNodes

var node = childs[i]; => colocamos um nó atual numa variável, apenas para ficar mais claro

if(node.nodeType == 1 && node.tagName == "INPUT") => essa linha aqui é importante, primeiro verificamos se o nó é um elemento realmente, os elementos HTML (aqueles entre tags) são representados pelo valor 1, mas existem outros também:

1 - elemento HTML, exemplo: <p>...</p>
2 - atributo, exemplo: align="center"
3 - texto, exemplo: conteudo de alguma coisa
8 - comentário, exemplo: 
9 - document, é o nó principal do XML, exemplo: <html>
10 - definição do documento, exemplo: <!DOCTYPE HTML PUBLIC "-//W3C //DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

pela lista podemos ver que o único em que estamos interessados é o número 1. O segundo item verifica se o nosso elemento é um input (lembre-se, também temos uns <br /> no meio), um detalhe, a propriedade tagName sempre fica em maiúsculo, independende de como vocês a escreveu no HTML.

node.checked = marcar; -> finalmente, após tudo estamos marcado ou desmarcando o checkbox (de acordo com o parâmetro passado), a propriedade checked pertence apenas a radios e checkboxes, ela indica se ele esta ou não marcado, e pode ser usada para definir também (como nós fizemos).

Ufa, terminamos a função principal, vamos a parte do código que faz a nossa mágica da não obstrução:

window.onload = function() {

Colamos o codigo dentro dessa função por um motivo simples, nós vamos mexer com o HTML do site, se tentarmos fazer isso antes do documento ser carregado vai dar erro (pois os elementos ainda não vão existir). Por hora, apenas saiba que window.onload é o evento que dispara quando a página é carregada.

 var marcaTudoObj = $('marcaTodosLink');
 var desmarcaTudoObj = $('desmarcaTodosLink');
 var fastCheckObj = $('fastCheckDiv');

Nessas linhas pegamos as referências para os elementos HTML.

 marcaTudoObj.onclick = function() {
  marcaBoxes(true);
 };
 
 desmarcaTudoObj.onclick = function() {
  marcaBoxes(false);
 };

Agora colocamos os eventos, estamos dizendo que quando clicar, é para executar a função (que vai logo em seguida). Essa com certeza não é a melhor maneira para colocar eventos nos objetos, mas é a mais simples.

fastCheckObj.style.display = '';

E finalmente, nós fazemos os links ficarem visíveis alterando o css dele (vejam como é simples alterar um css, apenas digita-se .style, depois .propriedade e altera). O motivo de ter deixado os links invisíveis, pensem bem, esses links só funcionam se o JavaScript estiver ativado, então, se o JavaScript estiver desativado eles irão permanecer invisíveis, dessa forma o clinte não vai tentar clicar numa coisa que não faz nada.

Mais explicações
Talvez você tenha entendido, talvez não, mas o DOM usa uma estrutura de árvore para guardar os elementos, se você já estudou e sabe oque é isso, ótimo, se não, pense no windows explorer, quando vemos as pastas à esquerda, aquilo é uma estrutura de árvore, cada "nó" pai pode ter varios "nós" filhos, e assim sucessivamente, do mesmo jeito que uma árvore tem galhos, e galhos sobre galhos... No XML temos o nó principal (no HTML seria a propria tag <html>), e esse nó tem varios filhos (<head> <body>), que pode sua vez tem mais varios... Usando esse pensamentos podemos percorrer o documento do jeito que quizermos. Vou colocar os principais atributos usados:

objeto.childNodes - coleção com os nós filhos
objeto.parentNode - nó pai (o nó em qual ele está agrupado)
objeto.nextSibling - o próximo nó (ainda dentro do mesmo pai)
objeto.previousSibling - nó anterior (dentro do mesmo pai)
objeto.tagName - nome da tag
objeto.nodeName - nome da tag (mesma coisa que o anterior)

Com isso você pode "navegar" a vontade pelo documento a partir de qualquer lugar. Existe uma coisa do DOM chamada XPath, com ele você facilmente localiza nodes no documento, eu sinceramente ainda não estudei o XPath no JavaScript, mas sei que ele existe, qualquer dia desses eu posto só sobre isso ;)

Por hoje ficamos por aqui, no próximo artigo vou falar sobre DHTML, vamos fazer alguns efeitos no site. Como sempre, aquela referência esperta (essa é meio grande XD) dos objetos html em geral:

Generic HTML Element Object (Document Object)
Generic (X)HTML elements have the form described here. This list of properties, methods, and event handlers are common to almost all (X)HTML element objects and are, in fact, the only properties, methods, and event handlers defined for a large number of very basic elements, such as <b>, <i>, and <u>. Each of these objects corresponds to an occurrence of an (X)HTML element on the page. Access to one of these objects is achieved through standard DOM methods like document.getElementById().

 Note  Some properties do not have a well-defined meaning for particular objects, even though the properties may be defined for them. For example, blurring an <hr> tag is interesting given that it is difficult to focus the object in general Web use. 
 

Properties
accessKey Single character string indicating the hotkey that gives the element focus. (IE4+)

all[] Collection of elements enclosed by the object. (IE4+)

align String specifying the alignment of the element, for example, "left". This property is defined only for display elements such as b, big, cite, and so on. (IE4+)

attributes[] Collection of read-only attributes for the element. (IE5+, MOZ/N6+, DOM1)

begin Sets or retrieves delay before timeline begins playing the element. See MSDN. (IE5.5+, SMIL)

behaviorUrns[] Collection of DHTML Behaviors attached to the node. (IE5+)

canHaveChildren Read-only Boolean value indicating whether the element can have child nodes. (IE5+)

canHaveHTML Read-only Boolean indicating whether the element can enclose HTML markup. (IE5.5+)

childNodes[] Read-only collection of child nodes of the object. (IE5+, MOZ/N6+, DOM1)

children[] Read-only collection of child nodes. This is IE’s pre-DOM equivalent of childNodes[]. (IE4+)

className String holding value of the CSS class(es) the element belongs to. (IE4+, MOZ/N6+, DOM1)

clientHeight Read-only numeric value indicating the height of the element’s content area in pixels. (IE4+) 

clientLeft Read-only numeric value indicating the difference between the offsetLeft property and the beginning of the element’s content area, in pixels. (IE4+)

clientTop Read-only numeric value indicating the difference between the offsetTop property and the beginning of the element’s content area, in pixels. (IE4+)

clientWidth Read-only numeric value indicating the width of the element’s content area in pixels. (IE4+)

contentEditable String determining whether the element’s content is editable. Values are "inherit", "true", or "false". A value of "inherit" means that it will inherit the contentEditable property of its parent (this value is the default). This property is useful for making table data cells editable. Elements with disabled set to true are not editable, no matter what value this property has. Corresponds to the contenteditable attribute. (IE5.5+)

currentStyle Read-only reference to the Style object reflecting all styles applied to the element, including global (default) style. (IE5+)

dir String holding the text direction of text enclosed by the element. If set, its value is either "ltr" (left to right) or "rtl" (right to left). (IE5+, MOZ/N6+, DOM1)

disabled Boolean indicating whether the element is disabled (grayed out). (IE4+)

document An undocumented reference to the Document in which the element is contained. (IE4+)

filters[] Collection of Microsoft CSS Filters applied to the element. (IE4+)

firstChild Read-only reference to the first child node of the element, if one exists (null otherwise). (IE5+, MOZ/N6+, DOM1)

hasMedia Read-only Boolean indicating whether the element is an HTML+TIME media element. (IE5.5+)

hideFocus Boolean indicating whether the object gives a visible cue when it receives focus. (IE5.5+)

id String holding the unique alphanumeric identifier for the element. Commonly assigned using the id HTML attribute and used as the target for getElementById(). This unique identifier is not only important for scripting, but also for binding of CSS. (IE4+, MOZ/N6+, DOM1)

innerHTML String holding the HTML content enclosed within the element’s tags. (IE4+, MOZ/N6+)

innerText String holding the text enclosed by the element’s tags. This text is not interpreted as HTML, so setting it to a value like "<b>Important</b>" will result in "<b>Important</b>" being displayed, rather than "Important" with boldfaced font. (IE4+)

isContentEditable Read-only Boolean indicating if the user can edit the element’s contents. (IE5.5+)

isDisabled Read-only Boolean indicating if the user can interact with the object. (IE5.5+)

isTextEdit Read-only Boolean indicating if a TextRange object can be created using the object. (IE4+)

lang String holding language code for the content the element encloses. Corresponds to the lang HTML attribute. For a full list of valid values, see RFC 1766 (http://www.ietf.org/rfc/rfc1766.txt?number=1766), which describes language codes and their formats. (IE4+, MOZ/N6+, DOM1) 

language String indicating the scripting language in use. (IE4+)

lastChild Read-only reference to the last child node of the element, if one exists (null otherwise). (IE5+, MOZ/N6+, DOM1)

localName Read-only string indicating the "local" XML name for the object. (MOZ/N6+)

namespaceURI Read-only string indicating the XML Namespace URI for the object. (MOZ/N6+)

nextSibling Read-only reference to next sibling of the node, for example, if its parent has multiple children. (IE5+, MOZ/N6+, DOM1)

nodeName Read-only string containing name of the node, the name of the tag to which the object corresponds, for example, "H1". (IE5+, MOZ/N6+, DOM1)

nodeType Read-only number holding the DOM defined node type. For example, element nodes have node type 1. A list of the common node types can be found in the following table. (IE5+, MOZ/N6+, DOM1) [tabela 1]

nodeValue String containing value within the node (or null if no value). (IE5+, MOZ/N6+, DOM1)

offsetHeight Read-only numeric value indicating the height of the element in pixels. (IE4+, MOZ/N6+)

offsetLeft Read-only numeric value indicating the pixel offset of the left edge of the element, relative to its offsetParent. (IE4+, MOZ/N6+)

offsetParent Read-only reference to the object relative to which the offsetHeight/Width/Left/Top is calculated. (IE4+, MOZ/N6+)

offsetTop Read-only numeric value indicating the pixel offset of the top edge of the element, relative to its offsetParent. (IE4+, MOZ/N6+)

offsetWidth Read-only numeric value indicating the width of the element in pixels. (IE4+, MOZ/N6+)

outerHTML String holding the HTML content enclosed within (and including) the element’s tags. (IE4+)

outerText String holding the text enclosed by (and including) the element’s tags. (IE4+) 

ownerDocument Read-only reference to the Document in which the element is contained. (IE5+, MOZ/N6+, DOM1)

parentElement Reference to the node’s parent. This is IE’s pre-DOM equivalent of parentNode. (IE4+)

parentNode Read-only reference to the parent of the object (or null if none exists). (IE4+, MOZ/N6+, DOM1)

parentTextEditv Read-only reference to the innermost container element outside of the current object that is capable of creating a TextRange containing the current element. (IE4+)

prefixv Read-only string containing the "prefix" XML name for the object. (MOZ/N6+)

previousSibling Read-only reference to previous sibling of the node, for example, if its parent node has multiple children. (IE5+, MOZ/N6+, DOM1)

readyState Read-only string containing the current state of the object. Values include "uninitialized", "loading", "loaded", "interactive" (not finished loading but able to respond to user actions), and "complete". Objects progress through each of these states until they have completed loading, though some objects may skip some intermediate steps (for example, pass from "uninitialized" directly to "complete"). This property is very useful in determining whether an element has completed loading. However, you should always make sure the object exists in the Document before attempting to read this property (otherwise, a runtime error will be thrown because you would be attempting to read a property of an object not yet defined). Note that an <object>s readyState is given by the integers 0 through 4 (with the same meaning). (IE4+)

recordNumber Read-only numeric value indicating the record number of the data set from which the element was generated. (IE4+)

runtimeStyle Reference to the Style object that reflects the current (runtime) style characteristics of the element. (IE5+)

scopeName Read-only string containing the XML scope for the object. (IE5+)

scrollHeight Numeric read-only value indicating the total height in pixels of the element’s content area, no matter how much is displayed on screen. (IE4+)

scrollLeft Numeric value indicating the distance in pixels from the left edge of the object to the leftmost edge of the object that is currently displayed. (IE4+)

scrollTop Numeric value indicating the distance in pixels from the top edge of the object to the topmost edge that is currently displayed. (IE4+)

scrollWidth Numeric read-only value indicating the total width in pixels of the object’s content area, no matter how much is displayed on screen. (IE4+)

sourceIndex Read-only number indicating the index of the element in the document.all[] collection. (IE4+)

style Reference to the inline Style object for the element. (IE4+, N4+, DOM2)

syncMaster Specifies whether time container must synchronize with the element. See MSDN. (IE5.5+, SMIL)

tabIndex Numeric value indicating the tab order for the object. Elements with positive values for this property are tabbed to in order of increasing tabIndex (before any others). Elements with zero for this property (the default) are tabbed to in the order they occur in the document source. Elements with negative values are not tabbed to at all. (IE4+) 

tagName String containing the name of the tag to which the object corresponds, for example, "H1." (IE5.5+, MOZ/N6+, DOM1)

tagUrn String containing the URN of the XML Namespace for the object. (IE5+)

timeContainer Sets or retrieves the type of timeline associated with the element. (IE5.5+, SMIL)

title String containing advisory text for the element. (IE4+, MOZ/N6+, DOM1)

uniqueID An auto-generated read-only unique id for this element. (IE5+)

Methods
addBehavior(url) Attaches the DHTML Behavior referenced by string url to the element. (IE5+)

addEventListener(whichEvent, handler, direction) Instructs the object to execute the function handler whenever an event of type given in the string whichEvent (for example, "click") occurs. The direction is a Boolean specifying the phase in which to fire, true for capture or false for bubbling. (MOZ/N6+, DOM2)

appendChild(newChild) Appends newChild to end of the node’s childNodes[] list. (IE5+, MOZ/N6+, DOM1 Core)

applyElement(newElement [, where]) "Applies" one element to another by enclosing one within the other. If where is omitted or has value "outside", the object referenced by newElement becomes the parent of the current element. Otherwise, newElement becomes the only child of the current element, enclosing all of the current element’s children. (IE5+)

attachEvent(whichHandler, theFunction) Attaches the function theFunction as a handler specified by the string whichHandler, for example, "onclick". (IE5+)

blur() Removes focus from the element. (IE5+ for most elements. For form fields N2+ or N3+ and IE3+ or IE4+ and DOM1, listed specifically for each object)

clearAttributes() Clears all nonessential HTML attributes from the element (leaves id, dir, etc.). (IE5+)

click() Simulates a mouse click at the object. (IE4+)

cloneNode(cloneChildren) Clones the node and returns the new clone. If cloneChildren is true, the returned node includes the recursively constructed subtree of clones of the node’s children. (IE5+, MOZ/N6+, DOM1 Core)

componentFromPoint(x, y) Returns a string that gives information about the pixel coordinate (x,y) in the client window with respect to the current element. The string returned may have one of the values in the following table [tabela 2]. The return value specifies whether the coordinate is inside of the element (""), outside of the element ("outside"), or a part of the various scrolling mechanisms that may be displayed for the element.

This method is often used with events to determine where user activity is taking place with respect to a particular element and to take special actions based on scroll bar manipulation. (IE5+)

contains(element) Returns a Boolean indicating if the object given in element is contained within the element. (IE4+)

detachEvent(whichHandler, theFunction) Instructs the object to cease executing the function theFunction as a handler given the string whichHandler, for example, "onclick". (IE5+)

dispatchEvent(event) Causes the Event instance event to be processed by the object’s appropriate handler. Used to redirect events. (MOZ/N6+, DOM2)

dragDrop() Initiates a drag event at the element. (IE5.5+)

fireEvent(handler [, event]) Causes the event handler given by the string handler to fire. If an Event instance was passed as event, the new event created reflects the properties of event. (IE5.5+)

focus() Gives focus to the element.

getAdjacentText(where) Returns the string of text corresponding to the text string at position where, with respect to the current node. The where parameter is a string with the following values [tabela 3]

There is no standard DOM method that mimics this behavior. Instead, you must examine the previousSibling, firstChild, lastChild, or nextSibling (in order corresponding to the values of where in the preceding table) and extract the string manually from their text node(s). (IE5+)

getAttribute(name) Returns a string containing the value of the attribute specified in the string name or null if it does not exist. (IE4+, MOZ/N6+, DOM1 Core)

getAttributeNode(name) Returns the attribute node corresponding to the attribute in the string name. (IE6+, MOZ/N6+, DOM1 Core)

getBoundingClientRect() Retrieves a TextRectangle with properties top, bottom, left, right indicating the pixel values of the rectangle in which the element’s content is enclosed. (IE5+)

getClientRects() Retrieves a collection of TextRectangle objects, which give the pixel coordinates of all bounding rectangles contained in the element. (IE5+)

getElementsByTagName(tagname) Retrieves a collection of elements corresponding to the tag given in string tagname. A value of "*" retrieves all tags. (IE5+, MOZ/N6+, DOM1 Core)

getExpression(propertyName) Retrieves the string giving the dynamic property expression for the property/attribute named propertyName. (IE5+)

hasAttribute(name) Returns a Boolean indicating if the attribute given in string name is defined for the node (explicitly or by default). (MOZ/N6+, DOM2 Core)

hasAttributes() Returns a Boolean indicating if any attributes are defined for the node. (MOZ/N6+, DOM2 Core)

hasChildNodes() Returns a Boolean indicating if the node has children. (IE5+, MOZ/N6+, DOM1 Core)

insertAdjacentElement(where, element) Inserts the element object given in element adjacent to the current element in the position given by the string where (IE5+).The possible values for where include these [tabela 4]

insertAdjacentHTML(where, text) Inserts the HTML given in string text adjacent to the current element according to the string where. See table under insertAdjacentElement() for the meaning of this parameter. The text is parsed and added to the document tree. (IE5+) 

insertAdjacentText(where, text) Inserts the text given in string text adjacent to the current element according to the string where. See table under insertAdjacentElement() for the meaning of this parameter. The text is not parsed as HTML. (IE5+)

insertBefore(newChild, refChild) Inserts node newChild in front of refChild in the childNodes[] list of refChild's parent node. (IE5+, MOZ/N6+, DOM1 Core)

isSupported(feature [, version]) Returns a Boolean indicating whether feature and version given in the argument strings are supported. (MOZ/N6+, DOM2 Core)

mergeAttributes(source [, preserve]) Merges all attributes, styles, and event handlers from the element node source into the current element. (IE5+)

normalize() Recursively merges adjacent text nodes in the sub-tree rooted at this element. (IE6+, MOZ/N6+, DOM1 Core)

releaseCapture() Disables universal mouse event capturing at that object. (IE5+)

removeAttribute(name) Removes attribute corresponding to string name from the node. (IE4+, MOZ/N6+, DOM1 Core)

removeAttributeNode(attribute) Removes the attribute node given by node attribute and returns the removed node. (IE6+, MOZ/N6+, DOM1 Core)

removeBehavior(id) Removes the DHTML Behavior associated with id (previously returned by attachBehavior()) from the element. (IE4+)

removeChild(oldChild) Removes oldChild from the node’s children and returns a reference to the removed node. (IE5+, MOZ/N6+, DOM1 Core)

removeEventListener(whichEvent, handler, direction) Removes function handler as a handler for the event given in the string whichEvent (for example, "click") for the phase given by the Boolean direction. (MOZ/N6+, DOM2)

removeExpression(propertyName) Removes dynamic property expression for the property given in the string propertyName. (IE5+)

replaceAdjacentText(where, text) Replaces the text at position where relative to the current node with the text (non-HTML) string text (IE5+). Possible values for where include [tabela 5]

replaceChild(newChild, oldChild) Replaces the node’s child node oldChild with node newChild. (IE5+, MOZ/N6+, DOM1 Core)

replaceNode(newNode) Replaces the current node with newNode. (IE5+) 

scrollIntoView([alignToTop]) Causes the object to be immediately scrolled into the viewable area of the window. If alignToTop is true or omitted, the top of the object is aligned with the top of the window (if possible). Otherwise, if alignToTop is false, the object is scrolled so that the bottom of the object is aligned with the bottom of the viewable window. (IE4+)

setActive() Sets the object as the active object without giving it focus. (IE5.5+)

setAttribute(name, value) Sets a new attribute for the node with name and value given by the string arguments. (IE4+, MOZ/N6+, DOM1 Core)

setAttributeNode(newAttr) Adds the attribute node newAttr (replacing and returning any attribute node with the same name). (IE6+, MOZ/N6+, DOM1 Core)

setCapture([containerCapture]) Causes all mouse events occurring in the document to be sent to this object. (IE5+)

setExpression(property, expression [, language]) Sets the expression given in string expression as the dynamic expression for the property given in string property. The optional language parameter specifies which scripting language the expression is written in, for example, "VBscript" (JScript is the default). Commonly used as a method of element nodes and Style objects. Used for setting dynamic expressions. (IE5+)

swapNode(node) Exchanges the location of the object with node in the object hierarchy. (IE5+)

unwatch(property) Removes the watchpoint on the property given in the string property. (N4+)

watch(property, handler) "Watches" the property given in string property and invokes the function handler whenever its value changes. The handler is passed the name of the property, the old value, and the value to which it is being set. Any value the function returns is interpreted as the new value for the property. (N4+)

Notes
With the exception of the object scriptable under traditional models (Form, Image, and so on), most elements become scriptable in Internet Explorer 4+, Mozilla/Netscape 6+, and DOM1.

HTML elements are referred to both in uppercase and lowercase under the DOM, so <p> and <P> are both equivalent to an HTMLParagraph object.

Tabela 1

Node Type Number	Type	Description	Example
1	Element	An HTML or XML element	<p>…</p>
2	Attribute	An attribute for an HTML or XML element	align="center"
3	Text	A fragment of text that would be enclosed by an HTML or XML element	This is a text fragment!
8	Comment	An HTML comment	<!-- This is a comment -->
9	Document	The root document object, namely the top element in the parse tree	<html>
10	DocumentType	A document type definition	<!DOCTYPE HTML PUBLIC "-//W3C //DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Tabela 2

Return Value	Component at the Given Coordinate
""	Component is inside the client area of the object.
"outside"	Component is outside the bounds of the object.
"scrollbarDown"	Down scroll arrow is at the specified location.
"scrollbarHThumb"	Horizontal scroll thumb or box is at the specified location.
"scrollbarLeft"	Left scroll arrow is at the specified location.
"scrollbarPageDown"	Page-down scroll bar shaft is at the specified location.

"scrollbarPageLeft"	Page-left scroll bar shaft is at the specified location.
"scrollbarPageRight"	Page-right scroll bar shaft is at the specified location.
"scrollbarPageUp"	Page-up scroll bar shaft is at the specified location.
"scrollbarRight"	Right scroll arrow is at the specified location.
"scrollbarUp"	Up scroll arrow is at the specified location.
"scrollbarVThumb"	Vertical scroll thumb or box is at the specified location.
"handleBottom"	Bottom sizing handle is at the specified location.
"handleBottomLeft"	Lower-left sizing handle is at the specified location.
"handleBottomRight"	Lower-right sizing handle is at the specified location.
"handleLeft"	Left sizing handle is at the specified location.
"handleRight"	Right sizing handle is at the specified location.
"handleTop"	Top sizing handle is at the specified location.
"handleTopLeft"	Upper-left sizing handle is at the specified location.
"handleTopRight"	Upper-right sizing handle is at the specified location.

Tabela 3

Value of where	String Returned
"beforeBegin"	Text immediately preceding element’s opening tag (back to but not including first element encountered).
"afterBegin"	Text immediately following the element’s opening tag (up to but not including the first nested element).
"beforeEnd"	Text immediately preceding the element’s closing tag (back to but not including the closing tag of the last enclosed element).
"afterEnd"	Text immediately following element’s closing tag (up to but not including the first following tag).

Tabela 4

Value of where	Effect
"beforeBegin"	Inserts immediately before the object.
"afterBegin"	Inserts after the start of the object but before all other content.
"beforeEnd"	Inserts immediately before the end of the object, after all other content.
"afterEnd"	Inserts immediately after the end of the object.

Tabela 5

Value of where	Effect
"beforeBegin"	Replaces text immediately before the object (back to but not including first tag or end tag encountered).
"afterBegin"	Replaces text at the start of the object but before all other enclosed content (up to but not including first opening tag).
"beforeEnd"	Replaces text immediately before the end of the object, after all other content (back to but not including last tag or closing tag).
"afterEnd"	Replaces text immediately after the element’s closing tag (up to but not including the next tag).

Outros objetos Built-In

2006-09-29T11:51:00.000-03:00

Olá meus queridos leitores.
Hoje vamos continuar nossos estudos pelos objetos Built-In e finaliza-los!

Lembrando, eu não cobri todos os objetos Built-In, eu cobri os principais e mais usados. Hoje vamos ver os próximos, let's go!

Objeto Date
Como o nome diz, o objeto Date serve para trabalhar com datas em JavaScript, vamos ao primeiro exemplo:

var d = new Date();
alert(d.toString());

Iniciando o objeto Date sem usar parâmetros nós pegamos a data atual do computador do cliente, usando o toString() conseguimos a data no formato GMT.
Vamos agora a um caso mais expecífico:

var d = new Date();
 
alert(d.getFullYear()); //ano
alert(d.getMonth()); //mes
alert(d.getDate()); //dia
alert(d.getHours()); //hora
alert(d.getMinutes()); //minutos
alert(d.getSeconds()); //segundos
alert(d.getMilliseconds()); //mili segundos
alert(d.getDay()); //dia da semana

Como visto acima, podemos pegar separadamente cada parte do tempo. O objeto Date é apenas isso mesmo, um problema muito normal é quando a pessoa quer fazer um calendário, o problema é que o JavaScript não da suporte nativo para dizer quantos dias tem o mês atual, mas isso não é nada que não possamos implementar:

Date.prototype.getMonthDays = function() {
 var days = [31, 0, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 
 var bisexto = false;
 var ano = this.getFullYear();
 
 if ((((ano % 4) == 0) && ((ano % 100) != 0)) || ((ano % 400) == 0)) {
  bisexto = true;
 }
 
 days[1] = bisexto ? 29 : 28;
 
 var mes = this.getMonth();
 
 return days[mes];
}

var d;
d = new Date();
alert(d.getMonthDays());
d = new Date(2006, 1, 12);
alert(d.getMonthDays());
d = new Date(2006, 0, 3);
alert(d.getMonthDays());

Percebam que podemos criar um objeto date informando a data para o objeto, isso é muito útil em caléndarios principalmente. Uma observação importante é que os mesês começam em 0 e não em 1, então 0 é janeiro, 1 é fevereiro...
Prontinho, agora ao usarmos o método getMonthDays teremos como retorno a quantidade de dias do mês, até que nem foi dificil.

Para terminar, vamos criar um relógio digital usando JavaScript, iremos usar um pouco de DOM dessa vez que já é pra dar um gostinho do próximo artigo (que será sobre DOM):

<html>
 <head>
  <title>Relógio Virtual - JavaScript Developer</title>
  <script type="text/javascript">
   var updateTime = function() {
   var obj = document.getElementById('relogio');
   var date = new Date();
   var dateString = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
   
   obj.innerHTML = dateString;
   setTimeout(updateTime, 1000);
   };
   
   window.onload = updateTime;
  </script>
 </head>
 <body>
  <div id="relogio"></div>
 </body>
</html>

Sem miraculosidades, a função updateTime pega uma referência para o DIV com id relógio (usando o document.getElementById(), vamos ver isso melhor na próxima aula), depois pega a data atual, cria uma string com a hora atual, troca o conteúdo da DIV (usando a propriedade innerHTML) e finalmente manda que ela seja executada novamente após 1 segundo (usando setTimeout()).
Isso é tudo que eu tenho a dizer sobre o objeto Date, vamos ao próximo.

Referência do objeto Date:

Date (Built-in Object)
The Date object provides a wide variety of methods for manipulating dates and times. It is important to remember that Date instances do not contain a “ticking clock” but rather hold a static date value. Internally, the date is stored as the number of milliseconds since the epoch (midnight of January 1, 1970 UTC). This accounts for the prominent role of milliseconds in many Date methods.

Milliseconds, seconds, minutes, hours, and months are enumerated beginning with zero; so, for example, December is month 11. Days are enumerated beginning with 1. Years should always be given using four digits. Modern implementations permit years as much as several hundred thousand years in the past or future, although older implementations often have trouble handling dates before 1970. Many implementations have trouble handling dates before 1 A.D.

Note that Universal Coordinated Time (UTC) is the same as Greenwich Mean Time (GMT).

Constructor
var instanceName = new Date(); 

var instanceName = new Date(milliseconds); 

var instanceName = new Date(stringDate); 

var instanceName = new Date(year, month, day [, hrs [, mins [, secs [, ms]]]]); 

The first constructor syntax creates a new Date instance holding the current date and time. The second syntax creates an instance holding the date given by the number of milliseconds given in the numeric milliseconds argument. The third syntax attempts to create an instance by converting the string stringDate into a valid date using the parse() method (see under the “Methods” section). The fourth syntax creates an instance according to its numeric arguments. If the optional parameters are omitted, they are filled with zero.

Properties
constructor Reference to the constructor object, which created the object. (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

prototype Reference to the object’s prototype. (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

Methods
getDate() Returns a numeric value indicating the day of the month (1-based). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

getDay() Returns a numeric value indicating the day of the week (0 for Sunday, 1 for Monday, and so on). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

getFullYear() Returns a numeric value indicating the four-digit year. (IE4+ (JScript 3.0+), MOZ, N4.06+ (JavaScript 1.3+), ECMA Edition 1)

getHours() Returns a numeric value indicating the hours since midnight (0-based). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

getMilliseconds() Returns a numeric value indicating the number of milliseconds (0-999). (IE4+ (JScript 3.0+), MOZ, N4.06+ (JavaScript 1.3+), ECMA Edition 1)

getMinutes() Returns a numeric value indicating the number of minutes (0–59). (IE4+ (JScript 3.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

getMonth() Returns a numeric value indicating the number of months since the beginning of the year (0–11; 0 is January). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

getSeconds() Returns a numeric value indicating the number of seconds (0–59). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

getTime() Returns a numeric value indicating the number of milliseconds since the epoch. Dates before the epoch return a negative value indicating the number of milliseconds before the epoch. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

getTimezoneOffset() Returns a numeric value indicating the difference in minutes between the local time and the UTC. Positive values indicate the local time is behind UTC (for example, in the United States) and negative values indicate the local time is ahead of UTC (for example, in India). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

getUTCDate() Returns a numeric value indicating the day of the month (1-based) using UTC. (IE4+ (JScript 3.0+), MOZ, N4.06+ (JavaScript 1.3+), ECMA Edition 1)

getUTCDay() Returns a numeric value indicating the day of the week (0 for Sunday, 1 for Monday, and so on) according to UTC. (IE4+ (JScript 3.0+), MOZ, N4.06+ (JavaScript 1.3+), ECMA Edition 1)

getUTCFullYear() Returns a numeric value indicating the four-digit year according to UTC. (IE4+ (JScript 3.0+), MOZ, N4.06+ (JavaScript 1.3+), ECMA Edition 1) 

getUTCHours() Returns a numeric value indicating the hours since midnight (0-based) according to UTC. (IE4+ (JScript 3.0+), MOZ, N4.06+ (JavaScript 1.3+), ECMA Edition 1)

getUTCMilliseconds() Returns a numeric value indicating the number of milliseconds (0–999) according to UTC. (IE4+ (JScript 3.0+), MOZ, N4.06+ (JavaScript 1.3+), ECMA Edition 1)

getUTCMinutes() Returns a numeric value indicating the number of minutes (0–59) according to UTC. (IE4+ (JScript 3.0+), MOZ, N4.06+ (JavaScript 1.3+), ECMA Edition 1)

getUTCMonth() Returns a numeric value indicating the number of months since the beginning of the year (0–11; 0 is January) according to UTC. (IE4+ (JScript 3.0+), MOZ, N4.06+ (JavaScript 1.3+), ECMA Edition 1)

getUTCSeconds() Returns a numeric value indicating the number of seconds (0–59) according to UTC. (IE4+ (JScript 3.0+), MOZ, N4.06+ (JavaScript 1.3+), ECMA Edition 1)

getYear() Returns the current year minus 1900 or in some cases a four-digit year if the year is greater than 1999. This method is deprecated; use getFullYear() instead. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

getVarYear() Returns the VT_DATE corresponding to the object. For use with interaction with COM or VBScript, but in general should be avoided. (IE4+ (JScript 3.0+))

parse(stringDate) Attempts to parse the date given in the string stringDate and if successful returns the number of milliseconds of the date relative to the epoch. Valid strings are given in Chapter 7 but in general can be any common representation of a date, for example "month/day/year", "month day, year", or "month day, year hh:mm:ss". Unambiguous shorthand (for example, "Dec" for December) is permitted. If the date cannot be parsed, NaN is returned. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1, Static)

setDate(dayOfMonth) Sets the day of the month (1-based) in local time as given by the numeric parameter dayOfMonth. (IE4+ (JScript 3.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

setFullYear(year [, month [, day]]) Sets the date to the year given in the numeric argument year in local time. If the numeric parameters month and day are passed, the month (0-based) and day of the month (1-based) are set as well. If month is greater than 11, the year is incremented accordingly. If day is greater than the number of days in the month, the month is incremented accordingly. (IE4+ (JScript 3.0+), MOZ, N4.06+ (JavaScript 1.3+), ECMA Edition 1)

setHours(hours [, mins [, secs [, ms]]]) Sets the hours (0-based) to the numeric argument given in hours in local time. If the optional parameters are passed, the minutes, seconds, and milliseconds are set accordingly. If any of the parameters is greater than the normal range of values, the date is adjusted accordingly (for example, 60 seconds increments the minutes by one and sets the seconds to zero). (IE4+ (JScript 3.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

setMilliseconds(ms) Sets the milliseconds (0-based) to the numeric argument ms in local time. If ms is greater than 999, the seconds are adjusted accordingly. (IE4+ (JScript 3.0+), MOZ, N4.06+ (JavaScript 1.3+), ECMA Edition 1)

setMinutes(minutes [, secs [, ms]]) Sets the minutes (0-based) to the numeric argument minutes in local time. If numeric arguments secs and ms are supplied, the seconds and milliseconds are set to these values. If any argument is greater than the normal range, appropriate values are incremented accordingly (for example, if secs is 60, the minute is incremented by one and the seconds set to zero). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1) 

setMonth(month [, day]) Sets the month (0-based) to the numeric argument month in local time. If the numeric argument day is supplied, the day of the month (1-based) is set accordingly. If either value is outside of the expected range, the date is adjusted accordingly (for example, if month is 12 the year is incremented and the month is set to zero). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

setSeconds(seconds [, ms]) Sets the seconds (0-based) to the numeric argument seconds in local time. If numeric argument ms is supplied, the milliseconds (0-based) are set accordingly. If either value is outside the expected range, the date is adjusted accordingly (for example, if ms is 1000, then the seconds are incremented and milliseconds set to 0). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

setTime(ms) Sets the date to the date given by the number of milliseconds since the epoch given in ms. Negative values of ms specify dates before the epoch. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

setUTCDate(dayOfMonth) Sets the day of the month (1-based) in UTC as given by the numeric parameter dayOfMonth. (IE4+ (JScript 3.0+), MOZ, N4.06+ (JavaScript 1.3+), ECMA Edition 1)

setUTCFullYear(year [, month [, day]]) Sets the date to the year given in the numeric argument year in UTC. If the numeric parameters month and day are passed, the month (0-based) and day of the month (1-based) are set as well. If month is greater than 11, the year is incremented accordingly. If day is greater than the number of days in the month, the month is incremented accordingly. (IE4+ (JScript 3.0+), MOZ, N4.06+ (JavaScript 1.3+), ECMA Edition 1)

setUTCHours(hours [, mins [, secs [, ms]]]) Sets the hours (0-based) to the numeric argument given in hours in UTC. If the optional parameters are passed, the minutes, seconds, and milliseconds are set accordingly. If any of the parameters is greater than the normal range of values, the date is adjusted accordingly (for example, a value of 60 seconds increments the minutes by one and sets the seconds to zero). (IE4+ (JScript 3.0+), MOZ, N4.06+ (JavaScript 1.3+), ECMA Edition 1)

setUTCMilliseconds(ms) Sets the milliseconds (0-based) to the numeric argument ms in UTC. If ms is greater than 999, the seconds are adjusted accordingly. (IE4+ (JScript 3.0+), MOZ, N4.06+ (JavaScript 1.3+), ECMA Edition 1)

setUTCMinutes(minutes [, secs [, ms]]) Sets the minutes (0-based) to the numeric argument minutes in UTC. If numeric arguments secs and ms are supplied, the seconds and milliseconds are set to these values. If any argument is greater than the normal range, appropriate values are incremented accordingly (for example, if secs is 60, the minute is incremented by one and the seconds set to zero). (IE4+ (JScript 3.0+), MOZ, N4.06+ (JavaScript 1.3+), ECMA Edition 1)

setUTCMonth(month [, day]) Sets the month (0 based) to the numeric argument month in UTC. If the numeric argument day is supplied, the day of the month (1-based) is set accordingly. If either value is outside of the expected range, the date is adjusted accordingly (for example, if month is 12, the year is incremented and the month is set to zero). (IE4+ (JScript 3.0+), MOZ, N4.06+ (JavaScript 1.3+), ECMA Edition 1) 

setUTCSeconds(seconds [, ms]) Sets the seconds (0-based) to the numeric argument seconds in UTC. If numeric argument ms is supplied, the milliseconds (0-based) are set accordingly. If either value is outside the expected range, the date is adjusted accordingly (for example, if ms is 1000, then the seconds are incremented and milliseconds set to 0). (IE4+ (JScript 3.0+), MOZ, N4.06+ (JavaScript 1.3+), ECMA Edition 1)

setYear(year) This method is deprecated; use setFullYear() instead. Sets the year to the numeric value year in local time. The year parameter must be the desired year minus 1900. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

toGMTString() This method is deprecated; use toUTCString() instead. Returns the string representation of the date relative to GMT. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

toLocaleString() Returns the date converted to a string formatted according to local conventions as defined by the operating system. For example, the U.S. uses month/day/year whereas Europe uses day/month/year. The return value is not to be used for computation, but rather for display to the user. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

toString() Returns the date as a string. (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

toUTCString() Returns the date formatted as a string according to UTC. (IE4+ (JScript 3.0+), MOZ, N4.06+ (JavaScript 1.3+), ECMA Edition 1)

UTC(year, month, day [, hours [, mins [, secs [, ms]]]]) This static method returns a numeric value indicating the number of milliseconds between the epoch and the date given by the numeric parameters. Any parameters outside of their expected range cause the date to be adjusted accordingly. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

valueOf() Returns a numeric value indicating the number of milliseconds difference between the date and the epoch. (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

Support
Supported in IE3+ (JScript 1.0+), Mozilla, N2+ (JavaScript 1.0+), ECMAScript Edition 1.

Notes
The Date object is seriously broken in older browsers. The authors suggest avoiding its use except in the most basic tasks in browsers earlier than IE4 and Netscape 4.

The Date object cannot be enumerated directly using for/in.

Objeto Global

Esse é o objeto mais desconhecido e conhecido ao mesmo tempo, muitos usam ele e nem sabem da sua existência.
O objeto Global é um objeto estático (não pode ser instanciado, você não pode fazer: a = new Global()), e assim só tem métodos estáticos. O objeto global pode ser acesso de qualquer lugar, é até meio complicado falar dele, pois ele não tem nada específico, então eu prefiro falar diretamente de suas constates e métodos:

método eval

Esse talvez sejá o método mais conhecido do objeto Global, muitos que ja mexeram com JavaScript devem te-lo usado.
Para quem não conhece, o eval consegue pegar um string, e executa-la como se fosse código, exemplo:

var a = "alert('codigo a ser executado por eval')";
eval(a);

A variável a contém dentro dela uma string, e o eval executa essa string como se fosse código, veremos bem sua utilidade ao estudar-mos Ajax, pois o melhor padrão atual para transferencia de dados (o JSON), usa diretamente o eval para ler o conteudo.

método parseInt

O método parseInt converte uma string em número, exemplo:

var a = '5';
var b = '6';

alert(a + b);
alert(parseInt(a) + parseInt(b));

constantes

Infinity - contem um valor de infinito (um número quando ultrapassa o limite do javascript)
NaN - Not a Number, constante para calculos erroneos que não retornaram um número
undefined - para variáveis indefinidas

Isso é o principal do Global, o resto eu deixo pela referência:

Global (Built-in Object)
The Global object provides methods and constants that can be used freely anywhere in your scripts. Global is defined to be the globally enclosing context, so this object cannot be instantiated or even directly accessed; its properties and methods are always within the scope of an executing script. Its sole purpose is as a catch-all for globally available methods and constants.

Constructor
This object cannot be instantiated because it defines the global context and thus has no constructor.

Properties
Infinity Constant holding the numeric value Infinity. (IE4+ (JScript 3.0+), N4.06+ (JavaScript 1.3+), MOZ, ECMA Edition 1)

NaN Constant holding the numeric value NaN (not a number). (IE4+ (JScript 3.0+), N4.06+ (JavaScript 1.3+), MOZ, ECMA Edition 1)

undefined Constant holding the value undefined. (IE5.5+ (JScript 5.5+), N4.06+ (JavaScript 1.3+), MOZ, ECMA Edition 1)

Methods
decodeURI(encodedURI) URI-decodes the string encodedURI and returns the decoded string. (IE5.5+ (JScript 5.5+), MOZ/N6+ (JavaScript 1.5+), ECMA Edition 3)

decodeURIComponent(encodedURI) URI-decodes the string encodedURI and returns the decoded string. (IE5.5+ (JScript 5.5+), MOZ/N6+ (JavaScript 1.5+), ECMA Edition 3)

encodeURI(uri) URI-encodes the string uri, treating uri as a full URI. Legal URI characters (for example, the :// after the protocol) are not encoded. Returns the encoded string. (IE5.5+ (JScript 5.5+), MOZ/N6+ (JavaScript 1.5+), ECMA Edition 3) 

encodeURIComponent(uriComponent) URI-encodes the string uriComponent and returns the encoded string. All potentially problematic characters (for example, / and ?) are encoded. (IE5.5+ (JScript 5.5+), MOZ/N6+ (JavaScript 1.5+), ECMA Edition 3)

escape(string) URI-encodes string and returns the encoded string. Using the newer encodeURIComponent() is preferable. (IE3+ (JScript 1.0+), N2+ (JavaScript 1.0+), MOZ)

eval(string) Executes string as JavaScript. (IE3+ (JScript 1.0+), N2+ (JavaScript 1.0+), MOZ, ECMA Edition 1)

isFinite(value) Returns a Boolean indicating if the numeric argument value is finite. Returns false if value is NaN. (IE4+ (JScript 3.0+), N4.06+ (JavaScript 1.3+), MOZ, ECMA Edition 1)

isNaN(value) Returns a Boolean indicating if the numeric argument value is NaN. (IE4+ (JScript 3.0+), N3+ (JavaScript 1.1+), MOZ, ECMA Edition 1)

parseFloat(string) Parses string as a floating-point number and returns its value. If string cannot be converted, NaN is returned. (IE3+ (JScript 1.0+), N2+ (JavaScript 1.0+), MOZ, ECMA Edition 1)

parseInt(string) Parses string as an integer and returns its value. If string cannot be converted, NaN is returned. (IE3+ (JScript 1.0+), N2+ (JavaScript 1.0+), MOZ, ECMA Edition 1)

unescape(encodedString) URI-decodes encodedString and returns the decoded string. Using the newer decodeURIComponent() method is preferable. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

Support
Supported in IE3+ (JScript 1.0+), N2+ (JavaScript 1.0+), Mozilla, ECMAScript Edition 1.

Por hoje é apenas isso, no próximo começaremos o DOM, ai vai ficar mais legal, vamos ver como mexer com elementos html e alguns efeitos simples ;). Até lá.

Só para complementar, quando eu postei sobre objetos eu esqueci de deixar a referência do Object, vou coloca-la abaixo e também vou adiciona-la no post de objetos:

Object (Built-in Object)
Object is the basic object from which all other objects are derived. It defines methods common to all objects that are often overridden to provide functionality specific to each object type. For example, the Array object provides a toString() method that functions as one would expect an array’s toString() method to behave.This object also permits the creation of user-defined objects and instances are quite often used as associative arrays.

Constructor
var instanceName = new Object(); 

This statement creates a new (generic) object.

Properties
prototype The prototype for the object. This object defines the properties and methods common to all objects of this type. (IE4+ (JScript 3.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

Methods
hasOwnProperty(property) Returns a Boolean indicating whether the object has an instance property by the name given in the string property. (IE5.5+, MOZ/N6+, ECMA Edition 3)

isPrototypeOf(obj) Returns a Boolean indicating if the object referenced by obj is in the object’s prototype chain. (IE5.5+, MOZ/N6+, ECMA Edition 3)

propertyIsEnumerable(property) Returns a Boolean indicating if the property with the name given in the string property will be enumerated in a for/in loop. (IE5.5+, MOZ/N6+, ECMA Edition 3)

toSource() Returns a string containing a JavaScript literal that describes the object. (MOZ, N4.06+ (JavaScript 1.3+)) 

toString() Returns the object a string, by default "[object Object]". Very often overridden to provide specific functionality. (IE4+ (JScript 3.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

unwatch(property) Disables watching of the object’s property given by the string property. (N4 (JavaScript 1.2))

valueOf() Returns the primitive value associated with the object, by default the string "[object Object]". Often overridden to provide specific functionality. (IE4+ (JScript 3.0+), N3+ (JavaScript 1.1+), ECMA Edition 1)

watch(property, handler) Sets a watch on the object’s property given in string property. Whenever the value of the property changes, the function handler is invoked with three arguments: the name of the property, the old value, and the new value it is being set to. The handler can override the setting of the new value by returning a value, which is set in its place. (N4 (JavaScript 1.2))

Support
Supported in IE4+ (JScript 3.0+), MOZ, N2+ (JavaScript 1.0+), ECMAScript Edition 1.

Todos os objetos do JavaScript contém os métodos e propriedades acima, com raras excessões. Falow!

Strings e Expressões Regulares

2006-09-21T19:31:00.000-03:00

Boa noite galera, agreço as visitas e os comentários, continuem sempre assim ;).

Como mensionado antes, hoje vou falar sobre Strings e Expressões Regulares, bom, eu não pretendo me fixar no assunto de expressões regulares, eu apenas mostrarei como usa-las no JavaScript, pra quem quizer estudar expressões regulares, acesse esse site: http://guia-er.sourceforge.net/ esse é melhor site sobre expressões regulares que eu conheco, quem quizer estude por ele, pois é muito bom.

Voltando ao nosso assunto, hoje aprenderemos a manusear Strings usando JavaScript, vamos ver inicialmente a criação de strings:

var a = "primeira string";
var b = new String("de outro modo");

alert(a);
alert(b);

Isso é bem simples, como vocês devem saber, strings devem ficar dentro aspas, no JavaScript você pode tanto usar aspas simples como duplas, isso não vai interferir em nada.

Comparação de Strings
Temos que ter uma atenção nessa parte, a comparação de strings pode ser feita usando o operador ==, mas fazer a comparação dessa forma deixa um risco, porque o operador == vai comparar a referência dos objetos, vamos ver em exemplos isso:

var a = "teste";
var b = "teste";

if(a == b)
 alert('a e b sao iguais');
else
 alert('a e b sao diferentes');

var c = new String("teste");
var d = new String("teste");

if(c == d)
 alert('c e d sao iguais');
else
 alert('c e d sao diferentes');

Como podem ver, oque acontece é que quanto definimos a e b daquela forma, ele acaba usando strings cacheadas (guardas no mesmo ponto de memória para melhorar o desempenho), ja usando new String com c e d ele força uma nova alocação, assim as refencias ficam diferetes, e acaba que na comparação ele considara as strings diferentes (mesmo o texto sendo exatamente igual). Para resolver isso, fazemos uma coisa meio bizarra, prefiro explicar com codigos:

var a = "teste";
var b = "teste";

if(a == b)
 alert('a e b sao iguais');
else
 alert('a e b sao diferentes');

var c = new String("teste");
var d = new String("teste");

if(c.toString() == d.toString())
 alert('c e d sao iguais');
else
 alert('c e d sao diferentes');

Pronto, agora nossa comparação de c com d retornou verdadeira.

Operador de concatenação e caracteres de escape

Para concatenar strings não tem segredo, basta usar o operador de soma:

var a = 'oi';
var b = 'visitante';

alert(a + ' ' + b);

Mas um porém é quando queremos concatenar números, como se fossem strings, para isso temos que concatenar o número a uma string, vamos ver como concatenas dois números:

var a = 5;
var b = 9;

alert(a + '' + b);

Usando uma string, mesmo que seja vazia, ao somar com um número ele transforma aquele número em uma string, assim temos a concatenção e não a soma dos números.

Caracteres de escape são caracteres que existem mas não são vistos exatamente, como por exemplo o enter, para as pessoas o enter é um separador de linha, para o computador é apenas mais um caractere, para escrever uma linha do windows (que usa 2 caracateres) escreveriamos "\r\n" que para o JavaScript o \r eh transformado em um caractere, e o \n em outro, isso forma uma linha no windows, em muitos casos podemos usar apenas o \n, pois ele ja resolver, vamos ver a tabela dos caracteres escapados no JavaScript:

Caractere	Resultado
\n	nova linha
\r	retorno de carro
\t	tabulação
\\	insere uma barra

Existem mais, mas esses são os mais usados. Como as strings sao representadas dentro de aspas, as vezes precisamos usar essas aspas dentro da string, para isso usamos o escape \" ou \' dependendo do seu caso, vamos ver um exemplo:

alert("texto em \"aspas\"");
alert('texto em \'aspas\'');

Métodos de String

As Strings do JavaScript não tem tantos métodos quanto precisamos hoje em dia, ela tem os mais básicos, por isso muitas pessoas fazem uma implementação de extensão para as strings (usando seu prototype e adicionando mais recursos), em artigos futuros faremos uma implementação desse gênero, adicionando vários recursos. Mas o JavaScript tem seus recursos, então vamos conhece-los:

Quando precisamos pegar um caractere expecífico em uma string, usamos o método charAt:

var a = "abcde";

alert(a.charAt(1));
alert(a.charAt(4));

Lembre-se sempre que a indexção começa em zero, entao o primeiro caractere é o zero, o segundo é um e por ai vai.

Muito parecido com o charAt temos o charCodeAt que funciona da mesma maneira, mas no lugar de retornar o caractere, ele retorna um número inteiro, que no caso é o codigo ASCII do caractere (quem quizer, acesse http://www.asciitable.com/ para ver a tabela completa).

Um método que vai um pouco além do charAt é o método substring, esse método pega um bloco da string:

var a = "abcde";

alert(a.substring(0, 2));
alert(a.substring(1, 4));

O primeiro argumento é a posição inicial, o segundo a posição final.

Quando precisamos procurar uma string dentro da outra, usamos o método indexOf, esse método aceita uma string como argumento, e procura essa string dentro da string original, se encontrado retorna a posição onde foi encontrado, caso contrário retorna -1.

var a = "abcde";

alert(a.indexOf("b"));
alert(a.indexOf("e"));
alert(a.indexOf("cd"));
alert(a.indexOf("z"));

Também é possivel passar um segundo argumento, que indica a posição inicial da busca (sinta-se livre para testar). Inverso ao indexOf que busca a partir do início da string, existe o método lastIndexOf que procura do início para o começo da string.

Esse não é o melhor método para buscar algo dentro de uma string, o melhor é usar expressões regulares (veremos isso mais adiante), mas para casos mais simples, o indexOf resolve muitas coisas.

O último método que veremos, é o método split, esse método "quebra" uma string em um array, usando uma string para realizar essa quebra (fazendo a separação):

var a = "isso seria uma simples frase";
var b = a.split(' '); //separando por espacos

for(var i = 0; i < b.length; i++) {
 alert(b[i]);
}

Esses foram os métodos principais para tratamento de string no JavaScript, não menos importante, temos a propriedade length (isso, mesmo nome que tem no Array), o length retorna a quantidade de caracteres que existem na string.

var a = "abc";
var b = "abcde";
var c = "uma string cheia de caracteres";

alert(a.length);
alert(b.length);
alert(c.length);

Expressões Regulares

As expressões regulares são a parte mais interessante da área de strings (pelo menos pra mim). Com expressões regulares você consegue facilmente validar strings, coisas que precisariam de um grande código se fossem feitas de outra maneira (como usando substrings e indexOf).

O JavaScript tem um objeto chamado RegExp que cuida dessa parte, existe o meio onde você cria um RegExp e valida uma string a partir dele, ou você pode usar um método da string (que é o match) para usar um RegExp para validar, no final tudo gera o mesmo resultado. Vamos ver como validar uma data usando RegExp (vamos ver usando os 2 processos que eu disse):

var dataValidator = new RegExp("^\\d{2}/\\d{2}/\\d{4}$");

if(dataValidator.test('15/06/2006'))
 alert('Data válida');
else
 alert('Data inválida');
 
if(dataValidator.test('158/06/2006'))
 alert('Data válida');
else
 alert('Data inválida');
 
if('15/06/2006'.match(dataValidator))
 alert('Data válida');
else
 alert('Data inválida');
 
if('158/06/2006'.match(dataValidator))
 alert('Data válida');
else
 alert('Data inválida');

Esse validador diz que a string deve ter 2 digitos numericos (\d{2}), depois uma barra, mais dois digitos numericos, depois outra barra, e finalmente 4 digitos numericos. Também informamos que a string deve ser exatamente isso (usando o ^ no início e $ no final), o digito ^ diz que a string deve comecar daquele jeito, e o $ diz que a string deve acabar daquele jeito. Como eu disse antes, não vou parar para explicar as expressões regulares pois isso está fora do meu contexto.

Além de validar, as vezes queremos pegar alguns pedaços da string, por exemplo, se a partir dessa string de mes, quizesse-mos pegar apenas o mês (que seriam os 2 dígitos do meio), com expressões regulares isso se torna facil, vamos ver isso no exemplo a seguir, e também vamos ver outro meio de iniciar expressões regulares:

var dataValidator = /^\d{2}\/(\d{2})\/\d{4}$/;
var data = '15/12/2005';
var grupos;

if(grupos = data.match(dataValidator)) {
 alert('Mes: ' + grupos[1]);
}

Percebam o novo modo de criação, você só precisa colocar uma / e depois outra para finalizar, a expressão fica dentro das barras, quando é preciso inserir / dentro da expressão usamas \/ assim estamos "escapando" a barra. Outra observação é que colocamos a parte da expressão que pega o mês entre parênteses, assim podemos recupera-la depois. Além de validar, o método match retorna um array com os grupos que foram marcados dentro da expressão, o índice zero contém a string inteira, e a partir do um tem os grupos marcados (na mesma ordem em que foram marcados na string).

Também podemos fazer substituições usando expressões regulares, por exemplo:

var string = 'mariazinha, joaninha, pedrinho';
var novaString = string.replace(/(zinh(a|o)|inh)/g, '');

alert(novaString);

No caso substituimos as ocorrências expressão por nada :P. Notem agora o uso de uma letra "g" no final da expressão, essa letra "g" indica que mesmo após uma ocorrencia, ele deve continuar buscando a expressão na string, se você remover essa letra ele só vai substituir o nome de mariazinha. Fora a letra g temos a letra i que torna a expressão case-insensitive (não diferencia maiúsculas de minúsculas) e a letra m que faz buscas multi-linha.

Por hoje é só pessoal, espero ter conseguido passar o básico de strings e uso de expressões regulares em JavaScript, estudem expressões regulares pelo site que eu passei no início do artigo, vocês vão ver coisas realmente interessantes, estudem la e vão testando a aplicação das mesmas com o JavaScript, assim vocês pegam um "2 em 1" ;)

Antes de ir, sempre aquela boa referência:

Classe String

String (Built-in Object)
String is the container object for the primitive string data type. It supplies methods for the manipulation of strings in addition to those that create traditional HTML markup from plain text. When manipulating strings, remember that like all JavaScript indices, the enumeration of character positions begins with zero.

Constructor
var instanceName = new String(initialValue); 

where initialValue is a string. Omitting initialValue creates a String where value is the empty string ("").

Properties
length Integer indicating the number of characters in the string. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

prototype Reference to the object’s prototype. (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

Methods
anchor(name) Returns the string marked up as an HTML anchor (<a name="name">

string value</a>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1). 

big() Returns the string marked up as big HTML text (<big>string value</big>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

blink() Returns the string marked up as blinking HTML text (<blink>string value</blink>). (IE3+ (JScript 1.0+), N2+ (JavaScript 1.0+), MOZ)

bold() Returns the string marked up as bold HTML text (<bold>string value</bold>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

charAt(position) Returns a string containing the character at index position in the string. The empty string is returned if position is out of range. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

charCodeAt(position) Returns an unsigned integer representing the Unicode value of the character at index position. If position is out of range, NaN is returned. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 1)

concat(string2 [, string3 [, ... ]]) Returns the string obtained by concatenating the current string value with string2, string3, .... (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 1)

fixed() Returns the string marked up as fixed-width HTML text (<tt>string value</tt>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

fontcolor(theColor) Returns the string marked up as colored HTML according to the string color (<font color="theColor">string value</font>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

fontsize(theSize) Returns the string marked up according to the HTML font size given in theSize (<font size="theSize">string value</font>). HTML font sizes are 1 through 7, or relative +/– 1–6. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

fromCharCode(char0 [, char1 [, ...]]) Creates a string from the given characters. The arguments char0, char1, ... are Unicode numbers corresponding to the desired characters. (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 1, Static)

indexOf(searchString [, startIndex]) Returns the index of the first occurrence of searchString in the string. If startIndex is specified, then the first occurrence after index startIndex is returned. If searchString is not found, –1 is returned. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

italics() Returns the string marked up as italicized HTML text (<i>string value</i>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

lastIndexOf(searchString [, startIndex]) Returns the index of the last occurrence of searchString in the string. If startIndex is specified, the index of the last occurrence starting at index startIndex or before is returned. If searchString is not found, –1 is returned. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

link(theHref) Returns the string marked up as an HTML link to the string theHref (<a href="theHref">string value</a>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

match(regexp) Executes a regular expression match with the regular expression regexp and returns an array of results. If no match is found, null is returned. Otherwise, the returned array is exactly like that returned by RegExp.exec(). (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3) 

replace(regexp, replacement) Returns the string obtained by executing a match with the regular expression regexp on the string and then replacing each piece of matching text with the string replacement. In IE5.5 and N4.06+ replacement can be a function (see full description at MSDN). (IE3+ (JScript 1.0+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

search(regexp) Executes a regular expression match with regular expression regexp and returns the index of the beginning of the matching text in the string. If no match is found, –1 is returned. (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

slice(start [, end]) Returns a new string containing the substring from index start up to but not including index end. If end is omitted, the substring returned runs to the end of the string. If start or end is negative, it is treated as an offset from the end of the string. (IE4+ (JScript 3.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 3)

small() Returns the string marked up as small HTML text (<small>string value</small>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

split([separator [, limit]]) Returns the array of strings obtained by splitting the string at each occurrence of separator (which may be a string or regular expression). The separator is not included in the array returned. If no separator is given, the string is split into an array of strings holding its individual characters. If the integer limit is given, only the first limit parts are placed in the array. (IE4+ (JScript 3.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

strike() Returns the string marked up as struck-through HTML text (<strike>string value</strike>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

sub() Returns the string marked up as subscript HTML text (<sub>string value</sub>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

substr(start [, length]) Returns a new string containing a substring of length length beginning at index start. If length is not given, the substring returned runs to the end of the string. (IE4+ (JScript 3.0+), MOZ, N2+ (JavaScript 1.0+))

substring(start [, end]) Returns a new string containing the substring running from index start up to but not including index end. If end is not given, the substring runs to the end of the string. If start is greater than end, the values are swapped. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

sup() Returns the string marked up as superscript HTML text (<sup>string value</sup>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

toLowerCase() Returns the string converted to all lowercase. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

toUpperCase() Returns the string converted to all uppercase. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

Support
Supported in IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMAScript Edition 1.

Notes
This object does not operate on values in place. That is, when manipulating a String with one of its methods, the method returns the result of the operation. It does not change the value of the String that it was invoked as a method of. You can, of course, use self-assignment to this effect—for example,

var mystring = mystring.toUpperCase() 

The String methods do not produce XHTML style markup.

Classe RegExp

RegExp (Built-in Object)
Instances of RegExp objects hold regular expression patterns and provide the properties and methods that enable their use on strings. In addition, each window has a RegExp object that provides static (class) properties giving information about the most recent match that was executed. These properties are dynamically scoped.

Constructor
var instanceName = new RegExp(expr [, flags]); 

where expr is a string containing a regular expression (for example, "abc.*") and flags is an optional string denoting the flags for the expression (for example, "gi").

Properties
$1, $2, ... $9 The $n property contains the string corresponding to the nth parenthesized subexpression of the most recently executed match. The properties are read-only. (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2+))

global A read-only Boolean indicating whether the global flag ("g") was used to create the regular expression. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

ignoreCase A read-only Boolean indicating whether the case-insensitive flag ("i") was used to create the regular expression. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

index A read-only integer value indicating the character position where the first successful match begins (during the most recently executed match). (IE4+ (JScript 3.0+))

input Holds the string upon which the most recent regular expression match was conducted. This property is not automatically filled in N6. (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2+))

lastIndex Integer specifying the character index of the string at which the next match will begin. Used during global matching. (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

lastMatch A read-only string containing the last matched characters of the most recent match. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2+))

lastParen A read-only string containing the last matched parenthesized subexpression (of the most recent match). (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2))

leftContext A read-only substring up to but not including the beginning of the most recently matched text (of the most recently executed match). (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2))

multiline A read-only Boolean indicating whether the multiline flag ("m") was used to create the regular expression. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

prototype Reference to the object’s prototype. (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

rightContext A read-only substring following (but not including) the most recently matched text. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2), ECMA Edition 3)

source A read-only string containing the text that makes up the pattern (excluding any slashes used to define it and the flags). (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2), ECMA Edition 3)

Methods
compile(expr [, flags]) Compiles the regular expression expr with flags flags in the object. Used to replace an expression with a new one. (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2), ECMA Edition 3)

exec(str) Executes a match against the string str and returns an array containing the results. If no match was made, null is returned. If str is omitted, the contents of RegExp.input is used as str. The resulting array has the entire match in element zero, and any matched subexpressions at subsequent indices. It also has instance properties input (which holds the string on which the match was executed), index (which holds the index of the beginning of the match in the input string), and in IE lastIndex (which holds the index of the first character following the match). (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2), ECMA Edition 3)

test(str) Returns a Boolean indicating whether the regular expression matches a part of the string str. (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2), ECMA Edition 3)

toString() Returns the string corresponding to the regular expression, including enclosing slashes and any flags that were used to define it. (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2), ECMA Edition 3)

Support
Supported in IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2+), ECMAScript Edition 3.

Vou indo, no próximo artigo eu falarei sobre outros objetos Built-In, depois dele já começaremos a parte legal do JavaScript, me suportem até lá, vai valer a pena ;)

Arrays

2006-09-15T16:28:00.000-03:00

Agora vamos começar a estudar os objetos built-in do JavaScript, vamos comecar com um objeto muito importante, o objeto Array.

Como vocês devem saber, o Array é uma estrutura de dados, no JavaScript essa é a única estrutura existente (por padrão), os arrays do JavaScript só podem ter índices númericos, na verdade você até pode usar índices associativos, mas na verdade você estará modificando o objeto e não colocando um dado no array. Vamos ver alguns exemplos simples de arrays no JavaScript.

var nomes = new Array();
nomes[0] = 'Maria';
nomes[1] = 'Joao';
nomes[2] = 'Ana';

for(var i = 0; i < nomes.length; i++) {
 alert(nomes[i]);
}

Fizemos um simples array, colocamos uma string em cada item do nosso array colocamos uma string, depois fizemos um for que percorre os itens do nosso array. Note o uso da variável length do array, essa variável nos retorna a quantidade atual de itens no array. Vamos ver outras formas para criar esse mesmo array:

var nomes = [];
nomes[0] = 'Maria';
nomes[1] = 'Joao';
nomes[2] = 'Ana';

for(var i = 0; i < nomes.length; i++) {
 alert(nomes[i]);
}

var nomes = ['Maria', 'Joao', 'Ana'];

for(var i = 0; i < nomes.length; i++) {
 alert(nomes[i]);
}

var nomes = new Array('Maria', 'Joao', 'Ana');

for(var i = 0; i < nomes.length; i++) {
 alert(nomes[i]);
}

var nomes = [];
nomes.push('Maria');
nomes.push('Joao');
nomes.push('Ana');

for(var i = 0; i < nomes.length; i++) {
 alert(nomes[i]);
}

Agora eu mostrei que podemos substituir o new Array() por [], eles funcionam da mesma maneira, use o de sua preferência. Também vimos que é possivel inicializar um array já com valores, quando sabemos os valores isso é util, mas na maioria dos casos nós precisamos sair colocando valores ao longo do tempo, usando o método push do array, nós inserimos um valor no final do array, podemos inserir varios valores usando apenas um push, como veremos abaixo:

var nomes = [];
nomes.push('Maria', 'Joao', 'Ana');

for(var i = 0; i < nomes.length; i++) {
 alert(nomes[i]);
}

Os arrays do JavaScript são bastante dinâmicos, o mesmo array pode ter valores numéricos, strings, objetos e outros, tudo num mesmo array, o JavaScript não faz distinção. Os arrays em JavaScript tem métodos úteis para podermos usa-lo como uma pilha ou fila por exemplo.

Vou falar rapidamente sobre os métodos mais usados do array:

push() - adiciona um ou mais itens ao final do array

pop() - retorna e remove o último elemento do array

shift() - retorna e remove o primeiro elemento do array

unshift() - adiciona um ou mais itens no início do array

join() - ele cola todos os elementos do array, usando uma string (passada por parâmetro) como separador, e retorna essa string

Vamos agora construir um programinha simples, que coleta dados de pessoas, armazena esses dados em um array, e depois gera um simples relatório. Vamos explicar melhor o nosso programa:

1 - coleta de dados
Usando o comando prompt do JavaScript, vamos coletar dados de 10 pessoas, os dados coletados serão: nome, idade e sexo.

2 - processamento de dados
Vamos tratar nossos dados e conseguir as informações desejadas, nesse nosso caso, vamos mostrar ao final, o nome do homem mais velho e sua idade, o nome da mulher mais nova e sua idade, quantos homens e quantas mulheres foram entrevistados.

3 - exibicao de dados
Vamos mostrar os dados gerados na tela.

Antes de começar, eu devo dizer que esta não é forma mais simples de fazer esse algorimo, mas minha intenção é mostrar mais recursos do array. Nessa forma, vamos olhar como fazer usando a função sort do array.

A primeira coisa a ser feita, é criar um objeto Pessoa, que vai ser uma estrura que irá guardar os dados de cada entrevistado:

var Pessoa = function(nome, idade, sexo) {
 this.nome = nome;
 this.idade = idade;
 this.sexo = sexo;
};

Bem simples, apenas um objeto que guarda os dados que precisamos. Vamos agora definir as variáveis que farão parte do programa:

var numPessoas = 5;
var homens = [];
var mulheres = [];

A variável numPessoas vai dizer quantas pessoas serão entrevistas, no array homens vamos guardas os entrevistados do sexo masculino, e no array mulheres os do sexo feminino .

Vamos agora fazer a primeira parte, a coleta de dados:

for(var i = 0; i < numPessoas; i++) {
 var nome = prompt('Digite o nome:');
 var idade = prompt('Digite a idade:');
 var sexo = prompt('Digite o sexo (M para masculino, F para feminino):');
 
 idade = parseInt(idade); //convertendo a string em numero
 sexo = sexo.toUpperCase(); //convertendo para maiusculo
 
 var p = new Pessoa(nome, idade, sexo);
 
 if(sexo == 'M')
  homens.push(p);
 else
  mulheres.push(p);
}

Pronto, com isso ja teremos os nossos arrays preenchidos. Para usarmos a função sort num objeto como o nosso, precisaremos criar uma função separada que vai definir quando um objeto é superior, inferior ou igual ao outro, vamos criar essa função:

var PessoaIdadeSorter = function(obj1, obj2) {
 if(obj1.idade == obj2.idade)
  return 0;
 
 return obj1.idade > obj2.idade ? 1 : -1;
};

A função compara a idade das pessoas, e retorna o valor de acordo. Agora basta classificarmos nossos arrays:

homens.sort(PessoaIdadeSorter);
mulheres.sort(PessoaIdadeSorter);

Pronto, nossos arrays já estão classificados por idade, agora é facil terminar, vamos fazer a exibição:

var qtdHomens = homes.length;
var qtdMulheres = mulheres.length;
var homemMaisVelho = homens.pop();
var mulherMaisNova = mulheres.shift();

document.write('Foram entrevistados ' + qtdHomens + ' homens e ' + qtdMulheres + ' mulheres.
');
document.write('O homem mais velho se chama ' + homemMaisVelho.nome + ' com ' + homemMaisVelho.idade + ' anos
');
document.write('A mulher mais nova se chama ' + mulherMaisNova.nome + ' com ' + mulherMaisNova.idade + ' anos
');

Como nossos arrays estão ordenados pela idade, então o homem mais velho é o ultimo elemento do array homens, e a mulher mais nova é o primeiro elemento do array das mulheres.

Vou colocar o código completo abaixo (só pra facilitar):

var Pessoa = function(nome, idade, sexo) {
 this.nome = nome;
 this.idade = idade;
 this.sexo = sexo;
};

var numPessoas = 5;
var homens = [];
var mulheres = [];

for(var i = 0; i < numPessoas; i++) {
 var nome = prompt('Digite o nome:');
 var idade = prompt('Digite a idade:');
 var sexo = prompt('Digite o sexo (M para masculino, F para feminino):');
 
 idade = parseInt(idade); //convertendo a string em numero
 sexo = sexo.toUpperCase(); //convertendo para maiusculo
 
 var p = new Pessoa(nome, idade, sexo);
 
 if(sexo == 'M')
  homens.push(p);
 else
  mulheres.push(p);
}

var PessoaIdadeSorter = function(obj1, obj2) {
 if(obj1.idade == obj2.idade)
  return 0;
 
 return obj1.idade > obj2.idade ? 1 : -1;
};

homens.sort(PessoaIdadeSorter);
mulheres.sort(PessoaIdadeSorter);

var qtdHomens = homes.length;
var qtdMulheres = mulheres.length;
var homemMaisVelho = homens.pop();
var mulherMaisNova = mulheres.shift();

document.write('Foram entrevistados ' + qtdHomens + ' homens e ' + qtdMulheres + ' mulheres.
');
document.write('O homem mais velho se chama ' + homemMaisVelho.nome + ' com ' + homemMaisVelho.idade + ' anos
');
document.write('A mulher mais nova se chama ' + mulherMaisNova.nome + ' com ' + mulherMaisNova.idade + ' anos
');

Com isso eu termino os arrays, vou a referência do objeto Array para quem tiver interesse:

Array (Built-in Object)
Arrays store ordered lists of data. Data is stored at indices enumerated beginning with zero, which are accessed using the array access ([]) operator. Allocation of array memory is handled by the interpreter, so there is no need to explicitly resize arrays to accommodate more data. In addition, arrays are permitted to be sparse, that is, to have “holes” consisting of an arbitrary number of unused indices. Any index that has not been assigned data has value undefined, and the highest index addressable is 232 –1 because indices are converted to unsigned 32-bit integers before use. JavaScript arrays are one-dimensional, but since array elements can be of any type, multidimensional arrays are supported as arrays with elements that are arrays.

You can explicitly remove a value from an array using the delete operator, but there is no way to destroy an array other than by setting the variable that holds its reference to null.

Constructor
var instanceName = new Array([ val1 [, val2 [, val3 ... ] ] ]); 

where the comma-separated values are treated as initial values for array indices 0, 1, 2, and so on. The exception is if a single numeric parameter is supplied, in which case the array’s length property is set to this value.

Properties
constructor Reference to the constructor object, which created the object. (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

length Numeric value indicating the next empty index at the end of the array (not the number of elements in the array). Setting this property to a value less than its current value will undefine any elements with index >= length. (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

prototype Reference to the object’s prototype. (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

Methods
concat([item1 [, item2 [, ...]]]) Appends the comma-separated list of items to the end of the array and returns the new array (it does not operate on the array in place). If any item is an array, its first level is flattened (that is, the item’s elements are appended each as a separate element). (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 1)

join([separator]) Returns the string obtained by concatenating all the array’s elements. If the string separator is supplied, separator will be placed between adjacent elements. The separator defaults to a comma. (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

pop() Removes the last element of the array and returns it. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

push([item1 [, item2 [, ...]]]) Appends the parameters (in order) to the end of the array and returns the new length. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

reverse() Reverses the order of the elements (in place). (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

shift() Removes the first element from the array, returns it, and shifts all other elements down one index. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

slice(begin [, end]) Returns a new array containing the elements from index begin up to but not including index end. If end is omitted, all elements to the end of the array are extracted. If end is negative, it is treated as an offset from the end of the array. (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2), ECMA Edition 3)

sort([compareFunc]) Sorts the array in place in lexicographic order. The optional argument compareFunc is a function that can change the behavior of the sort. It will be passed two elements and should return a negative value if the first element is less than the second, a positive value if the second is less than the first, or zero if they are equal. (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

splice(start, howMany [, item1 [, item2 [, ...]]]) Removes howMany elements from the array beginning at index start and replaces the removed elements with the itemN arguments (if passed). An array containing the deleted elements is returned. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

toString() Returns a string containing the comma-separated list of elements. (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

unshift([item1 [, item2 [, ...]]]) Inserts the items (in order) at the front of the array, shifting existing values up to higher indices. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

valueOf() Same as toString(). (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

Support
Supported in IE4+ (JScript 2.0+), Mozilla, N3+ (JavaScript 1.1+), ECMAScript Edition 1.

Notes
In Netscape 4.0–4.05 (JavaScript 1.2) a single numeric parameter to the constructor is added to the single array element—it is not treated as an initial value for length.

Por hoje é tudo, no próximo artigo eu irei falar sobre o objeto String. E plz, comentem, seu comentário é muito importante ;)

Estruturas de Controle e Objetos

2006-09-11T18:14:00.000-03:00

Como dito no artigo anterior, hoje iremos ver as estruturas de controle do JavaScript e vamos iniciar os estudos a programação orientada a objetos em JavaScript. Como eu disse antes, não tenho interção de ensinar lógica aqui, por isso irei apenas deixar alguns exemplos comentados usando as estruturas de controle, mandem e-mail ou comentários em caso de dúvidas.

Estrutura if e estrura else:

var a = 3;
var b = 5;
var c = 3;

if(a < b) { //se a for menor que b
 alert('"a" é menor que "b"');
} else { //caso contrario
 alert('"a" não é menor que "b"');
}

if(a == c) { //se a for igual a c
 alert('"a" é igual a "c"');
}

Estrutura switch case:

var a = 3;

switch(a) {
 case 1: //se a for 1
  alert('"a" é 1');
  break;
 case 2: //se a for 2
  alert('"a" é 2');
  break;
 case 3: //se a for 3
  alert('"a" é 3');
  break;
 case 4: //se a for 4
  alert('"a" é 4');
  break;
 default: //se a nao for nenhum dos casos, entao use o padrao
  alert('"a" não está em nenhum dos outros valores');
}

Lembrando que o switch case do JavaScript também aceita valores de string, exemplo:

var a = 'pessoa';

switch(a) {
 case 'pessoa':
  alert('anda sobre 2 pernas');
  break;
 case 'cachorro':
  alert('anda sobre 4 pernas');
  break;
 case 'passaro':
  alert('voa');
  break;
 default:
  alert('desconhecido');
}

Estrutura while:

var a = 1;

while(a < 10) {
 alert(a + ' vezes');
 a++;
}

Estrutura for:

for(var i = 0; i < 10; i++) {
 alert('ciclo ' + i);
}

Ainda existe outra estrutura para o for, que é o chamado for in, vamos ver isso ainda nesse artigo mais adiante.

Temos a estrutura with mas também deixaremos ela mais para frente.

Objetos
Vamos agora iniciar nossos estudos quanto a criação de objetos com JavaScript. Como dito antes, tudo em JavaScript são objetos, você as vezes cria objetos e os usa sem nem se dar conta disso, vamos ver 2 maneiras de iniciar um objeto em branco:

var meuObjeto = new Object();
var outroObject = {};

Use qual você preferir, eu prefiro a segunda porque assim eu escrevo menos :P
Agora temos incríveis objetos em branco que não fazem nada!! Não é maravilhoso?
Brincadeiras de lado, em JavaScript todos os objetos são dinâmicos, ou seja, eu posso adicionar recursos a eles a qualquer hora, criar variáveis e métodos que nunca existiram nele, podemos mudar isso apenas no objeto atual, ou podemos modificar o seu prototype, modificando o prototype nós podemos adicionar variáveis e métodos para todas as instâncias de um objeto. Vamos então criar nosso primeiro objeto útil:

var Circunferencia = function() {};
Circunferencia.prototype.raio = 1; //valor padrao

Circunferencia.prototype.diametro = function() {
 return this.raio * 2;
};

Circunferencia.prototype.perimetro = function() {
 return 2 * Math.PI * this.raio;
};

Circunferencia.prototype.area = function() {
 return Math.PI * this.raio * this.raio;
};

var b = new Circunferencia();

b.raio = 5;
alert(b.diametro());
alert(b.perimetro());
alert(b.area());

b.raio = 7;
alert(b.diametro());
alert(b.perimetro());
alert(b.area());

b.raio = 10;
alert(b.diametro());
alert(b.perimetro());
alert(b.area());

O objeto para ter seu prototype modificado precisa iniciar-se a partir de uma função, os objetos que sao iniciados das outras formas servem mais como estruturas de dados, para transferir informações.

Temos acima um simples objeto Circunferencia que tem a variável raio e os métodos diametro(), perimetro() e area. Nós estamos adicionando esses métodos no objeto prototype dentro da nossa classe, isso porque quando mudamos o prototype, nós alteramos a classe propriamente dita, então todas as instâncias de bola terão esses métodos/variáveis. Veja que quando estamos dentro de um método e queremos acessar outros recursos da classe, temos que colocar o this seguido de um . para termos a referencia dessas variáveis/métodos. Alguns agora podem estar se perguntando: "e como eu faço pra criar um inicializador para minha classe?". Ai é só colocar-mos algo na função de criação, assim ela se torna o inicializador, vamos ver isso:

var Circunferencia = function(raio) {
 this.raio = raio;
};

Circunferencia.prototype.diametro = function() {
 return this.raio * 2;
};

Circunferencia.prototype.perimetro = function() {
 return 2 * Math.PI * this.raio;
};

Circunferencia.prototype.area = function() {
 return Math.PI * this.raio * this.raio;
};

var b = new Circunferencia(5);

alert(b.diametro());
alert(b.perimetro());
alert(b.area());

b.raio = 7;
alert(b.diametro());
alert(b.perimetro());
alert(b.area());

b.raio = 10;
alert(b.diametro());
alert(b.perimetro());
alert(b.area());

Simples não? Na verdade não estamos criando exatamente um objeto novo, e sim modificando um objeto do tipo function, parece meio louco, mas logo logo você se acostuma.

Antes de terminarmos vamos usar nosso exemplo anterior para demostrar o uso de for in e with:

var Circunferencia = function(raio) {
 this.raio = raio;
};

Circunferencia.prototype.diametro = function() {
 return this.raio * 2;
};

Circunferencia.prototype.perimetro = function() {
 return 2 * Math.PI * this.raio;
};

Circunferencia.prototype.area = function() {
 return Math.PI * this.raio * this.raio;
};

var b = new Circunferencia(5);

with(b) {
 alert(diametro());
 alert(perimetro());
 alert(area());

 raio = 7;
 alert(diametro());
 alert(perimetro());
 alert(area());

 raio = 10;
 alert(diametro());
 alert(perimetro());
 alert(area());
}

for(var p in b) {
 alert(p + ' ==> ' + b[p]);
}

Como vimos acima, o with é usado para manter um objeto quando ele vai ser muito usado, assim sempre que apontar-mos as coisas, é como se já estivemos avisando que estão na variável que definimos no with. Já o for in serve para passarmos por tudo que tem dentro de um objeto, dizemos o nome da chave (p no nosso caso) in e o nome da variável, assim como se fosse um array associativo, podemos pegar os métodos/variáveis de um objeto passando seu nome dentro de cochetes.

Segue agora a referêcia do Object, todos os objetos do JavaScript contém os métodos e propriedades citadas abaixo:

Object (Built-in Object)
Object is the basic object from which all other objects are derived. It defines methods common to all objects that are often overridden to provide functionality specific to each object type. For example, the Array object provides a toString() method that functions as one would expect an array’s toString() method to behave.This object also permits the creation of user-defined objects and instances are quite often used as associative arrays.

Constructor
var instanceName = new Object(); 

This statement creates a new (generic) object.

Properties
prototype The prototype for the object. This object defines the properties and methods common to all objects of this type. (IE4+ (JScript 3.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

Methods
hasOwnProperty(property) Returns a Boolean indicating whether the object has an instance property by the name given in the string property. (IE5.5+, MOZ/N6+, ECMA Edition 3)

isPrototypeOf(obj) Returns a Boolean indicating if the object referenced by obj is in the object’s prototype chain. (IE5.5+, MOZ/N6+, ECMA Edition 3)

propertyIsEnumerable(property) Returns a Boolean indicating if the property with the name given in the string property will be enumerated in a for/in loop. (IE5.5+, MOZ/N6+, ECMA Edition 3)

toSource() Returns a string containing a JavaScript literal that describes the object. (MOZ, N4.06+ (JavaScript 1.3+)) 

toString() Returns the object a string, by default "[object Object]". Very often overridden to provide specific functionality. (IE4+ (JScript 3.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

unwatch(property) Disables watching of the object’s property given by the string property. (N4 (JavaScript 1.2))

valueOf() Returns the primitive value associated with the object, by default the string "[object Object]". Often overridden to provide specific functionality. (IE4+ (JScript 3.0+), N3+ (JavaScript 1.1+), ECMA Edition 1)

watch(property, handler) Sets a watch on the object’s property given in string property. Whenever the value of the property changes, the function handler is invoked with three arguments: the name of the property, the old value, and the new value it is being set to. The handler can override the setting of the new value by returning a value, which is set in its place. (N4 (JavaScript 1.2))

Support
Supported in IE4+ (JScript 3.0+), MOZ, N2+ (JavaScript 1.0+), ECMAScript Edition 1.

Por hoje é tudo, como já sabem: dúvidas, críticas, sugestões, podem me mandar um e-mail (wilkerlucio@gmail.com) ou deixem um comentário ;)

Funções com mais detalhes

2006-09-11T18:11:00.000-03:00

Vamos hoje dar continuidade aos nossos estudos, hoje eu vou falar mais sobre escopo, vou falar sobre oque são objetos em JavaScript (calma, criação e implementação de objetos vai ficar pra outro dia, hoje vamos só entender o conceito do que é um objeto em JavaScript) e também vamos aprofundar o estudo de funções.

Antes de continuarmos eu gostaria de dizer que eu não estou tentando ensinar lógica de programação, esses artigos são voltados a pessoas que já sabem lógica de programação, oque eu pretendo passar aqui é como usar a linguagem JavaScript.

Escopo e Objetos, a relação existente
No artigo passado nós vimos um pouco sobre o escopo das variáveis, vimos a diferença entre uma variável global e uma variável criada internamente para uma função, agora vamos entender melhor oque realmente acontece.

Em JavaScript, praticamente tudo (apenas com a excessão de tipos primitivos) são objetos, isso mesmo, uma string é um objeto, um array(falaremos sobre arrays em outros artigos) é um objeto, até mesmo uma função é um objeto no JavaScript.

Os escopos sempre são relativos aos objetos, para uma variável existir, ela tem que estar dentro de um objeto, e esse objeto é o seu escopo, como eu disse antes, o escopo global é o objeto window, quando você declara uma var dentro de uma função, você está criando uma variável no escopo daquela função, mais a frente ainda nesse artigo eu mostrarei outras formas de criar funções, e vocês verão que uma função pode ser tratada da mesma forma que uma variável.

Com isso eu termino minha explicação sobre escopo, mas a melhor forma de realmente entender isso é fazendo na prática, eu recomendo que vocês façam testes pra ver oque acontece com uma variável em diferentes escopos, porque essa é a melhor forma de enteder isso.

Funções, conhecendo-as melhor
Nós ja aprendemos a criar funções, a passar parâmetros para a mesma e também como retornar dados, hoje vamos explorar melhor o conceito de funções em JavaScript e também vamos aprender a usar mais recurso das funções em JavaScript.

Primeiro eu quero que fique bem claro para todos: "Funções de JavaScript são objetos".
Exatamente, pra quem entender de oop, eu poderia dizer que a propria função do javascript já contem seus métodos e variáveis internas, ela realmente é um objeto e deve ser tratada como tal, vamos ver uma outra forma de criar uma função, usando essa forma fica mais claro o conceito de que ela é um objeto:

var minhaFuncao = function() {
 alert('funcao criada com sintaxe de variavel');
};

minhaFuncao();

Como podemos ver, essa sintaxe parece que estamos criando uma variável, mas estamos criando uma função. Optar por usar esse modo ou o outro que vimos anteriormente é uma questão de gosto, mas existe casos que só é possivel criar dessa 2 forma, eu sinceramente prefiro essa sintaxe mostrada acima, pois nela temos uma melhor controle sobre qual escopo a função está sendo criada.

obs: note que quando usamos essa sintaxe, colocamos um ponto e vírgula (;) após a criação dela, essa é a sintaxe correta, pois estamos declarando uma variável, e sempre depois de uma declaração tem que vir um ponto e vírgula.

As vezes nós criamos uma função sobre um escopo, mas precisamos que ela seja executada sobre um escopo diferente, entao como fazer isso? Como mudar o escopo da função?

Em JavaScript isso é facil, como eu disse, funções são objetos, e elas tem seus métodos, uma função pode ser chamada de 3 formas diferentes, vamos ve-las:

var soma = function(a, b) {
 var resultado = a + b;
 alert('Resultado da soma: ' + resultado);
};

soma(2, 3); //essa é a forma que estamos usando, apenas diz o nome da funcao e acresce de ()
soma.call(this, 2, 3); //esse é outro modo de chamar a função
soma.apply(this, [2, 3]); //e temos também esse terceiro

Vamos agora entender a diferença entre esses 3 modos:

soma(2, 3) => esse é o método padrão, a função será executada no escopo de onde ela foi chamada, e os argumentos são passados normalmente.

soma.call(this, 2, 3) => esse é muito parecido com o padrão, dizemos o nome da função e chamados o método call da mesma, a única diferença se dá no primeiro argumento, o primeiro argumento não será passado, ao invéz disso, o primeiro argumento informa em qual escopo a função deve ser executada, usando this mandamos executar no escopo atual, e nesse caso não existe diferença entre esse modo e o padrão.

soma.apply(this, [2, 3]) => esse quase igual ao anterior, o primeiro argumento funciona da mesma forma (para expecificar o escopo) mas temos diferenca na hora de passar os argumentos para a função. No lugar de passar os argumentos separados por vírgula, oque passamos é um array contendo todos os argumentos, essa forma é mais dinâmica que as outras.

obs: quando usamos [] estamos nos referindo a arrays, vamos entender isso melhor em futuros artigos.

Vamos agora aprender a usar parâmetros não definidos nas funções.
Imagine que você queria uma função que some todos os parâmetros que forem passados para a mesma, mas você não sabe quantos parâmetros serão passados para essa função, para resolver esse problema, usaremos uma variável que é definida internamente pelo objeto da função, a variável arguments.

A variável arguments é definida automaticamente em qualquer função, ela é um array que contém todos os parâmetros passados para a função, vamos criar nossa função que soma todos os argumentos passados, assim veremos seu uso:

var somaTudo = function() {
 var total = 0; //iniciando a variavel que vai guardar o valor das somas

 for(var i = 0; i < arguments.length; i++) {
  total += arguments[i]; //adicionando valor na variavel total
 }

 return total;
};

alert(somaTudo(3, 2, 4, 8));
alert(somaTudo(4, 5, 1, 3, 9, 6, 13));
alert(somaTudo());
alert(somaTudo(10));
alert(somaTudo(3, 2, 1, 5, 6, 7));

Viram como é simples o uso da variável arguments?

Para finalizar, vou deixar aqui uma referência (em inglês) do objeto Function, assim vocês podem ir testando seus métodos e variáveis, e lembrem-se sempre, a melhor maneira de aprender é fazendo, façam testes por ai, eu não tive tempo pra passar exercícios, mas futuramente eu estarei passando exercícios para vocês tentarem resolver, segue a referência:

Function (Built-in Object)
Function is the object from which JavaScript functions are derived. Functions are first-class data types in JavaScript, so they may be assigned to variables and passed to functions as you would any other piece of data. Functions are, of course, reference types.

The Function object provides both static properties like length and properties that convey useful information during the execution of the function, for example, the arguments[] array.

Constructor
 var instanceName = new Function([arg1 [, arg2 [, ...]] ,] body); 

The body parameter is a string containing the text that makes up the body of the function. The optional argN’s are the names of the formal parameters the function accepts. For example:

var myAdd = new Function("x", "y", "return x + y");
var sum = myAdd(17, 34);

Properties
arguments[] An implicitly filled and implicitly available (directly usable as "arguments" from within the function) array of parameters that were passed to the function. This value is null if the function is not currently executing. (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

arguments.callee Reference to the current function. This property is deprecated. (N4+, MOZ, IE5.5+)

arguments.caller Reference to the function that invoked the current function. This property is deprecated. (N3, IE4+)

arguments.length The number of arguments that were passed to the function. (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

arity Numeric value indicating how many arguments the function expects. This property is deprecated. (N4+, MOZ)

caller Reference to the function that invoked the current function or null if called from the global context. (IE4+ (JScript 2.0+), MOZ, N3+)

constructor Reference to the constructor object that created the object. (IE4+ (JScript 2.0+), N3+ (JavaScript 1.1+), ECMA Edition 1)

length The number of arguments the function expects to be passed. (IE4+ (JScript 2.0+), N3+ (JavaScript 1.1+), ECMA Edition 1)

prototype Reference to the object’s prototype. (IE4+ (JScript 2.0+), N3+ (JavaScript 1.1+), ECMA Edition 1)

Methods
apply(thisArg [, argArray]) Invokes the function with the object referenced by thisArg as its context (so references to this in the function reference thisArg). The optional parameter argArray contains the list of parameters to pass to the function as it is invoked. (IE5.5+ (JScript 5.5+), N4.06+ (JavaScript 1.3+), MOZ, ECMA Edition 3) 

call(thisArg [, arg1 [, arg2 [, ...]]]) Invokes the function with the object referenced by thisArg as its context (so references to this in the function reference thisArg). The optional parameters argN are passed to the function as it is invoked. (IE5.5+ (JScript 5.5+), N4.06+ (JavaScript 1.3+), MOZ, ECMA Edition 3)

toString() Returns the string version of the function source. The body of built-in and browser objects will typically be represented by the value "[native code]". (IE4+ (JScript 2.0+), N3+ (JavaScript 1.1+), MOZ, ECMA Edition 1)

valueOf() Returns the string version of the function source. The body of built-in and browser objects will typically be represented by the value "[native code]". (IE4+ (JScript 2.0+), N3+ (JavaScript 1.1+), MOZ, ECMA Edition 1)

Support
Supported in IE4+ (JScript 2.0+), N3+ (JavaScript 1.1+), MOZ, ECMAScript Edition 1.

Por hoje é tudo, no próximo artigos falaremos sobre estruturas de controle e objetos, com isso iremos finalizar o "core" do JavaScript, e depois começaremos a falar dos objetos Built-In (Array, Date, String...).

Grato a atenção de todos.

Conceitos, Variáveis e Funções

2006-09-11T18:07:00.000-03:00

Olá, bem vindo a esse blog. Esse é meu primeiro post nesse blog, comecarei dando noções básicas de Javascript. O objetivo desse blog eh passar informações desde o básico até o avançado sobre Javascript, o Javascript está sendo muito difundido na web e muitas pessoas não estão conseguindo acompanhar esse progresso devido a não ter a base do Javascript. Como eu disse antes, eu vou comecar as coisas do básico, mesmo que você ja saiba Javascript eu recomendaria que você desse uma lida nesses posts, porque as vezes umas coisas bestas passam despercebidas, mas essas besteiras podem fazer uma grande diferenca quando chega a hora da aplicação final.

Um pouco de história
O Javascript foi criado pela Netspace em 1995 e era chamado inicialmente de LiveScript, depois ele passou a ter o nome JavaScript. No Internet Explorer, o nome da linguagem é JScript, eles a chamam assim para dizer que não é a mesma coisa, e realmente não é, e devido a isso é que temos os problemas de incompatibilidade entre o script nos browsers, o JScript tem muitos recursos que não existem no JavaScript, mas como no mundo atual em 98% dos casos (isso tira apenas os casos onde fazemos um sistema apenas interno, onde temos certeza que só vão usar aquele browser, e mesmo assim não é recomendavel) nós temos que fazer scripts que rodem em qualquer browser.

Inicialmente o JavaScript era visto como uma "gambiarra" da web, que estava completamente fora de padrões. Essa visão tem mudado recentemente devido a difusão do AJAX (Asyncronous Javascript And XML), e não foi o JavaScript que mudou, e sim os programadores que comecaram a fazer seu uso de forma correta.

Chega de blablabla
Se você teve paciência para ler até aqui ótimo (mas nem vem, eu sei que teve gente que pulo os textos anteriores, mas tudo bem XD).

Vamos comecar entendendo o conceito de funções e variáveis em Javascript. A declaração de variáveis em JavaScript é algo muito simples, para os testes iniciais usaremos o seguinte padrão:

<html>
<head>
 <title> JavaScript Dev </title>
</head>
<body>
<script type="text/javascript">
</script>
</body>
</html>

Como podem ver temos um HTML simples, para escrever JavaScript nós usamos a tag <script type="text/javascript"></script>, nossos scripts vão ficar dentro dessas tags. obs: os códigos a seguir devem ficar entre as tags <script>.

var a = 5;
var b = 10;
var c = a + b;

alert(c);

Isso foi uma simples declaração de variáveis, declaramos a variável a com o valor 5, depois declaramos a variável b com o valor 10 e finalmente a variável c que tem o valor da soma de a com b, então usamos a função alert() que abre uma caixa de texto com um valor (que no nosso caso vai exibir o valor da variável c).

Em JavaScript as variáveis não são tipadas, ou seja, a mesma variável pode ter um valor numérico, ou string, ou objeto ou qualquer tipo desejado, isso tem uma perda de desempenho, mas para casos de linguagens isso é mais benefício do que perda.

Vamos ver agora a declaração de funções:

function testeFuncao() {
 alert('a função foi executada');
}

testeFuncao();

Declaramos a função testeFuncao() que simplesmente exibe uma caixa com uma mensagem, as funções podem retornar (ou não) um valor, nesse nosso primeiro exemplo ela não retorna nada, ela apenas executa (seria o caso de funções void em linguagens como C ou Java). Agora vamos ver uma função que retorna um valor:

function soma(a, b) {
 return a + b;
}

var n1 = 5;
var n2 = 3;
var valor = soma(n1, n2);

alert(valor);

Agora temos algo um pouco mais complicado, como podem ver, dessa vez a função recebe 2 parâmetros, quando declaramos parâmetros para as funções, temos seus nomes, e eles devem ser passados na mesma ordem que foram declarados (ou seja, nosso n1 vai virar b e n2 vai virar b), oque a função faz é pegar esses 2 parâmetros e soma-los, retornando esse resultado. Logo após a declaração nós criamos as variaveis n1 e n2, depois mandamos a variável valor guardar o resultado da soma das duas (usando a nossa função somar), e finalmente mandamos exibir esse resultado.

Escopo de variáveis
Por ultimo vamos entender um pouco sobre escopo de variáveis. O escopo de uma variável serve para saber onde está aquela variável, pois podemos ter varias variáveis com o mesmo nome em escopos diferentes. Vamos entender melhor isso atravéz de um exemplo:

var minhaVariavel = 10;

function mostraGlobal() {
 alert(minhaVariavel);
}

function mostraLocal() {
 var minhaVariavel = 5;
 alert(minhaVariavel);
}

function mexeGlobal() {

 minhaVariavel += 3;
 alert(minhaVariavel);
}

function mexeLocal() {

 var minhaVariavel = 2;
 minhaVariavel += 5;
 alert(minhaVariavel);
}

mostraGlobal();
mostraLocal();
mostraGlobal();
mexeGlobal();
mexeLocal();
mexeGlobal();
mexeLocal();
mexeGlobal();
mexeLocal();

Temos agora várias funções, primeiro declaramos a variável global chamada minhaVariavel, vemos nas funções a parte interessante, se você chamar uma variável que não foi declarada dentro da função, ele vai buscar essa variável no escopo global (na verdade, o escopo global do javascript é o objeto window, ou seja, chamar uma variavel dessa forma seria a mesma coisa que escrever window.minhaVariavel, mas você não precisa entender isso agora, nos próximos artigos isso será melhor explicado), e caso não encontre no escopo global ele vai retonar uma valor undefined. Já se dentro da função nós declaramos var minhaVariavel ele vai criar uma nova variável com esse nome no escopo da função, com isso ele sempre vai mexer na variável local, e vai deixar a global de lado. Podem ver o seguinte, no script nós executamos primeiro a função que exibe a variável global, depois chamamos a função que mostra a local, como podem ver, na que mostra a variável local nos fazemos uma atribuição à variável, e depois mostramos a global novamente, para provar que ela não foi alterada. Nos outros testes nós mexemos algumas vezes na variável em diferentes escopos, e como podem ver a variável global sempre vai mudando, enquanto a local sempre é uma nova variável.

Por hoje isso é tudo. Tentei nesse artigo ensinar o básico sobre variáveis e funções, a parte de escopo pode ter ficado um pouco difícil de entender para algumas pessoas, mas não se preocupe, nos futuros artigos iremos entender melhor como funciona o escopo e ficará mais facil.

Quem já entende de JavaScript pode ter achado isso muito chato, mas futuramente entraremos em assuntos bem mais complexos do JavaScript, então aguardem os futuros artigos.

Em caso de dúvidas me mandem um e-mail no seguinte endereço: wilkerlucio@globo.com.

Grato a atenção de quem leu meu artigo, o segundo artigo vai aprofundar o estudo de funções.