Scribd
Cargar
169 vistas

Manual Del Curso de JavaScript

Este documento presenta una introducción a los conceptos básicos de JavaScript como variables, tipos de datos, operadores aritméticos, operadores de asignación, operadores de comparación y más. Explica cómo declarar variables, los diferentes tipos de datos como números, cadenas y booleanos, y cómo usar varios operadores para realizar cálculos matemáticos y comparaciones. También muestra ejemplos de cómo agregar JavaScript a páginas web de diferentes maneras como dentro de etiquetas <script> o en archivos externos, y cómo usar comentarios.

Cargado por

Jesus Lopez
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 DOCX, PDF, TXT o lee en línea desde Scribd
169 vistas

Manual Del Curso de JavaScript

Este documento presenta una introducción a los conceptos básicos de JavaScript como variables, tipos de datos, operadores aritméticos, operadores de asignación, operadores de comparación y más. Explica cómo declarar variables, los diferentes tipos de datos como números, cadenas y booleanos, y cómo usar varios operadores para realizar cálculos matemáticos y comparaciones. También muestra ejemplos de cómo agregar JavaScript a páginas web de diferentes maneras como dentro de etiquetas <script> o en archivos externos, y cómo usar comentarios.

Cargado por

Jesus Lopez
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 DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 13

Tema 1

Fundamentos
 Introducción a JAVASCRIPT
 Creando tu primer JavaScript
 Añadiendo JavaScript a tu página WEB
 JavaScript externo
 Comentarios en Java
Que es JavaScript
JavaScript es uno de los lenguajes de programación más populares en el mundo y es
utilizado para AÑADIR INTERACTIVIDAD a páginas WEB, procesar datos, así como
para crear distintos tipos de aplicaciones (dispositivos móviles, aplicaciones de
escritorio, juegos, etc.).
Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no
es necesario compilar los programas para ejecutarlos. En otras palabras, los programas
escritos con JavaScript se pueden probar directamente en cualquier navegador sin
necesidad de procesos intermedios.
A pesar de su nombre, JavaScript no guarda ninguna relación directa con el lenguaje de programación Java.
Legalmente, JavaScript es una marca registrada de la empresa Sun Microsystems, como se puede ver en
http://www.sun.com/suntrademarks/.
Consejo: Aprender lo medular del lenguaje te permitirá crear el programa que desees, ya sea del lado del cliente
o del lado del servidor.

Tu primer JavaScript
Para iniciar el conocimiento del tema vamos a ver las formas de añadir JavaScript a una página o sitio web.
El código JavaScript en la web se encuentra dentro del documento HTML y debe ser insertado entre las etiquetas
<script> y </script>
Sintaxis
<script>
Sentencias o instrucciones;
</script>
Los <script> de Javascript pueden ser colocados dentro de la etiquetas de <body> o <head> según sea la
necesidad y gusto del usuario además de que pueden ir 2 o más scripts en la página.
Ejercicio 1
1. Abre el programa de DREAMWEAVER
2. Crea un sitio de la siguiente manera:
a. Clic en el menú SITIO / clic en el comando NUEVO SITIO
b. En el cuadro de dialogo en el nombre del sitio escribe: sitiojavascript 2018
c. En la caja de texto de carpeta del sitio local: da clic en la herramienta de EXAMINAR cámbiate
a tu memoria USB crea una carpeta llamada sitiojavascript2018 y entra a ella y da clic en el botón
SELECCIONAR
En la siguiente imagen se muestra como quedara la opciones en el cuadro de dialogo
3. En el panel de archivos en la carpeta del sitio da clic derecho y selecciona NUEVO ARCHIVO escribe el
nombre de ejemplo1.html cámbiate a la vista de CODIGO borra el contenido y escribe el siguiente
ejemplo:

4. En el ejemplo, se ha colocado el <script> dentro de la etiqueta <body> guarda los cambios (CTRL S)
Utilizando a JavaScript para una entrada y salida básica
Las tareas habituales de un sistema informático es dar entrada y salida a los datos para realizar dicho proceso se
JavaScript dispone de 2 funciones las cuales describimos a continuación:
alert: es utilizado para desplegar cuadros de alerta en pantalla los cuales tiene la característica de detener la
carga de la página hasta que este cuadro no sea aceptado.
Sintaxis:
alert(‘mesaje’ o variable o ambos);
prompt: se utiliza para hacer la desplegar un cuadro de mensaje el cual hace la solicitud de un dato y su vez
permite almacenarlo en una variable para darle un uso posterior. Es importante mencionar que el dato que se
almacena es de tipo texto o cadena y será tratado como tal aunque se escriba un número.
Sintaxis:
variable=prompt(‘mensaje’);
Practica 1
Elabora una página que despliegue una caja de alerta que diga “Hola Mundo” y después de aceptarla te pregunte
tu nombre en el navegador.
1. En el panel de archivos en la carpeta del sitio da clic derecho y selecciona NUEVO ARCHIVO escribe el
nombre de practica1.html copia el código de ejemplo1.html y en dentro de las etiquetas <script>
agregar las funciones alert y promt como se muestra en la imagen

Guarda los cambios (CTRL-S) y realiza una vista previa desde el navegador de Internet Explorer notaras que te
mandara una advertencia de seguridad y esto se debe que a que javascript también puede ser utilizado para
crear script malignos o nocivos de ahí la advertencia en la cual deberás dar clic en el botón PERMITIR CONTENIDO
BLOQUEDA

Después de realizado esto el navegador te mostrara el mensaje creado con el script

La función o instrucción document.write escribe una cadena de texto dentro de un documento HTML. Esta
función puede ser usada para escribir solo texto, HTML o ambos.
Consejo: el método document.write() debe ser solo usado para pruebas. Otros mecanismos de salida son más
apropiados para dar salida a los datos, pero se verán mas adelante.
Formateando texto
Al igual que en html o css, podemos usar etiquetas para formatear el texto en JavaScript. Por ejemplo, que el
texto sea un encabezado y este alineado al centro
En tu proyecto de javascript crea un nuevo documento llamado segundo.html, borra su contenido, copia el
contenido de fundamentos.html y agrega el siguiente código en el área de <script>

Guarda los cambios y realiza una vista previa y te mostrara el siguiente resultado

AÑIDIENDO JAVASCRIPT A UNA PAGINA WEB


JavaScript en la sección de <head>
Puedes colocar cualquier cantidad de “script” (secuencias de comandos) en un documento HTML, normalmente
la etiqueta <script> es colocada en la sección de “head” del documento HTML.
En tu proyecto javascript crea un nuevo archivo llamado fundamentos2.html y cámbiate a la vista de código,
borra su contenido, copia el contenido del archivo fundamentos1.html y realiza los cambios correspondientes
para que se muestre como el siguiente ejemplo:

La etiqueta <script> puede incluir dos atributos, “language” y “type” que especifican el tipo de script y se
agregarían de la siguiente forma:

Consejo: actualmente el atributo “language” esta depreciado, y no debería ser utilizado y el atributo “type”
tampoco es requerido, ya que JavaScript es el lenguaje para escribir script en HTML por defecto y se mencionan
solo por si alguna vez te encuentras con esto atributos en alguna página los puedes borrar con toda confianza ya
que no aplican en navegadores modernos.
En tu proyecto javascript crea un nuevo archivo con el nombre de tercero.html abre el archivo, borra su código
y copia el contenido de fundamentos2 y dentro del script agrega la función alert como se ve en el ejemplo

Guarda los cambias de tu página y realiza una vista previa en el navegador y se mostrar una caja con texto

JAVASCRIPT EXTERNO
El código JavaScript también se puede colocar en archivos externos los cuales son muy útiles y practicos
cuando el mismo código es muy utilizado en una variedad diferentes de páginas web.
Los archivos de JavaScript tienen la extensión .js
Para establecer la conexión entre la pagina HTML y el archivo externo de JavaScript es necesario agregar un
atributo llamado src(source)en la etiqueta script en la cual se debe especificar el nombre del recurso externo.
En tu proyecto javascript crea un nuevo archivo con el nombre de cuarto.html abre el archivo, borra su código y
copia el contenido de fundamentos2 y dentro del script agrega el atributo src como lo muestra el ejemplo:

Guarda los cambios de tu archivo y crea un nuevo archivo que se llame demo.js ábrelo y agrega el siguiente
código:

Guarda los cambios, regresa al archivo de cuarto.html y visualiza una vista previa del navegador con el
siguiente resultado

Si fuiste observador notaste que el texto del cuerpo no se muestra hasta des clic en el boton ACEPTAR
Consejos: Los scripts externos no pueden contener la etiqueta <script>. Colocar el código en un archivo externo
tiene las siguientes ventajas:
Separar el HTML y el código de programación.
Hace más fácil la lectura del código HTML y JavaScript así como su mantenimiento.
Los archivos JavaScript en cache pueden acelerar la carga de las páginas.
COMENTARIOS EN JAVASCRIPT
No todas las declaraciones JavaScript son “ejecutadas”. El código después de barras inclinadas dobles en un
renlgon o varias líneas encerradas entre /* y */ es tratado como un comentario. Los comentarios son ignorados
por el lenguaje de programación y no son ejecutados.
Los comentarios de una línea inician con // y no se cierran en cuanto se cambia de reglon deja de ser un
comentario
Los comentarios multilinea inician con /* se pueden escribir los reglones que se deseen y solo terminara con
los caracteres */
En tu proyecto javascript cámbiate o abre el archivo de primero.html y agrega el siguiente comentario como se
ve en la imagen

Los comentarios se muestran de color gris en el editor de Dreamweaver


Guarda los cambios de tu archivo y da una vista previa en el navegador veras que el comentario es ignorado y
por lo tanto no es visible en el navegador
Cámbiate al archivo de segundo.html y agrega un comentario de línea abajo que la etiqueta <body> que diga
“document.write acepta etiquetas HTML”, guarda los cambios y da una vista previa
Cámbiate al archivo tercero.html y agrega el comentario multilinea como lo muestra la imagen

Guarda los cambios del archivo, y da una vista previa en el navegador


Abre o cámbiate al archivo cuarto.html y agrega un comentario multilinea arriba de la etiqueta <script> que
diga en 3 reglones “Esta es la forma de llamar un archivo externo de JavaScript”
Guarda los cambios y da una vista previa en la cual es navegador te mostrara el numero 10 que se asigno la
variable
Utilizar variable es útil de muchas formas, ya que puedes tener 1000 de líneas de código que pueden incluir a la
variable x. cuando cambies el valor de x una vez, automáticamente cambiara en todas las partes que las hayas
usado.
Consejo: Cada “instrucción” escrita es llamada una declaración. Las declaraciones en JavaScript son separadas
por punto y coma (;)

Tema 2
CONCEPTOS BASICOS
 Variable
 Tipos de datos
 Operadores aritméticos
 Operadores de asignación
 Operadores de comparación
 Operadores lógicos o booleanos
 Operadores de cadenas de texto
Variables
Las variables son contenedores para registrar datos. El valor de una variable puede cambiar a lo largo de un
programa
Para declarar una variable en JavaScript se utiliza la palabra var y a continuación el nombre de la variable y la
asignacion de su valor
Sintaxis
Var variable=valor;
Ejemplo
Var x=10;
En el ejemplo anterior, a la variable x le es asignado el valor 10
Consejo: JavaScript es sensible a mayúsculas y minúsculas por ejemplo la variable ApellidoPaterno es diferente
a la variable apellidopaterno
El signo de igualdad
En JavaScript, el signo de igualdad(=) es llamado operador de “ASIGNACION”, a diferencia de un operador “IGUAL
QUE”
Por ejemplo
x=y
Se estaría asignado el valor de y a la variable x
Consejo: Una variable puede ser declarada sin un valor, el valor puede requerir algún calculo, algo que será
provisto luego, como una entrada de usuario. Una variable declarada sin valor tendrá un valor “undefine” (no
definido).
Utilizando variables
En tu proyecto de Javascript crea un nuevo archivo llamado quinto.html borra su contenido y copia la información
de fundamentos2.html y vamos a crear un código Javascript dentro de la sección de head que nos permita declara
una variable llamada x a la cual se la asignara el valor del 10 y vamos imprimir el contenido de la variable en el
documento html.

El script lleva 2 comentarios que explica que se está realizando y la instrucciones de var y document.write
Guarda los cambios de tu archivo y da una vista previa
Nombrando variables
Como ya lo habíamos menciona anteriormente en un consejo JavaScript en su manejo de variables es sensible a
muyusculas y minúscula y para comprobarlo vamos hacer lo siguiente:
Cambiarte a tu archivo quinto.html declara una nueva variable llamada y asígnale el valor 25 y haz que se
muestre el contenido en el navegar pero escribe la variable Y en mayúsculas como se muestra en la imagen

Da una vista previa en el navegador y solo se visualizara el contenido de la variable x que es la que coincide la Y
no se muestra porque está en la declaración con minúscula y en la impresión con MAYUSCULA siendo 2 variables
diferentes

Reglas para los nombres de variables


El primer carácter debe ser una letra, un guion bajo( _ ), o un signo de dólar ($). Los caracteres siguientes
pueden ser letras, digitos, guiones bajos o el signo de dólar
Los numero no son permitidos como 1er carácter
Los nombres de las variables no pueden incluir algún operador matemático o lógico en el nombre
Los nombres no deben contener espacios en blanco
No se debe utilizar algún simbolo especial como numeración (#), porcentaje (%) etc.
No utilizar una palabra reservada por el lenguaje como por ejemplo var, If, switch, etc.
Tipos de datos
El termino tipo de datos se refiere a los tipos de valores con los cuales un programa puede trabajar. Las
variables en JavaScript pueden guardar muchos tipos de dato, tales como números, cadenas de texto, arreglos
y muchos Mas
A diferencia de muchos otros lenguajes de programación, JavaScript no define tipos de datos diferentes en los
números, como enteros cortos “short” enteros largos “long”, punto flotante “doublé”, etc. Por lo tanto los
números pueden ser escritos con o sin decimales
Regresa a tu archivo de cinco.html, declara una variable con el nombre de edad y asígnale la edad que tienes
actualmente
Cuestionario de evaluación para fundamentos
Selecciona respuesta correcta
Puedes utilizar a JavaScript JavaScript es utilizado solo JavaScript es solo para
para crear elementos web para páginas Web programación del lado del
interactivos servidor
Que etiqueta contiene el código JavaScript
Code Script Body Style
Completa el siguiente código para desplegar el texto “mama ya se programar” en el navegador
<script>
Document.__________(“mama ya se programar”);
<______>
Que elementos puede ser añadidos dentro del texto a deplegarse por medio de JavaScript
Comandos de Javascript Carpetas Etiquetas de formateo
Donde se coloca normalmente la etiqueta “script”
Antes de la etiqueta HTML Después de la etiqueta HTML Dentro de la etiqueta HEAD
de cierre
Que extensión es utilizada para los archivos de JavaScript
.css .js .html
Que atributo de la etiqueta script es utilizado para incluir el archivo externo de Javascript
Src Language Type
Completa el siguiente código para incluir el archivo externo ejemplo.js en la web
<_________ ____=”ejemplo.js”></script>
Completa el siguiente código para crear un comentario multi-linea
____ Este es un
Cometario
Multilinea ___
Escribe una X en los 3 principales lenguajes para el desarrollo de una página WEB

 css  JavaScript  C++  HTML


Completa el siguiente código para incluir el archivo code.js en tu página WEB
<script _____= _________></script>
Caracteres utilizados para comentarios de una solo línea
______
Cuestionario de evaluación para conceptos básicos
Que palabra clave es utilizada para indicarle a JavaScript que vamos a trabajar con una variable
Var Int Variable Vrb
Como es llamado el “=” (signo de igualdad) en JavaScript
Igual que Es equivalente Operador de asignación
Completa el siguiente código para declarar una variable
_______ mi_variable=32;
Marca con una X los caracteres que pueden ser utilizados para comenzar el nombre de una variable

 Guian bajo  Operadores matemáticos  Letras  numeros


Que caracteres no puede ser usados en los nombres de las variables
Símbolos especiales Signo de guion bajo Números Letras
Completa el siguiente código para declarar la variable edad y asignarle el numero 18
_______ edad=______;

También podría gustarte