Lenguaje javascript

LENGUAJES WEB DEL CLIENTE
Aplicaciones Web

LENGUAJES DESDE EL CLIENTE
•Lenguaje de Marcas HTML.
•Hojas de Estilos CSS.
•Lenguaje de Marcas XHTML.
•JavaScript.
rmonago
2
IES Augustóbriga – 2º SMR – Aplicaciones Web

Página WebPágina Web
Estructura
Contenido
Apariencia
Comportamiento
HTML
CSS
Javascript
• Colores
• Tipografías
• Alineación
• Efectos
• Validaciones
• Automatización
• Párrafos
• Encabezados
• Listas
•Tablas
• Capas
• Etc.
• Textos
• Imágenes
• Enlaces
• Fondos
• Tamaños
• Etc.
rmonago
3

LENGUAJE JAVASCRIPT
JavaScript no es un lenguaje de programación
propiamente dicho como C, C++, Delphi, etc. Es un
lenguaje script u orientado a documento, como
pueden ser los lenguajes de macros que tienen muchos
procesadores de texto. No se puede desarrollar un
programa con JavaScript que se ejecute fuera de un
Navegador.
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.
rmonago
4

DONDE UBICAR EL CÓDIGO
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
5
• Incluir JavaScript en el mismo documento XHTML
• Incluir JavaScript en los elementos XHTML
• Definir JavaScript en un archivo externo

<SCRIPT>
6
Para insertar funciones JavaScript en un documento, es necesario
insertar las etiquetas <script> y </script> dentro de la cabecera (entre
las etiquetas <head> y </head>) o dentro del cuerpo de la página.
A través del atributo language hay que especificar el lenguaje de script,
que en este caso será JavaScript.
Entre las etiquetas <script> y </script> habrá que insertar las funciones
JavaScript.
Si un navegador no reconoce la etiqueta <script>, mostrará el código de
las funciones que ésta contenga. Para que esto no ocurra, las funciones
se insertan como comentarios, entre .

<SCRIPT>
7
<SCRIPT LANGUAGE="JavaScript” TYPE="text/javascript">

</SCRIPT>
<script type="text/javascript">
<! [CDATA[
Programa JavaScript
]]>
</ Script> </script>
En HTML
En XHTML

INCLUIR JAVASCRIPT EN EL XHTML
8
…
<head>
<script language="javascript" type="text/javascript"> >

</script>
</head>
…
<img src="logo.gif" onClick="Muestramensaje">

INCLUIR JAVASCRIPT EN LOS ELEMENTOS HTML
9
…
<head>
</head>
<body>
<img src="imagenes/logo.gif" onClick=“alert("Esto es un
mensaje);">
</body>

DEFINIR LOS SCRIPT EN FICHERO JS
10
{
alert("Esto es un mensaje, activado por una
función javascript");
}
<script language="javascript" type="text/javascript"
src="fichero.js"></script>
</head>
<body>
<img src="imagenes/logo_animales.gif"
onClick="Muestramensaje">
</body>
Fichero .js
Fichero HTML

JQUERY.JS
11
La librería jquery.js descargamos del sitio oficial y agregamos:
<script type="text/javascript" src="jquery.js"></script>
Esta librería jQuery en resumen nos aporta las siguientes ventajas:
•Ahorra muchas líneas de código.
• Hace transparente el soporte de nuestra aplicación para los navegadores
principales.
• Provee de un mecanismo para la captura de eventos.
• Provee un conjunto de funciones para animar el contenido de la página en
forma muy sencilla.
Ejemplo
http://www.desarrolloweb.com/articulos/ejemplos/jquery/efectos-jquery.html

EJECUTAR SCRIPT
12
Existen dos maneras básicas de ejecutar scripts Javascript en una
página: al cargar la página o como respuesta a acciones del
usuario (eventos).
<script language="javascript" type="text/javascript">
{ alert("Esto es un mensaje"); }
</script>
</head>
<body>
<img src=“logo.gif" onClick="Muestramensaje“>
…
<script language="javascript" type="text/javascript“>
alert("Esto es un mensaje");
</script>
</head><body>…

VARIABLES
13
var numero_1 = 3;
var numero_2 = 1;
var resultado = numero_1 + numero_2;
var mensaje = “variable de texto“;
var clienteRegistrado = false;
El nombre de una variable también se conoce como identificador y debe
cumplir las siguientes normas:
• Sólo puede estar formado por letras, números y los símbolos $ (dólar)
y _ (guión bajo).
• El primer carácter no puede ser un número.

ESTRUCTURAS DE CONTROL DE FLUJO
14
son instrucciones del tipo "si se cumple esta condición, hazlo; si no se
cumple, haz esto otro". También existen instrucciones del tipo "repite esto
mientras se cumpla esta condición".
SÍ
If (edad >= 18) {
alert("Eres mayor de edad");
}
else {
alert("Todavía eres menor de
edad");
}
var edad = 18;
If (edad >= 18) {
alert("Eres mayor de edad");
}

BUCLES
15
var mensaje = "Hola, estoy dentro de un
bucle";
for(var i = 0; i < 5; i++) {
alert(mensaje);
}
var resultado = 0;
var numero = 100;
var i = 0;
while(i <= numero) {
resultado += i;
i++;
}
alert(resultado);
Para
Mientras

FUNCIONES DE LIBRERIA
16
var mensaje1 = "Hola";
var mensaje2 = mensaje1.toUpperCase(); // mensaje2
= "HOLA"
var numero1 = 4564.34567;
numero1.toFixed(2); // 4564.35
Funciones de texto
Funciones matemáticas
Funciones de fecha
Funciones de numeros
Funciones lógicas

DEFINIR FUNCIONES
17
function suma_y_muestra() {
resultado = numero1 + numero2;
alert("El resultado es " +
resultado);
}
var resultado;
var numero1 = 3;
var numero2 = 5;
suma_y_muestra();
Una función es un conjunto de instrucciones que se agrupan para
realizar una tarea concreta y que se pueden reutilizar fácilmente.

DEFINIR FUNCIONES
18
function sumar(sum1, sum2)
{
var resultado;
resultado = sum1 + sum2;
return resultado;
}
<script type="text/javascript” language="javascript">
alert(sumar(4, 10)
<script>
Una función es un conjunto de instrucciones que se agrupan para
realizar una tarea concreta y que se pueden reutilizar fácilmente.

EVENTOS
19
Evento Descripción Para los elementos
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 Todos los elementos
ondblclick Pinchar dos veces seguidas Todos los elementos
onfocus Seleccionar un elemento
<button>, <input>, <label>,
<select>, <textarea>, <body>
onkeydown Pulsar una tecla (sin soltar) Elementos formulario y <body>
onkeypress Pulsar una tecla Elementos formulario y <body>
onkeyup Soltar una tecla pulsada Elementos 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

MÁS EVENTOS
20
Evento Descripción Para 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>

EJEMPLO DE EVENTOS
21
<div onclick="alert('Has pinchado con el ratón');"
onmouseover="alert('Acabas de pasar el ratón por
encima');">
Puedes pinchar o pasar el ratón por encima
</div>
function muestraMensaje() {
alert('Gracias por pinchar');
}
<input type="button" value="Pinchame"
onclick="muestraMensaje()" />

DOM
22
Una página HTML normal no es más que una sucesión de caracteres, por lo que
es un formato muy difícil de manipular. Por ello, los navegadores web
transforman automáticamente todas las páginas web en una estructura más
eficiente de manipular y nos permite utilizar las herramientas de DOM de forma
muy sencilla.
DOM transforma todos los documentos XHTML en un conjunto de
elementos llamados nodos, que están interconectados y que representan los
contenidos de las páginas web y las relaciones entre ellos.
<p>Esta página es <strong> muy sencilla</strong></p>

DOM
23

PRINCIPALES TIPOS DE NODOS
24
• Document, nodo raíz del que derivan todos los demás nodos del árbol.
•Element, representa cada una de las etiquetas XHTML. Se trata del
único nodo que puede contener atributos y el único del que pueden
derivar otros nodos.
• Attr, se define un nodo de este tipo para representar cada uno de los
atributos de las etiquetas XHTML, es decir, uno por cada par
atributo=valor.
• Text, nodo que contiene el texto encerrado por una etiqueta XHTML.
• Comment, representa los comentarios incluidos en la página XHTML.

EJEMPLO DOM
25
Es posible asignarle una identificación a un objeto, y luego usarla para hacer
referencia a éste, por ejemplo:
<div id="Juan">....</div>
Para hacer referencia a elementos del mismo tipo, los cuales, como se ha dicho,
están organizados en un vector, se pueden utilizar puntos de la siguiente manera.
document.div[0]
document.div["Juan"]
document.div.Juan
También se puede usar la función "getElementById".
document.getElementById("Juan")

THIS
26
<div id="contenidos" style="width:150px; height:60px;
border:thin solid silver"
onmouseover="this.style.borderColor='black';"
onmouseout="this.style.borderColor='silver';">
Sección de contenidos...
</div>
JavaScript define una variable especial llamada this que se crea
automáticamente y que se emplea en algunas técnicas avanzadas de
programación. En los eventos, se puede utilizar la variable this para
referirse al elemento XHTML que ha provocado el evento.

Lenguaje javascript

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (15)

Similaire à Lenguaje javascript

Similaire à Lenguaje javascript (20)

Plus de rmonago

Plus de rmonago (19)

Dernier

Dernier (20)

Lenguaje javascript