Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 02 JS

    Cargado por

    Federico Ramon Ibarra
    7 vistas10 páginas

    Título original

    02_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
    7 vistas10 páginas

    02 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 10

    Tema: Introducción a Java

    Tema: JavaScript (Día 2)

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

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

    El DOM representa un documento HTML como un árbol.

    Página HTML DOM

    <html>
    <head>
    <title> El titulo </title>
    </head>
    <body>
    Cuerpo de la pagina
    </body>
    </html>
    1. Javascript DOM: Document Object Model

    El DOM representa un documento HTML como un árbol.

    Página HTML DOM

    <html>
    <head>
    <title> The document </title>
    </head>
    <body>
    <div> Data </div>
    <ul>
    <li>Warning </li>
    <li></li>
    </ul>
    <div>Top Secret!</div>
    </body>
    </html>
    1. Javascript DOM: Document Object Model

    Tipos de nodos:

    document nodo raíz del que derivan todos los demás nodos del árbol.

    element representa cada una de las etiquetas HTML. Es el único que puede contener atributos y el
    único del que pueden derivar otros elementos.

    atr se define un nodo de este tipo para representar uno de los atributos de las etiquetas HTML,
    es decir, uno por cada atributo=valor

    text nodo que contiene el texto encerrado por una etiqueta HTML.

    comment representa los comentarios incluidos en la página HTML.

    ...

    Una vez construido automáticamente el árbol completo de nodos, ya es posible utilizar las funciones DOM
    para acceder de forma directa a cualquier nodo del árbol.
    1. Javascript DOM: Document Object Model

    Página HTML Acceso DOM

    <html>
    <head>
    <title> DIUNSa </title>
    </head>
    <body>
    <a href="unsa.edu.ar"> UNSa </a>
    <div id="cabecera">
    <p name="ppal"> DI es el Depto de Informatica </p>
    <a href="di.unsa.edu.ar"> Ver </a>
    <p> Facultad de Ciencias Exactas </p>
    </div>
    <p> Nos vemos pronto </p>
    </body>
    </html>
    1. Javascript DOM: Document Object Model

    Página HTML Acceso DOM

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


    <head> var e, en1, en2, ps, p;
    <title> DIUNSa </title> en1= document.getElementsByTagName("a");
    </head>
    <body> ps = document.getElementsByTagName("p");
    p = ps[0];
    <a href="unsa.edu.ar"> UNSa </a>
    en2 = p.getElementsByTagName("a");
    <div id="cabecera">
    <p name="ppal"> DI es el Depto de Informatica </p> e = en1[0];
    <a href="di.unsa.edu.ar"> Ver </a> alert(e.href);
    <p> Facultad de Ciencias Exactas </p> </script>
    </div>
    <p> Nos vemos pronto </p>
    </body>
    </html>

    getElementsByTagName(): obtiene todos los elementos de la página HTML cuya etiqueta sea igual que el
    parámetro que se le pasa a la función.
    1. Javascript DOM: Document Object Model

    Página HTML Acceso DOM

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


    <head> var p;
    <title> DIUNSa </title> p = document.getElementsByName("ppal");
    </head>
    <body> </script>
    <a href="unsa.edu.ar"> UNSa </a>
    <div id="cabecera">
    <p name="ppal"> DI es el Depto de Informatica </p>
    <a href="di.unsa.edu.ar"> Ver </a>
    <p> Facultad de Ciencias Exactas </p>
    </div>
    <p> Nos vemos pronto </p>
    </body>
    </html>

    getElementsByName(name): obtiene todos los elementos de la página HTML cuyo atributo name sea
    igual que el parámetro que se le pasa a la función.
    1. Javascript DOM: Document Object Model

    Página HTML Acceso DOM

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


    <head> var p;
    <title> DIUNSa </title> p = document.getElementById("cabecera");
    </head>
    <body> </script>
    <a href="unsa.edu.ar"> UNSa </a>
    <div id="cabecera">
    <p name="ppal"> DI es el Depto de Informatica </p>
    <a href="di.unsa.edu.ar"> Ver </a>
    <p> Facultad de Ciencias Exactas </p>
    </div>
    <p> Nos vemos pronto </p>
    </body>
    </html>

    getElementById(name): Accede directamente a un nodo único.


    2. Ejercicio

    A partir de la página web proporcionada por la cátedra, mostrar por pantalla la siguiente información:

    1. Número de enlaces de la página.


    2. Dirección a la que enlaza el penúltimo enlace.
    3. Número de enlaces que apuntan a: http://prueba
    4. Cantidad de enlaces del tercer párrafo.
    2. Ejercicio (Código HTML)

    <html>
    <head>
    <title>Ejercicio DOM básico</title>
    </head>
    <body>
    <p> JavaScript (abreviado comúnmente <a href="http://prueba"> JS </a>) es un lenguaje de programación interpretado,
    dialecto del estándar ECMAScript. Se define como orientado a objetos, 3 basado en prototipos, imperativo, débilmente tipado
    y dinámico.Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un
    navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas aunque existe una forma de JavaScript
    del lado del servidor (Server-side JavaScript o <a href="http://prueba2">F SSJS </a>). Su uso en aplicaciones externas a la
    web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo. </p>
    <p> JavaScript se diseñó con una sintaxis similar a <a href="http://prueba"> C </a>, aunque adopta nombres y convenciones
    del lenguaje de programación Java. Sin embargo, Java y JavaScript tienen semánticas y propósitos diferentes. Todos los
    navegadores modernos interpretan el código JavaScript integrado en las páginas web. Para interactuar con una página web se
    provee al lenguaje JavaScript de una implementación del Document Object Model (<a href="http://prueba3"> DOM </a>). </p>
    <p> Tradicionalmente se venía utilizando en páginas web <a href="http://prueba"> HTML</a> para realizar operaciones y
    únicamente en el marco de la aplicación cliente, sin acceso a funciones del servidor. Actualmente es ampliamente utilizado
    para enviar y recibir información del servidor junto con ayuda de otras tecnologías como <a href="http://prueba4"> AJAX
    </a>. JavaScript se interpreta en el agente de usuario al mismo <a href="http://prueba5">tiempo </a> que las sentencias van
    descargandose junto con el código HTML. </p>
    </body>
    </html>

    También podría gustarte