import{_ as a,c as s,o as t,ah as i}from"./chunks/framework.j4Nev8bF.js";const u=JSON.parse('{"title":"Introducing JavaScript","description":"","frontmatter":{},"headers":[],"relativePath":"rebel_coding/step2.md","filePath":"rebel_coding/step2.md"}'),n={name:"rebel_coding/step2.md"};function o(l,e,r,p,h,c){return t(),s("div",null,[...e[0]||(e[0]=[i(`<h1 id="introducing-javascript" tabindex="-1">Introducing JavaScript <a class="header-anchor" href="#introducing-javascript" aria-label="Permalink to “Introducing JavaScript”">​</a></h1><hr><p>If HTML is the framing of our building, and CSS provides the aesthetic; JavaScript is the plumbing and electrical ~ the gadgetry!</p><p>JavaScript is HUGE ~ there is no way that we could even give you a preview of everything. Instead we cover the basic uses for building preliminary interactivity, and the basics of consuming APIs.</p><p>So now let’s get into the muck and mire of coding, and start by learning some of the basic tools in our cache!</p><h2 id="variables" tabindex="-1"><a href="#variables">#</a> Variables <a class="header-anchor" href="#variables" aria-label="Permalink to “# Variables”">​</a></h2><p>Variables are the building blocks of code. They help us store information, and allow us to retain information changes while interacting with other variables and code chunks.</p><p>You can see variations of the following <em>objects</em> in almost all of the computer languages you ever investigate.</p><p>So let’s begin!</p><h3 id="integers-floats" tabindex="-1">Integers &amp; Floats <a class="header-anchor" href="#integers-floats" aria-label="Permalink to “Integers &amp; Floats”">​</a></h3><p>Integers are whole numbers, and they can be positive or negative.</p><p>Floats, on the other hand, are numbers that contain decimals, i.e. <code>12.4241.</code></p><p>We’ll see a bit later how this distinction is used, though it is an important delineation of which to be aware!</p><h3 id="strings" tabindex="-1">Strings <a class="header-anchor" href="#strings" aria-label="Permalink to “Strings”">​</a></h3><p>Strings are <em>a collection of alphanumeric characters and symbols enclosed by quotations</em>, single or double, it doesn’t matter which.</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span>    var item = &#39;some string&#39;;</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    let item3 = &#39;some other string&#39;;</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    const newItem = &#39;new string&#39;;</span></span></code></pre></div><p>The first two lines, using <em>var</em> and <em>let</em>, have the same meaning. Each set a variable that can later be changed, or is <em>mutable</em>.</p><p>Opposingly, <em>const</em> sets a variable that <em>can not</em> be changed, or is <em>immutable</em>.</p><h3 id="boolean" tabindex="-1">Boolean <a class="header-anchor" href="#boolean" aria-label="Permalink to “Boolean”">​</a></h3><p>Boolean values are <em>true/false</em> values.</p><p>Translated into machine code, values are either a 0 or 1.</p><p><code>var target = true;</code></p><p><strong>or</strong></p><p><code>var target = 1;</code></p><p>Notice that in JavaScript the true or false values are spelled with a lower-case first-letter; this too is specific to JavaScript.</p><p>In Python the True &amp; False need to be capitalized to be treated as boolean variables.</p><h3 id="lists" tabindex="-1">Lists <a class="header-anchor" href="#lists" aria-label="Permalink to “Lists”">​</a></h3><p>Lists are a collection of objects separated by commas and enclosed by square brackets [].</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span>    let newList = [&#39;some&#39;, &#39;list&#39;, &#39;of&#39;, &#39;strings&#39;, [&#39;with another list&#39;, &#39;within&#39;, 235], true,];</span></span></code></pre></div><p>The objects do not all need to be of the same type.</p><h5 id="list-indexes" tabindex="-1">List Indexes <a class="header-anchor" href="#list-indexes" aria-label="Permalink to “List Indexes”">​</a></h5><p>At times, one may wish to obtain an object by its position in a list, or an operation of similar effect.</p><p>This would mean, to obtain objects by their list index number.</p><p>In both JavaScript and Python, lists begin at 0.</p><p>In our example newList from above, if I wanted to get the first object in the list I would use the following code:</p><p><code>let specificItem = newList[0]</code></p><p><strong>If we wanted the third object</strong></p><p><code>let item3 = newList[2]</code></p><p>Why is that?</p><p>Notice that we are not using quotations around this number, and that it is placed with square-brackets.</p><p>How would you get the second item of the list within our example list?</p><h3 id="dictionary" tabindex="-1">Dictionary <a class="header-anchor" href="#dictionary" aria-label="Permalink to “Dictionary”">​</a></h3><p>Dictionaries are a collection of <em>key-value pairs enclosed by curly brackets</em>.</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span>    var target = {&#39;text&#39;: &#39;some string&#39;, &#39;published&#39;: false, &#39;colors&#39;: [&#39;red&#39;, &#39;blue&#39;,],};</span></span></code></pre></div><p>Breaking this code down, the <em>key</em> is defined by a string, and separated from the <em>value</em> by a colon.</p><p>Each <em>key/value pair</em> is then separated by a comma.</p><p>This is all enclosed within <em>curly brackets</em> {}.</p><p>Notice again how the value can be any type of variable.</p><h2 id="the-moving-parts" tabindex="-1"><a href="#the-moving-parts">#</a> The Moving Parts <a class="header-anchor" href="#the-moving-parts" aria-label="Permalink to “# The Moving Parts”">​</a></h2><h3 id="if-else-statement" tabindex="-1">If-Else Statement <a class="header-anchor" href="#if-else-statement" aria-label="Permalink to “If-Else Statement”">​</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span>    if (x &lt; y) {</span></span>
<span class="line"><span>      var display = &quot;Welcome to Rebel Coding 101&quot;;</span></span>
<span class="line"><span>    } else if (x &lt; z) {</span></span>
<span class="line"><span>      var display = &quot;Welcome to Rebel Coding 102&quot;;</span></span>
<span class="line"><span>    } else {</span></span>
<span class="line"><span>      var display = &quot;We haven&#39;t planned this far ahead yet :/&quot;</span></span>
<span class="line"><span>    }</span></span></code></pre></div><p>Read it out-loud:</p><p>If <em>x is less than y</em>, the variable <em>display</em> equals a certain string.</p><p><em>Else, if x</em> is not less than <em>y and is less than z</em>, <em>display</em> equals a different string.</p><p>If <em>x is larger than them all, using the else</em> statement, <em>display</em> is set to equal a third string.</p><h3 id="for-loop" tabindex="-1">For-Loop <a class="header-anchor" href="#for-loop" aria-label="Permalink to “For-Loop”">​</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span>    for (var i = 0; i &lt; 9; i++) {</span></span>
<span class="line"><span>     console.log(i);</span></span>
<span class="line"><span>     // more statements</span></span>
<span class="line"><span>    }</span></span></code></pre></div><p>Read it out:</p><p>For <em>variable i</em> that equals zero, when <em>i is less than 9, i</em>++. <em>console.log(i);</em> ?</p><p>console.log() prints out whatever is contained in the parentheses.</p><p>In JavaScript the shortened version to increment a value by 1 is <em>++</em>.</p><p>It’s different in Python (+=1).</p><p>Search for other variations; also what sequence of numbers does this for-loop print do you think?</p><h3 id="functions" tabindex="-1">Functions <a class="header-anchor" href="#functions" aria-label="Permalink to “Functions”">​</a></h3><p>Functions are where it all comes together, in a sense.</p><p>First we define an object that consumes other objects, and uses them to create an output.</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span>    var blump = function(prop1, prop2){</span></span>
<span class="line"><span>                    var a = prop1</span></span>
<span class="line"><span>                    var b = prop2</span></span>
<span class="line"><span>                    var c = a/b</span></span>
<span class="line"><span>                return c</span></span>
<span class="line"><span>                };</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    blump(5, 3)</span></span></code></pre></div><p>So let&#39;s read this out-loud:</p><p>Variable <em>blump</em> is a function that consumes/uses two objects, <em>prop1</em> and <em>prop2</em>.</p><p>Within our function these two objects are made into variables <em>a and b</em>, which are then used to create a third variable <em>c</em>.</p><p>This last variable <em>c</em> is then returned by our function.</p><blockquote><p>QN: Mathematical operators Review</p></blockquote><p>Remember when we made the distinction between integers and floats ?</p><p>Here is where it comes into play; arithmetic operations are not notated as you may have learned them in school.</p><p>Sure addition still uses the “+” sign.</p><p>Subtraction still uses the “-” sign, and division still uses the “/” sign.</p><p>But multiplication uses an asterisk “*”.</p><p>While exponentiation uses the double-asterisk “**”.</p><p>We also have another operator we can use to find the remainders of division.</p><p>This is called the modulus operator, “%”.</p><p>Pretty nifty, eh.</p><h1 id="jquery-the-dom" tabindex="-1">jQuery &amp; the DOM <a class="header-anchor" href="#jquery-the-dom" aria-label="Permalink to “jQuery &amp; the DOM”">​</a></h1><hr><p>We have seen with CSS that we can modify the aesthetics of our webpages. Be this by adding colors, changing font sizes, and other modifications. But what if you could &quot;automate that&quot;? How would you do such a thing?</p><p>First things first, we need to import a few libraries:</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span>    &lt;script src=&quot;bootstrap.min.js&quot;&gt;&lt;/script&gt;</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    &lt;script src=&quot;jquery.min.js&quot;&gt;&lt;/script&gt;</span></span></code></pre></div><p>Then, we need to <em>hook into</em> the HTML structure, or the DOM, Document Object Model.</p><p>We do this using the dollar-sign notation, which is specific to jQuery, that allows us to reach into the HTML code and make changes!</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span>    &lt;script&gt;</span></span>
<span class="line"><span>    $(&quot;.jobLabel a&quot;).on(&quot;click&quot;, function(){</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>        var target = $(this).attr(&quot;rel&quot;);</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>        $(&quot;#&quot;+target).show().siblings(&quot;div&quot;).hide();   </span></span>
<span class="line"><span>    });</span></span>
<span class="line"><span>    &lt;/script&gt;</span></span></code></pre></div><p>While this may appear to be a complex-looking function, let&#39;s disassemble it and see what&#39;s going on:</p><h3 id="the" tabindex="-1">The $ <a class="header-anchor" href="#the" aria-label="Permalink to “The $”">​</a></h3><p>The dollar-sign allows us to access the DOM.</p><p>Once inside the DOM, we can identify specific elements and change them!</p><p>Parenthesis contain things (<em>duh</em>), and contained in these first parenthesis are set of items separated by a space, <em>.jobLabel</em> and <em>a</em>.</p><p>We recognize the syntax of <em>.jobLabel</em> from CSS, and determine that it indicates a class, while the <em>a</em> is an html tag!</p><p>So now we have identified a specific set of objects on the webpage/DOM with which to work!</p><p><code>$(&#39;.jobLabel a&#39;)</code> which means all of the <em>a</em> tags with the class &#39;jobLabel&#39;.</p><h3 id="interactivity" tabindex="-1">Interactivity <a class="header-anchor" href="#interactivity" aria-label="Permalink to “Interactivity”">​</a></h3><p>Now that we have the objects discerned, what do we do with them?!</p><p>There is a period after our parenthetical statement, followed by the word <em>on</em>, and another set of parentheses.</p><p>This is called &quot;chaining&quot; operations.</p><p>We have an action, or set of actions: .on(&#39;click&#39;,function(){});</p><p>To translate, what we have so far $(&#39;.jobLabel a&#39;).on(&#39;click&#39;, function(){});:</p><p>For all <em>a</em> tags with the class &quot;jobLabel&quot; ... when the element is clicked perform the following function.</p><h3 id="acting" tabindex="-1">Acting <a class="header-anchor" href="#acting" aria-label="Permalink to “Acting”">​</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span>    var target = $(this).attr(&quot;rel&quot;);</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    $(&quot;#&quot;+target).show().siblings(&quot;div&quot;).hide();</span></span></code></pre></div><p>Within this function we declare and define a variable called <em>target</em>.</p><p>Next, we set this variable using our dollar-sign, while specifying a specific property attribute, <em>rel</em>.</p><p>This attribute value is then used to identify a third object.</p><p>Finally, we have our action.</p><p>To <em>show</em> our selected item, while <em>hiding</em> all of its <em>siblings</em>.</p><p>Within the function we are able to affect,and change, the DOM.</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span>    var target = $(this).attr(&#39;rel&#39;);</span></span>
<span class="line"><span>    $(&quot;#&quot;+target).show().siblings(&quot;div&quot;).hide();</span></span></code></pre></div><p>Notice how each line ends with a semicolon.</p><p>And how each parenthetical statement, or bracketed statement, is closed.</p><p>Lastly, I want us to notice the use of show() and hide().</p><p>While other parentheses have items within them, these parentheses are left empty ...</p><p>In this instance the parenthesis are identifying a function that is to be performed, and requires no parameters</p><h1 id="importing-external-scripts-cdn-s" tabindex="-1">Importing External Scripts &amp; CDN’s <a class="header-anchor" href="#importing-external-scripts-cdn-s" aria-label="Permalink to “Importing External Scripts &amp; CDN’s”">​</a></h1><hr><p>Earlier we just pulled in Bootstrap and jQuery from our local folders … this was easy.</p><p>Though most of the time we will need to, or want to, pull scripts from external sources, one type of which are called CDN’s, or content delivery networks.</p><p>These are locations that contain our necessary files pre-packaged and ready to be expedited, super-quickly, to our production websites.</p><p><a href="https://code.jquery.com/" target="_blank" rel="noreferrer">jQuery CDN</a></p><p><a href="https://www.bootstrapcdn.com/" target="_blank" rel="noreferrer">Bootstrap CDN</a></p>`,125)])])}const m=a(n,[["render",o]]);export{u as __pageData,m as default};
