Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Intro JavaScript

    Cargado por

    Luis Adriano Gallegos
    15 vistas13 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    15 vistas13 páginas

    Intro JavaScript

    Cargado por

    Luis Adriano Gallegos

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 13

    JavaScript

    Desarrollo de
    Software II
    Índice
    • ¿Qué es un lenguaje Script?
    • ¿Qué es JavaScript?
    • ¿Qué se puede hacer con JavaScript?
    • Generalidades de JavaScript
    • La TAG <SCRIPT> </SCRIPT>
    • Modelo de Eventos de JavaScript
    • Gestores de Eventos (Event Handlers)
    • Clases en JavaScript
    • Jerarquía de Clases
    ¿Qué es un lenguaje Script?
    • Scripting – system programming
    • Unos no sustituyen a los otros sino que están orientados a cosas diferentes
    • Extienden las capacidades de la aplicación con la que trabajan
    • Raramente se usan para algoritmos y estructuras de datos
    complejas
    • Tienden a ser Typeless
    • Detección de errores en tiempo de ejecución
    • Código y datos son intercambiables
    • Un programa puede escribir otro y ejecutarlo
    • Menos código y programas más flexibles
    • Problemas de SEGURIDAD
    ¿Qué es JavaScript?
    • Es un lenguaje Script
    • Extiende las capacidades de las páginas Web
    • El código está integrado en el HTML
    • Se interpreta en el ordenador que recibe el HTML, no se compila
    • Ejecución dinámica
    • Los programas y funciones no se chequean hasta que se ejecutan
    • Tiene programación orientada a objetos
    • Trabaja con los elementos del HTML
    • No se declaran los tipos de variables
    ¿Qué se puede hacer con JavaScript?
    • Chequear Formularios
    – Comprobar que se han rellenado correctamente
    antes de enviarlos y que el servidor de error
    – Validar Campo
    • Realizar cálculos simples
    – Índice de Masa Corporal
    • Hacer interactiva una página web
    – Check All
    • O simplemente...
    – Mouse Trail Clock
    Generalidades de JavaScript
    • Modelo orientado al WWW
    • Elementos de una página HTML pueden causar un evento que
    ejecutará una acción
    • Esa acción se ejecutará a través de una serie de sentencias
    JavaScript
    • Comandos de JavaScript:
    • Variables
    • Expresiones
    • Estructuras de control
    • Funciones (bloques de sentencias)
    • Clases, objetos y arrays (agrupaciones de datos)
    La TAG <SCRIPT> </SCRIPT>
    • Sintaxis

    <SCRIPT type="text/javascript" src="fuente.js"></SCRIPT>

    • Atributo SRC: fichero código fuente


    <SCRIPT type="text/javascript">
    function valor_abs(form) {
    var num = eval(form.expr.value)
    if (num >= 0) form.result.value = num
    else num = -num
    form.result.value = num
    }
    </SCRIPT>
    • Colocarlo en la sección <HEAD> del HTML
    • No es necesario que esté todo el código allí
    • Asegura que todo el código haya sido definido antes del <BODY> del
    documento.
    Modelo de Eventos de JavaScript
    • Los eventos suceden a tres niveles:
    • A nivel del documento HTML
    • A nivel de un formulario individual
    • A nivel de un elemento de un formulario
    • El evento es gestionado por una sección de código en JavaScript
    (Gestor de Eventos)
    • Declaración de Gestores de Eventos: similar a los atributos en HTML

    <BODY onLoad="cargarfuncion()" onUnload="descargarfuncion()">

    <FORM name="nombre_del_formulario" ...


    onSubmit="función_o_sentencia">

    <INPUT type="button" name="mycheck" value="HA!" onClick=


    "alert(‘Te he dicho que no me aprietes’)">
    Gestores de Eventos (Event Handlers)
    Evento Ocurre Cuando Gestor
    blur El usuario quita el cursor de un elemento de formulario onBlur

    click El usuario clica un link o un elemento de formulario onClick

    change El usuario cambia el valor de un texto, un área de texto o onChange


    selecciona un elemento.
    focus El usuario coloca el cursor en un elemento de formulario. onFocus

    load El usuario carga una página en el Navegador onLoad

    Mouseover El usuario mueve el ratón sobre un link onMouseOver

    Select El usuario selecciona un campo del elemento de un formulario onSelect

    Submit Se envía un formulario onSubmit

    Unload Se descarga la página onUnload


    Estructura de un HTML con JavaScript
    • Funciones JavaScript
    • Dentro de un bloque <SCRIPT></SCRIPT>
    • Dentro del <HEAD> del documento

    • HTML no interactivo
    • Dentro del <BODY> del documento

    • HTML interactivo
    • Atributos Gestores de Eventos cuyos valores son funciones de JavaScript
    definidas en el bloque <HEAD> del HTML
    Clases en JavaScript
    • Clases Predefinidas
    • Clase String: Cada vez que se asigna una cadena de caracteres a una
    variable, se crea un objeto de la clase String
    • Clase Math: Se usa para efectuar cálculos matemáticos
    • Clase Date: Para el manejo de fechas y horas
    • Clases del Browser o Navegador
    • Tienen que ver con la navegación
    • Clases del Documento HTML
    • Están asociadas con cualquier elemento de una página Web (link, ancla,
    formulario, etc.)
    • Clases definidas por el usuario
    Jerarquía de Clases
    Ejemplo
    document.title

    <HTML> document.anchors[0].name
    <HEAD>
    <TITLE>Ejemplo sencillo de página HTML</TITLE>
    </HEAD>
    <BODY>
    document.forms[0].method
    <A name="principio">Este es el principio de la página</A> // ancla
    <HR>
    <FORM method="POST">
    <P> Introduzca su nombre:<INPUT type="text" name="me" size="70">
    </P>
    <INPUT type="reset" value="Borrar Datos">
    <INPUT type="submit" value="OK">
    </FORM> document.forms[0].elements[1].value
    <HR>
    Clica aquí para ir al
    <A href="#principio">principio</A> de la página // link
    </BODY>
    </HTML>
    document.links[0].href

    También podría gustarte