Ejemplos JavaScript operadores incremento y decremento. Asignación y asignación compuesta. (CU01118E)Aquí les dejo el código de la actividad CU01118E del curso básico de programador web desde cero:
1)
<html> <head> <title>Curso JavaScript aprenderaprogramar.com</title> <meta charset='utf-8'>
<style type='text/css'>
body {background-color: #FAEBD7; font-family: sans-serif; line-height: 1.3;}
div {border-style: solid; margin: 15px; padding: 10px; float: left;}
</style>
<script type='text/javascript'>
var a = prompt('Introduzca un número entero'); var b = prompt('Introduzca otro número entero');
a = Number(a) //Si no hacemos esto a es un texto y a+b concatena el texto
b = Number(b)
</script>
</head>
<body>
<div> <h2>Operadores de incremento</h2>
<script type='text/javascript'>
var valorInicial_a = a; document.write('Valores iniciales: a = ' + a + ', b = ' + b + '<br/> <br/>');
aumentar = ++a * b; document.write ('Operador ++ (anterior): ++a * b == ' + aumentar + '<br/>');
document.write ('(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = valorInicial_a; aumentar = a++ * b;
document.write ('Operador ++ (posterior): a++ * b == ' + aumentar + '<br/>');
document.write ('(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = valorInicial_a; //Restablecemos el valor que inicialmente tenía a
disminuir = --a * b; document.write ('Operador -- (anterior): --a * b == ' + disminuir + '<br/>');
document.write ('(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = valorInicial_a;
disminuir = a-- * b;
document.write ('Operador -- (posterior): a-- * b == ' + disminuir + '<br/>');
document.write ('(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = valorInicial_a;
</script>
</div>
<div>
<h2>Operadores de asignación compuestos</h2>
<script type='text/javascript'>
document.write('Valores iniciales: a = ' + a + ', b = ' + b + '<br/> <br/>');
inicio = a;
a += b;
document.write ( 'Asignación compuesta de suma: a += b equivale a = a + b<br/>');
document.write ( '(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = inicio; a -= b; document.write ( 'Asignación compuesta de resta: a -= b equivale a = a - b<br/>');
document.write ( '(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = inicio; a *= b;
document.write ( 'Asignación compuesta de multiplicación: a *= b equivale a = a * b<br/>');
document.write ( '(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = inicio; a /= b;
document.write ( 'Asignación compuesta de división: a /= b equivale a = a / b<br/>');
document.write ( '(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = inicio; a %= b;
document.write ( 'Asignación compuesta de módulo: a %= b equivale a = a % b<br/>');
document.write ( '(Ahora el valor de a es: ' + a + ')<br/><br/>');
</script></div> </body> </html>
Empieza por
<head>, se encuentra una hoja de estilos que dice que en
body debe tener un color de fondo #FAEBD7, la fuente debe ser sans-serif y las lineas deben ser un 1.3 veces el tamaño normal. Luego esta el divisor(div) que dice que debe tener un borde solido, un margen en todas direcciones de 15px, un relleno de 10px en todas direcciones y debe flotar a la izquierda.
Luego se encuentra un script(tipo javascript) que declara dos variables, a y b al cual se les asignan el valor que de el usuario. Posteriormente esos valores son convertidos en variables numéricas.
Sigue
<body> que empieza con el primer divisor(div). En el se encuentran un encabezado h2 y un script, en el script se declaran tres variables:
valorInicial_a a la cual se le asigna el valor de
a, aumentar y disminuir.
se escribe en el documento(usando document.write), concatenando textos junto con variables y obtener resultados en referencia a las respuestas del usuario, ejemplo:
aumentar = ++a * b,
a = valorInicial_a; aumentar = a++ * b,
document.write ('(Ahora el valor de a es: ' + a + ')<br/><br/>');.
En el siguiente script se ven resultados similares, un encabezado h2, se escribe en el documento, se hacen varios cálculos con variables, etc.
2) Introduce errores en los scripts de modo que estos no se ejecuten ¿Qué se visualiza en la página web?Aquí el código con errores:
<html> <head> <title>Curso JavaScript aprenderaprogramar.com</title> <meta charset='utf-8'>
<style type='text/css'>
body {background-color: #FAEBD7; font-family: sans-serif; line-height: 1.3;}
div {border-style: solid; margin: 15px; padding: 10px; float: left;}
</style>
<script type='text/javascript'>
var a = prompt('Introduzca un número entero'); var b = prompt('Introduzca otro número entero');
a = Number(a) //Si no hacemos esto a es un texto y a+b concatena el texto
b = Number(c) //Primer error
</script>
</head>
<body>
<div> <h2>Operadores de incremento</h2>
<script type='text/javascript'>
/*Segundo error*/
var valorinicial_a = a; document.write('Valores iniciales: a = ' + a + ', b = ' + b + '<br/> <br/>');
var aumentar = ++a * b; document.write ('Operador ++ (anterior): ++a * b == ' + aumentar + '<br/>');
document.write ('(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = valorInicial_a; aumentar = a++ * b;
document.write ('Operador ++ (posterior): a++ * b == ' + /*Tercero error -->*/mentar + '<br/>');
document.write ('(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = valorInicial_a; //Restablecemos el valor que inicialmente tenía a
disminuir = --a * b; document.write ('Operador -- (anterior): --a * b == ' + disminuir + '<br/>');
document.write ('(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = valorInicial_a;
/*Cuarto error*/
disminuir = a- * b;
document.write ('Operador -- (posterior): a-- * b == ' + disminuir + '<br/>');
document.write ('(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = valorInicial_a;
</script>
</div>
<div>
<h2>Operadores de asignación compuestos</h2>
<script type='text/javascript'>
document.write('Valores iniciales: a = ' + a + ', b = ' + b + '<br/> <br/>');
inicio = a;
a += b;
document.write ( 'Asignación compuesta de suma: a += b equivale a = a + b<br/>');
document.write ( '(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = inicio; a -= b; document.write ( 'Asignación compuesta de resta: a -= b equivale a = a - b<br/>');
document.write ( '(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = inicio; a *= b;
document.write ( 'Asignación compuesta de multiplicación: a *= b equivale a = a * b<br/>');
document.write ( '(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = inicio; a /= b;
document.write ( 'Asignación compuesta de división: a /= b equivale a = a / b<br/>');
document.write ( '(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = inicio; a %= b;
document.write ( 'Asignación compuesta de módulo: a %= b equivale a = a % b<br/>');
document.write ( '(Ahora el valor de a es: ' + a + ')<br/><br/>');
</script></div> </body> </html>
Aquí el primer div se deja de visualizar completamente(a excepción del encabezado) por modificar el valor de la variable
valorInicial_a y una operación ilógica en medio del código, en el segundo div se deja de mostrar parcialmente a causa de modificar la variable
Inicio, generando un error a muchas operaciones en el código.
3)
Introduce 0 y 0 como números en el ejemplo anterior. ¿Cuántas veces el resultado de las operaciones es NaN? ¿Por qué?Se ven dos NaN al final del código, la primera en una division, dividir 0 entre 0 no tiene lógica, se obtiene un número indefinido.
En el segundo se obtiene NaN porque se trata de obtener el restante de una division 0 entre 0. La razón es la misma que en el primero.
Link de la clase: https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=796:ejemplos-javascript-operadores-incremento-y-decremento-asignacion-y-asignacion-compuesta-cu01118e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206