Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 03 JS

    Cargado por

    Federico Ramon Ibarra
    12 vistas9 páginas

    Título original

    03_JS

    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
    12 vistas9 páginas

    03 JS

    Cargado por

    Federico Ramon Ibarra

    Copyright:

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

    Tema: Introducción a Java

    Curso de Extensión: Introducción al Desarrollo Web

    (Arrancamos 18.15hs)
    Tema: Introducción a Java

    Tema: Javascript (Día 3)

    Curso de Extensión: Introducción al Desarrollo Web

    Ismael Orozco
    ciorozco.unsa@gmail.com
    1. Javascript DOM: Document Object Model

    Página HTML Acceso DOM

    <html> <script type="text/javascript">


    <head> var parrafo, contenido;
    <title> Documento simple </title> parrafo = document.createElement("p");
    </head> contenido = document.createTextNode("Texto nuevo");
    <body> parrafo.appendChild(contenido);
    <p id="sec"> Desarrollo PAW </p> document.appendChild(parrafo);
    <ul id="items"> </script>
    <li> HTML Básico </li>
    </ul>
    </body>
    </html>

    Creación de elementos:
    1. createElement
    2. createTextNode
    3. appendChild
    1. Javascript DOM: Document Object Model

    Página HTML Acceso DOM

    <html> <script type="text/javascript">


    <head> var parrafo, contenido;
    <title> Documento simple </title> parrafo = document.createElement ("p");
    </head> contenido = document.createTextNode("Texto nuevo");
    <body> parrafo.appendChild(contenido);
    <p id="sec"> Desarrollo PAW </p> document.appendChild(parrafo);
    <ul id="items"> </script>
    <li> HTML Básico </li>
    </ul>
    - Agregar un link a http://di.unsa.edu.ar
    </body>
    </html>

    Creación de elementos:
    1. createElement
    2. createTextNode
    3. appendChild
    1. Javascript DOM: Document Object Model

    Página HTML Acceso DOM

    <html> <script type="text/javascript">


    <head> var parrafo, contenido;
    <title> Documento simple </title> parrafo = document.createElement("p");
    </head> contenido = document.createTextNode("Texto nuevo");
    <body> parrafo.appendChild(contenido);
    <p id="sec"> Desarrollo PAW </p> document.body.appendChild(parrafo);
    <ul id="items"> </script>
    <li> HTML Básico </li>
    </ul>
    - Agregar un link a http://di.unsa.edu.ar
    </body> - Agregar un nuevo item al ul items
    </html>

    Creación de elementos:
    1. createElement
    2. createTextNode
    3. appendChild
    1. Javascript DOM: Document Object Model

    Página HTML Acceso DOM

    <html> <script type="text/javascript">


    <head> var parrafo = document.getElementById("sec");
    <title> Documento simple </title> parrafo.parentNode.removeChild(parrafo);
    </head> </script>
    <body>
    <p id="sec"> Desarrollo PAW </p>
    <ul id="items">
    <li> HTML Básico </li>
    </ul>
    </body>
    </html>

    Eliminación de elementos:
    1. removeChild
    2. parentNode
    1. Javascript DOM: Document Object Model

    Página HTML Acceso DOM

    <html> <script type="text/javascript">


    <head> var parrafo = document.getElementById("sec");
    <title> Documento simple </title> parrafo.parentNode.removeChild(parrafo);
    </head> </script>
    <body>
    <p id="sec"> Desarrollo PAW </p>
    <ul id="items"> - Modificar la página HTML que contenga una caja
    de texto y un botón. cuando se hace click se
    <li> HTML Básico </li>
    elimina el elemento con ese id (si existe).
    </ul>
    </body>
    </html>

    Eliminación de elementos:
    1. removeChild
    2. parentNode
    Actividad 2: JavaScript

    ACTIVIDAD
    A
    Dada una cadena String (INPUT name=”valores”), implemente una función JavaScript que:

    a. Depure la cadena y construya un arreglo dejando solo palabras sin repetir.


    b. Usando DOM agregué a la página html un elemento <INPUT TYPE=”checkbox”> cuyo ítems son
    las palabras sin repetir de inciso anterior.
    c. Opcional: Agregar un nuevo botón para eliminar un checkbox con atributo id que coincide con un
    campo input de tipo texto.
    Actividad 2: JavaScript (Código Base)

    <html>
    <head>
    <title>Checkbox Items</title>
    </head>
    <body>
    <fieldset style="width:330px; font-family:arial">
    <legend>Cargar Items del Checkbox</legend>
    <form name="formulario">
    <label>Ingrese items: </label>
    <INPUT TYPE="text" NAME="valores" style="width: 100%;">
    <small>Separados por espacios</small><br>
    <INPUT TYPE="button" value="Aceptar" onclick="..."><br><br>
    Items sin repetir: <br>
    <div id="elcheckbox"></div>
    </form>
    </fieldset>
    </body>
    </html>

    También podría gustarte