<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" ></script>
<script>
$(document).ready(function(){
var dato1=document.getElementById('dato1');
var dato2=document.getElementById('dato2');
var dato3=document.getElementById('dato3');
var convierte=document.getElementById('convierte');
convierte.addEventListener('click', convertir);
});
function convertir(){
dato = Array.from('abcdefghijklmnñopqrstuvwxyz');
var texto1 = Array.from(dato1.value);
var texto2 = new Array();
var mueve = parseInt(dato2.value);
var letras = texto1.length;
let i = 0;
do {
let rec = texto1[i];
if (texto1[i] == ' '){
texto2.push(' ');
};
var indice = dato.indexOf(rec);
var nuevo = indice + mueve
if (nuevo > 26){
nuevo = nuevo - 27;
}
texto2.push(dato[nuevo]);
i = i + 1;
} while (i < letras);
dato3.value = texto2.join('');
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>mover letras</title>
</head>
<body>
<div>
<br>
<p>Frase </p><input type="text" id="dato1" value="a">
<br>
<br>
<p>Movimiento </p><input type="number" id="dato2" value="0">
<br>
<br>
<p>Nueva Frase </p><input type="text" id="dato3" value="">
<br>
<br>
<input type="button" id="convierte" value="Convertir">
<br>
</div>
</body>
</html>