Segue avaliação: DEMO

Com esse plugin você pode validar:
- Se o campo for vazio:
- O mínimo de caracteres para esse campo e colocando uma mensagem de alerta:
- Forçar o usuário a digitar se o campo tem só números:
- Verificar se o E-mail é um endereço eletrônico.

Pra chamar a função identifique primeiro o ID do formulário que irá ser utilizado.

$("#meu_formulario").plusvalidate();

Dentro da função .plusvalidate(); você passa os parâmetros necessario. Vamos ver um exemplo:

$(function(){
$("#meu_formulario").plusvalidate({
animation: {
type : "alert"
},

cname: {
message: "Preencha o campo Nome"
},

cemail: {
message: "Preencha o campo Email",
required: "email",
requiredMessage: "Esse campo precisa ter um email eletronico"
}
});
});

Segue link da documentação completa:

Abraços galera e até a próxima!

Mesmo que seu site seja homologado muitas vezes por você mesmo, sempre passa alguma coisa que sua mente cansada não visualizou, ou simplesmente, deixou para resolver o tal erro, mais tarde e no final, não resolveu.
Use a cabeça, quer dizer, use mais mentes a seu favor. Fazer testes de estresses (que é forçar os erros acontecerem) no seu código ajuda a sanar os erros que restaram, mais não quer dizer que foram todos resolvidos.

Pessoas que nunca visualizaram seu site ou seu código podem ajudar nessa tarefa. Veja algumas coisas que nunca poderão acontecer em seu site:

1. Já imaginou um usuário entrar em um site, e clicar em um link que não vai para lugar nenhum? Complicado isso, é estressante! Para que tem a tal da “mãozinha” se não te leva a lugar algum?

2. Site que demora de carregar. Isso realmente mata. Você acha que é pouco tempo, mais para o usuário esperar mais de 10 segundos para seu site carregar, é uma eternidade. Otimize seu código, suas imagens, e o conteúdo do texto pode também ser otimizado. Pense nisso!

3. Tipografia! O que é isso? São as fontes usadas em seu site. Certo! Fontes? Não use tantas fontes em seu site, duas no máximo, para que ter um carnaval de fontes de vários tipos e de vários tamanhos? Foque na usabilidade.

4. Formulários. Essa palavra realmente desanima seu usuário. Nome, e-mail, telefone, celular, CPF, endereço, bairro, cidade, estado… Nossa! Quanta coisa! Você mesmo iria preencher isso tudo? Otimize esses campos. O usuário odeia digitar muito, somos preguiçosos na internet, não podemos gastar muito tempo.

Essas dicas podem te ajudar a ter um código mais limpo e ter uma boa usabilidade em seu site. Pesquise mais sobre usabilidade, as empresas hoje em dia procuram profissionais que tenham uma mente aberta para customizar sites antigos!

A estrutura de Classes em JavaScript é a mesma que usamos em linguagens de programação como ASP ou PHP.

Nesse artigo você irá aprender a usar Classes com o uso da prototype. Vamos a definição do que é a prototype no JavaScript

prototype é um recurso do JavaScript (nesse caso não estou falando do Framework Prototype) que possibilita modificar uma Classe depois que ela foi criada.

Vamos criar uma classe chamada DadosPessoais e dentro dela colocar as variáveis “nome” e “telefone”;

-----------------------------------------------------
function DadosPessoais(){
 var nome;
 var telefone;
}
-----------------------------------------------------

Para dar inicio ao processo das funções dentro da classe usamos a prototype assim:

-----------------------------------------------------
DadosPessoais.prototype.campos = function(){
 this.nome = "Menu Nome";
 this.telefone = "(99) 9999-9999";
}

var obj = new DadosPessoais();
obj.campos();
-----------------------------------------------------

No final, criamos o objeto e chamamos ele…

O Script completo fica assim:

-----------------------------------------------------
<script language="javascript">
function DadosPessoais(){
 var nome;
 var telefone;

 DadosPessoais.prototype.campos = function(){
 this.nome = "Menu Nome";
 this.telefone = "(99) 9999-9999";
 }
}

var obj = new DadosPessoais();
obj.campos();
</script>

Nome: <script>document.write(obj.nome);</script><br>
Telefone: <script>document.write(obj.telefone);</script>

-----------------------------------------------------

Creio que ficou um bom entendimento para todos de como usar Classes no JavaScript usando o recurso prototype.

Abraços a todos.

O link é Simples: http://twitter.com/users/show/ted_k.xml

Usando um Objeto para ler o XML e um layout agradável, chegamos a essa conclusão:

Criei uma classe chamada UserTwitter, dentro criei uma sub chamada LerXML() para fazer todo o processo:

página default.class.asp

class UserTwitter
public sub LerXML()
set objXMLDOM = server.createObject("MSXML2.DOMDocument.3.0")
objXMLDOM.async = false
objXMLDOM.setProperty "ServerHTTPRequest", true
objXMLDOM.validateOnParse = false
objXMLDOM.load("http://twitter.com/users/show/"request.queryString("username")".xml")

set raiz = objXMLDOM.getElementsByTagName("*")
OBS: coloquei o request.queryString para ter um resgate do nome do usuário mais objetivo!
E, um laço de repetição para pegar a posição de cada nó e para cada nome no XML, assim:
for i = 0 to raiz.length - 1
select case (raiz.item(i).nodeName)
case ("name") : tw.nome = raiz.item(i).text
case ("screen_name") : tw.screen_name = raiz.item(i).text
case ("location") : tw.location = raiz.item(i).text
case ("profile_image_url") : tw.profile_image_url = raiz.item(i).text
case ("url") : tw.url = raiz.item(i).text
case ("followers_count") : tw.followers_count = raiz.item(i).text
case ("friends_count") : tw.friends_count = raiz.item(i).text
case ("favourites_count") : tw.favourites_count = raiz.item(i).text
case ("statuses_count") : tw.statuses_count = raiz.item(i).text
case ("time_zone") : tw.time_zone = raiz.item(i).text
case ("profile_background_image_url") : tw.profile_background_image_url	= raiz.item(i).text
case ("profile_background_color") : tw.profile_background_color = ucase(raiz.item(i).text)
case ("profile_text_color")	: tw.profile_text_color	= ucase(raiz.item(i).text)
case ("profile_link_color")	: tw.profile_link_color	= ucase(raiz.item(i).text)
case ("profile_sidebar_fill_color") : tw.profile_sidebar_fill_color = ucase(raiz.item(i).text)
case ("profile_sidebar_border_color") : tw.profile_sidebar_border_color = ucase(raiz.item(i).text)
end select
next
No código dentro do CASE coloquei o nome das tags do XML. fazendo o seguinte:

Quando encontrar o "nodeName" "tal", mostre "tal" case, como uma condicional IF
raiz.item(i).nodeName

Observando também que uso essa propriedade do XML (.text) para imprimir o que há na tag.
raiz.item(i).text

Criando um objeto e chamando ele na tela:
set tw = new UserTwitter
tw.LerXML()

criei uma página chamada default.asp
<% Language="VBScript" %>
<!--include file="Default.class.asp"-->

... o restante do código

Para ter acesso o código completo e o layout clique aqui para baixar

Nesse artigo vou mostrar como usar corretamente e com eficiência essa “simples função”.

Todos nós programadores ASP sabemos usar simplificada a função Replace(), segue um exemplo:

<%
dim frase frase = “Por uma internet sempre criativa e dinâmica” response.write(replace(frase, “sempre”, “mais”))
%> 

Uma maneira simples, usamos o texto que está em pauta seguido da palavra que queremos substituir e depois da palavra que queremos colocar no lugar.

replace(texto em pauta, palavra que sai, palavra que entra) 

Resultado o Script: “Por uma internet mais criativa e dinâmica”

OBS: a função replace() é "Case Sensitive" se quiser substituir "A" por "a", onde existir o "A" maiúsculo será substituído pelo "a" minúsculo.

Vamos para a parte que interessa mais:
No texto “Por uma internet mais criativa e dinâmica” queremos que a letra “i” de “internet” seja maiúscula e não as outras, como fazer isso?
Seguindo essa sequência “replace(texto em pauta, palavra que sai, palavra que entra)”, existem mais três parâmetros opicionais que complementam a função:

* Posição inicial;
* Count (um contador que especifica o número de substituíção);
* Comparador de Strings (caso binário de padrão “zero” ou texto).

Segue o exemplo:
<%
dim frase frase = “Por uma internet mais criativa e dinâmica” response.write(replace(frase, “i”, “I”, 1,1,1))
%>  

Resultado do Script: “Por uma Internet mais criativa e dinâmica”

No parâmentro inicial você também pode usar ele como um “cortador de letras”, exemplo: Eu não quero mais que apareça a palavra “Por”, então cortamos três letras da frase, caso queira cortar o espaço também e usar quatro no contador fiquem a vontade, mais para isso usamos a função trim() que não vem ao caso.

Segue o exemplo:
<%
dim frase frase = “Por uma internet mais criativa e dinâmica” response.write(replace(frase, “u”, “U”, 4,1,1))
%>

Resultado do Script: “Uma internet mais criativa e dinâmica”

Notem que coloquei no valor da posição o número “4? (quatro) e explicarei por que.
O valor padrão da posição inicial vem de default “1? (um) e não “0? (zero) como estamos acostumados em outras funções por isso adicionamos mais um valor no contador no caso “3 + 1?.

E o que falar da última posição o “Comparador de Strings”)

Olha como funciona:

Segue o exemplo:
<% dim frase frase = “Elegante” response.write(replace(frase, “e”, “&euro;”, 1,1,0)) %>

O YouTube oferece a você várias API´s para se comunicar, RSS também. Escolhi um acesso via API não propriamente dito.

Existe um link que lista os mais recentes vídeos do seus Favoritos, é um link como esse, que vem com tags XML:

“http://gdata.youtube.com/feeds/api/users/nome_do_seu_usuario/favorites”

O que você precisa é:

O nome do seu usuário;

Como formatar o XML para mostrar na tela.
Vamos fazer um exemplo com o usuário tedk. Criaremos uma classe e colocarmos as informações básicas:
——————————————

——————————————
Criei um Objeto de acesso que é o DOM, no caso o “MSXML2.DOMDocument.3.0″ e setando como verdadeira a sua propriedade “Server HTTP Request”

Na SUB “objetosXML” criei o Objeto DOM e na SUB “carregarURL” coloquei o nome do meu usuário no YouTube. A url de acesso ao Feed API e a chamada da SUB onde contém o Objeto DOM
O restante do código foi só contar quantas Tags XML temos até começar a estrutura dos vídeos. Contei 16 e fiz o FOR. Usei uma “mini-função” para tratar a URL de vídeo para colocar no EMBED.

Coloquei um CASE para buscar as Tags que tenho como objetivo, que é o link do vídeo, o título e a descrição.

Vamos ver o código completo:
—————————————–
<%
class YouTube
private objXML
private objLista
private usuario
private url
private id, i
private nome_objeto

private sub objetosXML()
set objXML = server.createObject(“MSXML2.DOMDocument.3.0″)
objXML.async = false
objXML.setProperty “ServerHTTPRequest”, true
objXML.validateOnParse = false
objXML.load(url)
set objLista = objXML.getElementsByTagName(“*”)
end sub

public sub carregarURL()
usuario = “nome_do_seu_usuario”
url = “http://gdata.youtube.com/feeds/api/users/”&usuario&”/favorites”
call objetosXML()

for i = 16 to (objLista.length – 1)
select case (objLista.item(i).nodeName)
case “id”
nome_objeto = objLista.item(i).text
id = right(nome_objeto, len(nome_objeto) – instrRev(nome_objeto,”/”))

tabela = tabela & “
”
tabela = tabela & “

”

case “title”
tabela = tabela & “

”
tabela = tabela & “

”

case “content”
tabela = tabela & “

”
tabela = tabela & “

”
tabela = tabela & “

” tabela = tabela & “” tabela = tabela & “” tabela = tabela & “” tabela = tabela & “” tabela = tabela & “” tabela = tabela & “
TÍTULO:	“&objLista.item(i).text&”
DESCRIÇÃO:	“&objLista.item(i).text&”

”
end select
next

response.write(tabela)
end sub
end class
%>
—————————————–
OBS: Eu poderia usar o XSL para formatar as tabelas e mostra na tela, mas para um webdesigner modificar o código seria bastante complicado, então a idéia é facilitar!

O resultado é esse:

Criei um arquivo chamado funcao_jquery.js para colocar a função de efeito do jQuery:

O Script completo e comentado para ter uma idéia de como funciona:

funcao_jquery.js
————————–
$(document).ready(function(){
$(‘#btn_enviar’).click(function(){
// Pega valor dos campos Nome e E-Mail
var nome_post = $(‘#Nome’).val();
var email_post = $(‘#EMail’).val();
// Envia para a função criada em ASP
$.post(“Cadastro_JQuery.asp?Cadastrar=Ok”,{nome: nome_post, email: email_post},function(){
// Lista dentro de uma UL>LI os dados postados
$(“ul li:last”).after(”

“).next().fadeIn(“slow”);
});
// Apaga os Dados do Campo Nome e E-Mail
$(‘#Nome’).val(“”);
$(‘#EMail’).val(“”);

return false;
});
});
————————–
Na tela inicial temos esse modelo aqui com campo de Nome e E-Mail só para exemplo:

Quando você cadastra ele gera uma LI dinamicamente sem refresh e com efeito fade:

Segue o código completo:
————————–
<%@ Language=”JavaScript” %>
<%
// Conexao com o Banco de Dados
var Conexao = Server.CreateObject(“Adodb.Connection”);
Conexao.ConnectionString = “Driver=MySQL ODBC 3.51 Driver; DataBase=paineldevendas13; Server=localhost; Uid=root; PassWord=root;”;
Conexao.Open;
%>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>JQuery Cadastrando com ASP</title>
<script language=”javascript” src=”jquery.js”></script>
<script language=”javascript” src=”funcao_jquery.js”></script>
</head>
<body>
<h2>JQuery Cadastrando com ASP</h2>
<ul>
<%
var rs = Conexao.Execute(“Select * From Teste”); // SQL para listar os dados
if (rs == null) {
Response.Write(“NADA ENCONTRADO”);
}
else {
while (!rs.EOF) {
Response.Write(“<li>”+rs(“Nome”)+” : “+rs(“EMail”)+”</li>”) // Lista todos os cadastrados do banco
rs.MoveNext();
}
}
%>
</ul>
<br><strong>INSIRA DADOS NO BANCO</strong><br>
<form action=”Cadastro_JQuery.asp?Cadastrar=Ok” method=”post”>
Nome: <input name=”Nome” type=”text” id=”Nome” />
<br>
E-Mail: <input name=”EMail” type=”text” id=”EMail” />
<input name=”btAdd” type=”submit” value=”adicionar” id=”btn_enviar” />
</form>
</body>
</html>
<%
// Função para cadastrar no banco
if (Request.QueryString(“Cadastrar”) == “Ok”) {
Conexao.Execute(“Insert Into Teste (Nome, EMail) Values (‘”+Request.Form(“Nome”)+”‘, ‘”+Request.Form(“EMail”)+”‘)”);
Response.Write(“”);
}
%>
————————–
Baixar : jquery-1.2.6.js

Segue o Código comentado para uma explicação mais adequada de ASP com JavaScript

Um simples Código de visualizar o que tem na tabela “CADASTRO”, com o banco MySQL

<%@ Language=”JavaScript” %>

<%

var Conexao = Server.CreateObject(“Adodb.Connection”); // Criando o objeto de Conexão

Conexao.ConnectionString = “Driver=MySQL ODBC 3.51 Driver; DataBase=#########; Server=localhost; Uid=#########; PassWord=#########;”;

Conexao.Open; // Abrindo a Conexão

var Rs = Conexao.Execute(“Select * From Cadastro”); // SQL para selecionar e imprimir na tela todos os Cadastros

if (Rs == null) { // Caso ele não encontre será imprimido na tela uma resposta

Response.Write(“Nada Encontrado!”);

}

else { // Caso ele encontre será imprimido os resultados

while (!Rs.EOF) {

with (Response) {

Write(Rs(“Nome”));

Write(“<hr>”);

Write(“<br>”);

}

Rs.MoveNext();

}

}

%>

Ter um grande conhecimento tanto em VBScript quanto em JScript ajuda muito para saber qual das duas usar, lembrando que nem tudo que você ver no JavaScript, será necessariamente aplicado!

Na realidade o Schema é usado para definir os blocos de construção de um arquivo XML, que pode ser visto como um suplente para DTDs.

O elemento é o elemento raiz de todo XML

O XML Schema pode ser traduzido como XSD (XML Schema Definition / XMLs Definidos por Esquemas),
segue um exemplo simples para estudo…

Vamos chamar esse aquivo de “teste01.xsd”

<?xml version="1.0"?>
	<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema">
	... aqui colocamos o resto da estrutura Schema
</xsd:schema>

Depois de criado o Schema pode ser associado a um arquivo XML como no exemplo do código a seguir

<?xml version="1.0" ?>
<principal xmlns="http://www.tedk.com.br"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.tedk.com.br colocar_schema.xsd">">
<arquivo tid="1">
	<item_numeral>COD: 600</item_numeral>
		<item_nome>
			<teste_nome>Coloque qualquer coisa 001</teste_nome>
			<valor_nome>Coloque qualquer coisa 002</valor_nome>
		</item_nome>
	<descricao>Aqui você digita qualquer descricao</descricao>
	<foto>imagem.gif</foto>
</arquivo>
</principal>

o Schema é referenciado logo no inicio do elemento raiz do aquixo XML que está sendo configurado:
O xmlns=”http://www.tedk.com.br” é uma declaração, uma namespace. Essa namespace diz ao validador
que todos os elementos do que serão utilizados irão vim da url especificada.

A segunda parte, xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” indica a localização do 
Schema, a instância que vai ser utilizada. O segundo valor é a localização do Schema que
pretende utilizar para que namespace:xsi:schemaLocation = “http://www.tedk.com.br colocar_schema.xsd”.

Nos próximos Posts irei colocar mais a respeito do Schema, foi só uma simples e breve introdução.
Bons estudos.

ajax.js

function GetXMLHttp() {

    if(navigator.appName == "Microsoft Internet Explorer") {

        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

    }

    else {

        xmlHttp = new XMLHttpRequest();

    }

    return xmlHttp;

}

var xmlRequest = GetXMLHttp();

No arquivo “instrucao.js” terá as informações necessárias para fazer a ação

instrucao.js

function abrirPag(valor){

var url = valor;

xmlRequest.onreadystatechange = mudancaEstado;

xmlRequest.open("GET",url,true);

xmlRequest.send(null);

if (xmlRequest.readyState == 1) {

document.getElementById("conteudo_mostrar").innerHTML = "<img src='loader.gif'>";

}

return url;

}

function mudancaEstado(){

if (xmlRequest.readyState == 4){

document.getElementById("conteudo_mostrar").innerHTML = xmlRequest.responseText;

}

}

Criamos a página Index.html para recerber as informações

Index.html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Carregando Página em DIV / AJAX</title>

<script language="javascript" src="ajax.js"></script>

<script language="javascript" src="instrucao.js"></script>

</head>

<body>

<div id="menu"><a href="#" onclick="abrirPag('Conteudo.html');">Clientes</a></div>

<br><br>

<div id="conteudo_mostrar"></div>

</body>

</html>

E finalmente criamos a página Conteudo.html que será exibida dentro da DIV “conteudo_mostrar”

Conteudo.html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Clientes</title>

</head>

<body>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.

</body>

</html>

Qualquer dúvida postem!!
Abraços!!!!