<section>
<?= t_head("Use the Firebug JavaScript Console", "10–15") ?>
<p>Begin by issuing several commands to the JavaScript console in Firebug. When finished, copy and paste your command history from the Firebug console into a <samp>.txt</samp> file and submit that.</p>
<ol>
<li>Issue a math command such as <code>1 + 1</code>. Try variations of this, such as <code>1 + '1'</code>, <code>1 + '1 one'</code>, and <code>1 + 'one'</code>.</li>
<li>Create a variable <samp>a</samp> that stores a string of your choice (for example, "<samp>This is a string!</samp>"). Then inspect the <code>length</code> property of that object.</li>
<li>Convert the string to all uppercase letters. Store the converted string in a new variable <samp>b</samp>.</li>
<li>Get the third letter of the string.</li>
<li>Split the string into an array of smaller strings, using the delimiter '<samp> </samp>' (the space character). Capture this array into a variable.</li>
<li>Add elements to and remove elements from the array, using both the <code>[]</code> notation and by using the stack & queue–style methods (<code>push</code>, <code>pop</code>, <code>shift</code>, <code>unshift</code>, etc.).</li>
<li>Join the array together into a single string using any delimiter you like.</li>
<li>Create a random number between 0 and 5. Then round it <em>up</em> to the next-highest integer. Find whichever is smaller: this number or π.</li>
<li>Experiment with issuing any other JavaScript commands you’re curious about.</li>
</ol>
</section>
<section>
<?= t_head("Attach JavaScript to a Web Page", "20–25") ?>
<p>Download the following HTML skeleton file:</p>
<p class="resource"><a href="minilab4.html">minilab4.html</a></p>
<ol>
<li>Create a JavaScript file named <samp>minilab4.js</samp> in the same folder as your <samp>minilab4.html</samp>.</li>
<li>
<p>Add a <code>script</code> tag in the <code>head</code> of the HTML file that loads your JavaScript file. Ensure it’s properly linked by putting an <code>alert</code> statement at the top of your JavaScript file.</p>
<p class="note important">If you don’t see the alert when you refresh the page, your JavaScript file isn’t being loaded properly.</p>
</li>
<li>Add a <code>button</code> to the page. Attach an event handler to the button which calls a function in your JavaScript code. Make this function <code>alert</code> something.</li>
<li>Add an image to your page. Give the image an <code>id</code> attribute.</li>
<li>
<p>Modify your function to get various properties of the image (like its source and alt tags) and <code>alert</code> them. Be sure to add other content to your alert, so that the message looks something like this:</p>
<p><samp>Here is the alt tag description of the image: 'A photo of super-cute puppies'</samp></p>
<!-- <p class="note"><strong>Note:</strong> When you alert the image’s source URL, don’t “hard-code” the URL into your <code>alert</code>.</p> -->
</li>
<li>Modify your function to change the image’s source and alt properties to other values.</li>
<li>Add other form control elements to the page, and modify their contents.</li>
<li>Add a <code>span</code> and a text box, each with an <code>id</code> attribute. Then make a new button and a new JavaScript function that will put the contents of the text box into the span.</li>
</ol>
</section>
<footer>
<p>If you’ve finished everything, good job! Start playing with and modifying more HTML elements.</p>
</footer>