Scribd
Cargar
55 vistas100 páginas

Módulo Formativo: Fundamentos de Programación Web Profesor: Alan Rolly Chavez Arancibia

Este documento proporciona una introducción a JavaScript, incluyendo su historia, características básicas y sintaxis. Explica que JavaScript fue creado originalmente por Brendan Eich en 1995 para ser utilizado en el navegador Netscape y agregar interactividad a las páginas web. También cubre temas como dónde se puede colocar el código JavaScript en una página web, tipos de datos básicos como números, cadenas y booleanos, declaración de variables, operadores matemáticos y comentarios.

Cargado por

Catauwu Ouch
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
55 vistas100 páginas

Módulo Formativo: Fundamentos de Programación Web Profesor: Alan Rolly Chavez Arancibia

Este documento proporciona una introducción a JavaScript, incluyendo su historia, características básicas y sintaxis. Explica que JavaScript fue creado originalmente por Brendan Eich en 1995 para ser utilizado en el navegador Netscape y agregar interactividad a las páginas web. También cubre temas como dónde se puede colocar el código JavaScript en una página web, tipos de datos básicos como números, cadenas y booleanos, declaración de variables, operadores matemáticos y comentarios.

Cargado por

Catauwu Ouch
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 100

Módulo Formativo:

Fundamentos de
Programación Web

Profesor: Alan Rolly


Chavez Arancibia
Fundamentos
Basicos de
JavaScript
JAVA SCRIPT
Introducción
Nacimiento y
Historia de
JavaScript
1995

Brendan Eich

FUE CREADO POR MAGISTER EN CIENCIAS


MATEMATICAS Y COMPUTACIONALES DE LA
UNIVERSIDAD SANTA CLARA(USA)
1995
Mocha,liveScript,Java Script
FUE EL PRIMER NAVEGADOR
Navegador Netscape 2 COMPATIBLE CON Navegador
Netscape 2 EN EL AÑO 1995
Adopción por
Microsoft 1996

El cual fue generado


por ingenieria inversa
a Netscape =====>
Jscript
EL AÑO 2000 MICROSOFT GANO GRAN POSICION
DOMINANTE CON INTERNET EXPLORER QUE JSCRIPT
Para evitar estas
incompatibilidades
CREO EL ESTANDAR

Document Object
Model O
DOM(MODELO DE
OBJETO DE
DOCUMENTO)

ES UNA INTERFAZA DE PLATAFORMA QUE PROPORCIONA UN


CONJUNTO ESTANDAR DE OBJETOS PARA REPRESENTAR DOCUMENTOS
CARACTERISTICAS
BASICAS DE JAVA
SCRIPT
-SE EJECUTA EN LOCAL (AUNQUE YA NO )

-ES INTERPRETADO (NO COMPILADO) ==EL NAVEGADOR LO VA


LEYENDO LINEA A LINEA Y DE ARRIBA A ABAJO
HTML(ESTRUCTURA
-AGREGA INTERACTIVIDAD A LOS SITIOS WEB ESQUELETO)
CSS(APARIENCIA)
JAVA
SCRIPT(INTERACTIVIDA
D)
-EFECTOS VISUALES DINAMICOS
¿DONDE VA EL CÓDIGO JAVA SCRIPT EN UNA PAGINA WEB ?

DENTRO DE LA PAGINA WEB.ENTRE


ETIQUETAS <script> </script>

====>en el <head>

=====>en cualquier otra parte

En archivos externos con extension js


EN ESTA CASO YO VOY USAR
EL EDITOR BASICO BLUEFISH
PERO PUEDE USAR EL QUE
MAS TE GUSTE

https://bluefish.openoffice.nl/
development.html
VAMOS A CREAR LA ESTRUCTURA HTML 5 BASICA

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin Titulo</title>
</head>

<body>
</body>
VAMOS A GUARDARLO CON EL NOMBRE
INDEX.HTML USANDO NUESTRO EDITOR
BLUEFISH
INDICA EL TIPO DE
VERSION O DOCUMENTO
HTML QUE VAMOS USAR

EL CODIGO
JAVA SCRIPT
PUEDE IR
ENTRE <HEAD>
</HEAD>
===>O PUEDE IR PUEDE IR
DENTRO DE UN DENTRO
ARCHIVO DEL BODY
EXTERNO
VAMOS A
COLOCAR EL
CODIGO
JAVASCRIPT
DENTRO DEL
HEAD
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin Titulo</title>
<script>
TODO EL
</script> CODIGO JAVA
</head> SCRIPT IRA
ENTRE ESAS 2
ETIQUETAS
<body>
</body>
</html>
AHORA VAMOS AGREGAR LA INSTRUCCION ALERT

<head>
<meta charset="utf-8">
<title>Documento sin Titulo</title>
<script>

alert("bienvenido al sistema
operativo");

</script>
</head>
TIENE QUE RESPETAR LA SINTAXIS
NO OLVIDARSE COMILLAS NI PUNTO Y COMA
===>alert(“”) ===>NOS PROPORCIONA UNA VENTANA
EMERGENTE
EN EL CASO MOZILLA FIREFOX
PROCESO DE SINTAXIS
BÁSICA :UBICACION DEL CODIGO
NUESTRO CODIGO JAVA SCRIPT ESTA EN
NUESTA ETIQUETA HTML <HEAD></HEAD>

PERO NO ES EL
UNICO LUGAR
DONDE
UBICARLO
VAMOS DESCARGAR UN ARCHIVO INTERNO LLAMADO INTERNO3
DENTRO DE ELLA VAMOS CARGAR EL ARCHIVO EJEMPLO1.html
CON BLUEFISH O EDITOR DE TU PREFERENCIA
SPAN AUMENTADO TEXTO DEL PARRAFO
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Hola usuarios de computadoras amiga</title>

<link href="css/micss.css" rel="stylesheet">

</head>

<body>

<h1>Hola usuarios de computadoras amiga</h1>

<p>Bienvenidos pagina de computadoras Amiga One de <span> AEON


Technology Ltd</span></p>

<img src="imgs/amigaone.jpg" width="35%">


</body>

</html>
BORDE
LA APARIENCIA DE LA PAGINA
HA SIDO ESTABLECIDO POR UN
CODIGO CSS ENLAZADA
AHORA VAMOS AÑADIR NUESTRO JAVA SCRIPT DENTRO
NUESTRO HEAD
<head>

<meta charset="UTF-8">

<title>Hola usuarios de computadoras amiga</title>

<link href="css/micss.css" rel="stylesheet">

<script>

</script>

</head>
DETIENEN EL FLUJO
DE EJECUCION

1.-SON VENTANAS MODAL (QUE SE ABREN EN PRIMER PLANO)


NO MANIPULAR NADA QUE HAYA SEGUNDO PLANO
SI LO ABRIMOS VEREMOS QUE LA VENTANA ES
MODAL POR QUE NO DEJA EJECUTAR NADA
AHORA VAMOS COPIAR EL CODIGO JAVA SCRIPT ALERT DESPUES
DENTRO DEL BODY
PRIMERO CARGA LO QUE ESTA DENTRO DE LA ETIQUETAS BODY Y
LUEGO EL CODIGO JAVA SCRIPT
document.write(“texto”);
PARA ESCRIBIR EL TEXTO
DENTRO DE
LA PAGINA WEB
VAMOS USAR LA INSTRUCCION:
VAMOS IR AL HEAD
SALE AL PRINCIPIO EL CODIGO JAVA SCRIPT
VAMOS A COLOCAR EL CODIGO JAVASCRIPT DENTRO H1
REEMPLAZADO EL TEXTO QUE ESTABA
NUESTRO CODIGO JAVASCRIPT PUEDE IR EN UN ARCHIVO
EXTERNO
VAMOS CREAR UN ARCHIVO EXTERNO
LO GUARDAMOS COMO PRACTICA.JS
AHORA VAMOS ENLAZAR NUESTRO ARCHIVO EXTERNO
JAVASCRIPT

<script src="practica.js"></script>
AHORA COMBINAR CODIGO EXTERNO Y CODIGO INTERNO
<head>

<meta charset="UTF-8">

<title>Hola usuarios de computadoras amiga</title>

<link href="css/micss.css" rel="stylesheet">

<script src="practica.js"></script>
<script>
alert("Adios usuarios amiga" )
ENLACE EXTERNO
</script>

</head>
ESTRUCTURAS BASICAS DE JAVA SCRIPT
VAMOS REFERENCIAR
AL TERMINO DE
SENTENCIAS
alert(“Hola usuarios de computadoras
amiga”)

Document.write(“Hola usuarios de
computadoras amiga”)
LAS SENTENCIAS
SE CONSIDERAN COMO UNIDADES BÁSICAS
DE PROGRAMACIÓN
Y TERMINAN TODAS EN PUNTO Y COMA
VIENEN CON
FUNCIONES PREDEFINIDAS EL LENGUAJE DE
TURNO

alert();
Document.write();
TIPOS DE DATOS
TRES TIPOS DE DATOS
BASICOS

-NÚMEROS

-STRINGS
“Ariana”
-BOOLEANS ‘Arina’

True ,False
VARIABLES
ESPACIO EN
LA MEMORIA DEL

MEMORA RAM(VOLATIL)

COMPUTADOR

DONDE SE ALMACENARA
UN VALOR QUE PODRA
CAMBIAR DURANTE LA
EJECUCION DEL PROGRAMA
SINTAXIS DECLARACION DE VARIABLE
EN JAVASCRIPT

var velocidad;

Nombre de la variable
REGLAS AL PROCESO DE DAR UN NOMBRE A UNA VARIABLE
*PUEDEN COMENZAR POR LETRA ,SIMBOLO $ O _

velocidad

$velocidad

_velocidad
*PUEDEN CONTENER SOLO LETRAS,NUMEROS,$ o _

Velocidad1
Velocidad$₁
SON CASE SENSITIVE(distinguen
Entre mayusculas y minusculas)
Ejemplo

Frecuencia

frecuencia

FRECUENCIA
NO SE DEBE USAR PALABRAS RESERVADAS
SE RECOMIENDA QUE SEAN DESCRIPTIVOS
VAMOS VER COMO INICIALIZAR
UNA VARIABLE
O ALMACENAR
DENTRO DE LA VARIABLE UN VALOR
PROCESO DE INICIAR UNA VARIABLE

INICIAR UNA VARIABLE

var frecuencia;
Frecuencia=0;

var frecuencia=0;
DECLARACION DE VARIAS VARIABLES EN LA MISMA LINEA

var velocidad_cpu,capacidad_disco,modelo

var velocidad_cpu=100,capacidad_disco=120,modelo=”necpc98”
ABRIREMOS NUESTRO ARCHIVO ANTERIOR INDEX.HTML
VAMOS DECLARAR VARIABLES

<head>
<meta charset="utf-8">
<title>Documento sin Titulo</title>
<script>

var modelo_pc="NEC-PC9801";
var velocidad_cpu=5;
var ram;
ram=128;

</script>
</head>
RESERVA ESPACIO

NEC-PC9801
AHORA COLOCAMOS UN ALERT PARA QUE ME
MUESTRE LA VARIABLE modelo_pc
ABRIRE Y ME EJECUTARA Y MOSTRARA EL VALOR DE
LA VARIABLE EN JAVA SCRIPT
OPERADOR
ES BÁSICOS
OPERADOR OPERACIÓN EJEMPLO

+ SUMA 5+8

- RESTA 20-16

* MULTIPLICACIÓN 5*8

/ DIVISIÓN 16/4
ELIMINAMOS TODO EL CODIGO ANTERIOR
COLOCAMOS EL SIGUIENTE CODIGO DE OPERACION
MATEMATICA alert(5+8*10);

La multiplicaciones y divisones
Siempre tiene preferencias antes
Que las sumas y restas
AHORA VOY COLOCAR PARENTESIS

<script>

alert(5+8*10);

alert((5+8)*10);

PRIMERO SE DARA LA OPERACION

</script> DE LO PARENTESIS
SALE ESTE NUEVO 130
VAMOS DESARROLLAR OTRO EJEMPLO
<script>

var precio_pc,cantidad,total;
precio_pc=799;
cantidad =100;

total=precio_pc*cantidad;

alert("El importe total de la compra de computadoras es de" +


total + "S/.")

</script>

Operador + tambien CONCATENA


ejecutamos
¿COMO INSERTAR COMENTARIOS ?
EN JAVASCRIPT

COMENTARIO DE UNA UNICA LINEA


Comentario de una linea
COMENTARIOS DE VARIAS LINEAS /* */
VAMOS HACER ALGUNOS EJERCICIOS PARA COMPROBAR
ERRORES
ME SALE 5050 POR QUE ESTA CONCATENANDO
VAMOS USAR LA FUNCION PREDIFINIDA

Number(…);
var computadores,celulares,totalproductos;
computadores="50";
celulares = 50;
totalproductos=Number(computadores) +
celulares;

alert(totalproductos) ;
AHORA ME SALDRA CORRECTAMENTE 100

También podría gustarte