---------------------------------------

VSCODE---------------------------------------------
https://code.visualstudio.com/ // para descargar la version de escritorio
https://vscode.dev/ // es el vscode en linea.
<!----------------- NOTAS DE ATAJOS VSCODE --------- -->
ctrl+mayus+7 para comentar una linea
ctrl+izq o der para moverte x palabras
alt+arriba o abajo para mover una linea
alt+i para copiar una linea completa
ctrl+d para seleccionar y marcar las sgtes lineas seleccionadas
ctrl+espacio para que te muestre el intelisense (ventana de opciones al
teclear)
ctrl+shift+K para borrar linea donde estas parado
ctrl+B para cerrar o abrir el menu lateral
ctrl+shift+p para entrar en la busqueda de todo lo quieras hacer,
es com la configuracion
F2 si quieres cambie el nombre a una varaible
para abrir una carpeta y posicionarse en ella en vscode desde terminal hacer en
terminal code .

para hacer seleccion cuadrada: shif+alt

addon para vscode:

.- prettier // para dar formato identado al codigo
.- HTML CSS Support // para que te ayude con la sintaxis de ambos.
.- live server // para ver lo que haces dentro de vscode
.- code runner //
.- error lens
.- ident rainbow
.- code spell checker
.- vscode-iconos
.- MySQL de Ju Han para conectar mysql hay otro que instale en clases de Weijan
Chen, pero ese es para ssh
.- MySQL sintax de Jake Bathman//recomendado pero no obligatorio
.- en confifuguracion (engranaje) buscar map y apagarlo
.- en engranaje buscar word wrap y habilitarlo
.- puedes hacer vb format on paste y format on type para renombrar una variable
todas las veces, seleccionas una de ellas la marcas y le das f2, le cambias el
nombre y automaticamente se lo cambias a todas.
.- alexcvzz.vscode-sqlite // es un visor de sqlite3
<!----------------- FIN NOTAS DE ATAJOS VSCODE --------- -->
extension que se debe instalar para trabajar con sql
Nombre: MySQL
ID: cweijan.vscode-mysql-client2
Descripción: Database manager for MySQL/MariaDB, PostgreSQL, SQLite, Redis and
ElasticSearch.
Versión: 5.9.1
Editor: Weijan Chen
Vínculo de VS Marketplace: https://marketplace.visualstudio.com/items?
itemName=cweijan.vscode-mysql-client2
----------------------------------------------------------------
Nombre: Remote - SSH
ID: ms-vscode-remote.remote-ssh
Descripción: Open any folder on a remote machine using SSH and take advantage of VS
Code's full feature set.
Versión: 0.84.0
Editor: Microsoft
Vínculo de VS Marketplace: https://marketplace.visualstudio.com/items?itemName=ms-
vscode-remote.remote-ssh
server del curso: // esto se hace con la insralacion del remote ssh.
ssh [email protected]
Host Formacion-POO
HostName 80.240.127.173
User root
password: eZT9dpMYJLUN79L
sudo su tu_usuario
cd

Cómo levantar el servidor de desarrollo de Flask

cd app
source bin/activate -> Fijaros que el shell ahora tiene (app)
cd src
python3 app.py -> El servidor levanta en un puerto 500X -> del 5000 al 5009
deactivate para salir del entorno virtual (este paso no funciona.)

-----------------------------------------------------------------------------------
----
Your identification has been saved in /home/laboratorio/.ssh/id_rsa
Your public key has been saved in /home/laboratorio/.ssh/id_rsa.pub
The key fingerprint is:
SHA256:igk6MA68l1Qy9UdA0u3/f9JzHU8u415YhxkOu1MpKhg laboratorio@laboratorio

llave publica de mi repo en el cursoPOO (se busca asi: cat .ssh/id_rsa.pub)

ssh-rsa
AAAAB3NzaC1yc2EAAAADAQABAAABgQDGGySa1/ewO0ypAnuIIudVOKG8ozltK8YCTCjw9THeAGZhn5IipBL
tfFfrl+h/qrlSR82bcuJ/O9n9izPWKSZbXsLSGEgpaBxYn9gBBidrdC9MCRtpwVZu/
i6WfGEztahrWHRooyy9q9Udw63MgF21wyT83OnKJn7cXFvXoz32NPXjE+dbgXhwDA5Gy6yBUp24HcN1TJJq
loFaHLtJVgEmNvzwLIg0JhRIMWC2GQ0QFp4G/hx/seaDwQMA8wi+il4KYIH0MiZ+shEEDB/
uAwdm+WTlbIYTtC5mRSQ8LzCFo7t0V9rtNfUgUeJT/
d0lu317E4B4KZ3YHFvB6zJoxkPBqQIlpc0Z6j2sKopTjFyT9MGlEY9y9w/
DBG3PnQHNjGOzpvUVJTvtse8B3NctDOb/0jDn5hoDxsU1o1h28Q8WswzrqFM51cl9sHR/TBhhP/
I6nYFQ9z/nvsUSGwAiqc/xgiGSGQW9i0MeeH6rHKe68rftCVtnsD7jNrkqLwlHv9U=
enzoenlaweb@formacion-poo

-----------------------------------------------------------------------------------
------
------------------------------------FIN
VSCODE---------------------------------------------
<!-- Comentarios HTML -->
/* Comentarios CSS y js */
# Comentarios en Python.
los comentarios en JSON no existen, para ello la gente se ingenio colocarlo como un
items de llave:valor. miralo en las notas mias de JSON.

--------------------------------------------Git y
GitHUB----------------------------------
https://github.com/Enzodvc/mirepo // Repo de Enzo
Git: https://git-scm.com/downloads
sudo /bin/bash -c "$(curl -fsSL
https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

https://phoenixnap.com/kb/how-to-install-git-on-ubuntu // GIT

Todas las instalaciones de Git: https://www.hostinger.es/tutoriales/instalar-git-

en-distintos-sistemas-operativos

en terminal:
//pasos para instalar GIT
sudo apt-get update
sudo apt get install git
git --version // te muestra si tienes instalado git y su version
git config --global user.name "nombre usuario" // la configuracion a realizar sera
global y no por projecto.
git config --global user.email [email protected] // el correo del usuario
en este caso:
git config --global user.name "enzodvc" // para añadir el nombre de usuario de
forma local, no en web.
git config --global user.email "[email protected]"
git config --list

git init // para iniciar o crear un repositorio dentro de la carpeta donde estes
con el terminal.
este proceso crea una carpeta oculta .git. contiene archivos que no se tocan.
se puede borrar esta carpeta cuando decidas eliminar este repositorio.

git config --global init.defaultbranch nombrequequieras // es un identificativo a

tu carpeta principal. x convencion se pone como nombre "main".
para saber cual es el nombre con git status.

para subir algo, primero lo copias en el archivo local

haces git status para ver que esta pendiente
luego: haces git add nombredelarchivo
tambien puedes hacer git add . // si estas seguro que todo esta bien.
git commit -m "Añadi file holaMundo"
git log // te permite ver las secuencias que has realizado. es como una bitacora
para salir del git log, se coloca la letra q o CTRL Z.(en caso que se quede en ese
modo)
tambien puedes hacer commit y hacer las anotaciones (mas largas) desde vscode asi:
git commit --amend, te redirige a vscode para que puedas modificar tus comentarios
anterior. Solo el mas reciente.

para elinminar los comentarios anteriores se usa:

git reset --soft HEAD~2 // el numero 2 indica que elimina los 2 comentarios mas
recientes
tambien esta la opcion --hard, pero no lo entendi.

git config --global core.editor "code --wait" // para decirle a git que el editor
es vs.code el --wait es para que espere a que yo termine de trabajar con el editor
de texto, queda como inhabilitado
git config --global -e // arranca el editor vscode
git config --global core.autocrlf input(linux) / true(windows)
git config -h // un listado de ayuda

git status // para ver lo que esta x subirse a git

git add . // para subir todo, mala practica
git add *.txt igual que DOS

como crear una rama:

git branch nombredelarama.

para ver las ramas: git branch, tambien te marca en cual estas posicionado
para cambiar de rama: git checkout nombredelarama
para renombrar una rama: hay 2 metodos
metodo que debes estar dentro de la rama que quieres cambiar el nombre:
git branch -m nuevonombrerama
metodo para hacerlo en cualquier posicion que quieres cambiar el nombre:
git branch -m nombreviejo nuevonombrerama
como eliminar una rama: git branch -d nombredelarama

hacer commit en las diferentes ramas

te metes en una sub-rama

modificas el archivo de texto.
y haces commit desde ahi. a partir de ese momento, tendras 2 opciones.
para hacer log mas conciso, asi: git log --oneline
y para ver las diferencias entre los archivos de texto con git log -p
fusionar o combinar ramas en git
1. es importante que estes en la rama que va a recibir la fusion. a donde van a
llegar los cambios o merge.
git merge nombre de la rama que vas a fusionar con la que te encuentas adentro.
despues debes eliminar la rama fusionada.
git branch -d nombredelarama
conflictos que pueden aparecer al fusionar ramas.
al fusionar ramas puedes conseguir que en una misma linea hayan 2 modificaciones en
ambas ramas.
el GIT te da a elegir que hacer en el momento de fusionar.
luego de hacer esas fusiones debes continuar el merge desde terminal con: git merge
--continue

GITHUB.
el boton "go to file" es un buscador de archivos en alguna carpeta dentro de github
para crear un repositorio: buscar el "+" en la parte superior derecha, click en new
repositoty
para borrar repositorio: ubucar el repositorio que vas a borrar, ir dentro, buscar
boton de engranaje, ir a la parte inferior de esa pagina abierta y ubicar zona de
peligro, ahi debes buscar eliminar repositorio, te pide clave de usuario.
Para bajar el repositorio que tienes o que deseas trabajar en local y se encuentra
en github se usa clone.
hay 3 forma: https, ssh y github CLI (command line interface)
clonar con https:
vamos a code(boton verde)> la pestaña de https, le damos a copiar un url.
luego vamos a terminal dentro de una carpeta especificada para ello.
hacemos: git clone https://github.com/Enzodvc/mi-primer-repositorio.git <<--
ejemplo.

para trabajar de forma local y luego enviarlo a github:

trabajamos en las carpetas y archivos de forma local, luego haces un git commit y
realizar el comentario del commit.
hasta ahi, nada nuevo
pero si haces git status te dira que tu rama esta adelantada a los cambios de la
rama origin.
otra cosa: en este momento puede suceder que hayan cambios por otros compañeros en
origin (fetch) y no lo tengamos y lo otro es que el origin y los demas compañeros
no tengan mis actualizaciones en local(push).
esto se puede ver con git remote -v
este comando te muestra (fetch) y (push(empujar))
como ocultar tu correo en github: se debe hacer si quieres, antes de hacer un
commit a github se debe buscar en preferencias > email(ventana izquierda), buscas
tu direcciona asignada x github (es una direccion que te da github para protejer tu
correo), puedes hacer check mark en la opcion que dice: Keep my email addresses
private.
asi: git config --global user.email correoasignadoporgithub
intentar un commit en github.
git push origin(repositorioengithub) main(ubicacionlocal) ()// pero da error de
permisologia mas abajo digo como resolver.
toca configurar https con un token o tambien con ssh. pero para este ejemplo sera
con https
te vas a github, luego en setting de tu usario buscas en la ventana izquierda,
abajo de todo, algo llamado Developer settings, ahi seleccionas token classic>
generar un nuevo token, te pide unos datos y marcas repo y gains, ahi te genera el
token que te avisa, que lo copies porque no lo veras mas.
en mi caso fue: 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 (dura hasta 4abril2023)
resolviendo problema de permisologia.
al hacer git origin main, te pide usuario de github y la clave seria el token
generado
en este momento, ya debe estar el github, actualizado.

ahora veamos como actualizar los cambios en mi repo local, desde github. con git
pull(halar)
cuando haya cambios en gitpull y desees actualizar tu repo local asi:
git pull origin(github) main(ramalocal)
diferencias entre git pull y git fetch
git pull, ejecuta y hala o trae el repo github al repo git o local.
git fetch origin(solo la info de github), solo te informa si hay cambios o
diferncias entre repo github y repo local. y si tu decides q debes actualizar, se
hace con git pull.
nota de enzo: la verdad es que no se ve nada.
sin embargo hay otro comando git checkout origin/main, te muestra los cambios en
vscode que hay entre github y git. y para salir de esas vistas se hace con git
checkout main, es decir vuelve a como estaba originalmente
y para realizar los cambios con git commit
Crear repositorio local(git) y luego enviarlo a GitHub(web).
el tema es lo sgte: primero debes crear un repo local.
luego debes crear un repo en github (se puede llamar diferente sin problema)
luego debes ver cual es el https (ubicado en el nombre del repositorio)
y luego los sincronizas con git remote add origin (elhttpsanterior) en mi caso
(https://github.com/Enzodvc/cosas-de-JS.git)
ahi te pide un usuario y luego una clave que vuelve a ser el token creado
anteriormente. es decir es valido el mismo token.
bifurcar un repositorio (fork)
es copiar un repo de github publico y luego llevarlo a nuestra cuenta github y
luego lo pasamos a nuestro local.
para ello, buscas el repo publico que desees, ejm freecodecamp luego le das a fork
y te pregunta si deseas hacer un fork.
listo, a partir de ese momento tienes en tu usuario github una copia del proyecto
ajeno.

como bajar ese repo publico, ya ubicado en nuestro usuario como copia local.
con git clone y el https de ese repo.
ejm git clone https://github.com/Enzodvc/proyecto-html.git
al bicurfar un repo, puedes contribuir al repo original haciendo pull request es lo
inverso a fork.

fork y pull request, pertenecen a la opcion de repo publicos. fork para copiarlo y
pull request para solicitar hacer alguna contribucion de codigo.

para hacer eso, primero debes subir con git push la info modificada en tu repo
local a tu repo web.
recuerda git push origin main. con usuario de la cuenta de github tuya y la clave
generada con https.
luego debes hacer un pull request para ver si el tio dueño decide aceptar los
cambios. esto se hace en el boton contribute.> open pull request.

hacer un pull request a partir de una rama. (o como enviar una rama a github)
se necesita bajarlo a repo local, luego creas una rama con git checkout -b
nombrerama // (-b) te permite crearla y moverte adentro, de una vez.
haces los cambios pertinentes, haces git add . para preautorizar los cambios y
luego el commit
y ahora: para enviar la rama a github haces: git push origin nombredelaramalocal
ahi te pide usuario clave qwue es el https.
luego en la web veras que llegaron los cambios, podras mirar en la main y en la
rama.
ahora si haces un pull request debes mirar que sea desde la rama a la main del repo
web.

Actualizar el repo bifurcado.

no vale la pena

---------------------------------------- FIN Git y

GitHUB----------------------------------

----------------------------------
HTML----------------------------------------------------
<!----------------- Plantilla mas basica HTML ---------- -->
<!DOCTYPE html> // plantilla similar se crea automaticamente en vscode solo con
seleccionar el snippets con nombre HTML, claro, el file, debe llevar una
extension.html
<html>
<head>
<meta charset="utf-8">
<!-- meta: para que los caracteres sean tipo hispano -->
<title> pagina de Hola mundo </title>
<!-- title: para identificar x dentro al programa -->
<link href="plantillacss1.css" rel="stylesheet" />
<!-- link: link de referencia al enlace con el programa xxx.css-->
<script src="script.js" type="text/javascript"> </script>
<!-- Scrip: link de referencia al enlace con el programa xxx.js -->
</head>
<body>
-----
</body>
</html>
 ------------------------- FIN Plantilla mas basica HTML -->

<!--------- Plantilla mediana HTML ---------- -->

<!DOCTYPE html>
<html>
<head> <!--Informacion que sirve de referencia para los navegadores. -->
<meta charset="utf-8"> <!-- para que los caracteres sean tipo hispano -->
<title> pagina de Hola mundo </title> <!-- esta info sale en la pestaña del
nuestro navegador. -->
<link href="plantillacss1.css" rel="stylesheet" /> <!-- link de referencia al
enlace con el programa xxx.css-->
<script src="script.js" type="text/javascript"> </script> <!-- link de
referencia al enlace con el programa xxx.js -->
</head>
<body>
<main>
<div> Lorem ipsum dolor sit.</div>
// estructura de bloque sin formato. no tiene ningus tipo de comportamiento
predefinido, por lo tanto se mal usa para muchas cosas. todo se resuelve con <div>
</main>
</body>
</html>
<!-- FIN Plantilla mediana HTML ---------- -->

<!-- Plantilla completa HTML ------------------ -->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- para que los caracteres sean tipo hispano -->
<meta name="author" content="enzoEnLaWeb"> <!-- indica al motor de busqueda
contendido sobre quien elabora la pagina -->
<meta name="description" content="Portafolio de Personal"> <!-- indica al motor
de busqueda contendido sobre el contenido de la pagina -->
<meta name="keywords" content="HTML, CSS, Javascript, bootstrap"> <!-- son las
palablas claves para el motor de busqueda. -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Este
meta es muy importante porque define el comportamiento de la pagina en los
dispositivos tales como tablets o moviles o pantallas de pc -->

<title> pagina de Hola mundo </title> <!-- para identificar x dentro al programa
-->
<link href="plantillacss1.css" rel="stylesheet" /> <!-- link de referencia al
enlace con el programa xxx.css-->
<script src="script.js" type="text/javascript"> </script> <!-- link de referencia
al enlace con el programa xxx.js -->
</head>
<body>
<header>
<nav> </nav> // etiqueta de navegacion se usa para indicar a html que
dentro de su contenido tendras una barra de navegacion
<ul> listas indefinidas y que seran de navegacion con la etiqueta <nav> //
mas explicacion en curso_fundamentos_HTML.iso guardado en cursos realizados. video:
ES_865_05_06_00_XR25R.mp4.
</header>
<aside>
<nav> </nav>
</aside>
 <section>
<article id="iralprincipio"> // con el ID="xxxxx" le esta dando nombre a esa
etiqueta, en este caso "este arcticle se llama "iralprincipio""
<strong> Hola Mundo!!! desde esta pagina en html </strong>
<h1>titulo tipo H1 </h1>
<h2>titulo tipo H2 </h2>
<a href="#iralprincipio">Ir al principio</a> // con la etiqueta <a y el
atributo href="#xxx"> lo convierte en un link de envio a algun sitio interno y en
este caso lo esta enviando a article llamado ir al principio y la almohadilla o
gato (#) le dice que es un enlace a la misma pagina, poruqe sin el gato, piensa q
es un archivo.
</article>
<article>
----
</article>

</section>

<footer></footer>
</body>
</html>
------------------------- FIN Plantilla completa HTML -->

<strong> Hola Mundo!!! desde esta pagina en html </strong> // sirve para poner
en negrita un texto
<h1> hay desde h1 hasta h6 y son para titulos</h1>
<br /> para hacer una linea hacia abajo
<hr > <!-- dibuja una linea horizontal sencilla-->
<hr width="200px" align="right"> <!-- dijuja una linea horizontal con parametros--
>

<!-- lorem para escribir contenido de relleno lorem20 (20 palabras) lorem*20
(20lineas)-->
<p> etiquieta para escribir parrafos</p>

<a href="https://www.google.com/"> enlace para ir a la pagina google en la misma

pestaña</a> <br /><br />

<a href="otrapagina.html">vas a ir a otra pagina pero en la misma pestaña</a>

<br /><br />

<a href="otrapagina2.html" target="_blank">vas a ir a otra pagina y en una nueva

pestaña y cada vez que le des click al enlace te abre una nueva ventana</a><br
/><br />

<a href="#iralfinal">pagina que tiene un enlace y te envia al final de la pagina

principal o index.html</a> <br /><br />

<a href="cocotree2.png" target="_blank"> <img src="cocotree.png" title="Cocotero,

tero, tero."> de esta forma puedes pinchar una imagen pequeña (coctree2)
y al pinchar abre cocotree1 (imagen grande) </a>
// con title "cocotero tero" lo que hace es que cuando pongas el cursor sobre la
imagen, te da una descripcion de su contenido, tiene atributo llamado height y
weight
--------------- otra forma de trbajar con imagenes-----------------------
<img src="ruta de la imagen" alt="descripcion de la imagen" width="en pixeles ó %"
height="en pixeles ó %" >
ejm: <img src="ny.jpg" alt="imagen bonita de NY USA" width="30%"
// no hace falta colocar los 2 atributos y tampoco es aconsejable
 modificar imagenes desde aqui, se hace x CSS
// no se cierra la etiqueta <img> con </img> (no existe)

---------------FIN otra forma de trbajar con imagenes---------------------

-------------------------------listas en HTML UL, OL,

DL----------------------------

<ul> // listas desordenadas

<li>elemento 3</li>
<li>elemento 2
<ul>
<li>elemento 2.1</li>
<li>elemento 2.2</li>
</ul>
</li>
<li>elemento 9</li>
<li>elemento 1</li>
</ul> //------------

<ol type="A" start="4" reversed> //listas ordenadas type: indica que es

enumerado x letra, start desde que numero empieza y como es enumerado x letra
empezaria con D(4ta letra) y reversed para enumerar de atras hacia adelante.
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ol>

<dl> <!-- lista de definiciones, usadas para dar detalles sobre los puntos adentro
de la lista -->
<dt> punto para definir</dt> <!-- concepto a definir -->
<dd>detalle sobre el contenido de DT anterior </dd> <!-- detalle del concepto
anterior -->
</dl>
---------------------------- FIN listas en HTML----------------------------

convertico.com para convertir imagenes a iconos

<link rel="icon" href="/home/laboratorio/Imágenes/pingui.png">
//esto es para colocar un icono en la pestaña del navegador
Nota: se debe colocar el icono png con transparencia
https://www.toptal.com/designers/subtlepatterns/ //para obterner tiles que
puedes usar como fondo de pantalla en mosaico

------------------------------------------TABLAS y MATRIZ----------------------
<h3>TABLAS y MATRIZ</h3>
<table> <!-- indicando que es una tabla o matriz -->
<thead> <!-- indicando que es un encabezado de la table o matriz -->
<th>titulo 1</th> <!-- indicando que es un encabezado pero de la columna de
la table o matriz -->
<th>titulo 2</th>
<th>titulo 3</th>
</thead>
<tr> <!-- indicando que es una fila de table row -->
<td> elemento 1</td> <!-- indicando que es una columna de table definition o
ocmo se llame -->
<td> elemento 2</td>
<td> elemento 3</td>
</tr>
 <tr>
<td> item 1</td>
<!-- <td> item 2</td> -->
<td> item 3</td>
</tr>
<tr>
<td> opcion 1</td>
<td> opcion 2</td>
<td> opcion 3</td>
</tr>
</table>

en CSSS
table {
border: 1px solid #000000;
}

ojo y nota: si quieres expandir columnas o filas es decir hacer un join de 2

columnas o 2 filas
se usa asi: x ejm
<th colspan="2">Miércoles</th> //este seria una fusion de 2 encabezados
(columnas), x eso se usa th
<td rowspan="2">Química</td> //este seria una fusion de 2 filas x eso se usa td
para enterderlo mejor, curso guardado en cursos realizados. video: 5-
1.crear.webs.CSS/5 HTML - Tablas y formularios/video27.mp4.

---------------------------------------FIN TABLAS y MATRIZ----------------------

--------------------------------------- IFRAMES----------------------
<!-- Se usa para colocar contenido (otra pagina html, un video, un link en una
ventana de la pagina principal) -->
<iframe src="otrapagina1.html" frameborder="1"></iframe>
en css
iframe {
width: 80%; // ancho porcentual a la pagina
background-color: rgb(228, 226, 238);
}
---------------------------------------FORMULARIOS----------------------
<h3>FORMULARIO</h3>
<form action="paginadeprogramacion.php" method="(get) o (post)">
<!-- form se usa para indicar cual es la pagina del servidor para recoger los
datos proporcionados -->
<fieldset > <!-- esta etiqueta se usa para separar o enmarcar el formulario-->
<legend> titulo del marco del formulario</legend>
<label for="direccion">Direccion: </label> <!-- El label va asociado con
input.
son etiquetas que trabajan en conjunto lo otro es que lleva el "for"
para asociar el label con el input -->
<input name="direccion" id="direccion" type="text" placeholder="escribe tu
direccion">
<!-- name: es el nombre del campo,
ID es el nombre identificativo a los programas,
type: que tipo de campo de formulario es: texto, password, number, date,
month, email, url, color,
file (sirve para sellecionar un archivo y subirlo al servidor), checkbox,
radio, etc. -->
<label for="clave"> Introduce tu Password:</label>
<input name="clave" id="clave" type="password"> <!-- al colocar password,
el contenido a escribir en el formulario, sale con astericos-->
<label for="nombre"> Nombre Usuario: </label>
 <input name="nombre" id="nombre" type="text" placeholder="Escribe aqui tu
nombre completo">
<!-- input no cierra su etiqueta es decir no lleva </input>
otra cosa: con placeholder escribe un contenido inicial informativo en el campo
del formulario-->
<input type="number" min="6" max="200" step="5" value="8"> <!-- sirve para que
el fomulario le salga las fechas para subir o bajar los numeros-->
<input type="submit" value="Darle click aqui"> <!-- boton para enviar datos al
servidor -->
</fieldset>
</form>
----------------------------
<legend> Titulo de la leyenda
<textarea name="otrosdatos" id="otrosdatos" cols="50" rows="3"> lorem ipasum
dfhjgfh </textarea>
</legend>
---------------------------------------FIN FORMULARIOS----------------------

--------------------------------------- OTRAS ETIQUETAS HTML ----------------------

colocar un parrafo editable con content="true" en un parrafo o en un h1
ejm:
<p contenteditable="true">Lorem ipsum dolor sit voluptatum commodi unde?</p>

<pre> texto cualquiera </pre> <!-- <pre> es como un parrafo -->

<code> windows.prompt () </code> convierte el texto a formato codigo

<input type="color"> <!-- color picker es una paleta de color en html-->

<p> esto es un parrafo con texto sin resaltar

<mark style="">luego con Texto a resaltar</mark>
y luego otro texto sin resaltar >/p>

<p>The meter element is used to display a gauge:</p>

<label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>
<progress min="0" max="100" value=""></progress>

<details>
<summary> este es el punto a detallar en el acordeon</summary>
<p> este es el detalle del punto padre del acordeon</p>
</details>

<label for="radio"> opcion1</label>

<input id="radio" type="radio" name="epaa"> <br> <!--con el nombre, colocandolo
igual en todas las opciones,
se logra que se desmarque un radio button cuando se selecciona otro -->
<label for="radio2"> opcion2</label>
<input id="radio2" type="radio" name="epaa" checked>

// creo que si colocas el atributo value en input, no necesitas label. seria asi.
<input id="hombre" type="radio" name="sexo" value="hombre">HOMBRE <br>
<input id="mujer" type="radio" name="sexo" value="mujer">MUJER <br>

<h2>ETIQUETAS DE OPCIONES CON SUB-OPCIONES</h2>

<select >
<optgroup label="tipo1">
<option value="vers1">vers1</option>
<option value="vers2">vers2</option>
</optgroup>
 <optgroup label="tipo2">
<option value="vers3">vers3</option>
<option value="vers4">vers4</option>
</optgroup>
</select>

para crear un boton con button ()

<button>HOla</button> // se le puede agregar un comportamiento como onclick
<button type="submit">Click Aqui para enviar</button> // funciona igual que el
input submit pero puedes agregar iconos dentro del boton
<button type="reset">Resetear los valores</button> // boton para borrar todo los
datos relledados del formulario

----------------------DATALIST----------------------------------
<!-- Data list es una ventana con las diferentes opciones que pueda haber, para que
selecciones solo una.
tiene la particularidad que puede autocompletar escribiendo una o mas letras de las
palabras que lo componen -->

<fieldset>
<h3>DATALIST</h3>
<label for="coches">MARCAS DE COCHES POPULARES</label>
<select id="coches" name="coches">
<option value="Fiat">FIAT</option>
<option value="Citroen" selected>CITROEN</option>
<option value="Volvo">vOlvO</option>
<option value="Ducati">DuCaTi</option>
</select>
</fieldset>

--------------------------------------- FIN OTRAS ETIQUETAS HTML

----------------------

--------------------- Caracteres especiales dentro de las etiquetas HTML

-------------
para colocar Caracteres especiales en etiquetas, se coloca el
numero pertinente asi: &#169; --> equivale a simbolo de Copyright
--------------------- FIN Caracteres especiales dentro de las etiquetas HTML
-------------

--------------------- Vinculos para descargar archivos en HTML -------------

<p> <a href="linuxp.zip" title="Dale click que el archivo esta muy bueno" > </a>
descarga tu archivo desde AQUI </p>

---------------------FIN Vinculos para descargar archivos en HTML -------------

---------------------FIN Acronimos y Abreviaturas, Citas, Definicion de alguna

palabra, direcciones fisicas HTML -------------

para hacer una connotacion de un acronimo es asi:

<p>... y luego conectaras el <acronym title="Universal Serie Bus">USB</acronym>,
en la computadora para poder ver los archivos del pendrive</p>

para hacer una connotacion de una abreviatura es asi:

<p>... haciendo referencia al <abbr title="Señor o señora">Sr.</abbr>
Tacupay en la novela de Kaina </p>

para hacer una cita de algun escrito es asi:

<p>... citando al autor Dr. Jones. <cite>Despierte, wake up now </cite> que si no,
se lo comen vivo </p>

del mismo modo Definicion de alguna palabra <dfn>algo Aqui </dfn>,

direcciones fisicas seria asi:

<address>
<p> calle, nro, piso, portal, cod postal, Barcelona, España</p>
</address>

ETIQUETAS DIV Y SPAN

div agrupa en bloque y span agrupa en linea.
x ejm si quieres resaltar un atributo de un bloque con div y para hcerlo en linea
con span.
ejm:
<p>xxxxxx xxxxx xxxx x x xx xx lorem ipsum xxx <span class="enrojo"> todo esto de
aqui adentro,
le puedes asignar propiedades y quedaria demarcado en linea </span> </p>
----------------------------------FIN
HTML----------------------------------------------------

----------------------- Cascade Style Sheet

css----------------------------------------------

Selectores: H1...h6, p, Div, etc.

estructura:
H1 {
propiedad1: valor1; // aqui termina cada sentencia con punto y coma.
propiedad2: valor2;
} // aqui sin coma o punto y coma. importante
nota: los tamaños son expresados en px, em y en %, este ultimo se refiere al tamaño
en porcentaje de la etiqueta padre.
Selector universal: abarca toda la pagina y se coloca con *{propiedad:atributo};
Selector de Tipo: abarca solo las etiquetas que indiques h1, p, div, etc. ejm
h1{propiedad:atributo}

Los selectores de clases aquellos que tienen class= en cualquier etiqueta de HTML.
Van antecedido x un punto (.)
.prueba {propiedad1: valor1;} // en este ejm: en html hay una o varias etiquetas
con la clase prueba

los selectores de id. hacen lo mismo que los de clases pero van solo por el id que
es unico se identifica con (#)
ejm: # prueba2 {propiedad1: valor1;}

selector de grupo ejm: h2, h3, p {propiedad1: valor1;}

si estas en un selector de id en un div x ejmm y hay algun elemento que no quieres

que se vea afectado.
Debes especificar a su vez dentro del selector, que otro selector individual
quieres que se vea afectado.
ejm:
#prueba h2, #prueba h3 {propiedad1: valor1;} // aqui h2 y h3 esta dentro de
id(prueba)
ojo si no repites el #prueba para h3, el asume a todos los h3.

para indicar un hijo especifico dentro un padre con varios hijos se usa asi:
este es el codigo en html // <li>Pimientos <a href="#" >Naranjas</a></li>
li>a{color: orange);} // aqui especificamos que busque una etiqueta li, que tenga
una etiqueta a, dentro.
id= Identifican elementos de manera unica, no puede hacer 2 elementos con el mismo
id.
class= Las clases identifican a elementos con caracteristicas comunes, podemos
tener varias clases
en un elemento puede hacer un id y varias clases.

padding: es una propiedad de CSS que establece border interno de un container.

interno,
padding: 00px // puede tener 1 o 2 o 3 o 4 parametros solo 1-> todos los lados,
con 2 -> arriba y a los lados, con 3 -> arriba, a los lados y abajo, y por
ultimo con los 4 -> arriba, derecha, abajo, izquierda

marging: es una propiedad de CSS que establece borde con respecto a la caja padre
tiene los mismos atibutos de padding. Puede ser en negativo -25px por ejm.

Bordes: Los bordes Tienen 3 propiedades: ancho(xxpx), color y estilo (dotted)

ejm:
h1 {
border: 5px solid red;
}
para darle un aspecto curvo a los bordes, asi: border-radius: 10px;

font-family:monospace; // aqui se define el tipo de letra y sus familias.

font-size: 14px; // se define el tamaño
font-weight:bolder; // define que sea: normal, light(muy delgada),
bold (negrita), tambien se puede indicar en numero. Este numero es util cuando se
baja la fuente desde googlefont
ahi en google fonts seleccionas que peso tiene y luego lo colocas en font-weight
font-style: font-style: oblique; o italic; o normal // ponga lo que ponas, da el
mismo resultado
text-transform: uppercase; o :capitalize; o lowercase;
text-decoration: underline; o overline; o :line-through; (tachado)
list-style:lower-roman; // esto es para cambiar la enumeracion de las
listas ordenadas (numericas x otro simbolo), tiene otros posibles valores
list-style-type:square; // tambien para cambiar los simbolos de las listas
desordenadas
circulos negros x otro simbolo o inclusive un icono.
list-style-image: url(listicon.png); // en vez de circulo o discos, una imagen
list-style-position: inside; // se refiera a la posicion de los simbolos de la
lista(inside y outside) varia es la posicion del texto de la lista
con respecto al simbolo (disco o punto o lo que pongas)

los link tienen 4 propiedades:

1.- configuracion inicial sin que haya ocurrido nada. (link)
2.- cuando pasas el curson encima (hover)
3.- configuracion cuando ya la hayas visitado. (visited)
4.- configuracion para cuando pinches, justo ese momento del click (active)
ejm:
a:hover{
font-size: 2em;
cursor: e-resize; // para cambiar el tipo de cursor
}
a:visited{
color: green;
}

Google Fonts: https://fonts.google.com/ // buscas la fuente que quieres,

seleccionas, vas a seleccionar el link,
copias el link en tu pagina html y luego en tu css buscas adonde la quieres poner
y colocas font.family: (xxxx)(esto te lo dice en google que nombre vas a colocar
en xxxx con un font-family)

para la propiedad color. serian RGBA (RR,GG,BB,AA) / donde el los 3 parametros son
rojo(R),
Green(G), Blue(B) y el 4t0 parametro que es la opacidad va desde 0 hasta 1 con
intervalos de 0.xxx

background-image: url("ruta");

Display inline y display block: Puedes dar estilo en linea o en bloque a los
elementos con
display: inline o display: block.

hay q apuntar todos los estilos que tengo en la hoja styleenzo y explicar cada
elemento
en CSS para dar formato a una etiqueta <a> xxxx</a> lo puedes hacer asi:

a {
color: #31d0ec;
text-decoration: none;
}

para hacer referencia a un estado de un enlace se usa a: y puedes cambiar su

comportamiento

a: hover {
color: #cccccc;
font-size: X-large; // agranda el tamaño de la letra
}
<!--hover es el comportamiento cuando pones el cursor encima del enlace ejm(cambio
de color)-->

las clases son representadas en CSS con un punto + el nombre de la clase

(.classname)
para trabajar con los identificadores (id), se coloca gato o almohadilla (#)
ejms

.izquierda{ text-align: left; } //define el comportamiento para todos las clases

con nombre izquierda declarados en <html>
y
#fondolila { color: black;}

-----------------------FIN Cascade Style Sheet

css----------------------------------------------
-----------------------------
BootStrap---------------------------------------------------------
getbootstrap.com // pagina oficial.
ahi buscas download y luego buscas CDN via jsDelivr
ahi vas a conseguir 2 lineas, una de style y una de script para css y js
respectivamente.
serian estas:
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous">
la llamada de js (<script>) se deb colocar justo antes de (</body>)
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
hay clases definidas en BS. eso quiere decir que son palabras reservadas, tales
como "container, row, col"
ejm de una definiciion de clases en html:
<div class="container text-center columna"> lorem ipsum </div> // aqui quiere decir
lo sgte: hay 3 clases definidas en esta etiqueta, "container text-center columna"
de los cuales container es palabra reservada, text-center para centrar el texto sin
hacerlo x css y columna-> que si es una clase personal.
otro ejm:
<div class="col-sm-4 col-lg-6 columna">sm4 lg6</div><!-- columna es una clase
personal-->
<div class="col-sm-8 col-lg-6 columna">sm8 lg6 </div>
//aqui faltaria incluirlo en una div container para que se relacionen. Pero la
explicacion es que tienen 3 clases, 2 reservadas y una privada.
de las 2 reservadas esta definiendo que para pantallas pequeñas (sm) tenga columna
de 4 y para pantallas grandes (lg) tenga 6 columnas. Recuerda que un container
puede tener 12 columnas por lo tanto las columnas que vayan en ese cotainer debe
tener una suma de 12 columnas, ejm sm-6 y sm-8 significa que el container tendra
12columnas.
otra linea que se debe incluir en head seria la pertinente al uso de icons. vas a
la pagina buscas el CDN (bootstrap) y ahi copias y pagas la liena de comandos, en
este caso seria:
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-
icons.css">
luego en la parte del container a usar, pegas el comando pertinente a icono que
deseas usar. ejm:
<i class="bi bi-truck-flatbed"></i>
--------------------------FIN
BootStrap---------------------------------------------------------

------------------------------ CURSO JSON

-------------------------------------------------------
JSON: JavaScript object notation.
los archivos deben tener la extension xxxxx.json
empieza y termina con una llave {}
y su contenido debe ser lo llamado llave:valor, separando cada item con comas menos
la ultima (que si lo permite Python.)
{
"_comentario1": "esto es un comentario, los archivos JSON se abren con un
navegador internet",
"propiedad":"valor",
"monto": 12.5,
"booleano": false , # ojo en Pyhton false o true van con capital letter.
"propiedad": ["valor1","valor2"],
"propiedad": {"propiedad":"valor","propiedad":13}, # un objeto nuevo, dentro de
una propiedad, componente de un objeto principal
"propiedad": [{"id":0},{"id":1},{"id":2}]
}
otro ejemplo seria empezar tu estructura json con un arreglo [en corchetes] y
dentro su estructura seria de objetos. seria asi:
[
{"propiedad":13}, {"propiedad":true},
]
ejercicio realizado en prueba.json
hacer un json que contenga nombre, apellido, lenguajes (JS, Pyhton,
COBOL),experiencia(MS antiguedad 5, google, antiguedad 3), direccion(calle numero
colonia, pago del agua (id -> abril 2019 y enero 2020))
seria asi:
{
"nombre": "Enzo",
"apellido": "Tacupay",
"lenguajes": ["JS","Python","PLSQL"],
"experiencia": [
{"empresa":"TTA", "antiguedad":5},
{"empresa":"INMONAC", "antiguedad":3} ],
"edad": 30,
"direccion": {"calle": 54,
"piso": 1,
"puerta": 1,
"pagoAgua": [{"id": 0, "fecha":"abril 2020",
"id": 1, "fecha":"enero 2021"]
}
}

------------------------------FIN CURSO JSON

-------------------------------------------------------

-------------------------------JavaScript
JS----------------------------------------------
asi se llama desde HTML un programa de JS. obviamente el archivo debe llamarse
xxxx.html
<script>
console.log ("Hola Mundo desde JS")
</script> // para abrir la consola del web browser con F12
tabiem puesdes colocar esto en el archivo xxx.js seria asi:
var a;
var b=2;
Nota: con var, se puede declarar varias veces. con let, solo se puede declarar una
vez.
ojo: si se puede cambiar su valor.
ejm: var a=5;
var a=6; // si se puede.

let b=7;
let b=8; // no te deja pero si puedes hacer esto:
b=8; // si te deja cambiar su valor
const bario=7
bario=8 // ya no se puede modificar el valor de bario en ningun momento por ser
declarado
como constante.
y para usar constantes, se debe declarar en mayusculas, como norma: asi:
BARRIO=7
sin embargo el uso de const en arreglos y funciones, puede ser mutar su valor.
ejm:
const s = [5, 6, 7];
s = [1, 2, 3]; // no deja cambiarlo
s[2] = 45; // si deja mutarlo
console.log(s); // [5, 6, 45] seria el resultado
con Object.freeze(nombre del array) // si puedes congelar todo el arreglo. sin
mutacion.
----------------------------------------concat------------------------
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]
---------------------------------------FIN concat------------------------

console.log (a=4)
console.log (b)
Plantillas de cadena: Se usan para mezclar variable con texto a la hora de mostar
en pantalla
para escribir estas plantillas de texto se usan
comillas invertidas (`al principio de la cadena y a la final) y donde vaya la
variable debe ir asi: ${variable}

ejm:
var nombre: "Jhon"
var apellido: "Doe"
console.log(`Mi nombre es: ${nombre} y mi apellido es: ${apellido}`)
tambien es valido para mostrar objetos asi:
var sumArreglo =[4,6,8,2,1,2,3,4,5];
console.log(`HOla mi arreglo es: ${sumArreglo} y eso es todo` );
para mostrarlo con JSON. seria asi:
console.log(`Chao mi arreglo con JSON es: ${JSON.stringify(sumArreglo)} y eso es
todo` );
tambien se puede trabajar con arrglos con las plantillas de cadenas ejm:
var miObjeto ={
"nombre" : "Gino",
"apellido": "Leoni",
"edad" : "35"
}
var bari = `Se muesra los valores de un objeto: nombre es: ${miObjeto.nombre} y mi
edad es: ${miObjeto.edad} toy joven`
console.log (bari)

var caracas= "esto es una cadena de caracteres, se acepta \"comillas\" y otros

simbolos"
// en el evento anterior se le pide que considere a las comillas con el "\" justo
delante del caracter a ignorar.
tambien se puede asi:
caracas= "esto es una cadena de caracteres, se acepta 'comillas' y otros simbolos"
o tambien asi:
caracas= 'esto es una cadena de caracteres, se acepta "comillas" y otros simbolos'

para saber una logitud de una cadena: nombrevariable.lenght // te arroja el tamaño

de esa variable.
para acceder a una posicion dentro de la cadena de caracteres asi:
nombrevariable[posicion] //el vector empieza con 0
ejm:
tres="Estoy aprendiendo a programar con JavaScript, Papita, Mani y Tostón"

tres[tres.lenght -2] // aqui toma a la veriable tres y luego se ubica en la

longitud de la cadena y luego le resta 2 o penultima (-2)
posicion de la cadena de caracteres. Si quieres x ejm ir a la antepenultima, pones
-3
arreglos:
var notas = [11,12,13,14];
console.log(notas)
console.log(notas[0]+notas[2]+" tratando de imprimir 2 posiciones de un vector, no
se puede, los suma" )
/*no se puede mostrar 2 elementos, de un arreglo,
por lo tanto toca armarlo asi: */
console.log(String(notas[0])+String(notas[2]))
--------------------
esta es la forma de accesar a un vector anidado o vector dentro de otro vector o
arreglo dentro de otro arreglo
var miarray=[[3535,5767,2646],[48767,364,5795],[2847,5753,38548]]
console.log(miarray [1][1]);
--------------------

ojo: Math con Mayuscula.

Math.random() es una function que devuelve un numero decimal entre 0(inclusive) y
<1(excluyente)
Math.floor() es una function que devuelve la parte entera de un numero decimal, sin
redondear.
Math.floor(Math.random()*10)) // esto devuelve un azar entre 0 y 9
console.log(new Date()) // esto te devuelve x pantalla el detalle de la fecha
completa.
El método reduce() ejecuta una función reductora sobre cada elemento de un array,
devolviendo como resultado un único valor.
ejm: es una funcion flecha que recibe un arreglo de cualwuier cantidad de
parametros
y devuelve la sumatoria de todos los elementos de esos parametros

const sum = (...args) => {

//const args = [x, y, z];
return args.reduce((a, b) => a + b, 0);
}
----------------------------------------------------------------------
console.log("Funcion flecha con operador rest y con metodo Reduce")
//args=[1,2,3,4]
const sum = (...args) => {
//const args = [x, y, z];
return args.reduce((a, b) => a + b, 0);
}
console.log(sum(1,2,3,4,5));
-----------------------------------------------------------------------------
var maximus = Math.max.apply(null, arr);
// devuelve el elemento con mayor numero detro de un array y se lo da a una
variable
var maximus = Math.max()
/ devuelve el elemento con mayor numero detro de los parametros pasados y se lo da
a una variable
ejm:
console.log(Math.max(1, 3, 2));
// expected output: 3

---------------------------ARREGLO RECURSIVO
-----------------------------------------------
var arr=[]
function conteoRegresivo(a){
if (a <= 0) {
console.log (a + " conteoRegresivo es cero")
return;
}
console.log (a)
arr.unshift(a)
 conteoRegresivo(a-1)
}
conteoRegresivo(10);

Explicacion:En este arreglo recursivo consta de recorrer una funcion y hacerla

recursiva
sin ningun procedimiento iterativo (bucles) tales como: do while, for, switch, etc.
consiste en que dentro de una funcion, se vuelve a llamar a la misma funcion hasta
que deje de
cumplirse la condicion.
Para este ejemplo se llama a la funcoin conteoRegresivo y al entrar, se vuelve a
llamar
a la funcion pero restando una unidad, hasta que llegue a cero.
---------------------------FIN ARREGLO RECURSIVO
---------------------------------------------

--------------------------------.PUSH()------Es un METODO para agregar elemento al

final de un arreglo.------
asi:
var notas = [11,12,13,14];
notas.push(15);
console.log(notas);
--------------------------------.Pop()------Es un METODO para eliminar el ultimo
elemento de un arreglo.------
// y lo puedes asignar a una variable
ejm:
var quitado=notas.pop();
console.log(notas);
console.log(quitado);
--------------------------------.shift()------Es un METODO para quitar 1er.
elemento de un arreglo.------
var quitado=notas.shift();
--------------------------------.unshift()------Es un METODO para agregar un
elemento al principio de un arreglo.------
notas.unshift(77);

-----------------JavaScript Arrays - Cómo funciona el método map-----------------

var almuerzos = [
{principal:'arepas', postre:'helado'},
{principal:'tacos', postre:'torta de queso'},
{principal:'pizza', postre:'galletas'},
{principal:'sushi', postre:'quesillo'}
]

var soloprincipal=[];

for (var i=0;i<almuerzos.length; i++ ){

// soloprincipal[i]=almuerzos[i].principal; asi o como lal inea de abajo, va bien
soloprincipal.push(almuerzos[i].principal)
}
console.log(soloprincipal);

//ahora usando map seria asi:

soloprincipal=almuerzos.map(function(almu){
console.log (almu)
return almu.principal
}
 )
console.log (soloprincipal);
// explicacion con .map y una funcion temporal(almu)(para descargar ahi los
valores)
//.map es una funcion de iteracion, es similar al for anterior
https://www.youtube.com/watch?v=GGOo-Ww0TSw // explicacion
-------------- FIN JavaScript Arrays - Cómo funciona el método map-----------------

--------------------------------FUNCIONES.--
v----------------------------------------------
definicion base:
function mostrarMensaje(){
console.log("Hola MUNDO desde una Funcion")
}
y para ejecutarlo se llama asi:
mostrarMensaje()
cuando se declaran variables, se pueden hacer fuera de una funcion (globales) y
locales (dentro de una funcion)
las variables locales solo tendran su valor dentro de la funcion, nada mas
las variable globales en ambos sitios , pero si declaras una misma variable fuera
y dentro de la funcion,
en la funcion, tendra el valor declarado en la funcion y a lo que salga, vuelve a
tomar el valor declarado en el programa
ya que es de tipo global.

si tu necesitas que u na variable sea usado en todo el programa y sus funciones,

debes tratarlo asi:

en el programa:
xxx=0

def llamadaaalgo():
global xxx # sin el global daria error.
xxx=xxx+1

llamadaaalgo()
print(xxx)

Retornar un valor de una funcion

asi:

var num1=23;
var num2=15;
function suma(para1,para2=2388)
{
console.log(para1+para2+ " resultado dentro de function")
return para1+para2
}
console.log(suma(num1,num2))

otro ejemplo similar pero usando declaracion de parametros x defecto:

var num1=23;
var num2=15;
function suma(para1,para2=2388)
{
console.log(para1+para2+ " resultado dentro de function")
return para1+para2
}
console.log(suma(100)) --> mark
// en este caso, esta definido inicialmente num1=23 y num2=15.
pero luego, en la linea console.log(suma(100)) (-->mark) estamos enviando solo un
parametros
correspondiente a num1 (100) y el otro esta omitido. el programa asume para
num2 el valor de 2388

OJO: Funcion para dar formato mas bonito x consola a un vector, asi:
console.log(JSON.stringify(nombredelarreglo)); // ver que es esto
JSON.parse // ver que es esto.

------------------------FUNCIONES FLECHA--------------------------------------
las funciones flecha se usan para reducir el codigo de las funciones.
const sumarTres = function(x){
return x+3;
};
// para usar la funcion fecha seria asi:
const sumarTres = (x) => (x+3); // esta linea sustituye a las anteriores
console.log(sumarTres(4));
const sumarTres = x => (x+3); // X es el parametro y se puede omitir
los parentesis "()" porque es un solo parametro que se pasa.
con 2 parametros:
const multiplier = (item, multi) => item * multi;
console.log(multiplier(4, 2))

---------------------------FIN FUNCIONES
FLECHA--------------------------------------
-------------------------------- OPERADOR
REST--------------------------------------
/* operador Rest (...) Es un operador que se usa para hacer que los parametros
sean abiertos a la cantidad que envies desde la llamada
ejm: si en miFuncion(envias 2 parametros xxxx,yyyyy)
entonces ...args(variable que recibes esos 2 parametros, se regula a 2.) */

function miFuncion (...args){

console.log(args) // salida en pantalla: [1,2,3,[7,8,9]]
}

miFuncion(1,2,3,[7,8,9]) // aqui tu puedes enviar la cantidad

//de argumentos que necesites
-----------------------------FIN OPERADOR
REST--------------------------------------
------------------------------- OPERADOR
SPREAD--------------------------------------
es lo opuesto al operador rest.
var args= [1,2,3];
function miFuncion (x,y,z){
var ww=x+y+z;
console.log(args) // salida: [1,2,3]
console.log(ww) // 6
}
miFuncion(...args) // aqui tu envias la cantidad de parametros definidas en la
declaracion del arreglo

----------------------------FIN OPERADOR
SPREAD--------------------------------------
---------------------------FIN
FUNCIONES.------------------------------------------------
-------------------------------------
DESESTRUCTURACION----------------------------------------------
asignación de desestructuración para extraer valores de los objetos
const user = { name: 'John Doe', age: 34 };
const name = user.name; // forma normal
const age = user.age; // forma normal
const { name:username, age:userage } = user; // forma desestructurada. // hace los
mismo que las 2 lineas anteriores
esto se lee de la sgte forma:
el valor de user.name se lo asignas a la nueva variable llamada username
var [a,b]=[8,6];
console.log (a)
// asignacion de variables como arreglos, pero sin ser arreglos. Nota que a, no es
un arreglo, es una variable numerica.
var [a,b]=[b,a] // es necesario volver a definir con var
-------------------------------------FIN
DESESTRUCTURACION-------------------------------------------

-----------------------
OPERADORES--------------------------------------------------------

operadores entrega true o false

== comparador 7=="7" //true
=== comparador estricto de caracter y tipo de caracter 7==="7" //false
!= distinto a 9 !=6 // true
!00 desigualdad estricta // estos 2 inversos es lo opuesto a los anteriores
nota: el comparador === y el != no se debe comparar arreglos, da info falsa
los operadores de comparacion > ó < tambien pueden comparar letras o caracteres
ejm: "hola" > "mundo"
&& = AND // se usa en JS el &&
|| = OR // se usa en JS el ||
!X = NOT // // ejm de NOT ejm: a=8; !(a>5) realmente es true, pero como la
invierte, seria resultado: False
-----------------------FIN
OPERADORES--------------------------------------------------------

-------------------------CONDICIONALES
IF-----------------------------------------------
var a=31
var b=31
if (a>b){
console.log("A es MAYOR que B")
} else if(a<b){
console.log("A es MENOR que B")
} else{
console.log("A es IGUAL que B")
}
Nota importante para las estructuras con else if: si una condicion se
cumple en IF y en un else if, ejecuta la que primera condicion que aplique
if a < 5 hace algo
else if a<10 hace algo
else hace otra cosa // en este ejemplo, si a=3 puedes darte cuenta que a es
menor que 5 y que 10 y NO ejecuta las 2, solo ejecuta la priumera

otra cosa: cuando el if pregunta x un booleano, no hace faltra establecer la

condicion, asi:
var estoesverdadero= true;
 if(estoesverdadero) {
console.log("estoesverdadero")
}
console.log("estoes falso")

-----------------------FIN CONDICIONALES
IF-----------------------------------------------
-------------------- OPERADORES TERNARIOS y TERNARIOS
MULTIPLES-----------------------------
basicamente es un if pero en una sola linea.
ejm:
var a= 3;
var b=5;
console.log (a>b ? a+2 : b*3 ) // esto quiere decir que si a es > b ejecuta a+2 y
en caso contrario ejecuta b*3
otro caso multiple
function casomultiple(a,b){
return a==b ? "a y b son iguales"
: a>b ? "a es mayor que b"
: "a es menor que b"
}
console.log (casomultiple(3,5))

------------------FIN OPERADORES TERNARIOS y TERNARIOS

MULTIPLES-----------------------------

-------------------------------
SWITCH-----------------------------------------------
SWITCH(valor) {
case 1:
respuesta="alpha"
break;
case 2:
respuesta="betha"
break;
case 3: // si se pegan asi, uno detras de otro, indica que para los casos 3 4 y
5 el resultado es lo mismo
case 4: // ó sea tiene el mismo tratamiento que el case: 5 que si lleva
instruccion
case 5:
respuesta="multiplex"
break;
// ---- y asi sucesivamente
case 77:
respuesta="XXXXXX"
break;
defaul: // esto es opcional y significa que si no hay ninguno de los valores
anteriores, recoge todo las opciones que quedan
respuesta="lo que queda "
break;
// lo imporatante aqui es que los case no llevan (=) ni llevan ({}) y terminan
con :
ademas cada case debe terminar con break;
 tambien es lo mismo con caracteres en vez de numero
}
-----------------------FIN SWITCH-----------------------------------------------
RETORNO ANTICIPADO: Ocurre cuando necesitas salir de una funcion antes de que
termine,
se le coloca return undefined. puede ser dentro de un if anidado a una function

----------------------- OBJETO -----------------------------------------------

El objeto se defien asi:
var miPerro = { }; // asi se declara un objeto y esta vacio
var miPerro = {
"nombre": "Gino",
"edad": 5, // las prodiedades del lado izquierdo y los valores del derecho
"colores": ["marron","blanco"],
};
para acceder asi: console.log(miPerro.nombre); // da como resultado: "Gino"
console.log(miPerro["nombre"]); // esta es la forma de acceder con notacion de
corchete
esto es importante: propiedad de un objeto como variable, solo se hace desde la
notacion de corchete.
var propiedad="nombre";
console.log(miPerro["propiedad"]);
Tambien es importante usar la notacion de corchete cuando la propiedad (lado
izquierdo)
tiene el nombre con espacios en blanco o cuando esta definido
como variable (esto es importante) de esta forma:
var miPerro = {
nombre: "Gino", // en este caso nombre no tiene comillas ("") por lo tanto
la propiedad nombre se define como variable para luego en otra parte del
codigo poder trabajarla como variable
"edad": 5,
"colores": ["marron","blanco"],
};

para cambiar el valor de una propiedad se hace asi:

miPerro.edad=21;
y para cambiar el valor dentro del objeto de una propiedad:
miPerro.colores.push("Negro") // push del comando para agregar al final un
elemento
tambien se puede modificar el contenido de "colores"
miPerro.colores= [negro, marron, blanco];
para eliminar propiedades se usa asi:
delete miPerro.otrosdatos
VERIFICAR PROPIEDADES (escribes el nombreDelObjeto.hasOwnProperty("propiedad"));
// esto debe traer TRUE o FALSE
ejm: miPerro.hasOwnProperty("colores")
OJO: .hasOwnProperty("propiedad") no recorre todo el array, solo revisa
en la posicion en que se encuentra

OBJETOS COMPLEJOS
una veriable con esta connotacion es una variable de objetos:
var nombrevar = [
{"propiedad1":"valor1,
"propiedad2":"valor2
},
{"propiedad1":"valor3,
"propiedad2":"valor4
}
]
---------------------EJEMPLO OBJETO COMPLEJO-----------------------------
console.log("OBJETOS COMPLEJOS");
var ordenesDePizza = [
{
"tipo":"margarita",
"tamaño":"individual",
"precio":5.67,
"toppings":["extra queso","champiñones","piña"],
"parallevar":true
},
{
"tipo":"4 quesos",
"tamaño":"familiar",
"precio":18.34,
"toppings":["extra queso","pimenton","piña"],
"parallevar":false
},
]
console.log(ordenesDePizza[0])
// aqui muestra todo el primer arreglo (corresponde a pizza margarita)
// seria: margarita, individual, 5,67, toppings[bla, bla bla], true
console.log(ordenesDePizza[1].tipo)
// aqui muestra solo "precio" del segundo arreglo (corresponde a "18.34")
//o tambien en formato corchete:
console.log(ordenesDePizza[1]["tipo"])
// para acceder al arreglo toppings dentro del arreglo seria asi:
console.log(ordenesDePizza[0]["toppings"][1]) // aqui coloca
// champiñones poruqe es el arreglo de toppings de pizza margarita
------------------ FIN EJEMPLO OBJETO COMPLEJO---------------------------
nota: para asignar un valor vacio a un objeto asi: "toppings": []
-----------------------OBJETOS ANIDADOS------------------------------------------
var miReceta={
"descripcion":"mi postre favorito",
"costo": "15,6",
"ingredientes": {
"masa":{
"harina":"100 grs",
"sal": "1 cucharadita",
"agua": "1 taza"
},
"cobertura": {
"azucar": "120 grs",
"chocolate": "4 cucharadas",
"mantequilla": "200 grs"
},
}
};
console.log(miReceta["ingredientes"]["cobertura"]["chocolate"])
//console.table(miReceta)
--------------------FIN OBJETOS ANIDADOS----------------------------------------
---------------------- ARREGLOS ANIDADOS----------------------------------------
var misPlantas=
[
{
tipo: "flores",
lista:
["rosas",
"tulipanes",
"dientes de león"
 ]
},
{
tipo: "arboles",
lista:
["abeto",
"pino",
"abedul"
]
}
];
console.log(misPlantas[0].tipo)
console.log(misPlantas[1].lista[2]) // este muestra Abedul
--------------------FIN ARREGLOS ANIDADOS----------------------------------------

-----------------------FIN OBJETO-----------------------------------------------

--------------------------- CICLO WHILE------------------------------------------

estructura:
while (condicion se cumpla){ codigo aqui}
ejm:
var miArreglo =[]

while (i<10){
miArreglo[i]=i,
// miArreglo.push(i)
++i;
}
console.log (miArreglo)
console.log (miArreglo.length)

var miArreglo =[1,2,3,4,17,23,57,43443,11]

while (miArreglo.length>4){
miArreglo.pop(),
console.log (miArreglo)
}
--------------------------FIN CICLO
WHILE------------------------------------------
----------------------------CICLO DO
WHILE------------------------------------------
el do while, ejecuta si o si la primera vez y para el segundo ciclo es que pregunta
var i=10;
do {
console.log(i)
i++
} while (i<5);

-----------------------FIN DO CICLO
WHILE------------------------------------------
-------------------------------- CICLO
FOR------------------------------------------
estructura:
for (desde;condicion que se cumpla; incremento){ codigo aqui}
ejm:
var miArreglo =[];
for(var i=0;i<10;i++){ // tambien se puede incrementar (i+=2 de 2 en 2)o
decrementar (i-=4)
miArreglo.push(i)
 console.log(miArreglo);
}
console.log(miArreglo+"arreglo con FOR");
-----------------------FIN CICLO FOR------------------------------------------
----------------------------CICLO DO
WHILE------------------------------------------
en el ciclo DO While, la condicion se ejecuta al menos una vez.
i=16
do { haces algo
i++
} while (i<5) // en este caso, entra, ejecuta, pregunta y como no se cumple
la condicion, se sale x completo.
-----------------------FIN CICLO DO
WHILE------------------------------------------

mostrar una tabla x consola en JS con: --> console.table(arreglo)

para ver la longitud de un arreglo seria: arreglo.lenght, por supuesto con un
console.log
para ordenar un arreglo seria: arr1.sort() // te lo arregla dengtrto del mismo
arreglo, por lo tanto queda ya arreglado.

----------------------------FIN JavaScript
JS----------------------------------------------

-------------------Structured Query Language.

SQL-----------------------------------------
para ver el phpmyadmin desde otro equipo, usar: http://192.168.122.151/phpmyadmin/
usuario: enzo clave: XXXXXXXX
hay q e ver si se mantiene la ip 192.168.122.151.
-------------------FIN Structured Query Language.
SQL-----------------------------------------
-------------------------------NODEJS-----------------------------------------
Node.js // para levantar y gestionar servidores
se instala segun:
https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-
20-04 // option 1 para instalar node
para comprobar se abre un terminal y lanzas node --version
abres tu editor de texto escribes un programa con extension .js y lo ejectustas
directamente desde terminal asi:
node nombreprograma.js y debe mostar su salida en el terminal.
OJO: se recomienda llamar un archivo de js desde otro archivo de js, es como llamar
a una libreria.
entonces para hacer eso, necesitas los sgte:
filemain.js y filelib.js
en filemain.js debes declara una constante con todo el contenido de filelib.js asi:
const filelib = require('./filelib.js'); // aqui asignas todo el contenido del
filelib a un objeto en el filemain.js
importante: cuando vayas a llamar la funcion del filelib.js debes llamarlo con la
notacion de punto.
ejm: console.log(filelib.suma(10,20))
y en filelib.js debes exportar cada funcion que quieras usar en filemain.js asi:
exports.suma=suma; // aqui estas diciendo que debes exportar la funcion suma que
esta en el archivo filelib.js
//es engorroso entenderlo pero es muy facil.
otra cosa: puedes llamar a funciones internas de la misma forma que antes, solo que
no lleva el ./
ejm: const os = require('os') // os es una funcion de una libreria interna de
nodejs.
puedes ver las funciones internas en https://nodejs.org/en/docs/
aqui falta contenido del curso del video de 1.42horas muy bueno
NPM es para instalar paquetes de JS y tS
NPM: Node Package Manager y su pagina de descarga de esos modulos
https://www.npmjs.com/
primero debes instalar NMP desde terminal con: sudo apt install npm
luego para instalar un paqute, vas a la pagina ves cual quieres (vimos uno con
caractereisticas de colores) y lo instalamos tambien desde terminal justo dentro de
la carpeta donde esta el contenido de tu programa de js.
asi: npm install colors o tambien npm i colors (i es lo mismo que install) // esto
esta definido en la web de npm y en la seccion de colors elegido.

---------------------------FIN NODEJS-----------------------------------------