Scribd
Cargar
13 vistas22 páginas

Javascript 1

Cargado por

martin.villalba2197
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
13 vistas22 páginas

Javascript 1

Cargado por

martin.villalba2197
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/ 22

Javascript

Parte 1
¿Qué es JavaScript?
JavaScript es un lenguaje de programación, o lo que es lo mismo, un mecanismo con el
que podemos decirle a nuestro navegador qué tareas debe realizar, en qué orden y
cuántas veces, por ejemplo. Con JS vamos a agregarle comportamiento a nuestro sitio y
lograr que el usuario interactúe con él..
Programar no es más que decirle a una máquina que cosas debe hacer y cómo
debe hacerlas. Eso significa que no podemos pasar por alto nada.
Más info: https://lenguajejs.com/javascript/introduccion/que-es-javascript/

ECMAScript
ECMAScript es el estándar que a partir del año 2015 a la actualidad se encarga de regir
como debe ser interpretado y funcionar el lenguaje JavaScript, siendo este (JS –
JavaScript) interpretado y procesado por multitud de plataformas, entre las que se
encuentran los navegadores web.

Más info: https://openwebinars.net/blog/que-es-ecmascript/


Versiones de ECMAScript
A lo largo de los años, Javascript ha ido sufriendo modificaciones que los navegadores
han ido implementando para acomodarse a la última versión de ECMAScript cuanto
antes. La lista de versiones de ECMAScript aparecidas hasta el momento son las
siguientes, donde encontramos las versiones enmarcadas en lo que podemos considerar
el pasado de Javascript:
Comenzando con JavaScript
Una forma sería agregar la etiqueta <script> en la etiqueta <head>, utilizando
una referencia interna.
<html>
<head>
<title>Titulo de la pagina</title>
<script>
console.log("Hola!!!")
</script> Desde la consola del navegador podremos
</head> ver que se escribe el texto “Hola!!!”, esto
<body> se logra a través de la instrucción
console.log()
<p>Ejemplo de texto.</p>
</body>
</html>
La ubicación de la etiqueta Script
De acuerdo a donde esté ubicada la etiqueta <script> la página web tomará
diferentes estados:

• En <head>: Se descargará el archivo JavaScript antes


de empezar a dibujar la página (cuando la página está
en blanco).

• En <body>: Se descargará el archivo JavaScript durante


el dibujado de la página (cuando la página se haya <script>

dibujada hasta el <script>).

• Antes de </body>: Se descargará el archivo JavaScript


después de dibujar la página (cuando la página se haya
dibujado en su totalidad).
La consola de JavaScript
El clásico primer ejemplo cuando se comienza a programar es crear un programa que
muestre por pantalla un texto, generalmente el texto «Hola Mundo». También
podemos hacer operaciones numéricas:

console.log("Hola Mundo"); JS
console.log(2 + 2);

La consola posee otras


funciones…
La consola de JavaScript
Para acceder a la consola Javascript del navegador, podemos pulsar CTRL+SHIFT+I
sobre la pestaña de la página web en cuestión, lo que nos llevará al Inspector de
elementos del navegador, que es un panel de control general donde podemos ver varios
aspectos de la página en la que nos encontramos: su etiquetado HTML, sus estilos CSS,
etc...
Nos moveremos a la pestaña Console y ya nos encontraremos en la consola Javascript de
la página.
También se puede utilizar directamente el atajo de teclado CTRL+SHIFT+J, que en
algunos navegadores nos lleva directamente a la consola.
Mostrando datos…
Podemos mostrar texto, valores numéricos, etc. separados por comas…
console.log("¡Hola a todos! Observen este número: ", 5 + 18); JS

En esta consola, podemos escribir funciones o sentencias de Javascript que estarán actuando en
la página que se encuentra en la pestaña actual del navegador. De esta forma podremos
observar los resultados que nos devuelve en la consola al realizar diferentes acciones.
Uso de document.write()
Con document.write() podemos trabajar directamente dentro del propio documento HTML:

document.write("Hola mundo en el documento HTML"); JS

En este caso lo que hacemos es imprimir en el body (que en el


HTML no tiene nada) un determinado texto. Esto sucede porque el
documento HTML está vinculado a través de un script con el archivo
de JS que está en una determinada ubicación. Al documento HTML
que está invocando le dice que escriba (write) un determinado
texto en el body.

De esta manera ya no tendremos una estructura tan estática, sino que ya la voy a poder
“controlar un poco más” desde JS. En este caso estoy controlando el contenido que estoy
mostrando y ya no es un texto fijo que tengo que ir al HTML a modificarlo, sino que podría
ser modificado desde el código de JS.
Incorporando un archivo externo
Al igual que con CSS, donde teníamos un archivo externo de extensión .css que
vinculábamos con nuestro documento HTML en JavaScript podemos hacer lo mismo,
vinculando el archivo con extensión .js al documento dentro de la etiqueta <script>, sólo
que en este caso, haremos referencia al archivo Javascript con un atributo src (source):

<html> HTML
<head>
<title>Título de la página</title>
<script src="index.js"></script>
</head>
<body> Este tipo de archivos se suelen
incorporar en una carpeta llamada
<p>Ejemplo de texto.</p> “js” con archivos de extensión .js
</body> para indicar que son archivos de
</html> JavaScript.

console.log("Bienvenidos"); JS
Más adelante veremos que la etiqueta <script> se suele colocar justo antes de la etiqueta
de cierre </body>.
Comentarios
Los comentarios son utilizados por los programadores para anotaciones, no son tenidos
en cuenta por el navegador.

Comentarios de // esto es un comentario de línea


línea
Comentarios de /*
bloque esto es un comentario de bloque (multilínea)
*/

Al no ser tenidos en cuenta por el navegador, son un buen recurso cuando queremos omitir
la ejecución de ciertas instrucciones.

Para colocar/quitar comentarios en VSC podemos utilizar el atajo CTRL + k + c


Cuando escribamos comentarios no debemos escribir qué hacemos, sino por qué
lo hacemos.
¿Qué ventajas tiene trabajar sobre JS?
• Trabajamos sobre el cliente, no vamos al servidor, sino que estas instrucciones corren en
el navegador del cliente, del usuario, en este caso Chrome. Yo no le estoy diciendo desde
un servidor que la página Web consulta “mostrale por pantalla tal texto”, que también se
puede hacer.

• De esta manera me ahorro el tiempo que tarda en viajar la información, hacer la


solicitud al servidor, el servidor responderle y volver a la PC del cliente a través de
distintos dispositivos de conexión.

• Si quisiera validar los datos de un formulario de una aplicación, por ejemplo un mail
(debe tener un @, después del @ debe tener al menos un punto, tendría que tener
alguna extensión, con dos o tres caracteres o ahora cuatro si es .info) ya no hace falta
que vaya a la base de datos, al servidor para chequearlo, sino que lo puedo hacer
directamente desde el navegador del cliente ahorrándome todos estos tiempos de
respuesta y los recursos del servidor

Cada vez le pedimos más al navegador para ahorrar recursos del servidor y que tenga un tiempo de
respuesta más rápido, pero cada vez dependemos más que el cliente tenga una mejor conexión, un mejor
procesador, un navegador actualizados, etc.
Variables
• Es el nombre genérico que se le da a pequeños espacios de memoria donde se guarda
una dato determinado, de forma muy similar a las incógnitas en matemáticas.
• Un programa puede tener muchas variables, y cada una de ellas tendrá un nombre que
la identifique, un valor y un tipo de dato.
• El nombre se utiliza para diferenciarlas unas de otras y hacer referencia a ellas, el valor
es la información que contienen y el tipo de dato es la naturaleza de ese valor.
• Se llaman variables porque podemos cambiarle su valor a lo largo del programa,
según necesitemos.
• La idea del uso de una variable es que se puede reutilizarla varias veces a lo largo
del programa.

Imaginemos a la variable como una “cajita” dentro de nuestro programa,


que tiene tres características:
- Su nombre: Debe ser representativo de la información que contiene
Var - El tipo de datos: Podrá ser número, texto, valores booleanos, etc.
(5) - Su contenido: Asociado al tipo de datos

En nuestro caso la variable Var tiene un tipo de dato numérico de valor


5.
Variables
• Los nombres de las variables son para distinguir una de otras, pero además deben
tener un valor asociado ya que, si yo nombro variables a, b, c solas no tenemos idea
de qué representan.
• Hay caracteres como el guion medio que no se suele utilizar, tampoco el % ni el ?. El
signo
$ se reserva para algunas referencias particulares. Los caracteres con acento o la ñ no
se suelen utilizar porque son propios del lenguaje español y eso no lo utilizamos en los
nombres de variables como una buena práctica de programación.
• Se recomienda usar la escritura camelCase en el nombre de variables que tendrán más
de una palabra.
• Si tengo un cálculo aritmético, por ejemplo, num1 = 1+4 se calcula lo que está a la
derecha, primero se hace el cálculo aritmético, y luego se asigna a izquierda.
Una variable será indefinida si es declarada con var, pero no se le asigna un valor (var num3;). Una
cosa es declararla y decirle “esto va a ser una variable que va a tener el nombre num3” y otra cosa es
asignarle un valor. En este caso la variable está “vacía”, no está definido el valor que colocará en
memoria. No está asociada esa variable con ningún contenido.
Si no vamos a utilizar las variables no debemos declararlas. En los nombres de variables las
Se puede también declarar y mayúsculas y minúsculas
var num4 = 5; JS asignar en la misma línea
importan. Var ≠
var
Constantes
Es similar al concepto de una variable, salvo que en este caso, la información que contiene
es siempre la misma (no puede variar durante el flujo del programa).
A diferencia de las variables, comenzaremos con la palabra reservada const para indicarle
al programa que es una constante. Su sintaxis es:
const CONSTANTE_1= value1;

const PI= 3.141592; JS En variables y constantes el caracter = (igual) actúa como caracter
de asignación y se lee: “a la variable IVA le asignamos el valor
const IVA= 21; 21”
Convención entre programadores: las constantes se colocan en MAYÚSCULAS y si los nombres de las
constantes tienen más de una palabra se pueden poner un guion bajo, nunca dos palabras separadas.
No se usa guion medio por convención.

Cambiando los valores…


Podemos cambiar el valor de una variable durante el flujo del programa…
var IVA= 21; JS const IVA= 21; JS …no así con una
IVA= 10.5; IVA= 10.5; constante.
console.log(IVA); console.log(IVA); ¿Por qué sale este
error?
¿Qué valor tomará
IVA?
Tipos de datos
Las variables de JavaScript pueden contener muchos tipos de datos: numérico, cadena
de caracteres, lógicos, indefinido, null, objetos y más.
El tipo de dato es la naturaleza del contenido de la variable o constante.
JavaScript tiene tipado dinámico, es decir que la misma variable se puede utilizar
para contener diferentes tipos de datos:

var x; // ahora x es indefinido (no tiene un valor definido) JS


x = 5; // ahora es numérico (5)
x = "Juan"; // ahora es una cadena de caracteres o string ("Juan")

JavaScript tiene un tipo numérico cuyos números se pueden escribir con o sin
decimales:
var x1 = 34.00; // con decimales JS
var x2 = 34; // sin decimales

Tipado dinámico: JavaScript deduce cuál es el tipo de dato de la variable. El tipo de dato asociado a esa
variable lo va a determinar el dato que estoy almacenando, por ejemplo: si almaceno un 5 se va a dar
cuenta de que estoy almacenando un tipo de dato numérico, pero si almaceno “Juan” se va a dar cuenta
de que almaceno un tipo de dato de tipo texto.
Tipos de datos
Los tipos de datos en JavaScript son los
siguientes:

Tipos de
datos
primitivos
Tipos de datos
El último estándar ECMAScript define nueve tipos:

• Seis tipos de datos primitivos


• Undefined
• Boolean
• Number
• String
• BigInt
• Symbol
• Null (tipo primitivo especial)
• Object
• Function

Para seguir investigando:


https://developer.mozilla.org/es/docs/Web/JavaScript/Data_structu
res
Identificando los tipos de datos
Para saber que tipo de dato tiene una variable, debemos observar que valor le hemos dado.
Si es un valor numérico, será de tipo number. Si es un valor de texto, será de tipo string, si
es verdadero o falso, será de tipo booleano:

var s = "Hola, me llamo Juan"; // s, de string JS


var n = 28; // n, de número
var b = true; // b, de booleano
var u; // u, de undefined

Para saber qué tipo de dato tiene una variable utilizaremos typeOf(), que solo sirve
para variables con tipos de datos básicos o primitivos:

console.log(typeof s); JS Javascript determina los tipos de datos


automáticamente. Muchas veces
console.log(typeof n); necesitaremos saber el tipo de dato de
console.log(typeof b); una variable e incluso convertirla a otros
console.log(typeof u); tipos de datos antes de usarla.
parseInt() Y parseFloat()
Habíamos dicho que parseInt() convierte (parsea) un argumento
de tipo cadena y devuelve un entero de la base especificada. Es
una función de alto nivel y no está asociada a ningún objeto.
Sintaxis:
parseInt(string, base);
parseInt("F", 16); // F en hexadecimal = 15 en decimal JS
parseInt("15", 10); // devuelve 15 en decimal
parseInt("1111", 2); // 1111 en binario = 15
decimal parseInt("15"); // devuelve 15 en decimal

En cambio, parseFloat() convierte (parsea) un argumento de


tipo cadena y devuelve un número de punto flotante. Sintaxis:
parseFloat(cadena)

parseFloat("3.14"); // devuelve el número 3.14 JS


Operadores aritméticos Y de asignación
El operador de asignación (=) le otorga un valor a una variable y se coloca entre la variable y
el valor a asignar.
var x = 10; JS
A la variable x le asignamos el valor 10
Los operadores aritméticos se utilizan para realizar operaciones aritméticas en
números:
Operador Descripción
+ Suma
- Resta
* Multiplicación
** Exponenciación
/ División
% Módulo: resto de dividir
++ Incremento
-- Decremento
Operadores de cadena Y números
El operador + también se puede usar para agregar (concatenar)
cadenas.
var txt1 = "Juan"; JS
Concatenamos ambas variables en una
var txt2 = "Pablo";
tercera y la mostramos por consola
var txt3 = txt1 + " " + txt2;
console.log(txt3);

El operador de asignación += también se puede usar para agregar (concatenar)


cadenas:
var txt4 = "Bienvenidos "; JS A una variable con texto le concatenamos otro
txt4 += "a Javascript"; texto y la mostramos por pantalla
console.log(txt4);

Cuando se usa en cadenas, el operador + se denomina operador de


concatenación.
Operadores de cadena Y números
Agregar dos números devolverá la suma, pero agregar un número y una cadena devolverá
una cadena:
var x = 5 + 5; JS Concatenamos ambas variables en una
var y = "5" + 5; tercera y la mostramos por consola
var z = "Hola" + 5;

La función prompt()
La función prompt es un método del objeto Window. Se utiliza para pedirle al usuario que
ingrese datos por medio del teclado. Recibe dos parámetros: el mensaje que se muestra en
la ventana y el valor inicial del área de texto. Su sintaxis es: variable = prompt(mensaje,
valor inicial)

<script> JS
var nombre = prompt ("Ingrese su nombre", "")
document.write( "Hola " + nombre)
</script>

También podría gustarte