Monografias.com > Sin categoría
Descargar Imprimir Comentar Ver trabajos relacionados

Web dinámica (página 2)




Enviado por Pablo Turmero



Partes: 1, 2

Aplicación
Tenemos varias posibilidades para definir un estilo:
1. Directamente en la etiqueta en la que queremos usarlo.
2. Definirlo globalmente para toda la página html.
(Gp:) < HTML>< HEAD> < TITLE>ejemplo1< /TITLE>< /HEAD>< BODY>< P STYLE=color:blue;font-size:18pt;>Este párrafo tiene aplicado un estilo< P>y este otro no.< /BODY>< /HTML>
(Gp:) 1. Directamente en la etiqueta en la que queremos usarlo:
< ETIQUETA STYLE=propiedad1:valor;….;propiedad2:valor;>….< /ETIQUETA>

Monografias.com

Aplicación
2. Para definir una hoja de estilos de forma global empleamos la etiqueta < STYLE> … < /STYLE> que debe estar colocada en la cabecera del documento.
(Gp:) < STYLE TYPE="text/css">< !—Etiqueta1:{propiedad1:valor;…propiedadn:valor}/* podemos introducir comentarios */…Etiquetam:{propiedad1:valor;…}//–>< /STYLE>

(Gp:) < HTML>< HEAD> < TITLE>ejemplo3< /TITLE>< STYLE> < !– P {font-family:Verdana;color=green} B {color=blue}–>< /STYLE>< /HEAD>< BODY>< P>Fuente de estilo Verdana y color verde, la < B> negrita < /B> en azul< /BODY>< /HTML>

Monografias.com

Aplicación
Podemos definir el estilo en un fichero externo de texto con la extensión .css y luego referenciarlo desde el propio documento HTML, lo haremos dentro de la cabecera del documento con la etiqueta:
< LINK REL="stylesheet" TYPE="text/css" HREF="estilo1.css">
(Gp:) /* Fichero estilo1.css */
< !– P {font-family:Verdana;color=green} B {color=blue}–>

(Gp:) < HTML>< HEAD> < TITLE>ejemplo3< /TITLE> < LINK REL="stylesheet" TYPE="text/css" HREF="estilo1.css">< /HEAD>< BODY>< P>Fuente de estilo Verdana y color azul, la < B> negrita < /B> en verde< /BODY>< /HTML>

Monografias.com

Herencia de estilos
Las etiquetas de un documento HTML estan organizadas de manera que unas engloban a otras. Esta organización permite una relación padre-hijo de manera que los estilos definidos para etiquetas padres serán heredados por los hijos. Sin embargo si tenemos definido un estilo para una etiqueta "padre", podremos definir un estilo distinto para una etiqueta "hija", el cual prevalece sobre el heredado.
(Gp:) < HTML>< HEAD>< TITLE>Ejemplo4< /TITLE>< STYLE> < !– P {font-family:Verdana; color=green} B {color=blue}–>< /STYLE>< /HEAD>< BODY>< P>< I>La letra cursiva hereda el estilo del párrafo< /I> mientras que < B>la negrita tiene su estilo propio< /B>< /BODY>< /HTML>

Monografias.com

Clases
Una clase es una definición de estilo que en principio no está asociado a alguna etiqueta HTML, pero que podemos asociar, en el documento, a etiquetas concretas. Definimos la clase como un estilo más, de la forma:
.Nombre_de_la_Clase {propiedad1:valor;propiedad2:valor;…}
Para aplicar el estilo de una clase a una etiqueta concreta, utilizaremos el parámetro CLASS
< etiqueta CLASS="Nombre_de_la_Clase">….< /etiqueta>
(Gp:) < HTML>< HEAD> < TITLE>ejemplo7< /TITLE>< STYLE TYPE="text/css"> < !– BODY {font-family:Verdana; color=blue;} B,P {color=red;} .Baqua {color=aqua;}–>< /STYLE>< /HEAD>< BODY>El texto está escrito en azul < P>los
párrafos en rojo< /P>así como < B>
la negrita < /B>, < B CLASS="Baqua">pero en esta
otra negrita estoy aplicando una clase.< /B>< /BODY>< /HTML>

Monografias.com

Propiedades
(Gp:) aqua, black, blue, fucshia, gray, green, lime, marron, navy, olive, purple, red, silver, teal, white y yellow

Monografias.com

Ejemplo de hojas de estilo I
(Gp:) < HTML>< HEAD>< TITLE>ejemplo5< /title>< LINK REL="stylesheet" TYPE="text/css" HREF="estilo2.css">< STYLE> < !– TD B {color=olive} UL B {color=purple}–>< /STYLE>< /HEAD>< BODY>Texto normal < B>y texto en negrita< /B>, según el estilo que hemos importado.< UL>< LI>Elemento 1< LI>Elemento 2< LI>< B>Elemento 3 en negrita< /B>< /UL>< TABLE BORDER="1">< TR>< TD>Celda (1,1)< /TD>< TD>Celda (1,2)< /TD>< /TR>< TR>< TD>< B>Celda (2,1) en negrita< /B>< /TD>< TD>Celda (1,2)< /TD>< /TR>< /TABLE>< /BODY>< /HTML>

(Gp:) /*fichero estilo2.css */< !–/* estilo para el documento */ BODY {font-family:Verdana,Arial;
color=blue}/* estilos para otras etiquetas */ B,TD {color=red}–>

Monografias.com

Ejemplo de hojas de estilo II
(Gp:) La etiqueta A,
A:link {propiedad1:valor;propiedad2:valor;…}
A:visited {propiedad1:valor;propiedad2:valor;…}
A:active {propiedad1:valor;propiedad2:valor;…}
A:hover {propiedad1:valor;propiedad2:valor;…}

(Gp:) < HTML>< HEAD> < TITLE>ejemplo6< /TITLE>< STYLE TYPE="TEXT/CSS"> < !– A:link {color:#0000ff;} A:visited {color:#00ff00;} A:active {color:#cccccc;} A:hover {color:#f3fe1e;}–>< /STYLE>< BODY>< P>Un < a href="http://www.unican.es"> enlace < /A> de prueba< /BODY>< /HTML>

Monografias.com

Ejemplos de hojas de estilos III
(Gp:) /* fichero de estilo */P { font-size : 12pt; font-family : arial,helvetica; font-weight : normal;} H1 { font-size : 36pt; font-family : verdana,arial; text-decoration : underline; text-align : center; background-color : Teal;}TD { font-size : 10pt; font-family : verdana,arial; text-align : center; background-color : #666666;}BODY { background-color : #006600; font-family : arial; color : White;}

Monografias.com

Ejemplo de estilos IV

Monografias.com

HTML Dinámico (introducción)
HTML + DOM + JavaScript
< html> … < /html> window.document, … < script> … < /script>
Elementos estándar (multiplataforma), independientes del navegador:
DHTML: Es un término de marketing, empleado por Netscape y Microsoft, para describir las tecnologías soportadas en la version 4 de sus respectivos navegadores. Y por ello tiene una gran dependencia con el navegador que emplemos.

Monografias.com

HTML Dinámico (Cliente)
Capas + Estilos + JavaScript
< div> … < /div> css < script> … < /script>
Flash
< object> … < /object>
Java
< object> … < /object>
Elementos incorporados en los propios navegadores, y por tanto no es necesario descargarse ningún software.
VRML
< object> … < /object>
Elementos externos a los navegadores, que son incrustados en las páginas web (< object>). Para su funcionanmiento en una página web necesitan de un software especial o plugin.
HTML + DOM + JavaScript
< html> … < /html> window.document, … < script> … < /script>
Elementos estándar (multiplataforma), independientes del navegador:

Monografias.com

HTML Dinámico (Ejemplo: VRML)
http://www.canoma.com/vrml
http://www.web3d.org
http://www.cai.com/cosmo/
http://web3d.about.com/
Lenguaje de Modelado para Realidad Virtual. Creación de mundos virtuales, objetos 3D y escenarios 3D, posibilitando la interacción con los objetos, y movimiento del espectador
EJEMPLO

Monografias.com

HTML Dinámico (Ejemplo: FLASH)
http://www.flash-es.net/topten/topten.html

Inicio

http://www.macromedia.com
http://www.programatium.com/flash/
Programas de edición de animaciones, que permiten desarrollar fácilmente ficheros que se pueden incrustar en una página Web. Ejemplo
Toda la programación se realiza de forma visual (arrastrando objetos, etc.).
El código resultante es específico de cada producto y se requiere un plugg-in en el navegador para poder interpretarlo.

Monografias.com

Aplicaciones cliente / servidor
Cuando un servidor web recibe una petición de una página HTML simple, solamente se trata de encontrar el archivo adecuado y devolverlo. Se trata de contenido estático.
Actualmente la gran parte de de las páginas web son de contenido dinámico, debido a que presentan información que cambia con el tiempo.
Podemos querer que en función de la fecha, hora, país o identificación del ususario la respuesta a esta petición sea diferente.
También es muy frecuente encontrar páginas web que muestran información originada en una base de datos.

Monografias.com

Java es un potente lenguaje de programación orientado a objetos.
Todo el entorno de desarrollo (SDK) para crear ficheros .class con código pseudocompilado para intérpretes Java.
Los programas son compilados en ficheros “pseudo-ejecutables” que se pueden ser interpretados:
(aplicaciones) máquina virtual, o
(applets) plug-in de un navegador Web.
Tiene reglas estrictas sobre cómo declarar y utilizar variables.(control estricto de tipos)
Independencia de plataforma (UNIX, Windows, Mac,…).
Orientado a objetos (Obligado a implementar).
Seguridad y confianza: lenguaje, compilador, interprete
Simplicidad: gestión automática de “basura”.
Estándar.
Computación distribuida.
“Clases" potentes para desarrollo. (GUI,NET,BD)
Generación rápida de código.
Documentación y Mantenimiento.
Rendimiento????.
JAVA no es sólo un Lenguaje de Programación, JAVA es además un conjunto de herramientas avanzadas: JAVA es una Tecnología
Tecnología Java

Monografias.com

HTML Dinámico (Ejemplo: JAVA)
Java: Lenguaje de programación desarrollado para la Web. Su principal fundamento es, que todo programa, puede ejecutarse, sin ser modificado, en cualquier plataforma.
http://java.sun.com/

Monografias.com

Tecnologías Actuales Java
(Gp:)                                                                                                                                    

(Gp:) JavaTM technologies:
J2SETM ,
J2EETM ,
J2METM,
JAX XML.

(Gp:) SDK (Standard Development Kit)

JRE (Java RunTime Enviroment)

Monografias.com

Elementos de Desarrollo para Java
(Gp:) Java 1.0
212 Clases, 8 paquetes
Java 1.1
504 Clases, 23 paquetes
Mejopras en el rendimiento de la VM
Java 1.2
1520 Clases, 59 paquetes
Plataforma Java 2.0
Java 1.4.1 (Beta), Julio 2002
(Gp:) Para trabajar con Java 1.0 o Java 1.1
Java Development Kit para la versión (JDK)
Para trabajar con Java 1.2 (Renombrado como Java 2)
Software Development Kit(SDK) o más concreto:
Java 2 SDK, Standard Edition Ver. 1.2, …

El lenguaje de programación Java: Lenguaje de programación.
Un lenguaje con una sintaxis similar a C, orientado a Objetos Evitando las características complejas que han caracterizado a otros lenguajes como C++
La máquina virtual Java (JVM): Hardware/Software (habitual). Es la parte imprescindible para poder ejecutar programas Java
Sun: Solaris, Linux y Windows, También para Mac, Unix…Palm OS…
A pesar de ser un intérprete, la VM tiene un buen rendimiento.
JIT Compiler (Just-In-Time compilers).
Propio de la Máquina Virtual
Bytecodes convertidos instantáneamente en código nativo de la plataforma correspondiente
Mejora en la velocidad de ejecución
Hotspot => Buena implantación de JIT
Java Runtime Environment (JRE) Contiene todo lo necesario para ejecutar programas Java pero no para desarrollarlos

Monografias.com

Ejemplo de un Applet JAVA
import java.applet.*;
import java.awt.*;
public class MiApplet extends Applet {
public void paint (Graphics g){
g.drawLine(1,1,50,50);
g.fillOval(40,40,20,20);
}}
< html>< head>< /head>< body>
< applet code="MiApplet.class" width="100" height="100">
< /body>< /html>

EjemploApplet.html
MiApplet.java

Monografias.com

Otras Tecnologías Web .Net (Microsoft)

Monografias.com

HTML Dinámico (Ejemplo: CAPAS)
Inclusión de capas (documentos independientes incluidos en el propio documento) de posicionamiento absoluto, permite dar dinamismo a las páginas Web.
< DIV ID="mylayer" STYLE="postition:absolute;…">
< A HREF="pagina.html">Enlace< /A>
ponemos algo de texto< BR>
ahora una imagen < IMG SRC="image.gif">
y mas texto
< /DIV>
width:300px
height:300px
left:300px
top:300px z-index:1
Visibility:hidden (visible)
Netscape: document.layers["ID"].visibility
IE: document.all["ID"].style.visibility
var layerRef="", styleSwitch="";
function init(){
if (navigator.appName == "Netscape") {
var layerRef="document.layers";
var styleSwitch="";
}else{
var layerRef="document.all";
var styleSwitch=".style";
}}
document.getElementById("ID")

Monografias.com

Teniendo en cuenta el tipo de navegador
var layerRef="", styleSwitch="";
function init(){
if (navigator.appName == "Netscape") {
var layerRef="document.layers";
var styleSwitch="";
}else{
var layerRef="document.all";
var styleSwitch=".style";
}}
n = (document.layers) ? 1:0
ie = (document.all) ? 1:0
n6 = (document.getElementById) ? 1:0

function show() {
if (n) document.uno.visibility = "show"
if (n6) document.getElementById('uno').style.visibility = "visible"
if (ie) uno.style.visibility = "visible"
}

Monografias.com

< html>< head>< title>Ejemplo Capas – Curso JavaScript< /title>< /head>
< body>Pagina ejemplo de capas< div id="c1" style="position:absolute; left:245px; top:168px; width:157px; height:151px; z-index:1; visibility: visible"> < img src="imagenes/perrito-marron.jpg"> Esta es la primera capa, la del perro marron < /div>< /body>< /html>
Ejemplo de Capas

Monografias.com

Ejemplo de capas (con estilos)
< html>< head>< title>Ejemplo Capas – Curso JavaScript< /title>< STYLE TYPE="text/css">#c1 {background-color:#66CCFF;width:150px; height:150px;border-width:5px; border-style:ridge; padding:5%}< /STYLE>< /head>< body>Pagina ejemplo de capas< div id="c1" style="position:absolute; left:250px; top:150px; z-index:1; visibility: visible;"> < img src="imagenes/perrito-marron.jpg" width="157" height="136"> Esta es la primera capa, la del perro marron < /div>< /body>< /html>

Monografias.com

Ejemplo Simple: Mostrando y Ocultando Capas
Ejemplo Simple de Capas

Monografias.com

Mostrando y Ocultando Capas (Código, IE)
< html> < head>< title>Ejemplo Capas – Curso JavaScript< /title>< /head>< body bgcolor="#FFFFFF">< div id="capamarron" style="position:absolute; width:157px; height:151px; z-index:1; left: 165px; top: 138px; visibility: hidden"> < img src="imagenes/perrito-marron.jpg" width="223" height="275"> Esta es la primera capa, la del perro marron < /div>< div id="capanegro" style="position:absolute; width:305px; height:217px; z-index:2; left: 214px; top: 161px; visibility: hidden"> < img src="imagenes/perrito-negro.jpg" width="306" height="231"> Esta es la segunda capa, la del perro negro < /div>< input type="button" value="capa1" onMouseOver="document.all['capanegro'].style.visibility='visible'; document.all['capamarron'].style.visibility='hidden';" onMouseDown="document.all['capanegro'].style.visibility='visible'; document.all['capamarron'].style.visibility='visible';">< input type="button" value="capa2" onMouseOver="document.all['capanegro'].style.visibility='hidden'; document.all['capamarron'].style.visibility='visible';" onMouseDown="document.all['capanegro'].style.visibility='visible'; document.all['capamarron'].style.visibility='visible';"> < /body>< /html>

Monografias.com

HTML Dinámico (JavaScript + capas)
Controlando capas desde un formulario
Controlando capas con eventos del ratón
Ejemplo. La inclusión de capas en HTML, que permite superponer, ocultar y mover elementos de forma interactiva.
JavaScript es un lenguaje de programación que permite añadir dinamismo a las páginas Web. Para ello se utiliza una marca especial
< script> … < /script>
Página con diversos scripts de JavaScript
El acceso a bases de datos permite tener la información actualizada, y requiere un esquema de programación cliente/servidor.
Página web de AIMet

Monografias.com

Capas en Movimiento
< html>< head>< SCRIPT>var izquierda=0;function corre() { object = document.getElementById("c1").style; if (izquierda < 650) { izquierda += 10; object.left = izquierda; setTimeout("corre()",10) }}< /SCRIPT>< STYLE TYPE="text/css"> #c1 {position:relative; top:50px; left:15px; background-color:#990000;width:200px; z-index=0; }< /STYLE>< /head>< body>Para mover una CAPA< br>< input type="button" value="Pulsa" onClick="corre()">< DIV ID="c1" >< img src="corredor.gif" width="114" height="134" alt="" border="0">< /DIV>< /body>< /html>

Monografias.com

Objetos y Eventoscon JavaScript
SubJosé M. Gutiérrez

Universidad de Cantabria
gutierjm@unican.es

Internet
HTML
JavaScript
Java

Monografias.com

Programación: JavaScript vs Java
JavaScript es un lenguaje simple para usos sencillos.
Es relativamente fácil de utilizar.
No es necesario ningún Kit de desarrollo, ya que sólo se precisa escribir scripts.
Los scripts se insertan directamente en el código HTML, por lo que no hay necesidad de compilarlo.
Está basado en objetos, que pueden utilzarse en un script.
Es muy poco restrictivo en cuanto a la declaración y uso de variables.
Java es un potente lenguje de programación orientado a objetos.
Es complicado de utilizar.
Necesita JDK para crear ficheros .class con códigopseudocompilado para intérpretes Java.
Los programas son compilados en ficheros “ejecutables” o en “applets” que se pueden incrustar en páginas Web.
Es un completo lenguaje de programación orientada a objetos.
Tiene reglas estrictas sobre cómo declarar y utilizar variables.
Ambos lenguajes son independientes de plataforma y sus programas pueden ejecutarse sobre Internet, en una página Web.

Monografias.com

Estructura del documento (DOM)
Un documento tiene asociada una jerarquía de componentes que los relaciona entre sí.

En este ejemplo: dos imágenes,
un enlace y un formulario.

window
+–frames
+–location
+–history
+–document
+–forms
| |
| elements (text, button)
|
+–layers
+–links
+–Plugin
+–anchors

Monografias.com

Programación Orientada a Objetos
En la programación orientada a objetos, el desarrollo de una aplicación se organiza en torno a los datos, en torno a los cuales se organizan los procesos. Para ello, estos lenguajes tienen la posibilidad de:
Definir objetos compuestos de un conjunto de variables (o propiedades) y funciones (o métodos) asociadas.
Definir una estructura jerárquica, donde se heredan variables y métodos de padres a hijos.
Control de sucesos a través de la estructura gerjárquica definida.
Reusabilidad del código.
Fácil modificación
Facilidad de desarrollo.
Fácil comprensión.

de clases
estructural
Programación Orientada a Objetos

Monografias.com

Dos Formas de Incrustar JavaScript en HTML
< HTML>
< HEAD>
< SCRIPT LANGUAGE="JavaScript">
< !– oculta a navegadores antiguos
document.write("Hola !");
// –>
< /SCRIPT>
< /HEAD>
< BODY>
< P>Hola otra vez ! < /P>
< /BODY>
< /HTML>
< HTML>
< HEAD> < /HEAD>
< BODY>
< FORM>
< INPUT TYPE="BUTTON"
ONCLICK="alert('Hola !')">
< /FORM>
< /BODY> < /HTML>
Incluyendo Scripts
Acciones en las Marcas < >

Monografias.com

Más ejemplos simples
Generamos un sencillo script para añadir información al final de una página Web, en concreto la fecha de modificación.
< SCRIPT LANGUAGE="JAVASCRIPT">
document.write("Ultima modificacion:");
document.write(document.lastModified)
< /SCRIPT>
Otro ejemplo, ahora en una propiedad del body:
< BODY ONLOAD="alert('estás entrando en la pagina')">
JavaScript diferencia mayúsculas y minúsculas
Se suele tomar como convenio denotar lasvariables y funciones de la forma:lastModifiedalert

Monografias.com

Valores, variables y literales
Numeros, como 42 o 3.14159 .

Logicasl (Booleanas) < true> or < false>.

Cadenas, utilizadas del mismo modo que en Java!.

null, denota una variable nula;
undefined, propiedad o variable indefinida
Valores
Variables son nombres simbólicos de los valores.

Comienzan con una letra letra o con ("_") seguidos de caracteres o dígitos (0-9).
Variables
Un string literal es cero o más caracteres encerrados entre (") o (') comillas.
Ejemplos de string literales:
“hola"
‘Java'
“una linea n otra linea"
Literales

Monografias.com

Manejo de Literales.-1
< html>< head> < title>strings_1< /title>< !– INICIO SCRIPT –>< SCRIPT LANGUAGE="JAVASCRIPT">cafes = ["French Roast", "Monka", "Dromedario"];document.write("< strong> MARCAS de CAFE < /strong> < br> < hr>"); document.write(“marca t =+cafes[0]+"< br>"); document.write(cafes[1]+"< br>"); document.write(cafes[2]+"< br>"); < /SCRIPT>< !– FIN SCRIPT –>< /head>< body>< /body>< /html>
Caracteres Especiales
b Backspace
f Form feed
n New line
r Carriage return
t Tab
' Apostrophe or single quote
" Double quote

Monografias.com

Manejo de Literales.-2
< html>< head> < title>strings_2< /title>< !– INICIO SCRIPT –>< SCRIPT LANGUAGE="JAVASCRIPT">num = [1, 2,3,4,5,6,7,8,9 ];document.write("< strong> < H1>TABLA de SUMAR< /H1>< /strong> < br> < hr>"); document.write("1+"+num[0]+"t = t"+eval(1+num[0])+"< br>"); document.write("1+"+num[1]+"="+eval(1+num[1])+"< br>"); document.write("1+"+num[2]+"="+eval(1+num[2])+"< br>"); document.write("1+"+num[3]+"="+eval(1+num[3])+"< br>"); document.write("1+"+num[4]+"="+eval(1+num[4])+"< br>"); < /SCRIPT>< !– FIN SCRIPT –>< /head>< body>< /body>< /html>
Ejemplo 1 de tabla de Sumar
Propuesta: ¿cómo hacer la tabla de cualquier otro número?

Monografias.com

Introducción a las Variables
< html>< head> < title>strings_2< /title>< !– INICIO SCRIPT –>< !– INICIO SCRIPT –>< SCRIPT LANGUAGE="JAVASCRIPT">num = [1,2,3,4,5,6,7,8,9 ];var NumerodeTabla;NumerodeTabla=prompt("Quieres la tabla de SUMAR del número?","0"); document.write("< strong> < H1>TABLA de SUMAR delt"+NumerodeTabla+"< /H1>< /strong> < hr>"); document.write(NumerodeTabla+"+t"+num[0]+"t = t"+eval(eval(NumerodeTabla)+num[0])+"< br>"); document.write(NumerodeTabla+"+t"+num[1]+"t = t"+eval(eval(NumerodeTabla)+num[1])+"< br>"); document.write(NumerodeTabla+"+t"+num[2]+"t = t"+eval(eval(NumerodeTabla)+num[2])+"< br>"); document.write(NumerodeTabla+"+t"+num[3]+"t = t"+eval(eval(NumerodeTabla)+num[3])+"< br>"); < /SCRIPT>< /head>< body>< /body>< /html>
Ejemplo 2 de tabla de Sumar

Interactuar con el usuario
Propuesta: ¿cómo hacer la tabla de cualquier otro número?
Prompt(String,Valor por defecto)

Monografias.com

Funciones…….1

Para definir una función
function nombre (parametros) {
Sentencias….
}
< html>< head> < title>Var1< /title>< !– INICIO SCRIPT –>< SCRIPT LANGUAGE="JAVASCRIPT">function square(number) { return number * number;}< /SCRIPT>< !– FIN SCRIPT –>< /head>< body> < input name="entra" type="text" value=“0">< input name="sale" type="text" value="">< input type="button" value="x^2" onClick="sale.value=square(entra.value)">< /body>< /html>
Sin declarar variables
Propuesta: Realizar la tabla de sumar de cualquier número usando una función

Monografias.com

Funciones…….2
< html>< head> < title>Var2< /title>< !– INICIO SCRIPT –>< SCRIPT LANGUAGE="JAVASCRIPT">var resul=0;function square(number) { resul= number * number;}< /SCRIPT>< !– FIN SCRIPT –>< /head>< body> < input name="entra" type="float" value="2">< input type="button" value="x^2" onClick="eval(square(entra.value));alert(resul)">< /body>< /html>
Declarando variables

Monografias.com

Funciones…….3
< html>< head> < title>Var3< /title>< SCRIPT LANGUAGE="JAVASCRIPT">var variable="SOY GLOBAL";function VarGlobal() { alert(variable);}function VarLocal() { variable="SOY LOCAL"; alert(variable);}< /SCRIPT>< !– FIN SCRIPT –>< /head>< body> < input type="button" value="Muestra Global" onClick="VarGlobal()">< input type="button" value="Muestra Local" onClick="VarLocal()">< /body>< /html>
Variables
Globales y
Locales

Monografias.com

Operadores Aritméticos 1
< html>< head> < title>Var4< /title>< /head>< body>
Numero < input type="text" name="entra" value=1>< br>< input type="button" value="x+=2" onClick="entra.value+=2">< input type="button" value="x -= 1" onClick="entra.value-=1">< input type="button" value="x *= 2" onClick="entra.value*=2">< input type="button" value="x /= 3" onClick="entra.value/=3">< input type="button" value="x %= 5" onClick="entra.value%= 5">< input type="button" value="Inicio" onClick="entra.value=1">< /body>< /html>
x += y x = x + y
x -= y x = x – y
x *= y x = x * y
x /= y x = x / y
x %= y x = x % y

Monografias.com

Sentencias…..If ….Else

function Nota(a,b) {var media=(parseInt(a)+parseInt(b))/2;var final=""; if (media< 5) { final="Suspenso";} else { final="Aprobado";} document.Notas.Calificar.value=final; //return final;}< form name="Notas">"HTML "< input type="text" name="Html" value="">< br>"JavaScript "< input type="text" name="JS" value="">< br>< input type="button" name="Java" value="Calificación" onclick="Nota(Html.value,JS.value)"> < input type="text" name="Calificar">
< /form>
if (condition) {
statements1
}
[else {
statements2
} ]
Propuesta: Ampliar calificación a Notable y Sobresaliente

Monografias.com

Bucles…..For (1)

function Nota(a,b) {var media=(parseInt(a)+parseInt(b))/2;var final=""; if (media< 5) { final="Suspenso";} else { final="Aprobado";} document.Notas.Calificar.value=final; //return final;}< form name="Notas">"HTML "< input type="text" name="Html" value="">< br>"JavaScript "< input type="text" name="JS" value="">< br>< input type="button" name="Java" value="Calificación" onclick="Nota(Html.value,JS.value)"> < input type="text" name="Calificar">
< /form>
for (initialExpression; condition; crementExpression) { statements }
Propuesta: Utilizar un ciclo for para realizar el ejemplo de la tabla de sumar de un número que elija el usuario

Monografias.com

Bucles…..For. (2)
< html>< head> < title>For_2< /title>< SCRIPT>function TablaSumar(num) { for (var i=1; i < 11; i++) { document.writeln(i+"+t"+num+"t =t "+eval(i+eval(num))+"< br>"); }}num=prompt("Quieres la tabla de SUMAR del número?","0"); TablaSumar(num);< /SCRIPT>< /head>< body>< /body>< /html>
Propuesto: Se genere de forma aleatoria una quiniela de 15
resultados con “1”, “X” y “2”

Monografias.com

Bucles…..For. (3)
< SCRIPT>function Quiniela() { for (var i=0; i < 16; i++) { var casilla=(Math.floor(3*Math.random())); if (casilla==0){ rellenar="1"} else{ if (casilla==1){rellenar="X"} else {rellenar="2"} } document.write("Casilla ttt"+i+"tt=t"+rellenar +"< br>"); }}< /SCRIPT>< /head>< body onload="Quiniela()">< /body>

Monografias.com

Bucles…..While. (1)
< SCRIPT>pregunta="¡Que número he pensado del 0 al 10?";var acierto=Math.round(10*Math.random());var bien='< img src="bien.gif" width="87" height="128" border="0">';function Acertijo() { var i=0; var respuesta=prompt(pregunta,"0"); while ((i< 10)&(respuesta != acierto)) { var respuesta=prompt(pregunta,"0"); if(respuesta == acierto) { document.write("Correcto = "+bien+acierto +"< br>"); } } }< /SCRIPT>< /head>< body onload="Acertijo()">< /body>< /html>
En este ejemplo: La máquina piensa un número y el usuario tiene que acertarlo en 10 intentos

Monografias.com

Recursividad….. 1

< SCRIPT LANGUAGE="JAVASCRIPT">function Factorial(num){ if (num>1){ return num*Factorial(num-1); } else { return num; } }< /SCRIPT>< /head>< body>< SCRIPT LANGUAGE="JAVASCRIPT">var numero=prompt("Dame un número entero","0");var calcula=Factorial(numero);document.write("Factorial de "+numero+" = < b>"+calcula+"< /b>");< /SCRIPT>< /body>< /html>

Monografias.com

Recursividad….. 2
< SCRIPT LANGUAGE="JAVASCRIPT">function Test(item){//var pregunta = "¿Cuánto vale 2+2?";var acierto =eval(item);var pregunta= "¿Cuánto vale " + item+"?";var bien='< img src="bien.gif" width="87" height="128" border="0">';var mal='< img src="mal.gif" width="87" height="133" border="0">';var respuesta=prompt(pregunta,"0");return (respuesta == acierto) ? bien :Test(item); }< /SCRIPT>< /head>< body>< SCRIPT LANGUAGE="JAVASCRIPT">var resultado=Test("2+2");document.write(resultado);< /SCRIPT>< /body>< /html>
CUIDADO
con la
Recursividad

Monografias.com

Recursividad….. 3
< SCRIPT LANGUAGE="JAVASCRIPT">function Test(item,intentos){//var pregunta = "¿Cuánto vale 2+2?";var acierto =eval(item);var pregunta= "¿Cuánto vale " + item+"?";var bien='< img src="bien.gif" width="87" height="128" border="0">';var mal='< img src="mal.gif" width="87" height="133" border="0">';var respuesta=prompt(pregunta,"0");if (intentos >1){ return (respuesta == acierto) ? bien :Test(item,intentos-1);}else { return (respuesta == acierto) ? bien :mal; } }< /SCRIPT>< body>< SCRIPT LANGUAGE="JAVASCRIPT">var resultado=Test("2+2",3);document.write(resultado);< /SCRIPT>< /body>
CONTROLAR la
Recursividad
Propuesta: Utilizar la recursividad para el ejemplo de acertar un número del 1 al N con máximo de intentos

Monografias.com

El lenguaje: Sintáxis y variables

Si la declaración de una variable se hace dentro de una función, dicha variable es local, sino es global. var SoyUnaVariable;SoyUnaVariable=2.1;var UnArray = new Array();UnArray[1]=1;UnArray[2]="soy el segundo";
La sintaxis de JavaScript es muy parecida a la de C++. Las instrucciones terminan con un punto y coma y se agrupan mediante llaves; una doble barra (//) indica que el resto de la línea es un comentario.
Los operadores matemáticos también son los mismos: + (que también sirve para cadenas), -, *, /, % (módulo), ++ y –.
Las asignaciones (=) son también como en C y C++, incluyendo +=, -=, etc.
En cuanto a los operadores lógicos tenemos ||, &&, !, ^ (xor), < < y >>
y las comparaciones son < , >, < =, >=, == y !=.
Creamos objetos de clases predefinidas.
Todas las variables numéricas son floating-point: 2.1, 21e-1

Monografias.com

Palabras reservadas
break do function null typeof
case else if return var
continue export import switch void
default false in this while
delete for new true with
catch const enum finally throw
class debugger extends super try
Palabras reservadas por ECMA para futuras extensiones (no incluidas en v1.2).
Alert Math parseFloat find NaN
isFinite close frames open resizeto
Length Object Function menubar . . .
Otros símbolos pueden redefinirse:

Monografias.com

Ejemplo de tratamiento de variables
< html>
< head>

< script language="JavaScript">
< !– hide
function calculation() {
var x= 12;
var y= 5;
var result= x + y;

alert(result);
}
// –>
< /script>

< /head>
< body>

< form>
< input type="button" value="Calculate" onClick="calculation()">
< /form>

< /body>
< /html>

Monografias.com

La función factorial
< script language="javascript">
function factorial(n) {
var result;
if ((n == 0) || (n == 1)){
return 1
}else {
result = (n * factorial(n-1) );
return result
}
}
< /script>

< body onload="alert(factorial(6))">

< input type="text" name="entrada">
< input type="button" value="calcula"
onclick="alert(factorial(entrada.value))">
La función factorial (recursiva e iterativa)
function factorial(n) {
var fact;
for (i=1,fact=1; i< =n; i++){
fact*=i;
}
return fact;
}

Monografias.com

Estructuras de Control
Las estructuras if…else, for, while funcionan igual que sus equivalentes en C.
La única diferencia con dicho lenguaje: la estructura for…in.

for (contador in UnArray)
{
document.write(UnArray[contador])
};

< script language="javascript">
var texto = new Array("hola");
var numero = new Array(1,2,3,4);
var win=window.open('','ventana');
for (i in texto)
{
win.document.write(texto[i]);
}
for (i in numero)
{
win.document.write(numero[i]);
}
< /script>

Partes: 1, 2
 Página anterior Volver al principio del trabajoPágina siguiente 

Nota al lector: es posible que esta página no contenga todos los componentes del trabajo original (pies de página, avanzadas formulas matemáticas, esquemas o tablas complejas, etc.). Recuerde que para ver el trabajo en su versión original completa, puede descargarlo desde el menú superior.

Todos los documentos disponibles en este sitio expresan los puntos de vista de sus respectivos autores y no de Monografias.com. El objetivo de Monografias.com es poner el conocimiento a disposición de toda su comunidad. Queda bajo la responsabilidad de cada lector el eventual uso que se le de a esta información. Asimismo, es obligatoria la cita del autor del contenido y de Monografias.com como fuentes de información.

Categorias
Newsletter