Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

JAVASCRIPT - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 29 de abril de 2020 por Isabel L.

128 visualizaciones

INSERTAR UN PROGRAMA JAVASCRIPT EN UNA PAGINA WEB

Más información Transcripción

Descargar la transcripción

Bueno, lo que voy a hacer es intentar orientaros un poquito, que creo que con el vídeo y con una pequeña explicación, sobre la última parte de esta lección. 00:00:00
Hasta ahora lo que habíamos conseguido era crear un sitio web estático en donde podíamos presentar información, pero el usuario no había interactuación. 00:00:16
Es una información que la tenemos bien configurada, la tenemos bien organizada, la presentación es correcta, pero no hay interactuación. 00:00:34
El usuario no es capaz de modificar la información que aparece ahí, no se puede modificar la información que aparece ahí, interactuando con esa información. 00:00:47
¿por qué? porque es una página estática 00:00:59
o sea, me estoy refiriendo a interactuación 00:01:04
por ejemplo, si yo quiero 00:01:06
esto sería un ejemplo de página dinámica 00:01:10
yo aquí, por ejemplo, me cojo un color 00:01:15
y veis que yo puedo, con el ratón 00:01:20
trazar líneas de distinto color 00:01:23
y esto pues me permitiría dibujar con el ratón 00:01:26
yo puedo llegar a dibujar 00:01:31
hay una interactuación clara 00:01:32
entre la información que me aparece en la página web 00:01:35
y el usuario 00:01:38
¿cómo se ha conseguido eso? 00:01:40
pues evidentemente es lógico pensar 00:01:43
que para que exista esa interactuación 00:01:46
tenemos que usar algún tipo de programa 00:01:49
algún tipo de lenguaje 00:01:53
de programación 00:01:55
que hemos visto hasta ahora 00:01:57
que la programación 00:01:59
nos va a permitir eso 00:02:00
a partir de una entrada 00:02:02
dar una determinada salida 00:02:05
el programa 00:02:07
como lo veis está aquí 00:02:10
este es el código 00:02:11
de esta página web 00:02:15
que no hemos visto 00:02:17
este código es bastante complejo 00:02:18
yo no os voy a pedir que hagáis 00:02:20
un código tan complejo como este 00:02:21
Pero sí nos permite un poco analizarlo, porque si os dais cuenta, este código tiene estructura de página web. 00:02:23
Aquí hay un HTML que empieza, un HTML que termina, un encabezado que empieza y que termina. 00:02:33
o sea que hay algo metido en ese encabezado, pero el encabezado termina aquí 00:02:47
y luego hay un cuerpo donde también hay un cierto código que es el que tenemos ahí. 00:02:52
Esta es una página que está escrita con un lenguaje de programación 00:03:00
que es muy utilizado en las páginas web dinámicas que se conoce con el nombre de Javascript. 00:03:04
Javascript es un lenguaje de programación 00:03:12
que es un lenguaje de programación en contraposición a lo que hemos visto en C++ 00:03:16
es un lenguaje de programación orientado a objetos 00:03:23
es decir, que nosotros vamos a programar objetos 00:03:26
concretamente los objetos que tenemos ahí 00:03:30
¿esto qué indica o qué supone? 00:03:33
Pues supone que vamos a tener que programar o que aparecer tanto en el encabezado, en el encabezado es donde está el verdadero programa, entre estas etiquetas que se llaman scripts, igual que teníamos en las hojas de estilo style, en este caso tenemos las etiquetas scripts, 00:03:38
Entre esas etiquetas script yo lo que voy es a meter un programa, un programa que está escrito en javascript y en la parte del cuerpo de la página lo que voy a tener es los objetos que ha programado ese programa. 00:04:01
Entonces, la primera diferenciación es con respecto a los programas C++ que hemos utilizado y Python, es que en este caso necesitamos objetos que programar, ¿vale? 00:04:25
aquí bueno pues 00:04:41
ya os digo que este no 00:04:44
este es un poco complicado porque este programa 00:04:45
es un programa con gráficos 00:04:48
y entonces pues tiene 00:04:51
varias funciones 00:04:52
realmente si alguien ha utilizado 00:04:54
Scratch 00:04:56
son un poco como las funciones 00:04:57
de las flechas que aparecen en Scratch 00:05:00
pero bueno 00:05:02
es un programa 00:05:04
digamos que puede 00:05:07
decir que parece que tiene una cierta 00:05:08
complejidad, un cierto grado de complejidad. ¿Qué vamos a hacer? Pues esencialmente Java tiene muchas 00:05:10
cosas en común con C++ en cuanto a sintaxis y en cuanto a comandos. Por ejemplo, como en el C++ 00:05:19
los programas, aunque sean orientados a objetos, pues pueden ser secuenciales, pueden ser ramificados 00:05:28
y pueden ser bucles y al igual que en C++ cuando tenemos un programa secuencial 00:05:37
pues tenemos que identificar y definir las variables y ver los tipos de variables que son 00:05:48
después tendremos que hacer las operaciones y dar los resultados. 00:05:55
Si tenemos una ramificación, las ramificaciones necesitan la sentencia if con una condición, después una serie de acciones y en Java se sigue usando el if, condición y una serie de acciones. 00:06:02
Y para crear bucles, pues existen varias formas, pero en C++, os recuerdo que usamos el FOR y que usamos el DO WHILE y en Javascript también tenemos esas sentencias. 00:06:21
Entonces, esencialmente, programarse programa igual, ¿vale? 00:06:38
La programación en Java es más o menos igual que la programación en C++. 00:06:45
lo que nos va lo que va a variarse son como nosotros definimos los objetos vale veamos un 00:06:50
ejemplo un ejemplo más sencillo que éste vale más asequible para vosotros vale pues imaginaos 00:07:00
y ahora lo voy a subir imaginaos que tenemos nuestra nuestro sitio web que ya tenemos aquí 00:07:11
entonces vamos al apartado de javascript y veis que aquí hay un programa ahí ya 00:07:17
hay una interacción en un programa muy sencillo que lo que hace es si yo le 00:07:25
meto dos números nos da el producto a pues no nos da pero es que no puesto 00:07:29
ninguno puesto 34 vale si yo le meto dos números nos da el valor del producto de 00:07:39
esos dos números vale claro esto es si todo bueno si os acordáis del c plus plus y de los 00:07:46
elementos básicos de programación pues es un típico programa secuencial sin mayor sin mayores 00:07:54
pretensiones es súper fácil entonces vamos a ver vamos a ver dicho programa y para ver dicho 00:08:00
programa vamos a editarle aquí podéis encontrar en internet ya os digo es esencialmente tanto 00:08:10
la sentencia vale que este no me lo puede abrir tengo que abrirlo con otro esencialmente tanto 00:08:26
las sentencias como la gramática es la misma vale en este caso para definir la variable o 00:08:45
o sea, para indicar que vamos a empezar un programa con una variable que es k, 00:08:53
vamos a hacer una especie de función, entonces le ponemos el nombre que es multiplicando, 00:08:58
tenemos dos variables n1 y n2, y el resultado es una función 00:09:05
que lo que hace es multiplicar los números y dar el valor de esa variable. 00:09:10
Entonces, para ver esta función que tenemos aquí, 00:09:18
y esto es lo que quizás sí que sea diferente 00:09:21
tenemos que hacer unas entradas 00:09:24
veis que aquí tenemos las entradas 00:09:28
las entradas de los valores 00:09:30
entonces yo lo que hago es 00:09:33
a través del documento 00:09:35
crearme un formulario 00:09:37
o sea 00:09:39
que no necesariamente tiene que ser como formulario 00:09:41
lo podéis hacer sin formulario 00:09:44
pero crearnos un formulario 00:09:46
si hubieseis visto un poquito de 00:09:48
de bases de datos, de access, pues no os parecería normal 00:09:50
porque en access lo que se programa, en Visual Basic 00:09:55
se programa un poco muy parecido, es muy parecido a esto 00:09:59
se hace un formulario y entonces esos apartaditos 00:10:02
del formulario son los que, los valores de esos apartaditos 00:10:07
del formulario son los que se utilizan para hacer este programa 00:10:11
y en esencia es lo que hemos hecho aquí, la función lo que hace 00:10:14
es simplemente obtener esos valores 00:10:18
y dar el resultado, o sea, esta parte 00:10:20
donde pone function 00:10:22
realmente es para crear 00:10:24
ese formulario 00:10:26
como veis el programa, este sería el programa 00:10:28
en Javascript, que está 00:10:31
sacado 00:10:32
y como lo hacemos 00:10:33
como lo implementamos en una página web 00:10:36
pues igual que hemos visto 00:10:39
el otro, ¿no? 00:10:41
¿cómo podemos implementar esto en una página web? 00:10:43
bueno 00:10:48
Pues fijaros, este no me gusta, voy a usar otro porque este vamos a hacerle aquí, vamos a ir paso por paso. 00:10:49
En una página web habéis visto el programa que podríamos implementar en Java. 00:11:03
Pues para incluirlo dentro de la página web se incluye en el encabezado y entre las etiquetas script y veis que este es el mismo, exactamente el mismo programa que os he enseñado antes, que es un programa de tipo Java. 00:11:11
Lo incluimos ahí. Y para que se ejecute, tenemos que establecer dentro del cuerpo cómo va a ser, vamos, tenemos que definir en definitiva, tenemos que definir con estas variables que tenemos aquí, tenemos que definir el formulario. 00:11:29
O sea, que es un poco como en Scratch, primero se definen los objetos, y en este caso, como tienen que ser visibles, se tienen que definir dentro del cuerpo, y esos objetos son los que después, en la etiqueta script, vamos a programar, ¿vale? 00:11:51
ahora 00:12:14
igual que ocurría con las hojas de estilo 00:12:17
todo lo que está 00:12:20
en la etiqueta script 00:12:22
lo podemos hacer 00:12:24
en un documento aparte 00:12:26
y después hacer un link 00:12:28
la ventaja 00:12:30
pues igual que en el caso de las hojas de estilo 00:12:32
cuando nosotros queremos definir 00:12:34
muchos estilos 00:12:36
pues el encabezado se puede hacer muy largo 00:12:37
entonces 00:12:40
este script 00:12:41
este programa jave 00:12:43
de java es un programa muy facilito 00:12:44
muy sencillito, pero si por ejemplo 00:12:47
metieses el otro, el del paint 00:12:49
pues ese es un programa bastante 00:12:51
más complejo y claro 00:12:53
pues meterlo 00:12:55
con código dentro del encabezado 00:12:57
puede resultar 00:12:59
mucho más tedioso, vale 00:13:01
entonces en este caso lo que vamos 00:13:02
a hacer es 00:13:05
hacer un link 00:13:06
hacer un link 00:13:12
O sea, crear con todo lo que está en el Java, todo lo que tenemos aquí dentro de las etiquetas script, 00:13:14
creamos un documento que tiene como formato JS, ¿vale? 00:13:23
Que implica que es un documento en JavaScript, JavaScript, ese es de JS. 00:13:32
Y luego lo que hacemos es, mediante una etiqueta de este tipo, la etiqueta script, en este caso lo que hacemos es un link, ves que aquí el src siempre se refiere a un link, lo linkamos a este documento. 00:13:36
Y en el cuerpo tenemos que definir el formulario, ¿vale? O sea, aquí en el cuerpo, en la parte, en la celda de la tabla donde nosotros vamos a, queremos que se ejecute ese Javascript, hemos definido el formulario. 00:14:04
De tal manera que si ahora yo abro mi sitio web y me voy a Javascript, pues me voy a encontrar que sigue teniendo mi tema, que conservo mi tema, que conservo el formato de mi tabla, pero que ahora yo puedo ejecutar el Javascript en esta hoja. 00:14:25
la cuestión sería que tendríais que hacer vosotros un programa 00:14:54
yo he escogido el multiplicando 00:15:04
porque de todos los posibles programas 00:15:07
es que si hacéis un sumar 00:15:09
sumar es un poquito más complicado 00:15:11
porque a la hora de captar el formulario 00:15:13
le pasa lo mismo que en el Visual Basic 00:15:16
a la hora de sumar 00:15:19
él lo puede entender no como una suma 00:15:20
Sino que une los dos dígitos 00:15:23
Entonces hay que tener un poco de cuidado 00:15:27
Multiplicar es más sencillo 00:15:28
Me conformo con que me hagáis el programa de multiplicar 00:15:30
Yo voy a intentar trabajar 00:15:35
No quedarme en multiplicar 00:15:37
Y voy a intentar hacer un programa Java 00:15:39
Cuyo resultado sea el factorial de un número 00:15:41
¿Vale? Eso es mi reto 00:15:47
el vuestro, pues si sois capaces de llegar hasta aquí 00:15:48
ya sería suficiente para vosotros 00:15:53
y si no yo me quedo aquí multiplicando 00:15:56
pero yo voy a intentar hacer el factorial 00:15:59
y si alguien quiere, tiene tiempo y le apetece 00:16:03
pues que lo vaya haciendo 00:16:10
de momento yo creo que como introducción 00:16:11
¿Vale? Es suficiente y espero caberos aclararlo. 00:16:17
De todas formas, vamos a explicarlo mañana en clase por si surgen dudas, que me imagino que surgirán muchas. 00:16:23
Pero como hay algunos que no podéis entrar en Teams, pues os los dejo aquí grabado, que siempre servirá de orientación. 00:16:31
Un saludo y hasta luego. 00:16:39
Idioma/s:
es
Autor/es:
Isabel Lafuente Reboredo
Subido por:
Isabel L.
Licencia:
Reconocimiento - No comercial
Visualizaciones:
128
Fecha:
29 de abril de 2020 - 19:06
Visibilidad:
Público
Centro:
IES JOSÉ GARCÍA NIETO
Duración:
16′ 41″
Relación de aspecto:
16:10 El estándar usado por los portátiles de 15,4" y algunos otros, es ancho como el 16:9.
Resolución:
1440x900 píxeles
Tamaño:
592.96 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid