Xwork's Blog: Javascript

Mostrando las entradas con la etiqueta Javascript. Mostrar todas las entradas

Vamos a programar #83 - Expresiones regulares en javascript.

Hola de nuevo a todos, el día de hoy vamos a ver un poco más sobre expresiones regulares, pero ahora usando javscript. Hace poco mientras hacia un programa en javascript, me preguntaron por una forma automática de reemplazar los hashtags de twitter con un vinculo a la dirección correspondiente; es decir; si tenemos #anipoke, que se cree un vinculo a https://twitter.com/hashtag/anipoke (usando #anipoke cómo texto). La respuesta simple, es si, si se puede, pero para poder hacerlo, vamos a emplear expresiones regulares.

El trabajo de hoy es mas o menos entender cómo es que podemos usarlas en Javascript, la mayor parte de las expresiones que usamos en C#; por ejemplo; se pueden usar en javascript así que para probarlas, podemos usar un programa cómo el que sigue.

<!DOCTYPE html>

<html>
	<meta charset="UTF-8">
	<Title>Prueba de expresiones regulares</title>
	<head>
	<style>

	.found
	{
		color: gray;
		background-color: yellow;
	}
	</style>

	<script type="text/javascript">
		function FindRegex() {
			var Texto = document.getElementById('MAIN').innerHTML;
			var Patron =  new RegExp(document.getElementById('InputRegex').value,"g");
			var Result = Texto.match(Patron);
			var Words = [];
			var Ret = "";
			for (var x = 0; x <  Result.length; x++)
			{
				if (Words.includes(Result[x]) == false) Words.push(Result[x]);
			}

			for(var i = 0; i < Words.length; i++){
				var NewExp = new RegExp("\\b"+Words[i]+"\\b", "g");
				Ret = Texto.replace(NewExp, '<span class=\"found\">' + Words[i] + '</span>');
				Texto = Ret;
			}
			document.getElementById('demo').innerHTML = Ret;
		}

	</script>

	</head>
	<body>
		<div>
		<form>
			<span>Expresion regular para buscar</span>
			<br />
			<input  id="InputRegex" type="text"></input><br />
			<input  type="button" onclick="FindRegex()" value="Prueba" /><br />
		</form>

		</div>
		<div id="MAIN">Gente humano persona gente hombre mujer familia amigo conocido colega pareja esposo matrimonio amor Partes del Cuerpo Humano cuerpo pie, pierna talón espinilla
		rodilla muslo cabeza cara boca labios diente nariz bigote cabello oreja cerebro estómago brazo codo hombro uña mano muñeca palma dedo trasero, culo, cola abdomen
		hígado músculo cuello corazón mente alma+ cintura cadera corazón espalda sangre carne piel hueso pecho resfriado diarrea enfermedad Familia abuela abuelo esposa
		esposo hermana hermano hija hijo madre nieta nieto padre prima primo tía tío Vida criatura especie ser vida naturaleza campo bosque selva, jungla desierto costa playa
		río laguna, lago mar, océano cerro, monte, montaña Animales animal perro gato vaca cerdo caballo, yegua oveja mono ratón, rata tigre conejo dragón ciervo rana león jirafa
		elefante pájaro gallina gorrión cuervo águila halcón pez camarón langosta sardina atún calamar pulpo insecto bicho mariposa polilla saltamontes araña mosca
		mosquito cucaracha caracol babosa lombriz marisco molusco lagarto serpiente cocodrilo Plantas plantas pasto / césped flor fruta semilla árbol hoja raíz tallo hongo
		ciruela pino bambú nuez almendra castaña Cosechas arroz avena cebada trigo vegetal, verdura patatas, papas judías, guisantes, porotos rábano zanahoria manzana naranja plátano pera castaño
		durazno tomate sandía Alimentos alimento comida bebida carne gaseosa Espacio tiempo calendario edad época, era fecha segundo minuto hora día semana entre semana
		fin de semana mes año ayer hoy mañana amanecer mediodía tarde anochecer noche lunes martes miércoles jueves viernes sábado domingo ambiente espacio entorno
		sol luna estrella clima despejado nublado lluvia nieve viento trueno rayo tifón tormenta cielo Direcciones y Posiciones este oeste sur norte derecha izquierda
		arriba, encima abajo, debajo adelante, delante atrás, detrás centro, medio encima alrededor diagonal enfrente cerca lejos adentro, dentro afuera, fuera aquí acá ahí allá allí exterior exterior Materiales
		agua caliente calor frío fresco hielo vapor fuego gas aire, atmósfera tierra, suelo metal, metálico hierro cobre oro plata plomo sal barro, lodo arcilla yeso
		fumar tabaco opio marihuana Pesos y Medidas peso metro litro gramo kilo centi mili Sociedad sociedad comunidad reunión encuentro calidad estructura administración organización
		asociación empresa equipo obligación derecho permiso prohibición autoridad cargo campaña club comisión congreso constitución gobierno democracia dictadura presidente ministro director parlamentario, congresista, senador, diputado
		representante capital ciudad pueblo villa estado provincia departamento Economía economía consumo demanda compañía comercio producto transacción almacén hotel fábrica cuenta dinero
		billete vuelto, cambio máquina expendedora boleto, billete precio, tarifa Objetos hechos por el ser humano Hogar escritorio silla mesa cama puerta dormitorio habitación cuarto oficina panel puerta ventana entrada hogar
		casa apartamento, departamento edificio construcción elevador, ascensor escalera cámara Herramientas aparato cámara aguja clavo hilo cuerda, cordel, cordón bolsillo bolso bolsa paraguas parasol pomo llave
		trancar arma escultura cuadro grabado energía electricidad corriente Ropa ropa prenda manga solapa, cuello botón cremallera cinturón zapato gafas Transportes transporte, transporte público, transporte privado tránsito, tráfico
		vía férrea tren, ferrocarril subterráneo, metropolitano camino vía ruta calle carretera autopista avenida estación, parada avión aeropuerto automóvil, coche, auto bus, autobús, ómnibus Lenguaje número alfabeto raíz, origen, fuente papel carta
		periódico, diario diccionario computadora, ordenador idioma extranjero japonés inglés chino alemán español francés Colores color rojo naranja, anaranjado amarillo verde azul violeta blanco negro rosa, rosado
		marrón, café gris Actividades cultura autor arte cine dibujo pintura música religión dios artículo educación escuela instituto colegio universidad clase curso estudio
		formación análisis investigación conocimiento idea información dato forma estilo figura elemento comunicación expresión periodismo ciencia aritmética historia geografía educación física deporte carrera
		competición, competencia documento informe información noticia necesidad falta significado cáracter personalidad pensamiento memoria recuerdo deseo alegria tristeza enojo placer, éxtasis empatía interés aburrimiento
		cansancio sorpresa susto miedo, temor ejemplo ayuda favor apoyo búsqueda duda pregunta respuesta cuestión solicitud decisión elección consejo sugerencia orden control sistema
		trabajo empleo profesión esfuerzo Números cero uno dos tres cuatro cinco seis siete ocho nueve diez cien mil millón Espacio cosa
		lugar aspecto contenido cantidad área volumen ancho, anchura posición dirección tamaño largo, longitud alto, altura aumento reducción crecimiento fondo frente Sustantivos abstractos esto eso aquello
		cual secreto automático formalidad presente pasado futuro acción actividad acto acuerdo actitud capacidad concepto condición caso conjunto grupo creación destrucción origen
		destino objetivo, meta función intento logro efecto resultado éxito fracaso causa consecuencia beneficio perjuicio ataque defensa conflicto guerra carácter característica crisis cambio
		desarrollo progreso avance retroceso mejora6 deterioro comienzo, inicio transcurso fin, final, cabo etapa fase grado corte interrupción espera diferencia similitud sensación dolor sentido conciencia
		percepción fuerza potencia existencia experiencia Adjetivos Adjetivos de calidad bueno, buen malo superior inferior central lateral frontal trasero, posterior cierto falso mayor menor absoluto relativo
		caro barato viejo joven nuevo cada cualquier dado actual reciente capaz cuyo, cuya fácil, simple, sencillo difícil, complicado estricto serio general particular común especial raro, extraño
		fuerte débil correcto, acertado incorrecto, desacertado contrario, opuesto, inverso diferente, distinto parecido, similar otro diverso Adjetivos de forma alto bajo arriba abajo, debajo adelante, delante atrás, detrás gran grande pequeño amplio angosto
		compacto delgado grueso Adjetivos sensoriales ligero pesado suave firme flexible duro blando caluroso frío fresco delicioso, apetitoso horrible dulce picante salado amargo anterior
		posterior cercano lejano Sentimiento feliz triste solo solitario contento tranquilo calmo agitado ansioso interesado aburrido cansado sorprenido asustado, atemorizado doloroso picante, ardiente apestoso, maloliente
		Verbos Auxiliares ser estar haber Existencia aparecer desaparecer existir cambiar crecer vivir nacer morir romper Movimiento ir venir volver hacer empezar, comenzar, iniciar
		terminar, acabar abandonar, dejar hacer partir lanzar sujetar golpear patear golpear señalar apuñalar morder clavar levantar pegar moverse bailar andar saltar caer volar
		nadar sentarse correr arrojar lanzar coger agarrar poner alcanzar acercar alejar Sensaciones sentir ver oír, escuchar tocar oler percibir Comunicación comunicarse afirmar
		negar decir hablar callar escribir leer Emociones amar querer desear odiar, detestar triste llorar reír enfadado admirar, alabar, elogiar alegrarse, encantado consolar interesarse aburrirse cansarse
		sorprenderse asustarse, atemorizarse Actividades analizar pensar dormir cantar morder comer beber acordar afectar generar añadir, agregar mejorar empeorar avanzar retroceder ayudar complicar reunirse
		entrevistar abrir, desenvolver jugar recoger levantar tomar vender tener faltar dar recibir romper doblar cortar comprar vender llevar puesto cambiar intercambiar sustituir, reemplazar cerrar
		buscar encontrar obtener, conseguir crear creer entrar quedarse salir abandonar dejar comunicar considerar comparar evaluar decidir intentar evitar construir destruir deber poder
		conocer entender, comprender atar saber cansarse salir trabajar separar, dividir, partir descansar dormir romper aceptar rechazar descartar acompañar pedir, solicitar pretender proponer sugerir usar hacer
		fabricar arreglar, reparar explicar mostrar probar, intentar comprobar, verificar variar esperar necesitar, precisar significar Adverbios Adverbios de cantidad más menos muy mucho poco algo casi aproximadamente exactamente
		bastante demasiado sólo tan tanto todo nada cómo cuándo cuánto cuál, cuáles dónde Adverbios de calidad bien mal mejor peor regular despacio deprisa tal
		como aprisa adrede claro exacto obvio ante contra inclusive además únicamente especialmente incluso viceversa siquiera finalmente Adverbios temporales antes anteriormente ahora ya
		todavía aún mientras durante después luego pronto tarde temprano ayer anoche hoy mañana enseguida ahora de nuevo siempre Adverbios de posibilidad siempre nunca jamás
		también tampoco quizá(s) acaso tal vez Otros adverbios aun incluso sólo incluso sobre solamente hasta sin embargo pero por ejemplo sólo, solamente justo apenas a en
		desde entre hasta ante demasiado también Pronombres adjetivales este, esta ese, esa aquel, aquella algún, alguna alguien algo ambos Interjecciones sí no Conjunciones si tal vez entonces
		cuando, si mientras hacia para de, del con sin así asimismo también aunque y o Locuciones acerca de a lo mejor a pesar de por favor gracias  </div><br/>
		<div id="demo"></div>
	</body>
</html>

Por ahora solo vamos a probar algunas expresiones. Al igual que en c#, en el código anterior hay una lista de las 1000 palabras mas comunes y vamos a probar todos los ejemplos que previamente ya habíamos usado.

\ba\w+\b
\ba\w+n\b
\b(\w+[xyz]|\w+[xyz]\w+|[xyz]\w+)\b
\b\w\w\w\w\w\w\w\w\w\w\w\w\w\w\w\b
\b\w{15}\b
\b\w{10,}\b

Hay algunos detalles que hay que "corregir", por ejemplo si buscamos palabras con seis letras veremos que "música" no se resalta, pero eso no quiere decir que no nuestra expresión regular este mal, si no que simplemente está incompleta, y la razón principal es que la letra ú (u con acento) no es considerada una letra "normal" dentro del estándar ascii por lo que simplemente lo considera un carácter NO alfanumérico. La solución para eso es sencilla, pero eso será en el próximo post.

Y bien, por ahora es todo, cómo de costumbre puedes bajar el código de mi dropbox para que lo pruebes y lo edites según lo necesites. En el siguiente post veremos cómo manejar los acentos (y otro tipo de letras) e implementaremos la solución a nuestro problema inicial.

Los leo luego.

Seguir Leyendo

12/08/2019 03:50:00 p.m. expresiones regulares , Javascript , programacion

Vamos a programar #56 - Los números de Munchhausen (ver. Javascript)

Hola de nuevo a todos, el día de hoy vamos a continuar con la prueba de la conjetura de los números de Munchhausen.

En el post anterior vimos cuales son las reglas, por lo que ahora pasaremos directamente al código javscript para ver las diferencias entre la versión de C# y esta.

El código.

El código en javascript para probar los números de Munchhausen es el siguiente:

<html>
	<head>
		<style type="text/css">
		.h1M
		{
			font-size: 16px;
		}
		.formVigenere{
			font: 95% Arial, Helvetica, sans-serif;
			max-width: 400px;
			margin: 10px auto;
			padding: 16px;
			background: #F9F9F9;
		}
		.textareaM
		{
			width: 100%;
			height: 150px;
			padding: 2px 5px;
			box-sizing: border-box;
			border: 2px solid #999;
			border-radius: 4px;
			resize: none;
			-webkit-transition-duration: 0.4s; /* Safari */
			transition-duration: 0.4s;
		}

		.textareaM:focus
		{
			width: 100%;
			height: 150px;
			padding: 2px 5px;
			box-sizing: border-box;
			border: 2px solid #00BB00;
			border-radius: 4px;
			resize: none;
		}

		.TextM
		{
			width: 100%;
			box-sizing: border-box;
			border: 2px solid #999;
			border-radius: 4px;
		}

		.ButtonM
		{
		width: 100%;
			background-color: #009900;
			border: none;
			color: white;
			padding: 15px 32px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			-webkit-transition-duration: 0.4s; /* Safari */
			transition-duration: 0.4s;
		}

		.ButtonM:hover
		{
		width: 100%;
			background-color: #4CAF50;
			border: none;
			color: white;
			padding: 15px 32px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
		}
		</style>
		<script type="text/javascript">
		function NumberToDigits(Number){
			var Out = [];
			for(var i = 0; i < Number.length; i++){
				var CodeChar = Number.charCodeAt(i);
					Out.push(CodeChar - 48);
			}
			return Out;
		}

		function IsMunchhausen(Number){
			var Result = 0;
			var Digits = NumberToDigits(Number);
			for(var i = 0; i < Digits.length; i++){
				Result += Math.pow(Digits[i], Digits[i]);
			}
			if (Number == Result.toString()){
				return true;
			}
			else{
				return false;
			}
		}
		function TestNumbers(){
			document.getElementById('Result').value = "";
			BeginNumber = document.getElementById('MinNumber').value;
			EndNumber = document.getElementById('MaxNumber').value;
			SHowAll = document.getElementById('ShowAll').checked;
			for (var i = BeginNumber; i <= EndNumber; i++){
				if (IsMunchhausen(i.toString()))
					document.getElementById('Result').value += "La conjetura se cumple para el número " + i + "\n";
				else if (SHowAll)
					document.getElementById('Result').value += "El número " + i + " no cumple la conjetura\n";
			}
		}
		 </script>
	</head>
	<body>
	Utilidad para probar la conjetura de Munchhausen usando javascript.
	<form class="formVigenere">
		<span class="h1M">Numero de donde empezar:</span>
		<br />
		<input class="TextM" id="MinNumber" value = "1" type="text"></input><br />
		<span class="h1M">Numero hasta donde llegar</span><br /><br/>
		<input class="TextM" id="MaxNumber" value = "5000" type="text" /><br />
		<br />
		<input class="ButtonM" id="Calcula" onclick="TestNumbers()" type="button" value="Calcular" /><br />
		<br />
		<input type="checkbox" id = "ShowAll" value="Bike">Mostrar Todo<br><br>
		<span class="h1M">Resultado</span><br/>
		<textarea class="textareaM" id="Result" rows="5"></textarea><br/><br/>
	</form>
	</body>
<html>

El código anterior solo consta de tres funcione en esta ocasión en la función "NumberToDigits()" al convertir el número de entrada a los dígitos que lo forman, directamente hace la resta de 48 para poder usar el número directamente. Para poder recuperar los valores de cada control, hacemos uso de la función "document.getElementById".

Cómo de costumbre, el código lo dejo en mi dropbox para que lo pruebes, al ser el mismo "concepto" que la versión de C#, no requiere una explicación mayor. La semana que viene, veremos la versión para android.

Los leo luego.

Seguir Leyendo

8/12/2018 01:55:00 p.m. CSS , HTML , Javascript , munchhausen , programacion

Vamos a programar #45 - Código Bacon (ver. Javascript).

Hola de nuevo a todos, el día de hoy vamos a ver cómo crear una aplicación en javascript que sirva para aplicar el código Bacon en un texto.

En el post anterior hicimos una versión en C# para escritorio, el día de hoy vamos a realizar una versión para la Web.

El código.

El codigo en javascript que sirve para cifrar una frase usando el código Bacon es el siguiente:

<html>
	<head>
	<title>Bacon Cipher</title>
	<style type="text/css">
		.FormBacon{
			font: 95% Arial, Helvetica, sans-serif;
			max-width: 600px;
			margin: 10px auto;
			padding: 16px;
			background: #F9F9F9;
		}
		.FormBacon h1{
			font-size: 140%;
			text-align: center;
		}
		.h1c
		{
			font-size: 16px;
		}
		.textareaV
		{
			width: 100%;
			height: 150px;
			padding: 2px 5px;
			box-sizing: border-box;
			border: 2px solid #999;
			border-radius: 4px;
			resize: none;
			-webkit-transition-duration: 0.4s; /* Safari */
			transition-duration: 0.4s;
		}

		.textareaV:focus
		{
			width: 100%;
			height: 150px;
			padding: 2px 5px;
			box-sizing: border-box;
			border: 2px solid #26c6da;
			border-radius: 4px;
			resize: none;
		}

		.TextV
		{
			width: 100%;
			box-sizing: border-box;
			border: 2px solid #999;
			border-radius: 4px;
		}

		.ButtonV
		{
		width: 100%;
			background-color: #26c6da;
			border: none;
			color: white;
			padding: 15px 32px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			-webkit-transition-duration: 0.4s; /* Safari */
			transition-duration: 0.4s;
		}

		.ButtonV:hover
		{
		width: 100%;
			background-color: #30e0e0;
			border: none;
			color: white;
			padding: 15px 32px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
		}
		</style>
		<script type="text/javascript">
		var Values =["AAAAA", "AAAAB", "AAABA",
			"AAABB", "AABAA", "AABAB", "AABBA", "AABBB", "ABAAA", "ABAAA",
			"ABAAB", "ABABA", "ABABB", "ABBAA", "ABBAB", "ABBBA", "ABBBB",
			"BAAAA", "BAAAB", "BAABA", "BAABB", "BAABB", "BABAA", "BABAB",
			"BABBA", "BABBB"];
		function PhraseToArray(Text){
			var Out = [];
			for(var i = 0; i < Text.length; i++){
				var CodeChar = Text.charCodeAt(i);
				Out.push(CodeChar);
			}
			return Out;
		}
		function CharToBaconianCode(){
		//debugger;
			Input = document.getElementById('InputText').value;
			Input = Input.toUpperCase();
			var Letras = PhraseToArray(Input);
			var OutValue = "";
			for (var X = 0; X < Letras.length; X++)
			{
				if (Letras[X] < 91 && Letras[X] > 64)
				{
					OutValue += Values[Letras[X] - 65];// + " ";
				}
			}
			document.getElementById('PreResult').value = OutValue;
			return OutValue;
		}
		function IsLower(Code)
		{
			if (Code > 96 && Code < 123)
				return true;
			else
				return false;
		}
		function FinalCipher()
		{
		//debugger;
			var PreCipher = document.getElementById('PreResult').value;
			var Phrase = document.getElementById('Phrase2').value;
			if (PreCipher.length != Phrase.length)
			{
				alert("Las longitudes del pre-cifrado y la frase para insertarlo no coinciden");
				return "Error";
			}
			var PreCipherChars = PhraseToArray(PreCipher);
			var PhraseChars = PhraseToArray(Phrase);
			var FinalResult = "";//string
			for (var Y = 0; Y < PhraseChars.length; Y++)
			{
				if (PreCipherChars[Y] == 65)
				{
					if (IsLower(PhraseChars[Y]))
						FinalResult += String.fromCharCode(PhraseChars[Y]);
					else
						FinalResult += String.fromCharCode(PhraseChars[Y] + 32);
				}
				else
				{
					if (!IsLower(PhraseChars[Y]))
						FinalResult += String.fromCharCode(PhraseChars[Y]);
					else
						FinalResult += String.fromCharCode(PhraseChars[Y] - 32);
				}
			}
			document.getElementById('Result').value = FinalResult;
		}
		</script>
	</head>
	<body>
		<div class="FormBacon">
			<br />
			<h1>Código Bacon</h1><br />
			<br />
			<form>
				<span class="h1c">Frase a encriptar:</span>
				<br />
				<input class="TextV" id="InputText" type="text"></input><br />
				<br />
				<input class="ButtonV" id="Encrypt" onclick="CharToBaconianCode()" type="button" value="Pre-cifrar" /><br />
				<br/>
				<span class"h1c">Resultado del Pre-cifrado</span><br/>
				<br/>
				<textarea class="textareaV" id="PreResult" rows="5"></textarea><br/>
				<br/>
				<span class="h1c">Frase para insertar</span><br /><br/>
				<input class="TextV" id="Phrase2" type="text" /><br />
				<br />
				<input class="ButtonV" id="UnEncrypt" onclick="FinalCipher()" type="button" value="Cifrar" /><br />
				<br />
				<span class="h1c">Resultado</span>
				<textarea class="textareaV" id="Result" rows="5"></textarea><br/><br/>
			</form>
		</div>
	</body>
</html>

La aplicación consiste de cinco partes; de las cuales cuatro son funciones y una más, es una variable que se usará para almacenar las constantes del cifrado
Primero definimos una nueva variable, será una matriz (que ya dije para que se usa). Luego creamos una funcion que reemplazará a la función de C# "string.toArray()", esta función es "PhraseToArray()"; recibe un parámetro que será el texto que queremos convertir a una matriz de números, hay que recordar que en el caso de la función en C#, cuando la llamamos, esta devuelve una matriz del tipo "char", en este caso, cómo vamos a usar el valor ASCII de esa letra, directamente guardamos en la matriz el valor resultante de llamar a la función "charCodeAt()", si hacemos memoria, está función, lo que hace es obtener el código ASCII de la letra (o símbolo) que se le pasa cómo argumento, entonces, solamente hacemos un ciclo "for" que recorra cada letra desde el inicio al final del texto que se ingreso cómo parámetro en la función "PhraseToArray()". Finalmente, está función devuelve una matriz con números que representa el código ASCII de cada letra.

La siguiente función es "CharToBaconianCode()", cómo su nombre lo dice, está función lo que hace, es convertir cada letra en su equivalente en el código Bacon. La única diferencia con la función de C#, es que esta no recibe parámetros, lo que hace para obtener el texto sobre el cual trabajara, es usar la función "document.getElementById('')" y obtener el valor de la caja de texto. El resto del proceso es similar, solamente que no hace conversiones de "char" a "byte", porque hay que recordar que los valores de la función "PhraseToArray()" ya están en un valor numérico.
La función "IsLower()" no sufre ningún cambio.
Finalmente la función FinalCipher() al igual que la función "CharToBaconianCode()" no sufre mayor cambio con respecto a la función de C#.
Y bien, por ahora es todo, cómo te habrás dado cuenta, todo funciona perfecto cuando vamos al derecho, pero no al revés, por absurdo que parezca, olvide escribir el código para realizar el proceso contrario, pero no te preocupes, en breve agregaré las partes faltantes en esta versión y en la versión de C#, además, la siguiente semana, la versión para android vendrá con la función para hacer el proceso inverso. Cómo siempre, la descarga del código la puedes hacer desde mi dropbox.

Por ahora es todo, los leo luego.

Seguir Leyendo

1/07/2018 02:40:00 p.m. aprende , Código Bacon , Javascript , programacion

Vamos a programar #34 - Depurando código de javascript.

Hola de nuevo a todos, el día de hoy vamos a ver una parte esencial para cualquier persona que se dedica a programar.

Cuando se crea un código nuevo, este siempre estará propenso a errores, está más que garantizado, que sin importar que tanto tiempo lleves en la programación, siempre surgirán errores. Algunos de ellos serán tan simples cómo: "olvide una coma", otros no tan obvios y solo surgirán al momento que se ejecute el código.
Para estos caso, en la mayoría de entornos de desarrollo siempre dispondremos de una herramienta que se encargara de dejarnos ver que es lo que está pasando en determinado punto del programa.

Suponiendo que queremos ver que está pasando en determinado punto del programa, en javascript; existe la palabra reservada "debugger", cuando la ejecución del programa se encuentra con esa palabra, la ejecución se detendrá y mostrará en la consola los datos correspondientes a las variables.

Para que la ejecución del depurador ocurra, el modo desarrollado debe de estar activado, para hacerlo en Google Chrome, basta con oprimir la tecla F12 (y se abrirá un ventana incrustada cómo en la primer imagen). En lo personal, prefiero usar Firefox, para acceder al modo desarrollador, basta con hacer clic en menú>Desarrollador > Depurador. Para el caso de Opera, debes de hacer clic en menú>Desarrollador>Herramientas de desarrollo.

En la siguiente imagen se muestra las partes importantes de la ventana de depuración:

El area con un recuadro rojo (1), son los controles que no servirán para controlar el flujo del código, existen cuatro botones y cada uno hace en orden de aparición lo siguiente:

Continua con el flujo normal del programa; es decir: ejecuta el programa hasta salir de la función o parte de código en la cual se invocó el depurador.
Las siguientes sirven para avanzar de "uno por uno", cada vez que se oprima, el programa avanzará una linea en el programa, si al momento de hacerlo se encuentra con la llamada a una función, el cursor se desplazará hasta ella y continuará la ejecución en la parte donde empieza, si se continua, avanzará sobre las lineas de la función y cuando acabe, volverá a donde se encontraba pero avanzando a la siguiente linea después de la ejecución de la función. Ademas al hacer esto, en la parte enmarcada en verde (2) todas las variables que se creen o cambien se mostraran ahí.
El último botón ejecutara hasta el final del bloque de código y al igual que el anterior, si hay cambios en las variables, se mostrarán en el panel Variables.

Todo esto sirve para revisar paso a paso lo que sucede en cada variable al momento de que se realiza la ejecución. Supongamos que un días llegas ebrio y decides agregar unas cuantas lineas de código, cuando recuperes tu sobriedad, probablemente puedas identificar la mayor parte del código que agregaste, pero si por alguna razón, una linea pasa desapercibida; pueden ocurrir muchos dolores de cabeza (y no lo digo cómo anécdota).

Cuando los errores se detectan, que es lo que se debe de hacer? usualmente los errores que se encuentren, se mostraran en un apartado llamado "consola web"

Por cada error habrá una pequeña descripción acerca de este, en el caso de la imagen, Nos dice que hay un error en la linea 183; nos dice que al tratar de obtener un elemento por su ID, este nos devolvió "NULL", eso puede significar que el objeto que estamos tratando de obtener no existe, pero Nosotros sabemos que si está, al revisar la linea vemos que el código es: "document.getElementById('ResulT').value = Salida;", al revisar los objetos que creamos en el formulario vemos que no hay ningun elemento que tenga esa ID y el mas cercano es "Result". Entonces eso significa que cometimos un error al escribir el ID del objeto que queríamos y en su lugar, mandamos a llamar a otro que no existe. Al cambiar el ID por el correcto, el error desaparece.

Con esas herramientas resultará mas sencilla la tarea de eliminar bug's de nuestro código.
Por el momento es todo, en próximos post, veremos cómo es el proceso de depuración en otras plataformas.

Los leo luego.

Seguir Leyendo

4/06/2017 01:08:00 p.m. basic html , CSS , depuracion , how to , Javascript , programacion

Vamos a programar #33 - Calculadora de Vigenère ver2.0.

Hola de nuevo a todos, el día de hoy vamos a ver una actualización para la calculadora de Vigenere que previamente ya habíamos hecho.
La primera versión de esta cumplía con su trabajo, pero no estaba totalmente hecha, no era capaz de interpretar símbolos que no fueran letras. El día de hoy vamos a agregar el código necesario para que funcione.

El código.

El código javascript para la calculadora de Vigenere es el siguiente:

function AsciiToA1(Char1)
{
	if (IsLower(Char1)){
	 Char1 -= 32;	
	}
	if (IsEnie(Char1)){
	return 15;
	}else if(Char1-64 < 15){
		return(Char1-64);
	}
	else if(Char1-64 >= 15 && Char1-64 < 28){
		return(Char1-63);
	}
}

function IsLetter(c){
	return IsUpper(c) || IsLower(c);
}

function IsEnie(Char2){
	if(Char2 == 209 || Char2 == 241){
		return true;
	}else{
		return false;
	}

}

function IsUpper(Char3){
	if((Char3 >= 65 && Char3 <= 90) || (Char3 == 209)){
		return true;
	}else{
		return false;
	}
}

function IsLower(Char4){
	if((Char4 >= 97 && Char4 <= 122) || (Char4 == 241)){
		return true;
	}else{
		return false;
	}
}

function IsA1Char(Char5){
	if (Char5 > 27){
		return false;
	}else{
		return true;
	}
}
function Encriptar(ModeEnc)
{
	debugger;
	var GetPhrase = document.getElementById('InputText').value;
	var GetPass = document.getElementById('PassWord').value;
	var Codes = [];
	if(GetPhrase.length < 1 || GetPass.length < 1)
	{
		alert('La frase/contraseña no puede estar en blanco')
		return;
	}
	var PassData = PhraseToArray(GetPass);
	var PhraseData = PhraseToArray(GetPhrase);
	var SpaceCount = 0;
	if (ModeEnc == true){
		for(var i = 0; i < PhraseData.length; i++){
			if(IsA1Char(PhraseData[i]) == false){
				Codes.push(PhraseData[i]);
				SpaceCount += 1;
			}else if(IsA1Char(PhraseData[i]) == true){
				Codes.push((PassData[(i - SpaceCount) % PassData.length] + PhraseData[i]) % 27);
			}
		}
	}else{
		for(var i = 0; i < PhraseData.length; i++)	{
			if(IsA1Char(PhraseData[i]) == false){
				Codes.push(PhraseData[i]);
				SpaceCount += 1;
			}else{
				var Value = PhraseData[i] - PassData[(i - SpaceCount) % PassData.length];
				if (Value < 1){
					Value += 27;
				}
			Codes.push(Value % 27);
			}
		}
	}
	document.getElementById('Result').value = Codes;
	return Codes;
}
function RebuildString(Codigos)
{
	var Salida = ""
	for(var i = 0; i < Codigos.length; i++)
	{
		if (IsA1Char(Codigos[i]) == false){
			Salida += String.fromCharCode(Codigos[i]);
		}else{
			if (Codigos[i] == 15 )
				Salida += String.fromCharCode(209);
			if (Codigos[i] == 0)
				Salida += String.fromCharCode(90);
			if(Codigos[i] < 15 && Codigos [i] > 0)
				Salida += String.fromCharCode(Codigos[i]+64);
			if(Codigos[i] > 15 && Codigos[i] < 28)
				Salida += String.fromCharCode(Codigos[i]+63);
		}
	}
	document.getElementById('Result').value = Salida;
}

function PhraseToArray(Text){
	var Out = [];
	for(var i = 0; i < Text.length; i++){
		var CodeChar = Text.charCodeAt(i);
		if(IsLetter(CodeChar) == true){
			Out.push(AsciiToA1(CodeChar));
		}else{
			Out.push(CodeChar);
		}
	}
	return Out;
}

Cómo verás, se han agregado varias funciones, la primera de ellas es "AsciiToA1". Está cómo su nombre lo indica, servirá para que el carácter que se le pase cómo parámetro, lo convierta a su equivalente A1Z27. la función de vuelve un valor entre 1 y 27 que representa la posición de la letra en el alfabeto.

La función "IsLetter" sirve para determinar si el parámetro usado es una letra, para ello comprobara si al llamar a las funciones "IsUpper" ó "IsLower" devuelven true, si al llamar a esas funciones y cualquiera de las dos devuelve un valor false, podemos asumir que el numero de caracter que se pasó, es equivalente a una letra.

La función "IsEnie" sirve para determinar si el parámetro usado es la letra Ñ, ya se mayúscula o minuscula. Hay que recordar que en el standar Ascii extendido, la letra Ñ no es continua a la letra N, en cambio esta hasta la posición 209 para la "Ñ" y 241 para "ñ", cuando se pasan esos números cómo parámetro devuelve true, en caso contrario false.

Las funciones "IsUpper" e "IsLower", sirven para determinar si la letra que se pasó cómo parámetro es mayúscula o minúscula (respectivamente), si el parámetro está dentro del rango 65~90 o es 209, la función "IsUpper" devuelve true. Para la función "IsLower", cuando el parámetro está en el rango 97~122 o es 241, devuelve true, en caso contrario devuelve false.

Finalmente la función "IsA1Char" sirve para determinar si el parámetro que se le pasa, esta dentro del rango 1~27, si es así, devuelve true, en caso contrario devuelve false. Todo esto se usa porque cuando se hace el cálculo, los valores se trabajan de la forma A1Z27, entonces, cualquier valor que se encuentre fuera de este rango, será un símbolo y no se debe de tomar en cuenta.

Además los estilos CSS se mejoraron un poco para hacerlo un poco más vistoso.

.h1v
{
    font-size: 16px;
}
.formVigenere{
    font: 95% Arial, Helvetica, sans-serif;
    max-width: 400px;
    margin: 10px auto;
    padding: 16px;
    background: #F9F9F9;
}
.textareaV
{
    width: 100%;
    height: 150px;
    padding: 2px 5px;
    box-sizing: border-box;
    border: 2px solid #999;
    border-radius: 4px;
    resize: none;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.textareaV:focus
{
    width: 100%;
    height: 150px;
    padding: 2px 5px;
    box-sizing: border-box;
    border: 2px solid #00BB00;
    border-radius: 4px;
    resize: none;
}

.TextV
{
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #999;
    border-radius: 4px;
}

.ButtonV
{
width: 100%;
    background-color: #009900;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.ButtonV:hover
{
width: 100%;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

Con el uso de estas funciones, la calculadora se ha vuelto más funcional y con el código CSS se ve mejor. El resultado cómo de costumbre lo puedes bajar de mi dropbox.

Por ahora es todo. Los leo luego.

Seguir Leyendo

3/30/2017 04:08:00 p.m. A1Z27 , basic html , cifrado , cifrado vigenere , CSS , estilos css , HTML , Javascript , programacion

Vamos a programar #21 - Formateando código para HTML.

Hola de nuevo a todos. El día de hoy traigo una aplicación muy corta. Cómo todos sabrán, la mayor parte de este blog trata sobre cosas de programación, por lo que es muy común que publique código fuente en variedad de lenguajes.
Pero al momento de publicar algo, surge un pequeño problema, al copiar el código del editor al blog, este pierde todo el formato. Actualmente uso unos scripts que permiten darle color a la sintaxis, pero cosas como la indentación, se pierden. En lo personal, siempre me gusta ver código que este visiblemente bien, es decir; que se distinga en "donde estás". Un indicador muy claro, es la sangría. Si vez que todo está a la misma distancia, resulta fácil ver que todo es parte de un "if" o parte de un "while".
Para solucionar todo esto y poder formatear el código de una forma más rapida, decidí hacer una aplicación que se encargue del trabajo sucio.

La aplicación es realmente simple, de hecho solo son 10 lineas de código, es una versión beta, y lo único que hace es convertir todos los caracteres que no están admitidos en el html (como "< o >" ).
Dentro las funciones que nos proporciona el api de .NET existe a siguiente función:

RtBResultCode.Text = WebUtility.HtmlEncode(RTBInputCode.Text);

Está función se encuentra en el espacio System.Net; y hace exactamente lo que queremos, formatear todo el código para que lo podamos usar en el lenguaje HTML. Pero bueno si solo quisiera hacer eso no sería una solución a la indentación, de hecho si revisamos el siguiente código (que viene de este blog)

<resources>
<string name="app_name">Calculador de resistencias</string>
 <string-array name="Colores1">
 <item>Negro</item>
 <item>cafe</item>
 <item>Rojo</item>
 <item>Naranja</item>
 <item>Amarillo</item>
 <item>Verde</item>
 <item>Azul</item>
 <item>Violeta</item>
 <item>Gris</item>
 <item>Blanco</item>
 </string-array>
 <string-array name="Colores2">
 <item>Dorado</item>
 <item>Plata</item>
 </string-array>
</resources>

Pero eso no es lo que quiero, si nos damos cuenta todas las tabulaciones han sido reemplazadas por espacios que visualmente son más pequeños.
En cambio cuan usamos el código producido por el programa; lucirá de la siguiente forma:

<resources>
<string name="app_name">Calculador de resistencias</string>
 <string-array name="Colores1">
  <item>Negro</item>
  <item>cafe</item>
  <item>Rojo</item>
  <item>Naranja</item>
  <item>Amarillo</item>
  <item>Verde</item>
  <item>Azul</item>
  <item>Violeta</item>
  <item>Gris</item>
  <item>Blanco</item>
 </string-array>
 <string-array name="Colores2">
  <item>Dorado</item>
  <item>Plata</item>
 </string-array>
</resources>

Por ahora el código solo hace eso, pero si por ejemplo el código tiene espacios en blanco, no obtendremos un resultado diferente al del primer caso.

En la siguiente versión vamos implementar funciones que se encarguen de hacer todo de forma automatica. Si lo que quieres es publicar código, lo ,mejor es que luzca, que al momento de echar un vistazo rápido, puedas ver que al menos está bien estructurado.
Además lo dejo así porque ando un poco corto de tiempo, pero espero ya no estarlo para la próxima semana. Como siempre, el programa lo puedes bajar de dropbox, en cuanto lo actualice haré el siguiente Post.

Por ahora es todo. Los leo luego.

Seguir Leyendo

11/10/2016 08:51:00 p.m. android , basic html , csharp , CSS , estilos css , how to , HTML , Javascript , MatLab , programacion

Vamos a programar #20 - SlideShow en JavaScript + CSS

Hola de nuevo a todos, hace algunos días contacté con alguien que me encontré en Internet con la intención de hacernos publicidad mutuamente, a lo mejor ya viste el banner que puse en la esquina superior derecha.

EL problema es que no encontraba una forma de acomodar todas la cosas que ya había en la pagina principal, ¿Cómo debería acomodar esto?, la opción más sencilla era insertar todas las cosas una tras otra y esperar a que la pagina no se extendiera tanto. Si se pone una imagen diferente para cada página "amiga", si pongo al menos 3, ocuparía un buen espacio.

Para solucionar este problema decidí hacer un pequeño script que se encargue de intercambiar imágenes, así en lugar de poner 4 o 5 imágenes y desplazar todo 600 pixeles hacia abajo, puedo poner n numero de imágenes en un solo espacio de 320 * 110 (o el tamaño que sea la imagen más grande).

Para nuestro ejemplo tomemos las siguientes imágenes:

Al inicio estaba buscando una forma de hacerlo totalmente en javascript, pero alguien me dijo: "Si usas CSS3, es más sencillo". Entonces decidí hacer uso de ambas para lograrlo.

El código CSS.

El código CSS que vamos a usar es el siguiente:

@keyframes FadeFromRight{
 from{
  right:-150px;
  opacity:0
 }
 to{
  right:0;
  opacity:1}
 }

.FadeImage{
 position:relative;
 -webkit-animation:FadeFromRight 0.5s;
 animation:FadeFromRight 0.5s
}
img{border-style:none}

Primeramente creamos una animación a la que llamamos "FadeFromRight", lo que va a hacer es crear el objeto desde la posición -150px con una opacidad del 0 (Transparente) y hará una animación en la que se moverá hasta posición 0 y ademas, su nivel de opacidad sera de 1 (solido).

Después creamos una clase llamada ".FadeImage", en la cual ponemos que la animación que haga la imagen (o lo que sea que haga uso de esta clase), durará 0.5s.

Finalmente definimos un estilo para la etiqueta IMG.

El código HTML.

Luego insertaremos las Imágenes que vayamos a usar, Es preferible que todas estén dentro de una capa, luego a cada una de las imágenes que conformaran el Slide Show, les pondremos el mismo nombre de clase, suponiendo que las imágenes que vayamos a usar se llaman Ban1, Ban2, Ban3 y Ban4, el código html para insertarlas luciria como el siguiente:

<div>
 <img class="Banners FadeImage" src = "BAN1.jpg"/>
 <img class="Banners FadeImage" src = "BAN2.jpg"/>
 <img class="Banners FadeImage" src = "BAN3.jpg"/>
 <img class="Banners FadeImage" src = "BAN4.jpg"/>
</div>

Con el Código anterior estamos indicando que las 4 imágenes pertenecen a la clase "Banners" y también a la clase "FadeImage", con ello tomará los estilos que definimos antes para "FadeImage" y "IMG".

El Código JavaScript.

Para lograr el efecto que deseamos, hay que modificar los estilos, javascript nos permite hacerlo sin tanto problema. El código que nos permite cambiar los estilo de las imágenes es el siguiente:

var myIndex = 0;
ChangeImage();

function ChangeImage() {
 var i;
 var x = document.getElementsByClassName("Banners");
 for (i = 0; i < x.length; i++) {
  x[i].style.display = "none";
 }
 myIndex++;
 if (myIndex > x.length) {myIndex = 1}
 x[myIndex-1].style.display = "block";
 setTimeout(ChangeImage, 5000);
}

El código anterior recorrerá todos los elementos que estén en la clase "Banners" y a todos le asignara el estilo "none" que hará que los elementos no se vean, luego comprobará que el valor iterador esté en lo limites de la cantidad de elementos que la clase "Banners" posea, después al final, se establece que la función "ChangeImage" se ejecutará cada 5000ms (5 segundos).

Tras implementar el código anterior obtendremos algo como lo siguiente (Si solo ves cuatro imágenes fijas, prueba actualizar tu navegador):

No está demás recordar que para que esto funcione, necesitamos un navegador no tan viejo, ademas de que se debe de hacer referencia a las imágenes usando su dirección absoluta. Si quieres hacer uso del código así tal cual, debes de asegurarte primero de que las imágenes están en el mismo directorio y que se llaman Ban1, Ban2, etc.

Cómo siempre, el código completo lo puedes descargar desde mi dropbox, recuerda que puedes usarlo, modificarlo o hacerle lo que quieras, si te resulta útil, no olvides mencionar que lo encontraste en el blog de Xwork.

Para terminar. Si no has visitado la página Gent0.com. ¡Qué estás esperando?!, hay buen información acerca de está distro de linux.

Bien, por ahora es todo. Los leo luego.

P,D. H071?? (solo para los que saben).

Seguir Leyendo

11/03/2016 07:17:00 p.m. aprende , basic html , CSS , DIY , Estilos , HTML , Javascript , programacion

Vamos a programar #3 - Estructura básica de una página HTML

Hola de nuevo a todos, el día de hoy voy a resolver dudas que les surgieron a muchos cuando hicimos la calculadora de resistencias. Es cierto que mi intención no era enseñarte a programar en HTML, pero muchos me preguntaron por MP como es que funcionaba el código completo, por que las etiquetas X iban antes que las Y, etc.

Por eso el día de hoy les voy a mostrar solo un poquito cómo es que esta estructurado el HTML.

Es posible crear una página web muy sencilla en pocos pasos ya que todas tienen una estructura básica que seguir.

Todas las paginas utilizan "etiquetas" y las mas importantes son:

<HTML> <HEAD> <TITLE> <BODY>

Estas se organizan de forma jerárquica, en donde la mas alta es <HTML>. Una pagina debe de empezar con esta etiqueta y terminar con su respectivo cierre </HTML> La siguiente etiqueta es: <HEAD>, Esta etiqueta es el encabezado de la pagina, aquí se puede incluir las características de la pagina, añadir los estilos CSS, el título y funciones de javascript, vbscript, etc. Ademas dentro de esta etiqueta se debe de incluir la etiqueta <TITLE>, esta sirve para cambiar el titulo que se muestra en la barra de titulo del navegador o como titulo de la pestaña. Hay que recordar que todas las etiquetas deben de llevar su respectivo cierre, en este caso como usamos la etiqueta <TITLE>, debemos de escribir el texto que queremos usar y de inmediato poner el cierre </TITLE>. Una vez que agregamos todo lo que necesitamos en el encabezado, también cerraremos el encabezado con </HEAD>.

Después viene la parte del cuerpo, en esta parte se incluirán los elementos que se mostraran al usuario; es decir: Texto, imágenes, vídeos, formularios, etc. La etiqueta <BODY> se usa para indicar que ahí es el comienzo del cuerpo. Dentro de esta etiqueta se pueden poner la mayoría de los elementos que componen a una pagina web: imágenes <IMG></IMG>, formularios <FORM></FORM>, vinculos <A></A>, etc. finalmente se debe de ponder la etiqueta de cierre </BODY> y generalmente no hay nada que agragar despues del cierre del cuerpo asi que tambien hay que cerrar la etiqueta principal </HTML> y con esto se entiende que la pagina ha llegado a su fin.

Algo que es importante resaltar es que el HTML no reconoce minúsculas de mayúsculas, así que es valido; por ejemplo; poner <BODY> que <Body> o <body> y tampoco se toma en cuenta los espacios por lo que se pude poner:

<TITLE>Hola mundo</TITLE>

o

<title>
Hola mundo
</title>

En ambos casos le estamos indicando que el titulo de la pagina es "Hola mundo", solo que en el primer ejemplo todo está escrito en la misma linea. Por recomendación deberías de usar el primer ejemplo, este ahorra datos porque en el no se incluyen los saltos de línea.
Y ya para terminar un ejemplo del programa mas básico de todos.

<HTML>
<HEAD>
<TITLE>Hola Mundo</TITLE>
</HEAD>
<BODY>
Esta cuenta como una pagina funcional que muestra hola mundo.
</BODY>
</HTMl>

La única función del código anterior es mostrar "Esta cuenta como una pagina funcional que muestra hola mundo.", para probarlo en un navegador puedes escribir todo el código anterior en un bloc de notas y guardarlo en archivo con extensión html ("Hello.html" es un nombre por ejemplo). Después lo abres en un navegador de Internet y el resultado deberá de ser similar al siguiente:

Y con esto ya sabrás como es que funciona de forma básica el HTML. ya después veremos cuestiones un poco mas avanzadas. Por lo mientras puedes ver como funciona el código que hicimos antes y comparar con lo que acabas de leer.

Los leo luego.

Seguir Leyendo

7/02/2016 09:14:00 p.m. aprende , basic html , CSS , DIY , how to , HTML , Javascript , programacion

Vamos a programar #2

Terminando lo anterior.

El día de hoy vamos a terminar de implementar la calculadora de resistencias, en la entrada anterior puse el código que se encarga de hacer el "cálculo" ademas del código de lo que vendría siendo la interfaz. Quedo pendiente la parte de como implementarlo.

Cómo dije antes esto no es un curso para aprender a programar; así que la creación de la ultima parte del código supongo que ya muchos lo implementaron pero si no, no te preocupes en la entrada de hoy terminaremos de implementar todo el código para que sea funcional y estético.

Luce aburrido, Lo sé.

Un formulario con "estilo"

Para empezar vamos a usar CSS3 para darle un poco de vida al formulario.

Para nuestra calculador usamos los componentes FORM , BUTTON, SELECT LABEL H1. A cada uno hay que darle un poco de estilo y para eso usaremos CSS.
Primero empezaremos con toda el area del formulario, para eso agregamos el siguiente código:

form {
font: 95% Arial, Helvetica, sans-serif;
max-width: 400px;
margin: 10px auto;
padding: 16px;
background: #F9F9F9;
}

Con esto le estamos indicando que nosotros queremos que todo el cuerpo del formulario tenga la fuente ARIAL (Helvetica o sans-serif en su defecto), que el ancho máximo será de 400 píxeles, tendrá un marco de 10 píxeles, un padding de 16 píxeles y que todo el fondo tendrá un color grisáceo (#F9F9F9).
Si lo aplicamos y guardamos lucirá así:

Despues le aplicaremos estilo a las listas, para eso utilizaremos el siguiente código:

select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}

Con el código anterior le estamos diciendo que todas las listas SELECT deberan de tener las siguientes características:

Deberan de tener el 100% del ancho del formulario que las contenga.
Tendran padding de16 píxeles.
No tendran borde.
Las esquinas estaran redondeadas con un radio de 4 píxeles
El color de fondo sera gris claro (#F1F1F1).

Tras implementar el código, el formulario deberá de tener un aspecto similar al siguiente:

Ahora hay que aplicar el estilo a los botones y para eso utilizaremos el siguiente codigo:

input[type="button"],
input[type="reset"]
{ box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 3%;
background: #43D1AF;
border-bottom: 2px solid #30C29E;
border-top-style: none;
border-right-style: none;
border-left-style: none;
color: #fff;
}

El código anterior hace lo siguiente:

Hace que el tamaño total del boton sea el especificado, pero que en incluya la suma de el ancho de los bordes y el padding que se aplique, asi que si se modifica el valor de estos no afectara en el tamaño final.
El boton medira 100% del ancho del formulario.
Tendra 3% del tamaño como padding.
Será de color verde (#43D1AF)
La linea del borde inferior sera de color verde oscuro (#30C29E) y medirá 2 píxeles.
La linea del borde superior no tendre ningun estilo/color.
La linea del borde derecho no tendre ningun estilo/color.
La linea del borde izquierdo no tendre ningun estilo/color.
Las letras serán de color blanco.

Tras implementar el codigo el formulario lucirá asi:

Si quieres definir un estilo para la etiqueta <H1> puedes hacerlo.
El resultado final lo puedes descargar Aquí

Por ahora es todo, si hay algo en lo que tengan dudas, no duden en preguntar.
Los leo luego.

Seguir Leyendo

6/29/2016 02:24:00 p.m. codigo de colores para resistencias , CSS , DIY , electronica basica , Estlos para formularios , HTML , Javascript , programacion , Resistencias

Vamos a programar

Recientemente publiqué una aplicación escrita en Javascript cuya única función era la de obtener el valor de una resistencia basado en los colores de las franjas que esta posea. El día de hoy te voy a mostrar como programar una similar.

El resultado es el mismo código que el de la entrada anterior pero con un look diferente.

**!!Esto no es un tutorial para aprender a programar en Javascript o HTML, para poder de hacerlo deberás de saber el mínimo de programación.!!**

Ahora que es lo que necesitamos:

Un bloc de notas, cualquiera funciona pero yo prefiero usar Notepad++.
Un navegador de internet (Opera por ejemplo).
Si no eres experto programando; un poco de paciencia

Creando los controles.

Lo primero que vamos a hacer es insertar una lista que contenga los colores:

<select size="1" name="Valor 1" id = "Valor1">

En este caso usamos una lista "Select" indicándole que sea de una linea (Size = "1"), su nombre es "Valor 1" y su id es "Valor1". El último valor es el mas importante de todos ya que se utilizará para poder "encontrarlo" desde el código de javascript.

Luego procedemos a crear los elementos que conformaran la lista, en este caso serán los colores del código de las resistencias: Negro, Café, Rojo, Naranja, Amarillo, Verde, Azul, Viloeta, Gris y Blanco
El Código resultante puede lucir como el que sigue:

<HTML>

    <HEAD></HEAD>

    <TITLE></TITLE>

    <BODY>

    <h1>Calculadora de resistencias</h1>

        <form>

            <label>Calcular</label>

            <p>

            <label>Primer valor</label>

                <select size="1" name="Valor 1" id = "Valor1">

                <option value="0">Negro</option>

                <option value="1">Cafe</option>

                <option value="2">Rojo</option>

                <option value="3">Naranja</option>

                <option value="4">Amarillo</option>

                <option value="5">Verde</option>

                <option value="6">Azul</option>

                <option value="7">Violeta</option>

                <option value="8">Gris</option>

                <option value="9">Blanco</option></select>

            </p>

        </form>

    </BODY>

</HTML>

Solo habrá que repetir este paso dos veces más para tener las listas que representarían las franjas en una resistencia y ademas agregar una lista más que contendrá los valores dorado y plateado, que son equivalentes a la tolerancia que está posea. El código requiere además de un botón (button) que será el encargado de llamar a nuestra función de javascript y 3 etiquetas (label) en donde se mostrará el resultado.
El código resultante tras añadir las listas que se necesitan puede lucir como el siguiente:

<HTML>

    <HEAD></HEAD>

    <TITLE></TITLE>

    <BODY>

    <h1>Calculadora de resistencias</h1>

        <form>

        <label>Calcular</label>

        <p><label>Primer valor</label> <select size="1" name="Valor 1" id = "Valor1">

        <option value="0">Negro</option>

        <option value="1">Cafe</option>

        <option value="2">Rojo</option>

        <option value="3">Naranja</option>

        <option value="4">Amarillo</option>

        <option value="5">Verde</option>

        <option value="6">Azul</option>

        <option value="7">Violeta</option>

        <option value="8">Gris</option>

        <option value="9">Blanco</option></select></p>

    <p><label>Segundo valor</label> <select size = "1" name = "Valor 2" id = "Valor2">

        <option value="0">Negro</option>

        <option value="1">Cafe</option>

        <option value="2">Rojo</option>

        <option value="3">Naranja</option>

        <option value="4">Amarillo</option>

        <option value="5">Verde</option>

        <option value="6">Azul</option>

        <option value="7">Violeta</option>

        <option value="8">Gris</option>

        <option value="9">Blanco</option></select></p>

    <p><label>Tercer valor</label> <select size = "1" name = "Valor 3" id = "Valor3">

        <option value="0">Negro</option>

        <option value="1">Cafe</option>

        <option value="2">Rojo</option>

        <option value="3">Naranja</option>

        <option value="4">Amarillo</option>

        <option value="5">Verde</option>

        <option value="6">Azul</option>

        <option value="7">Violeta</option>

        <option value="8">Gris</option>

        <option value="9">Blanco</option></select></p>

    <p><label>Cuarto valor</label> <select size = "1" name = "Valor 4" id = "Valor4">

        <option value="0">Dorado</option>

        <option value="1">Plata</option></select></p>

            </p>

        </form>

    </BODY>

</HTML>

Ahora el código de javascript

El código lo pongo tal cual para que se entienda completo, ademasde que he añadido los comentarios que considero pertinentes para poder usarlo facilmente.

<script type="text/javascript">

  //Funcion para calcular el valor de una resistencia basado en sus colores

  //Esta funcion solo recupera lo que seria equivalente a los numeros significativos

    function GetSignificant()

    {

        var ColorSelector1 = document.getElementById('Valor1');

        var Color1=ColorSelector1.options[ColorSelector1.selectedIndex].value;

        var ColorSelector2 = document.getElementById('Valor2');

        var Color2=ColorSelector2.options[ColorSelector2.selectedIndex].value;

        return parseInt(Color1 + Color2);

       

    }

    //Esta funcion solo obtiene la tolerancia de la resistencia

    function GetTolerancia()

    {

        var ColorSelector4 = document.getElementById('Valor4');

        var Color4=ColorSelector4.selectedIndex;

        switch (Color4)

        {

            case 0:

            return "+5% de tolerancia"

            break

            case 1:

            return "+10% de tolerancia"

            break

        }      

    }

    //Esta funcion regresa el valor total de la resistencia

    function GetValor()

    {

        var ColorSelector3 = document.getElementById('Valor3');

        var Color3=ColorSelector3.options[ColorSelector3.selectedIndex].value;



        switch (Color3)

        {

            case '0':

            return GetSignificant()*1;

            break

            case '1':

            return GetSignificant()*1e1;

            break

            case '2':

            return GetSignificant()*1e2;

            break

            case '3':

            return GetSignificant()*1e3;

            break

            case '4':

            return GetSignificant()*1e4;

            break

            case '5':

            return GetSignificant()*1e5;

            break

            case '6':

            return GetSignificant()*1e6;

            break

            case '7':

            return GetSignificant()*1e7;

            break

            case '8':

            return GetSignificant()*1e8;

            break

            case '9':

            return GetSignificant()*1e9;

            break

        }

    }

    //Esta funcion se encarga de mostrar el resultado y debe de llamar desde un boton

    function ShowResult()

    {

        var label1 = document.getElementById('lblResultado');

        var label2 = document.getElementById('lblResultadoK');

        var label3 = document.getElementById('lblResultadoM');

        var Total = GetValor();

        label1.innerHTML = Total.toString()+'&#8486 ' + GetTolerancia();

        label2.innerHTML = (Total/1e3).toString()+' Kilo&#8486 ' + GetTolerancia();

        label3.innerHTML = (Total/1e6).toString()+' Mega&#8486 ' + GetTolerancia();

    }

  </script>

Esto es todo lo que se necesita para poder usar la aplicacion.Si tienes dudas o comentario no dudes en comentar.
En el siguiente articulo le pondremos un look en verde para que se vea un poco mejor.
Los leo luego.

Seguir Leyendo