jQuery Prerequisites

What Javascript / HTML should you know before tackling jQuery?

Here are two lists in self-quiz format. The first list is the bare minimum. You should know it cold WITHOUT Googling the answers. If you miss any of these, you should stop and review until you can answer them. Otherwise you'll just be shooting yourself in the foot and your understanding of the upcoming articles will be shaky at best. The second list is important, but perhaps not critical. Obviously, your answers should not use jQuery.

• How do you reference an external Javascript file to be included on your page? [Answer]
  

  // either of the following should work
  <script type='text/javascript' src='Scripts/myCodeFile.js'></script>
  <script type='text/javascript' src='Scripts/myCodeFile.js' /> 	

• Write a loop that shows ten alert boxes containing each of the numbers from 0 to 9. [Answer]
  

  for (var i=0; i<10; i++) {
  	alert(i);
  }	

• Turn the above into a function named "alertCount" that allows you to pass the in the ending number. [Answer]
  

  function alertCount(times) {
  	for (var i=0; i<times; i++) {
  		alert(i);
  	}
  }	

• Here is a form. When the "Clear" button is clicked, clear the Username field. Come up with at least 2 variations. (The answer has 5 ways.) [Answer]
  
  Username:

  This is the HTML for the form:
  <form action="" method="post" name="formLogin" id="formLogin">
       Username: <input name="username" type="text" id="username" value="[email protected]">
  <input name="btnClear" type="button" id="btnClear" value="Clear">
  </form>	

  You can put code in the onClick handler.  Here are a few ways:
  <input name="btnClear" type="button" id="btnClear" value="Clear" onClick="this.form.username.value=''">
  <input name="btnClear" type="button" id="btnClear" value="Clear" onClick="formLogin.username.value=''">
  <input name="btnClear" type="button" id="btnClear" value="Clear" onClick="document.formLogin.username.value=''">
  <input name="btnClear" type="button" id="btnClear" value="Clear" onClick="document.getElementById('username').value=''">
  <input name="btnClear" type="button" id="btnClear" value="Clear" onClick="username.value=''"> There are other answers, too.

• Here is some HTML. Change the number inside the <span> tag to 9000. [Answer]
  

  There are over <span id="employee-count">5</span> people that work here.

  document.getElementById('employee-count').innerHTML = '9000';	

• Here is a <div>. Using the "color" property, create a CSS rule that makes the message appear red (#ff0000). [Answer]
  

  <div id="message">Your billing details have been updated.</div>

  /* Did you use the pound (#) sign? */
  #message {
  	color: #ff0000;
  }	

• Here are two <spans>. Using the "font-weight" property, create a CSS rule that makes the messages bold. [Answer]
  

  <span class="instruction">Click here for help.</span>
  <span class="instruction">Click here to go back.</span>
  

  /* Did you use the dot (.)? */
  .instruction {
  	font-weight: bold;
  }	

• Here is an image. Change the image file to "wendys.jpg". I have 4 answers. [Answer]
  

  <img id="logo" name="logo" src="burger-king.jpg" />

  logo.src='wendys.jpg';
  document.logo.src='wendys.jpg';
  document.images['logo'].src='wendys.jpg';
  document.getElementById('logo').src='wendys.jpg';

Don't go any further until you know all of the above! Here is the "less critical, but really good to know" list:

• Create an empty array called "countries." [Answer]
  

  // All of these are valid.
  var countries = new Array();
  var countries = Array();
  var countries = [];	

• Add two elements "Italy" and "Canada." to the above array. Name the most common built-in function you can use to do this. [Answer]
  

  // use the push() function
  countries.push("Italy");
  countries.push("Canada");	

• Loop through the above array and display an alert for each country name. [Answer]
  

  for (var i=0; i<countries.length; i++) {
  	alert(countries[i]);
  }	

• Create a variable named person. Using object notation, make it contain an object with two properties: firstName and lastName. Make the object's firstName property equal to "John" and the lastName property "Smith." If you do it right, the following code will display "My name is John Smith": [Answer]
  

  alert("My name is " + person.firstName + " " + person.lastName);

  var person = {firstName: "John", lastName: "Smith"};	

What am I testing for here? Basically, you need to be know the basics of variables, events, accessing DOM elements, CSS, and calling functions. Obviously, the more comfortable you are with these, the better.
Did you pass? Then head on over to the next article, where we get a brief introduction to the main jQuery object!