Guía JavaScript

Ing. Lissette Torrealba
1. Conceptos básicos: Variables, constantes, tipo de datos, operadores y expresiones, interacción con el
usuario, construcciones de decisión, Construcción de Bucles, Funciones incorporadas, funciones definidas por
el programador, Modelo de Objeto(DOM), Eventos.
Unidad III
Objetivo de la Unidad:
Crear interfaz gráfica de usuario, conocida también como GUI (del inglés graphical user interface),de cada
proyecto asignado a fin de practicar y profundizar los conocimientos en la creación de páginas web y
herramientas JavaScript
Sumario
JavaScript, es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define
como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico. Se utiliza
principalmente en su forma del lado del cliente (front- end), implementado como parte de un navegador
web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas.
Qué necesitas para trabajar con Javascript?
Para programar en Javascript necesitamos básicamente lo mismo que para desarrollar páginas web co n HTML.
Un editor de textos y un navegador compatible con Javascript. Cualquier ordenador mínimamente actual posee
de salida todo lo necesario para poder programar en Javascrip.
Las características de JavaScript son:
Introducción
JavaScript es un lenguaje interpretado que se embebe en una página web HTML. Un lenguaje interpretado
significa que a las instrucciones las analiza y procesa el navegador en el momento que deben ser ejecutadas.
JavaScript es el lenguaje de programación que debes usar para añadir características interactivas a tu Sitio
Web, (por ejemplo juegos, eventos que ocurren cuando los botones son presionados o los datos son
introducidos en los formularios, efectos de estilo dinámicos, animación, y mucho más).
JavaSript fue desarrollado por Netscape Corporation bajo el nombre “LiveScript”. Aunque este lenguaje de
script se denomina JavaScript, no tiene ninguna conexión con el lenguaje de programación Java, aparte del
hecho de que su sintaxis se deriva de java. Java es un lenguaje de programación orientado a objeto mientras
que JavaScript es un lenguaje de script basado en objetos. JavaScript mejora la interactividad del usuario en el
lado del cliente.
Objetivo.
El objetivo de esta guía es poder aprender JavaScript en forma sencilla viendo un concepto teórico, luego algunos
ejercicios resueltos y por último y lo más importante,efectuar una serie de ejercicios.
Requerimientos.
Se debe contar con: Un (1) computador teniendo como mínimo el Sistema Operativo Libre ( Canaima/Ubuntu)
Componentes.
Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática

 Adopta la tecnología basada en objeto, lo que significa que proporciona un conjunto de objetos
del navegador predefinido.
 Está basado en un modelo manejado por eventos.
 Se puede usar para hacer interactivas las painas estáticas HTML.
 Es independiente del navegador, es decir se puede ejecutar en cualquier navegador que tenga
el motor de script de JavaScript.
 Su sintaxis es similar a Java y sus construcciones son similares a C o C++
Sintaxis de JavaScript
El código javascript podemos encontrarlo dentro de las etiquetas <body></body> de nuestras páginas web. Por
lo general se insertan entre: <script></script>. También pueden estar ubicados en ficheros externos usando:
<script type="text/javascript" src="micodigo.js"></script>
Su sintaxis es similar a la usada en Java y C, al ser un lenguaje del lado del cliente este es interpretado por el
navegador, no se necesita tener instalado ningún Framework.
 No se tienen en cuenta los espacios en blanco y las nuevas líneas.
 Se distinguen las mayúsculas y minúsculas
 No se define el tipo de las variables, Las variables son de libre tipado, es decir cualquier variable
puede almacenar datos de cualquier tipo.
 Se pueden incluir comentarios
 La declaración de Variables: plabra reservada var = “Hola”, n=103
 Construcción de Decisión if(i<10){ sentencias a ejecutarse si es verdadero }
else {Sentencias a ejecutarse si la condición resulta falsa }
 Sentencia switch (tipo selector ){
Case valor1:
// sentencia a ejecutarse
break;
Case valor2:
break;
……
Case valor n:
break

default:
}
 Construcciones de Bucles /Ciclos: for(i; i<10; i++){ … }; While, do…while
 Declaración de Arreglos:
var miArreglo = new Array ();
var miArreglo = new Array(“12”, “77”, “5”)
 El índice de los arreglos empieza en cero.
 Soporta arreglos de una sola dimensión
 Funciones: Propias del lenguaje y predefinidas por los usuarios
 Comentarios para una sola línea: // Comentarios
 Comentarios para varias líneas:
/*
Comentarios
*/
 Permite la programación basada en objetos: document.write("Hola");
 Las variables pueden ser definidas como: string, integer, flota, bolean simplemente utilizando “var”.
Podemos usar “+” para concatenar cadenas y variables.
 Los operadores permitidos en JavaScript son os mismos que se usan en C o C++
 Los operadores pueden ser aritméticos,lógicos o de bits.
Funciones Básicas incorporadas en JavaScript
Manejo de Cadenas
length, calcula la longitud de una cadena de texto (el número de caracteres que la forman)
var mensaje = "Hola Mundo";
var numeroLetras = mensaje.length; // numeroLetras = 10
+, se emplea para concatenar varias cadenas de texto
var mensaje1 = "Hola";
var mensaje2 = " Mundo";
var mensaje = mensaje1 + mensaje2; // mensaje = "Hola Mundo"
Además del operador +, también se puede utilizar la función concat()

var mensaje2 = mensaje1.concat(" Mundo"); // mensaje2 = "Hola Mundo"
Las cadenas de texto también se pueden unir con variables numéricas:
var variable1 = "Hola ";
var variable2 = 3;
var mensaje = variable1 + variable2; // mensaje = "Hola 3"
Cuando se unen varias cadenas de texto es habitual olvidar añadir un espacio de separación entre las palabras:
var mensaje2 = "Mundo";
var mensaje = mensaje1 + mensaje2; // mensaje = "HolaMundo"
Los espacios en blanco se pueden añadir al final o al principio de las cadenas y también se pueden indicar
forma explícita:
var mensaje2 = "Mundo";
var mensaje = mensaje1 + " " + mensaje2; // mensaje = "Hola Mundo"
toUpperCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en
mayúsculas:
var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA"
toLowerCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en minúsculas:
var mensaje1 = "HolA";
var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola"
Funcionesútilesparanúmeros
NaN, (del inglés, "Not a Number") JavaScript emplea el valor NaN para indicar un valor numérico no definido
(por ejemplo, la división 0/0).
var numero1 = 0;
var numero2 = 0;
alert(numero1/numero2); // se muestra el valor NaN
isNaN(), permite proteger a la aplicación de posibles valores numéricos no definidos
var numero1 = 0;

submit <input type="submit">
reset <input type="reset">
checkbox <input type="checkbox">
radio <input type="radio">
select <select> ... </select>
hidden <input type="hidden">
El navegador crea un objeto por cada control visual que aparece dentro de la página. Nosotros podemos
acceder posteriormente desde JavaScript a dichos objetos.
El objeto principal es el FORM que contendrá todos los otros objetos: TEXT (editor de líneas), TEXTAREA
(editor de varias líneas), etc.
Nuestra actividad en JavaScript es procesar los eventos que generan estos controles (un evento es una acción
que se dispara, por ejemplo si se presiona un botón).
Formularios
La programación de aplicaciones que contienen formularios web siempre ha sido una de las tareas
fundamentales de JavaScript. De hecho, una de las principales razones por las que se inventó el lenguaje de
programación JavaScript fue la necesidad de validar los datos de los formularios directamente en el navegador
del usuario. De esta forma, se evitaba recargar la página cuando el usuario cometía errores al rellenar los
formularios.
Eventos
Los eventos hacen posible que los usuarios transmitan información a los programas. JavaScript define
numerosos eventos que permiten una interacción completa entre el usuario y las páginas/aplicaciones web. La
pulsación de una tecla constituye un evento, así como pinchar o mover el ratón, seleccionar un elemento de un
formulario, redimensionar la ventana del navegador, etc.
JavaScript permite asignar una función a cada uno de los eventos. De esta forma, cuando se produce cualquier
evento, JavaScript ejecuta su función asociada. Este tipo de funciones se denominan "event handlers" en
inglés y suelen traducirse por "manejadores de eventos".
La siguiente tabla resume los eventos más importantes definidos por JavaScript:
Evento Descripción Elementos para los que está definido
onblur Deseleccionar el elemento
<button>, <input>, <label>, <select>, <textarea>,
<body>
onchange Deseleccionar un elemento que se ha modificado <input>, <select>, <textarea>
onclick Pinchar y soltar el ratón Todos los elementos
ondblclick Pinchar dos veces seguidas con el ratón Todos los elementos
onfocus Seleccionar un elemento
<button>, <input>, <label>, <select>, <textarea>,
<body>
onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y <body>

Evento Descripción Elementos para los que está definido
onkeypress Pulsar una tecla Elementos de formulario y <body>
onkeyup Soltar una tecla pulsada Elementos de formulario y <body>
onload La página se ha cargado completamente <body>
onmousedown Pulsar (sin soltar) un botón del ratón Todos los elementos
onmousemove Mover el ratón Todos los elementos
onmouseout
El ratón "sale" del elemento (pasa por encima de
otro elemento)
Todos los elementos
onmouseover
El ratón "entra" en el elemento (pasa por encima
del elemento)
Todos los elementos
onmouseup Soltar el botón que estaba pulsado en el ratón Todos los elementos
onreset Inicializar el formulario (borrar todos sus datos) <form>
onresize
Se ha modificado el tamaño de la ventana del
navegador
<body>
onselect Seleccionar un texto <input>, <textarea>
onsubmit Enviar el formulario <form>
onunload
Se abandona la página (por ejemplo al cerrar el
navegador)
<body>
DOM
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 más complejas. DOM permite a los
programadores web acceder y manipular las páginas XHTML como si fueran documentos XML. De hecho,
DOM se diseñó originalmente para manipular de forma sencilla los documentos XML. A pesar de sus orígenes,
DOM se ha convertido en una utilidad disponible para la mayoría de lenguajes de programación (Java, PHP,
JavaScript) y cuyas únicas diferencias se encuentran en la forma de implementarlo.
Jerarquía del Modelo de Objetos del Documento (DOM)
getElementById()
La función getElementById() es la más utilizada cuando se desarrollan aplicaciones web dinámicas.
Se trata de la función preferida para acceder directamente a un nodo y poder leer o modificar sus
propiedades.

La función getElementById() devuelve el elemento XHTML cuyo atributo id coincide con el
parámetro indicado en la función. Como el atributo id debe ser único para cada elemento de una
misma página, la función devuelve únicamente el nodo deseado.
var cabecera = document.getElementById("cabecera");
<div id="cabecera">
<a href="/" id="logo">...</a>
</div>
La función getElementById() es tan importante y tan utilizada en todas las aplicaciones web, que
casi todos los ejemplos y ejercicios que siguen la utilizan constantemente
Autoevaluación
1.- En una página HTML, ¿cuál esla forma correcta de hacer referenciaaun ficheroexternoconcódigo
JavaScript llamado "xxx.js"?
a) <scriptname="xxx.js"type="text/javascript"/>
b) <script href="xxx.js"type="text/javascript"/>
c) <script src="xxx.js"type="text/javascript"/>
d) Las anterioresrespuestasnosoncorrectas
2. En JavaScript, ¿cómo se muestra una ventana con el mensaje "Holamundo!"?
a) alert("Holamundo!");
b) alertBox = "Holamundo!";
c) alertBox("Holamundo!);
d) msgBox("Holamundo!);
3. En JavaScript, ¿qué función se empleapara convertiruna cadena a minúsculas?
a) lower()
b) lowerCase()
c) toLower()
d) toLowerCase()
4. JavaScript esun lenguaje de programación Compilado¿
a) Verdadero
Falso
5. En JavaScript, ¿cómo se escribe un bucle "for" para contar desde 1 hasta 5?
a) for (i = 1; i <= 5; i++)
b) for (i <= 5; i++)
c) for i = 1 to 5
d) Las anteriores respuestas no son correctas
Referencias Bibliográficas

http://www.tutorialesprogramacionya.com/javascriptya/index.php?inicio=10
http://librosweb.es/libro/javascript/capitulo_3/variables.html

Guía JavaScript

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Guía JavaScript

Similar a Guía JavaScript (20)

Más de lissette_torrealba

Más de lissette_torrealba (20)

Último

Último (20)

Guía JavaScript