-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
115 lines (94 loc) · 6.57 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Basic</title>
</head>
<body>
<a href="https://www.w3schools.com/js/default.asp" target="_blank" rel="noopener noreferrer">
<h1>Javascript básico, parte I</h1>
</a>
<a href="https://www.w3schools.com/js/js_output.asp" target="_blank" rel="noopener noreferrer">
<h2>Uso de la consola</h2>
</a>
<p>El mejor método de depuración de Javascript es la consola, esto te permitirá saber todo lo que está haciendo tu programa, te recomiendo que la uses desde el principio para que vayas adquiriendo la habilidad. Para acceder a ella entras en cualquier
navegador y haces click derecho y te saldrá una opción de <strong>inspeccionar</strong>, al darle click, saldrá algo como esto:</p>
<img src="./img/inspector.png" alt="inspector del navegador" style="width: 350px;">
<p>En la pestaña inspector, podemos ver el html de la web, sus estilos y muchos datos más que iremos aprendiendo en el camino, a un lado (según como esté configurado) estará la vista de tu web que podemos cambiar de tamaño, por ejemplo ver como se vería
en móvil. Si das click a la pestaña que dice <strong>Consola</strong> tenemos una terminal en la que podemos escribir código javascript, también todo lo que imprimamos desde nuestros archivos de js y los errores que nos tire el programa, esto
luce así:</p>
<img src="./img/consola.png" alt="consola del navegador" style="width: 350px;">
<p>Para poder imprimir en la consola desde nuestros archivos de javascript, podemos usar la función <strong>console.log()</strong>, dentro del paréntesis pondremos lo que queremos imprimir.</p>
<a href="https://www.w3schools.com/js/js_datatypes.asp" target="_blank" rel="noopener noreferrer">
<h2>Tipos de datos</h2>
</a>
<p>En Javascript los tipos de datos se clasifican en 2, primitivos y objetos.</p>
<h3>Primitivos</h3>
<ul>
<li><strong>String: </strong>es una secuencia de caracteres, usa comillas.</li>
<li><strong>Number: </strong>números enteros o decimales separados con un punto.</li>
<li><strong>BigInt: </strong>son grandes números, con una precisión mayor de 15 dígitos.</li>
<li><strong>Boolean: </strong>solo tiene dos valores, true o false (verdadero o falso).</li>
<li><strong>Undefined: </strong>una variable que no tiene valor, es de tipo undefined.</li>
<a href="https://midu.dev/javascript-symbols-que-son-para-que-sirven/#:~:text=En%20resumen%2C%20los%20s%C3%ADmbolos%20son,o%20como%20nombres%20de%20eventos." target="_blank" rel="noopener noreferrer">
<li><strong>Symbol: </strong>Este tipo de dato no lo usaremos pero te he dejado un recurso por si quieres indagar más.</li>
</a>
<li><strong>Null: </strong>primitivo especial, es un valor nulo o vacío y devuelve un objeto inválido.</li>
</ul>
<h3>Objetos</h3>
<p>Los objetos se clasifican en 2, <strong>object</strong> y <strong>function</strong></p>
<h4>Object</h4>
<ul>
<li><strong>Date:</strong>es un objeto de tipo fecha que es estático.</li>
<li><strong>RegExp: </strong>es una expresión regular que es una secuencia de caracteres que forma un patrón de búsqueda.</li>
<li><strong>Error: </strong>son objetos que javaScript crea cuando ocurre alguno y tiene dos propiedades, nombre y mensaje.</li>
<li><strong>Array: </strong>un array o matriz es un dato especial que puede contener más de un valor, se declara con los [] y tienen índices numéricos y secuenciales que empiezan en 0.</li>
<li><strong>Object: </strong>un objeto puede contener varios valores y se diferencia de los arrays porque contienen pares de llave y valor (key - value), esto quiere decir que el índice puede ser una cadena de texto, se declara con {}</li>
</ul>
<h4>Function</h4>
<ul>
<li><strong>Function:</strong> es un bloque de código que ejecuta tareas, lo veremos más adelante.</li>
<li><strong>Class:</strong> son plantillas que sirven como molde para crear objetos, lo veremos más a profundidad cuando empecemos con programación orientada a objetos.</li>
</ul>
<a href="https://www.w3schools.com/js/js_variables.asp" target="_blank" rel="noopener noreferrer">
<h2>Variables</h2>
</a>
<p>Una variable no es más que un espacio de almacenamiento en la memoria del programa, que contendrá valores a los que podremos acceder desde nuestro programa. Existen de 3 tipos:</p>
<ul>
<li><strong>var:</strong> variable de alcance global.</li>
<li><strong>let:</strong> variable de alcance local.</li>
<li><strong>const:</strong> constante de alcance local.</li>
</ul>
<p>Para escribir una variable existen unas reglas:</p>
<ol>
<li>Para declarar una variable empezamos por la palabra reservada var, let o const, seguido del nombre de la variable que por convención empezará en minúscula.</li>
<li>El nombre deberá ser único en todo el programa.</li>
<li>El nombre deberá ser descriptivo.</li>
<li>Los nombres pueden contener letras, dígitos, guiones bajos y signos de dólar.</li>
<li>Los nombres deben comenzar con una letra.</li>
<li>Los nombres también pueden comenzar con $ y _ </li>
<li>Los nombres distinguen entre mayúsculas y minúsculas (case sensitives).</li>
<li>Las palabras reservadas no se pueden utilizar como nombres.</li>
</ol>
<a href="https://www.w3schools.com/js/js_operators.asp" target="_blank" rel="noopener noreferrer">
<h2>Tipo de Operadores</h2>
</a>
<p>Existen varios tipos de operadores, los que más utilizaremos son:</p>
<ul>
<a href="https://www.w3schools.com/js/js_arithmetic.asp" target="_blank" rel="noopener noreferrer">
<li>Operadores aritméticos</li>
</a>
<a href="https://www.w3schools.com/js/js_assignment.asp" target="_blank" rel="noopener noreferrer">
<li>Operadores de asignación</li>
</a>
<li>Operadores de comparación</li>
<li>Operadores de cadena</li>
<li>Operadores lógicos</li>
</ul>
<h2>Ejercicios</h2>
<p>Ahora que sabes un poco de la teoría de Javascript, lo pondremos en práctica, abre el archivo basic.js desde tu visual studio code, que está dentro de esta misma carpeta y sigue los ejercicios que te propongo.</p>
<script src="./basic.js"></script>
</body>
</html>