Está en la página 1de 11

TUTORIAL JAVASCRIPT

INDICACIONES: Se presentan 4 temas a estudiar cada uno de ellos tiene la


liga a la que debes entrar. Lee la informacin y prueba los ejemplos del tema y
encontraras las respuestas a diversas preguntas que se plantean. Contesta
sobre este mismo documento utilizando un color de letra diferente.

Tema#1: JavaScript Introduction


http://www.w3schools.com/js/js_intro.asp

JAVASCRIPT CAN CHANGE HTML CONTENT


Se presentan dos ejemplos sobre este tema:
1. Con respecto al primer ejemplo Que hace la siguiente lnea?
Explica de manera general.

Al dar clic, aquel elemento con ID = demo cambiara a Hello JavaScript


2. Con respecto al segundo ejemplo. Qu hacen las siguientes
lneas? Explica de manera general.

Maneja dos botones, los cuales manejan un evento para el elemento


con ID = image, al dar clic a uno cambia a una imagen, con el otro
botn cambia otra imagen, es decir cambia el source.
3. Por lo tanto. Qu hace el mtodo getElementById()?
Permite interactuar con la informacin de algn elemento con el ID
especificado.

M. en Informtica Georgina Salazar Partida


TUTORIAL JAVASCRIPT

JAVASCRIPT CAN CHANGE HTML STYLES (CSS)


4. En el ejemplo de este tema Que hacen las siguientes lneas?
Explica de manera general.

Permite cambiar el estilo de algn elemento con ID especificado al


momento de algn evento

JAVASCRIPT CAN HIDE HTML ELEMENTS


5. En el ejemplo de este tema. Qu hacen las siguientes lneas?
Explica de manera general.

Permite ocultar elementos con el ID especificado

JAVASCRIPT CAN SHOW HTML ELEMENTS


6. En el ejemplo de este tema. Qu hacen las siguientes lneas?
Explica de manera general.

Permite mostrar elementos con el ID especificado

M. en Informtica Georgina Salazar Partida


TUTORIAL JAVASCRIPT

TEMA#2: JAVASCRIPT WHERE


TO
http://www.w3schools.com/js/js_whereto.asp
Contesta las siguientes preguntas.
1. En qu lugar del archivo html puede ser colocado cdigo javaScript?
JavaScript puede ser colocado en el <body> y <head> secciones de
una pgina HTML.
2. Cules son las etiquetas entre las cuales se coloca cdigo javaScript?
En HTML, el cdigo JavaScript debe ser insertado entre las
etiquetas <script> y </ script>.
3. Qu dice el tutorial con respecto a la siguiente lnea <script
type="text/javascript">
Ejemplos ms antiguos pueden utilizar un atributo de tipo:. <Script
type = "text / javascript">
No se requiere este tipo de atributo. JavaScript es el lenguaje de
scripts por defecto en HTML.
4. Qu es una funcin javascript?
Una funcin JavaScript es un bloque de cdigo diseado para
realizar una tarea en particular.
Una funcin de JavaScript se define con la funcin de la palabra
clave, seguido por un nombre, seguido de parntesis () .
5. Qu dicen los buenos hbitos con respecto a donde colocar el cdigo
javascript?
Los scripts pueden ser colocados en el <body>, o en la seccin
<head> de una pgina HTML, o en ambos.
Mantener todo el cdigo en un solo lugar, es siempre una buena
costumbre.

M. en Informtica Georgina Salazar Partida


TUTORIAL JAVASCRIPT

JAVASCRIPT IN <HEAD>
6. En el ejemplo del tema Que hacen las siguientes lneas?
Explica de manera general.

Al momento de dar clic en el botn, cambia el contenido del elemento


con el ID espeficiado por lo que se escribi.

M. en Informtica Georgina Salazar Partida


TUTORIAL JAVASCRIPT

JAVASCRIPT IN <BODY>
7. En el ejemplo del tema. Qu hacen las siguientes lneas?
Explica de manera general.

De igual forma, al dar clic, en el elemento con el ID especificado


cambiara el texto por el escrito.
8. Traduce el siguiente texto, donde te siguieren donde teclear los
scripts.

Es buena idea colocar los scripts en la parte superior del elemento


<body>.
Esto puede mejorar la carga de la pgina, ya que la compilacin de
scripts puede alentar la pantalla.

EXTERNAL JAVASCRIPT
9. Por qu se sugiere utilizar un archivo externo para trabajar los scripts?

scripts externos son prcticos cuando se utiliza el mismo cdigo en


diferentes pginas web.
10.Qu extensin tienen los archivos externos con cdigo javaScript?

Archivos JavaScript tienen la extensin .js .

M. en Informtica Georgina Salazar Partida


TUTORIAL JAVASCRIPT

11.Escribe la lnea de cdigo que permite utilizar un archivo externo en un


archivo html

<script src="myScript.js"></script>
12.En que seccin del cdigo html se coloca la referencia al archivo externo
que se utilizara.

Puede colocar una referencia de script externo en el <head> o


<body> como desee.
13.Menciona tres ventajas de usar un archivo externo con cdigo JavaScript
Se separa el cdigo HTML
Hace HTML y JavaScript ms fcil de leer y mantener
archivos JavaScript en cach pueden acelerar la carga de la
pgina
14.Traduce el siguiente recuadro.

Scripts externos no pueden contener etiquetas <script>

M. en Informtica Georgina Salazar Partida


TUTORIAL JAVASCRIPT

TEMA#3: JAVASCRIPT OUTPUT


http://www.w3schools.com/js/js_output.asp

1. Dado que JavaScript no tienen funciones de imprimir o desplegar,


entonces menciona las posibilidades que tiene para desplegar datos.
Escribir en un cuadro de alerta, utilizando window.alert () .
La escritura en la salida HTML utilizando document.write () .
La escritura en un elemento HTML, usando innerHTML .
Escribir en la consola navegador, utilizando console.log () .

USING WINDOW.ALERT()
2. Cundo usas un window.alert()?
Se puede utilizar un cuadro de alerta para mostrar los datos
3. Probar ejemplo.

USING DOCUMENT.WRITE()
4. Cundo usas un document.write()?
Para propsitos de prueba, es conveniente utilizar document.write
() :
5. Probar ejemplo.
6. Qu pasa si usas un document.write() despus de que el html ha sido
totalmente cargado?
Eliminara todo el archivo HTML existente
7. Traduce el siguiente texto.

El mtodo document.write() debe ser nicamente utilizado para


pruebas.

USING INNERHTML
8. Que hace el innerHTML y cmo trabaja en combinacin con el mtodo
document.getElementById( )?
El innerHtml propiedad define el contenido HTML, en conjunto con
getElementById nos deja definir el contenido al elemento con el ID
especificado.

M. en Informtica Georgina Salazar Partida


TUTORIAL JAVASCRIPT

9. Revisar ejemplo.
10.Traduce el siguiente texto.

Para mostrar informacin en HTML, (en mayora de los casos) debes


asignar el valor en un innerHTML.

USING CONSOLE.LOG()
11.Para qu sirve el console.log()?
En su navegador, puede utilizar la console.log () mtodo para mostrar
los datos.

12. Como activas en tu navegador la consola?

Activar la consola navegadora con F12 y seleccione "Consola" en el


men.

13.Probar el ejemplo usando tu navegador

TEMA#4: JAVASCRIPT SYNTAX


http://www.w3schools.com/js/js_syntax.asp

1. Cmo son separadas las sentencias en javaScript?

Sentencias de JavaScript estn separados por puntos y comas .

JAVASCRIPT PROGRAMS
2. Los programas JavaScript por quin son ejecutados?

Un programa de computadora es una lista de "instrucciones" a ser


"ejecutados" por el ordenador

JAVASCRIPT STATEMENTS
Las sentencias javaScript Estn compuestas por?

Valores, operadores, expresiones, palabras clave y comentarios.

JAVASCRIPT VALUES
3. La sintaxis JavaScript define dos categoras de valores, mencinalas y
adems indica el nombre que reciben

M. en Informtica Georgina Salazar Partida


TUTORIAL JAVASCRIPT

La sintaxis de JavaScript define dos tipos de valores: Los valores fijos


y valores de variables.

Los valores fijos se denominan literales. Los valores de variables se


llaman variables.

JAVASCRIPT LITERALS
4. Cules son las reglas ms importantes para escribir fixed values
(javaScript literals) Ejemplifcalas.
Los nmeros se escriben con o sin decimales.
Las cadenas son texto, escrito entre comillas dobles o simples.

JAVASCRIPT VARIABLES
5. Cul es la palabra reservada que utiliza JavaScript para declarar
variables. Escribe un ejemplo.
JavaScript utiliza la var palabra clave para declarar variables.
var nombre = Juan
6. Prueba el cdigo de ejemplo.

JAVASCRIPT OPERATORS
7. Menciona los operadores JavaScript que te muestran en los ejemplos de
este tema.
perador de asignacin (=) para asignar valores a las variables:
var x = 5;
operadores aritmticos (+ - * /) para calcular los valores:
(5 + 6) * 10

8. Probar ejemplos.

JAVASCRIPT EXPRESSIONS
9. Menciona tres ejemplos de Expresiones en JavaScript.
5 * 10
x * 10
"John" + " " + "Doe"
10.Probar ejemplos.

JAVASCRIPT COMMENTS
11.Cul es la manera de escribir comentarios en JavaScript?.

despus de dos barras // o entre / *y* / es tratado como


un comentario

12.Probar Ejemplo

M. en Informtica Georgina Salazar Partida


TUTORIAL JAVASCRIPT

JAVASCRIPT IDENTIFIERS
13.Cules son las reglas para escribir identificadores en JavaScript?

En JavaScript, el primer carcter debe ser una letra, un guin bajo


(_) o un signo de dlar ($).

14.Traduce el siguiente texto

Numeros no estn permitidos como primer carcter.

De esta forma JavaScript puede identificar entre nmeros e


identificadores.

JAVASCRIPT IS CASE SENSITIVE


15.Por qu se dice que JavaScript es case sensitive?

Es sensible a minsculas y maysculas tanto LastName como


Lastname son diferentes variables

16.Traduce la siguiente lnea.


JavaScript does not interpret VAR or Var as the keyword var.

JavaScript no interpreta VAR o Var como etiqueta var.

JAVASCRIPT AND CAMEL CASE


17.Explica cules han sido tradicionalmente los tres estilos utilizados para
colocar nombres a identificadores.
Hyphens:
first-name, last-name, master-card, inter-city.
Underscore:
first_name, last_name, master_card, inter_city.
Camel Case:
FirstName, LastName, MasterCard, InterCity.

18.Cul de los tres estilos es utilizado en JavaScript? Menciona dos


ejemplos.

Camel Case

19.Traduce el siguiente texto

M. en Informtica Georgina Salazar Partida


TUTORIAL JAVASCRIPT

No se permiten guiones en JavaScript. Se reserva para las restas.

JAVASCRIPT CHARACTER SET


20.Cul tabla de caracteres utiliza JavaScript y cul es la ventaja de esta
tabla?

JavaScript utiliza el Unicode conjunto de caracteres.

M. en Informtica Georgina Salazar Partida