Our Black Friday Sale has been extended!  View Sale

jQuery Prerequisites

Overlapping colored triangles

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++) {
  • 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++) {
  • 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]
    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">

    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" />


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
  • Loop through the above array and display an alert for each country name. [Answer]
    for (var i=0; i<countries.length; 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!

About the Author:



VisionFriendly.com is a Chicago digital marketing agency with over 25 years of experience helping clients nationwide. We have an in-house team of marketers and creatives ready to improve your business’s marketing operations.

Share On:


Leave a Comment

Your email address will not be published. Required fields are marked *

Copyright © 2024, All Rights Reserved
Tri Colored Triangles
Scroll to Top

We’re Doing Something Awesome

VisionFriendly.com is now Blackbird Digital.

We are the same great people, with a new name, new website, and new ideas.

Take your business to the

Next Level!

Visionfriendly.com has the right team to make your business stand out from other professional websites.

Ready For Takeoff?

A Completely Customized
Digital Marketing Experience

  • We'll be in touch within one business day to discuss your goals and create a personalized plan that fits both you and your business.

  • This field is for validation purposes and should be left unchanged.

Let’s start a Conversation