Web Coding & Development All-in-One For Dummies
Book image
Explore Book Buy On Amazon
One of the handiest features of web coding and development is that once you’ve learned a few basics, you can apply those basics to any project. A good example is the underlying structure of a page, which uses the same set of standard HTML tags, no matter how large or small the project. It’s also worth your time to learn how selectors work, because you use them to save you time both when you’re writing CSS rules and when you’re writing JavaScript code. Errors, too, are a fact of web coding life, so understanding the most common errors can help you debug your code faster and get back to more creative pursuits.

Your Web Development Template

All web pages start out with the same basic HTML structure, so you can get any new web development project off on the right foot by first laying down that foundation. You can do this most easily by creating a template file that you can copy for each new web coding project. Here are the HTML tags to add to your template:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title></title>
   <link href="styles.css" rel="stylesheet">
   <script src="code.js" defer></script>
</head>
<body>
   <header>
   </header>
   <nav>
   </nav>
   <main>
      <article>
      </article>
      <aside>
      </aside>
   </main>
   <footer>
   </footer>
</body>
</html>

For the <link> and <script> tags, be sure to adjust the filenames as needed, and be sure to add the path to each file if you’ve stored the files in subdirectories.

Selectors in CSS and JavaScript

Both CSS and JavaScript save you oodles of time by making it easy to format and program page elements. These two technologies become even more powerful when you use selectors to specify which elements you want to work with:

* The class selector: If you’ve use the class attribute to assign a class name to one or more page elements, you can target those elements by using a class selector:

HTML:

<element class="class-name">

CSS:

.class-name {

   property1: value1;

   property2: value2;

   etc.

}

JavaScript:

document.querySelector('.class-name')

or:

document.querySelectorAll('.class-name')

* The id selector: If you’ve use the id attribute to assign an ID to a page element, you can target that element by using an id selector:

HTML:

<element id="id-name">

CSS:

#id-name {

   property1: value1;

   property2: value2;

   etc.

}

JavaScript:

document.querySelector('#id-name')

* The descendant combinator: To target every element that is contained in (that is, is a descendant of) a specified ancestor element, use the descendant combinator (a space):

CSS:

ancestor descendant {

   property1: value1;

   property2: value2;

   etc.

}

JavaScript:

document.querySelector('ancestor descendant')

or:

document.querySelectorAll('ancestor descendant')

* The child combinator: To target every element that resides one level below (that is, is a child of) a specified parent element, use the child combinator:

CSS:

parent > child {

   property1: value1;

   property2: value2;

etc.

}

JavaScript:

document.querySelector('parent > child')

or:

document.querySelectorAll('parent > child')

* The subsequent-sibling combinator: To target every element that appears in the HTML after a specified reference element and is a sibling of that element, use the subsequent-sibling combinator:

CSS:

reference ~ target {

   property1: value1;

   property2: value2;

   etc.

}

JavaScript:

document.querySelector('reference ~ target)

or:

document.querySelectorAll('reference ~ target')

* The next-sibling combinator: To target the next sibling that comes after a reference element, use the next-sibling combinator:

CSS:

reference + target {

   property1: value1;

   property2: value2;

   etc.

}

JavaScript:

document.querySelector('reference + target')

or:

document.querySelectorAll('reference + target')

Top 10 JavaScript Errors

When you encounter a script problem, the first thing you should do is examine your code for the most common errors. To help you do that, here’s a list of the 10 most common errors made by both beginning and experienced programmers:

  • JavaScript keywords as variable names: JavaScript has many reserved words and keywords built into the language, so it’s common to accidentally use one of these words as a variable or function name. Double-check your names to make sure you’re not using any reserved words or the names of any objects, properties, or methods.
  • Misspelled variables and other names: Check your variable and function names to make sure you spell them consistently throughout the script. Also, check the spelling of the objects, properties, and methods you use.
  • Misused uppercase and lowercase letters: JavaScript is a case-sensitive language, which means that it treats each letter differently depending on whether it’s uppercase or lowercase. For example, consider the following two statements:
    const firstName = "Millicent";
    const message = "Welcome " + firstname;
    

    The first statement declares a variable named firstName, but the second statement uses firstname. This code would generate the error firstname is not defined (or something similar, depending on the browser) because to JavaScript, firstname is a different (and uninitialized) variable.

  • Mismatched quotation marks: In any statement where you began a string literal with a quotation mark (" or '), always check to make sure that you included the corresponding closing quotation mark at the end of the string. Also, check to see if you used one or more instances of the same quotation mark within the string. If so, edit the string to use the proper escape sequence (\" or \'), instead:
    // Bad
    const myString = "There are no "bad" programs.";
    	
    // Better
    const myString = "There are no \"bad\" programs.";
    
    // Best
    const myString = `There are no "bad" programs.`;
  • Mismatched parentheses: Look for statements that contain a left parenthesis — ( — and make sure there’s a corresponding right parentheses — ). This also applies to square brackets — [ and ].

    For complex expressions that include three or more sets of parentheses, a quick match-up check is to count the number of left parentheses in the expression, and then count the number of right parentheses. If these numbers don’t match, then you know you have a mismatch somewhere in the expression.

  • Missed parentheses after function names: Speaking of parentheses, if your script calls a function or method that doesn’t take any arguments, check that you included the parentheses — ( ) — after the name of the function or method:
    function tryThis() {
       alert("Parentheses travel in pairs!");
    }
    
    // This won't work
    tryThis;
    
    // This will
    tryThis();
  • Improper use of braces: JavaScript uses braces to mark the start ({) and end (}) of statement blocks associated with functions, tests involving if() and switch(), and loops, including for(), while(), and do...while(). It’s very easy to miss one or both braces in a block, and it’s even easier to get the braces mixed up when nesting one test or loop inside another. Double-check your braces to make sure each block has both an opening and a closing brace.

    One way to ensure that you don’t miss any braces is to position them consistently throughout your script. For example, many people prefer to use the traditional style for brace positions:

    keyword {
       statements
    }

    (Here, keyword means the statement — such as function or if() — that defines the block.) If you prefer this style, use it all through your script so that you know exactly where to look for each brace.

    An easy way to ensure that you never forget a closing brace is to enter it immediately after entering the opening brace. That is, you type {, press Enter twice, and then type }.

    Also, use indentation consistently for the statements within the block. This makes it much easier to see the braces, particularly when you have one block nested within another.

  • Using = or == instead of ===: The identity operator (===) is one of the least intuitive JavaScript features because the assignment operator (=) feels so much more natural. The equality operator (==) can cause problems because it often converts the data types before making the comparison. Therefore, check all your comparison expressions to make sure you always use === instead of = or ==.
  • Conflicts between local and global variables: A global variable is available throughout the entire page, even within functions. So, within a function, make sure that you don’t declare and use a variable that has the same name as a global variable.
  • The use of a page element before it’s loaded: JavaScript runs through a page’s HTML one line at a time and checks the syntax of each JavaScript statement as it comes to it. If your code refers to an element (such as a form field) that JavaScript hasn’t come to yet, it generates an error. Therefore, if your code deals with an element, always place the script after the element in the HTML file.

About This Article

This article is from the book:

About the book author:

Paul McFedries is a technical writer who has been authoring computer books since 1991 and has over 100 books to his credit. These books include Alexa For Dummies, Amazon Fire TV For Dummies, and Cord Cutting For Dummies. You can visit Paul on the web at www.mcfedries.com.

This article can be found in the category: