SlideShare una empresa de Scribd logo
1 de 16
Instituto Tecnológico Superior De
              Tepeaca

Ingeniería en Sistemas Computacionales




 Antonio M. Hernández
Programación Web
 Lenguaje Script:

 Sintaxis
 Elementos
 Aplicaciones

 Eventos Script

 Efectos con Lenguaje Script
Lenguajes de script
Sintaxis:

Un lenguaje de script es un pequeño lenguaje de programación cuyo código se inserta dentro del

documento HTML. Este código se ejecuta en el navegador del usuario al cargar la página, o

cuando sucede algo especial como puede ser el pulsar sobre un enlace.

Estos lenguajes permiten variar dinámicamente el contenido del documento, modificar el

comportamiento normal del navegador, validar formularios, realizar pequeños trucos visuales,

etc... Sin embargo, conviene recordar que se ejecutan en el navegador del usuario y no en la

máquina donde estén alojadas, por lo que no podrán realizar cosas como manejar bases de

datos. Esto hace que los contadores (por ejemplo) se deban realizar de otra manera, utilizando

programas CGI.

El primer lenguaje de script que vió la luz fue el JavaScript de Netscape. Nacido con la versión

2.0 de este navegador y basado en la sintaxis de Java, su utilidad y el casi absoluto monopolio

que entonces ejercía Netscape en el mercado de navegadores permitieron que se popularizara y

extendiera su uso.
Elementos:
Datos
Anteriormente has hecho una primera aproximación a los elementos básicos
con que vas a enfrentarte al programar. Es el momento de ahondar algo más
en estos elementos y comenzaremos por los más elementales:


Los datos. JavaScript maneja cuatro tipos de datos: números, cadenas,
lógicos y punteros.
Los datos numéricos sirven para manejar cualquier número real, como 12,
56.5, -9. Pero también son datos numéricos: 2.0E2, 0xF0, 012. El primero
corresponde a la llamada notación científica: 2.0*102, mientras que el
segundo ejemplo corresponde a la notación hexadecimal y el tercero a la
octal. Lo normal es que sólo uses valores decimales y a veces hexadecimales
(como        los      códigos       RGB       par       definir    colores).
Los datos de cadena son los usados para representar palabras, así los
siguientes son datos de cadena: "prueba", "La clave es 4r5t". Observa que
estos datos están encerados entre comillas, es la forma de decirle a
JavaScript que está ante una cadena de caracteres y no ante un nombre o
descriptor de algún elemento del programa.
 Este tipo de datos no es ni numérico ni de cadena, es un dato
 lógico o técnicamente booleano. En los lenguajes de
 programación en lugar de sí o no se emplean los valores true o
 false. Estos datos son los que utilizaras cuando en los programas
 se tengan que tomar decisiones, o sea, comprobar algo y actuar
 en consecuencia: si el explorador es Netscape 4.0, no usar efectos
 de presentación, por ejemplo.
 Existe un último tipo de datos que también se emplea a menudo
 en los scripts para la captura de eventos, son direcciones de
 memoria, o punteros, usadas para asignar funciones. Si en una
 variable se guarda el nombre de una función esa variable se
 convierte en otro nombre para esa función. ¿Raro? Esto tiene su
 verdadera utilidad al asignar funciones a los eventos disparados
 por el ratón.
Arrays
Apesar de su extraño nombre los arrays no son más que estructuras para
almacenar listas de valores. A diferencia de otros lenguajes, en Javascript los
arrays no son un tipo de variable sino que fueron implementados por
Netscape como un objeto, lo cual les da una potencia enorme.
Pero empecemos por abajo. Un array puede verse como una lista con nombre
donde podemos anotar cosas, cada anotación se identifica por su número de
orden en el array (la lista), su índice, y el número total de espacios para
anotar cosas en el array es su longitud. Si en un array tenemos anotados 5
números, el primero de todos será el de índice 0 y el último tendrá como
índice el 4, siendo 5 la longitud del array. Simple ¿verdad?, veamos como se
crea un array y como se asignan valores en unos ejemplos muy sencillos:


....
semana = new Array(7);
miLista = new Array(1,5,9);
nombres= new Array('Juan', 'Luis', 'María');
vacio = new Array();
interesante = new Array(4);
Funciones
Las funciones como decíamos en la introducción, no son más que
bloques de instrucciones de programa con nombre y que pueden
ejecutarse sin más que llamarlas desde alguna parte de otra función o
desde la página HTML, bien sea directamente o mediante eventos.
Habitualmente una función se crea para ejecutar una acción muy
concreta. Javascript posee una serie de funciones predefinidas o
funciones globales pero el programador puede crear las suyas propias.
Para crear una función tan sólo es necesario indicárselo al intérprete
mediante la plabra clave function seguida del nombre que deseemos
darle a la función y, encerrados entre paréntesis, las variables que
simbolizan los valores con los que deba trabajar la función, los
argumentos.
Variables
 Ya dijimos que los datos, los valores, no siempre pueden
 utilizarse de manera directa, sino que habitualmente se
 almacenan en una posición de memoria con nombre, esto
 es lo que llamamos una variable. En otros lenguajes de
 programación existen diferentes tipos de variables en
 función del tipo de datos que pueden guardar: variables
 para cadenas, para números enteros, para números reales,
 etc.. JavaScript es muy permisivo en este aspecto de
 manera que una variable puede guardar cualquier tipo de
 dato y además pueden crearse en cualquier parte del
 programa.
Objetos
Javascript no posee todas las características de los lenguajes

orientados a objetos como Java o C++, pero si es capaz de

manejar objetos e incluso crearlos. De hecho si un programa en

este lenguaje es capaz de interactuar con el explorador es

gracias a esta capacidad. Javascript posee algunos objetos

predefinidos u objetos intrínsecos como son: Array, Boolean,

Date, Function, Global, Math, Number, Object, RegExp, y String.

Además el programador puede crear objetos nuevos, con sus

propios métodos y propiedades, adaptados a las necesidades

concretas de su aplicación.
Aplicaciones
La mayoría de aplicaciones mas utilizadas son completamente gratuitas,
esto facilita al usuario común a poner en marcha su web, tienda virtual o
comunidad de forma muy sencilla sin necesidad de saber programar.
Esto que sin duda es una gran ventaja también supone un gran
                              inconveniente:

Al ser aplicaciones con el código abierto, todo el mundo puede acceder
a su código, incluido aquellos que buscan agujeros de seguridad para
hacer un mal uso de este. También hay que destacar que algunas de
estas aplicaciones carecen de un código bien depurado y optimizado, ya
que muchos basan la creación de estos en torno a una comunidad y no a
un equipo de programadores bien organizados, es por ello que
continuamente      se    descubren     nuevos      bugs   y    errores.

La utilización de este tipo de aplicaciones presupone que cuando se
produzcan errores, se busque soporte técnico en la comunidad o equipo
de desarrollo de la aplicación. En Evidalia Hosting trabajamos para
mantener un correcto funcionamiento de los distintos servicios, pero no
podemos dar soporte para este tipo de aplicaciones.
Eventos
Antes de nada, una premisa: a la hora de decidir en qué orden
tratar los distintos temas, estaba bastante indeciso sobre el
lugar en que colocar esta lección y las relacionadas con ella, ya
que en algunos textos los eventos son tratados antes de las
funciones y en otros después.



La elección no era indiferente porque el tema constituye una
parte importante de la teoría Javascript y, si se coloca en una
posición equivocada, puede llegar a romper el carácter
secuencial de la exposición.
Los eventos se usan para invocar instrucciones. Así, el
script se ejecuta secuencialmente, pero, para conseguir
introducir el carácter dinámico e interactivo, debe cargarse
en memoria y activarse o invocarse sólo cuando se verifican
situaciones particulares como el ratón que pasa, un
documento que se carga, etc. El problema de la conciliación
con las funciones reside en el hecho de que a un evento
puede ir asociada una sola instrucción, pero la mayor parte
de las veces, la asociación está establecida con un bloque de
instrucciones y, por tanto, con las funciones que toman el
nombre de handler o gestores de eventos.
Es importante entender este concepto porque Javascript,
en sus comienzos, tenía pocos eventos, los cuales se
activaban sólo si insertados en particulares marcas y
sucede a menudo que se utilizan los handler de manera
arbitraria y que se considere como error la no activación
de un evento cuando insertado en marcas incompatibles.
Internet Explorer en las versiones más recientes ha
ampliado las posibilidades de uso de los eventos, por lo
que pueden insertarse en muchísimas marcas, mientras
que Netscape ha permanecido fiel a las impostaciones
originarias.
Efectos
Con Javascript podemos crear efectos especiales en las páginas y
definir interactividades con el usuario. El navegador del cliente es el
encargado de interpretar las instrucciones Javascript y ejecutarlas para
realizar estos efectos e interactividades, de modo que el mayor recurso,
y tal vez el único, con que cuenta este lenguaje es el propio navegador.


Javascript es el siguiente paso, después del HTML, que puede dar un
programador de la web que decida mejorar sus páginas y la potencia de
sus proyectos. Es un lenguaje de programación bastante sencillo y
pensado para hacer las cosas con rapidez, a veces con ligereza. Incluso
las personas que no tengan una experiencia previa en la programación
podrán aprender este lenguaje con facilidad y utilizarlo en toda su
potencia con sólo un poco de práctica.
El script permite utilizar varios efectos, mas de 20.

Incluye:

 Scroll desde diferentes ángulos y slide.

 Efecto de zoom

 Slide.

 Shuffle.

 Efecto de desvanecimiento o Fade.

 Entre otros.
Bibliografia
 http://www.purosoftware.com/desarrollo-web-scripts-
  manipulacion-de-imagenes/08-cycle-plugin-para-jquery-
  slideshow.html
 www.articulosinformativos.com.mx/Javascript-a1106253.html
 http://www.htmlpoint.com/javascript/corso/js_10.htm
 http://javascript.espaciolatino.com/lengjs/jselementos/ele_dat
  os.htm

Más contenido relacionado

La actualidad más candente

Introduccic3b3n bc3a1sica-a-netbeans-para-desarrollo-java - copia
Introduccic3b3n bc3a1sica-a-netbeans-para-desarrollo-java - copiaIntroduccic3b3n bc3a1sica-a-netbeans-para-desarrollo-java - copia
Introduccic3b3n bc3a1sica-a-netbeans-para-desarrollo-java - copiaesekazz
 
Introduccion a java script y extjs, componentes extjs
Introduccion a java script y extjs, componentes extjsIntroduccion a java script y extjs, componentes extjs
Introduccion a java script y extjs, componentes extjsExtjs Mexico
 
T1 trabajo1navarrozuaraelisaramosruizpedro
T1 trabajo1navarrozuaraelisaramosruizpedroT1 trabajo1navarrozuaraelisaramosruizpedro
T1 trabajo1navarrozuaraelisaramosruizpedroPedro Ramos
 
RESUMEN DE JAVASCRIPT
RESUMEN DE JAVASCRIPTRESUMEN DE JAVASCRIPT
RESUMEN DE JAVASCRIPTAlejito Laaz
 
Caracteristicas de C Sharp
Caracteristicas de C SharpCaracteristicas de C Sharp
Caracteristicas de C SharpEdgardo Martinez
 
Tutorial de prolog
Tutorial de prologTutorial de prolog
Tutorial de prologPedro Vera
 
Lenguajes de programación orientados a objetos
Lenguajes de programación orientados a objetosLenguajes de programación orientados a objetos
Lenguajes de programación orientados a objetosDoris Aguagallo
 
Fundamentos de programación Java
Fundamentos de programación JavaFundamentos de programación Java
Fundamentos de programación Javaquesada_diego
 

La actualidad más candente (18)

Introduccic3b3n bc3a1sica-a-netbeans-para-desarrollo-java - copia
Introduccic3b3n bc3a1sica-a-netbeans-para-desarrollo-java - copiaIntroduccic3b3n bc3a1sica-a-netbeans-para-desarrollo-java - copia
Introduccic3b3n bc3a1sica-a-netbeans-para-desarrollo-java - copia
 
Manual de Java
Manual de JavaManual de Java
Manual de Java
 
Java script
Java scriptJava script
Java script
 
Introduccion a java script y extjs, componentes extjs
Introduccion a java script y extjs, componentes extjsIntroduccion a java script y extjs, componentes extjs
Introduccion a java script y extjs, componentes extjs
 
T1 trabajo1navarrozuaraelisaramosruizpedro
T1 trabajo1navarrozuaraelisaramosruizpedroT1 trabajo1navarrozuaraelisaramosruizpedro
T1 trabajo1navarrozuaraelisaramosruizpedro
 
Guia JavaScript INCES Militar - Kurt Gude
Guia JavaScript INCES Militar - Kurt GudeGuia JavaScript INCES Militar - Kurt Gude
Guia JavaScript INCES Militar - Kurt Gude
 
Javascript
JavascriptJavascript
Javascript
 
Funciones en php
Funciones en phpFunciones en php
Funciones en php
 
RESUMEN DE JAVASCRIPT
RESUMEN DE JAVASCRIPTRESUMEN DE JAVASCRIPT
RESUMEN DE JAVASCRIPT
 
62016561 java
62016561 java62016561 java
62016561 java
 
Caracteristicas de C Sharp
Caracteristicas de C SharpCaracteristicas de C Sharp
Caracteristicas de C Sharp
 
Manual lab prolog
Manual lab prologManual lab prolog
Manual lab prolog
 
Tutorial de prolog
Tutorial de prologTutorial de prolog
Tutorial de prolog
 
Visual basic
Visual basicVisual basic
Visual basic
 
Lenguajes de programación orientados a objetos
Lenguajes de programación orientados a objetosLenguajes de programación orientados a objetos
Lenguajes de programación orientados a objetos
 
Fundamentos de programación Java
Fundamentos de programación JavaFundamentos de programación Java
Fundamentos de programación Java
 
Todo sobre C#
Todo sobre C#Todo sobre C#
Todo sobre C#
 
Javascript
JavascriptJavascript
Javascript
 

Destacado

International Journal of Engineering Research and Development
International Journal of Engineering Research and DevelopmentInternational Journal of Engineering Research and Development
International Journal of Engineering Research and DevelopmentIJERD Editor
 
가상스토어
가상스토어가상스토어
가상스토어Minsik Kim
 
Brainstorm Kick-off BorstkankerVereniging Nederland
Brainstorm Kick-off BorstkankerVereniging NederlandBrainstorm Kick-off BorstkankerVereniging Nederland
Brainstorm Kick-off BorstkankerVereniging NederlandNiels Schuddeboom
 
5500 Reporting New Proofed
5500 Reporting New Proofed5500 Reporting New Proofed
5500 Reporting New ProofedLou_Mottola58
 
Game Planning
Game PlanningGame Planning
Game PlanningJongHyoun
 
Tangible&Rendering
Tangible&RenderingTangible&Rendering
Tangible&RenderingJongHyoun
 
Blog 47 Tam Tam
Blog 47 Tam TamBlog 47 Tam Tam
Blog 47 Tam Tamcolors
 
4 ros-i 13093014kinect v2 ph
4   ros-i 13093014kinect v2 ph4   ros-i 13093014kinect v2 ph
4 ros-i 13093014kinect v2 phClay Flannigan
 
© Adict studio Especificaciones Técnicas Mayo 2013
© Adict studio Especificaciones Técnicas  Mayo 2013© Adict studio Especificaciones Técnicas  Mayo 2013
© Adict studio Especificaciones Técnicas Mayo 2013ADICT Active Retail
 
Schottland Austausch 2012 von Pina Coppola
Schottland Austausch 2012 von Pina CoppolaSchottland Austausch 2012 von Pina Coppola
Schottland Austausch 2012 von Pina CoppolaSeminar Nürtingen
 
[Challenge:Future] The global air pollution
[Challenge:Future] The global air pollution[Challenge:Future] The global air pollution
[Challenge:Future] The global air pollutionChallenge:Future
 
24 heures de Tam Tam - Woefr.com
24 heures de Tam Tam - Woefr.com24 heures de Tam Tam - Woefr.com
24 heures de Tam Tam - Woefr.competergerritsen
 
P1 computer components
P1 computer componentsP1 computer components
P1 computer componentshar139
 
Programa calidad servicio oficial automovil
Programa calidad servicio oficial automovilPrograma calidad servicio oficial automovil
Programa calidad servicio oficial automovilSOLVE CONSULTORIA, SL
 

Destacado (18)

International Journal of Engineering Research and Development
International Journal of Engineering Research and DevelopmentInternational Journal of Engineering Research and Development
International Journal of Engineering Research and Development
 
2x a5 retina display powerbooks
2x a5 retina display powerbooks2x a5 retina display powerbooks
2x a5 retina display powerbooks
 
가상스토어
가상스토어가상스토어
가상스토어
 
Brainstorm Kick-off BorstkankerVereniging Nederland
Brainstorm Kick-off BorstkankerVereniging NederlandBrainstorm Kick-off BorstkankerVereniging Nederland
Brainstorm Kick-off BorstkankerVereniging Nederland
 
5500 Reporting New Proofed
5500 Reporting New Proofed5500 Reporting New Proofed
5500 Reporting New Proofed
 
Game Planning
Game PlanningGame Planning
Game Planning
 
Tangible&Rendering
Tangible&RenderingTangible&Rendering
Tangible&Rendering
 
Blog 47 Tam Tam
Blog 47 Tam TamBlog 47 Tam Tam
Blog 47 Tam Tam
 
4 ros-i 13093014kinect v2 ph
4   ros-i 13093014kinect v2 ph4   ros-i 13093014kinect v2 ph
4 ros-i 13093014kinect v2 ph
 
© Adict studio Especificaciones Técnicas Mayo 2013
© Adict studio Especificaciones Técnicas  Mayo 2013© Adict studio Especificaciones Técnicas  Mayo 2013
© Adict studio Especificaciones Técnicas Mayo 2013
 
Nevermore
NevermoreNevermore
Nevermore
 
Schottland Austausch 2012 von Pina Coppola
Schottland Austausch 2012 von Pina CoppolaSchottland Austausch 2012 von Pina Coppola
Schottland Austausch 2012 von Pina Coppola
 
[Challenge:Future] The global air pollution
[Challenge:Future] The global air pollution[Challenge:Future] The global air pollution
[Challenge:Future] The global air pollution
 
24 heures de Tam Tam - Woefr.com
24 heures de Tam Tam - Woefr.com24 heures de Tam Tam - Woefr.com
24 heures de Tam Tam - Woefr.com
 
Freunde werben
Freunde werbenFreunde werben
Freunde werben
 
P1 computer components
P1 computer componentsP1 computer components
P1 computer components
 
Ser y no ser
Ser y no serSer y no ser
Ser y no ser
 
Programa calidad servicio oficial automovil
Programa calidad servicio oficial automovilPrograma calidad servicio oficial automovil
Programa calidad servicio oficial automovil
 

Similar a Programacion web

ProgramacióN Java Script
ProgramacióN Java ScriptProgramacióN Java Script
ProgramacióN Java ScriptEdgar
 
Lenguaje-de-programacion-JavaScript-1.pdf
Lenguaje-de-programacion-JavaScript-1.pdfLenguaje-de-programacion-JavaScript-1.pdf
Lenguaje-de-programacion-JavaScript-1.pdfJaviMartin21
 
Lenguaje de-programacion-java script-1
Lenguaje de-programacion-java script-1Lenguaje de-programacion-java script-1
Lenguaje de-programacion-java script-1giancarlos
 
Trabajo practico de lenguaje java.Conceptos. Estructuras. Programacion.
Trabajo practico de lenguaje java.Conceptos. Estructuras. Programacion.Trabajo practico de lenguaje java.Conceptos. Estructuras. Programacion.
Trabajo practico de lenguaje java.Conceptos. Estructuras. Programacion.Mabel2310
 
COMPLEMENTOS DEL NAVEGADOR
COMPLEMENTOS DEL NAVEGADORCOMPLEMENTOS DEL NAVEGADOR
COMPLEMENTOS DEL NAVEGADORJOSELINE
 
INFOSAN Manual programación-javascript
INFOSAN Manual programación-javascriptINFOSAN Manual programación-javascript
INFOSAN Manual programación-javascriptFRANCIACOCO
 
INFOSAN MANUAL JAVA SCRIP
INFOSAN  MANUAL JAVA SCRIPINFOSAN  MANUAL JAVA SCRIP
INFOSAN MANUAL JAVA SCRIPFRANCIACOCO
 
Java desde 0
Java desde 0Java desde 0
Java desde 0Saviotec
 

Similar a Programacion web (20)

ProgramacióN Java Script
ProgramacióN Java ScriptProgramacióN Java Script
ProgramacióN Java Script
 
Lenguaje-de-programacion-JavaScript-1.pdf
Lenguaje-de-programacion-JavaScript-1.pdfLenguaje-de-programacion-JavaScript-1.pdf
Lenguaje-de-programacion-JavaScript-1.pdf
 
Lenguaje de-programacion-java script-1
Lenguaje de-programacion-java script-1Lenguaje de-programacion-java script-1
Lenguaje de-programacion-java script-1
 
Script
ScriptScript
Script
 
Java Scripts
Java ScriptsJava Scripts
Java Scripts
 
MANUAL DE JAVA
MANUAL DE JAVAMANUAL DE JAVA
MANUAL DE JAVA
 
Java desde cero
Java desde ceroJava desde cero
Java desde cero
 
MANUAL JAVA
MANUAL JAVA MANUAL JAVA
MANUAL JAVA
 
JAVA
JAVA JAVA
JAVA
 
JAVA 2
JAVA 2JAVA 2
JAVA 2
 
Parcial
ParcialParcial
Parcial
 
Trabajo practico de lenguaje java.Conceptos. Estructuras. Programacion.
Trabajo practico de lenguaje java.Conceptos. Estructuras. Programacion.Trabajo practico de lenguaje java.Conceptos. Estructuras. Programacion.
Trabajo practico de lenguaje java.Conceptos. Estructuras. Programacion.
 
¿Qué es java?
¿Qué es java?¿Qué es java?
¿Qué es java?
 
Programacion
ProgramacionProgramacion
Programacion
 
Introduccion actionscript
Introduccion actionscriptIntroduccion actionscript
Introduccion actionscript
 
COMPLEMENTOS DEL NAVEGADOR
COMPLEMENTOS DEL NAVEGADORCOMPLEMENTOS DEL NAVEGADOR
COMPLEMENTOS DEL NAVEGADOR
 
Glosario de terminos
Glosario de terminosGlosario de terminos
Glosario de terminos
 
INFOSAN Manual programación-javascript
INFOSAN Manual programación-javascriptINFOSAN Manual programación-javascript
INFOSAN Manual programación-javascript
 
INFOSAN MANUAL JAVA SCRIP
INFOSAN  MANUAL JAVA SCRIPINFOSAN  MANUAL JAVA SCRIP
INFOSAN MANUAL JAVA SCRIP
 
Java desde 0
Java desde 0Java desde 0
Java desde 0
 

Último

Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.José Luis Palma
 
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSTEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSjlorentemartos
 
RETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxRETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxAna Fernandez
 
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzel CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzprofefilete
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dstEphaniiie
 
Neurociencias para Educadores NE24 Ccesa007.pdf
Neurociencias para Educadores  NE24  Ccesa007.pdfNeurociencias para Educadores  NE24  Ccesa007.pdf
Neurociencias para Educadores NE24 Ccesa007.pdfDemetrio Ccesa Rayme
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxMaritzaRetamozoVera
 
Identificación de componentes Hardware del PC
Identificación de componentes Hardware del PCIdentificación de componentes Hardware del PC
Identificación de componentes Hardware del PCCesarFernandez937857
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdfBaker Publishing Company
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxlclcarmen
 
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxzulyvero07
 
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptxTECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptxKarlaMassielMartinez
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...JAVIER SOLIS NOYOLA
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADauxsoporte
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfAngélica Soledad Vega Ramírez
 

Último (20)

Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.
 
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSTEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
 
RETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxRETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docx
 
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzel CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes d
 
Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.
 
Neurociencias para Educadores NE24 Ccesa007.pdf
Neurociencias para Educadores  NE24  Ccesa007.pdfNeurociencias para Educadores  NE24  Ccesa007.pdf
Neurociencias para Educadores NE24 Ccesa007.pdf
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docx
 
Identificación de componentes Hardware del PC
Identificación de componentes Hardware del PCIdentificación de componentes Hardware del PC
Identificación de componentes Hardware del PC
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf
 
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdfTema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
 
Sesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronósticoSesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronóstico
 
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
 
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptxTECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
 
Presentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza MultigradoPresentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza Multigrado
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDAD
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
 

Programacion web

  • 1. Instituto Tecnológico Superior De Tepeaca Ingeniería en Sistemas Computacionales  Antonio M. Hernández
  • 2. Programación Web  Lenguaje Script:  Sintaxis  Elementos  Aplicaciones  Eventos Script  Efectos con Lenguaje Script
  • 3. Lenguajes de script Sintaxis: Un lenguaje de script es un pequeño lenguaje de programación cuyo código se inserta dentro del documento HTML. Este código se ejecuta en el navegador del usuario al cargar la página, o cuando sucede algo especial como puede ser el pulsar sobre un enlace. Estos lenguajes permiten variar dinámicamente el contenido del documento, modificar el comportamiento normal del navegador, validar formularios, realizar pequeños trucos visuales, etc... Sin embargo, conviene recordar que se ejecutan en el navegador del usuario y no en la máquina donde estén alojadas, por lo que no podrán realizar cosas como manejar bases de datos. Esto hace que los contadores (por ejemplo) se deban realizar de otra manera, utilizando programas CGI. El primer lenguaje de script que vió la luz fue el JavaScript de Netscape. Nacido con la versión 2.0 de este navegador y basado en la sintaxis de Java, su utilidad y el casi absoluto monopolio que entonces ejercía Netscape en el mercado de navegadores permitieron que se popularizara y extendiera su uso.
  • 4. Elementos: Datos Anteriormente has hecho una primera aproximación a los elementos básicos con que vas a enfrentarte al programar. Es el momento de ahondar algo más en estos elementos y comenzaremos por los más elementales: Los datos. JavaScript maneja cuatro tipos de datos: números, cadenas, lógicos y punteros. Los datos numéricos sirven para manejar cualquier número real, como 12, 56.5, -9. Pero también son datos numéricos: 2.0E2, 0xF0, 012. El primero corresponde a la llamada notación científica: 2.0*102, mientras que el segundo ejemplo corresponde a la notación hexadecimal y el tercero a la octal. Lo normal es que sólo uses valores decimales y a veces hexadecimales (como los códigos RGB par definir colores). Los datos de cadena son los usados para representar palabras, así los siguientes son datos de cadena: "prueba", "La clave es 4r5t". Observa que estos datos están encerados entre comillas, es la forma de decirle a JavaScript que está ante una cadena de caracteres y no ante un nombre o descriptor de algún elemento del programa.
  • 5.  Este tipo de datos no es ni numérico ni de cadena, es un dato lógico o técnicamente booleano. En los lenguajes de programación en lugar de sí o no se emplean los valores true o false. Estos datos son los que utilizaras cuando en los programas se tengan que tomar decisiones, o sea, comprobar algo y actuar en consecuencia: si el explorador es Netscape 4.0, no usar efectos de presentación, por ejemplo. Existe un último tipo de datos que también se emplea a menudo en los scripts para la captura de eventos, son direcciones de memoria, o punteros, usadas para asignar funciones. Si en una variable se guarda el nombre de una función esa variable se convierte en otro nombre para esa función. ¿Raro? Esto tiene su verdadera utilidad al asignar funciones a los eventos disparados por el ratón.
  • 6. Arrays Apesar de su extraño nombre los arrays no son más que estructuras para almacenar listas de valores. A diferencia de otros lenguajes, en Javascript los arrays no son un tipo de variable sino que fueron implementados por Netscape como un objeto, lo cual les da una potencia enorme. Pero empecemos por abajo. Un array puede verse como una lista con nombre donde podemos anotar cosas, cada anotación se identifica por su número de orden en el array (la lista), su índice, y el número total de espacios para anotar cosas en el array es su longitud. Si en un array tenemos anotados 5 números, el primero de todos será el de índice 0 y el último tendrá como índice el 4, siendo 5 la longitud del array. Simple ¿verdad?, veamos como se crea un array y como se asignan valores en unos ejemplos muy sencillos: .... semana = new Array(7); miLista = new Array(1,5,9); nombres= new Array('Juan', 'Luis', 'María'); vacio = new Array(); interesante = new Array(4);
  • 7. Funciones Las funciones como decíamos en la introducción, no son más que bloques de instrucciones de programa con nombre y que pueden ejecutarse sin más que llamarlas desde alguna parte de otra función o desde la página HTML, bien sea directamente o mediante eventos. Habitualmente una función se crea para ejecutar una acción muy concreta. Javascript posee una serie de funciones predefinidas o funciones globales pero el programador puede crear las suyas propias. Para crear una función tan sólo es necesario indicárselo al intérprete mediante la plabra clave function seguida del nombre que deseemos darle a la función y, encerrados entre paréntesis, las variables que simbolizan los valores con los que deba trabajar la función, los argumentos.
  • 8. Variables  Ya dijimos que los datos, los valores, no siempre pueden utilizarse de manera directa, sino que habitualmente se almacenan en una posición de memoria con nombre, esto es lo que llamamos una variable. En otros lenguajes de programación existen diferentes tipos de variables en función del tipo de datos que pueden guardar: variables para cadenas, para números enteros, para números reales, etc.. JavaScript es muy permisivo en este aspecto de manera que una variable puede guardar cualquier tipo de dato y además pueden crearse en cualquier parte del programa.
  • 9. Objetos Javascript no posee todas las características de los lenguajes orientados a objetos como Java o C++, pero si es capaz de manejar objetos e incluso crearlos. De hecho si un programa en este lenguaje es capaz de interactuar con el explorador es gracias a esta capacidad. Javascript posee algunos objetos predefinidos u objetos intrínsecos como son: Array, Boolean, Date, Function, Global, Math, Number, Object, RegExp, y String. Además el programador puede crear objetos nuevos, con sus propios métodos y propiedades, adaptados a las necesidades concretas de su aplicación.
  • 10. Aplicaciones La mayoría de aplicaciones mas utilizadas son completamente gratuitas, esto facilita al usuario común a poner en marcha su web, tienda virtual o comunidad de forma muy sencilla sin necesidad de saber programar. Esto que sin duda es una gran ventaja también supone un gran inconveniente: Al ser aplicaciones con el código abierto, todo el mundo puede acceder a su código, incluido aquellos que buscan agujeros de seguridad para hacer un mal uso de este. También hay que destacar que algunas de estas aplicaciones carecen de un código bien depurado y optimizado, ya que muchos basan la creación de estos en torno a una comunidad y no a un equipo de programadores bien organizados, es por ello que continuamente se descubren nuevos bugs y errores. La utilización de este tipo de aplicaciones presupone que cuando se produzcan errores, se busque soporte técnico en la comunidad o equipo de desarrollo de la aplicación. En Evidalia Hosting trabajamos para mantener un correcto funcionamiento de los distintos servicios, pero no podemos dar soporte para este tipo de aplicaciones.
  • 11. Eventos Antes de nada, una premisa: a la hora de decidir en qué orden tratar los distintos temas, estaba bastante indeciso sobre el lugar en que colocar esta lección y las relacionadas con ella, ya que en algunos textos los eventos son tratados antes de las funciones y en otros después. La elección no era indiferente porque el tema constituye una parte importante de la teoría Javascript y, si se coloca en una posición equivocada, puede llegar a romper el carácter secuencial de la exposición.
  • 12. Los eventos se usan para invocar instrucciones. Así, el script se ejecuta secuencialmente, pero, para conseguir introducir el carácter dinámico e interactivo, debe cargarse en memoria y activarse o invocarse sólo cuando se verifican situaciones particulares como el ratón que pasa, un documento que se carga, etc. El problema de la conciliación con las funciones reside en el hecho de que a un evento puede ir asociada una sola instrucción, pero la mayor parte de las veces, la asociación está establecida con un bloque de instrucciones y, por tanto, con las funciones que toman el nombre de handler o gestores de eventos.
  • 13. Es importante entender este concepto porque Javascript, en sus comienzos, tenía pocos eventos, los cuales se activaban sólo si insertados en particulares marcas y sucede a menudo que se utilizan los handler de manera arbitraria y que se considere como error la no activación de un evento cuando insertado en marcas incompatibles. Internet Explorer en las versiones más recientes ha ampliado las posibilidades de uso de los eventos, por lo que pueden insertarse en muchísimas marcas, mientras que Netscape ha permanecido fiel a las impostaciones originarias.
  • 14. Efectos Con Javascript podemos crear efectos especiales en las páginas y definir interactividades con el usuario. El navegador del cliente es el encargado de interpretar las instrucciones Javascript y ejecutarlas para realizar estos efectos e interactividades, de modo que el mayor recurso, y tal vez el único, con que cuenta este lenguaje es el propio navegador. Javascript es el siguiente paso, después del HTML, que puede dar un programador de la web que decida mejorar sus páginas y la potencia de sus proyectos. Es un lenguaje de programación bastante sencillo y pensado para hacer las cosas con rapidez, a veces con ligereza. Incluso las personas que no tengan una experiencia previa en la programación podrán aprender este lenguaje con facilidad y utilizarlo en toda su potencia con sólo un poco de práctica.
  • 15. El script permite utilizar varios efectos, mas de 20. Incluye:  Scroll desde diferentes ángulos y slide.  Efecto de zoom  Slide.  Shuffle.  Efecto de desvanecimiento o Fade.  Entre otros.
  • 16. Bibliografia  http://www.purosoftware.com/desarrollo-web-scripts- manipulacion-de-imagenes/08-cycle-plugin-para-jquery- slideshow.html  www.articulosinformativos.com.mx/Javascript-a1106253.html  http://www.htmlpoint.com/javascript/corso/js_10.htm  http://javascript.espaciolatino.com/lengjs/jselementos/ele_dat os.htm