Introducción Javascript JavaScript Introducción a Javascript.
-
Upload
miguel-peralta-hernandez -
Category
Documents
-
view
469 -
download
13
Transcript of Introducción Javascript JavaScript Introducción a Javascript.
Introducción
Javascript
JavaScript
Introducción a Javascript
JavaScript
¿Que es 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?
¿Que es JavaScript?
Incluir JavaScript en el mismo documento HTMLSintaxis
Variables
Operadores
Estructuras de flujo
Estructuras cíclicas
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
¿Cómo incluir JavaScript en un documento HTML?
Definir JavaScript en un archivo externoSintaxis
Variables
Operadores
Estructuras de flujo
Estructuras cíclicas
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>
¿Que es JavaScript?
JavaScript
¿Cómo incluir JavaScript en un documento HTML?
Incluir JavaScript en los elementos HTMLSintaxis
Variables
Operadores
Estructuras de flujo
Estructuras cíclicas
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>
¿Que es JavaScript?
JavaScript
Sintaxis
¿Que es JavaScript?
La sintaxis de JavaScript es muy similar a la de otroslenguajes de programación como Java y C. Las normas
Sintaxis
Variables
Operadores
Estructuras de flujo
Estructuras cíclicas
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
¿Que es JavaScript?
No se define el tipo de las variablesSintaxis
Variables
Operadores
Estructuras de flujo
Estructuras cíclicas
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
¿Que es JavaScript?
Sintaxis
Variables
Operadores
Estructuras de flujo
Estructuras cíclicas
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.
¿Que es JavaScript?
Sintaxis
Variables
Operadores
Estructuras de flujo
Estructuras cíclicas
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
¿Que es JavaScript?
Sintaxis
Variables
Operadores
Estructuras de flujo
Estructuras cíclicas
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
¿Que es JavaScript?
Sintaxis
Variables
Operadores
Estructuras de flujo
Estructuras cíclicas
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.
¿Que es JavaScript?
Sintaxis
Variables
Operadores
Estructuras de flujo
Estructuras cíclicas
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.
¿Que es JavaScript?
variables, que puedencada una de un tipo
Sintaxis
Variables
Operadores
Estructuras de flujo
Estructuras cíclicas
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
¿Que es JavaScript?
variables, realizar operaciones matemáticas conSintaxis
Variables
Operadores
Estructuras de flujo
Estructuras cíclicas
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
Estructuras de flujo
Estructuras cíclicas
Funciones
DOM
Eventos
Formularios
de todos estos operadores siempre es un valor booleano
Operador Descripción
< 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
Estructuras de flujo
Estructuras cíclicas
Funciones
DOM
Eventos
Formularios
de cualquier operación que utilice operadores lógicossiempre es un valor lógico o booleano.
Operador Descripción
&& 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
Estructuras de flujo
Estructuras cíclicas
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
Estructuras de flujo
Estructuras cíclicas
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
Estructuras de flujo
Estructuras cíclicas
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
¿Que es JavaScript?
El bucle de tipo do...while es muy similar al bucle while,Sintaxis
Variables
Operadores
Estructuras de flujo
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
Estructuras de flujo
Estructuras cíclicas
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
Estructuras de flujo
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 */
}
¿Que es JavaScript?
Sintaxis
Variables
Operadores
Estructuras de flujo
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
Estructuras de flujo
Estructuras cíclicas
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
Estructuras de flujo
Estructuras cíclicas
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)
¿Que es JavaScript?
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
Estructuras de flujo
Estructuras cíclicas
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
Document Object Model (DOM)
DOM transforma todos los documentos XHTML en unestán
de las
¿Que es JavaScript?
conjunto de elementos llamados nodos, queSintaxis
Variables
Operadores
Estructuras de flujo
Estructuras cíclicas
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
Document Object Model (DOM)
La raíz del árbol de nodos deHTML siempre es la misma:denominado "Documento".
cualquier página XHTML oun nodo de tipo especial
¿Que es JavaScript?
Sintaxis
Variables
Operadores
Estructuras de flujo
Estructuras cíclicas
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
¿Que es JavaScript?
Sintaxis
Variables
Operadores
Estructuras de flujo
Estructuras cíclicas
Funciones
DOM
Eventos
Formularios
considerar son DocumentType, CDataSection,DocumentFragment, Entity, EntityReference, ProcessingInstruction
y Notation.
JavaScript
Acceso directo a los nodos
¿Que es JavaScript?
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
Estructuras de flujo
Estructuras cíclicas
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
¿Que es JavaScript?
Sintaxis
Variables
Operadores
Estructuras de flujo
Estructuras cíclicas
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
¿Que es JavaScript?
Sintaxis
Variables
Operadores
Estructuras de flujo
Estructuras cíclicas
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
¿Que es JavaScript?
function resalta(elEvento)var evento = elEvento ||switch(evento.type) { case 'mouseover': this.style.borderColor break;
{window.event;
Sintaxis
Variables
Operadores
Estructuras de flujo
Estructuras cíclicas
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 de flujo
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
Propiedades básicas de formularios y elementos
¿Que es JavaScript?
Por último, los eventos más utilizados en el manejo de losformularios son los siguientes:
Sintaxis
Variables
Operadores
Estructuras de flujo
Estructuras cíclicas
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
Propiedades básicas de formularios y elementos
¿Que es JavaScript?
Sintaxis
Variables
Operadores
Estructuras de flujo
• 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.