1 Introduccion

SESION 1
JAVASCRIPT
1
Introduccion
• JavaScript es un legunaje de secuencia
de comandos (scripts) en cliente
– <script language=“Javascript”
type=“text/javascript”>
– Document.write(“!hola mundo!”);
– </script>
• El código script se entremezcla en el
documento HTML utilizando el elemento
<script>
2
• El navegador distingue la etiqueta <script> del
resto del código HTML
– <script language=“Javascript” type=“text/javascript”>
– <b>
– </b>
– </script>
• Las etiquetas <b> son parte de HTML y no de
JS
• Para evitar ese error, ponemos la etiqueta <b>
dentro de la cadena de salida
3
– Document.write(“<b>!hola mundo!</b>”);
– </script>
O rodeando el script
– <b>
– </script>
– </b>
4
Adición de JS a documentos HTML
• Podemos tener cuatro formas estándar de
incluir JS en HTML
– Dentro de una etiqueta <script>
– Como fichero vinculado mediante el atributo
src de una etiqueta <script>
– Dentro de un atributo HTML de manejador de
eventos, como onclick
– Mediante la sintaxis de dirección javascript:
referida en un enlace
5
• Hay otras formas no estándar de incluir
código script, usando la entidad JS
• También se puede ejecutar JS en el
servidor incrustándolo en una aplicación
6
Elemento <script>
• Todo el texto que hay dentro de la etiquta
<script> se interpreta como cierta forma
de lenguaje script, de forma
predeterminada JS
• La forma de indicar el lenguaje script a
tulizar es especificar el atributo de
lenguaje (language)
– <script language=“JavaScript”>
– </script>
7
• Según la sintaxis HTML del Consorcio
W3C no se debería utilizar el atrkibuto
language, sino type
– <script type=“text/javascript”>
– /script>
• Practicamente todos los navegadores,
soportan ambas posibilidades en la
actualidad
8
• Se pueden utilizar tantos elementos
<scripts> como se deseen
• Se leen y ejecutan según se vayan
encontrando
9
Ejemplo: tres scripts se ejecutan
uno tras otro
– alert(“primer script”);
– </script>
– alert(“segundo script”);
– </script>
– alert(“tercer script”);
– </script>
10
Script en la cabecera
• Debido al carácter secuencial de HTML la
cabecera se lee lo primero
• Así, se colocan en head los scripts a los
que luego hacen referencia en el body
• Se suelen utilizar para definir variables y
funciones que se pueden utilizar a lo largo
del documento
11
– <head>
– Function alertTest()
– {
– Alert(“alerta, javascript en la cabecera”);
– }
– </script>
– </head>
– <body>
– alertTest();
– </script>
– </body>
12
Ocultación de scripts
• Con HTML, el navegador imprime todo lo
que no entienden en pantalla
• Podemos “esconder” el código
– Comentando
• <script language=“Javascript”
type=“text/javascript”>
• <!—
• Aquí el mensaje
• //-->
• </script>
13
<noscript>
• También es posible ofrecer una versión
alternativa
• Se puede utilizar el elemento <noscript>
– alert(“JavaScript funciona”);
– </script>
– <noscript>
– <i> su navegador no soporta JavaScript</i>
– </noscript>
14
• Un uso interesante del elemento <noscript> es enviar
alos usuarios a una página de error si no tiene
habilitados los scripts en su navegador
– 
– </script>
– <noscript>
– <b> se necesita javascript </b><br>
– <p> vea cómo <a href=“noscript.htm”> solucionar </a>
– </noscript>
15
Manejadores de eventos
• Estas secuencias de comandos script son
en respuesta a acciones de formularios y
a movimientos de ratón
• Se establecen diversos manejadores de
eventos, poniendo un atributo de un
elemento HTML que haga referencia a un
script
• Estos atributos comienzan por la palabra
“on”
16
• <body>
• <form>
• <input type=“button” value=“pulsar”
onclick=“alert(‘hola’);”>
• </form>
• </body>
17
Mezclamos etiquetas <script> y
manejadores de eventos
• <head>
• <script language=“Javascript” type=“text/javascript”>
• <!—
• Function alertTest()
• {
• Alert(“buenas”);
• }
• //-->
• </head>
• <body>
• <form>
• <input type=“button” name=“Testbutton” value=“pulsar”
onclick=“alertTest()”>
• </form>
• </body>
18
• Prácticamente todas las etiquetas HTML
deben tener la mayor parte de los eventos
principales
– Onclick, ondblclick, onheydown, onkeypress,
onkeyup, onmousedown, onmousemove,
onmouseout, onmouseover
19
Scripts vinculados
• Un forma muy importante es vincular el script a un fichero con un atributo
src del elemento <script>
– <head>
– <script language=“Javascript” type=“text/javascript” src=“archivo.js”>
– </script>
– </head>
– <body>
– <form>
– <input type=“button” name=“Testbutton” value=“pulsar” onclick=“alertTest()”>
– </form>
– </body>
• --- el fichero deberá contener:
• Function alertTest()
• {
• Alert(“buenas”);
• }
20
Ventajas de ficheros scripts
externos
• La ventaja de los ficheros scripts externos
es que separan la lógica, la estructura y
presentación de una página
• Es posible, referenciar muchos scripts al
mismo fichero, y actualizar solo ese
fichero para cambiar otros scripts
• El navegador puede guardar en memoria
caché scripts externos para acelerar el
acceso a un WebSite
21
Inconvenientes de ficheros scripts
externos
• No todos los navegadores los soportan
• La carga del navegador – no permitir usar
funciones del fichero externo hasta que
esté todo correctamente cargado
• Es posible evitar estos errores con un
buen estilo de programación
22
Direcciones URL de JS
• Invocar una instrucción utilizando una
dirección URL de JS
– Javascript:alert(‘hola’)
23
Entidades JavaScript
• En HTML se utilizan entidades para insertar
caracteres especiales
– &code
– &#169
• Las entidades JS se indican
– &{script};
Script es el identificador o llamada a función de JS
Las entidades solo se pueden usar en atributos HTML
<body bgcolor=“&pagebgcolor”;>
24
Ejemplo entidades
• <head>
• <script>
• Var bordersize=5;
• Var tablecellcolor=“#ff0000”;
• Var alignment=“center”;
• Function setImage(){
• Var today=new Date();
• Var hours=today.getHours();
• If((hours>8)&&(hours<18))
• Return ‘sol.gif’;
• Else
• Return ‘noche.gif’;
• </script>
• </head>
• <body>
• <table border=“&{bordersize};” align=“&{allignment};”>
• <tr>
• <td bgcolor=“&{tablecellcolor};”>entidades de javascript</td>
• </tr>
• </table>
• En el cielo ahora: <img src=“&{setImagen()};”>
• </body>
25
• Muchos navegadores no soportan
entidades
• Explorer siempre tuvo problemas
• Se usa document.write()
26

1 Introduccion

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

1 Introduccion

Загружено:

Авторское право:

Доступные форматы

SESION 1

Вам также может понравиться