Download - Examen EPT

Transcript
Page 1: Examen EPT

"Examen Del 3er Bimestre EPT".¡Bien hecho! Vamos a agregar un evento más de jQuery a nuestra simulación de la"destrucción de Krypton".

1.- Creamos HTML y también las conexiones a Style.css, JavaScript.js en los círculos insertaremos los nombres que corresponda.

2.- Ahora Creamos una Hoja Style.css e introducimos el código para dibujar un circulodándole un color y de fondo como podemos ver simulamos una galaxia con una imagen de tipo *.Gif y para q no se repita la imagen tenemos el controlar repeat

Bach. Ingeniero de Sistemas: Max Eder Jayacc De La Cruz

Page 2: Examen EPT

3.- Una vez creada la hoja de Style.css no olvidar la conexión.

4.- Ahora insertamos el código de JavaScript en la hoja correspondiente que esJavaScript.js para la simulación de cambio de color del planeta con solo un clic.

5.- Realizamos la Conexión de HTML con la hoja de JavaScript.js.

Bach. Ingeniero de Sistemas: Max Eder Jayacc De La Cruz

Page 3: Examen EPT

6.- Ahora, para poder utilizar los códigos que están en JavaScript Usted necesita Jquery-2.1.4.min-js es un archivo similar al JavaScript, tenemos que en lazarlo con el html para q funcione y verificar que estén en la misma ubicación con el html.

7.- El proyecto debe de quedar de esta manera

7.- click en el mundo y sucede lo siguiente:

Bach. Ingeniero de Sistemas: Max Eder Jayacc De La Cruz

Page 4: Examen EPT

8.- Agregamos dos planetas más… como deben saber los planetas se crearon dentro deun Div gracias al CSS de la siguiente manera en body Agregamos lo siguiente: a cada div le otorgamos un nombre gracias al id=”…..” con eso podremos identificar quien es quien

9.- Ahora para darle emoción a los planetas le aplicaremos cada función ustedesPodrán distinguir porque utilizaremos sus identificadores:

Al tercer planeta se le agregara una clase red que está en CSS quiere decir que el planeta cambiara de color.

Bach. Ingeniero de Sistemas: Max Eder Jayacc De La Cruz

Page 5: Examen EPT

Al segundo planeta se le agregara la función de FadeOut que es desaparecer.

Hover: es la acción de pasar el cursor por el objeto, en este caso por el <divid=”planeta2”></div>

Clic: ya lo conocen no hay por qué describirlo…

10.- Realicemos las pruebas respectivas

Bach. Ingeniero de Sistemas: Max Eder Jayacc De La Cruz

Page 6: Examen EPT

11.- Ahora agregaremos algunas funciones extras en Style.css Introduciremos elSiguiente código:

12.- En JavaScript Agregaremos las siguiente Función: cree un párrafo en Html ydescriba como funciona está última función… Pista: presiona la tecla espaciadora.

Bach. Ingeniero de Sistemas: Max Eder Jayacc De La Cruz

Page 7: Examen EPT

Bach. Ingeniero de Sistemas: Max Eder Jayacc De La Cruz