Arquivo da categoria ‘JavaScript’

JQuery UI – Elementos – Javascript

Publicado: 9 de fevereiro de 2015 em JavaScript, JQuery

O JQuery UI permite que você utilize os elementos de interface gráfica de usuário comuns da linguagem de marcação HTML e os ligue aos elementos de sua biblioteca visual, deste modo você pode você se beneficiar de todos os efeitos visuais e recursos dos componentes modernos que o JQuery UI fornece para que você construa aplicações web altamente interativas, além de possibilitar a manipulação dos elementos de um página web de uma forma simples e fácil, utilizando a biblioteca JQuery.

Utilizando Elementos do JQuery UI

1 – Crie uma pagina HTML para o cadastro e outra para a exibição do resultado e utilize os códigos abaixo para criar sua aplicação. Entre com os dados e clique no botão para envia-los:

JQuery UI - Elementos

JQuery UI – Elementos

2 – A pagina de resultado recupera e exibe os parâmetros enviados através de Javascript e JQuery:

JQuery - Resultado

JQuery – Resultado

Exemplo:

Neste exemplo criamos um cadastro utilizando os elementos HTML e os ligando ao JQuery UI.

JQuery

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="Bluefish 2.2.6" />
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>

<style type="text/css">
body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}

#meucheck, #genero {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin-top: 1em;
	width: 50px;
}

#cargo {
	width: 300px;
}

#cadastro label {
	width: 250px;
}

#cadastro label.error, #cadastro input.submit {
	color: darkorange;
	margin-left: 253px;
}
</style>
<!-- 
         Está é uma instalação do JQuery, você apenas precisa apontar
         para o respectivo script da versão que você deseja utilizar
                  
         jquery.js     = JQuery
         jquery-ui.js  = JQuery UI     
         jquery-ui.css = JQuery Theme    
    -->
<link href="./jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/external/jquery/jquery.js">
	
</script>
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/jquery-ui.js">
	
</script>

<!-- JQuery Validator -->

<script type="text/javascript"
	src="./js/jquery-validation-1.13.1/dist/jquery.validate.js"></script>

<!-- Script JQuery - JQuery UI -->

<script type="text/javascript">
	// Declara UI e funções JQuery

	$(document).ready(function() {

		// Método de validação    
		$.validator.addMethod("regex", function(value, element, regexp) {
			var re = new RegExp(regexp);
			return this.optional(element) || re.test(value);
		}, "Please check your input.");

		// Cria regras de valicação e customiza mensagens

		$("#cadastro").validate({
			rules : {
				nome : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				sobrenome : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				cargo : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				datepicker : {
					required : true
				},
				salario : {
					required : true,
					regex : /(?:\d*\.)?\d+/
				},

			},

			messages : {
				nome : {
					required : "O campo nome é obrigatório.",
					regex : "Campo suporta somente letras"
				},
				sobrenome : {
					required : "O campo sobrenome é obrigatório.",
					regex : "Campo suporta somente letras"
				},
				cargo : {
					required : "O campo cargo é obrigatório.",
					regex : "Campo suporta somente letras"
				},

				datepicker : {
					required : "O campo data é obrigátorio"
				},

				salario : {
					required : "O campo salário é obrigatório.",
					regex : "Campo suporta somente decimais"
				},
			},
		});

		$("#accordion").accordion({
			heightStyle : "content"
		}).accordion("option", "icons", null)

		$("#datepicker").datepicker();

		$("#genero").buttonset().find('label').width(100);

		$("#meucheck").buttonset().find('label').width(100);

		$("#abrir").button()

	});
</script>
</head>
<body>
	<h1>Desenvolvimento Aberto - JQuery - UI</h1>

	<h2>Form Validator - Validação</h2>
	<div id="accordion">
		<h3>Cadastro</h3>
		<div>
			<form id="cadastro" method="get" action="resultado.html">
				<table>
					<tr>
						<td><label for="nome">Nome:</label></td>
						<td><input id="nome" name="nome" size="27" required>
							<br></td>
					</tr>

					<tr>
						<td><label for="sobrenome">Sobrenome:</label></td>
						<td><input id="sobrenome" name="sobrenome" size="35" required>
							<br></td>
					</tr>

					<tr>
						<td><label for="cargo">Cargo:</label></td>
						<td><select id="cargo" name="cargo" required>
								<option value="Vocalista">Vocalista</option>
								<option value="Guitarrista">Guitarrista</option>
								<option value="Baixista">Baixista</option>
								<option value="Baterista">Baterista</option>
						</select>
					</tr>

					<tr>
						<td><label for="datepicker">Data de admissão:</label></td>
						<td><input type="text" id="datepicker" name="data" required></td>
					</tr>

					<tr>
						<td><label for="salario">Salario:</label></td>
						<td><input id="salario" name="salario" size="18" required>
							<br></td>
					</tr>

					<tr>
						<td><label for="genero">Gênero:</label></td>
						<td>
							<div id="genero">
								<input type="radio" id="radio1" name="genero"><label
									for="radio1">Masculino</label> <input type="radio" id="radio2"
									name="genero"><label for="radio2">Feminino</label>
							</div>
						</td>

					</tr>
					<tr>
						<td><label>Ativo:</label></td>
						<td><div id="meucheck">
								<input type="checkbox" id="ativo" name="ativo"><label
									for="ativo">Situação</label>
							</div></td>
					</tr>

					<tr>

						<td><label for="observacao">Observação:</label></td>
						<td><textarea id="observacao" name="observacao" rows="5"
								cols="40"></textarea></td>

					</tr>

				</table>
				<br>
				<button id="abrir" type="submit">Enviar Dados</button>
			</form>
		</div>
	</div>

</body>
</html>

resultado.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="Bluefish 2.2.6" />
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>

<style type="text/css">
body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}

.rotulo {
	font: 62.5% "Trebuchet MS", sans-serif;
	color: darkorange;
	font-weight: bold;
}

.dados {
	font: 62.5% "Trebuchet MS", sans-serif;
	color: cadetblue;
}
</style>
<!--
         Está é uma instalação do JQuery, você apenas precisa apontar
         para o respectivo script da versão que você deseja utilizar

         jquery.js     = JQuery
         jquery-ui.js  = JQuery UI
         jquery-ui.css = JQuery Theme
    -->
<link href="./jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/external/jquery/jquery.js">

</script>
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/jquery-ui.js">

</script>

<!-- Script JQuery - JQuery UI -->

<script type="text/javascript">
	// Declara UI e funções JQuery

	$(document).ready(function() {

		// Cria função para recuperar paramentros

		$("#accordion").accordion({
			heightStyle : "content"
		}).accordion("option", "icons", null);

		function getUrlParameter(sParam) {
			var sPageURL = window.location.search.substring(1);
			var sURLVariables = sPageURL.split('&');
			for (var i = 0; i < sURLVariables.length; i++) {
				var sParameterName = sURLVariables[i].split('=');
				if (sParameterName[0] == sParam) {
					return sParameterName[1];
				}
			}
		}
		// Está é a URL
		// ?nome=Eddie&sobrenome=Vedder&cargo=Vocalista&data=02%2F09%2F2015&salario=1234.56&genero=on&ativo=on&observacao=teste

		// Recupera parametros

		var nome = getUrlParameter('nome');
		var sobrenome = getUrlParameter('sobrenome');
		var cargo = getUrlParameter('cargo');
		var dataAdmissao = getUrlParameter('data');
		var salario = getUrlParameter('salario');
		var genero = getUrlParameter('genero');
		var ativo = getUrlParameter('ativo');
		var observacao = getUrlParameter('observacao');

		// Mostra valores
		$("#nome").html(nome);
		$("#sobrenome").html(sobrenome);
		$("#cargo").html(cargo);
		$("#dataAdmissao").html(unescape(dataAdmissao));
		$("#salario").html("R$ " + salario);
		$("#genero").html(genero);
		$("#ativo").html(ativo);
		$("#observacao").html(unescape(observacao));

	});
</script>
</head>
<body>
	<h1>Desenvolvimento Aberto - JQuery - UI</h1>

	<h2>Form UI - Resultado - GET</h2>
	<div id="accordion">
		<h3>Resultado</h3>

		<div>

			<table>
				<tr>
					<td class="rotulo">Nome:</td>
					<td><label id="nome" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Sobrenome:</td>
					<td><label id="sobrenome" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Cargo:</td>
					<td><label id="cargo" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Data de Admissão:</td>
					<td><label id="dataAdmissao" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Salário:</td>
					<td><label id="salario" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Gênero:</td>
					<td><label id="genero" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Ativo:</td>
					<td><label id="ativo" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Observação:</td>
					<td><label id="observacao" class="dados"></label></td>
				</tr>

			</table>

		</div>

	</div>
</body>
</html>

Anúncios

Em ciência da computação teórica e teoria da linguagem formal, uma expressão regular abreviada de Regex ou Regexp e, por vezes chamado de uma expressão racional é uma sequência de caracteres que forma um padrão de pesquisa, principalmente para uso na correspondência de padrões com Strings, ou sequência correspondente, ou seja, como operações de localizar e substituir. O conceito surgiu na década de 1950, quando o matemático americano Stephen Kleene formalizava a descrição de uma linguagem regular, e entrou em uso comum com os utilitários Unix de processamento de texto.

Cada caractere em uma expressão regular ou é entendido como um MetaCharacter com seu significado especial, ou um caractere regular com o seu significado literal. Em conjunto, eles podem ser usados para identificar material textual de um determinado padrão, ou processar um número de instâncias do mesmo que podem variar de uma igualdade exata para uma semelhança muito geral do padrão.

O Regex pode ser usado para analisar rapidamente grandes quantidades de texto para encontrar padrões de caracteres específicos; para extrair, editar, substituir ou excluir substrings de texto, também é comum serem utilizadas para validar campos.

Regular Expression

Existe muito material sobre expressões regulares, inclusive a API do Javascript contempla métodos para combinar sequências de caracteres contra padrões especificados por expressões regulares

Regex: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions

Por outro lado existem alguns sites que proporcionam ótimos materiais sobre Regex e permitem que você crie e teste sua própria expressão regular antes de a utilizar.

RegExr: http://regexr.com/

Expressão regular que contempla caracteres maiúsculos e minúsculos: Pattern [a-zA-Z]+

Regex - [a-zA-Z]+

Regex – [a-zA-Z]+

Expressão regular que contempla números inteiros e flutuantes: Pattern (?:\d*\.)?\d+

Regex - (?:\d*\.)?\d+

Regex – (?:\d*\.)?\d+

Usando Expressões Regulares

1 – Crie uma página web, utilize os scripts JQuery adequados no qual você pode conferir no código abaixo:

JQuery UI - Validação - Regex

JQuery UI – Validação – Regex

Exemplo:

Neste exemplo utilizamos expressões regulares para validar o conteúdo dos campos de uma aplicação JQuery. Na aplicação se um campo de texto conter caracteres que não correspondem a expressão serão automaticamente invalidados.

JQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>

<style type="text/css">
body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}

#cadastro label {
	width: 250px;
}

#cadastro label.error, #cadastro input.submit {
	color: darkorange;
	margin-left: 253px;
}
</style>
<!--
         Está é uma instalação do JQuery, você apenas precisa apontar
         para o respectivo script da versão que você deseja utilizar

         jquery.js     = JQuery
         jquery-ui.js  = JQuery UI
         jquery-ui.css = JQuery Theme
    -->
<link href="./jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/external/jquery/jquery.js">

</script>
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/jquery-ui.js">

</script>

<!-- JQuery Validator -->

<script type="text/javascript"
	src="./js/jquery-validation-1.13.1/dist/jquery.validate.js"></script>

<!-- Script JQuery - JQuery UI -->

<script type="text/javascript">
	// Declara UI e funções JQuery

	$(document).ready(function() {

		// Método de validação  - Adiciona método JQuery Validation
		$.validator.addMethod("regex", function(value, element, regexp) {
			var re = new RegExp(regexp);
			return this.optional(element) || re.test(value);
		}, "Menssagem substituída pela mensagem do Plug-in JQuery Validation.");

		// Cria regras de validação e customiza mensagens

		$("#cadastro").validate({
			rules : {
				nome : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				sobrenome : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				cargo : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				salario : {
					required : true,
					regex : /(?:\d*\.)?\d+/
				},

			},

			messages : {
				nome : {
					required : "O campo nome é obrigatório.",
					regex : "Campo suporta somente letras."
				},
				sobrenome : {
					required : "O campo sobrenome é obrigatório.",
					regex : "Campo suporta somente letras."
				},
				cargo : {
					required : "O campo cargo é obrigatório.",
					regex : "Campo suporta somente letras."
				},
				salario : {
					required : "O campo salário é obrigatório.",
					regex : "Campo suporta somente decimais."
				},
			},
		});

		$("#accordion").accordion({
			heightStyle : "content"
		}).accordion("option", "icons", null)

		$("#abrir").button()

	});
</script>
</head>
<body>
	<h1>Desenvolvimento Aberto - JQuery - UI</h1>

	<h2>Form Validator - Validação</h2>
	<div id="accordion">
		<h3>Cadastro</h3>
		<div>
			<form id="cadastro" method="get" action="">
				<table>
					<tr>
						<td><label for="nome">Nome:</label></td>
						<td><input id="nome" name="nome" size="27" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="sobrenome">Sobrenome:</label></td>
						<td><input id="sobrenome" name="sobrenome" size="35" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="cargo">Cargo:</label></td>
						<td><input id="cargo" name="cargo" size="28" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="salario">Salario:</label></td>
						<td><input id="salario" name="salario" size="18" required>
							<br></td>
					</tr>
				</table>
				<br>
				<button id="abrir" type="submit">Enviar Dados</button>
			</form>
		</div>
	</div>

</body>
</html>

JQuery UI – Validation Plug-in – Linux

Publicado: 31 de janeiro de 2015 em JavaScript, JQuery

O JQuery possui uma gama de plug-ins escritos sob o código aberto que permitem que você estenda as funcionalidades do JQuery, o JQuery Validation faz a validação de formulários do lado cliente de um modo simples e fácil, enquanto continua a oferecer uma abundância de opções de personalização. Faz dele uma boa escolha se você está construindo algo novo a partir do zero, mas também se você está tentando integrar algo em uma aplicação existente com muita marcação.

O JQuery Validation é open source e escrito sob a licença MIT e foi construído por um desenvolvedor líder na equipe jQuery UI, com o plug-in você pode validar campos requeridos de uma forma simples, ou customizar suas validações contando com inúmeras possibilidades, desde simples mensagens personalizadas até complexas validações sob regras que você pode definir. O download do JQuery Validation conta com vários exemplos de como utilizar o plug-in.

JQuery Validation: http://jqueryvalidation.org/

JQuery Validation

JQuery Validation

Exemplo:

Neste exemplo utilizamos o JQuery Validation para validar automaticamente os campos requeridos de um formulário. Para utiliza-lo basta efetuar o download e usar o arquivo contido na pasta Dist.

JQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="Bluefish 2.2.6" />
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>

<style type="text/css">
body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}

#cadastro label {
	width: 250px;
}

#cadastro label.error, #cadastro input.submit {
	color: darkorange;
	margin-left: 253px;
}
</style>
<!-- 
         Está é uma instalação do JQuery, você apenas precisa apontar
         para o respectivo script da versão que você deseja utilizar
                  
         jquery.js     = JQuery
         jquery-ui.js  = JQuery UI     
         jquery-ui.css = JQuery Theme    
    -->
<link href="./jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/external/jquery/jquery.js">
	
</script>
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/jquery-ui.js">
	
</script>

<!-- JQuery Validatr -->

<script type="text/javascript"
	src="./js/jquery-validation-1.13.1/dist/jquery.validate.js"></script>

<!-- Script JQuery - JQuery UI -->

<script type="text/javascript">
	// Declara UI e funções JQuery
	$(document).ready(function() {

		$("#cadastro").validate();

		$("#accordion").accordion({
			heightStyle : "content"
		}).accordion("option", "icons", null)

		$("#abrir").button()

	});
</script>
</head>
<body>
	<h1>Desenvolvimento Aberto - JQuery - UI</h1>

	<h2>Form Validator - Validação</h2>
	<div id="accordion">
		<h3>Cadastro</h3>
		<div>
			<form id="cadastro" method="get" action="">
				<table>
					<tr>
						<td><label for="nome">Nome:</label></td>
						<td><input id="nome" name="nome" size="27" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="sobrenome">Sobrenome:</label></td>
						<td><input id="sobrenome" name="sobrenome" size="35" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="cargo">Cargo:</label></td>
						<td><input id="cargo" name="cargo" size="28" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="salario">Salario:</label></td>
						<td><input id="salario" name="salario" size="18" required>
							<br></td>
					</tr>
				</table>
				<br>
				<button id="abrir" type="submit">Enviar Dados</button>
			</form>
		</div>
	</div>

</body>
</html>

 

Os Widgets do JQuery UI são ricos em recursos, são plugi-ns que têm um ciclo de vida completo, você pode utiliza-los juntamente com métodos e eventos do JQuery. Você usar os Widgets para criar formulários modernos, interativos e animados na medida certa.

Os elementos basicos são o Accordion que converte um par de cabeçalhos e painéis de conteúdo em um acordeão, você pode usa-lo de varias maneiras. O Button permite que você use botões que possuem temas. O Dialog abre um conteúdo em uma sobreposição interativa e animada.

Widgets: http://api.jqueryui.com/1.10/category/widgets/

JQuery - Widgets

JQuery – Widgets

Exemplo:

Neste exemplo utilizamos o JQuery e o JQuery UI para criar um simples cadastro e exibir a informação inserida pelo usuário em uma caixa de dialogo.

JQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="Bluefish 2.2.6" />
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>

<style type="text/css">
body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}
</style>
<!-- 
         Está é uma instalação do JQuery, você apenas precisa apontar
         para o respectivo script da versão que você deseja utilizar
                  
         jquery.js     = JQuery
         jquery-ui.js  = JQuery UI     
         jquery-ui.css = JQuery Theme    
    -->
<link href="./jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/external/jquery/jquery.js">
	
</script>
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/jquery-ui.js">
	
</script>
<!-- Script JQuery - JQuery UI -->

<script type="text/javascript">
	// Declara UI e funções JQuery
	$(document).ready(
			function() {

				$("#accordion").accordion({
					heightStyle : "content"
				}).accordion("option", "icons", null)

				$("#abrir").button()

				$("#dialog").dialog({
					autoOpen : false,
					show : {
						effect : "blind",
						duration : 1000
					},

					hide : {
						effect : "blind",
						duration : 1000
					}

				});

				$("#abrir").click(
						function() {

							$("#dialog").html(
									"Você digitou: <br><br>" + "Nome:      "
											+ $("#nome").val() + "<br>"
											+ "Sobrenome: "
											+ $("#sobrenome").val() + "<br>"
											+ "Cargo:     " + $("#cargo").val()
											+ "<br>" + "Salario:   "
											+ $("#salario").val())

							$("#dialog").dialog("open");

						});

			});
</script>
</head>
<body>
	<h1>Desenvolvimento Aberto - JQuery - UI</h1>

	<h2>Accordion - Dialog - Button</h2>
	<div id="accordion">
		<h3>Cadastro</h3>
		<div>
			<table>
				<tr>
					<td><label for="nome">Nome:</label></td>
					<td><input id="nome" size="27" /> <br></td>
				</tr>
				<tr>
					<td><label for="sobrenome">Sobrenome:</label></td>
					<td><input id="sobrenome" size="35" /> <br></td>
				</tr>
				<tr>
					<td><label for="cargo">Cargo:</label></td>
					<td><input id="cargo" size="28" /> <br></td>
				</tr>
				<tr>
					<td><label for="salario">Salario:</label></td>
					<td><input id="salario" size="18" /> <br></td>
				</tr>
			</table>
			<br>
			<button id="abrir">Enviar Dados</button>
		</div>
	</div>
	<div id="dialog" title="Resultado">
		<p></p>
	</div>
</body>
</html>

JQuery – Instalando o JQuery UI – Linux

Publicado: 29 de janeiro de 2015 em JavaScript, JQuery

O jQuery UI é uma coleção de widgets que é usado para criar uma interface do usuário que contém, efeitos visuais animados e temas implementados com jQuery, que utiliza sua biblioteca JavaScript, Cascading Style Sheets, e HTML. Todos os efeitos, widgets e temas foram construídos em cima da Biblioteca JavaScript jQuery. O Jquery e jQuery UI são softwares livres e de código aberto distribuído pela Fundação jQuery sob a licença MIT.

jQuery UI foi desenvolvido por designers e desenvolvedores, no qual projetaram todos os  plug-ins para que você comece a trabalhar rapidamente de um modo flexível o suficiente para evoluir com suas necessidades e resolver uma infinidade de casos de uso.

JQuery UI: http://jqueryui.com/

Instalando e Usando o JQuery UI

1 – Ao instalar o JQuery, você possui varias opções e uma delas é escolher um dos vários temas e baixa-lo com a configuração da biblioteca desejada, ou seja você pode escolher somente o que precisa usar. Entre no menu temas e em seguida clique em Gallery e escolha um tema desejado, nos escolhemos o Redmond e clique em download:

JQuery UI - Galeria de Temas

JQuery UI – Galeria de Temas

2 – Você será redirecionado para a pagina de download, nela você pode escolher a versão do JQuery UI desejada e os elementos de sua biblioteca, somente clique em download:

JQuery UI - Download

JQuery UI – Download

3 – Descompacte o JQuery no diretório de sua aplicação Web:

Descompactar JQuery

Descompactar JQuery

4 – O pacote já contempla a biblioteca JQuery, JQuery UI e a folha de estilos CSS. Você precisa chama-los de sua pagina Web:

JQuery UI - Bibliotecas

JQuery UI – Bibliotecas

5 – Para utilizar os widgets do JQuery UI você simplesmente os chama utilizando o ID do elemento HTML e referenciando através de instruções JQuery para cada componente, utilize o código abaixo para criar uma simples página web.

JQuery UI - Aplicação

JQuery UI – Aplicação

Exemplo:

Neste exemplo utilizamos as bibliotecas JQuery e JQuery UI e sua folha de estilos para criar elementos da interface do usuário que utiliza um menu do tipo acordeão e um botão que dispara uma caixa de dialogo.

JQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="Bluefish 2.2.6" />
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>

<style type="text/css">

body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}

</style>
<!-- 
         Está é uma instalação do JQuery, você apenas precisa apontar
         para o respectivo script da versão que você deseja utilizar
                  
         jquery.js     = JQuery
         jquery-ui.js  = JQuery UI     
         jquery-ui.css = JQuery Theme    
    -->
<link href="./jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/external/jquery/jquery.js">
	
</script>
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/jquery-ui.js">
	
</script>
<!-- Script JQuery - JQuery UI -->

<script type="text/javascript">

	// Declara UI e funções JQuery
	$(document).ready(function() {

		$("#accordion").accordion()

		$("#abrir").button()

		$("#dialogo").dialog({
			autoOpen : false,
			show : {
				effect : "blind",
				duration : 1000
			},

			hide : {
				effect : "explode",
				duration : 1000
			}
		});

		$("#abrir").click(function() {
			$("#dialogo").dialog("open");
		});

	});

</script>
</head>
<body>
	<h1>Desenvolvimento Aberto - JQuery - UI</h1>

	<h2>Accordion - Dialog - Button</h2>
	<div id="accordion">
		<h3>Sobre</h3>
		<div>
			<p>Desenvolvimento Aberto utiliza um método de desenvolvimento de
				software que utiliza a transparência do processo. A promessa de
				código aberto é de melhor qualidade, maior confiabilidade, maior
				flexibilidade e um menor custo.</p>
			<p>Desenvolvimento Aberto é uma organização voltada para o
				aprendizado e discussão de técnicas de desenvolvimento focado em
				algumas linguagens de programação sendo parcialmente/totalmente
				abertas ou com licenças gratuitas para desenvolvedores de cada uma
				de suas respectivas marcas registradas.</p>
		</div>
		<h3>Clique em mim!</h3>
		<div>
			<div id="dialogo" title="Desenvolvimento Aberto">
				<p>Desenvolvimento Aberto é formado para educar sobre e defender
					os benefícios do código aberto e de construir pontes entre os
					diferentes círculos eleitorais na comunidade de código aberto.</p>
			</div>
			<button id="abrir">Clique Aqui.</button>
		</div>
	</div>
</body>
</html>

Web Dynpro – Usando Javascript – SAP- Abap

Publicado: 25 de janeiro de 2015 em Abap, JavaScript

A tecnologia Web Dynpro até a sua versão 7.2 não permite que você utilize Javascript para manipular elementos de sua UI, no entanto o ABAP Objects nos presenteia com a classe CL_JAVA_SCRIPT para que possamos utilizar scripts externos para chamar nossas funções Javascript em aplicações Web Dynpro. As versões mais recentes do Web Dynpro como a 7.3 ou superiores já inclui elementos de integração HTML chamados HTMLIsland e HTMLContainer que possibilita integrar Javascript e CSS aos elementos de sua UI.

Você pode usar a classe CL_JAVA_SCRIPT para executar programas em JavaScript que, por exemplo, são carregados de recursos externos ou programados em um editor e escrito por você mesmo. Você também pode criar um arquivo Javascript dinamicamente de um código ABAP.

CL_JAVA_SCRIPT: Objetos Javascript

HTML Integration: Integração HTML

Usando uma Biblioteca Externa

1 – Crie um novo componente Web Dynpro e crie seu layout como na figura abaixo, usando os elementos básicos, como labels, caixa de texto, botões e containers transparentes para espaçar os elementos:

Web Dynpro - Layout

Web Dynpro – Layout

2 – Crie dois atributos no contexto da View Main, um para o Input_field e outro para exibir a mensagem no TextView:

Web Dynpro - Contexto - Atributos

Web Dynpro – Contexto – Atributos

3 – Crie um evento de clique para o botão e utilize o código abaixo para criar seu recurso javascript dinamicamente:

Web Dynpro - Botão - Evento

Web Dynpro – Botão – Evento

4 – Ative e teste sua aplicação, entre com um valor e a função Javascript do recurso criado dinamicamente chamado script.js será executada e seu resultado retornado em uma variável javascript chamada resultado que será recuperada e exibida na página Web.

Web Dynpro - Aplicação

Web Dynpro – Aplicação

Exemplo:

Neste exemplo utilizamos a classe CL_JAVA_SCRIPT para criar um arquivo Javascript que contem uma função e uma variável que retorna o resultado da função, utilizamos o evento de clique do botão para criar, compilar e executar a função Javascript e manipula-la através de código ABAP.

Abap

method ONACTIONONCLIQUEBOTAO .

* //Declara objetos javascript e scripts
  DATA: MSG       TYPE string,
        Get_valor TYPE string,
        JS_Objeto TYPE REF TO CL_JAVA_SCRIPT,
        MeuScript TYPE String.

* //Os códigos utilizando a instrução WRITE
* //Não tem efeito no Web Dynpro
* //você pode utilizar os trechos em um programa comum
* //para testar o seu javascript dinâmico.

* //Cria Script
  CONCATENATE
  ' function quadrado(x) { return x * x}; '
  ' var resultado = quadrado(mapa) '
  INTO MEUSCRIPT SEPARATED BY  CL_ABAP_CHAR_UTILITIES=>CR_LF.

* //Cria objeto javascript
  JS_OBJETO = CL_JAVA_SCRIPT=>CREATE( ).

* //Compila objeto javascript
  JS_OBJETO->COMPILE(
    exporting
      SCRIPT_NAME = 'script.js'
      SCRIPT      = MEUSCRIPT ).

* //Verifica compilação
  if JS_OBJETO->LAST_CONDITION_CODE <> 0.
    write: / 'Erro de compilação de script',
             JS_OBJETO->LAST_ERROR_MESSAGE.
  else.
    write / 'foi compilado com sucesso'.
  endif.

* //Recupera valor do usuário
  DATA lo_el_context TYPE REF TO if_wd_context_element.
  DATA ls_context TYPE wd_this->Element_context.
  DATA lv_valor TYPE wd_this->Element_context-valor.

* //Recupera elemento via lead selection
  lo_el_context = wd_context->get_element( ).

* // @TODO Caso queira validar o elemento vazio
  IF lo_el_context IS INITIAL.
  ENDIF.

* //Recupera o atributo
  lo_el_context->get_attribute(
    EXPORTING
      name =  `VALOR`
    IMPORTING
      value = lv_valor ).

* //Define um valor de variavel atravez do ABAP
  JS_OBJETO->SET( NAME = 'mapa' VALUE = lv_valor  ).

* //Executa Javascript
  JS_Objeto->EXECUTE(
                exporting SCRIPT_NAME = 'script.js' ).

* //Verifica se script foi executado
  if JS_OBJETO->LAST_CONDITION_CODE <> 0.
    write: / 'Erro na execução de script',
             JS_OBJETO->LAST_ERROR_MESSAGE.
  else.
    write / 'JavaScript foi executado com sucesso'.
  endif.

  skip.

* //Retorna valor de script
  GET_VALOR = JS_OBJETO->GET( NAME = 'resultado' ).

* //Define uma menssagem para o usuario
  DATA lv_msg TYPE wd_this->Element_context-msg.

* //Recupera o elemento via lead selection
  lo_el_context = wd_context->get_element( ).

* // @TODO - caso queira validar
  IF lo_el_context IS INITIAL.
  ENDIF.

* //Cria mensagem de retorno para o usuário
  CONCATENATE lv_valor ' * ' lv_valor ' = ' GET_VALOR INTO MSG.
  lv_msg = MSG.

* //Define valor do atributo
  lo_el_context->set_attribute(
    name =  `MSG`
    value = lv_msg ).

* //Verifica se o objeto retornou um valor
  if JS_OBJETO->LAST_CONDITION_CODE <> 0.
    write: / 'Erro em recuperar objeto javascript',
             JS_OBJETO->LAST_ERROR_MESSAGE.
  else.
    write: / 'Valor do objeto :', GET_VALOR.
  endif.

endmethod.

O Django possibilita trabalhar com Javascript de um modo automático e fácil, um destes modos é utilizando diretórios estáticos. Websites geralmente precisam servir arquivos adicionais, tais como imagens, JavaScript, ou CSS. Em Django, nos referimos a esses arquivos como arquivos estáticos e você pode configura-los facilmente utilizando algumas variáveis disponíveis no arquivo de configuração em um projeto Django. Um outro modo de utilizar Javascript e CSS em Django é utilizando os Form Assets que permitem utilizar uma combinação exata de CSS e JavaScript necessários para uma determinada página, dependendo dos widgets que estão em uso nessa página.

Static: https://docs.djangoproject.com/en/1.7/howto/static-files/

Form Assets: https://docs.djangoproject.com/en/1.7/topics/forms/media/

Usando uma Biblioteca Externa

1 – Crie um projeto e uma aplicação Django e configure o banco de dados MySQL, o diretório de templates e arquivos estáticos adequadamente para isto veja o código abaixo para o arquivo do projeto settings.py. Crie seu modelo, visão, template e form também de acordo os arquivos abaixo. Crie o arquivo meujsteste.js dentro das pastas estáticas que você também precisa criar chamadas assets/javascript:

Static - Javascript

Static – Javascript

2 – Verifique a estrutura do seu projeto para o template e o javascript, use a figura abaixo para referencia:

Django - diretórios

Django – diretórios

3 – Rode sua aplicação, no navegador clique com o botão direito e escolha exibir código fonte, verifique que os atributos do form e a variável estática do template formaram o HTML necessário para que os eventos javascript funcionem corretamente com o formulário Django:

Django - App - Código - Navegador

Django – App – Código – Navegador

4 – Teste a sua aplicação entrando e saindo do campo de texto para o nome e o evento javascript será disparado:

Django - Form - Javascript

Django – Form – Javascript

Exemplo:

Neste exemplo utilizamos Javascript através das configurações estáticas para imprimir na página os eventos de entrada e saída do mouse em um Widget CharField do Django utilizando atributos adicionais para criar o código HTML.

Python

settings.py

"""
Django settings for MeuDjango project.

For more information on this file, see
https://docs.djangoproject.com/en/1.6/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.6/ref/settings/
"""

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__))

# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.6/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '*0qj3@ul9n3k)%xbgxfqwwxm!+2f$1&)i*k1ft85(b-7kz)9q^'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

TEMPLATE_DEBUG = True

ALLOWED_HOSTS = []

# Application definition

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'meusite',
)

MIDDLEWARE_CLASSES = (
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',

)

ROOT_URLCONF = 'MeuDjango.urls'

WSGI_APPLICATION = 'MeuDjango.wsgi.application'

# Database
# https://docs.djangoproject.com/en/1.6/ref/settings/#databases

DATABASES = {
    'default': {
        'NAME': 'DAsandbox',
        'ENGINE': 'mysql.connector.django',
        'USER': 'root',
        'PASSWORD': 'minhasenha',
        'OPTIONS': {
          'autocommit': True,
        },
    }
}

# Internationalization
# https://docs.djangoproject.com/en/1.6/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.6/howto/static-files/

STATIC_URL = '/static/'

# Django - diretorios estaticos
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)

# Django - Templates
TEMPLATE_DIRS = (os.path.join(BASE_DIR, "static", "template"),)

model.py

from django.db import models

# Cria modelo
class Funcionario (models.Model):
    nome = models.CharField(max_length=30)
    sobrenome = models.CharField(max_length=50)
    cargo = models.CharField(max_length=50)
    salario = models.DecimalField(max_digits=19, decimal_places=10)

    # Define unicode para o Django Admin
    def __unicode__(self):
        return self.nome

view.py

from django.shortcuts import render, render_to_response, RequestContext
from django.http import HttpResponse

# Importa form
from meusite.forms import MeuForm

# Exibe View
def home(request):

    # Cria form
    form = MeuForm(request.POST or None)   

    # Valida e salva
    if form.is_valid():
        salvar = form.save(commit=False)
        salvar.save()
        return HttpResponse("Dados inseridos com sucesso!")

    # Chama Template
    return render_to_response("devaberto.html",
                              locals(),
                              context_instance = RequestContext(request))

template – devaberto.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src='{% static "assets/javascript/meujsteste.js" %}'></script>
	</head>
	<body>
		<div>
			<header>
				<h1>Desenvolvimento Aberto</h1>
				<h2>Django - Validations </h2>
			</header>
			<div>
				<p>
					Meu Formulário
				</p>
				<form method="post" action="">
					{% csrf_token %}
					{{ form.as_p }}
					<input type="submit" />
				</form>
			</div>
		</div>
		<!-- Div - logs do evento javascript -->
		<div id="meulog">  </div>

	</body>
</html>

forms.py

from  django import forms

# Importa modelo
from models import Funcionario

# Cria classe do form para o modelo
class MeuForm(forms.ModelForm):
    nome = forms.CharField(widget=forms.TextInput(attrs={'onmouseover':'meuMouseOver()', 'onmouseout':'meuMouseOut()'}))
    sobrenome = forms.CharField()
    cargo = forms.CharField()
    salario = forms.DecimalField()

    # Associa formulario ao modelo
    class Meta:
        model = Funcionario

    # Django Validations  - customizar
    def clean_sobrenome(self):
        snome = self.cleaned_data['sobrenome']
        if len(snome) <= 3:
            raise forms.ValidationError("Sobrenome precisa conter mais de 3 caracteres.")
        return snome

Javascript – meujsteste.js

// Desenvolvimento Aberto
// Javascript teste

function meuMouseOver() {
    var div = document.getElementById('meulog');

    div.innerHTML = div.innerHTML + 'Você entrou no campo nome ';
}

function meuMouseOut() {
    var div = document.getElementById('meulog');

    div.innerHTML = div.innerHTML + 'Você saiu do campo nome ';
}

O Rails possibilita trabalhar com Javascript de um modo automático e moderno, um  destes modos é o Asset Pipeline (pipeline ativo) que fornece uma estrutura para concatenar e minimizar ou comprimir JavaScript e CSS ativos. Ele também adiciona a capacidade de escrever esses ativos em outros idiomas e pré processadores como CoffeeScript, Sass e ERB. O pipeline ativo é ativado por padrão mas você pode desabilita-lo quando necessário. A outra forma de usar Javascript é utilizando Unobtrusive Javascript, o Rails usa uma técnica chamada “Unobtrusive JavaScript” para lidar/anexar com o JavaScript no DOM. Esta função é geralmente considerada uma das melhores práticas dentro da comunidade de desenvolvimento Frontend.

Asset Pipeline: http://guides.rubyonrails.org/asset_pipeline.html

Unobtrusive JavaScript: http://guides.rubyonrails.org/working_with_javascript_in_rails.html

Usando uma Biblioteca Externa

1 – Crie um projeto Rails para o banco de dados MySQL, e configure adequadamente, criando um modelo, uma visão e um controle de acordo com o código abaixo. Para utilizar o Javascript vamos usar o Asset Pipeline que já é habilitado por padrão no Rails. Abra a pasta App do seu projeto e em seguida a pasta Assets/Javascript, crie um pasta dentro dela chamada DAscripts:

Asset Pipeline - Dascripts

Asset Pipeline – Dascripts

2 – Crie um arquivo chamado meujsteste.js e utilize o respectivo código logo abaixo:

Javascript - MeujsTeste.js

Javascript – MeujsTeste.js

3 – Use os códigos abaixo, rode sua aplicação e no navegado exiba o código fonte. Você pode ver que o Rails criou automaticamente as tags de script HTML apontando para seu Asset para utilizarmos as funções javascript que definimos na visão:

Rails - Exibir Código do Navegador

Rails – Exibir Código do Navegador

4 – Você pode utilizar o mouse no campo de entrada para que o evento seja disparado e o javascript exiba um log da ação que o usuário está efetuando:

Ruby on Rails - App

Ruby on Rails – App

Exemplo:

Neste exemplo utilizamos Javascript através do Asset Pipeline para imprimir na página os eventos de entrada e saída do mouse em um componente Text_Field do Rails.

Modelo – modelo01.rb

class Modelo01 < ActiveRecord::Base
  
  # Cria validação
  validates  :nome, :sobrenome, :cargo, :salario, :presence => true
  
end

Visão – index.html.erb

<h1>Desenvolvimento Aberto</h1>
<h2>Ruby on Rails - Validate </h2>

<%= form_for @modelo, :url => {:action => :create} do  |cad|%>

<% if @modelo.errors.any?  %>
<h3>Erros: </h3>
<ul style="color:red">
	<% @modelo.errors.full_messages.each do |menssagem| %>
	<li>
		<%= menssagem %>
	</li>
	<% end %>
</ul>
<% end %>

<p>
	<%= cad.label :nome%>
	<br />
	<%= cad.text_field :nome , :onmouseover=>"meuMouseOver()", :onmouseout=>"meuMouseOut()" %>
</p>

<p>
	<%= cad.label :sobrenome%>
	<br />
	<%= cad.text_field :sobrenome, :size => "35x10"%>
</p>

<p>
	<%= cad.label :cargo%>
	<br />
	<%= cad.text_field :cargo, :size => "30x10"%>
</p>

<p>
	<%= cad.label :salario%>
	<br />
	<%= cad.text_field :salario, :size => "15x10"%>
</p>

<p>
	<%= cad.submit "Adicionar dados" %>
</p>

<% end %>

<!-- Div - logs do evento javascript -->
<div id="meulog"></div>

Controlador – meucontrole_controller.erb

class MeucontroleController < ApplicationController

  # Controladores
  def index
    @modelo  = Modelo01.new
  end

  def new
    @modelo  = Modelo01.new
  end

  # Cria registro
  def create
    @modelo = Modelo01.new(modelo_params)
    if @modelo.save

      # Você pode colocar uma menssagem aqui.
      render "index"
    else
      render "index"
    end
  end

  # Define parametros requeridos
  private

  def modelo_params
    params.require(:modelo01).permit(:nome, :sobrenome, :cargo, :salario)
  end

end

Javascript – meujsteste.js

// Desenvolvimento Aberto
// Javascript teste
 
function meuMouseOver() {
    var div = document.getElementById('meulog');
 
    div.innerHTML = div.innerHTML + 'Você entrou no campo nome ';
}
 
function meuMouseOut() {
    var div = document.getElementById('meulog');
 
    div.innerHTML = div.innerHTML + 'Você saiu do campo nome ';
}

ASP NET – Usando Javascript – C#

Publicado: 21 de janeiro de 2015 em C#, JavaScript

O Javascript se tornou uma parte muito importante da tecnologia ASP.NET, seus modelos oferecem aos desenvolvedores muitas maneiras de trabalhar corretamente com suas funções de JavaScript em páginas ASP.NET. Você pode utilizar desde as tradicionais tags de scripts para utilizar código Javascript em uma página ou utilizar classes que gerenciam scripts em uma aplicação ASP.NET.  Contudo as páginas ASP.NET sempre foram consideras lentas, principalmente em suas versões iniciais, basta procurar no Google por “lentidão ASP.NET” e encontrará uma enxurrada de artigos sobre o assunto. Com inúmeras reclamações de desempenho, o Javascript, Ajax, JQuery e outras bibliotecas foram incorporadas ao ASP.NET ao longo de sua evolução se tornando parte de seus Templates oficiais, deste modo a Microsoft também passou a incorporar o Javascript em sua biblioteca de linguagens e em suas mais recentes tecnologias (Windows Phone e App Store), criando sua própria documentação e contribuindo para a evolução da linguagem.

ASP.NET - Lento ???

ASP.NET – Lento ???

Javascript: https://msdn.microsoft.com/en-us/library/ie/yek4tbz0(v=vs.94).aspx

Por fim, afim de proporcionar uma tecnologia mais leve e dinâmica a Microsoft criou inúmeras melhorias e modificações sobre como os scripts podem ser utilizados na plataforma, criando assim novas classes e marcando velhas classes como obsoletas, como por exemplo Page.RegisterClientScriptBlock() foi substituído nas novas versões por ClientScriptManager.ClientScriptBlockRegistered() e por ai vai. A Microsoft também tornou o ASP.NET grátis e abriu seu código sob a licença Apache, para que seja mais competitivo diante de outras tecnologias Web, como o Ruby on Rails, referencia citada na pagina oficial do ASP.NET, que inspirou a versão ASP.NET com Pattern MVCUnobtrusive Javascript, o Rails também possui integração nativa com JQuery, Ajax e outros frameworks como CoffeeScript e NodeJS. Deste modo utilizar o ASP.NET para desenvolver aplicações Web se faz importante que o desenvolvedor sempre esteja atualizado e antenado com as novas modificações da plataforma.

Web Application - Template - Javascript

Web Application – Template – Javascript

Alguns arquivos Javascript de um template são usados pelo Visual Studio e outros pela própria aplicação, para uma introdução sobre como estes arquivos são utilizado você pode consultar esta pagina:

ASP.NET Javascript: http://www.asp.net/web-forms/overview/client-script,-jquery,-and-ajax

Usando uma Biblioteca Externa

1 – Crie um projeto web do tipo C# Empty e crie uma pagina Web Forms chamada default.aspx. Vamos começar de um modo simples utilizando apenas um arquivo Javascript externo, entretanto vamos utilizar validações usando os componentes visuais e precisamos desabilitar as novas validações Javascript Unobtrusive que são o novo padrão para o ASP.NET faremos isto modificando o arquivo Web.config.

Crie uma nova pasta chamada DAScripts e dentro crie um novo arquivo Javascript chamado MeujsTeste.js:

Javascript

Javascript

2 – Na tag Head de sua página crie uma nova tag Script e utilize os recursos do editor para localizar seu arquivo:

Visual Studio - Pick URL

Visual Studio – Pick URL

3 – Selecione seu arquivo Javascript:

MeujsTeste.js

MeujsTeste.js

4 – Utilize os códigos abaixo para cada arquivo e rode sua aplicação :

Javascript - Eventos

Javascript – Eventos

Exemplo:

Neste exemplo utilizamos Javascript para imprimir na página os eventos de entrada e saída do mouse em um componente TextBox do WebForms.

default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="DAWebApp001._default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style2 {
            width: 14%;
        }

        .auto-style3 {
            height: 23px;
        }

        .auto-style5 {
            width: 248px;
        }

        .auto-style6 {
            width: 54%;
        }

        .auto-style8 {
            height: 23px;
            width: 54%;
        }

        .auto-style9 {
            height: 23px;
            width: 248px;
        }
    </style>

  <script type="text/javascript" src="DAScripts/MeujsTeste.js"></script>
</head>
<body>
    <h1>Desenvolvimento Aberto - ASP.NET</h1>
    <h2>Validação de Controles</h2>
    <form id="form1" runat="server">
        <div>

            <table style="width: 100%;">
                <tr>
                    <td class="auto-style3" colspan="2">
                        <asp:Label ID="LabelMenssagem" runat="server" Text="Entre com os dados abaixo:"></asp:Label>
                    </td>
                    <td class="auto-style8"></td>
                </tr>
                <tr>
                    <td class="auto-style2">
                        <asp:Label ID="Label2" runat="server" Text="Nome:"></asp:Label>
                    </td>
                    <td class="auto-style5">
                        <asp:TextBox ID="TextBox1nome" onMouseOver="meuMouseOver()" onMouseOut="meuMouseOut()" runat="server" Width="142px" ></asp:TextBox>
                    </td>
                    <td class="auto-style6">
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1nome" ErrorMessage="Nome é obrigatório." ForeColor="Red" ValidationGroup="AllValidator"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style3">
                        <asp:Label ID="Label3" runat="server" Text="Sobrenome:"></asp:Label>
                    </td>
                    <td class="auto-style9">
                        <asp:TextBox ID="TextBox2sobrenome" runat="server" Width="240px"></asp:TextBox>
                    </td>
                    <td class="auto-style8">
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2sobrenome" ErrorMessage="Sobrenome é obrigatório." ForeColor="Red" ValidationGroup="AllValidator"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style3">
                        <asp:Label ID="Label4" runat="server" Text="Cargo:"></asp:Label>
                    </td>
                    <td class="auto-style9">
                        <asp:TextBox ID="TextBox3cargo" runat="server" Width="186px"></asp:TextBox>
                    </td>
                    <td class="auto-style8">
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox3cargo" ErrorMessage="Cargo é obrigatório." ForeColor="Red" ValidationGroup="AllValidator"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style3">
                        <asp:Label ID="Label5" runat="server" Text="Salário:"></asp:Label>
                    </td>
                    <td class="auto-style9">
                        <asp:TextBox ID="TextBox4salario" runat="server"></asp:TextBox>
                    </td>
                    <td class="auto-style8">
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="TextBox4salario" ErrorMessage="Salário é obrigatório. " ForeColor="Red" ValidationGroup="AllValidator"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style3">&nbsp;</td>
                    <td class="auto-style9">&nbsp;</td>
                    <td class="auto-style8">&nbsp;</td>
                </tr>
                <tr>
                    <td class="auto-style3">
                        <asp:Button ID="Button1enviardados" runat="server" Text="Enviar Dados" OnClick="Button1enviardados_Click" ValidationGroup="AllValidator" />
                    </td>
                    <td class="auto-style9">&nbsp;</td>
                    <td class="auto-style8">&nbsp;</td>
                </tr>
            </table>
            <!-- Div - logs do evento javascript -->
            <div id="meulog"></div>
        </div>
    </form>
</body>
</html>

default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace DAWebApp001
{
    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1enviardados_Click(object sender, EventArgs e)
        {
            if (Page.IsValid)
            {
                // Envia menssagem quando todos os campos requeridos
                // forem preenchidos tornando a página valida.
                LabelMenssagem.ForeColor = System.Drawing.Color.Green;
                LabelMenssagem.Text = "Dados enviados com sucesso.";
            }

        }
    }
}

MeujsTeste.js

// Desenvolvimento Aberto
// Javascript teste

function meuMouseOver() {
    var div = document.getElementById('meulog');

    div.innerHTML = div.innerHTML + 'Você entrou no campo nome ';
}

function meuMouseOut() {
    var div = document.getElementById('meulog');

    div.innerHTML = div.innerHTML + 'Você saiu do campo nome ';
}

Web.config

<?xml version="1.0" encoding="utf-8"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" />
  </system.web>

  <appSettings>
    <add key="ValidationSettings:UnobtrusiveValidationMode" value="None"/>
  </appSettings>

</configuration>

JSF – Usando Javascript – Java

Publicado: 20 de janeiro de 2015 em Java, JavaScript

O h:outputScript apresenta um elemento HTML do tipo script como um javascript. Está tag é usada para adicionar javascript de um arquivo externo em uma página JSF. Você pode colocar arquivos de script em um diretório de recursos na raiz da sua aplicação web. Subdiretórios deste diretório são chamados de bibliotecas, você pode criar todas as bibliotecas como quiser, como por exemplo uma biblioteca de imagens, de javascripts ou arquivos css.

h:outputScript: https://javaserverfaces.java.net/docs/2.2/vdldocs/facelets/h/outputScript.html

Usando uma Biblioteca Externa

1 – Crie um projeto web dinâmico JSF e na pasta WebContent crie uma pasta chamada resources e dentro dela as pastas, images, js e css:

JSF - WebContent

JSF – WebContent

2 – Na pasta js crie um novo arquivo javascript de acordo com o código abaixo:

JSF - Javascript

JSF – Javascript

3 – Na pagina xhtml na tag Head utilize o outputScript e alimente os parâmetros para o nome do arquivo e sua pasta no qual é a biblioteca javascript está localizada, crie um elemento DIV no final da pagina no qual o Javacript adicionará o resultado dos eventos disparados e por fim adicione os eventos no elemento de texto do campo nome:

JSF - Aplicação

JSF – Aplicação

Exemplo:

Neste exemplo utilizamos um arquivo javascript externo para criar a funcionalidade para os evento de entrada e saída do mouse sobre um elemento de entrada de texto.

Java

Managed Bean – Participante

package org.desenvolvimento.aberto;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

// Define decoradores
@ManagedBean(name = "Participante")
@RequestScoped
public class Participante {

	// Define atributos privados
	private long id;
	private String nome;
	private String sobrenome;
	private String cargo;
	private Double salario;

	// Metodos Getter e Setter
	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getNome() {
		return nome;
	}

	public void setNome(String nome) {
		this.nome = nome;
	}

	public String getSobrenome() {
		return sobrenome;
	}

	public void setSobrenome(String sobrenome) {
		this.sobrenome = sobrenome;
	}

	public String getCargo() {
		return cargo;
	}

	public void setCargo(String cargo) {
		this.cargo = cargo;
	}

	public Double getSalario() {
		return salario;
	}

	public void setSalario(Double salario) {
		this.salario = salario;
	}

	// Método de Ação (clique do botão)
	public String Acao() {
		System.out.println("Clique do botão");
		System.out.println("Nome: " + this.getNome() + "\n " +
						   "Sobrenome: " + this.getSobrenome() + "\n " +
						   "Cargo: " + this.getCargo() + "\n " +
						   "Salário: " + this.getSalario() + "\n ");
		return null;
	}
}

Index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<f:loadBundle basename="resources.application" var="msg" />

<head>
<title><h:outputText value="#{msg.welcomeTitle}" /></title>
<h:outputScript name="testejs.js" library="js"></h:outputScript>
</head>

<h:body>
	<h2>JSF - Desenvolvimento Aberto - Managed Beans -</h2>
	<h3>
		<h:outputText id="lnome" value="Validação - Cadastros:" />
	</h3>
	<h:form>
		<h:panelGrid columns="3" cellpadding="2px">
			<h:outputText id="lnome" value="Nome:" />
			<h:inputText id="tnome" value="#{Participante.nome}" size="30"
				required="true" label="Nome" onmouseover="meuMouseOver()"
				onmouseout="meuMouseOut()" />
			<h:message for="tnome" style="color:red" />

			<h:outputText id="lsobrenome" value="Sobrenome:" />
			<h:inputText id="tsobrenome" value="#{Participante.sobrenome}"
				size="40" required="true" label="Sobrenome" />
			<h:message for="tsobrenome" style="color:red" />

			<h:outputText id="lcargo" value="Cargo" />
			<h:inputText id="tcargo" value="#{Participante.cargo}" size="25"
				required="true" label="Cargo" />
			<h:message for="tcargo" style="color:red" />

			<h:outputText id="lsalario" value="Salário" />
			<h:inputText id="tsalario" value="#{Participante.salario}"
				required="true" label="Salário"
				requiredMessage="#{msg['requerido.salario']}"
				validatorMessage="#{msg['validar.salario']}">

				<f:validateDoubleRange minimum="788.00" maximum="9999.99" />
			</h:inputText>

			<h:message for="tsalario" style="color:red" />

		</h:panelGrid>
		<br />
		<h:commandButton id="botao" action="#{Participante.Acao}"
			value="Enviar Dados" />

		<div id="meulog"></div>
	</h:form>
</h:body>
</html>

Javascript – testejs001.js

function meuMouseOver()
{
	var div = document.getElementById('meulog');

	div.innerHTML = div.innerHTML + 'Você entrou no campo nome ';
}

function meuMouseOut()
{
	var div = document.getElementById('meulog');

	div.innerHTML = div.innerHTML + 'Você saiu do campo nome ';
}