introducción javascript javascript introducción a javascript

Introducción

Javascript

JavaScript

Introducción a Javascript

JavaScript

¿Que es JavaScript?


JavaScript (abreviado comúnmente "JS") es unlenguaje de programación que permite crear acciones en las páginas web.

Sintaxis

Variables

Operadores

Estructuras de flujo

Estructuras cíclicas

Funciones

DOM

Eventos

Formularios

Se utiliza principalmente en su forma del lado del cliente implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas

JavaScript

¿Cómo incluir JavaScript en un documento HTML?


Incluir JavaScript en el mismo documento HTMLSintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

<!DOCTYPE html><head><meta charset="UTF-8"><title>Ejemplo de código JavaScript<script type="text/javascript">

alert("Un mensaje de prueba");

</script></head><body>

en el propio documento</title>

<p>Un</body>

</html>

párrafo de texto.</p>

JavaScript


Definir JavaScript en un archivo externoSintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

Archivo codigo.jsalert("Un mensaje de prueba");

<!DOCTYPE html><head><meta charset="UTF-8"><title>Ejemplo de código JavaScript en

archivo externo</title><script type="text/javascript" src="/js/codigo.js"></script>

</head><body>

<p>Un párrafo de texto.</p></body>

</html>


JavaScript


Incluir JavaScript en los elementos HTMLSintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

<!DOCTYPE html><head><meta charset="UTF-8"><title>Ejemplo de código JavaScript en el propio documento</title><script type="text/javascript" src="/js/codigo.js"></script>

</head><body><p onclick="alert('Un</body>

</html>

mensaje de prueba')">Un párrafo de texto.</p>


JavaScript

Sintaxis


La sintaxis de JavaScript es muy similar a la de otroslenguajes de programación como Java y C. Las normas

Sintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

básicas que definen la sintaxis de JavaScript son lassiguientes:

No se tienen en cuenta los espacios en blanco y lasnuevas líneas

Se distinguen las mayúsculas y minúsculas.

JavaScript

Sintaxis


No se define el tipo de las variablesSintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

No es necesario terminar cada(;)

sentencia con elcarácter de punto y coma

Se pueden incluir comentarios: los comentarios se utilizan para añadir información en el código fuente.

JavaScript define dos tipos de comentarios: los de una sola línea y los que ocupan varias líneas.

/* Los comentarios de varias líneas son muy útiles

cuando se necesita incluir bastante información en los comentarios */alert("mensaje de prueba");

// a continuación se muestra un mensaje alert("mensaje de prueba");

JavaScript

Variables

Las variables en JavaScript se crean mediante la palabra reservada var. La palabra reservada var solamente se debe indicar al definir por primera vez la variable, lo que se denomina declarar una variable. Cuando se utilizan las


Sintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

variables en el resto de instrucciones del script,solamente es necesario indicar su nombre.

Si cuando se declara una variable se le asigna tambiénvalor, se dice que la variable ha sido inicializada.

unEn

JavaScript no es obligatorio inicializar las

var numero_1 = 3;

variables.

var numero_2 = 1;

numero_3 = 10;

JavaScript

Tipos de variables

NuméricasSe utilizan para almacenar valores numéricos enteros(integer) o decimales (float). En este caso, el valor seasigna indicando directamente el número entero odecimal. Los números decimales utilizan el carácter .(punto) en vez de , (coma) para separar la parteentera y la parte decimal.


Sintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formulariosvar edad= 16; // variable tipo entero

var total = 234.65; // variable tipo decimal

JavaScript

Tipos de variables

Cadenas de textoSe utilizan para almacenar caracteres, palabras y/ofrases de texto. Para asignar el valor a la variable, seencierra el valor entre comillas dobles o simples, paradelimitar su comienzo y su final


Sintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

var mensaje = "Bienvenido a nuestro sitio web";

var nombre_Producto = 'Producto ABC';

var letra = 'c';

JavaScript

Tipos de variables

Cadenas de textoJavaScript define un mecanismo para incluir de formasencilla caracteres especiales y problemáticos dentrode una cadena de texto. El mecanismo consiste en


Sintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

sustituir el carácter problemático por unacombinación simple de caracteres. A continuación semuestra la tabla de conversión que se debe utilizar:

Si se quiere incluir... Se debe incluir...

Una nueva línea \n

Un tabulador \t

Una comilla simple \'

Una comilla doble \"

Una barra inclinada \\

JavaScript

Tipos de variables

BooleanosLas variables de tipo boolean o booleano también seconocen con el nombre de variables de tipo lógico.


Sintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

Una variable de tipo boolean almacena un tipoespecial de valor que solamente puede tomar dosvalores: true (verdadero) o false (falso). No se puedeutilizar para almacenar númerosguardar cadenas de texto.

y tampoco permite

var existe= false;

var ivaIncluido = true;

JavaScript

Tipos de variables

Arreglos (array)Un array es una colección deser todas del mismo tipo odiferente.


variables, que puedencada una de un tipo

Sintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

var nombre_array = [valor1, valor2, ..., valorN];

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];

Una vez definido un array, cada elemento se accedeindicando su posición dentro del array. Las posicionesde los elementos empiezan a contarse en el 0.

var diaSeleccionado = dias[0]; // diaSeleccionado = "Lunes"

var otroDia = dias[5]; // otroDia = "Sábado"

JavaScript

Operadores matemáticos

Los operadores permiten manipular el valor de lassus


variables, realizar operaciones matemáticas conSintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

valores y comparar diferentes variables.

Prof. Renny Batista

Operador Descripción

= Asignación

+ Suma

- Resta

++ Incremento en uno

-- Decremento en uno

* Multiplicación

/ División entera

% División modular

JavaScript

Operadores relacionales

¿Que es JavaScript?Los operadores relacionales definidos por JavaScript sonidénticos a los que definen las matemáticas. El resultado

Sintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

de todos estos operadores siempre es un valor booleano


< Menor que…

<= Menor igual que…

> Mayor que…

>= Mayor o igual que…

== Igual que…

!= Distinto de…

JavaScript

Operadores lógicos

¿Que es JavaScript?Los operadores lógicos son imprescindibles para realizaraplicaciones complejas, ya que se utilizan para tomardecisiones sobre las instrucciones que debería ejecutar elprograma en función de ciertas condiciones. El resultado

Sintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

de cualquier operación que utilice operadores lógicossiempre es un valor lógico o booleano.


&& And (disyunción – y)

|| Or (conjunción – o)

! Not (negación – no)

JavaScript

Estructura if...else

La estructura más utilizada en JavaScript y en la mayoría¿Que es JavaScript?

de lenguajes de programación es la estructura if. SeSintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

emplea para tomar decisiones en función de unacondición. Su definición formal es:

if(condición) {//Sentencias...

}else {

//Sentencias...

}

si la condición es verdadera

si la condición es falsa

JavaScript

Estructura switch…case

Esta estructura permite que el flujo se bifurque por varias¿Que es JavaScript?

ramas en el punto de la toma de decisión, esto en funciónSintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

del valor que tome el selector.

switch(variable){case valor_1:... break;

case valor_2:...break;

case valor_n:... break;

default:...

}

JavaScript

Estructura while

La estructura while permite crear bucles que se ejecutan¿Que es JavaScript?

ninguna o más veces, dependiendo de la condiciónSintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

indicada. El funcionamiento del bucle while se resume en:"mientras se cumpla la condición indicada, repiteindefinidamentebucle".

las instrucciones incluidas dentro del

var

var var

resultado = 0;numero = 100;i = 0;

While(condicion){

...}

while(i <= numero) {resultado += i;i++;

}alert(resultado);

JavaScript

Estructura do…while


El bucle de tipo do...while es muy similar al bucle while,Sintaxis

Variables

Operadores


salvo que en estebucle

caso siempre se ejecutan lasinstrucciones del al menos la primera vez.

Estructuras

Funciones

DOM

Eventos

Formularios

cíclicas

var resultado = 1;var numero = 5;do {

resultado *= numero;numero--;

} while(numero > 0);alert(resultado);

do {

...

} while(condicion);

JavaScript

Estructura for

La idea del funcionamiento de un bucle for es la¿Que es JavaScript?

siguiente: "mientras la condición indicada se sigaSintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

cumpliendo, repite la ejecución de las instruccionesdefinidasrepetición,

dentro del for. Además, despuésvariables

de cadaactualiza el valor de las que se

utilizan en la condición".

for (inicializacion; condicion; incremento){

...

}

JavaScript

Sentencias

Las sentencias

break y continue

break y continue permiten

manipular el¿Que es JavaScript?

comportamiento normal de los bucles for para detener elbucle o para saltarse algunas repeticiones.Sintaxis

Variables

Operadores


Concretamente, la sentenciaforma abrupta un bucle y la

break permite terminar desentencia continue permite

saltarse algunas repeticiones del bucle.Estructuras

Funciones

DOM

Eventos

Formularios

cíclicas

var

var var

cadena = "En un lugar de laletras = cadena.split("");resultado = "";

Mancha...";

for(i in letras) {if(letras[i] == 'a') {

break;}else {

resultado += letras[i];

}}alert(resultado); // muestra "En

un lug"

JavaScript

Funciones

Las funciones en JavaScript se definen mediante la palabra reservada function, seguida del nombre de la función.

function nombre_funcion(){//Bloque del código de la función/*Utilizamos la sentencia return másla variable que deseamos devolver */

}


Sintaxis

Variables

Operadores


Estructuras

Funciones

DOM

Eventos

Formularios

cíclicas

Las variables que necesitan lasse

funciones se llamanargumentos. Los argumentos indican dentro de losparéntesis que van detrás delseparan con una coma (,).

nombre de la función y se

function nombre_funcion(argumento1,{//Bloque del código de la función

}

argumento2,...)

JavaScript

Funciones

La llamada a la función se realiza simplemente indicando su¿Que es JavaScript?

nombre, incluyendo los paréntesis del final y el carácterpara terminar la instrucción:

;Sintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

function suma_y_muestra() {resultado = numero1alert("El resultado

+ numero2;es " + resultado);

}

var

var var

resultado;numero1numero2

= 3;= 5;

//Llamada a la funcionsuma_y_muestra();

JavaScript

Funciones

¿Que es JavaScript? Para que la función devuelva un valor, solamente esSintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

necesario escribir la palabra reservada return junto con elnombre de la variable que se quiere devolver.

Como la función devuelve un valor, en el punto en el que serealiza la llamada, debe indicarse el nombre de unavariable en el que se guarda el valor devuelto:

function calculaPrecioTotal(precio, porcentajeImp) {var

var var

gastosEnvio = 10;precioConImp = (1 + porcentajeImp/100) * precio;precioTotal = precioConImp + gastosEnvio;return precioTotal.toFixed(2);

}var precioTotal = calculaPrecioTotal(23.34, 16);

JavaScript

Document Object Model (DOM)


La creación del Document Object Model o DOM es una delas innovaciones que más ha influido en el desarrollo delas páginas web dinámicas y de las aplicaciones web máscomplejas.

Sintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

DOM permite a los programadores web acceder ymanipular las páginas XHTML como si fueran documentosXML. De hecho, DOM se diseñó originalmente paramanipular de forma sencilla los documentos XML.

JavaScript


DOM transforma todos los documentos XHTML en unestán

de las


conjunto de elementos llamados nodos, queSintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

interconectados y que representan los contenidospáginas web y las relaciones entre ellos. Por su aspecto, launión de todos los nodos se llama "árbol de nodos"..

JavaScript


La raíz del árbol de nodos deHTML siempre es la misma:denominado "Documento".

cualquier página XHTML oun nodo de tipo especial


Sintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

A partir de ese nodo raíz, cada etiqueta HTML setransforma en un nodo de tipo "Elemento". La conversiónde etiquetas en nodos se realiza de forma jerárquica.

<p>Esta página es <strong> muy sencilla</strong></p>

JavaScript

Tipos de nodos

Document, nodo raíz del que derivan todos los demásnodos del árbol.Element, representa cada una de las etiquetas XHTML.Se trata del único nodo que puede contener atributos yel único del que pueden derivar otros nodos.Attr, se define un nodo de este tipo para representarcada uno de los atributos de las etiquetas XHTML, esdecir, uno por cada par atributo=valor.Text, nodo que contiene el texto encerrado por unaetiqueta XHTML.Comment, representa los comentarios incluidos en lapágina XHTML.Los otros tipos de nodos existentes que no se van a


Sintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

considerar son DocumentType, CDataSection,DocumentFragment, Entity, EntityReference, ProcessingInstruction

y Notation.

JavaScript

Acceso directo a los nodos


DOM proporciona dos métodos alternativos para accedera un nodo específico: acceso a través de sus nodos padre yacceso directo.

Sintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

Es importante recordar que el acceso a los nodos, sumodificación y su eliminación solamente es posiblecuando el árbol DOM ha sido construido completamente,es decir, despuéscompleto.

de que la página HTML se cargue por

JavaScript

Modelo básico de eventos


Sintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formulariosy <body>

y <body>

y <body>

Evento DescripciónElementos para los que está definido

onblur Deseleccionar el elemento<button>, <input>, <label>,<select>,<textarea>, <body>

onchangeDeseleccionar un elemento que se ha modificado <input>, <select>, <textarea>

onclick Pinchar y soltar el ratón Todos los elementos

ondblclickPinchar 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

onkeypress Pulsar una teclaElementos de formulario

onkeyup Soltar una tecla pulsadaElementos de formulario

onloadLa 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

JavaScript

Modelo básico de eventos


Sintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

Evento DescripciónElementos para los que está definido

onmouseoutEl 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 delelemento)

Todos los elementos

onmouseupSoltar el botón que estaba pulsado en el ratón Todos los elementos

onresetInicializar el formulario (borrartodos 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>

onunloadSe abandona la página (porejemplo al cerrar el navegador) <body>

JavaScript

Información sobre el evento


function resalta(elEvento)var evento = elEvento ||switch(evento.type) { case 'mouseover': this.style.borderColor break;

{window.event;

Sintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

Evento

= 'black';

case 'mouseout': this.style.borderColor =break;

Evento

'silver';

}}

window.onload = function() {document.getElementById("seccion").onmouseover = resalta;document.getElementById("seccion").onmouseout = resalta;

}<div id="seccion" style="width:150px; height:60px;border:thin solid silver"> Sección de contenidos... </div>

JavaScript

Propiedades básicas de formularios y elementos

¿Que es JavaScript? Cuando se carga una página web, el navegador creaautomáticamente un array llamado forms y que contienela referencia a todos los formularios de la página.Para acceder al array forms, se utiliza el objeto document,por lo que document.forms es el array que contiene todoslos formularios de la página.

document.forms[0];

Sintaxis

Variables

Operadores


Estructuras

Funciones

DOM

Eventos

Formularios

cíclicas

Además del array de formularios, el navegador creaautomáticamente un array llamado elements por cadauno de los formularios de la página. Cada array elementscontiene la referencia a todos los elementos (cuadros detexto, botones, listas desplegables, etc.)

document.forms[0].elements[0];

JavaScript



Por último, los eventos más utilizados en el manejo de losformularios son los siguientes:

Sintaxis

Variables

Operadores



Funciones

DOM

Eventos

Formularios

• onclick: evento que se produce cuando se hace clickcon el ratón sobre un elemento. Normalmente se utilizacon cualquiera de los tipos de botones que permitedefinir HTML (<input type="button">, <inputtype="submit">, <input type="image">).

• onblur: evento complementario de onfocus, ya que seproduce cuando el usuario ha deseleccionado unelemento por haber seleccionado otro elemento delformulario. Técnicamente, se dice que el elementoanterior "ha perdido el foco".

JavaScript



Sintaxis

Variables

Operadores


• onchange: evento que se produce cuando el usuariocambia el valor de un elemento de textotype="text"> o <textarea>). También secuando el usuario selecciona una opción en

(<input

produce una listaEstructuras

Funciones

DOM

Eventos

Formularios

cíclicasdesplegable (<select>). Sin embargo, el evento sólo seproduce si después de realizar el cambio, el usuariopasa al siguiente campo del formulario, lo quetécnicamente se conoce como que "el otro campo deformulario ha perdido el foco".

• onfocus: evento que se produce cuando el usuarioselecciona un elemento del formulario.

introducción javascript javascript introducción a javascript

Documents