34 lines
17 KiB
JavaScript
34 lines
17 KiB
JavaScript
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 & Floats <a class="header-anchor" href="#integers-floats" aria-label="Permalink to “Integers & 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 = 'some string';</span></span>
|
||
<span class="line"><span> </span></span>
|
||
<span class="line"><span> let item3 = 'some other string';</span></span>
|
||
<span class="line"><span> </span></span>
|
||
<span class="line"><span> const newItem = 'new string';</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 & 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 = ['some', 'list', 'of', 'strings', ['with another list', 'within', 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 = {'text': 'some string', 'published': false, 'colors': ['red', 'blue',],};</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 < y) {</span></span>
|
||
<span class="line"><span> var display = "Welcome to Rebel Coding 101";</span></span>
|
||
<span class="line"><span> } else if (x < z) {</span></span>
|
||
<span class="line"><span> var display = "Welcome to Rebel Coding 102";</span></span>
|
||
<span class="line"><span> } else {</span></span>
|
||
<span class="line"><span> var display = "We haven't planned this far ahead yet :/"</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 < 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'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 & the DOM <a class="header-anchor" href="#jquery-the-dom" aria-label="Permalink to “jQuery & 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 "automate that"? 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> <script src="bootstrap.min.js"></script></span></span>
|
||
<span class="line"><span> </span></span>
|
||
<span class="line"><span> <script src="jquery.min.js"></script></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> <script></span></span>
|
||
<span class="line"><span> $(".jobLabel a").on("click", function(){</span></span>
|
||
<span class="line"><span> </span></span>
|
||
<span class="line"><span> var target = $(this).attr("rel");</span></span>
|
||
<span class="line"><span> </span></span>
|
||
<span class="line"><span> $("#"+target).show().siblings("div").hide(); </span></span>
|
||
<span class="line"><span> });</span></span>
|
||
<span class="line"><span> </script></span></span></code></pre></div><p>While this may appear to be a complex-looking function, let's disassemble it and see what'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>$('.jobLabel a')</code> which means all of the <em>a</em> tags with the class 'jobLabel'.</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 "chaining" operations.</p><p>We have an action, or set of actions: .on('click',function(){});</p><p>To translate, what we have so far $('.jobLabel a').on('click', function(){});:</p><p>For all <em>a</em> tags with the class "jobLabel" ... 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("rel");</span></span>
|
||
<span class="line"><span> </span></span>
|
||
<span class="line"><span> $("#"+target).show().siblings("div").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('rel');</span></span>
|
||
<span class="line"><span> $("#"+target).show().siblings("div").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 & CDN’s <a class="header-anchor" href="#importing-external-scripts-cdn-s" aria-label="Permalink to “Importing External Scripts & 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};
|