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 usesfirstname. This code would generate the errorfirstname is not defined(or something similar, depending on the browser) because to JavaScript,firstnameis 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 involvingif()andswitch(), and loops, includingfor(),while(), anddo...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,
keywordmeans the statement — such as function orif()— 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.
