Javascript Guia#1

Javascript Guía de aprendizaje
parte 1
El presente documento esta basado en el curso javascript unipython.com https://unipython.com/cursos/
aprender-javascript junto con con aportes tomados de las siguientes fuentes: MOZILLA MDN Web
Docs https://developer.mozilla.org/es/docs/Learn/JavaScript y todojs https://www.todojs.com
Las bases de la programación
Que es programar
La programación es el proceso utilizado para idear y ordenar las acciones necesarias para realizar un
proyecto, preparar ciertas máquinas o aparatos para que empiecen a funcionar en el momento y en la
forma deseados o elaborar programas para su empleo en computadoras.
Que es un lenguaje de programación

Un lenguaje de programación es un lenguaje formal (o artificial, es decir, un lenguaje con reglas
gramaticales bien definidas) que le proporciona a una persona, en este caso el programador, la
capacidad de escribir (o programar) una serie de instrucciones o secuencias de órdenes en forma de
algoritmos con el fin de controlar el comportamiento físico y/o lógico de una computadora, de manera
que se puedan obtener diversas clases de datos o ejecutar determinadas tareas.
Que es código fuente
Por código fuente se entiende todo texto legible por un ser humano y redactado en un lenguaje de
programación determinado. El objetivo del código fuente es crear normas y disposiciones claras para el
ordenador y que este sea capaz de traducirlas a su propio lenguaje. De este modo, el texto fuente es la
base de los programas y para nuestro caso de las páginas web.
Hay cientos de lenguajes de programación diferentes y no se puede decir per se que unos sean mejores
que otros, pues esto depende del contexto del proyecto y de la aplicación para la que se use el código
fuente.
Entre los lenguajes de programación más conocidos se encuentran:
• Java
•C
• C++
• Pascal
• Python
• PHP
• JavaScript
Para que los ordenadores puedan comprenderlos, estos deben traducirse al código de máquina.
Para escribir un texto fuente solo se necesita un editor de textos simple. El código fuente se guarda
como texto sin formato a partir de la extensión del nombre de archivo correcto para el lenguaje de
programación.
lenguajes compilados e interpretados

COMPILADO INTERPRETADO
Pros Contras Pros Contras
Listo para ejecutar No es multiplataforma Si es multiplataforma Requiere de un
interprete
Muy veloz No es flexible Simple de probar A menudo mas lento
Codigo fuente privado Requiere varios pasos Fácil de depurar Codigo fuente publico
para compilarse
Un lenguaje interpretado es aquel en el cual sus instrucciones o más bien el código fuente, escrito por
el programador en un lenguaje de alto nivel, es traducido por el interprete a un lenguaje entendible para
la máquina paso a paso, instrucción por instrucción. El proceso se repite cada vez que se ejecuta el
programa el código en cuestión.
Un lenguaje compilado es aquel cuyo código fuente, escrito en un lenguaje de alto nivel, es traducido
por un compilador a un archivo ejecutable entendible para la máquina en determinada plataforma. Con
ese archivo se puede ejecutar el programa cuantas veces sea necesario sin tener que repetir el proceso
por lo que el tiempo de espera entre ejecución y ejecución es ínfimo.
Que es Javascript
JavaScript es un lenguaje de programación que te permite realizar actividades complejas en una página
web — cada vez más una página web hace más cosas que sólo mostrar información estática — como
mostrar actualizaciones de contenido en el momento, interactuar con mapas, animaciones gráficas
2D/3D etc. — puedes estar seguro que JavaScript está involucrado.
Como agregar javascript a una pagina web

Existen 2 formas de agregar javascript a una pagina web : incrustado dentro del código html de la
pagina, ó mediante la inclusión o llamado a un archivo externo a la pagina web
Método 1: javascript incrustado dentro de HTML:

Introduciendo el código javascript dentro del contenido de la etiqueta <body>. Se usa el tab
<script> y
</script> para delimitar el código del programa
Ejemplo:
<script>
alert(“Hola mundo!!”);
</script>
Método 2: javascript en un archivo externo HTML:

incluye o importa un archivo con extensión js el cual contiene el programa javascript a ejecutar.
Este se enlaza mediante el tag:
<script src="script.js"></script>
donde se especifica el nombre y si es el
caso la ruta al archivo javascript correspondiente.
Hola mundo en javascript

Vamos a hacer un primer programa ensayando las 2 formas de introducir el código javascript a una
pagina web:
Hola mundo usando javascript incrustado dentro del código html de la pagina:
primero que todo vamos a crear una pagina html normal, en ella colocar el siguiente código:
<html>
<head>
<title>Primera pagina usando javascript</title>
</head>
<body>
<script>
alert(“hola mundo”);
</script>
</body>
</html>
y luego abrir la pagina con un navegador web.
Deberá ver un resultado como este:

Hola mundo usando javascript externo al código html de la pagina:
Primero creamos un nuevo archivo html y colocamos el siguiente código html:
<html>
<head>
<title>Primera pagina usando javascript</title>
</head>
<body>
<script src=”holamundo.js”>
</script>
</body>
</html>
posteriormente creamos un nuevo archivo llamado holamundo.js con el siguiente contenido:
alert(“hola mundo”);
luego con un navegador web abrinos el nuevo archivo .html creado, tendremos que obtener el mismo
resultado que en el primer ejemplo
Comentarios en javascript
Así como en HTML, es posible escribir comentarios dentro de tu código de JavaScript que serán
ignorados por el navegador, simplemente existe para proveer información sobre la función o
características de tu código.
Los comentarios son muy útiles, deberías usarlos a menudo, particularmente para grandes aplicaciones.
He aquí dos tipos:
Comentarios de una sola línea escritos después de dos barras inclinadas (//),
Ejemplo:
//este es un comentario
Comentarios de varias líneas escritos entre las cadenas /* y */, ejemplo:

/* Este es
otro comentario
de varias
lineas */
Variables y tipos de datos
Una variable es un espacio de memoria reservado para almacenar los datos que utilizaremos en la
codificación de un programa.
Por lo general en los lenguajes de programación se definen los tipos de datos diferenciándolos entre
numérico, carácter, booleano y otros.
Sin embargo, en el caso de JavaScript no es necesario hacerlo. En vista de que se trata de un lenguaje
dinámico tipo “Débilmente tipado”, podemos almacenar diferentes tipos de datos en la misma variable
sin siquiera definir su tipo, únicamente la declararemos y le aportaremos un nombre mediante la
palabra reservada ‘var’.
Ejemplo
var miNumero = 3; // La variable número almacena un dato numérico
var miTexto = "Hello, World!"; // La variable texto almacena un dato tipo carácter.
var miRespuesta = true; // La variable respuesta almacena un dato booleano
Cuando hacemos la primera mención a la variable, JavaScript lo configura automáticamente en la

memoria para poder utilizarla a lo largo del script.
Es más, es posible declarar una variable sin necesidad de utilizar la palabra clave ‘var’ ni asignarle un
valor.
variableNoDeclarada = “”; // es declarada implícitamente.
Por otra parte, no se puede utilizar una variable que no se haya declarado.
Tipos de datos en JavaScript

En JavaScript podemos usar datos de diferentes tipos:
• Numéricos: incluye números enteros o decimales (de coma flotante).
• Carácter o cadenas de caracteres: es básicamente letras o texto (permite combinar números y

letras).
• Booleanos: admite solo verdadero (true) o falso (false).
Los arrays y objetos también son tipos de datos, pero profundizaremos en ellos más adelante.
var matriz = []; // es un array o arreglo
var objeto = {}; // es un objeto
También existen dos tipos de datos especiales:

• Undefined: Es cuando usamos una variable sin proporcionarle un valor inicial, es decir sin
definirla.
• Null: El valor de una variable de este tipo es nulo, se usa cuando es necesario marcarla como
vacía. Como denominar las variables
IMPORTANTE:
 Javascript distingue entre mayúsculas y minúsculas.
Es decir que la variable miVariable será distinta a la variable MiVariable.
Es importante aportar nombres descriptivos que revelen lo que se está almacenando

Los nombres pueden tener cualquier longitud, pero la recomendación es que no sean demasiado
extenso.
Reglas para definir las variables

 El primer carácter debe ser una letra, indiferentemente de si es mayúscula o minúscula.
También puede empezar con el carácter de subrayado (_). Sin embargo, no debe utilizarse un
número como primer carácter.
 Los siguientes caracteres deben ser letras, números o carácter de subrayado.
 El nombre de una variable no puede ser una palabra reservada como, por ejemplo: var, for o
null.
Constantes
En ocasiones vamos a necesitar una variable que contenga un dato que no se modifique o varíe a lo
largo del programa.
Mediante la palabra reservada “const” nos podemos asegurar que el contenido de una variable no sea
modificado durante todo el programa.
Ejemplo:
const pi = 3.14159;
De este modo le decimos al motor de javascript que dicho dato es inalterable.
Entradas y salidas en un programa

Para efectos de poder hacer ingreso y salida de datos a nuestros primeros programas utilizaremos las
siguientes formas para capturar y mostrar datos:
Entrada de datos:
Inicialmente la vamos a realizar mediante el uso de una ventana promp la cual presenta una caja de
texto para capturar la información solicitada. Dicha información deberemos almacenarla dentro de una
variable para su posterior uso.
Ejemplo: Pedir la edad del visitante
var edad = prompt(“ingrese su edad”);
Para hacer una salida de datos vamos a utilizar 2 métodos:
Usando una ventana alert:

alert(“Este es el mensaje a mostrar”);
o mediante salida de depuración a consola:

console.log(“Este es un mensaje en consola”);
Ejercicio1:
Mediante una ventana prompt solicite al visitante que ingrese 2 números, posteriormente presente la
suma de dichos números en consola.
Ejercicio 2:
Mediante una ventana prompt solicite el nombre del visitante y su fecha de nacimiento, posteriormente
en la consola muestre los datos capturados
Operadores
Tanto en JavaScript como en otros lenguajes de programación usamos una serie de símbolos para
realizar diversos tipos de operaciones.
Dichos símbolos son los que conocemos como operadores y los operandos son constantes determinadas
o variables que se convierten automáticamente a fin de generar un resultado.
Operadores de asignación
Símbolo básico: signo de igual ( = )
Es aquel que usamos para asignarle un valor al operando del lado izquierdo.
Ejemplo:
X=Y
El valor de ‘Y’ se le ha asignado al operando ‘X’

var n1 = 6;
var n2 = 7;
Operadores de comparación
Símbolos más comunes: ==, ¡=, <, >, >=, <=
Sirven para comparar dos operandos según el símbolo utilizado. Cuando la comparación es
verdadera el valor que arrojará como resultado será ‘true’, de lo contrario será ‘false’.
Puede ser usado indiferentemente del tipo de dato que contengan los operandos, pues de haber
dos operandos de diferente tipo JavaScript los transforma de manera que pueda hacerse posible
la comparación.
Ejemplos:
var n1=9;
var n2=15;
console.log(n1==n2); // ¿n1 es igual a n2? – Resultado: false
console.log(n1!=n2); // ¿n1 es diferente a n2? – Resultado: true
//También podemos asignar el resultado a una variable

Respuesta = (n1 <= n2); // ¿n1 es mayor o igual a n2?
Operadores aritméticos
Símbolos más usados: suma (+), resta (-), multiplicación (*) división (/), resto de una división
(%), incremento (++), decremento (–) y potencia (**)
Nos permiten aplicar la aritmética en función a los operandos que utilicemos.
Ejemplo:
Suma = 5+5; // 10
Resta = 8-4; // 4
Producto = 9*9; // 81
División = 5/5; // 1
Resto = 8/3; // 2
Potencia = 5**2; // cinco elevado al cuadrado es 25
También podemos combinar los operadores aritméticos con el operador de asignación, para
realizar la operación de forma abreviada
var n1 = 6;
var n2 = 2;
n1 += n2; // 8
+= Es la abreviación de n1 = n1 + n2n1 -= n2; // 4
n1 *= n2; // 12
n1 /= n2; // 3
n1 %= n2; // 0
n1 **= n2; // 36
console.log(n1);
Sin embargo, procedemos a continuación, a explicar los operadores de incremento y decremento

pues para muchos es un operador totalmente desconocido.
• Incremento (++): Este operador unario resulta conveniente cuando deseamos añadirle
una unidad de valor al operando que estemos utilizando.
Ejemplo:
Cantidad = 5
console.log(++Cantidad);
// Devolverá el valor después de incrementarlo (6)
console.log(Cantidad++);
// Devolverá el valor antes de incrementarlo (5)
• Decremento (–): Es el opuesto del anterior, resta una unidad al operando.
Ejemplo:
Cantidad = 5
console.log(--Cantidad);
// Devolverá el valor después de disminuirlo (4)
console.log(Cantidad--);
// Devolverá el valor antes de disminuirlo (5)
Siempre incrementará o decrementará una unidad. Este operador por lo general lo
usamos como contador dentro de las estructuras repetitivas que analizaremos más
adelante.
Operadores de concatenación
Símbolo: más (+)
Concatenar significa unir o enlazar y es justo lo que hace este operador, unir dos operandos de
tipo string, trayendo como resultado una cadena de caracteres compuesta por los valores
utilizados.
Ejemplo:
console.log("mi " + "cadena");
// Muestra en pantalla la frase "mi cadena"
var palabra1 = "Hola ";
var palabra2 = "Mundo";
console.log(palabra1 + palabra2);
// Muestra en pantalla la frase "Hola Mundo"
Operador condicional (ternario)

Es el único operador que precisa de tres operandos: la condición y los dos valores en espera de
ser asignados según corresponda.
La sintaxis es la siguiente:
condición ? valor1 : valor2
Es muy simple. Lo que sugiere la sintaxis es que si la condición se cumple, el operador tomará
el valor 1, si no tomará el valor 2.
Por ejemplo:
var nota = 15;
console.log((nota <= 10)? "aprobado" : "reprobado");
Si la nota es mayor o igual a 10 imprimirá la palabra “aprobado” en caso contrario

imprimirá la palabra “reprobado”.
var edad = 20;

etapa = (edad < 18) ? "Menor de edad" : "Mayor de edad";
console.log(etapa);
Si la edad es menor a 18 se mostrará en pantalla la frase “Menor de edad”, si no es así,
se mostrará “Mayor de edad”.
Ejercicio
Crea un programa que solicite 5 notas, calcule el promedio y muestre en consola si aprobó o no.
Prueba de escritorio:
La prueba de escritorio no es más que efectuar un proceso de simulación con el algoritmo desarrollado
(ver que haría la computadora). Este trabajo se realiza en base a una tabla cuyos encabezados son las
variables que se usan en el algoritmo y debajo de cada una de ellas se van colocando los valores que
van tomando, paso a paso y siguiendo el flujo indicado por el algoritmo, hasta llegar al final.
Por ejemplo para la siguiente porción de código hacer la prueba de escritorio correspondiente
var edad = 20;

var largo = 10;
var ancho = 20;
var alto = 10;
var medida ; // como no se ha especificado un valor inicial, la variable toma el valor undefined
etapa = (edad < 18) ? "Menor de edad" : "Mayor de edad";
console.log(etapa);
medida = largo * ancho;
console.log(“Medida en 2d :” + medida);
medida = medida * alto;
console.log(“Medida en 2d :” + medida);
ancho = ancho/2;
La prueba consiste en crear una tabla con una cantidad de columnas igual al numero de variables a
analizar en este caso 6 variables, a medida que va cambiando el valor de las variables, se va
actualizando el valor de las mismas dentro de la tabla.
Glosario
Programación:
Es el proceso que se lleva a cabo durante el desarrollo de programas y aplicaciones. Dicha tarea
implica desde la escritura de código fuente hasta la compilación del mismo.
Código fuente:
Se refiere a las líneas de textos que expresan las instrucciones que deberá seguir la computadora
para ejecutar el programa.
Compilador:
Básicamente se trata de un programa encargado de traducir al lenguaje máquina, el código
escrito en lenguaje de programación. Su utilización es imprescindible para que el ordenador
pueda comprender las instrucciones y así ejecutarlas.
Lenguaje Máquina:
El lenguaje máquina, también conocido como lenguaje de bajo nivel, es aquel que puede
entender el microprocesador del dispositivo donde será instalado y ejecutado el programa.
Lenguaje de programación:
Es el lenguaje utilizado para realizar el código fuente de todo programa.
Existen dos tipos principales: el lenguaje de bajo nivel o lenguaje máquina y el lenguaje de alto
nivel que se asemeja bastante al lenguaje humano, como por ejemplo lenguaje C y Java.
POO:
La programación orientada a objetos, conocida comúnmente por sus siglas POO, es un
paradigma o técnica que consiste en escribir código de una manera mucho más ordenada.
Cabe resaltar que este tipo de programación facilita el desarrollo y mantenimiento de programas
y aplicaciones. Algunos de los lenguajes orientados a objetos son PHP, Python, Java, C y C++.
Lenguaje interpretado:
Es un lenguaje que no necesita compilación para ser ejecutada; pues se componen de scripts
interpretados en tiempo real mediante un intérprete; en otras palabras, es capaz de funcionar en
un ordenador sin necesidad de traducir el código.
Algunos de los principales lenguajes de este tipo son: Java, Perl, Python, Ruby, ASP, Bash,
entre otros.
Intérprete o interpretador:
Es un software que lee y ejecuta los programas escritos en lenguaje de alto nivel. A diferencia
de los compiladores, estos interpretan el código en la medida que se hace necesario sin guardar
los resultados.
Desarrollo web:
Se trata del proceso que conlleva la creación y mantenimiento de páginas web. Por lo general,
en el
desarrollo de una web, trabaja un equipo de profesionales encargados de proveer al sitio una
apariencia
agradable e intuitiva, un funcionamiento rápido y buen rendimiento; todo con el fin de
garantizar una
excelente experiencia al usuario.
Página web:
Una página web es un archivo electrónico que integra información en diferentes formatos
(texto, imágenes, audio y vídeo). El objetivo principal de una página web es comunicar o
entretener a los internautas que la visitan.
HTML:
Lenguaje utilizado para desarrollar páginas web. Se compone de etiquetas y con ellas es posible
darle
forma a la web; por ejemplo, dispone de etiquetas para insertar imagenes, saltos de línea, tablas,
hipervínculos, etc.
Modelo Cliente/Servidor:
Un Servidor es un ordenador o conjunto de ordenadores que ofrece algún tipo de servicio a los
usuarios. Por otra parte, el ordenador o dispositivo del usuario final, es lo que llamamos cliente,
pues reciben el servicio suministrado. El modelo cliente/servidor es sencillamente una relación
de oferta y demanda cuyo producto está relacionado a páginas web informativas que son
interpretadas en el lado cliente.
Multiplataforma:
Se denomina multiplataforma a toda aplicación o programa que puede ser utilizado en distintos
entornos o sistemas operativos.
Librería:
Las librerías también conocidas como frameworks, son aquellos archivos o conjunto de
archivos que contienen trozos de código reutilizable haciendo más fácil el proceso de
programar.
Script:
Colección de órdenes o instrucciones escritas en un archivo de texto. Para su ejecución se hace
necesario el uso de un programa lector o interprete que ejecuta y procesa la información por
lotes o línea por línea.
Variable:
Es un espacio de memoria reservado para almacenar datos. Este se identifica con una etiqueta o
un nombre establecido por el programador y al cual, se le asigna un valor que puede cambiar
durante la ejecución del programa.
Constante:
Es un valor que se declara al inicio del programa y a diferencia de la variable no se altera ni se
modifica durante la ejecución del programa.

Javascript Guia#1

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Javascript Guia#1

Cargado por

Copyright:

Formatos disponibles

Javascript Guía de aprendizaje

Las bases de la programación

Que es un lenguaje de programación

Que es código fuente

lenguajes compilados e interpretados

Como agregar javascript a una pagina web

Método 1: javascript incrustado dentro de HTML:

Método 2: javascript en un archivo externo HTML:

Hola mundo en javascript

y luego abrir la pagina con un navegador web.

Deberá ver un resultado como este:

Primero creamos un nuevo archivo html y colocamos el siguiente código html:

posteriormente creamos un nuevo archivo llamado holamundo.js con el siguiente contenido:

Comentarios de varias líneas escritos entre las cadenas /* y */, ejemplo:

var miNumero = 3; // La variable número almacena un dato numérico

var miRespuesta = true; // La variable respuesta almacena un dato booleano

Cuando hacemos la primera mención a la variable, JavaScript lo configura automáticamente en la

Tipos de datos en JavaScript

• Numéricos: incluye números enteros o decimales (de coma flotante).

• Carácter o cadenas de caracteres: es básicamente letras o texto (permite combinar números y

• Booleanos: admite solo verdadero (true) o falso (false).

var matriz = []; // es un array o arreglo

var objeto = {}; // es un objeto

También existen dos tipos de datos especiales:

Es importante aportar nombres descriptivos que revelen lo que se está almacenando

Reglas para definir las variables

De este modo le decimos al motor de javascript que dicho dato es inalterable.

Entradas y salidas en un programa

Ejemplo: Pedir la edad del visitante

var edad = prompt(“ingrese su edad”);

Para hacer una salida de datos vamos a utilizar 2 métodos:

Usando una ventana alert:

o mediante salida de depuración a consola:

El valor de ‘Y’ se le ha asignado al operando ‘X’

console.log(n1==n2); // ¿n1 es igual a n2? – Resultado: false

console.log(n1!=n2); // ¿n1 es diferente a n2? – Resultado: true

//También podemos asignar el resultado a una variable

Nos permiten aplicar la aritmética en función a los operandos que utilicemos.

Sin embargo, procedemos a continuación, a explicar los operadores de incremento y decremento

• Decremento (–): Es el opuesto del anterior, resta una unidad al operando.

var palabra1 = "Hola ";

var palabra2 = "Mundo";

Operador condicional (ternario)

console.log((nota <= 10)? "aprobado" : "reprobado");

Si la nota es mayor o igual a 10 imprimirá la palabra “aprobado” en caso contrario

var edad = 20;

var edad = 20;

También podría gustarte