DOM: Document Object Model

Curso de Javascript y JQuery Febrero 2015

Introducción a .NET MAUI

¿Qué aprenderemos en este curso?

Qué es .NET MAUI y Arquitectura de una aplicación

Breve historia de Xamarin

Single project

Conociendo el XAML y su estructura

¿Qué es XAML?

Pages, Layouts y Views

Pages

ContentPage

FlyoutPage y NavigationPage

TabbedPage

Layouts

StackLayout

AbsoluteLayout

Grid

Retos usando el Grid

FlexLayout

Retos usando FlexLayout

Estilos

Tipos de estilos

Practicando estilos en .NET MAUI

Retos usando estilos

Conclusión

Reto de UI con .NET MAUI

¿Qué implica el reto de replicar el UI?

UI de una tarjeta de perfil

Bienvenidos

Conceptos Básicos de JS y JQuery

Bases de desarrollo web moderno

Definición de JSON y API Rest

¿Qué es JSON?

DOM, BOM, JSON, AJAX

DOM: Document Object Model

Etiqueta Template en HTML5

Geolocation

Closures, Jquery y Local Storage en nuestra aplicación

Closures

Introduccion a GIT

Conectando con API Externa

Inyectando Datos en nuestro template

Añadiendo más ciudades a nuestra app

Guardando datos en LocalStorage

Despliegue con Git y GitHub

Introducción al Front-end: Componentes, Stylus y Jade

ECMAScript 6, AJAX y Promises

¿Qué es un API? (Usando el API de Marvel)

Creación de un entorno de desarrollo local

AJAX con jQuery

Promises

ECMAScript6

Request de una imagen y modificación con JQuery

Modificar Elementos Con API Data

Arrow Functions

Ellipsis CSS

Preguntas y Respuestas

Clases de Ecmascript 6

LocalStorage, Latencia y Plantillas con ECMAScript6

Latencia y Local Storage

Templates en ECMAScript 6

Uso de Clases en Javascript

Operadores y Funciones Matemáticas en Javascript

Funciones orientadas a eventos

Datos en la plantilla usando Promises

Preguntas y Respuestas

Introducción a Single Page Apps

Single Page App

Page.js y Middlewares

Preguntas y Respuestas

Optimiza tu Single Page App con Browserify Y Gulp

The road to a single page app

Browserify y Component Oriented Development

Gulp

Preguntas y Respuestas

Livereload, Express y Node.js

Configuración de Livereload

Node.JS: Javascript del lado del servidor

Express: Web Framework para Node.JS

Realtime en Node.JS usando Socket.io

Preguntas y Respuestas

Siempre que entramos al mundo de la interacción con el usuario y el dinamismo web necesariamente tocamos el lenguaje de programación JavaScript que es el que corre por excelencia en todos los navegadores de manera casi estándar, pero para poder crear contenido en JavaScript e integrarlo a nuestra web debemos saber algo denominado el DOM, Document Object Model.

Básicamente el DOM es el documento html denominado por objetos a los cuales podemos acceder por su id o por su clase, cuando hablamos de JavaScript puro hablamos de que podemos acceder de una forma casi estándar en cada navegador pero no es de preocupación el tema pues lo más necesario como el acceder por id y por clase es demasiado estándar.

Para entender mejor qué es el DOM el siguiente gráfico:

Tenemos a document que hará referencia a nuestro documento html y después de este tenemos nuestro documento estructurado como lo vemos en la imagen.

Acceso al DOM

Podemos acceder a un id casa de la siguiente forma:

> document.getElementById('main')
   <div id="main">…</div>

Por su clase:

> document.getElementsByClassName('chapter')
   [<div class="chapter">…</div>,<a class="chapter" href="dom_obj_document.asp">
           « Previous</a>,<a class="chapter" href="dom_obj_all.asp">Next Reference »</a>]

En este caso nos devuelve un arreglo de accesos al DOM.

Eventos

También tenemos eventos del mouse y el teclado:

onkeydown:

<script>
    function myFunction(){
        alert("You pressed a key inside the input field");
    }
</script>
<input type="text" onkeydown="myFunction()">

En este caso cuando presione una tecla me saldrá el alert.

onclick:

<script>
    function myFunction(){
        document.getElementById("demo").innerHTML="Hello World";
    }
</script>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>

En este caso al darle click al botón desplegará hello world en el p con id demo.

Otras Alternativas

A muchos les gusta ser hardcode y utilizar JavaScript puro para hacer cosas como estas, pero tenemos frameworks que nos hacen la vida más fácil como los siguientes:

1. JQuery
2. MooTools
3. Prototype

En este curso trabajaremos con el framework que está en pleno auge y que personalmente me gusta mucho para algunas cosas (no para todo).

...

Regístrate o inicia sesión para leer el resto del contenido.

Aportes 0

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?