Clase marzo 15 de 2017
Nos revisaron el proyecto.
El código del proyecto es el siguiente:
<!doctype html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space Science Website Template</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/mobile.css">
<script src="js/mobile.js" type="text/javascript"></script>
<script type="text/javascript">
function validar(){
var a=document.getElementById("ds").value;
var b=document.getElementById("dm").value;
if(!isNaN(b)){
if(b<=30 && b>=1){
if(a=="lunes" || a=="miercoles" ){
if(b%2==0){
var ventana = document.getElementById('vmodal');
ventana.style.top = "0px";
ventana.style.left = "2px";
ventana.style.display = 'block';
document.getElementById("m").innerHTML=" Puede transitar ";
}
else{
var ventana = document.getElementById('vmodal');
ventana.style.top = "70%";
ventana.style.bottom = "0px";
ventana.style.left = "2px";
ventana.style.display = 'block';
document.getElementById("m").innerHTML="No puede transitar ";
}
}
if(a=="martes" || a=="jueves" ){
if(b%2==0){
var ventana = document.getElementById('vmodal');
ventana.style.top = "0px";
ventana.style.left = "73%";
ventana.style.right = "0px";
ventana.style.display = 'block';
document.getElementById("m").innerHTML=" Puede transitar ";
}
else{
var ventana = document.getElementById('vmodal');
ventana.style.top = "70%";
ventana.style.bottom = "0px";
ventana.style.left = "73%";
ventana.style.right = "0px";
ventana.style.display = 'block';
document.getElementById("m").innerHTML="No puede transitar ";
}
}
}
else{
alert("Debe digitar un número que vaya del 1 al 30.");
}
}
else{
alert("Debe digitar un número.");
}
}
function cerrarVentana()
{
var ventana1 = document.getElementById('vmodal');
ventana1.style.display = 'none';
}
</script>
<style type="text/css">
.aceptar {
border-radius: 1em;
background-color: crimson;
color: white;
}
.ds {
margin-left: 400px;
}
.num {
display: block;
margin: 0;
width: 200px;
font-family: sans-serif;
font-size: 18px;
appearance: none;
box-shadow: none;
border-radius: 1em;
margin-left: 550px;
}
.boton {
border-radius: 1em;
color: white;
background-color: crimson;
margin-left: 600px;
size: 200px;
}
.ds {
border-radius: 20px;
height: 34px;
width: 240px;
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<div>
<a href="index.html" class="logo"><img src="images/logo.png" alt=""></a>
<ul id="navigation">
<li class="selected">
<a href="index.html">Inicio</a>
</li>
<li>
<a href="Derechos.html">Derechos</a>
</li>
</ul>
</div>
</div>
<div id="body" class="home">
<div id="vmodal" style="position: fixed; width: 200px; height: 150px; top: 0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; border: crimson; 3px solid; background-color: #FAFAFA; color: dimgray; display: none;">
<div style="font-weight: bold; text-align: left; color: #FFFFFF; padding: 5px; background-color: firebrick;" id="titulo"></div>
<p style="padding: 5px; text-align: justify; line-height:normal" id="m"></p>
<div style="padding: 10px; background-color: #F0F0F0; text-align: center; margin-top: 44px;">
<input class="aceptar" id="Aceptar" onClick="cerrarVentana();" name="Aceptar" size="20" type="button" value="Cerrar Ventana" />
</div>
</div>
<div class="header">
<div>
<img src="images/satellite.png" alt="" class="satellite">
<div class="col-md-6 col-md-offset-3">
<br>
<p class="textds"><h2>Seleccionar el día de la Semana:</h2></p>
<p>
<select class="ds" name="ds" id="ds">
<option value="lunes">Lunes</option>
<option value="martes">Martes</option>
<option value="miercoles">Miercoles</option>
<option value="jueves">Jueves</option>
</select>
</p>
<h2 ><label>Digite el día del mes (1 al 30)</label></h2>
<br><br>
<input class="num" type="text" name="dm" id="dm" maxlength="2">
<br><br>
<button class="boton" type="button" onclick='validar()' >Oprimir aqui</button>
<br><br>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Innerhtml:
<!DOCTYPE html>
<html>
<body>
<p id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed!";
}
</script>
</body>
</html>
tomado de:
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_innerhtml
Funciones matematicas:
Como realizar sumas de dos o mas números
1
2
|
var operador1, operador2, suma;
suma = operador1 + operador2;
|
Realizar resta (diferencia) de dos números
1
2
|
var operador1, operador2, resta;
resta = operador1 - operador2;
|
Multiplicación
1
2
|
var operador1, operador2, multiplicacion;
multiplicacion = operador1 * operador2;
|
División
1
2
|
var divisor, dividendo, division;
division = divisor / dividendo;
|
Potencia de un número
1
|
var potenica = Math.pow()
|
Raíz cuadrada
1
2
|
var raizCuadrara = Math.sqrt(9);
alert(raizCuadrara);
|
Redondear un valor
1
2
|
var redondea = Math.round(9.45);
alert("Valor redondeado 9.45= "+redondea);
|
Redondear un número al entero mas cercano
1
2
|
redondea = Math.ceil(9.01);
alert("Valor ceil 9.01= "+redondea);
|
Decrementar al entero inferior
1
2
|
redondea = Math.min(9.01);
alert("Valor min 9.01= "+redondea);
|
Decrementar al entero inferior
1
2
|
redondea = Math.floor(9.99);
alert("Valor floor 9.99= "+redondea);
|
// //decrementar al entero inferior
Obtener el valor máximo de una serie de valores
1
2
|
var valorMaximo = Math.max(20,15,10,3,28,64,74,13,76);
alert("El valor maximo es:"+valorMaximo);
|
// //Valor maximo de una serie de valores
Obtener el valor mínimo de una serie de valores
1
2
|
var valorMaximo = Math.min(20,15,10,3,28,64,74,13,76);
alert("El valor minimo es:"+valorMaximo);
|
// //Valor maximo de una serie de valores
Valor absoluto de un número
1
2
|
var absoluto = Math.abs(-10);
alert(absoluto);
|
// // valor absoluto
Calcular el seno de un número
1
2
|
var seno = Math.sin(30);
alert("El seno de 30 = "+seno);
|
// // Seno
Calcular el coseno de un número
1
2
|
var coseno = Math.cos(30);
alert("El coseno de 30 = "+coseno);
|
// // Coseno
Generar un número aleatorio
1
2
|
var aleatorio = Math.random();
alert(aleatorio);
|
// //Generar valor aleatorio
Generar un número aleatorio de 0 a X
1
2
|
var aleatorio = Math.floor(Math.random()*101);
alert(aleatorio);
|
// //Generar valor aleatorio entre 0 a 100
Generar un número aleatorio de 0 a X con decimales
//Generar valor aleatorio entre 0 a 10
1
2
|
var aleatorio = Math.floor(Math.random()*10) + Math.random();
alert(aleatorio);
|
Obtener el valor de PI
1
|
alert(Math.PI);
tomado de: http://artistasdigitales.com/javascript-operaciones-y-funciones-matematicas-basicas/
|
3.5.1. Funciones útiles para cadenas de texto
A continuación se muestran algunas de las funciones más útiles para el manejo de cadenas de texto:
length, calcula la longitud de una cadena de texto (el número de caracteres que la forman)
var mensaje = "Hola Mundo";
var numeroLetras = mensaje.length; // numeroLetras = 10
+, se emplea para concatenar varias cadenas de texto
var mensaje1 = "Hola";
var mensaje2 = " Mundo";
var mensaje = mensaje1 + mensaje2; // mensaje = "Hola Mundo"
Además del operador +, también se puede utilizar la función concat()
var mensaje1 = "Hola";
var mensaje2 = mensaje1.concat(" Mundo"); // mensaje2 = "Hola Mundo"
Las cadenas de texto también se pueden unir con variables numéricas:
var variable1 = "Hola ";
var variable2 = 3;
var mensaje = variable1 + variable2; // mensaje = "Hola 3"
Cuando se unen varias cadenas de texto es habitual olvidar añadir un espacio de separación entre las palabras:
var mensaje1 = "Hola";
var mensaje2 = "Mundo";
var mensaje = mensaje1 + mensaje2; // mensaje = "HolaMundo"
Los espacios en blanco se pueden añadir al final o al principio de las cadenas y también se pueden indicar forma explícita:
var mensaje1 = "Hola";
var mensaje2 = "Mundo";
var mensaje = mensaje1 + " " + mensaje2; // mensaje = "Hola Mundo"
toUpperCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en mayúsculas:
var mensaje1 = "Hola";
var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA"
toLowerCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en minúsculas:
var mensaje1 = "HolA";
var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola"
charAt(posicion), obtiene el carácter que se encuentra en la posición indicada:
var mensaje = "Hola";
var letra = mensaje.charAt(0); // letra = H
letra = mensaje.charAt(2); // letra = l
indexOf(caracter), calcula la posición en la que se encuentra el carácter indicado dentro de la cadena de texto. Si el carácter se incluye varias veces dentro de la cadena de texto, se devuelve su primera posición empezando a buscar desde la izquierda. Si la cadena no contiene el carácter, la función devuelve el valor -1:
var mensaje = "Hola";
var posicion = mensaje.indexOf('a'); // posicion = 3
posicion = mensaje.indexOf('b'); // posicion = -1
Su función análoga es lastIndexOf():
lastIndexOf(caracter), calcula la última posición en la que se encuentra el carácter indicado dentro de la cadena de texto. Si la cadena no contiene el carácter, la función devuelve el valor -1:
var mensaje = "Hola";
var posicion = mensaje.lastIndexOf('a'); // posicion = 3
posicion = mensaje.lastIndexOf('b'); // posicion = -1
La función lastIndexOf() comienza su búsqueda desde el final de la cadena hacia el principio, aunque la posición devuelta es la correcta empezando a contar desde el principio de la palabra.
substring(inicio, final), extrae una porción de una cadena de texto. El segundo parámetro es opcional. Si sólo se indica el parámetro inicio, la función devuelve la parte de la cadena original correspondiente desde esa posición hasta el final:
var mensaje = "Hola Mundo";
var porcion = mensaje.substring(2); // porcion = "la Mundo"
porcion = mensaje.substring(5); // porcion = "Mundo"
porcion = mensaje.substring(7); // porcion = "ndo"
Si se indica un inicio negativo, se devuelve la misma cadena original:
var mensaje = "Hola Mundo";
var porcion = mensaje.substring(-2); // porcion = "Hola Mundo"
Cuando se indica el inicio y el final, se devuelve la parte de la cadena original comprendida entre la posición inicial y la inmediatamente anterior a la posición final (es decir, la posición inicio está incluida y la posición final no):
var mensaje = "Hola Mundo";
var porcion = mensaje.substring(1, 8); // porcion = "ola Mun"
porcion = mensaje.substring(3, 4); // porcion = "a"
Si se indica un final más pequeño que el inicio, JavaScript los considera de forma inversa, ya que automáticamente asigna el valor más pequeño al inicio y el más grande al final:
var mensaje = "Hola Mundo";
var porcion = mensaje.substring(5, 0); // porcion = "Hola "
porcion = mensaje.substring(0, 5); // porcion = "Hola "
split(separador), convierte una cadena de texto en un array de cadenas de texto. La función parte la cadena de texto determinando sus trozos a partir del carácter separador indicado:
var mensaje = "Hola Mundo, soy una cadena de texto!";
var palabras = mensaje.split(" ");
// palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"];
Con esta función se pueden extraer fácilmente las letras que forman una palabra:
var palabra = "Hola";
var letras = palabra.split(""); // letras = ["H", "o", "l", "a"]
3.5.2. Funciones útiles para arrays
A continuación se muestran algunas de las funciones más útiles para el manejo de arrays:
length, calcula el número de elementos de un array
var vocales = ["a", "e", "i", "o", "u"];
var numeroVocales = vocales.length; // numeroVocales = 5
concat(), se emplea para concatenar los elementos de varios arrays
var array1 = [1, 2, 3];
array2 = array1.concat(4, 5, 6); // array2 = [1, 2, 3, 4, 5, 6]
array3 = array1.concat([4, 5, 6]); // array3 = [1, 2, 3, 4, 5, 6]
join(separador), es la función contraria a split(). Une todos los elementos de un array para formar una cadena de texto. Para unir los elementos se utiliza el carácter separador indicado
var array = ["hola", "mundo"];
var mensaje = array.join(""); // mensaje = "holamundo"
mensaje = array.join(" "); // mensaje = "hola mundo"
pop(), elimina el último elemento del array y lo devuelve. El array original se modifica y su longitud disminuye en 1 elemento.
var array = [1, 2, 3];
var ultimo = array.pop();
// ahora array = [1, 2], ultimo = 3
push(), añade un elemento al final del array. El array original se modifica y aumenta su longitud en 1 elemento. (También es posible añadir más de un elemento a la vez)
var array = [1, 2, 3];
array.push(4);
// ahora array = [1, 2, 3, 4]
shift(), elimina el primer elemento del array y lo devuelve. El array original se ve modificado y su longitud disminuida en 1 elemento.
var array = [1, 2, 3];
var primero = array.shift();
// ahora array = [2, 3], primero = 1
unshift(), añade un elemento al principio del array. El array original se modifica y aumenta su longitud en 1 elemento. (También es posible añadir más de un elemento a la vez)
var array = [1, 2, 3];
array.unshift(0);
// ahora array = [0, 1, 2, 3]
reverse(), modifica un array colocando sus elementos en el orden inverso a su posición original:
var array = [1, 2, 3];
array.reverse();
// ahora array = [3, 2, 1]
3.5.3. Funciones útiles para números
A continuación se muestran algunas de las funciones y propiedades más útiles para el manejo de números.
NaN, (del inglés, "Not a Number") JavaScript emplea el valor NaN para indicar un valor numérico no definido (por ejemplo, la división 0/0).
var numero1 = 0;
var numero2 = 0;
alert(numero1/numero2); // se muestra el valor NaN
isNaN(), permite proteger a la aplicación de posibles valores numéricos no definidos
var numero1 = 0;
var numero2 = 0;
if(isNaN(numero1/numero2)) {
alert("La división no está definida para los números indicados");
}
else {
alert("La división es igual a => " + numero1/numero2);
}
Infinity, hace referencia a un valor numérico infinito y positivo (también existe el valor –Infinity para los infinitos negativos)
var numero1 = 10;
var numero2 = 0;
alert(numero1/numero2); // se muestra el valor Infinity
toFixed(digitos), devuelve el número original con tantos decimales como los indicados por el parámetro digitos y realiza los redondeos necesarios. Se trata de una función muy útil por ejemplo para mostrar precios.
var numero1 = 4564.34567;
numero1.toFixed(2); // 4564.35
numero1.toFixed(6); // 4564.345670
numero1.toFixed(); // 4564
tomado de: http://librosweb.es/libro/javascript/capitulo_3/funciones_y_propiedades_basicas_de_javascript.html
