<spanclass="line"><span> let item3 = 'some other string';</span></span>
<spanclass="line"><span></span></span>
<spanclass="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><h3id="boolean"tabindex="-1">Boolean <aclass="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><h3id="lists"tabindex="-1">Lists <aclass="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><divclass="language-"><buttontitle="Copy Code"class="copy"></button><spanclass="lang"></span><preclass="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><spanclass="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><h5id="list-indexes"tabindex="-1">List Indexes <aclass="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><h3id="dictionary"tabindex="-1">Dictionary <aclass="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><divclass="language-"><buttontitle="Copy Code"class="copy"></button><spanclass="lang"></span><preclass="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><spanclass="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><h2id="the-moving-parts"tabindex="-1"><ahref="#the-moving-parts">#</a> The Moving Parts <aclass="header-anchor"href="#the-moving-parts"aria-label="Permalink to “# The Moving Parts”"></a></h2><h3id="if-else-statement"tabindex="-1">If-Else Statement <aclass="header-anchor"href="#if-else-statement"aria-label="Permalink to “If-Else Statement”"></a></h3><divclass="language-"><buttontitle="Copy Code"class="copy"></button><spanclass="lang"></span><preclass="shikishiki-themes
<spanclass="line"><span> var display = "Welcome to Rebel Coding 101";</span></span>
<spanclass="line"><span> } else if (x < z) {</span></span>
<spanclass="line"><span> var display = "Welcome to Rebel Coding 102";</span></span>
<spanclass="line"><span> } else {</span></span>
<spanclass="line"><span> var display = "We haven't planned this far ahead yet :/"</span></span>
<spanclass="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><h3id="for-loop"tabindex="-1">For-Loop <aclass="header-anchor"href="#for-loop"aria-label="Permalink to “For-Loop”"></a></h3><divclass="language-"><buttontitle="Copy Code"class="copy"></button><spanclass="lang"></span><preclass="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><spanclass="line"><span> for (var i = 0; i < 9; i++) {</span></span>
<spanclass="line"><span> // more statements</span></span>
<spanclass="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><h3id="functions"tabindex="-1">Functions <aclass="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><divclass="language-"><buttontitle="Copy Code"class="copy"></button><spanclass="lang"></span><preclass="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><spanclass="line"><span> var blump = function(prop1, prop2){</span></span>
<spanclass="line"><span> var a = prop1</span></span>
<spanclass="line"><span> var b = prop2</span></span>
<spanclass="line"><span> var c = a/b</span></span>
<spanclass="line"><span> return c</span></span>
<spanclass="line"><span> };</span></span>
<spanclass="line"><span></span></span>
<spanclass="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><h1id="jquery-the-dom"tabindex="-1">jQuery & the DOM <aclass="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><divclass="language-"><buttontitle="Copy Code"class="copy"></button><spanclass="lang"></span><preclass="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><spanclass="line"><span><script src="bootstrap.min.js"></script></span></span>
<spanclass="line"><span></span></span>
<spanclass="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><divclass="language-"><buttontitle="Copy Code"class="copy"></button><spanclass="lang"></span><preclass="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><spanclass="line"><span><script></span></span>
<spanclass="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><h3id="the"tabindex="-1">The $ <aclass="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><h3id="interactivity"tabindex="-1">Interactivity <aclass="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><h3id="acting"tabindex="-1">Acting <aclass="header-anchor"href="#acting"aria-label="Permalink to “Acting”"></a></h3><divclass="language-"><buttontitle="Copy Code"class="copy"></button><spanclass="lang"></span><preclass="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><spanclass="line"><span> var target = $(this).attr("rel");</span></span>
<spanclass="line"><span></span></span>
<spanclass="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><divclass="language-"><buttontitle="Copy Code"class="copy"></button><spanclass="lang"></span><preclass="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><spanclass="line"><span> var target = $(this).attr('rel');</span></span>
<spanclass="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><h1id="importing-external-scripts-cdn-s"tabindex="-1">Importing External Scripts & CDN’s <aclass="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><ahref="https://code.jquery.com/"target="_blank"rel="noreferrer">jQuery CDN</a></p><p><ahref="https://www.bootstrapcdn.com/"target="_blank"rel="noreferrer">Bootstrap CDN</a></p></div></div></main><footerclass="VPDocFooter"data-v-7011f0d8data-v-e257564d><!--[--><!--]--><!----><navclass="prev-next"aria-labelledby="doc-footer-aria-label"data-v-e257564d><spanclass="visually-hidden"id="doc-footer-aria-label"data-v-e257564d>Pager</span><divclass="pager"data-v-e257564d><aclass="VPLink link pager-link prev"href="/rebel_coding/step1.html"data-v-e257564d><!--[--><spanclass="desc"data-v-e257564d>Previous page</span><spanclass="title"data-v-e257564d>Step 1: HTML & CSS</span><!--]--></a></div><divclass="pager"data-v-e257564d><aclass="VPLink link pager-link next"href="/rebel_coding/step3.html"data-v-e257564d><!--[--><spanclass="desc"data-v-e257564d>Next page</span><spanclass="title"data-v-e257564d>Step 3: Python Scrapers</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
