codificación en java script y html

Aux. Cristhian Wilson Carrizales Ramos INFORMATICA ( MAT- 204) .

Codificación en Java Script y HTML

Para la creación de una página WEB se sigue el siguiente comando.El Código Java Script puede ir dentro de “head” o “body”.

Código JavaScript dentro del mismo

documento.

<html>

<head>

<title> Titulo de la Pagina </title>

Contenido del Encabezado

<script type=“text/javascrip”>

Código JavaScript

</script>

</head>

<body>

<script languaje=“javascrip”>

Código JavaScript

</script>

Contenido del Cuerpo del Documento

</body>

</html>

Código JavaScript en un documento Aparte.

<html>

<head>

<title> Titulo de la Pagina </title>

Contenido del Encabezado

<script type=“text/javascrip” src=“Archivo.js”>

// El código javascript se codifica en un

documento aparte guardado con la extensión (.js)

El mismo debe estar guardado junto a la página

Web y debe coincidir con el nombre dentro del

argumento (src)

</script>

</head>

<body>

<script languaje=“javascrip” src=“Archivo.js”>

// El código javascript se codifica en un

documento aparte guardado con la extensión (.js)

El mismo debe estar guardado junto a la página

Web y debe coincidir con el nombre dentro del

argumento (src)

</script>

Contenido del Cuerpo del Documento

</body>

</html>


Códigos JavaScript

- Toda instrucción debe finalizar en punto y coma ( ; ).- Los textos van escritos entre comillas ( “Hola Mundo” ).- Para agrupar instrucciones se usan llaves ( { Instrucción 1; Instrucción 2; } ).- Después de las llaves NO se coloca punto y coma.

Variables

Se usa el Atributo ( var ) .Luego se da un espacio se coloca el nombre de la variable.Puede estar formado por letra, números, carácter de peso ( $ ) y guio bajo ( _ ).Debe empezar con una letra , $ o _. NO puede empezar con números.

var numero=8;var _letra= “Hola Mundo”;var $Datos=2891;Se pueden declarar todas las variables en una sola instrucción separadas por una coma ( , )

var numero=8, _letra= “Hola Mundo”, $Datos=2891;

Se pueden Utilizar variables sin declaras

numero=8, _letra= “Hola Mundo”, $Datos=2891;

Es preferible declarar las variables, debido a que cuando finaliza el programa las variables no declaradas ocupan espacio en la memoria.

Entrada de Datos

Se unan dos métodos

1.- Instrucción ( prompt )

var nombre=prompt(“Mensaje”, “ValorDefecto”);

Esta Instrucción despliega un cuadro de dialogo con 2 botones Aceptar y Cancelar que solicita al usuario insertar un Dato.

2.- Crear un formulario de entrada de dato.

var nombre=document.getElmentById(“IdCaja”).value;

IdCaja es la identificación ( id ) de la caja, y Guarda los datos en la variable nombreSalida de datos.


Se unan tres métodos

1.- Instrucción ( documen.write )

documen.write(texto);

2.- Instrucción ( alert )

alert(“Mensaje”);

Despliega un cuadro de dialogo con el mensaje y un botón de Aceptar.

3.- Crear un formulario de entrada de dato.

document.getElmentById(“IdCaja”).value=salida;

Muestra la variable declarada salida en la caja con la respectiva identificación ( id ).

Funciones

Se utiliza la Instrucción ( function ) seguido del nombre.

function nombre(var1,var2){Bloque de instrucciones;return valor;}

El cual var1 y var2 son datos de entrada para la función y valor es el valor de retorno de la función. Si no existe la última instrucción ( return valor; ) no devuelve ningún resultadoPara llamar a una función se escribe la misma y dentro de los paréntesis los paramentaros .

nombre(var1,var2);

Si se desea guardar el valor de retorno de una función se utiliza una variable.

var variable=nombre(var1,var2);

Algunas funciones Estándar

eval(expresión)

El cual evalúa la expresión, devuelve un valor numérico.


Ejm Devuelveeval(2+2) 4eval(“2+2”) 4eval(1E-4) 0.0004eval(“PEPE”) error

Operadores y Relaciones

Los operadores aritméticos que se pueden emplear Javascript son:

+ Suma

- Resta

* Multiplicación

/ División

% Residuo de la división

++ Incremento equivale a var1=var1+1-- Decremento equivale a var1=var1 - 1+= Suma y asignación var1+= valor equivale a var1=var1+valor-= Resta y asignación var1-= valor equivale a var1=var1- valor*= Producto y asignación var1*= valor equivale a var1=var1*valor/= División y asignación var1/= valor equivale a var1=var1/valor%= Modulo y asignación var1%= valor equivale a var1=var1%valor

Los operadores lógicos que se pueden emplear en Javascript son:

&& Conjunción (and) Suma lógica|| Disyunción (or) Producto lógico! Negación lógica (not)

Las relaciones que se pueden emplear en Javascript el cual devuelven un resultado lógico son:

== Igual que

!= Diferente que

> Mayor que

< Menor que

>= Mayor o Igual que

<= Menor o Igual que

=== Estrictamente Igual que

!== Estrictamente Diferente que Prioridad

( ) Alta

!, ++, - -


*, /, % +, -==, <, >, !=, >=, <=, ===, !== Baja

Funciones Matemáticas

Las funciones matemáticas predefinidas en Javascript (como parte del objeto "Math") son:

sin(x) Seno del "x" ("x" en radianes).cos(x) Coseno de "x" ("x" en radianes).tan(x) Tangente del "x" ("x" en radianes).asin(x) Arco seno de "x" (resultado en radianes).acos(x) Arco coseno de "x" (resultado en radianes).atan(x) Arco tangente de "x" (resultado en radianes).atan2(x,y) Arco tangente de "x/y".log(x) Logaritmo natural de "x" (ln(x)).exp(x) Exponente de "x" (ex).sqrt(x) Raíz cuadrada de "x".pow(x,y) Potencia "xy".abs(x) Valor absoluto de "x".round(x) Valor entero más cercano a "x".ceil(x) Entero mayor más cercano a "x".floor(x) Entero menor más cercano a "x".random() Número aleatorio comprendido entre 0 y 1.

Ejm Math.exp(6) = e6

Se cuenta también con las siguientes constantes matemáticas (como parte del objeto "Math"):

E Número de Euler.LN2 Logaritmo natural de 2.LN10 Logaritmo natural de 10.LOG2E Logaritmo en base 2 del número de Euler.LOG10E Logaritmo en base 10 del número de Euler.PI Número pi.SQRT1_2 Raíz cuadrada de 1/2.SQRT2 Raíz cuadrada de 2.

Ejm Math.PI = 3.141……

Javascrip es sensible a Mayúsculas y Minúsculas, así que (math.pi se considera un error).

Estructuras de Control

Estructura Selectiva Simple ( if )


1.- Para una sola Instrucción

if ( condición ) proceso;

2.- Para varias Instrucciones

if ( condición ) { Inst_1; Inst_2; …….. Inst_k;}

Estructura Selectiva Doble ( if – else )

1.- Para una sola Instrucción if ( condición ) proceso;else proceso;

2.- Para varias Instruccionesif ( condición ) { Inst_1; Inst_2; …….. Inst_k;}else { Inst_1; Inst_2; …….. Inst_k;}Estructura Selectiva Anidada

if (condición ) { if (condición)

proceso; }


else if (condición ) { Inst_1; Inst_2; …….. Inst_k;}else proceso;

- Por más que sea una sola Instrucción es preferible siempre colocar los paréntesis.

if (condición ) {proceso;

}

Estructura Selectiva Múltiple ( swith – case )

swith( selector ) { case valor_1:

Instruccion_1;Instruccion_2;

………………Instrucción;break;

case valor_2: Instruccion_1;break;

case valor_n: Instruccion_1;break;

default: Instruccion_1; default es una secuencia en caso de que no se cumplan ninguno Instruccion_2; de los case ( Esta secuencia es opcional ).

}

Estructura Iterativa Condicional Previa ( while )

- Evalúa Primero la condición, mientras sea Verdadero efectuara las instrucciones dentro de las llaves, una vez la condición se Falso saldrá del bucle iterativo. while (condición) {


Instruccion_1;Instruccion_2;

………………Instrucción;

}

Estructura Iterativa Condicional Posterior ( do – while )

- Efectua Primero las instrucciones dentro de las llaves, luego evalúa la condición, mientras sea Verdadero seguirá efectuando las instrucciones, una vez la condición se Falso saldrá del bucle iterativo.

do {Instruccion_1;Instruccion_2;


} while (condición);

Estructura Iterativa Definida o Automática ( for )

- Esta secuencia es utilizada usualmente cuando se conoce el Valor Inicial y el Valor Final de un problema iterativo.- Se dará a una variable i un valor inicial, evaluara la condición, mientras sea Verdadero efectuara las instrucciones, al finalizar las instrucciones se efectuara un incremento o decremento (de acuerdo a lo programado) a la variable i. Se continuara con el bucle iterativo y el incremento o decremento hasta que la condición sea Falso.

for ( i=valor_inicial; Condición; Incremento) {Instruccion_1;Instruccion_2;


}

Codificación en HTML

Entorno HTMLTodos estos códigos van codificados dentro del boby

Títulos


<hx> Títulos </hx> Define títulos en 6 tamaños diferentes, x = 1 - 6 .

Línea divisora <hr size=valor width=valor> Muestra una línea horizontal en el documento, se puede definir los siguientes atributos:size es el grosor de la línea, valor numérico ejm. size=5width es el ancho de la línea que se mostrara en pantalla, valor porcentual ejm. width=50%No lleva etiqueta de cierre.

Alineación del texto <p align=“valor”> Párrafo </p>Define un párrafo alineado de acuerdo al valor dentro de align, que puede ser de 3 maneras: “left” a la izquierda“center” al centro“rigth” a la derecha

Texto subrayado<u> texto </u>

Texto en Negrita<b> texto </b><strong> texto </strong>Puede ser de cualquiera de las dos formas, recomendables usar strong

Texto en cursiva<i> texto </i><em> texto </em>Puede ser de cualquiera de las dos formas, recomendables usar em

Texto subrayado<s> texto </s><del> texto </del><strike> texto </strike>Puede ser de cualquiera de las tres formas, recomendables usar del

Salto de línea<br>Define un salto de línea, se pueden insertar varios seguidos.No lleva etiqueta de cierre.

Tablas


<table><tr> <td> celda 1 </td> <td> celda 2 </td> ….. <td> celda n </td> fila1 </tr><tr> fila2 </tr>…..<tr> fila n </tr></table>

Construye una tabla en la que (tr) son las filas y (td) sn las celdas de cada fila.

Referencia<a href=“dirección o destino”> Nombre del enlace </a>Define un enlace el cual al hacer clic re-direcciona hacia el destino, puede ser un de tipo: Direccion URL, se debe especificar correctamente la dirección.Ejm.<a href=“MyPrograma.html”> Nombre del enlace </a>En este caso el archivo MyPrograma.html debe estar junto a la página que contenga el enlace

Creación de formularios

<form name=“nombre” action=valor method=valor >Contenido del formulario</form>

name es el nombre que llevara el formularioaction contiene el nombre del agente que procesará los datos remitidos al servidor (por ejemplo, un script de PHP)method define la manera de enviar los datos al servidor. Los valores posibles son:

get: los valores enviados se añaden a la dirección indicada en el atributo actionpost: los valores se envían de forma separada

Si el atributo method no está establecido, Internet Explorer y Firefox se comportan como si el valor fuera get.

Contenido del formulario

Caja de Texto<input type=“text” name=“nombre” id=“Identificador” size=valor value=“valor”>Dentro de value va el valor por defecto que tendrá la caja, si es un texto debe ir entre comillas.

Botones<input type=“button” name=“nombre” id=“Identificador” size=valor value=“texto” onclick= “nombre_de_funcion()”>En el atributo value se coloca lo que va a mostrar el botónEn el atributo onclick se coloca la función o acción que realizara el botón al hacer clic


Área de Texto<textarea name=“nombre” id=“Identificador” rows=“valor” cols=“valor”></textarea>rows es el numero de filas de textos visiblecols es el numero de columnas de textos visible

Radio botones<input type=“radio” name=“nombre” id=“Iden-1” size=valor value=“valor1”> opción 1<input type=“radio” name=“nombre” id=“Iden-2” size=valor value=“valor2”> opción 2<input type=“radio” name=“nombre” id=“Iden-n” size=valor value=“valor3” checked> opción n

La opción checked determina el radio botón seleccionado por defecto.Todos los radio botones llevan el mismo nombre pero diferentes identificadores.

Cajitas botones<input type=“checkbox” name=“nombre-1” id=“Iden-1” size=valor value=“valor1”> opción 1<input type=“checkbox” name=“nombre-2” id=“Iden-2” size=valor value=“valor2”> opción 2<input type=“checkbox” name=“nombre-3” id=“Iden-n” size=valor value=“valor3” checked> opción n

La opción checked determina el seleccionado por defecto.Todos los checkbox llevan el diferentes nombres y diferentes identificadores.

Lista de seleccion

<select name=“nombre” id=“Iden-1” size“valor”> <option value=“valor1”> Opcion 1 </option><option value=“valor2”> Opcion 2 </option><option selected value=“valorn”> Opcion n </option>

</select>

Selected define la la opcion seleccionada por defecto.size define el numero de opciones visibles.En caso de que sea selección múltiple se coloca el atributo (multiple) dentro de select


Ejemplos de Estructuras Iterativas

- Todos los ejercicios Iterativos se pueden resolver por cualquiera de los métodos existentes.

- Los ciclos Iterativos son segmentos de un algoritmo o programa cuyas instrucciones se repiten un un numero determinado de veces dependiendo su finalización de una condición.

- Los contadores, acumuladores e interruptores son elementos que se encuentran dentro de los ciclos iterativos.

Contadores

Un contador es una variable cuyo valor se incrementa o decrementa en una unidad constante en cada repetición o iteracion

codificación en java script y html

Documents