MooTools - Filtragem de entrada
MooTools pode filtrar a entrada do usuário e pode reconhecer facilmente o tipo de entrada. Os tipos básicos de entrada são Número e String.
Funções numéricas
Vamos discutir alguns métodos que verificarão se um valor de entrada é um número ou não. Esses métodos também o ajudarão a manipular a entrada do número.
toInt ()
Este método converte qualquer valor de entrada em um número inteiro. Você pode chamá-lo em uma variável e ele tentará fornecer o número inteiro regular de tudo o que a variável contém.
Vejamos um exemplo que projeta uma página da web que contém uma caixa de texto e um botão chamado TO INT. O botão verificará e retornará o valor que você inseriu na caixa de texto como um inteiro real. Se o valor não for um inteiro, ele retornará oNaNsímbolo. Dê uma olhada no código a seguir.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var toIntDemo = function(){
var input = $('input').get('value');
var number = input.toInt();
alert ('Value is : ' + number);
}
window.addEvent('domready', function() {
$('toint').addEvent('click', toIntDemo);
});
</script>
</head>
<body>
Enter some value: <input type = "text" id = "input" />
<input type = "button" id = "toint" value = "TO INT"/>
</body>
</html>Você receberá a seguinte saída -
Output
Experimente valores diferentes e converta-os em números inteiros reais.
tipo de()
Este método examina o valor de uma variável que você passa e retorna o tipo desse valor.
Vamos dar um exemplo em que projetamos uma página da Web e verificamos se o valor de entrada é Número, String ou Booleano. Dê uma olhada no código a seguir.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var checkType = function(){
var input = $('input').get('value');
var int_input = input.toInt();
if(typeOf(int_input) != 'number'){
if(input == 'false' || input == 'true'){
alert("Variable type is : Boolean"+" - and value is: "+input);
} else{
alert("Variable type is : "+typeof(input)+" - and value is: "+input);
}
} else{
alert("Variable type is : "+typeof(int_input)+"
- and value is:"+int_input);
}
}
window.addEvent('domready', function() {
$('checktype').addEvent('click', checkType);
});
</script>
</head>
<body>
Enter some value: <input type = "text" id = "input" />
<input type = "button" id = "checktype" value = "CHECK TYPE"/>
</body>
</html>Você receberá a seguinte saída -
Output
Experimente os diferentes valores e verifique o tipo.
limite()
O método limit () é usado para definir os valores dos limites inferior e superior de um determinado número. O número não deve exceder o valor do limite superior. Se exceder, o número é alterado para o valor do limite superior. Este processo é igual ao limite inferior também.
Tomemos um exemplo que fornece uma caixa de texto para inserir um valor e um botão para verificar o limite desse valor. O limite padrão que usamos no exemplo é de 0 a 255. Dê uma olhada no código a seguir.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var checkLimit = function(){
var input = $('input').get('value');
var number = input.toInt();
var limited_number = number.limit(0, 255);
alert("Number is : " + limited_number);
}
window.addEvent('domready', function() {
$('check_limit').addEvent('click', checkLimit);
});
</script>
</head>
<body>
Enter some value: <input type = "text" id = "input" />
<input type = "button" id = "check_limit" value = "Check Limit (0 to 255)"/>
</body>
</html>Você receberá a seguinte saída -
Output
Experimente números diferentes para verificar o limite.
rgbToHex ()
O método rgbToHex () é converter os valores vermelho, verde e azul para o valor hexadecimal. Esta função lida com números e pertence à coleção Array. Vamos dar um exemplo em que iremos projetar uma página da web para inserir os valores individuais para Vermelho, Verde e Azul. Fornece um botão para converter todos os três em valores hexadecimais. Dê uma olhada no código a seguir.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var rgbToHexa_Demo = function(){
var red = $('red').get('value');
var red_value = red.toInt();
var green = $('green').get('value');
var green_value = green.toInt();
var blue = $('blue').get('value');
var blue_value = blue.toInt();
var color = [red_value, green_value, blue_value].rgbToHex();
alert(" Hexa color is : " + color);
}
window.addEvent('domready', function() {
$('rgbtohex').addEvent('click', rgbToHexa_Demo);
});
</script>
</head>
<body>
Red Value: <input type = "text" id = "red" /><br/><br/>
Green Value: <input type = "text" id = "green" /><br/><br/>
Blue Value: <input type = "text" id = "blue" /><br/><br/>
<input type = "button" id = "rgbtohex" value = "RGB To HEX"/>
</body>
</html>Você receberá a seguinte saída -
Output
Experimente diferentes valores de vermelho, verde e azul e encontre os valores hexadecimais.
Funções de String
Vamos discutir alguns métodos da classe String que podem manipular o valor String de entrada. Antes de prosseguir, vamos dar uma olhada na seguinte sintaxe de como chamar uma função de string.
Corda
var my_variable = "Heres some text";
var result_of_function = my_variable.someStringFunction();Ou,
var result_of_function = "Heres some text".someStringFunction();aparar()
Este método é usado para remover os espaços em branco da posição frontal e da posição final de uma determinada string. Não toca em nenhum espaço em branco dentro da corda. Dê uma olhada no código a seguir.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var input_str = " This is tutorialspoint.com ";
document.writeln("<pre>Before trim String is : |-"+input_str+"-|</pre>");
var trim_string = input_str.trim();
document.writeln("<pre>After trim String is : |-"+trim_string+"-|</pre>");
});
</script>
</head>
<body>
</body>
</html>Você receberá a seguinte saída -
Output
Nas caixas de alerta acima, você pode encontrar as diferenças em String antes de chamar o método trim () e depois de chamar o método trim ().
limpar \ limpo()
Este método é usado para remover todos os espaços em branco de uma determinada string e manter um único espaço entre as palavras. Dê uma olhada no código a seguir.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var input_str = " This is tutorialspoint.com ";
document.writeln("<pre>Before clean String is : |-"+input_str+"-|</pre>");
var trim_string = input_str.clean();
document.writeln("<pre>After clean String is : |-"+trim_string+"-|</pre>");
});
</script>
</head>
<body>
</body>
</html>Você receberá a seguinte saída -
Output
contém ()
Este método é usado para pesquisar uma substring em uma determinada string. Se a string fornecida contém a string de pesquisa, ele retorna verdadeiro, caso contrário, retorna falso. Dê uma olhada no código a seguir.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var containsString = function(){
var input_string = "Hai this is tutorialspoint";
var search_string = $('input').get('value');
var string_contains = input_string.contains(search_string);
alert("contains : " + string_contains);
}
window.addEvent('domready', function() {
$('contains').addEvent('click', containsString);
});
</script>
</head>
<body>
Given String : <p>Hai this is tutorialspoint</p>
Enter search string: <input type = "text" id = "input" />
<input type = "button" id = "contains" value = "Search String"/>
</body>
</html>Você receberá a seguinte saída -
Output
substituto()
Este método é usado para inserir a string de entrada na string principal. Dê uma olhada no código a seguir.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var containsString = function(){
var input_string = "One is {one}, Two is {two}, Three is {three}";
var one_str = $('one').get('value');
var two_str = $('two').get('value');
var three_str = $('three').get('value');
var substitution_string = {
one : one_str,
two : two_str,
three : three_str
}
var new_string = input_string.substitute(substitution_string);
document.write("NEW STRING IS : " + new_string);
}
window.addEvent('domready', function() {
$('contains').addEvent('click', containsString);
});
</script>
</head>
<body>
Given String : <p>One is {one}, Two {two}, Three is {three}</p>
one String : <input type = "text" id = "one" /><br/><br/>
two String : <input type = "text" id = "two" /><br/><br/>
three String : <input type = "text" id = "three" /><br/><br/>
<input type = "button" id = "contains" value = "Substitute String"/>
</body>
</html>Você receberá a seguinte saída -
Output
Insira o texto nas três caixas de texto e clique no botão substituir string, então você verá a string de substituição.