El documento describe los fundamentos de la codificación en JavaScript y HTML para crear páginas web. Explica que el código JavaScript puede ir dentro de las etiquetas <head> o <body> de un documento HTML, o en un archivo .js externo vinculado al documento. También proporciona detalles sobre cómo declarar variables, escribir funciones, y utilizar estructuras de control como if/else y bucles para la programación en JavaScript.
0 calificaciones0% encontró este documento útil (0 votos)
175 vistas12 páginas
El documento describe los fundamentos de la codificación en JavaScript y HTML para crear páginas web. Explica que el código JavaScript puede ir dentro de las etiquetas <head> o <body> de un documento HTML, o en un archivo .js externo vinculado al documento. También proporciona detalles sobre cómo declarar variables, escribir funciones, y utilizar estructuras de control como if/else y bucles para la programación en JavaScript.
El documento describe los fundamentos de la codificación en JavaScript y HTML para crear páginas web. Explica que el código JavaScript puede ir dentro de las etiquetas <head> o <body> de un documento HTML, o en un archivo .js externo vinculado al documento. También proporciona detalles sobre cómo declarar variables, escribir funciones, y utilizar estructuras de control como if/else y bucles para la programación en JavaScript.
El documento describe los fundamentos de la codificación en JavaScript y HTML para crear páginas web. Explica que el código JavaScript puede ir dentro de las etiquetas <head> o <body> de un documento HTML, o en un archivo .js externo vinculado al documento. También proporciona detalles sobre cómo declarar variables, escribir funciones, y utilizar estructuras de control como if/else y bucles para la programación en JavaScript.
Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
Descargar como docx, pdf o txt
Está en la página 1de 12
Aux.
Cristhian Wilson Carrizales Ramos
INFORMATICA ( MAT- 204) . Codificacin en Java Script y HTML
Para la creacin de una pgina WEB se sigue el siguiente comando. El Cdigo Java Script puede ir dentro de head o body.
Cdigo JavaScript dentro del mismo documento. <html> <head> <title> Titulo de la Pagina </title> Contenido del Encabezado <script type=text/javascrip> Cdigo JavaScript </script> </head> <body> <script languaje=javascrip> Cdigo JavaScript </script> Contenido del Cuerpo del Documento </body> </html>
Cdigo JavaScript en un documento Aparte.
<html> <head> <title> Titulo de la Pagina </title> Contenido del Encabezado <script type=text/javascrip src=Archivo.js> // El cdigo javascript se codifica en un documento aparte guardado con la extensin (.js) El mismo debe estar guardado junto a la pgina Web y debe coincidir con el nombre dentro del argumento (src) </script> </head> <body> <script languaje=javascrip src=Archivo.js> // El cdigo javascript se codifica en un documento aparte guardado con la extensin (.js) El mismo debe estar guardado junto a la pgina Web y debe coincidir con el nombre dentro del argumento (src) </script> Contenido del Cuerpo del Documento </body> </html>
- Toda instruccin debe finalizar en punto y coma ( ; ). - Los textos van escritos entre comillas ( Hola Mundo ). - Para agrupar instrucciones se usan llaves ( { Instruccin 1; Instruccin 2; } ). - Despus 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, nmeros, carcter de peso ( $ ) y guio bajo ( _ ). Debe empezar con una letra , $ o _. NO puede empezar con nmeros.
var numero=8; var _letra= Hola Mundo; var $Datos=2891; Se pueden declarar todas las variables en una sola instruccin 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 mtodos
1.- Instruccin ( prompt )
var nombre=prompt(Mensaje, ValorDefecto);
Esta Instruccin 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 identificacin ( id ) de la caja, y Guarda los datos en la variable nombre Aux. Cristhian Wilson Carrizales Ramos INFORMATICA ( MAT- 204) . Salida de datos.
Se unan tres mtodos
1.- Instruccin ( documen.write )
documen.write(texto);
2.- Instruccin ( alert )
alert(Mensaje);
Despliega un cuadro de dialogo con el mensaje y un botn 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 identificacin ( id ).
Funciones
Se utiliza la Instruccin ( function ) seguido del nombre.
function nombre(var1,var2) { Bloque de instrucciones; return valor; }
El cual var1 y var2 son datos de entrada para la funcin y valor es el valor de retorno de la funcin. Si no existe la ltima instruccin ( return valor; ) no devuelve ningn resultado Para llamar a una funcin se escribe la misma y dentro de los parntesis los paramentaros .
nombre(var1,var2);
Si se desea guardar el valor de retorno de una funcin se utiliza una variable.
var variable=nombre(var1,var2);
Algunas funciones Estndar
eval(expresin)
El cual evala la expresin, devuelve un valor numrico. Aux. Cristhian Wilson Carrizales Ramos INFORMATICA ( MAT- 204) .
Operadores y Relaciones Los operadores aritmticos que se pueden emplear Javascript son: + Suma - Resta * Multiplicacin / Divisin % Residuo de la divisin ++ Incremento equivale a var1=var1+1 -- Decremento equivale a var1=var1 - 1 += Suma y asignacin var1+= valor equivale a var1=var1+valor -= Resta y asignacin var1-= valor equivale a var1=var1- valor *= Producto y asignacin var1*= valor equivale a var1=var1*valor /= Divisin y asignacin var1/= valor equivale a var1=var1/valor %= Modulo y asignacin var1%= valor equivale a var1=var1%valor Los operadores lgicos que se pueden emplear en Javascript son: && Conjuncin (and) Suma lgica || Disyuncin (or) Producto lgico ! Negacin lgica (not) Las relaciones que se pueden emplear en Javascript el cual devuelven un resultado lgico son: == Igual que != Diferente que > Mayor que < Menor que >= Mayor o Igual que <= Menor o Igual que === Estrictamente Igual que !== Estrictamente Diferente que Aux. Cristhian Wilson Carrizales Ramos INFORMATICA ( MAT- 204) . Prioridad ( ) Alta !, ++, - -
*, /, %
+, - ==, <, >, !=, >=, <=, ===, !== Baja Funciones Matemticas Las funciones matemticas 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" (e x ). sqrt(x) Raz cuadrada de "x". pow(x,y) Potencia "x y ". abs(x) Valor absoluto de "x". round(x) Valor entero ms cercano a "x". ceil(x) Entero mayor ms cercano a "x". floor(x) Entero menor ms cercano a "x". random() Nmero aleatorio comprendido entre 0 y 1. Ejm Math.exp(6) = e 6
Se cuenta tambin con las siguientes constantes matemticas (como parte del objeto "Math"): E Nmero de Euler. LN2 Logaritmo natural de 2. LN10 Logaritmo natural de 10. LOG2E Logaritmo en base 2 del nmero de Euler. LOG10E Logaritmo en base 10 del nmero de Euler. PI Nmero pi. SQRT1_2 Raz cuadrada de 1/2. SQRT2 Raz cuadrada de 2. Aux. Cristhian Wilson Carrizales Ramos INFORMATICA ( MAT- 204) . Ejm Math.PI = 3.141 Javascrip es sensible a Maysculas y Minsculas, as que (math.pi se considera un error). Estructuras de Control Estructura Selectiva Simple ( if )
1.- Para una sola Instruccin
if ( condicin ) proceso;
2.- Para varias Instrucciones
if ( condicin ) { Inst_1; Inst_2; .. Inst_k; }
Estructura Selectiva Doble ( if else )
1.- Para una sola Instruccin if ( condicin ) proceso; else proceso;
2.- Para varias Instrucciones if ( condicin ) { Inst_1; Inst_2; .. Inst_k; } else { Inst_1; Inst_2; .. Inst_k; } Aux. Cristhian Wilson Carrizales Ramos INFORMATICA ( MAT- 204) . Estructura Selectiva Anidada
if (condicin ) { if (condicin) proceso; } else if (condicin ) { Inst_1; Inst_2; .. Inst_k; } else proceso;
- Por ms que sea una sola Instruccin es preferible siempre colocar los parntesis.
if (condicin ) { proceso; }
Estructura Selectiva Mltiple ( swith case )
swith( selector ) { case valor_1: Instruccion_1; Instruccion_2;
Instruccin; 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 ). }
Aux. Cristhian Wilson Carrizales Ramos INFORMATICA ( MAT- 204) . Estructura Iterativa Condicional Previa ( while )
- Evala Primero la condicin, mientras sea Verdadero efectuara las instrucciones dentro de las llaves, una vez la condicin se Falso saldr del bucle iterativo.
while (condicin) { Instruccion_1; Instruccion_2;
Instruccin; }
Estructura Iterativa Condicional Posterior ( do while )
- Efectua Primero las instrucciones dentro de las llaves, luego evala la condicin, mientras sea Verdadero seguir efectuando las instrucciones, una vez la condicin se Falso saldr del bucle iterativo.
do { Instruccion_1; Instruccion_2;
Instruccin; } while (condicin);
Estructura Iterativa Definida o Automtica ( 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 condicin, 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 condicin sea Falso.
for ( i=valor_inicial; Condicin; Incremento) { Instruccion_1; Instruccion_2;
Instruccin; }
Aux. Cristhian Wilson Carrizales Ramos INFORMATICA ( MAT- 204) . Codificacin en HTML
Entorno HTML Todos estos cdigos van codificados dentro del boby
Ttulos <hx> Ttulos </hx> Define ttulos en 6 tamaos diferentes, x = 1 - 6 .
Lnea divisora <hr size=valor width=valor> Muestra una lnea horizontal en el documento, se puede definir los siguientes atributos: size es el grosor de la lnea, valor numrico ejm. size=5 width es el ancho de la lnea que se mostrara en pantalla, valor porcentual ejm. width=50% No lleva etiqueta de cierre.
Alineacin del texto <p align=valor> Prrafo </p> Define un prrafo 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
Aux. Cristhian Wilson Carrizales Ramos INFORMATICA ( MAT- 204) . Salto de lnea <br> Define un salto de lnea, se pueden insertar varios seguidos. No lleva etiqueta de cierre.
Construye una tabla en la que (tr) son las filas y (td) sn las celdas de cada fila.
Referencia <a href=direccin 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 direccin. Ejm. <a href=MyPrograma.html> Nombre del enlace </a> En este caso el archivo MyPrograma.html debe estar junto a la pgina que contenga el enlace
Creacin de formularios
<form name=nombre action=valor method=valor > Contenido del formulario </form>
name es el nombre que llevara el formulario action 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 aaden a la direccin indicada en el atributo action post: los valores se envan 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.
Aux. Cristhian Wilson Carrizales Ramos INFORMATICA ( MAT- 204) . 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 botn En el atributo onclick se coloca la funcin o accin que realizara el botn al hacer clic
rea de Texto <textarea name=nombre id=Identificador rows=valor cols=valor></textarea> rows es el numero de filas de textos visible cols es el numero de columnas de textos visible
Selected define la la opcion seleccionada por defecto. size define el numero de opciones visibles. En caso de que sea seleccin mltiple se coloca el atributo (multiple) dentro de select
Aux. Cristhian Wilson Carrizales Ramos INFORMATICA ( MAT- 204) . Ejemplos de Estructuras Iterativas
- Todos los ejercicios Iterativos se pueden resolver por cualquiera de los mtodos existentes.
- Los ciclos Iterativos son segmentos de un algoritmo o programa cuyas instrucciones se repiten un un numero determinado de veces dependiendo su finalizacin de una condicin.
- 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 repeticin o iteracion