Este fue el último día de clases, pasé la materia de informática, y los que no deben ir a nivelar nada ya entran a vacaciones.
Este fue el último día de clases, pasé la materia de informática, y los que no deben ir a nivelar nada ya entran a vacaciones.
PROYECTO:
El día de hoy se entregó el proyecto, que consistía en simular un sitio web con base a un template gratis, el tema del sitio web era sobre personajes animados, en mi caso me correspondió Jimmy Neutrón.El proyecto debía ser entregado en un CD y tener varios módulos, estos son:
-Módulo principal
-Módulo de personajes
-(OPCIONAL) al dar click sobre la imagen del personaje dirigirse a otra página con la información de este.
-Módulo de derechos(En este debe ir los nombres y apellidos, con una imagen del estudiante indicando porque le gusta el tema seleccionado.
A continuación, algunos ejercicios en JavaScript
Ciclo flor y ciclo while:
<html>
<head>
<title>Ciclo for</title>
</head>
<body>
<script>
var dias = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado", "Domingo"];
for( i = 0; i <= dias.length - 1; i = i + 1)
{document.write(dias[i] + "<br>");}
</script>
<hr/>
<script>
var dias = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado", "Domingo"];
var numerodias = dias.length -1;
var i = 0;
while (i<=numerodias){document.write( dias[i] + "<br>"); i=i+1;}
</script>
</body>
</html>
Otro ejercicio con condicionales:
<html>
<head>
<title>Condicionales</title>
</head>
<body>
<script>
var nombre = "Nicola", edad = 15;
if( nombre == "Nicolas" )
{document.write("Bienvenido " + nombre);}
else if(nombre == "Carlos")
{document.write("Bienvenido " + nombre);}
else{document.write("Bienvenido anonimo");}
if (edad >= 18 || nombre == "Carlos"){document.write("Bienvenido, se te ha permitido ingresar");}
else if (nombre == "Nicolas"){document.write("Bienvenido " + nombre);}
else {document.write("No estas permitido a ingresar");}
</script>
</body>
</html>
El día de hoy se hizo la introducción al proyecto, explicando en qué consiste y se dió las pautas para el mismo, además, se explicaron las bases para comenzar a realizarlo.
El proyecto consiste en crear una página web sobre una caricatura, la página web es un template descargado de internet, pero se personaliza de acuerdo al personaje, en mi caso, es Jimmy Neutrón.
¿Que es un template?
Un template es un conjunto de archivos que determinan la estructura y el aspecto visual de un sitio web, y tiene como ventaja principal disminuir tiempos y costos de desarrollo.
Un template es la solución ideal para muchos sitios web institucionales, ya que permiten resolver el aspecto gráfico del sitio en forma rápida y eficiente. Por supuesto que dependerá de cada empresa comprar un template o elegir
Elementos de un template
-Regiones: Son las áreas donde van los bloques de contenido.
-Gama de colores: Por lo general se utilizan entre dos y tres colores principales que hacen a la estética del sitio.
-Tipografías: Un template contempla los tamaños que deberían tener las tipografías, como así también el tipo de fuente a utilizar a lo largo de todo el sitio.
-Menúes de navegación: Por lo general se contempla un menú principal y uno secundario. Es importante que el diseño del menú principal esté cuidadosamente diseñado.
-Botones: Los botones son fundamentales en el sentido que los entendamos como verdaderos call to action.
-Formularios: En todo sitio web hay al menos un formulario de contacto que tiene elementos como las etiquetas (labels) y los cuadros de texto (form-text).
Tomado de: http://www.glidea.com.ar/blog/que-es-un-template
El proyecto consiste en crear una página web sobre una caricatura, la página web es un template descargado de internet, pero se personaliza de acuerdo al personaje, en mi caso, es Jimmy Neutrón.
¿Que es un template?
Un template es un conjunto de archivos que determinan la estructura y el aspecto visual de un sitio web, y tiene como ventaja principal disminuir tiempos y costos de desarrollo.
Un template es la solución ideal para muchos sitios web institucionales, ya que permiten resolver el aspecto gráfico del sitio en forma rápida y eficiente. Por supuesto que dependerá de cada empresa comprar un template o elegir
Elementos de un template
-Regiones: Son las áreas donde van los bloques de contenido.
-Gama de colores: Por lo general se utilizan entre dos y tres colores principales que hacen a la estética del sitio.
-Tipografías: Un template contempla los tamaños que deberían tener las tipografías, como así también el tipo de fuente a utilizar a lo largo de todo el sitio.
-Menúes de navegación: Por lo general se contempla un menú principal y uno secundario. Es importante que el diseño del menú principal esté cuidadosamente diseñado.
-Botones: Los botones son fundamentales en el sentido que los entendamos como verdaderos call to action.
-Formularios: En todo sitio web hay al menos un formulario de contacto que tiene elementos como las etiquetas (labels) y los cuadros de texto (form-text).
Tomado de: http://www.glidea.com.ar/blog/que-es-un-template
A continuación, algunos ejercicios en JavaScript:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
var a = parseFloat(prompt("Ingrese el primer numero, en caso de resta o division este es el numero al que se restara o dividira"));
var b = parseFloat(prompt("Ingrese el segundo numero"));
var multiplicacion = a * b
var div = a / b
var suma = a + b
var resta = a - b
document.write("suma="+suma + "<br>" + "resta="+resta + "<br>" + "multiplicacion="+multiplicacion + "<br>" + "division=" + division)
</script>
</body>
</html>
________________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fahrenheit a Celcius</title>
</head>
<body>
<script>
var fahrenheit = parseFloat(prompt("Ingrese el valor en fahrenheit"));
var celcius = (fahrenheit - 32)*5/9;
if (fahrenheit <= 100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000)
{alert(celcius);}
else{alert("Error, debe digitar un número.")}
</script>
</body>
</html>
El día de hoy se realizó una evaluación con las siguientes preguntas:
1. Defina que es una ventana emergente o popup.
2. Escriba la URL de lugar donde se investigó.
3. Escriba el código para llamar ventanas popup.
Esta es la solución a las tres preguntas anteriores:
1. Un pop-up o ventana pop-up o ventana emergente, es una ventana nueva que aparece de repente en la pantalla de tu ordenador.
2. http://www.ajaxshake.com/
3. function popup(){
window.open("https://www.youtube.com/" , "youtube" , "width=600" , "height=600");}
<a href="https://www.google.com.co/" target="_blank" onclick="javascript:popup()"> Google y youtube </a>
1. Defina que es una ventana emergente o popup.
2. Escriba la URL de lugar donde se investigó.
3. Escriba el código para llamar ventanas popup.
Esta es la solución a las tres preguntas anteriores:
1. Un pop-up o ventana pop-up o ventana emergente, es una ventana nueva que aparece de repente en la pantalla de tu ordenador.
2. http://www.ajaxshake.com/
3. function popup(){
window.open("https://www.youtube.com/" , "youtube" , "width=600" , "height=600");}
<a href="https://www.google.com.co/" target="_blank" onclick="javascript:popup()"> Google y youtube </a>
A continuación, algunos ejercicios de javascript.
Ejemplo de prompt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Prompt</title>
</head>
<body>
<script>
var nombre = prompt("Ingrese su nombre" , "sálociN")
var edad = prompt("Ingrese su edad" , "51")
var color = prompt("Ingrese su color favorito" , "☺☻")
document.write("Hola " + nombre + " tienes " + edad +" años y tu color favorito es el " + color)
</script>
</body>
</html>
Ejemplo de funciones:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Ejercicio 8 - Funciones básicas</title>
<script type="text/javascript">
//Escribir el código de una función a la que se pasa como parámetro un número entero y devuelve como resultado una cadena de texto que indica si el número es par o impar. Mostrar por pantalla el resultado devuelto por la función.
var numero = prompt("Introduce un número entero");
var resultado = parImpar(numero);
alert("El número "+numero+" es "+resultado);
function parImpar(numero) {
if(numero % 2 == 0) {
return "par";
}
else {
return "impar";
}
}
</script>
</head>
<body>
</body>
</html>
Ejemplo de confirm.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Confirm</title>
</head>
<body>
<script>
//Confirm se usa para que aparezca en pantalla un cuadro con una pregunta en donde solo hay dos opciones de respuesta, una es aceptar y la otra es cancelar (true y false respectivamente)
if (confirm("Hola, ¿eres mayor de edad?"))
{alert("Bienvenido al sitio web.");}
else
{alert("Lo siento, no eres mayor de edad")}
</script>
</body>
</html>
Por último, un ejercicio que iba a ser una evaluación pero se cancelo, el ejercicio tiene que ver con el iva.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IVA</title>
</head>
<body>
<script>
var valor = parseFloat(prompt("Digite el valor","498"));
var iva = (valor*0.16);
var valorconiva = valor + iva;
if (valorconiva > 100)
{var sin = Math.sin(valorconiva)
document.write(sin)}
else
{for(i = 1; i<=10; i++)
{document.write("<hr>")}}
</script>
</body>
</html>
El día de hoy se resolvieron dudas referentes a la clase pasada, y se realizó una evaluación grupal.
A continuación, algunos códigos Javascript.
Utilizando confirm:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Confirm</title>
</head>
<body>
<script>
//Confirm se usa para que aparezca en pantalla un cuadro con una pregunta en donde solo hay dos opciones de respuesta, una es aceptar y la otra es cancelar (true y false respectivamente)
if (confirm("Hola, ¿eres mayor de edad?"))
{alert("Bienvenido al sitio web.");}
else
{alert("Lo siento, no eres mayor de edad")}
</script>
</body>
</html>
Utilizando prompt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Prompt</title>
</head>
<body>
<script>
var nombre = prompt("Ingrese su nombre" , "sálociN")
var edad = prompt("Ingrese su edad" , "51")
var color = prompt("Ingrese su color favorito" , "☺☻")
document.write("Hola " + nombre + " tienes " + edad +" años y tu color favorito es el " + color)
</script>
</body>
</html>
Finalmente, utilizando funciones.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Funciones</title>
</head>
<body>
<script>
function ejemploresta()
{resultado = numero1 - numero2;
document.write(resultado + "<hr>");}
var numero1 = 54
var numero2 = 32
ejemploresta();
var numero1 = 165
var numero2 = 132
ejemploresta();
document.write("<br><br><hr>");
function ejemplosuma(primernumero,segundonumero)
{resultado = primernumero + segundonumero;
document.write(resultado + "<hr>"); return resultado;}
ejemplosuma(65,549);
ejemplosuma(52,195);
ejemplosuma(15,165);
document.write(resultado);
</script>
</body>
</html>
El dia de hoy se resolvieron dudas con respecto a la información publicada en la página web coinsda, además, también se reforzó el tema de JavaScript.
A continuación, algunos ejercicios donde se utiliza el JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Funciones básicas JavaScript</title>
</head>
<body>
<h1>Funciones para cadenas de texto</h1>
<script>
//mensaje.length; sirve para mostrar el numero de letras.
var mensaje="Hola mundo";
var numeroLetras = mensaje.length;
document.write(numeroLetras , ("<hr>"));
//El signo [+] se utiliza para concatenar varias cadenas de texto.
var mensaje1=" Habia";
var mensaje2=" una";
var mensaje3=" vez";
document.write(mensaje1+mensaje2+mensaje3 , ("<hr>"));
//Además del signo [+] se puede utilizar la funcion "concat()"
var mensajeconcat = mensaje1.concat(mensaje3 + mensaje2);
document.write(mensajeconcat , ("<hr>"));
//Las cadenas de texto también se pueden unir con variables numéricas.
var variable1="Hola";
var variablenum="498";
document.write(variable1.concat(" " + variablenum) , ("<hr>"));
//toUpperCase() transforma los caracteres de una cadena de texto en mayuscula y toLowerCase() en minúscula.
var mayuscula="EjEmPlO EN MayuSCULA, MinúSCULA y NorMaL";
document.write(mayuscula , "<br>");
document.write(mayuscula.toUpperCase(), "<br>");
document.write(mayuscula.toLowerCase(), "<hr>");
//charAt(posicion), obtiene el carácter que se encuentra en la posición indicada.
var mensajeposición = "Hola";
var letra = mensajeposición.charAt(1);
document.write(letra);
letra = mensaje.charAt(3);
document.write(letra , "<hr>");
//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 adios";
var posición = mensaje.indexOf("s");
document.write(posición , "<hr>");
//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 posición = mensaje.lastIndexOf("o");
document.write(posición , "<hr>");
//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, si se indica un inicio negativo, se devuelve la misma cadena original.
var porción = mensaje.substring(2 , 7);
document.write(porción , "<hr>");
//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 = "Esto es una cadena de texto";
var palabras = mensaje.split(" ");
document.write(palabras , "<hr>");
var palabra = mensaje.split("");
document.write(palabra, "<hr><h1> Funciones para arrays </h1><hr>");
//Entre las funciones útiles para arrays tambien estan length, concat().
var vocales = ["a", "e", "i", "o", "u"];
document.write(vocales.length, "<hr>");
var array1 = ["1", "2", "3"];
var array2 = ["4", "5", "6"];
var arrayhecho = array1.concat(array2);
document.write(array1.concat(["4", "9", "8"]), "<hr>");
//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" , "y" ,"adios"];
var arrayjoin = array.join(" ");
document.write(arrayjoin , "<hr>");
//pop(), elimina el último elemento del array y lo devuelve. El array original se modifica y su longitud disminuye en 1 elemento.
var arraypop = array.pop();
document.write(array + "------------" + arraypop , "<br>" , array.length , "<hr>");
//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 arraypush = array.push("jaja");
document.write(array + "<hr>");
//shift(), elimina el primer elemento del array y lo devuelve. El array original se ve modificado y su longitud disminuida en 1 elemento.
var arrayshift = array.shift();
document.write(array + "-----" +arrayshift + "<hr>");
//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 arrayunshift = array.unshift("Gracias");
document.write(array , "<hr>");
//reverse(), modifica un array colocando sus elementos en el orden inverso a su posición original:
var arrayreverse = array.reverse();
document.write(array + "<hr>" +"<h1>Funciones para numeros</h1>" +"<hr>");
//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);
//isNaN(), permite proteger a la aplicación de posibles valores numéricos no definidos
if(isNaN(numero1/numero2)) {alert("La división no esta definida para los numeros 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);
//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 numero3 = 79657.79879
var numtoFixed = numero3.toFixed(4);
document.write(numtoFixed)
</script>
</body>
</html>
A continuación, algunos ejercicios donde se utiliza el JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Funciones básicas JavaScript</title>
</head>
<body>
<h1>Funciones para cadenas de texto</h1>
<script>
//mensaje.length; sirve para mostrar el numero de letras.
var mensaje="Hola mundo";
var numeroLetras = mensaje.length;
document.write(numeroLetras , ("<hr>"));
//El signo [+] se utiliza para concatenar varias cadenas de texto.
var mensaje1=" Habia";
var mensaje2=" una";
var mensaje3=" vez";
document.write(mensaje1+mensaje2+mensaje3 , ("<hr>"));
//Además del signo [+] se puede utilizar la funcion "concat()"
var mensajeconcat = mensaje1.concat(mensaje3 + mensaje2);
document.write(mensajeconcat , ("<hr>"));
//Las cadenas de texto también se pueden unir con variables numéricas.
var variable1="Hola";
var variablenum="498";
document.write(variable1.concat(" " + variablenum) , ("<hr>"));
//toUpperCase() transforma los caracteres de una cadena de texto en mayuscula y toLowerCase() en minúscula.
var mayuscula="EjEmPlO EN MayuSCULA, MinúSCULA y NorMaL";
document.write(mayuscula , "<br>");
document.write(mayuscula.toUpperCase(), "<br>");
document.write(mayuscula.toLowerCase(), "<hr>");
//charAt(posicion), obtiene el carácter que se encuentra en la posición indicada.
var mensajeposición = "Hola";
var letra = mensajeposición.charAt(1);
document.write(letra);
letra = mensaje.charAt(3);
document.write(letra , "<hr>");
//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 adios";
var posición = mensaje.indexOf("s");
document.write(posición , "<hr>");
//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 posición = mensaje.lastIndexOf("o");
document.write(posición , "<hr>");
//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, si se indica un inicio negativo, se devuelve la misma cadena original.
var porción = mensaje.substring(2 , 7);
document.write(porción , "<hr>");
//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 = "Esto es una cadena de texto";
var palabras = mensaje.split(" ");
document.write(palabras , "<hr>");
var palabra = mensaje.split("");
document.write(palabra, "<hr><h1> Funciones para arrays </h1><hr>");
//Entre las funciones útiles para arrays tambien estan length, concat().
var vocales = ["a", "e", "i", "o", "u"];
document.write(vocales.length, "<hr>");
var array1 = ["1", "2", "3"];
var array2 = ["4", "5", "6"];
var arrayhecho = array1.concat(array2);
document.write(array1.concat(["4", "9", "8"]), "<hr>");
//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" , "y" ,"adios"];
var arrayjoin = array.join(" ");
document.write(arrayjoin , "<hr>");
//pop(), elimina el último elemento del array y lo devuelve. El array original se modifica y su longitud disminuye en 1 elemento.
var arraypop = array.pop();
document.write(array + "------------" + arraypop , "<br>" , array.length , "<hr>");
//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 arraypush = array.push("jaja");
document.write(array + "<hr>");
//shift(), elimina el primer elemento del array y lo devuelve. El array original se ve modificado y su longitud disminuida en 1 elemento.
var arrayshift = array.shift();
document.write(array + "-----" +arrayshift + "<hr>");
//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 arrayunshift = array.unshift("Gracias");
document.write(array , "<hr>");
//reverse(), modifica un array colocando sus elementos en el orden inverso a su posición original:
var arrayreverse = array.reverse();
document.write(array + "<hr>" +"<h1>Funciones para numeros</h1>" +"<hr>");
//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);
//isNaN(), permite proteger a la aplicación de posibles valores numéricos no definidos
if(isNaN(numero1/numero2)) {alert("La división no esta definida para los numeros 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);
//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 numero3 = 79657.79879
var numtoFixed = numero3.toFixed(4);
document.write(numtoFixed)
</script>
</body>
</html>
Continuación de JavaScript.
El día de hoy se siguió con la explicación de JavaScript y se hizo una evaluación.
A continuación, pondré diferentes ejemplos de códigos que utilizan JavaScript.
El siguiente ejemplo trata de insertar código JavaScript que este en un archivo externo y no dentro de el código, para insertar el código JavaScript se debe colocar src="ubicación.js"
y quedaría así: <script src="codigo.js"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejercicios</title>
<script src="codigo.js"></script>
</head>
<body>
<p>Esta página contiene el primer script</p><br>
<p><noscript>Esta página <strong>requiere</strong> el uso de JavaScript y parece que está desactivado</noscript></p>
</body>
</html>
Y a continuación, el archivo externo que contiene el código JavaScript.
alert("Hola mundo");
alert("Soy el primer script")
El próximo ejercicio se utilizan arrays, el código trata sobre poner en un array los meses del año y presentarlos en pantalla con un alert.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejercicio3</title>
</head>
<body>
<script>
var meses = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];
alert(meses[0])
alert(meses[1])
alert(meses[2])
alert(meses[3])
alert(meses[4])
alert(meses[5])
alert(meses[6])
alert(meses[7])
alert(meses[8])
alert(meses[9])
alert(meses[10])
alert(meses[11])
</script>
<p>Esta página muestra los 12 meses del año</p>
</body>
</html>
El día de hoy se siguió con la explicación de JavaScript y se hizo una evaluación.
A continuación, pondré diferentes ejemplos de códigos que utilizan JavaScript.
El siguiente ejemplo trata de insertar código JavaScript que este en un archivo externo y no dentro de el código, para insertar el código JavaScript se debe colocar src="ubicación.js"
y quedaría así: <script src="codigo.js"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejercicios</title>
<script src="codigo.js"></script>
</head>
<body>
<p>Esta página contiene el primer script</p><br>
<p><noscript>Esta página <strong>requiere</strong> el uso de JavaScript y parece que está desactivado</noscript></p>
</body>
</html>
Y a continuación, el archivo externo que contiene el código JavaScript.
alert("Hola mundo");
alert("Soy el primer script")
El próximo ejercicio se utilizan arrays, el código trata sobre poner en un array los meses del año y presentarlos en pantalla con un alert.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejercicio3</title>
</head>
<body>
<script>
var meses = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];
alert(meses[0])
alert(meses[1])
alert(meses[2])
alert(meses[3])
alert(meses[4])
alert(meses[5])
alert(meses[6])
alert(meses[7])
alert(meses[8])
alert(meses[9])
alert(meses[10])
alert(meses[11])
</script>
<p>Esta página muestra los 12 meses del año</p>
</body>
</html>
A continuación, la mayoría de los operadores aritméticos en JavaScript, donde se señala que es de cada uno por medio de un comentario (//).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Operadores aritméticos</title>
</head>
<body>
<script>
//Suma
var num1 = 561;
var num2 = "Buenas";
var num3 = " tardes";
var num4 = 498;
document.write(num1 + num4, "<hr>");
document.write(num2 + num3, "<hr>");
//Resta
var num1 = 45;
var num2 = 12;
var resta = num1 - num2;
document.write(resta, "<br>" , -resta , "<hr>");
//Producto (*) y cociente (/)
var num1 = 10000;
var num2 = 5;
var mult = num1 * num2;
var div = num1 / num2;
document.write(mult + "<br>" + div + "<hr>" );
//Resto de una división (%)
var num1 = 100;
var num2 = 6;
document.write(num1 % num2, "<hr>");
//Incremento (++) y decremento (--)
var num1 = 100;
var num2 = 200;
var incremento = ++num1;
var decremento = --num2;
document.write(incremento , "<br>", decremento + "<hr>")
//Operadores compuestos
var num1 = 11546 , num2 = "Hol";
num1+= 11546;
document.write(num1 + "<br>");
num1-= 3;
num2+= "a";
document.write(num1 + "<br>" + num2 + "<hr>");
//Potencia
var potencia = Math.pow(2 , 2);
document.write(potencia + "<hr>");
//Raiz cuadrada
var raizcuadrada = Math.sqrt(9);
document.write(raizcuadrada + "<hr>");
//Redondear numero al mas cercano
var redondear = Math.round(11.49);
document.write(redondear + "<hr>");
//Redondear al entero mas cercano
var redondear = Math.ceil(11.50);
document.write(redondear + "<hr>");
//Decrementar al entero inferior
var redondea = Math.floor(11.99);
document.write(redondear , "<br>" + redondea + "<hr>");
//Obtener el valor mínimo de una serie de valores y máximo
var ValorMinimo = Math.min(70,71,72,73,74,75,76,77,78,79,80);
document.write(ValorMinimo + "<br>");
var ValorMaximo = Math.max(70,71,72,73,74,75,76,77,78,79,80);
document.write(ValorMaximo + "<hr>");
//Valor absoluto de un número
var valorabsoluto = Math.abs(-88.87);
document.write(valorabsoluto + "<hr>");
//Seno y coseno
var seno = Math.sin(30);
document.write(seno + "<br>");
var coseno = Math.cos(30);
document.write(coseno + "<hr>");
//Generar un número aleatorio
var aleatorio = Math.random();
document.write(aleatorio + "<hr>");
//Generar un número aleatorio de 0 a X
var aleatorio = Math.floor(Math.random()*101);
document.write(aleatorio + "<hr>");
//Generar un número aleatorio de 0 a X con decimales
var aleatorio = Math.floor(Math.random()*10) + Math.random();
document.write(aleatorio);
//Obtener el valor de PI
alert(Math.PI);
</script>
</body>
</html>
Introducción a JavaScript.
El dia de hoy se hizo la introducción al nuevo tema, JavaScript.
JavaScript es un lenguaje de programación que es usado principalmente para crear páginas web dinámicas.
Para comenzar a escribir código JavaScript primero se debe abrir la etiqueta script,(<script>) se recomienda cerrarla una vez sea abierta para que después no se olvide cerrarla y tener inconvenientes.
Algunas cosas que se deben saber sobre JavaScript:
document.write es usado para imprimir en la página web un texto especificado, también se puede combinar con código html.
document.write("ejemplo")
alert es usado para mostrar en la página web un cuadro de alerta.
alert("ejemplo")
La diferencia entre document.write y alert es que alert es un cuadro de alerta que sale y se puede quitar, y document.write es un texto pegado a la página; otra diferencia es que en alert no se puede usar código html, mientras que en document.write si se puede.
Para definir una variable, se usa "var ejemplo = "hola" aunque su uso no es necesario, pero es mejor usarlo.
Para concatenar varias cadenas de texto se usa el signo [+] aunque también sirve la coma [,]
var ejemplo1 = "Hola, como"
var ejemplo2 = " estas"
document.write(ejemplo1 + ejemplo2)
De esta manera se mostrará en pantalla el texto "Hola, como estas"
Con Javascript también se pueden hacer operaciones matemáticas.
var ejemplo1 = 13
var ejemplo2 = 19
var resultado = ejemplo1 + ejemplo2
document.write(resultado)
De esta manera se mostrará en pantalla la suma entre la variable 1 y la variable 2, que es 32. Además de sumas también se pueden hacer restas, multiplicaciones, divisiones y más.
[+ , - , * , /]
Semana de receso.
Este día no hubo clase debido a que estábamos en una semana de receso pero dejare un ejercicio de html.
<!DOCTYPE html><html><head> <title></title><style>body{font-family:verdana;}</style></head><body><em><mark>HOLA<br><sup>como</sup><sub>estas</sub></mark></em><map name="prueba"><area alt="Nasa" shape="rect" coords="260,54,362,156" href="https://www.nasa.gov/" target="_blank"><area alt="Math" shape="circle" coords="101,104,51" href="https://www.mathway.com/Algebra" target="_blank"><area alt="English" shape="poly" coords="119,180,324,180,255,272,323,334,198,393,80,326" href="http://www.englishpage.com/" target="_blank"></map>
<img src="D:/Cursos basicos/html/imagenes/mapagen.png" usemap="#prueba">
</body></html>
Es un código utilizando la etiqueta <map>.
<img src="D:/Cursos basicos/html/imagenes/mapagen.png" usemap="#prueba">
</body></html>
Es un código utilizando la etiqueta <map>.
Suscribirse a:
Entradas (Atom)
Publicar un comentario