Scribd Logo
Upload

Welcome to Scribd!

  • Lectura 01

    Uploaded by

    Perla Maria Hernandez Vazquez
    32 views34 pages

    Original Title

    Lectura01

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    32 views34 pages

    Lectura 01

    Uploaded by

    Perla Maria Hernandez Vazquez

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 34

    Visualizacin de la Informacin

    HTML/JavaScript Funciones, eventos, formas Rafael Lemuz Lpez

    HTML
    Cuales son las partes principales de un documento HTML?
    <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8" /> <title> Elementos Basicos </title> </head> <body> <form> </form> </body> </html>

    Hacer un pgina HTML para mostrar el juego cara/cruz


    Cambiar imagen Variables Funciones matemticas
    Math.random()

    Sentencia if Definicin de Funciones Llamadas a Funciones

    Cambiar imagenes
    La etiqueta img (y otras) pueden tener un nombre: <img name="moneda" src="blank.gif"> Las etiquetas HTML adems tienen atributos.
    name y src son los atributos.

    En el cdigo se puede cambiar la imagen que se mostrar haciendo referencia al atributo src del elemento img de cierto nombre name: ej. moneda document.moneda.src = "cara.gif"

    Variables
    Una variable asocia un nombre a un valor. En el cdigo se utilizan los nombres de las variables cuando ya tienen un valor. Los valores son de ciertos tipos: enteros, texto, booleanos entre otros JavaScript y ActionScript tienen la sentencia var para definir e inicializar variables. var size = 25; var classname = "Multimedia"; var st = "Un nombre"; Se puede hacer referenica a las variables y cambiar su valor. document.write( En la clase " + classname + " esta inscirto "+ st); size = size + 1; equivalente a size++;

    Arreglos de Variables
    Almacenan valores de un mismo tipo
    int, number, string, Boolean

    var alumnos = ["Juan", "Pedro"]; Para obtener un valor se indexa la variable. El primer indice es el Cero (0) alumnos[0] es "Juan" alumnos[1] is " Pedro"

    Variables
    Globales, si estn fuera de cualquier funcin dentro de la etiqueta script. Se puede hacer referencia y modificar en cualquier parte. Local a una funcin deja de existir al salir de esta. Las Variables se almacenan en memoria' y dejan de existir cuando se ejecuta la funcin. Las Variables se reinicializan al cargar nuevamente la pgina.

    Funciones Matemticas
    JavaScript, ActionScript, Processing, etc. proveen varias funciones matemticas estndar. Formalmente en una clase Math. Algunas funciones como Math.sin() y Math.cos() se usan para rotar vectores. Muchas aplicaciones requieren el uso de Math.random() que regresa una nmero entre 0 y 1 sin incluir a 1.

    Ej. Funciones matemticas Math.abs(a) // valor absoluto de a


    Math.acos(a) // arc coseno de a Math.asin(a) // arc seno de a Math.atan(a) // arc tangente de a Math.atan2(a,b) // arc tangente de a/b Math.ceil(a) // entero ms cercano y no menor a a Math.cos(a) // coseno de a Math.exp(a) // exponente de a Math.floor(a) // entero ms cercano a a, no mayor que a Math.log(a) // log de a en base e Math.max(a,b) //el mximo de a y b Math.min(a,b) // el mnimo de a y b Math.pow(a,b) // a a la potencia b Math.random() // nmero pseudo aleatorio entre 0 y 1 Math.round(a) // entero ms cercano a a Math.sin(a) // seno de a Math.sqrt(a) // raiz cuadrada de a Math.tan(a) // tangente de a

    Sentencia If
    Sentencias condicionales.
    if (condition) { statements } else { statements }

    Ejemplo
    var lanzar= Math.random(); if (lanzar>.5) { alert("mayor que .5"); } else {alert("no mayor que .5"); }

    Ejemplo
    tiene un var lanzar= Math.random(); Lanzar valor nmerico if (lanzar>.5) { alert("mayor que .5"); } else {alert("no mayor que .5"); } Escribir cadena en una caja de texto

    Cadena es un mensaje (secuencia de smbolos)

    En el juego de cara/cruz
    var lanzar= Math.random(); if (lanzar>=.5) { document.moneda.src = "cara.gif"; } else { document.moneda.src="cruz.gif"; }

    Definicin de Funciones
    Las funciones se definen normalmente dentro de los elementos <script> </script> entre las etiquetas <head> </head>. Calls (invocar) funciones entre las etiquetas <body > </body> o en otras funciones.

    Ej. de definicin de Funciones en JavaScript


    <script> function nombre_funcion(argumentos ) { sentencias } </script>

    Invocar Funciones
    Las funciones se pueden llamar / invocar/ executar de diferentes formas. Una forma es el resultado de un evento definido en la etiqueta

    <button onclick="return cara_cruz();"> Lanzar moneda! </button>

    form
    Se utilizan para:
    Mostrar elementos de interfaz Para ingresar informacin Mostrar informacin de salida Presentar botones etc.

    form
    <script> f.ans.value= ???? </script> <body> <form action="" name="f" onSubmit="return lanzar();"> <input type="text" name="ans"> <input type="submit" value=LANZAR"> </form> </body>

    onsubmit
    Cuando el boton del formulario se preciona, invoca la funcin toss() y regresa el valor generado por la funcin. Las funciones regresan/producen valores Un valor booleano de regreso false significa que la pgina regresa a su estado original.

    Otros llamados a una Funcin


    En una etiqueta <a> como valor de href <a href="javascript:fun(a, b);"> liga generada </a> En una etiqueta <a> como valor de onClick, onMouseover u onMouseOut <a href="" onMouseover="fun(a,b);" > Ajustada para llamarse en un intervalo de tiempo. Esta sentencia puede estar en otra parte del cdigo (ej. Otra funcin). tid = setInterval("moveit(dx, dy)",500);

    Prctica de Laboratorio
    Obtener imgenes de ambos lados de una moneda. Mejorar el ejemplo de la pgina cara_cruz 1.- Con imgenes reales 2.- Hacer que el 75% de las veces sea cara y el 25% cruz probablemente. 3.- Hacer 20 experimentos y mostrar el resultado

    Cara/Cruz
    <!DOCTYPE html> <html> <head> <title>Cara/Cruz </title> <script> function caracruz() { if (Math.random()>.5) { document.moneda.src = "cara.gif"; } else { document.moneda.src = "cruz.gif"; } return false; } </script> </head> <body> <img name="moneda" src="questionmark.gif"> <button onclick="return caracruz();">LANZAR MONEDA</button> </body> </html>

    Llevar la cuenta
    Usar el elemento form <form name=cuenta"> Cara: <input name=nc" value="0" /> Cruz: <input name=nx" value="0" /> </form>

    Problema
    Convertir texto->nmero, nmero->texto Extraer el valor del texto, convertir a numero, agregar 1 y convertir a texto. // Para contar Cara document.cuenta.nc.value = String(1+Number(document.cuenta.nc.value)); Colocar el cdigo donde corresponda.

    Ciclos For
    <!DOCTYPE html> <html> <body> <p>Hacer clic en el bot&oacute; para ejecutar un ciclo de cinco iteraciones.</p> <button onclick="myFunction()">Ejecutar</button> <p id="demo"></p> <script> function myFunction() { var x="",i; for (i=0;i<5;i++) { x=x + "The number is " + i + "<br>"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>

    Eventos en el tiempo
    <!DOCTYPE html> <html> <body> <p>Hacer clic para esperar 3 segundos, y mostrar una alerta "Hola".</p> <button onclick="myFunction()">Ejecutar</button> <script> function myFunction() { setTimeout(function(){alert("Hola")},3000); } </script> </body> </html>

    Hojas de Estilo HTML


    CSS permiten mejorar los elementos de estilo en HTML Se pueden integrar de 3 maneras
    En lnea en los atributos de los elementos HTML Internamente agregando el elemento <style> en la seccin del encabezado Externamente utilizando archivos CSS (ms usado)

    Estilos en lnea
    <p style="color:blue;margin-left:20px;">Este es un parrafo</p> <!DOCTYPE html> <html> <body style="background-color:yellow;"> <h2 style="background-color:red;">Titulo en el documento</h2> <p style="background-color:green;">Parrafo del documento</p> </body> </html>

    En lnea: texto alineado

    <!DOCTYPE html> <html> <body> <h1 style="text-align:center;">T&iacute;tulo centrado</h1> <p>This is a paragraph.</p> </body> </html>

    Hojas de Estilo internas


    Definen el estilo particular para un documento. <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>

    Hojas de estilo externas


    Ideal cuando el mismo estilo se aplica a varias pginas Modificando la hoja de estilo puede cambiar significativamente la apariencia de una pgina. Cada pgina debe tener una liga a la hoja de estilo usando la etiqueta <link> . La etiqueta <link> va dentro de la seccin <head> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

    Hoja de estilo externa (Ejemplo 1/2)


    La hoja de estilo special.css cambia el color del prrafo a verde y dibuja un borde con una linea en rojo P.special { color : green; border: solid red; }

    Hoja de estilo externa (Ejemplo 1/2)


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <LINK href="special.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <P class="special">Este texto aparece en verde. </BODY> </HTML>

    Elemento de Audio
    Para reproducir un sonido de audio <audio src="good_enough.mp3" controls> <p>Si puede leer este mensaje es porque el navegador no soporta el elemento de audio.</p> </audio>

    You might also like