Aprende Joomla con el libro "Creación y administración web con Joomla. Curso paso a paso" 2ª Edición. 168 pgs. Editorial aprenderaprogramar.com. Disponible en formato papel y ebook.
Mostrar Mensajes
Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.
EJERCICIO
Crea el siguiente código PHP:
a) Una función (tipo procedimiento, no hay valor devuelto) denominada escribirNumerosMod que reciba dos parámetros: un array de valores enteros y una cadena de texto que puede ser "sobreescribir" ó "ampliar". La función debe proceder a: escribir cada uno de los números que forman el contenido del array en una línea de un archivo datosEjercicio.txt usando el modo de operación que se indique con el otro parámetro. Si el archivo no existe, debe crearlo.
Ejemplo: El array que se pasa es $numeros = array(5, 9, 3, 22); y la invocación que se utiliza es escribirNumerosMod($numeros, "sobreescribir"); En este caso, se debe eliminar el contenido que existiera previamente en el archivo y escribir en él 4 líneas, cada una de las cuales contendrá los números 5, 9, 3 y 22.
b) Una función (tipo procedimiento, no hay valor devuelto) denominada leerContenidoFichero que reciba como parámetro la ruta del fichero y muestre por pantalla el contenido de cada una de las líneas del fichero.
c) Crea código php donde a través de la función escribirNumerosMod escribas en el fichero los números 2, 8, 14. Luego, mediante la función leerContenidoFichero muestra el contenido del fichero. Ahora con la función escribirNumerosMod amplía el contenido del fichero y añádele los números 33, 11 y 16. Muestra nuevamente el contenido del fichero por pantalla. Finalmente, escribe el fichero pasándole un array con los número 4, 99, 12 y parámetro <<sobreescribir>> para eliminar los datos que existieran previamente. Muestra el contenido del fichero por pantalla y un mensaje de despedida.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<?php
function escribirNumerosMod($numeros ,$valor)
{
if (strcmp($valor, "sobreescribir") == 0) {
$fp = fopen("crearArchivo.txt", "w");
for ($i=0; $i < count($numeros); $i++) {
fwrite($fp, $numeros[$i] . PHP_EOL);
}
fclose($fp);
echo "Se ha sobreescribido correctamente.<br/>";
}else if (strcmp($valor, "ampliar") == 0) {
$fp = fopen("crearArchivo.txt", "a");
for ($i=0; $i < count($numeros); $i++) {
fwrite($fp, $numeros[$i] . PHP_EOL);
}
fclose($fp);
echo "Se ha ampliado correctamente.<br/>";
}else{
echo "Ha escrito un valor que no es correcto.<br/>";
}
}
function leerContenidoFichero($ruta)
{
$fp = fopen($ruta, "r");
while (!feof($fp)) {
$resul = fgets($fp);
echo $resul . "<br/>";
}
}
escribirNumerosMod(array(2, 8, 14), "sobreescribir");
echo "<br/> CONTENIDO DEL FICHERO: <br/>";
leerContenidoFichero("crearArchivo.txt");
echo "<br/><br/>";
escribirNumerosMod(array(33, 11, 16), "ampliar");
echo "<br/> CONTENIDO DEL FICHERO: <br/>";
leerContenidoFichero("crearArchivo.txt");
echo "<br/><br/>";
escribirNumerosMod(array(4, 99, 12), "sobreescribir");
echo "<br/> CONTENIDO DEL FICHERO: <br/>";
leerContenidoFichero("crearArchivo.txt");
echo "<br/><br/>";
echo "Esto fue todo amigos. ¡Hasta pronto!";
?>
</body>
</html>
EJERCICIO
Crea las siguientes funciones en PHP:
a) Una función (tipo procedimiento, no hay valor devuelto) denominada escribirTresNumeros que reciba tres números enteros como parámetros y proceda a escribir dichos números en tres líneas en un archivo denominado datosEjercicio.txt. Si el archivo no existe, debe crearlo.
b) Una función denominada obtenerSuma (tipo función, devolverá un valor numérico) que reciba una ruta de archivo como parámetro, lea los números existentes en cada línea del archivo, y devuelva la suma de todos esos números.
c) Una función denominada obtenerArrNum (tipo función, devolverá un array de valores numéricos) que reciba una ruta de archivo como parámetro, lea los números existentes en cada línea del archivo, y devuelva un array cuyo índice 0 contendrá el número existente en la primera línea, cuyo índice 1 contendrá el número existente en la segunda línea y así sucesivamente.
d) Crea código php donde a través de la función escribirTresNumeros escribas en el fichero los números 2, 8, 14. Luego, mediante la función obtenerSuma muestra por pantalla el resultado de sumar los números existentes en el archivo. Finalmente, mediante la función obtenerArrNum obtén el array, recórrelo y muestra cada uno de los elementos del array.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<?php
function escribirTresNumeros($num1, $num2, $num3)
{
$fp = fopen("fichero.txt", "w");
fputs($fp, $num1 . "\n" . $num2 . "\n" . $num3 . "\n");
fclose($fp);
}
function obtenerSuma($ruta)
{
$resul = 0;
$aux = 0;
$linea = array();
$fp = fopen($ruta, "r");
while (!feof($fp)) {
$linea[$aux] = fgets($fp);
$aux++;
}
for ($i=0; $i < count($linea); $i++) {
$resul = $resul + $linea[$i];
}
fclose($fp);
return $resul;
}
function obtenerArrNum($ruta)
{
$array = array();
$cont = 0;
$fp = fopen($ruta, "r");
while (!feof($fp)) {
$array[$cont] = fgets($fp);
$cont++;
}
for ($i=0; $i < count($array) - 1; $i++) {
echo $array[$i] . ", ";
}
fclose($fp);
}
escribirTresNumeros(2, 8, 14);
echo "Suma: " . obtenerSuma("fichero.txt");
echo "<br/>";
obtenerArrNum("fichero.txt");
?>
</body>
</html>
EJERCICIO
Crear archivos php que ejecuten la tarea indicada:
a) Dadas las cadenas "aprender" y "aprende", mostrar por pantalla la cadena rellena con * a derecha e izquierda en un número de asteriscos que será siempre 5 a cada lado aunque se cambien las cadenas.
b) Dadas las cadenas "aprender" y "aprende", mostrar por pantalla si sus tres primeros caracteres son iguales o no usando una función de comparación de subcadenas.
c) Dada la cadena "ApRendEr A proGraMar.cOm" transformar la cadena a minúsculas y rellenarla a derecha e izquierda con una longitud de asteriscos igual a la mitad de su longitud si es par ó igual a la mitad de (su longitud más 1) si es impar. Mostrar por pantalla la cadena en minúsculas y con el relleno indicado.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<?php
$cadena1 = "aprender";
$cadena2 = "aprende";
$cadena3 = "ApRendEr A proGraMar.cOm";
//punto a.
echo str_pad($cadena1, (strlen($cadena1)+10), "*", STR_PAD_BOTH). "<br/>";
echo str_pad($cadena2, (strlen($cadena2)+10), "*", STR_PAD_BOTH). "<br/>";
echo "-----------------------------------------<br/>";
//punto b.
for ($i=0; $i < 3; $i++) {
$aux1 = substr($cadena1, $i, 1);
$aux2 = substr($cadena2, $i, 1);
if (strcmp($aux1, $aux2) == 0) {
echo "\"" . $aux1 . "\" es igual a \"" . $aux2 . "\".<br/>";
}else{
echo "\"" . $aux1 . "\" es diferente de \"" . $aux2 . "\".<br/>";
}
}
echo "-----------------------------------------<br/>";
//punto c.
$tranosformada = strtolower($cadena3);
$resul = (strlen($tranosformada) % 2);
$aux = strlen($tranosformada);
if ($resul == 0) {
$longitud = $aux + ($aux / 2);
echo "Resul: " . str_pad($tranosformada, $longitud,"*" , STR_PAD_BOTH);
}else{
$longitud = $aux + (($aux / 2) + 1);
echo "Resul: " . str_pad($tranosformada, ($longitud),"*" , STR_PAD_BOTH);
}
?>
</body>
</html>
EJERCICIO
Crear archivos php que ejecuten la tarea indicada:
a) Dada la cadena "El abecedario completo es algo largo y detallarlo exhaustivamente es costoso", indicar cuántas veces aparece cada vocal usando funciones para cadenas PHP.
b) Dada la cadena "El abecedario completo es algo largo y detallarlo exhaustivamente es costoso", indicar qué consonantes son las que aparecen y cuántas veces aparecen usando funciones para cadenas PHP.
c) Dada la cadena "El abecedario completo es algo largo y detallarlo exhaustivamente es costoso", mostrar la cadena donde todas las a hayan sido sustituídas por el símbolo *. Por ejemplo en lugar de <<El abecedario…>> se habrá de mostrar <<El *beced*rio…>>
d) Dada la cadena "El abecedario completo es algo largo y detallarlo exhaustivamente es costoso", mostrar la subcadena desde la primera aparición de <<completo>> excluyendo completo, es decir, deberá mostrarse << es algo largo y detallarlo exhaustivamente es costoso>>. Para ello usa una o varias funciones para cadenas PHP.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<?php
$consonantes = array("b", "d", "f", "g", "h", "j", "k", "l", "m", "n", "ñ", "p", "q", "r", "s", "t", "v", "x", "y", "z");
$cadena = "El abecedario completo es algo largo y detallarlo exhaustivamente es costoso";
echo "<br/> APARTADO A) <br/>";
$resul = count_chars($cadena, 1);
foreach ($resul as $key => $value) {
echo chr($key) . " -> " . $value . "<br/>";
}
echo "<br/> APARTADO B) <br/>";
for ($i=0; $i < strlen($cadena); $i++) {
$subcadenitas = substr($cadena, $i, 1);
for ($j=0; $j < count($consonantes); $j++) {
if ($subcadenitas == $consonantes[$j]) {
$agregando = $agregando . $subcadenitas;
break;
}
}
}
$resul2 = count_chars($agregando, 1);
foreach ($resul2 as $key => $value) {
echo chr($key) . " -> " . $value . "<br/>";
}
echo "<br/> APARTADO C) <br/>";
$resul3 = str_replace("a", "*", $cadena);
echo "Resultado: " . $resul3;
echo "<br/><br/>APARTADO D) <br/>";
$cortar = strstr($cadena, "completo", false);
$resul4 = trim($cortar, "completo");
echo $resul4;
?>
</body>
</html>
EJERCICIO
Crea una página web donde inicialmente exista un div con borde solid y ancho delimitado con el texto “Curso JavaScript aprenderaprogramar.com”. Debajo del div deben mostrarse dos botones o pulsadores. Un botón debe indicar “Añadir al final” y otro “Anidar”. Cuando se pulse el botón “Añadir al final”, debe añadirse un div al final de la página con el texto “Nodo creado 1” (o Nodo creado 2, 3, 4… según corresponda). Cuando se pulse el botón “Anidar” debe añadirse un div dentro del div inicial con el texto “Nodo creado 5” (o Nodo creado 6, 7, 8… según corresponda). La numeración será única, es decir, podremos saber en qué orden han sido creados los div estén dentro o fuera del div inicial.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
div{
border-style: solid;
text-align: center;
padding: 5 px;
width: 350px;
margin-bottom: 20px;
}
</style>
<script type="text/javascript">
var cont = 1;
var insertarElemento2;
function inicio () {
insertarElemento1 = document.getElementById("body");
insertarElemento2 = document.getElementById("divInicial");
}
function anidarElemento0 () {
var nodoHijo = document.createElement("div");
var textNodoHijo = document.createTextNode("Nodo creado " + cont);
nodoHijo.style.width = "150px";
nodoHijo.style.textAlign = "center";
nodoHijo.appendChild(textNodoHijo);
insertarElemento1.appendChild(nodoHijo);
cont++;
}
function anidarElemento () {
var nodoHijo = document.createElement("div");
var textNodoHijo = document.createTextNode("Nodo creado " + cont);
nodoHijo.style.width = "150px";
nodoHijo.style.margin = "0px auto";
nodoHijo.style.textAlign = "center";
nodoHijo.appendChild(textNodoHijo);
insertarElemento2.appendChild(nodoHijo);
cont++;
}
</script>
</head>
<body id="body">
<div id="divInicial">Curso JavaScript aprenderaprogramar.com</div>
<input type="button" value="Añadir al final" onclick="anidarElemento0()"/>
<input type="button" value="Anidar" id="btnAnidar" onclick="anidarElemento()" />
<script type="text/javascript">
inicio();
</script>
</body>
</html>
EJERCICIO
Crea un documento html con div central (“el cuadrado principal”) que contenga a su vez cuatro divs (los cuadrados secundarios). Debajo del cuadrado principal debe aparecer un botón con el texto “Avanzar”. Inicialmente los cuatro cuadrados tendrán fondo blanco y un signo ? de gran tamaño. Al pulsar en el botón por primera vez, el cuadrado superior izquierdo debe aparecer con fondo negro, texto blanco, y tener como texto “El”. Al pulsar de nuevo el botón, el cuadrado superior derecho debe aparecer con fondo blanco y texto negro y tener como texto “poder”. Al pulsar de nuevo el botón el cuadrado inferior izquierdo debe aparecer con fondo blanco y texto negro y tener como texto “de”. Al pulsar de nuevo el botón el cuadrado inferior derecho debe aparecer con fondo amarillo y texto negro y tener como texto “JavaScript”. Si se pulsa nuevamente el botón avanzar debe mostrarse un mensaje que indique “No es posible avanzar más”.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8"/>
<style type="text/css">
body{
margin: 0 auto;
}
#container{
border: none;
width: 205px;
height: 205px;
overflow: hidden;
}
div{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
float: left;
/*margin: 1px;*/
}
div#uno, div#dos, div#tres, div#cuatro{
border: 1px solid black;
}
input{
display: block;
clear: both;
margin-left: 70px;
}
</style>
<script type="text/javascript">
var cont = 0;
function inicio () {
var uno = document.getElementById("uno");
var dos = document.getElementById("dos");
var tres = document.getElementById("tres");
var cuatro = document.getElementById("cuatro");
var boton = document.getElementById("botonUnico");
boton.addEventListener("click", function(){
cont++;
if (cont == 1) {
uno.innerHTML = "<div style='background-color:black; width:100px; height:100px; color:white'>El<div/>";
};
if (cont == 2) {
dos.textContent = "poder";
};
if (cont == 3) {
tres.textContent = "de";
};
if (cont == 4) {
cuatro.innerHTML = "<div style=' background-color:yellow'>JavaScript<div/>";
};
if (cont > 4) {
alert("No es posible avanzar más.");
};
});
}
</script>
</head>
<body>
<div id="container">
<div id="uno">?</div>
<div id="dos">?</div>
<div id="tres">?</div>
<div id="cuatro">?</div>
</div>
<input type="button" value="Avanzar" id="botonUnico"/>
<script type="text/javascript">
inicio();
</script>
</body>
</html>
1) Genera un script que pida cinco números al usuario usando un bucle for normal (usa prompt para pedir los datos y conviértelos a valor numérico posteriormente). Almacena los números introducidos por el usuario en un array. A continuación usando un for in que recorra el array, muestra un mensaje informando del resultado de multiplicar cada uno de los números por 3. Ejemplo:
Se pedirán al usuario cinco números, supongamos que introduce 1, 3, 9, 10 y 7
A continuación se mostrará el mensaje:
Multiplicamos por 5 los números introducidos: 1*5 = 5, 3*5 = 15, 9*5 = 45, 10*5 = 50 y 7*5 =35.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
div#salida{
width: 100%;
border: 1px solid black;
height: 20px;
}
#vaMostrando{
width: 20%;
margin: 10px 0px 20px 0px;
padding: 3px;
}
h2{
margin: 0;
}
</style>
<script type="text/javascript">
var datoEntrada, datoBoton, datoSalida, iteractivo;
var arreglo = new Array();
var cont = 0;
function capturaDeDatos() {
datoEntrada = document.getElementById("entrada");
iteractivo = document.getElementById("vaMostrando");
if (cont < 5) {
arreglo[cont] = datoEntrada.value;
iteractivo.childNodes[1].nodeValue = arreglo[cont];
}else{
alert("Ya se sobrepaso de datos.");
}
cont++;
if (cont == 5) {
var resul = "Multiplicamos por 5 los números introducidos: ";
datoSalida = document.getElementById("salida");
for (i in arreglo) {
resul = resul + arreglo[i] + "*5 = " + (arreglo[i] * 5) + ", ";
};
datoSalida.childNodes[0].nodeValue = resul;
iteractivo.childNodes[1].nodeValue = "Finish";
};
}
function resetMen() {
var resetCaja = document.getElementById("salida").childNodes[0].nodeValue = "";
var resetCaja2 = document.getElementById("vaMostrando").childNodes[1].nodeValue = "";
cont = 0;
}
</script>
</head>
<body>
<form>
<h2>Ingrese 5 numeros solamente.</h2>
<input id="entrada" type="text"/>
<input id="boton" type="reset" value="Acept" onclick="capturaDeDatos()" />
<input id="reseteo" type="button" value="Limpar cajas" onclick="resetMen()" />
<div id="vaMostrando" style="font-size: 20px;"><span style="font-size: 15px">Ingreso el numero: </span> </div>
<span>Resultado:</span>
<div id="salida"> <div>
</form>
</body>
</html>
var nodoClass = "";
function pulsada (tecla) {
nodoClass = document.getElementById("pantallota");
var prueba = nodoClass.childNodes[0];
if(tecla == "C"){
prueba.nodeValue = ""; //esta es una manera.
}else if(tecla == "="){
var resultado = eval(prueba.nodeValue);
pantallota.innerHTML = resultado; //esta es otra manera.
}else{
prueba.nodeValue = prueba.nodeValue + tecla;
}
}
// function miPrueba () {
// var probador = nodoClass[0].childNodes[0];
// alert(probador.length);
// }
1) Modifica el código del ejemplo de la calculadora JavaScript para que además de tener dos botones que permitan marcar números y operadores con distintos colores tenga:
a) Un botón que permita marcar la tecla C con color rojo fuerte y símbolo C en blanco.
b) Un botón que permita marcar la tecla con el punto con color violeta fuerte y símbolo . en blanco.
c) Un botón que permita marcar la pantalla visor de la calculadora en azul oscuro.
d) Un botón que permita limpiar todo lo que se haya marcado y volver a la situación original (es decir, que la calculadora se vea tal y como se veía inicialmente).
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
body{
font-family: sans-serif;
text-align: center;
}
#calculadora{
font: bold 14px Arial, sans-serif;
background-color: #9DD2EA;
margin: 0 auto;
padding: 20px 20px 9px;
width: 286px;
border-radius: 3px;
/*height: auto;*/
}
.parteSuperior, .teclas{
overflow: hidden;
}
div.parteSuperior div.pantalla{
background-color: rgba(0, 0, 0, 0.2);
color: #FFF;
float: right;
width: 180px;
height: 40px;
font-size: 17px;
border-radius: 3px;
padding: 0 10px;
text-align: right;
letter-spacing: 1px;/*espaciado entre caractere*/
line-height: 40px;
}
.parteSuperior span.limpiar, .teclas span, #modificado span{
background-color: #FFFFFF;
color: #888888;
cursor: pointer;
float: left;
border-radius: 3px;
height: 36px;
width: 66px;
margin: 0 7px 11px 0;
line-height: 36px;
text-align: center;
transition: all 0.4s ease 0s;
}
.parteSuperior span.limpiar{
background-color: #FF7C87;
}
.teclas span.operador/*, #modificado span#reset*/{
margin-right: 0;
background-color: #FFDAB9;
}
.teclas span.igual{
background-color: #F1FF92;
color: #888E5F;
}
.parteSuperior span.limpiar:hover, .teclas span:hover, #modificado span:hover{
background-color: #9C89F6;
color: #FFFFFF;
}
header{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 326px;
margin: 0 auto;
border-radius: 3px;
}
header h2, header h3{
margin: 0;
padding: 5px;
}
header h3{
background-color: #E59DEA;
}
header h2{
background-color: #FFBBF6;
}
.teclas span#probandoAndo{
width: 100%;
}
#contenedor div#marcaNumeros, #contenedor div#marcaOperadores{
transition: all 0.4s ease 0s;
width: 140px;
display: inline-block;
height: 36px;
border-radius: 3px;
line-height: 36px;
margin: 0px;
background: rgb(202, 60, 60);
cursor: pointer;
color: white;
}
#contenedor div#marcaNumeros{
margin-left: -2px;
}
#contenedor div#marcaNumeros:hover, #contenedor div#marcaOperadores:hover{
background: rgb(66, 184, 221)
}
#modificado{
padding: 0 0 0 5px;
height: 46px;
background-color: white;
border-radius: 3px;
border: none;
}
#modificado span{
margin: 5px 4px 11px 0;
background: rgb(202, 60, 60);
color: white;
}
</style>
<script type="text/javascript">
var listaNodoPantalla, listaNodoNumero, listaNumeroOperador;
function pulsada(tecla) {
listaNodoPantalla = document.getElementsByClassName("pantalla");
var nodoTextoPantalla = listaNodoPantalla[0].childNodes[0];//Segunda opcion: listaNodoPantalla[0].firstChild
switch(tecla){
case "C":
nodoTextoPantalla.nodeValue = "";
break;
case "=":
var resultado = eval(nodoTextoPantalla.nodeValue);
nodoTextoPantalla.nodeValue = resultado;
break;
default:
nodoTextoPantalla.nodeValue = nodoTextoPantalla.nodeValue + tecla;
}
}
// dos manera de editar el css de nuestra pag web.
//por medio de la funcion: querySelectorAll() o getElementsByClassName();
function marcaDeNumeros(){
listaNodoNumero = document.getElementsByClassName("numero");
for (var i = 0; i < listaNodoNumero.length; i++) {
listaNodoNumero[i].style.backgroundColor = "black";
listaNodoNumero[i].style.color = "white";
};
}
function marcaDeOperadores() {
listaNumeroOperador = document.querySelectorAll("#calculadora .teclas span.operador, #calculadora .teclas span.igual");
for (var i = 0; i < listaNumeroOperador.length; i++) {
listaNumeroOperador[i].style.backgroundColor = "yellow";
listaNumeroOperador[i].style.color = "red";
}
}
function modificacion (valor) {
var valorStyle;
if (valor == "la_C") {
valorStyle = document.querySelectorAll("#calculadora span.limpiar");
valorStyle[0].style.backgroundColor = "red";
valorStyle[0].style.color = "white";
}else if(valor == "punto"){
valorStyle = document.querySelectorAll(".teclas span.punto");
valorStyle[0].style.backgroundColor = "#8B008B";
valorStyle[0].style.color = "white";
}else if(valor == "pant"){
valorStyle = document.querySelectorAll("#calculadora div.pantalla");
valorStyle[0].style.backgroundColor = "#00008B";
}
}
function resetGeneral () {
var numeroStyle = document.querySelectorAll("#calculadora .teclas span.numero, #calculadora .teclas span.punto");
for (var i = 0; i < numeroStyle.length; i++) {
numeroStyle[i].style.backgroundColor = "#FFFFFF";
numeroStyle[i].style.color = "#888888";
};
var operadoresStyle = document.querySelectorAll("#calculadora .teclas span.operador");
for (var i = 0; i < operadoresStyle.length; i++) {
operadoresStyle[i].style.backgroundColor = "#FFDAB9";
operadoresStyle[i].style.color = "#888888";
};
var pantallaStyle = document.querySelectorAll("#calculadora .parteSuperior div.pantalla");
pantallaStyle[0].style.backgroundColor = "rgba(0, 0, 0, 0.2)";
var limpiarStyle = document.querySelectorAll("#calculadora .teclas span.igual");
limpiarStyle[0].style.backgroundColor = "#F1FF92";
limpiarStyle[0].style.color = "#888888";
var limpiarStyle = document.querySelectorAll("#calculadora .parteSuperior span.limpiar");
limpiarStyle[0].style.backgroundColor = "#FF7C87";
limpiarStyle[0].style.color = "#888888";
}
</script>
</head>
<body>
<header id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplo calculadora JavaScript</h3>
</header>
<div id="calculadora">
<!-- pantalla y tecla limpiar -->
<div class="parteSuperior">
<span class="limpiar" onclick="pulsada('C')">C</span>
<div class="pantalla"> </div> <!--Ojo tenemos un espacio para que exista nodeValue-->
</div>
<div class="teclas">
<!-- operadores y otras teclas -->
<span class = "numero" onclick="pulsada('7')">7</span>
<span class = "numero" onclick="pulsada('8')">8</span>
<span class = "numero" onclick="pulsada('9')">9</span>
<span class="operador" onclick="pulsada('+')">+</span>
<span class = "numero" onclick="pulsada('4')">4</span>
<span class = "numero" onclick="pulsada('5')">5</span>
<span class = "numero" onclick="pulsada('6')">6</span>
<span class="operador" onclick="pulsada('-')">-</span>
<span class = "numero" onclick="pulsada('1')">1</span>
<span class = "numero" onclick="pulsada('2')">2</span>
<span class = "numero" onclick="pulsada('3')">3</span>
<span class="operador" onclick="pulsada('/')">÷</span>
<span class = "numero" onclick="pulsada('0')">0</span>
<span class ="punto" onclick="pulsada('.')">.</span>
<span class="igual" onclick="pulsada('=')">=</span>
<span class="operador" onclick="pulsada('*')">x</span>
</div>
<div id="modificado">
<span onclick="modificacion('la_C')">La C</span>
<span onclick="modificacion('punto')">punto</span>
<span onclick="modificacion('pant')">Pant</span>
<span onclick="resetGeneral()">Reset</span>
</div>
<div id="contenedor">
<div id="marcaNumeros" onclick="marcaDeNumeros()"> Marca numeros</div>
<div id="marcaOperadores" onclick="marcaDeOperadores()">Marca operadores</div>
</div>
</div>
</body>
</html>
1) Modifica el código del ejemplo de la calculadora javascript para que en lugar del condicional switch--------------------------------------------------------------------
uses el condicional if (con if else ó if else if cuando sea necesario).
<!DOCTYPE html>
<html style="border:none">
<head>
<title></title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="calculadora.css">
<script type="text/javascript" src="calculadora.js"></script>
</head>
<body style="border:none">
<header> <!-- Cabezera -->
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplo calculadora JavaScript</h3>
</header>
<div id="calculadora"> <!-- contenedor -->
<!-- pantalla y la tecla limpiar -->
<div class="parteSuperior">
<span class="limpiar" onclick="pulsada('C')">C</span>
<div id="pantallota" class="pantalla"> </div> <!-- Se deja un espacio dentro de la etiqueta para poder agarrarlo con el nodeValue -->
</div>
<div class="teclas">
<!-- Operadores y otras letras -->
<span onclick="pulsada('7')">7</span>
<span onclick="pulsada('8')">8</span>
<span onclick="pulsada('9')">9</span>
<span onclick="pulsada('+')" class="operador">+</span>
<span onclick="pulsada('4')">4</span>
<span onclick="pulsada('5')">5</span>
<span onclick="pulsada('6')">6</span>
<span onclick="pulsada('-')" class="operador">-</span>
<span onclick="pulsada('1')">1</span>
<span onclick="pulsada('2')">2</span>
<span onclick="pulsada('3')">3</span>
<span onclick="pulsada('/')" class="operador">÷</span>
<span onclick="pulsada('0')">0</span>
<span onclick="pulsada('.')">.</span>
<span onclick="pulsada('=')" class="igual">=</span>
<span onclick="pulsada('*')" class="operador">x</span>
<span id="probandoAndo" onclick="miPrueba()">probar</span>
</div>
</div>
</body>
</html>-------------------------------------------------------------------------body{
font-family: sans-serif;
text-align: center;
}
#calculadora{
font: bold 14px Arial, sans-serif;
background-color: #9DD2EA;
margin: 0 auto;
padding: 20px 20px 9px;
width: 285px;
border-radius: 3px;
/*height: auto;*/
}
.parteSuperior, .teclas{
overflow: hidden;
}
div.parteSuperior div.pantalla{
background-color: rgba(0, 0, 0, 0.2);
color: #FFF;
float: right;
width: 180px;
height: 40px;
font-size: 17px;
border-radius: 3px;
padding: 0 10px;
text-align: right;
letter-spacing: 1px;/*espaciado entre caractere*/
line-height: 40px;
}
.parteSuperior span.limpiar, .teclas span{
background-color: #FFFFFF;
color: #888888;
cursor: pointer;
float: left;
border-radius: 3px;
height: 36px;
width: 66px;
margin: 0 7px 11px 0;
line-height: 36px;
text-align: center;
transition: all 1s ease 0s;
}
.parteSuperior span.limpiar{
background-color: #FF7C87;
}
.teclas span.operador{
margin-right: 0;
background-color: #FFDAB9;
}
.teclas span.igual{
background-color: #F1FF92;
color: #888E5F;
}
.parteSuperior span.limpiar:hover, .teclas span:hover{
background-color: #9C89F6;
color: #FFFFFF;
}
header{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 325px;
margin: 0 auto;
border-radius: 3px;
}
header h2, header h3{
margin: 0;
padding: 5px;
}
header h3{
background-color: #E59DEA;
}
header h2{
background-color: #FFBBF6;
}
.teclas span#probandoAndo{
width: 100%;
}---------------------------------------------------------------------------var listaNodoPantalla;
function pulsada(tecla) {
listaNodoPantalla = document.getElementsByClassName("pantalla");
var nodoTextoPantalla = listaNodoPantalla[0].childNodes[0];//Segunda opcion: listaNodoPantalla[0].firstChild
switch(tecla){
case "C":
nodoTextoPantalla.nodeValue = "";
break;
case "=":
var resultado = eval(nodoTextoPantalla.nodeValue);
nodoTextoPantalla.nodeValue = resultado;
break;
default:
nodoTextoPantalla.nodeValue = nodoTextoPantalla.nodeValue + tecla;
}
}
2) Utilizando el ejemplo de código que usa la función eval en la función <<function componer(sentido)>> que hemos visto dentro del código de los ejemplos,
function componer(sentido) {
var accion = 'mover';
var sobreElemento = 'Imagen';
var haciaDonde = sentido;
var llamada = accion + sobreElemento+'(\''+haciaDonde+'\')';
alert ('La unión del texto genera ' + llamada);
var tmpFunc = new Function(llamada);
tmpFunc();
}
crea una página web donde existan dos botones que pongan “Adelante” y “Atrás”, de modo que cuando se pulsen den lugar a que se llame la función componer(sentido). En esta función, a través de la función eval se ejecutará moverImagen('adelante') ó moverImagen('atras') según el parámetro recibido. La función moverImagen(sentido) puede contener un simple mensaje indicando el valor del parámetro <<sentido>> recibido.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
#caja{
text-align: center;
font-size: 30px;
border: 1px solid black;
width: 200px;
height: 30px;
padding-bottom: 8px;
}
</style>
<script type="text/javascript">
var lado;
function componer(sentido) {
var accion = 'mover';
var sobreElemento = 'Imagen';
var haciaDonde = sentido;
var llamada = accion + sobreElemento+'(\''+haciaDonde+'\')';
// alert ('La unión del texto genera ' + llamada);
eval(llamada);
}
function moverImagen(sentido) {
lado = document.getElementById("caja");
var haciaDonde = lado.childNodes[0];
if (sentido == "adelante") {
haciaDonde.nodeValue = sentido;
} else if (sentido == "atras") {
haciaDonde.nodeValue = sentido;
};
}
</script>
</head>
<body>
<div id="caja"> </div>
<input id="botonAdelante" type="button" value="Adelante" onclick="componer('adelante')" />
<input id="botonAtras" type="button" value="Atras" onclick="componer('atras')" />
</body>
</html>
1) Crea una función que pida una palabra al usuario y usando un bucle for y el método charAt, muestre cada una de las letras que componen la entrada. Por ejemplo si se introduce “ave” debe mostrar:
Letra 1: a
Letra 2: v
Letra 3: e
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
var palabra, insertar;
function inicio() {
var resul = "";
palabra = document.getElementById("caja").value;
for (var i = 0; i < palabra.length; i++) {
resul += "Letra " + (i + 1)+ ": " + palabra.charAt(i) + "\n\n";
};
mostrar.innerText = "\n" + resul;
}
</script>
</head>
<body>
<h1>Retando mis conocimientos.</h1>
<label>Palabra a evaluar: </label><input type="text" id="caja" />
<brs>
<label>Resultado: </label>
<div id="mostrar"></div>
<input type="button" id="boton" value="Acep" onclick="inicio()">
</body>
</html>2) Crea una función denominada mostrarContParrafos, que utilizando el acceso a los nodos del DOM de tipo párrafo, muestre el texto que contienen. Por ejemplo para el código de ejemplo visto anteriormente el resultado debería ser: Párrafo 1 contiene: manzana; Párrafo 2 contiene: pera. Párrafo 3 contiene: fresa. Párrafo 4 contiene … (etc., hasta que no haya más párrafos).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
border: 1px solid black;
float: left;
width: 500px;
margin-bottom: 30px;
text-align: center;
}
#caja2{
border: 1px solid black;
width: 240px;
height: 290px;
position: absolute;
left: 530px;
text-align: left;
padding: 5px;
}
body{
background-color: white;
font-family: sans-serif;
}
p{
float: left;
font-size:24px;
color: maroon;
margin: 10px;
border: solid black;
padding: 10px;
}
.boton{
padding: 15px;
width: 350px;
text-align: center;
clear: both;
color: white;
border-radius:40px;
background: rgb(202, 60, 60);
}
.boton2{
padding: 15px;
width: 230px;
text-align: center;
color: white;
border-radius:40px;
background: rgb(202, 60, 60);
margin-left: 515px;
margin-top: -70px;
}
.boton:hover, .boton2:hover{
background: rgb(66, 184, 221);
}
</style>
<script type="text/javascript">
var izda_dcha = true;
var elementos;
function inicio() {
elementos = document.getElementsByTagName("p");
}
function cambiarColores (elemento) {
var color = ['#FF6633', '#FF9933', '#FFCC33', 'yellow'];
if (izda_dcha) {
for (var i = 0; i < elementos.length; i++) {
elementos[i].style.backgroundColor = color[i%4];
}
}else{
for (var i = elementos.length - 1; i >= 0; i--) {
elementos[i].style.backgroundColor = color[(i+3)%4];
}
}
if (izda_dcha) {
izda_dcha = false;
}else{
izda_dcha = true;
}
}
function mostrarContParrafos() {
var resul = "";
for (var i = 0; i < elementos.length; i++) {
resul += "Parrafo " + (i+1) + " contiene: " + elementos[i].childNodes[0].nodeValue + "." +"\n";
};
caja2.innerText = resul;
}
</script>
</head>
<body>
<h1>Ing. Javier Cabana Padilla.</h1>
<h2>Aprendiendo a programar.</h2>
<div>
<p>Manzana</p><p>Pera</p><P>Fresa</p><p>Ciruela</p>
<p>Naranja</p><p>Kiwi</p><p>Pomelo</p><p>Melón</p>
<p>Sandía</p><p>Mango</p><p>Papaya</p><p>Cereza</p>
<p>Nectarina</p><p>Frambuesa</p>
</div>
<div id="caja2"> </div>
<h3 class="boton" onclick="cambiarColores()">Pulse para cambiar colores</h3>
<h3 class="boton2" onclick="mostrarContParrafos()">Nombre frutas</h3>
<script type="text/javascript">
inicio();
</script>
</body>
</html>
b) Modifica el código para obtener el mismo resultado pero sin utilizar if anidados.Con ese cogido que emplee ya no estaría aplicando if anidados o si?
. solo utilice una sentencia if y con el ciclo for repite las veces necesarias. Me gustaría que me aclararas esa inquietud. a) ¿Escribir if (elementosObtenidos[1].checked == true) genera el mismo resultado que escribir if (elementosObtenidos[1].checked)? ¿Por qué?
Las variables booleanas toman valor true o false. Puede considerarse que existe un equivalente numérico (1 para true y 0 para false), pero debemos decidir si queremos operar con números, usar una variable numérica, y si queremos operar con los valores true y false, operar con variables booleanas.
En general toda variable tiene un equivalente numérico y un equivalente en forma de texto. Por ejemplo el equivalente en forma de texto del valor true sería ‘true’ y se puede obtener escribiendo el nombre de la variable seguido de toString(). Por ejemplo casado.toString() devuelve la cadena de texto ‘true’, que es diferente del valor booleano true.
eso me motiva mas a seguir adelante y a darme cuenta que voy por buen camino. Así que muchas gracias y con referente a lo del ejercicio, aquí esta mi propuesta:
c) Utilizando la propiedad length aplicada a la colección de nodos obtenida mediante getElementsByName, modifica el código para que el resultado sea que al enviar el formulario el mensaje que aparezca sea “El número total de animales disponibles era … y usted ha elegido …”. Por ejemplo, si tenemos 4 animales (León, Tigre, Guepardo, Jaguar) y hemos elegido Tigre nos debe aparecer el mensaje “El número total de animales disponibles era 4 y usted ha elegido 1”.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
label{
display: inline-block;
padding: 5px;
}
</style>
</head>
<body>
<div id="cabecera">
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didactica y divulgacion de la programacion</h2>
</div>
<div style="width: 400px">
<form name="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com" onsubmit="informarElegido('animal')">
<p>Si quieres contactar con nosotros enianos este formulario relleno:</p>
<label for="nombre"> <span>Nombre: </span><input id="nombre" type="text" name="nombre"/></label>
<label for="apellidos"><span>Apellidos: </span><input id="apellidos" type="text" name="apellidos"/></label>
<p>Elige los animales que te gusten:</p>
<input type="checkbox" name="animal" id="leon" value="Leon" /><label for="leon">Leon</label>
<input type="checkbox" name="animal" id="tigre" value="Tigre" /><label for="tigre">Tigre</label>
<input type="checkbox" name="animal" id="gepardo" value="Gepardo"/><label for="gepardo">Gepardo</label>
<input type="checkbox" name="animal" id="jaguar" value="Jaguar" /><label for="jaguar">Jaguar</label>
<label>
<input type="submit" value="ENVIAR" />
<input type="reset" value="CANCELAR" />
</label>
</form>
</div>
<script type="text/javascript">
function informarElegido (elemento) {
var elegido = 0;
var elementosObtenidos = document.getElementsByName(elemento);
var cont = "Animales que ha elegido que le gustan incluye: ";
for (var i = 0; i < elementosObtenidos.length; i++) {
if (elementosObtenidos[i].checked == true){
cont += elementosObtenidos[i].value + ", ";
elegido++;
}
};
cont = cont.substring(0, cont.length - 2) + "."; //Esto simplemente lo quise colocar porque no me gustaba que al final del cont quedara una ","
if (elegido) {
alert("El numero total de animales es: " + elementosObtenidos.length + ", y usted a elegido: " + elegido + ".\n" + cont);
}else{
alert("¡No ha elegido ningún animal!");
}
}
</script>
</body>
</html>
getElementsByName JavaScript. onsubmit al enviar formulario form con input type submit. Ejemplo (CU01130E)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
label{
display: inline-block;
padding: 5px;
}
</style>
</head>
<body>
<div id="cabecera">
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didactica y divulgacion de la programacion</h2>
</div>
<div>
<form name="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com" onsubmit="informarElegido('animal')">
<p>Si quieres contactar con nosotros enianos este formulario relleno:</p>
<label for="nombre"> <span>Nombre: </span><input id="nombre" type="text" name="nombre"/></label>
<label for="apellidos"><span>Apellidos: </span><input id="apellidos" type="text" name="apellidos"/></label>
<p>Elige los animales que te gusten:</p>
<input type="checkbox" name="animal" id="leon" value="Leon" /><label for="leon">Leon</label>
<input type="checkbox" name="animal" id="tigre" value="Tigre" /><label for="tigre">Tigre</label>
<input type="checkbox" name="animal" id="gepardo" value="Gepardo"/><label for="gepardo">Gepardo</label>
<input type="checkbox" name="animal" id="jaguar" value="Jaguar" /><label for="jaguar">Jaguar</label>
<label>
<input type="submit" value="ENVIAR" />
<input type="reset" value="CANCELAR" />
</label>
</form>
</div>
<script type="text/javascript">
function informarElegido (elemento) {
var elegido = 0;
var elementosObtenidos = document.getElementsByName(elemento);
var cont = "Animales que ha elegido que le gustan incluye: ";
for (var i = 0; i < elementosObtenidos.length; i++) {
if (elementosObtenidos[i].checked == true){
cont += elementosObtenidos[i].value + ", ";
elegido++;
}
};
cont = cont.substring(0, cont.length - 2); //Esto simplemente lo quise colocar porque no me gustaba que al final del cont quedara una ","
if (elegido) {
alert(cont);
}else{
alert("¡No ha elegido ningún animal!");
}
}
</script>
</body>
</html>
Modifica el código anterior para introducir div que simule un botón con el texto “Cambiar a Inglés” y otro div simulando un botón “Cambiar a español”. Al pulsar sobre el botón cambiar a inglés, debes acceder a los nodos del DOM de tipo label y usando relaciones de parentesco entre nodos acceder a aquellos nodos cuyo nodeValue es Nombre:, Apellidos:, y Correo electrónico: y cambiar su nodeValue por Name:, Surname: y e-mail:.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
label{
color: maroon;
display: block;
padding: 5px;
}
body{
background-color: white;
font-family: sans-serif;
}
#idioma{
display: inline-block;
padding: 5px;
}
</style>
</head>
<body>
<div id="cabecera">
<h1>Portal web aprendiendoaprogramar.com</h1>
<h2>Didactica y divulgacionde la programacion</h2>
</div>
<!--Formularion del contacto-->
<div style="width:450px; border: 1px solid black; padding: 0px 4px">
<form name="formularioContacto" class="formularioTipo1" method="get" action="accion.html" onclick="cambiarAspecto('label')">
<p>Si quieres contactar con nosotros envianos este formulario relleno:</p>
<label for="nombre"><span>Nombre: </span><input id="nombre" type="text" name="nombre" /></label>
<label for="apellidos"><span>Apellidos: </span><input id="apellidos" type="text" name="apellidos" /></label>
<label for="email"><span>Correo electronico: </span><input id="email" type="text" name="email" /></label>
<label>
<input type="submit" value="Enviar" />
<input type="reset" value="Cancelar" />
</label>
<div id="idioma">
<div style="width: 130px; height: 20px; border: 1px solid black; display: inline-block" onclick="ingles()">Cambiar a ingles</div>
<div style="width: 137px; height: 20px; border: 1px solid black; display: inline-block" onclick="español()">Cambiar a Español</div>
</div>
</form>
<script type="text/javascript">
function cambiarAspecto (elemento) {
var elementosObtenidos = document.getElementsByTagName(elemento);
elementosObtenidos[0].style.backgroundColor = "#FF6633";
elementosObtenidos[1].style.backgroundColor = "#FF9933";
elementosObtenidos[2].style.backgroundColor = "#FFCC33";
}
function español () {
var esp = document.getElementsByTagName("span");
esp[0].childNodes[0].nodeValue = "Nombre: ";
esp[1].childNodes[0].nodeValue = "Apellidos: ";
esp[2].childNodes[0].nodeValue = "Correo electronico: ";
}
function ingles () {
var eng = document.getElementsByTagName("span");
eng[0].childNodes[0].nodeValue = "Name: ";
eng[1].childNodes[0].nodeValue = "Surname: ";
eng[2].childNodes[0].nodeValue = "E-mail: ";
}
</script>
</div>
</body>
</html>
gracias por tu ayuda y por tus comentarios 
import java.util.*;
/**
* Write a description of class ListaCantantesFamosos here.
*
* @author (your name)
* @version (a version number or a date)
*/
public class ListaCantantesFamosos{
private Scanner sc = new Scanner(System.in);
private ArrayList<String> nombreCantantes;
public ListaCantantesFamosos(){
nombreCantantes = new ArrayList<String>();
nombreCantantes.add("Joe Arroyo");
nombreCantantes.add("Hector Lavoe");
nombreCantantes.add("Grupo niche");
}
public void addCantante(){
System.out.print("Ingrese su Cantante famoso: ");
String nom2 = sc.nextLine();
nombreCantantes.add(nom2);
}
public void getListaActualizada(){
System.out.println("Lista actualizada: ");
for(String i: nombreCantantes){
System.out.println(i);
}
}
public void continuidad(){
boolean aux = true;
while(aux == true){
System.out.print("Presione \"S\" si desea continuar. Presione \"N\" si desea salir del sistema: ");
String res = sc.nextLine();
if(res.equalsIgnoreCase("s")){
addCantante();
getListaActualizada();
aux = true;
}else if(res.equalsIgnoreCase("n")){
aux = false;
}
}
}
}
.
/**
* Write a description of class TestListaCantantesFamosos here.
*
* @author (your name)
* @version (a version number or a date)
*/
public class TestListaCantantesFamosos{
public TestListaCantantesFamosos(){
}
public static void main(String[] args){
ListaCantantesFamosos list = new ListaCantantesFamosos();
list.getListaActualizada();
list.addCantante();
list.getListaActualizada();
list.continuidad();
}
}
import java.util.*;
public class ListaCantantesFamosos{
private ArrayList<String> nombreCantantes;
public ListaCantantesFamosos(){
nombreCantantes = new ArrayList<String>();
nombreCantantes.add("Joe Arroyo");
nombreCantantes.add("Hector Lavoe");
nombreCantantes.add("Grupo niche");
}
public ArrayList<String> getNombreCantantes(){
return nombreCantantes;
}
public int getTamaño(){
return nombreCantantes.size();
}
public void addNombre(String nombre){
nombreCantantes.add(nombre);
}
}
import java.util.*;
public class TestListaCantantesFamosos{
public TestListaCantantesFamosos(){
}
public static void main(String[] args){
Scanner sc = new Scanner(System.in);
ListaCantantesFamosos list = new ListaCantantesFamosos();
System.out.print("Ingrese el primer Cantante famoso: ");
String nom1 = sc.nextLine();
list.addNombre(nom1);
System.out.print("Ingrese el segundo Cantante famoso: ");
String nom2 = sc.nextLine();
list.addNombre(nom2);
System.out.println(); //Lo puse para dejar un espacio.
System.out.println("Contenido de la lista en fila: " + list.getNombreCantantes());
System.out.println(); //Lo puse para dejar un espacio.
System.out.println("Contenido de la lista en columna: ");
for(int i = 0; i < list.getTamaño();i++){
System.out.println(list.getNombreCantantes().get(i));
}
}
}Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.
Abraham Lincoln (1808-1865) Presidente estadounidense.
aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación
RSS -
WAP2