Primer Seminario. Paradigmas de Programación. Curso Departamento de Informática Universidad de Valladolid
|
|
|
- Juan Francisco Juan Carlos Miranda Silva
- hace 5 años
- Vistas:
Transcripción
1 Paradigmas de Programación Primer Seminario Departamento de Informática Universidad de Valladolid Curso Grado en Ingeniería Informática Grado en Ingeniería Informática de Sistemas 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 1
2 Objetivos Crear una aplicación que simula algunas características del mecanismo de Antikythera : Mostrar posiciones del sol, la luna y algunos planetas en la esfera celeste para una determinada fecha. Se realizará mediante HTML, CSS y JavaScript (es decir, vamos a crear una página web dinámica) Resultados de aprendizaje: Conceptos de HTML, CSS y JavaScript Orientación a objeto Orientación a eventos Modelo MVC: Separación de contenido, presentación y respuesta a eventos. 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 2
3 1. Contenido El contenido está definido por el lenguaje HTML, que describe los elementos de la página. Estos elementos consistirán en imágenes y controles que permiten mostrar y pedir datos al usuario. Aquellos elementos que se van a referenciar en el código se les asigna un identificador Podeis descargar el esquema de página en la siguiente dirección: Y las imágenes utilizadas en: 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 3
4 Estructura de una página HTML <TITLE> <HEAD> <SCRIPT> <STYLE> <HTML> Bloque <DIV> <TABLE> <BODY> <SPAN> <BR> Inline <IMG> <FORM> <INPUT type ="text"> <INPUT type ="button"> 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 4
5 Página inicial <HTML> <HEAD> <TITLE>Paradigmas de Programacion Seminario #1</TITLE> </HEAD> <BODY id="cuerpo"> <DIV id="controles"> <FORM> <B>Fecha:</B><BR> <INPUT type="text" size="10" id="fecha_ent" /><BR> <INPUT type="text" size="10" id="hora_ent" /><BR><BR> <SPAN id="txt_int"><b>intervalo: Detenido</B></SPAN><BR><BR> <INPUT type="button" value=" + " /> <INPUT type="button" value=" " /> <INPUT type="button" value=" < > " /><BR><BR> </FORM> </DIV> <DIV id="img_zod"><img src="zodiaco.png"></div> <DIV id="img_som1"><img src="minisombra.png"></div> 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 5
6 Página inicial <DIV id="img_lun1"><img src="luna.png"></div> <DIV id="img_sol1"><img src="sol.png"></div> <DIV id="img_ven1"><img src="venus.png"></div> <DIV id="img_mar1"><img src="marte.png"></div> <DIV id="img_jup1"><img src="jupiter.png"></div> <DIV id="img_som2"><img src="sombra.png"></div> <DIV id="img_lun2"><img src="luna.png" id="fase_lunar"></div> <DIV id="img_sol2"><img src="sol.png"></div> <DIV id="img_ven2"><img src="venus.png"></div> <DIV id="img_mar2"><img src="marte.png"></div> <DIV id="img_jup2"><img src="jupiter.png"></div> <DIV id="img_map"><img src="mapamundi.gif"></div> <DIV id="img_cur"><img src="cursor.png"></div> </BODY> </HTML> 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 6
7 2. Presentación La presentación se puede ajustar haciendo uso de los estilos CSS Cada elemento HTML tiene asociada una serie de propiedades Nos interesa sobre todo la posibilidad de usar el posicionamiento absoluto de elementos. Los estilos se definen en el apartado style de la cabecera del documento, y se asocian a los elementos modificando la propiedad class. Podeis descargar la página modificada en: 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 7
8 Segunda iteración <HTML> <HEAD> <TITLE>Paradigmas de Programacion Seminario #1</TITLE> <STYLE type="text/css">.objmovible1 { position:absolute; z index:1; }.objmovible2 { position:absolute; z index:2; }.objmovible3 { position:absolute; z index:3; }.objmovible4 { position:absolute; z index:4; }.objmovible5 { position:absolute; z index:5; } body { color: #FFFFFF; background: #0000A0; font: 13px Arial, sans serif; } </STYLE> </HEAD> 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 8
9 Segunda iteración <BODY id="cuerpo"> <DIV class="objmovible5" style="top:205;left:712;" id="controles"> <FORM> <B>Fecha:</B><BR> <INPUT type="text" size="10" id="fecha_ent" /><BR> <INPUT type="text" size="10" id="hora_ent" /><BR><BR> <SPAN id="txt_int"><b>intervalo: Detenido</B></SPAN><BR><BR> <INPUT type="button" value=" + " /> <INPUT type="button" value=" " /> <INPUT type="button" value=" < > " /><BR><BR> </FORM> </DIV> <DIV class="objmovible4" style="top:10;left:15;" id="img_zod"> <IMG src="zodiaco.png"> </DIV> <DIV class="objmovible5" style="top:99;left:340;" id="img_som1"> <IMG src="minisombra.png"> </DIV> 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 9
10 Segunda iteración <DIV class="objmovible5" style="top:335;left:576;" id="img_lun1 >.. <DIV class="objmovible5" style="top:571;left:340;" id="img_sol1 >.. <DIV class="objmovible5" style="top:335;left:104;" id="img_ven1">.. <DIV class="objmovible5" style="top:325;left:114;" id="img_mar1">.. <DIV class="objmovible5" style="top:345;left:94;" id="img_jup1">.. <DIV class="objmovible3" style="top:335;left:370;" id="img_som2">.. <DIV class="objmovible2" style="top:335;left:340;" id="img_lun2">.. <DIV class="objmovible1" style="top:335;left:280;" id="img_sol2">.. <DIV class="objmovible1" style="top:275;left:340;" id="img_ven2">.. <DIV class="objmovible1" style="top:395;left:340;" id="img_mar2">.. <DIV class="objmovible1" style="top:385;left:360;" id="img_jup2">.. <DIV class="objmovible1" style="top:10;left:712;" id="img_map">.. <DIV class="objmovible2" style="top:53;left:882;" id="img_cur">.. </BODY> </HTML> 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 10
11 3. Cálculos El cálculo de las posiciones del sol, luna y planetas requiere conocimientos de mecánica celeste Feb César Vaca Rodríguez, Dpto. de Informática, UVa 11
12 3. Cálculos.. que se han codificado en un módulo javascript: DEC (Declinación) RA (Ascensión Recta) Eclíptica tpo > tipo Date, fecha actual lat, lon > grados r = calcastro(tpo,lat,lon); r[0].ra > RA del sol r[0].dec > Dec del sol r[0].late > Latitud eclíptica del sol r[1] > Sombra tierra r[2] > Luna r[2].fase > Fase luna (0 1) r[3] > Venus r[4] > Marte r[5] > Júpiter 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 12
13 Elementos de Javascript Tipos de datos No es necesario declarar las variables (salvo en el bloque ppal, con var) y no tienen un tipo de datos asociado. Conversión automática entre tipos de datos. Operador de asignación (=), comparaciones (==,!=), lógicos (!,&&, ) Los arrays pueden indexarse por cualquier valor, pueden almacenar valores de tipos distintos y se pueden asignar fuera de rango. var v = [1,[2,3.14], hola ]; v[1][2] 3.14 Registros : var r = {nombre: pedro, edad:25}; r.edad 25 Cadenas de caracteres: Se puede usar indistintamente comillas simples o dobles. No son arrays. 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 13
14 Elementos de Javascript Estructuras de control: Las sentencias terminan en punto y coma. Bloques: { s1; s2; } Condicional: if(cond) {... } else {... } Bucles: for(inicio; cond; paso) {... } inicio es una sentencia (tipicamente una asignación) ejecutada una sóla vez antes de comenzar el bucle. cond representa la condición de permanencia en el bucle. paso es una sentencia (tipicamente de incremento) ejecutada al final de cada iteración. Operadores especiales: Autoincremento ( x++; y ;) Autoasignación ( x += 5; y /= 2; ) Condicional Definición de funciones: function min(a,b) { return(a < b? a : b); } 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 14
15 Elementos de Javascript Orientación a objeto: Los objetos son elementos dinámicos que contienen tanto propiedades ( campos ) como métodos ( funciones que modifican propiedades del objeto o devuelven valores asociados al objeto) El acceso/invocación de propiedades/métodos se realiza mediante el operador punto Los arrays, registros, strings y elementos de la página HTML son objetos. Para este seminario no es necesario crear objetos. Objeto Math Es un objeto preexistente (clase estática) Math.PI Math.round(expr) Math.sqrt(expr) 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 15
16 Elementos de Javascript Objetos de tipo Date Creación (fecha actual): fecha = new Date(); Acceso y modificación del dia, mes, año, hora, minutos: min = fecha.getminutes(); fecha.setminutes(35); Los meses se numeran de 0 a 11. Incremento de una fecha (x es el número de milisegundos) fecha.settime(fecha.gettime() + x); Objetos de tipo String Acceso a carácter: Hola.charAt(2) l Parsing: 12/8/2010.split( / ) [ 12, 8, 2010 ] Objetos de tipo Array Longitud (propiedad): [1,2,3,4].lenght 4 Indices comienzan en cero. 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 16
17 Document Object Model (DOM) <INPUT> 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 17
18 Trabajando con DOM Acceso a un elemento de la página web: e = document.getelementbyid( identificador ); Acceso y modificación del texto de un <INPUT>: e.value Modificación del texto de un elemento inline (<SPAN>): e.innerhtml Modificación de una imagen (<IMG>); e.src = fichero 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 18
19 Cambio de propiedades CSS Posicionamiento absoluto (pixels): e.style.left e.style.top Ocultar y hacer visible un elemento: e.style.visibility = hidden ; e.style.visibility = visible ; Cambiar el color de fondo (aplicado a <BODY>): e.style.backgroundcolor = #FFA0B8 Los colores se especifican en hexadecimal, en orden RGB. 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 19
20 Orientación a Eventos Para que una página web sea dinámica, es necesario que pueda cambiar cuando el usuario interactua con sus elementos. Javascript tiene acceso al documento (via el modelo DOM) y puede cambiar su contenido. Es necesario poder asociar código javascript a la ocurrencia de eventos del usuario sobre elementos del documento. También debe ser posible mantener un estado (variables globales) durante la visualización del documento. 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 20
21 Tercera iteración <HTML> <HEAD> <TITLE>Paradigmas de Programacion Seminario #1</TITLE> <SCRIPT SRC="astro.js"></SCRIPT> <SCRIPT type="text/javascript"> // Variables globables var fecha; // fecha mostrada var lat = 41.75; // latitud (grados) var lon = 4.74; // longitud (grados)... Otras funciones, variables y constantes... function oniniciar() {... } function cambiarfecha(event) {... } function cambiarhora(event) {... } function cambiarlatlon(event) {... } function animar(incr) {... } function invertir() {... } </SCRIPT> <STYLE type="text/css >... </STYLE> </HEAD> 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 21
22 Tercera iteración <BODY id="cuerpo" onload="iniciar()"> <DIV class="objmovible5" style="top:205;left:712;" id="controles"> <FORM> <B>Fecha:</B><BR> <INPUT... id="fecha_ent" onkeypress="cambiarfecha(event)"/><br> <INPUT... id="hora_ent" onkeypress="cambiarhora(event)"/><br><br> <SPAN id="txt_int"><b>intervalo: Detenido</B></SPAN><BR><BR> <INPUT type="button" value=" + " onclick="animar(true)" /> <INPUT type="button" value=" " onclick="animar(false)" /> <INPUT type="button" value=" < > " onclick="invertir()" /><BR><BR> </FORM> </DIV>... <DIV class="objmovible1" id="img_map"> <IMG src="mapamundi.gif" onmousedown="cambiarlatlon(event) > </DIV> <DIV class="objmovible2" id="img_cur"> <IMG src="cursor.png onmousedown="cambiarlatlon(event)"></div> </BODY> </HTML> 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 22
23 Concurrencia A veces es necesario que un proceso se ejecute en paralelo a otro. En nuestro caso deseamos mostrar una animación pero seguir siendo capaces de responder a eventos del usuario. Javascript tiene un modelo de concurrencia muy sencillo, basado en temporizadores y acceso no restringido a las variables globales. Podemos pedir que una función se ejecute continuamente a intervalos periódicos (medidos en milisegundos): id = setinterval( función,msegs); Para detener la repetición: clearinterval(id); 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 23
24 Su turno! Rellene las funciones que faltan en la página siguiente para poder ver en funcionamiento la simulación del mecanismo de Antikythera! 11 Feb César Vaca Rodríguez, Dpto. de Informática, UVa 24
JAVASCRIPT: ACCEDER A ELEMENTOS POR ID. GETELEMENTBYID. DOCUMENT.ALL. CAMBIAR IMAGEN IMG SRC (CU01127E)
APRENDERAPROGRAMAR.COM JAVASCRIPT: ACCEDER A ELEMENTOS POR ID. GETELEMENTBYID. DOCUMENT.ALL. CAMBIAR IMAGEN IMG SRC (CU01127E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript
Tema 3, parte 5. Estilos dinámicos. Texto. Cambio de estilos. Animaciones.
Tema 3, parte 5 Estilos dinámicos Texto Cambio de estilos http://www.optimum7.com/css3-man/ Animaciones. Javascript, parte 5 Javascript: estilos dinámicos Animaciones con Javascript y CSS3 2 Acceso a estilos
Desarrollo de Aplicaciones Web con PHP. Javier Enciso
Desarrollo de Aplicaciones Web con PHP Javier Enciso Agenda Hojas de Estilos Qué es CSS? Para qué sirve? Cómo funciona? Ejemplos Validación de Formularios Fundamentos de JavaScript Utilización de JavaScript
Contenido. Introducción CSS dinámico Ejemplos. Programación en Internet DLSI - Universidad de Alicante 1
Departamento de Lenguajes y Sistemas Informáticos DHTML Programación en Internet Curso 2009-2010 Introducción CSS dinámico Contenido DLSI - Universidad de Alicante 1 Introducción Dynamic HTML no es una
FOR JAVASCRIPT (BUCLES) CONOCER TAMAÑO DE UN ARRAY CON LENGTH. BREAK PARA DETENER EJECUCIÓN. EJEMPLOS Y EJERCICIOS (CU01131E)
APRENDERAPROGRAMAR.COM FOR JAVASCRIPT (BUCLES) CONOCER TAMAÑO DE UN ARRAY CON LENGTH. BREAK PARA DETENER EJECUCIÓN. EJEMPLOS Y EJERCICIOS (CU01131E) Sección: Cursos Categoría: Tutorial básico del programador
Informática. JavaScript: Lenguaje de programación. Fco J. Martín Mateos Carmen Graciani
Informática JavaScript: Lenguaje de programación Fco J. Martín Mateos Carmen Graciani Dpto. Ciencias de la Computación e Inteligencia Artificial Universidad de Sevilla Literales Enteros Con base decimal:
FUNCIÓN EVAL JAVASCRIPT. GETELEMENTSBY CLASSNAME. EJEMPLO CÓDIGO CALCULADORA SIMPLE (CU01133E)
APRENDERAPROGRAMAR.COM FUNCIÓN EVAL JAVASCRIPT. GETELEMENTSBY CLASSNAME. EJEMPLO CÓDIGO CALCULADORA SIMPLE (CU01133E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript desde cero
QUERYSELECTORALL JAVASCRIPT Y QUERYSELECTOR. ACCEDER A ELEMENTOS POR SELECTORES CSS. EJEMPLOS (CU01134E)
APRENDERAPROGRAMAR.COM QUERYSELECTORALL JAVASCRIPT Y QUERYSELECTOR. ACCEDER A ELEMENTOS POR SELECTORES CSS. EJEMPLOS (CU01134E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript
EJEMPLOS JAVASCRIPT OPERADORES INCREMENTO Y DECREMENTO. ASIGNACIÓN Y ASIGNACIÓN COMPUESTA. (CU01118E)
APRENDERAPROGRAMAR.COM EJEMPLOS JAVASCRIPT OPERADORES INCREMENTO Y DECREMENTO. ASIGNACIÓN Y ASIGNACIÓN COMPUESTA. (CU01118E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript desde
NODELIST JAVASCRIPT. DIFERENCIAR NODELIST Y ARRAY. ACCEDER AL TEXTO DE NODOS CON TEXTCONTENT, INNERTEXT (CU01136E)
APRENDERAPROGRAMAR.COM NODELIST JAVASCRIPT. DIFERENCIAR NODELIST Y ARRAY. ACCEDER AL TEXTO DE NODOS CON TEXTCONTENT, INNERTEXT (CU01136E) Sección: Cursos Categoría: Tutorial básico del programador web:
Informática General 2018 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2018 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales JavaScript - Programación
JavaScript Básico. Elementos Básicos: Comentarios: Literales: Valores que puede tomar una variable o una constante.
Javascript (II) 1 Elementos Básicos: Comentarios: Para una línea // Esto es un Comentario Para un bloque /*......... */ Literales: Valores que puede tomar una variable o una constante. Ejemplos: "Soy una
Características de JavaScript
Características de JavaScript Qué es JavaScript? o Lenguaje de programación interpretado utilizado fundamentalmente para dotar de comportamiento dinámico a las páginas web. o Cualquier navegador web actual
IF ELSE, IF ELSE IF JAVASCRIPT. CONDICIONALES DEL FLUJO O ESTRUCTURAS DE DECISIÓN. EJEMPLOS. EJERCICIOS. (CU01119E)
APRENDERAPROGRAMAR.COM IF ELSE, IF ELSE IF JAVASCRIPT. CONDICIONALES DEL FLUJO O ESTRUCTURAS DE DECISIÓN. EJEMPLOS. EJERCICIOS. (CU01119E) Sección: Cursos Categoría: Tutorial básico del programador web:
WHILE JAVASCRIPT. DO WHILE. CONTINUE PARA SALTAR BUCLE. BUCLES CON LABEL (ETIQUETA O NOMBRE). EJEMPLOS (CU01132E)
APRENDERAPROGRAMAR.COM WHILE JAVASCRIPT. DO WHILE. CONTINUE PARA SALTAR BUCLE. BUCLES CON LABEL (ETIQUETA O NOMBRE). EJEMPLOS (CU01132E) Sección: Cursos Categoría: Tutorial básico del programador web:
PHP: Lenguaje de programación
Francisco J. Martín Mateos Carmen Graciani Diaz Dpto. Ciencias de la Computación e Inteligencia Artificial Universidad de Sevilla Tipos de datos Enteros Con base decimal: 45, -43 Con base octal: 043, -054
1. Haz que se muestre una pantalla de alerta con tu nombre. 2. Repite el ejercicio anterior pero usando una variable para guardar tu nombre
1. Haz que se muestre una pantalla de alerta con tu nombre alert("carlos Guerrero"); 2. Repite el ejercicio anterior pero usando una variable para guardar tu nombre Crea una variable para almacenar el
Diseño web. Fundamentos de CSS. Informática 4º ESO
Diseño web Fundamentos de CSS Informática 4º ESO Cascading Style Sheets HTML está bastante limitado a la hora de dar formato a las páginas web HTML fue inventado por científicos Énfasis en el contenido
DOM : MODELO DE OBJETOS DEL DOCUMENTO. Árbol de nodos
DOM : MODELO DE OBJETOS DEL DOCUMENTO La creación del Document Object Model o DOM es una de las innovaciones que más ha influido en el desarrollo de las páginas web dinámicas y de las aplicaciones web
JavaScript: Lenguaje de programación
Francisco J. Martín Mateos Carmen Graciani Diaz Dpto. Ciencias de la Computación e Inteligencia Artificial Universidad de Sevilla Literales Enteros Con base decimal: 45, -43 Con base octal: 043, -054 Con
Lenguajes de Script. Qué son los Lenguajes de Script?
JavaScript (I) 1 Lenguajes de Script Qué son los Lenguajes de Script? Scritps de cliente: son programas que pueden acompañar a un documento HTML o bien ir incrustados en él. Un lenguaje de script es un
PROGRAMACIÓN WEB II 4043
Modalidad: Online Duración: 26 horas Objetivos: HTML5 es un nuevo concepto para la construcción de sitios web y aplicaciones que combina dispositivos móviles, computación en la nube y trabajos en red.
Introducción al desarrollo web (idesweb) - 3 a ed.
Introducción al desarrollo web (idesweb) - 3 a ed. Práctica 7: JavaScript, Modelo de Objetos de Documento y cookies 1. Objetivos Aprender a manejar el DOM de una página web para manipular su contenido.
Fundamentos PHP. El término puntuación nos referimos a la sintaxis usada en PHP para la terminación de una línea de código (;)
Tags Fundamentos PHP La Sintaxis de PHP se deriva de muchos lenguajes de programación principalmente de C pero Perl también ha tenido mucha influencia en esta sintaxis Con las últimas incorporaciones agregadas,
FUNDAMENTOS DE ROBÓTICA. Maestro: Ing. Marco Antonio López Paredes REPORTE DE PROGRAMA: ANALIZAR LOS OBSTACULOS DE ROBOTS EN UN TABLERO
S UNIVERSIDAD AUTÓNOMA DEL ESTADO DE MÉXICO Centro Universitario UAEM Atlacomulco FUNDAMENTOS DE ROBÓTICA Maestro: Ing. Marco Antonio López Paredes REPORTE DE PROGRAMA: ANALIZAR LOS OBSTACULOS DE ROBOTS
Tutorial de enlace entre Formulario Web y Servicio Web REST. Programación en Internet
Tutorial de enlace entre Formulario Web y Servicio Web REST Programación en Internet Angel Manuel Gamaza Domínguez José Miguel Otte Sainz-Aguirre Grado en Ingeniería Informática 20 de septiembre de 2016
Informática General Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales
Informática General 2018 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales Qué es JavaScript? Se trata de un lenguaje de tipo script compacto, basado en objetos y guiado por eventos
Taller de Programación II J2EE
ᄎ INACAP Universidad Tecnológica de Chile Sede Santiago Centro Taller de Programación II J2EE Tema 02 Cascading Style Sheets (CSS) Ing. Manuel López R. Qué es CSS? La tecnología CSS (Cascading Style Sheets
Introducción a la programación en PHP
Introducción a la programación en PHP Qué es PHP? Hypertext Pre-processoes (PHP) es un lenguaje de "código abierto" interpretado, de alto nivel, embebido en páginas HTML y ejecutado en un servidor. Qué
AGRADECIMIENTOS INTRODUCCIÓN... 17
ÍNDICE AGRADECIMIENTOS... 15 INTRODUCCIÓN... 17 CAPÍTULO 1. CONCEPTOS BÁSICOS DE XHTML... 21 REGLAS DEL XHTML A TENER EN CUENTA... 22 ESTRUCTURA DE UN DOCUMENTO XHTML... 24 El DOCTYPE y la codificación...
El programa en JavaScript debe ir encerrado entre la marca script e inicializada la propiedad type con la cadena text/javascript:
Javascript Qué es JavaScript? Es un lenguaje de scripting (Código interno en las páginas HTML) necesario para los elaboradores de sitios Web, mediante el cual se puede hacer que las páginas sean activas
Índice INTRODUCCIÓN...13
Índice INTRODUCCIÓN...13 CAPÍTULO 1. METODOLOGÍA DE LA PROGRAMACIÓN...17 1.1 INTRODUCCIÓN...18 1.2 LÓGICA DE PROGRAMACIÓN...18 1.2.1 Las variables...19 1.2.2 Operaciones aritméticas...20 1.2.3 Operaciones
Programación Web Tema 3.2 Java Script Estructura del Lenguaje. Ramón Alcarria ETSI en Topografía, Geodesia y Cartografía - UPM
Programación Web Tema 3.2 Java Script Estructura del Lenguaje Miguel Ángel Manso Emerson Castañeda Ramón Alcarria ETSI en Topografía, Geodesia y Cartografía - UPM Contenido Variables Operadores Estructuras
escuela técnica superior de ingeniería informática
Versión original: Pablo Fernández (noviembre 2006) Actualización: P. Fernandez. Cambios menores en animaciones (Noviembre 2009) Tiempo: 2h escuela técnica superior de ingeniería informática HTML dinámico:
Manejo de eventos en JavaScript WEB-TECHNOLOGIES
Manejo de eventos en JavaScript JUAN CARLOS CONDE RAMÍREZ WEB-TECHNOLOGIES Objetivos Entender el uso de Formularios y Eventos con JavaScript. Visualizar la importancia de delegar el manejo de eventos al
SWITCH JAVASCRIPT. SELECCIÓN ENTRE ALTERNATIVAS. DIAGRAMA DE FLUJO Y EJEMPLO DE APLICACIÓN. (CU01120E)
switch JavaScript Decisión entre distintas alternativas APRENDERAPROGRAMARCOM SWITCH JAVASCRIPT SELECCIÓN ENTRE ALTERNATIVAS DIAGRAMA DE FLUJO Y EJEMPLO DE APLICACIÓN (CU01120E) Sección: Cursos Categoría:
Índice INTRODUCCIÓN...11 CAPÍTULO 1. SELECCIÓN DE ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN...13
Índice INTRODUCCIÓN...11 CAPÍTULO 1. SELECCIÓN DE ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN...13 1.1 Evolución Y CARACTERísticas de LOS navegadores Web...14 1.2 ARQUITECTURA de ejecución...17 1.3 Lenguajes
Problemas típicos con HTML
Introducción a Lenguajes web Estela Conde Álvarez Isdefe 4 Noviembre 2 008 Introducción al Diseño Para Td Todos en las TIC Problemas típicos con HTML Permitía errores Cada navegador etiquetas propias Mezcla
AGRADECIMIENTOS INTRODUCCIÓN... 17
ÍNDICE AGRADECIMIENTOS... 15 INTRODUCCIÓN... 17 CAPÍTULO 1. PROGRAMANDO CON XHTML... 21 REGLAS DEL XHTML A TENER EN CUENTA... 22 ESTRUCTURA DE UN DOCUMENTO XHTML... 24 El DOCTYPE y la codificación... 24
HTML dinámico: Procesado de Formularios
HTML dinámico: Procesado de Formularios Departamento de Lenguajes escuela técnica superior de ingeniería informática Versión original: Pablo Fernández (noviembre 2006) Tiempo: 2h Grupo de Ingeniería del
CSS. Añadir estilos a las páginas web
CSS Añadir estilos a las páginas web Qué es CSS? CSS (Cascade Style Sheets) es un tipo de archivo que permite añadir estilos a páginas web (colores de texto, bordes, separaciones, etc.) Son archivos de
DHTML: Parte 2 DOM. Introducción al desarrollo web. Laura Sirvent Collado Estudiante de Ingeniería Multimedia Universidad de Alicante (España)
DHTML: Parte 2 Laura Sirvent Collado Estudiante de Ingeniería Multimedia Universidad de Alicante (España) IDW-DOM-DHTML-2 Contacto http://www.7-days.es laurasirco@gmail.com DHTML Dynamic HTML (HTML Dinámico)
Java Script Tecnologías de la Información y la Comunicación 1º Bachillerato Curso
Java Script Tecnologías de la Información y la Comunicación 1º Bachillerato Curso2015-2016 Programación para Páginas web:java Script 1. Conceptos básicos Antes de comenzar a programar, deberíamos tener
TIC II Tema 2: Programación Web
TIC II Tema 2: Programación Web REFERENCIAS Existen varios métodos para seleccionar qué elementos HTML serán afectados por las reglas CSS: Referencia por la palabra clave del elemento. Referencia por el
Temario Programación Web para Web
Temario Programación Web para Web 1 Introducción al HTML 1 Qué es una página web? T 2 Qué es HTML? T 3 Porqué aprender HTML T 4 Base del lenguaje: las etiquetas HTML V 5 Estructura de un documento HTML
Node.JS Raspberry Pi (RPi) 2015/05/08 Juan V. Capella
Node.JS Raspberry Pi (RPi) 2015/05/08 Juan V. Capella Contenido Objetivo Introducción Operadores Tipos de datos Funciones Networking armpower.blogs.upv.es 2 Objetivo Aprender a instalar Node.js Conocer
CSS Cascading Style Sheets Selectores y Unidades
Selectores y Unidades Los selectores seleccionan el cuadro al que se aplica el formato Como ya sabemos, toda regla CSS empieza por un selector, que son una de estas tres cosas, o una combinación de las
Hojas de estilo en cascada
Hojas de estilo en cascada Es la forma como indicamos el diseño, colores, tamaños, etc de un sitio web, separado de la programación y la estructura de este. HTML Estructura, músculos, huesos web CSS El
Diseña tu propia web
Diseña tu propia web Diseña tu propia web Juan Manuel Escudero García juanmanuel.escudero@ticarum.es 2 Infraestructura Elementos necesarios para publicar nuestra web. - Un dominio - Hosting o alojamiento
Índice general. Pág. N. 1. Capítulo 1. Capítulo 2
Pág. N. 1 Índice general Capítulo 1 Introducción al diseño web con HTML 5 y CSS3 1.1 Las versiones del HTML 1.2 Los navegadores y sus diferencias 1.2.1 Tiempo de carga 1.2.2 Entorno de trabajo 1.2.3 Ventanas
COLUMNAS CSS: COLUMN-COUNT, COLUMN-WIDTH, COLUMNS, COLUM-GAP Y COLUM-RULE. EJEMPLOS PRÁCTICOS (CU01057D)
APRENDERAPROGRAMAR.COM COLUMNAS CSS: COLUMN-COUNT, COLUMN-WIDTH, COLUMNS, COLUM-GAP Y COLUM-RULE. EJEMPLOS PRÁCTICOS (CU01057D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS desde
Elementos de Control en Bootstrap
Elementos de Control en Bootstrap En esta práctica se utilizarán los elementos de control que ofrece Bootstrap. Se comenzará copiando el archivo index.html al directorio plantillas y renombrándolo como
FORMULARIOS JAVASCRIPT: EJEMPLOS DE DOCUMENT.FORMS Y ELEMENTS. ACCESO DIRECTO A FORMULARIOS Y CAMPOS CON ID Y NAME (CU01175E)
APRENDERAPROGRAMAR.COM FORMULARIOS JAVASCRIPT: EJEMPLOS DE DOCUMENT.FORMS Y ELEMENTS. ACCESO DIRECTO A FORMULARIOS Y CAMPOS CON ID Y NAME (CU01175E) Sección: Cursos Categoría: Tutorial básico del programador
PHP Avanzado - Listas enlazadas dinámicas -
PHP Avanzado - - Departamento de Lenguajes y Sistemas Informáticos Grupo de Ingeniería del Software Problema a resolver Introducción En un formulario aparecen dos listas desplegables enlazadas que se actualizan
Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales JavaScript Algoritmo
Figura 1: página de la vivienda sin estilo
Diseño de Interfaces Hombre Máquina Prácticas de laboratorio Curso 2009/10 Práctica 2 Interacción con hojas de estilo en cascada 1 Objetivo 1.1 Creación de una hoja de estilo La figura 1 muestra una página
Z-INDEX CSS NO FUNCIONA? CONTROL DE SUPERPOSICIÓN DE ELEMENTOS COMO CAPAS, DIV O IMÁGENES (CU01039D)
APRENDERAPROGRAMAR.COM Z-INDEX CSS NO FUNCIONA? CONTROL DE SUPERPOSICIÓN DE ELEMENTOS COMO CAPAS, DIV O IMÁGENES (CU01039D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS desde cero
Vamos a describir un lenguaje HTML y CSS resumido, sólo con unos ciertos mínimos, para uso en el programa Sénior.
Vamos a describir un lenguaje HTML y CSS resumido, sólo con unos ciertos mínimos, para uso en el programa Sénior. 1. Lo que va siempre Ejemplo con todo lo básico-minimo obligatorio que irá siempre:
SETATTRIBUTE Y GETATTRIBUTE JAVASCRIPT. DIFERENCIAS DE SINTAXIS PROPIEDADES CON HTML. EJEMPLO MAXLENGTH. (CU01176E)
APRENDERAPROGRAMAR.COM SETATTRIBUTE Y GETATTRIBUTE JAVASCRIPT. DIFERENCIAS DE SINTAXIS PROPIEDADES CON HTML. EJEMPLO MAXLENGTH. (CU01176E) Sección: Cursos Categoría: Tutorial básico del programador web:
MENÚ DESPLEGABLE CSS HORIZONTAL. EFECTO DROPDOWN CON ITEMS Y SUBITEMS. USO DE FLOAT, DISPLAY, POSITION EJEMPLO DE CÓDIGO.
APRENDERAPROGRAMAR.COM MENÚ DESPLEGABLE CSS HORIZONTAL. EFECTO DROPDOWN CON ITEMS Y SUBITEMS. USO DE FLOAT, DISPLAY, POSITION EJEMPLO DE CÓDIGO. (CU01050D) Sección: Cursos Categoría: Tutorial básico del
JavaScript: Objetos del documento
Francisco J. Martín Mateos Carmen Graciani Diaz Dpto. Ciencias de la Computación e Inteligencia Artificial Universidad de Sevilla Modelo de objetos del documento Todo documento HTML tiene una estructura
JAVASCRIPT VALIDAR CAMPO TEXTO NO VACÍO. QUE VALOR SEA NUMÉRICO. O CORREO ELECTRÓNICO EN FORMULARIOS. EJEMPLOS (CU01182E)
APRENDERAPROGRAMAR.COM JAVASCRIPT VALIDAR CAMPO TEXTO NO VACÍO. QUE VALOR SEA NUMÉRICO. EMAIL O CORREO ELECTRÓNICO EN FORMULARIOS. EJEMPLOS (CU01182E) Sección: Cursos Categoría: Tutorial básico del programador
Unidad Didáctica 2. Elementos básicos del lenguaje Java Tipos, declaraciones, expresiones y asignaciones
Unidad Didáctica 2 Elementos básicos del lenguaje Java Tipos, declaraciones, expresiones y asignaciones Fundamentos de Programación Departamento de Lenguajes y Sistemas Informáticos Versión 1.0.3 Índice
UCEMA Ingeniería Informática Introducción a HTML y Javascript
UCEMA Ingeniería Informática Introducción a HTML y Javascript,QJ'LHJR-$UFXVLQ GDUFXVLQ#FHPDHGXDU Objetivos del Curso 9 Proveer al asistente de conceptos fundamentales que le permitan utilizar los lenguajes
Curso ONLINE de Javascript, jquery y Angular2_. Duración: 50 sesiones aprox. (150 horas lectivas)
Curso ONLINE de Javascript, jquery y Angular2_ Duración: 50 sesiones aprox. (150 horas lectivas) CURSO ONLINE DE Javascript, Jquery y Angular 2_ En el módulo de Javascript, JQuery y Angular 2 entrarás
DESCRIPCIÓN DEL LENGUAJE DE PROGRAMACIÓN P-0
DESCRIPCIÓN DEL LENGUAJE DE PROGRAMACIÓN P-0 Este documento define los elementos de programación del lenguaje P-0, basado en un subconjunto del lenguaje de programación Arduino. 1.- PROGRAMA Un programa
Aprender a desarrollar con JavaScript (2a edición)
Presentación del lenguaje JavaScript 1. Definición y breve historia 17 2. Requisitos previos para un aprendizaje sencillo del lenguaje 19 3. Herramientas necesarias 20 4. Posicionamiento de JavaScript
Aprender a desarrollar con JavaScript
Presentación del lenguaje JavaScript 1. Definición e histórico rápido 11 2. Requisitos previos para un aprendizaje sencillo del lenguaje 13 3. Herramientas necesarias 14 4. Posicionamiento de JavaScript
Scripting en el cliente: Javascript. Tecnologías Web
Scripting en el cliente: Javascript Tecnologías Web Motivación Por qué usar JavaScript? Permite crear efectos atractivos visualmente Permite crear sitios WEB que se visualicen de la misma manera en distintos
Dar formato a los documentos XML
Dar formato a los documentos XML Ofimática Avanzada Profesor: Víctor Fresno Fernández Hojas de estilo La función de las hojas de estilo CSS es la de separar el contenido de la presentación Lenguaje diseñado
Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS CSS - Hojas
TEMA 10: Lo que NO hay que hacer
TEMA 10: Lo que NO hay que hacer Introducción...1 Mezclar módulos...1 No crear una estructura de clases...3 Insertar la logica en los aspx...3 Gestionar los eventos en Page_Load...3 Utilizar Response.Write...4
ALGORÍTMICA. Dpto. Ingeniería de Sistemas y Automática Facultad de Ciencias Universidad de Valladolid.
ALGORÍTMICA Dpto. Ingeniería de Sistemas y Automática Facultad de Ciencias Universidad de Valladolid. Indíce Algoritmo Elementos de un algoritmo: Variables, Constantes, Expresiones Datos: Definición y
FUNCIONES ARRAYS JAVASCRIPT. PUSH, SORT (ORDENAR NÚMEROS), CONCAT, JOIN, POP, SHIFT, SLICE, SPLICE. (CU01153E)
APRENDERAPROGRAMAR.COM FUNCIONES ARRAYS JAVASCRIPT. PUSH, SORT (ORDENAR NÚMEROS), CONCAT, JOIN, POP, SHIFT, SLICE, SPLICE. (CU01153E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript
Lenguajes de Script. Qué son los Lenguajes de Script?
JavaScript (I) 1 Lenguajes de Script Qué son los Lenguajes de Script? Scritps de cliente: son programas que pueden acompañar a un documento HTML o bien ir incrustados en él. Un lenguaje de script es un
SELECTOR DE CLASES CSS: CLASS. APLICAR ESTILOS CSS EN DISTINTOS LUGARES DE UNA WEB. EJEMPLOS. (CU01012D)
APRENDERAPROGRAMAR.COM SELECTOR DE CLASES CSS: CLASS. APLICAR ESTILOS CSS EN DISTINTOS LUGARES DE UNA WEB. EJEMPLOS. (CU01012D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS desde
JAVASCRIPT CREATEELEMENT, CREATETEXTNODE, APPENDCHILD. MODIFICAR PROPIEDAD ONCLICK CON JAVASCRIPT (CU01140E)
APRENDERAPROGRAMAR.COM JAVASCRIPT CREATEELEMENT, CREATETEXTNODE, APPENDCHILD. MODIFICAR PROPIEDAD ONCLICK CON JAVASCRIPT (CU01140E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript
Como todo lenguaje de programación trabaja con variables, es decir, pequeños almacenes de memoria.
1. VARIABLES Uf-1305: PROGRAMACIÓN CON LENGUAJES SCRIPT EN PÀGINES WEB JavaScript es un potente lenguaje interpretado que proporciona interactividad a un sitio web. Como todo lenguaje de programación trabaja
SEMINARIO DE DQL CON PHP Y MYSQL
SEMINARIO DE DQL CON PHP Y MYSQL Índice del Seminario Instalación del paquete XAMPP en Windows Instalación de directorios virtuales. Creación y ejecución de la primera pagina PHP. Fundamentos de PHP Estructura
Estructura de datos y Programación
Estructura de datos y Programación Tema: Conceptos Básicos- Estructuras de control - Arreglos Ing. Analia Méndez Ing. Raquel Zarco Año: 2012 ELEMENTOS DE UN PROGRAMA EN JAVA El programa Java consta de
<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>
... ... Marcos en HTML
FUNCIONES JAVASCRIPT PARA CADENAS DE TEXTO: TOUPPERCASE, TOLOWERCASE, CHARAT, SUBSTRING, SLICE, INDEXOF, SPLIT, REPLACE, REPLACEALL.
APRENDERAPROGRAMAR.COM FUNCIONES JAVASCRIPT PARA CADENAS DE TEXTO: TOUPPERCASE, TOLOWERCASE, CHARAT, SUBSTRING, SLICE, INDEXOF, SPLIT, REPLACE, REPLACEALL. (CU01142E) Sección: Cursos Categoría: Tutorial
PROPIEDADES CSS WIDTH Y HEIGHT. VALOR POR DEFECTO AUTO (AUTOMÁTICO) EJEMPLOS PRÁCTICOS Y EJERCICIOS RESUELTOS (CU01025D)
APRENDERAPROGRAMAR.COM PROPIEDADES CSS WIDTH Y HEIGHT. VALOR POR DEFECTO AUTO (AUTOMÁTICO) EJEMPLOS PRÁCTICOS Y EJERCICIOS RESUELTOS (CU01025D) Sección: Cursos Categoría: Tutorial básico del programador
DISEÑO WEB AVANZADO CON HTML 5 Y CSS3
Ficha 257 DISEÑO WEB AVANZADO CON HTML 5 Y CSS3 Duración: 40 horas OBJETIVOS Planificar y diseñar páginas y sitios web mediante el lenguaje de programación HTML. Conocer e interpretar las etiquetas del
DESARROLLO WEB EN ENTORNO CLIENTE
DESARROLLO WEB EN ENTORNO CLIENTE CAPÍTULO 7: Utilización de Mecanismos de Comunicación Asíncrona Juan Manuel Vara Mesa Marcos López Sanz David Granada Emanuel Irrazábal Jesús Javier Jiménez Hernández
De que forma se pueden crear aplicativos de software en lenguajes de programación en entorno web? VARIABLES ESTRUCTURAS DE CONTROL - FUNCIONES
PREGUNTA PROBLEMATIZADORA: De que forma se pueden crear aplicativos de software en lenguajes de programación en entorno web? VARIABLES VARIABLES ESTRUCTURAS DE CONTROL - FUNCIONES Una variable es un espacio
MS-Excel 2007, Intermedio Avanzado (30 horas)
MS-Excel 2007, Intermedio Avanzado (30 horas) Presentación El presente curso está enmarcado en el plan de Formación Continua, en el cual se incentiva el desarrollo de habilidades informáticas en el personal
FUNDAMENTOS DE INFORMÁTICA
FUNDAMENTOS DE INFORMÁTICA Tema 1 Introducción a la Programación en Visual Basic Departamento de Ingeniería de Sistemas y Automática Universidad de Vigo undamentos de Informática. Departamento de Ingeniería
JavaScript III. JavaScript, la POO y el DOM
JavaScript III JavaScript, la POO y el DOM Tablas HTML Crear una tabla es una tarea tediosa, por la gran cantidad de nodos de tipo elemento y de tipo texto que se deben crear dentro del DOM. DOM para HTML
ING1310 Introducción a la Computación. Python. Conceptos Básicos. Carlos Reveco
ING1310 Introducción a la Computación Python Conceptos Básicos Carlos Reveco creveco@dcc.uchile.cl careveco@miuandes.cl Facultad de Ingeniería/Universidad de los Andes/Chile Rev : 254 C.Reveco Facultad
EFECTOS JAVASCRIPT VISUALES, DE IMÁGENES, TEXTO... RECURSIÓN. SETTIMEOUT NO FUNCIONA EN BUCLES FOR, WHILE,? (CU01166E)
APRENDERAPROGRAMAR.COM EFECTOS JAVASCRIPT VISUALES, DE IMÁGENES, TEXTO... RECURSIÓN. SETTIMEOUT NO FUNCIONA EN BUCLES FOR, WHILE,? (CU01166E) Sección: Cursos Categoría: Tutorial básico del programador
DISEÑO WEB AVANZADO CON HTML5 Y CSS3 MODALIDAD TELEFORMACIÓN HORAS: 40
DISEÑO WEB AVANZADO CON HTML5 Y CSS3 MODALIDAD TELEFORMACIÓN HORAS: 40 Planificar y diseñar páginas y sitios web mediante el lenguaje de programación HTML. Objetivos Conocer e interpretar las etiquetas
Curso práctico de programación
Curso práctico de programación - Javascript 2017 - Matias Salom Avellà Ejercicios de iniciación a la programación. Después de conocer muchos cursos de programación, se puede encontra un común denominador
Capas. Para definir una sección o división se utilizan las capas. Para esto utilizamos las etiquetas de HTML
Capas Capas Para definir una sección o división se utilizan las capas. Para esto utilizamos las etiquetas de HTML y Uso principal es poder aplicar estilo en el cuerpo/porción del documento