Guia Ccs

Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática
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).
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.
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.
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
 Se pueden incluir comentarios
 Variables: var = “Hola”, n=103
 Condiciones: if(i<10){ … }
 Ciclos: for(i; i<10; i++){ … }
 Arreglos: var miArreglo = new Array(“12”, “77”, “5”)
Ing. Lissette Torrealba

 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 orientada a objetos: document.write("Hola");
 Las variables pueden ser definidas como: string, integer, flota, bolean simplemente utilizando “var”.
Podemos usar “+” para concatenar cadenas y variables.
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 útiles para números
NaN, (del inglés, "Not a Number") JavaScript emplea el valor NaN para indicar un valor numérico no definido (p
or 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;
var numero2 = 0;
if(isNaN(numero1/numero2)) {
alert("La división no está definida para los números indicados");
else {
alert("La división es igual a => " + numero1/numero2);
eval()

parsetInt():
parsetFloat()
Funciones Definidas por el Programador

function calculaPrecioTotal(precio) {
var impuestos = 1.16;
var gastosEnvio = 10;
var precioTotal = ( precio * impuestos ) + gastosEnvio;
return precioTotal;
}
var precioTotal = calculaPrecioTotal(23.34);
Funciones Interacción con el usuario
alert(), prompt(), confirm()
Formularios y Eventos
El uso de Javascript en los formularios HTML se hace fundamentalmente con el objetivo de validar los datos
ingresados. Se hace esta actividad en el cliente (navegador) para desligar de esta actividad al servidor que
recibirá los datos ingresados por el usuario.
Las etiquetas HTML para la creación de formularios en una página web:
form <form> ... </form>
text <input type="text">
password <input type="password">
textarea <textarea> ... </textarea>
button <input type="button">
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

<button>, <input>, <label>, <select>, <textarea>,
onblur Deseleccionar el elemento
<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
<button>, <input>, <label>, <select>, <textarea>,
onfocus Seleccionar un elemento
<body>
onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y <body>
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
El ratón "sale" del elemento (pasa por encima de
onmouseout Todos los elementos
otro elemento)
El ratón "entra" en el elemento (pasa por encima
onmouseover Todos los elementos
del elemento)
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 <body>

Evento Descripción Elementos para los que está definido

navegador
onselect Seleccionar un texto <input>, <textarea>
onsubmit Enviar el formulario <form>
Se abandona la página (por ejemplo al cerrar el
onunload <body>
navegador)
DOM
La creación del Document Object Model o DOM es una de las innovaciones que más ha influido en el desarroll
o 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ñó origi
nalmente para manipular de forma sencilla los documentos XML. A pesar de sus orígenes, DOM se ha converti
do 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
Actividad a Realizar

Realizar la siguiente practica
Referencias Bibliográficas
http://www.tutorialesprogramacionya.com/javascriptya/index.php?inicio=10
http://librosweb.es/libro/javascript/capitulo_3/variables.html

Guia Ccs

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guia Ccs

Cargado por

Copyright:

Formatos disponibles

Universidad Politécnica Territorial Andrés Eloy Blanco

Programa Nacional de Formación en Informática

JavaScript, es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define

<script type="text/javascript" src="micodigo.js"></script>

 No se tienen en cuenta los espacios en blanco y las nuevas líneas.

Ing. Lissette Torrealba

 Funciones: Propias del lenguaje y predefinidas por los usuarios

Funciones Básicas incorporadas en JavaScript

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 mensaje1 = "Hola";

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 mensaje = variable1 + variable2; // mensaje = "Hola 3"

var mensaje1 = "Hola";

var mensaje2 = "Mundo";

var mensaje = mensaje1 + mensaje2; // mensaje = "HolaMundo"

Ing. Lissette Torrealba

var mensaje1 = "Hola";

var mensaje2 = "Mundo";

var mensaje = mensaje1 + " " + mensaje2; // mensaje = "Hola Mundo"

toUpperCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en

var mensaje1 = "Hola";

var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA"

var mensaje1 = "HolA";

var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola"

Funciones útiles para números

alert(numero1/numero2); // se muestra el valor NaN

isNaN(), permite proteger a la aplicación de posibles valores numéricos no definidos

alert("La división no está definida para los números indicados");

alert("La división es igual a => " + numero1/numero2);

Ing. Lissette Torrealba

Funciones Definidas por el Programador

Funciones Interacción con el usuario

alert(), prompt(), confirm()

Las etiquetas HTML para la creación de formularios en una página web:

form <form> ... </form>

text <input type="text">

password <input type="password">

textarea <textarea> ... </textarea>

button <input type="button">

submit <input type="submit">

reset <input type="reset">

checkbox <input type="checkbox">

radio <input type="radio">

select <select> ... </select>

hidden <input type="hidden">

(editor de varias líneas), etc.

Evento Descripción Elementos para los que está definido

Ing. Lissette Torrealba

Evento Descripción Elementos para los que está definido

Jerarquía del Modelo de Objetos del Documento (DOM)

La función getElementById() es la más utilizada cuando se desarrollan aplicaciones web dinámicas.

Ing. Lissette Torrealba

La función getElementById() devuelve el elemento XHTML cuyo atributo id coincide con el

var cabecera = document.getElementById("cabecera");

Ing. Lissette Torrealba