Microverse-trial-2/index.html at master · root-code-software/Microverse-trial-2 · GitHub

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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Fork Me! FCC: Test Suite Template</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

  <nav class="navbar" id="navbar">
    <header>
      JavaScript Basics
    </header>
    <a class="nav-link" href="#Introduction">
      Introduction
    </a>
    <a class="nav-link" href="#Output">
      Output
    </a>
    <a class="nav-link" href="#Comments">
      Comments
    </a>
    <a class="nav-link" href="#Arrays">
      Arrays
    </a>
    <a class="nav-link" href="#DateObjects">
      Date Objects
    </a>
  </nav>


  <main id="main-doc" class="content">
    <section class='main-section'>
      <header id="Introduction">
        <h1> Introduction</h1>
      </header>
      <ul>
      Topics
        <li>Introduction</li>
        <li>OutPuts</li>
        <li>Comments</li>
        <li>Arrays</li>
        <li>Date Objects</li>
      </ul>
      <p>
        One of many JavaScript HTML methods is getElementById().
      </p>
      <p>
        This example uses the method to "find" an HTML element
        (with id="demo") and changes the element content (innerHTML)
        to "Hello JavaScript":
      </p>
      <p>
        JavaScript Can Change HTML Attribute Values
      </p>
      <p>
        In this example JavaScript changes the value of the src (source)
        attribute of an
        <pre>&lt;img&gt;</pre> tag
      </p>
      <p>
        JavaScript Can Change HTML Styles (CSS)
      </p>
      <p>
        Changing the style of an HTML element, is a variant of changing
        an HTML attribute:
      </p>
      <h5>Example</h5>
      <code>
          document.getElementById("demo").style.fontSize = "35px";
        </code>
      <p>
        JavaScript Can Hide HTML Elements
      </p>
      <p>
        Hiding HTML elements can be done by changing the display style:
      </p>
      <h5>Example</h5>
      <code>
          document.getElementById("demo").style.display = "none";
      </code>
      <p>JavaScript Can Show HTML Elements Showing hidden HTML elements
        can also be done by changing the display style:
      </p>

      <p>Example document.getElementById(&quot;demo&quot;).style.display = &quot;block&quot;;</p>
    </section>
    <section id="Output">

      <p>
        <h1>JavaScript Output</h1> JavaScript Display Possibilities JavaScript can &quot;display&quot; data in different
        ways:
        JavaScript can "display" data in different ways:
        <ul>
        <li>Writing into an HTML element, using innerHTML.</li>
        <li>Writing into the HTML output using document.write().</li>
        <li>Writing into the HTML output using document.write().</li>
        <li>Writing into an alert box, using window.alert().</li>
        <li>Writing into the browser console, using console.log().</li>
        </ul>
      </p>
      <h5>Example</h5>
      <pre><code>
      &lt;!DOCTYPE html>
      &lt;html>
        &lt;body>

          &lt;h1>My First Web Page&lt;/h1>
          &lt;p>My First Paragraph&lt;/p>

          &lt;p id="demo">&lt;/p>

          &lt;script>
          document.getElementById("demo").innerHTML = 5 + 6;
          &lt;/script>

        &lt;/body>
      &lt;/html>
          </code></pre>

      <p>Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing
        into an alert box, using window.alert(). Writing into the browser console, using console.log(). Using innerHTML
        To access an HTML element, JavaScript can use the document.getElementById(id) method.</p>

      <p>The id attribute defines the HTML element. The innerHTML property defines the HTML content: </p>

    </section>
    <section id="Comments">
      <p>
        <h1>JavaScript Comments</h1>
      </p>
      <ul>
        JavaScript Comments
        <li>creating multi-line comments</li>
        <li>creating single line comments</li>
        <li>Comments</li>
        <li>creating single line comments</li>
        <li>creating multi-line comments</li>

      </ul>

      <p>JavaScript comments can be used to explain JavaScript code, and to make it more readable.</p>

      <p>JavaScript comments can also be used to prevent execution, when testing alternative code.</p>

      <p>Single Line Comments Single line comments start with //.</p>

      <p>Any text between // and the end of the line will be ignored by JavaScript (will not be executed).</p>

      <p>This example uses a single-line comment before each code line:</p>

      <p>Example // </p>
<code>Change heading: document.getElementById(&quot;myH&quot;).innerHTML = &quot;My First Page&quot;;</code>

      <p>// Change paragraph:
        <code> document.getElementById(&quot;myP&quot;).innerHTML = &quot;My first paragraph.&quot;; </code>
        This
        example uses a single line comment at the end of each line to explain the code:</p>

      <p>Example <code>var x = 5;</code> // Declare x, give it the value of 5 <code>var y = x + 2;</code> // Declare y, give it the value of x + 2
        Multi-line Comments Multi-line comments start with /* and end with */.</p>

      <p>Any text between /* and */ will be ignored by JavaScript.</p>

      <p>This example uses a multi-line comment (a comment block) to explain the code:</p>

      <p>Example /* The code below will change the heading with id = &quot;myH&quot; and the paragraph with id =
        &quot;myP&quot; in my web page: */
        <code> document.getElementById(&quot;myH&quot;).innerHTML = &quot;My First
            Page&quot;;</code>
        <code>document.getElementById(&quot;myP&quot;).innerHTML = &quot;My first paragraph.&quot;;</code> It is most
        common to use single line comments. Block comments are often used for formal documentation.</p>

    </section>


    <section class='main-section'>
      <header id="Arrays">
        <h1>JavaScript Arrays</h1>
      </header>
      <p>JavaScript arrays are used to store multiple values in a single variable.</p>

      <h5>Example</h5>
    <code>  var cars = ["Saab", "Volvo", "BMW"];</code>

    <p>  What is an Array?
      An array is a special variable, which can hold more than one value at a time.  </p>

    <p>  If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this:</p>
<code>var car1 = &quot;Saab&quot;;  var car2 = &quot;Volvo&quot;;  var car3 = &quot;BMW&quot;;  </code>
    <p>  However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300?</p>

    <p> The solution is an array!</p>

    <p> An array can hold many values under a single name, and you can access the values by referring to an index number.</p>

    <p> Creating an Array  Using an array literal is the easiest way to create a JavaScript Array.</p>

    <p> Syntax:</p>
<code>var array_name = [item1, item2, ...];  Example  var cars = [&quot;Saab&quot;, &quot;Volvo&quot;, &quot;BMW&quot;];</code>
    <p>   Spaces and line breaks are not important. A declaration can span multiple lines:</p>

    <p> Example  </p>
    <code>var cars = [  &quot;Saab&quot;,  &quot;Volvo&quot;,  &quot;BMW&quot;  ];</code>
    </section>

    <section class='main-section'>
      <header id="DateObjects">
        <h1>JavaScript Date Objects</h1>
      </header>


    <p>JavaScript Date Object lets us work with dates:</p>

    <p>Wed Aug 07 2019 13:21:14 GMT-0500 (hora de verano central)</p>

    <p> Example <code>var d = new Date();</code> JavaScript Date Output By default, JavaScript will use the browser's time zone and display a date as a full text string:</p>

    <p>Wed Aug 07 2019 13:21:14 GMT-0500 (hora de verano central)</p>

    <p>You will learn much more about how to display dates, later in this tutorial.</p>

    <p>Creating Date Objects Date objects are created with the <code>new Date()</code> constructor.</p>

    <p>There are 4 ways to create a new date object:</p>

    <ul>
      <li>
          new Date()
      </li>
      <li>
          new Date(year, month, day, hours, minutes, seconds, milliseconds)
      </li>
      <li>
          new Date(milliseconds)
      </li>
      <li>
          new Date(date string)
      </li>
    </ul>
    <h6><pre>new Date() </pre></h6>
    <p><pre>new Date() </pre> creates a new date object with the current date and time:</p>

    <p>Example <code>var d = new Date();</code> Date objects are static. The computer time is ticking, but date objects are not.</p>

    <p>new Date(year, month, ...) new Date(year, month, ...) creates a new date object with a specified date and time.</p>

    <p>7 numbers specify year, month, day, hour, minute, second, and millisecond (in that order):</p>

    <p>Example <code>var d = new Date(2018, 11, 24, 10, 33, 30, 0); </code>Note: JavaScript counts months from 0 to 11.</p>

    <p>January is 0. December is 11.</p>

    <p>6 numbers specify year, month, day, hour, minute, second:</p>

    <p>Example <code>var d = new Date(2018, 11, 24, 10, 33, 30);</code> 5 numbers specify year, month, day, hour, and minute:</p>

    <p>Example <code>var d = new Date(2018, 11, 24, 10, 33);</code> 4 numbers specify year, month, day, and hour:</p>

    <p>Example <code>var d = new Date(2018, 11, 24, 10);</code> 3 numbers specify year, month, and day:</p>

    <p>Example <code>var d = new Date(2018, 11, 24);</code></p>

 </main>

  <script src="js/index.js"></script>
</body>

</html>