LENGUAJES WEB DEL CLIENTE
Aplicaciones Web
LENGUAJES DESDE EL CLIENTE
•Lenguaje de Marcas HTML.
•Hojas de Estilos CSS.
•Lenguaje de Marcas XHTML.
•JavaScript.
rmonag...
Página WebPágina Web
Estructura
Contenido
Apariencia
Comportamiento
HTML
CSS
Javascript
• Colores
• Tipografías
• Alineaci...
LENGUAJE JAVASCRIPT
JavaScript no es un lenguaje de programación
propiamente dicho como C, C++, Delphi, etc. Es un
lenguaj...
DONDE UBICAR EL CÓDIGO
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
5
• Incluir JavaScript en el mismo documento XH...
<SCRIPT>
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
6
Para insertar funciones JavaScript en un documento, es nece...
<SCRIPT>
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
7
<SCRIPT LANGUAGE="JavaScript” TYPE="text/javascript">
<!--
...
INCLUIR JAVASCRIPT EN EL XHTML
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
8
…
<head>
<script language="javascript...
INCLUIR JAVASCRIPT EN LOS ELEMENTOS HTML
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
9
…
<head>
</head>
<body>
<im...
DEFINIR LOS SCRIPT EN FICHERO JS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
10
function Muestramensaje()
{
alert(...
JQUERY.JS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
11
La librería jquery.js descargamos del sitio oficial y agr...
EJECUTAR SCRIPT
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
12
Existen dos maneras básicas de ejecutar scripts Jav...
VARIABLES
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
13
var numero_1 = 3;
var numero_2 = 1;
var resultado = numer...
ESTRUCTURAS DE CONTROL DE FLUJO
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
14
son instrucciones del tipo "si se c...
BUCLES
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
15
var mensaje = "Hola, estoy dentro de un
bucle";
for(var i = ...
FUNCIONES DE LIBRERIA
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
16
var mensaje1 = "Hola";
var mensaje2 = mensaje...
DEFINIR FUNCIONES
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
17
function suma_y_muestra() {
resultado = numero1 +...
DEFINIR FUNCIONES
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
18
function sumar(sum1, sum2)
{
var resultado;
resul...
EVENTOS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
19
Evento Descripción Para los elementos
onblur Deseleccionar ...
MÁS EVENTOS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
20
Evento Descripción Para los elementos
onmousemove Mover...
EJEMPLO DE EVENTOS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
21
<div onclick="alert('Has pinchado con el ratón')...
DOM
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
22
Una página HTML normal no es más que una sucesión de caracteres...
DOM
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
23
PRINCIPALES TIPOS DE NODOS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
24
• Document, nodo raíz del que derivan to...
EJEMPLO DOM
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
25
Es posible asignarle una identificación a un objeto, y ...
THIS
rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web
26
<div id="contenidos" style="width:150px; height:60px;
border:t...
Próxima SlideShare
Cargando en…5
×

Lenguaje javascript

3.366 visualizaciones

Publicado el

iniciacion a javascript

Publicado en: Educación, Tecnología, Diseño
1 comentario
5 recomendaciones
Estadísticas
Notas
  • Hola, te he comentado en otra tambien, me la podrías pasar? majerisa@gmail.com Gracias
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
Sin descargas
Visualizaciones
Visualizaciones totales
3.366
En SlideShare
0
De insertados
0
Número de insertados
307
Acciones
Compartido
0
Descargas
0
Comentarios
1
Recomendaciones
5
Insertados 0
No insertados

No hay notas en la diapositiva.

Lenguaje javascript

  1. 1. LENGUAJES WEB DEL CLIENTE Aplicaciones Web
  2. 2. 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
  3. 3. 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 IES Augustóbriga – 2º SMR – Aplicaciones Web
  4. 4. 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 IES Augustóbriga – 2º SMR – Aplicaciones Web
  5. 5. 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
  6. 6. <SCRIPT> rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 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 <!-- y //-->.
  7. 7. <SCRIPT> rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 7 <SCRIPT LANGUAGE="JavaScript” TYPE="text/javascript"> <!-- Programa JavaScript //--> </SCRIPT> <script type="text/javascript"> <! [CDATA[ Programa JavaScript ]]> </ Script> </script> En HTML En XHTML
  8. 8. INCLUIR JAVASCRIPT EN EL XHTML rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 8 … <head> <script language="javascript" type="text/javascript"> > <!-- function Muestramensaje() { alert("Esto es un mensaje javascript"); } //--> </script> </head> … <img src="logo.gif" onClick="Muestramensaje">
  9. 9. INCLUIR JAVASCRIPT EN LOS ELEMENTOS HTML rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 9 … <head> </head> <body> <img src="imagenes/logo.gif" onClick=“alert("Esto es un mensaje);"> </body>
  10. 10. DEFINIR LOS SCRIPT EN FICHERO JS rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 10 function Muestramensaje() { 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
  11. 11. JQUERY.JS rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 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
  12. 12. EJECUTAR SCRIPT rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 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"> function Muestramensaje() { 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>…
  13. 13. VARIABLES rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 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.
  14. 14. ESTRUCTURAS DE CONTROL DE FLUJO rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 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"); }
  15. 15. BUCLES rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 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
  16. 16. FUNCIONES DE LIBRERIA rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 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
  17. 17. DEFINIR FUNCIONES rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 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.
  18. 18. DEFINIR FUNCIONES rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 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.
  19. 19. EVENTOS rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 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
  20. 20. MÁS EVENTOS rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 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>
  21. 21. EJEMPLO DE EVENTOS rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 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()" />
  22. 22. DOM rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 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>
  23. 23. DOM rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 23
  24. 24. PRINCIPALES TIPOS DE NODOS rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 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.
  25. 25. EJEMPLO DOM rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 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")
  26. 26. THIS rmonagoIES Augustóbriga – 2º SMR – Aplicaciones Web 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.

×