Exam 98-382: Introduction to Programming Using JavaScript/Program with JavaScript Operators, Methods, and Keywords

This lesson covers Javascript assignment, arithmetic operators, best practices, inline and external scripts, exception handling, and the Browser Object Model (BOM).

Readings

1. Mozilla: JavaScript First Steps

Activities

1. W3Resources: JavaScript Basic Exercises

Complete or debug code that uses assignment and arithmetic operators

Assignment; increment; decrement; addition; subtraction; division; multiplication; modulus; compound assignment operators

Arithmetic Operators

An arithmetic operator takes numerical values (either literals or variables) as their operands and returns a single numerical value.

• + addition
• - subtraction
• * multiplication
• / division
• % remainder
• ++ increment
• -- decrement
• - unary negation
• + unary plus
• ** exponentiation

Bitwise Operators

A bitwise operator treats their operands as a set of 32 bits (zeros and ones), rather than as decimal, hexadecimal, or octal numbers.

• & bitwise AND
• | bitwise OR
• ^ bitwise XOR
• ~ bitwise NOT
• << left shift
• >> sign-propagating right shift
• >>> zero-fill right shift

Logical Operators

Logical operators are typically used with Boolean (logical) values; when they are, they return a Boolean value. However, the && and || operators actually return the value of one of the specified operands, so if these operators are used with non-Boolean values, they may return a non-Boolean value.

• && logical AND
• || logical OR
• ! logical NOT

Assignment Operators

An assignment operator assigns a value to its left operand based on the value of its right operand.

• = assignment
• += addition assignment
• -= subtraction assignment
• *= multiplication assignment
• /= division assignment
• %= remainder assignment
• **= exponentiation assignment
• <<= left shift assignment
• >>= right shift assignment
• >>>= unsigned right shift assignment
• &= bitwise AND assignment
• |= bitwise OR assignment
• ^= bitwise XOR assignment

Comparison Operators

A comparison operator compares its operands and returns a logical value based on whether the comparison is true.

• == equal
• != not equal
• === strict equal
• !== strict not equal
• > greater than
• >= greater than or equal
• < less than
• <= less than or equal

Apply JavaScript best practices

Comments; indentations; naming conventions; noscript; constants; reserved keywords; debugger keyword; setting breakpoints; console.log

Comments

A comment is a programmer-readable explanation or annotation in the source code of a computer program.

// This is a single-line comment.

/* This
   is
   a
   block
   comment.
*/

Indentations

Indent two or four spaces.

function twoSpaceExample() {
  statements;
  conditions {
    statements;
  }
  loops {
    statements;
  }
}

function fourSpaceExample() {
    statements;
    conditions {
        statements;
    }
    loops {
        statements;
    }
}

Naming Conventions

A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($). Subsequent characters can also be digits (0–9). Because JavaScript is case sensitive, letters include the characters "A" through "Z" (uppercase) as well as "a" through "z" (lowercase).

JavaScript variable and function identifiers use lowerCamelCase, and use concise, human-readable, semantic names where appropriate.

function functionName() {
    let variableName = 0;  //valid
    let _variableName = 0; //valid
    let variableName2 = 0; //valid
    let 2VariableName = 0; //invalid
}

noscript

The HTML <noscript> element defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.

<noscript>
  Enable JavaScript for best functionality.
</noscript>

Constants

The value of a constant can't be changed through reassignment, and it can't be redeclared. Constants are block-scoped, much like variables declared using the let keyword. Constants can be declared with uppercase or lowercase, but a common convention is to use all-uppercase letters.

const PI = 3.14159265358979;

Reserved Keywords

Reserved words may not be used as identifier names. Reserved words include:

var, let, const
function, return
if, else, switch, case, break
do, for, while
throw, try, catch, finally

Setting Breakpoints

The debugger statement invokes any available debugging functionality, such as setting a breakpoint. If no debugging functionality is available, this statement has no effect.

statements;

// If the web browser console is open (F12 in many browsers), 
// JavaScript execution will stop at the next line.
debugger;

statements;

console.log

The Console method log() outputs a message to the web console. The message may be a single string (with optional substitution values), or it may be any one or more JavaScript objects.

console.log("This text displays in the web browser console.");
console.log("Press F12 on most browsers to view the console.");

Evaluate the use of inline and external scripts

When to use, how to use, and what happens when both are used

• The HTML <script> element is used to embed or reference executable code, and is typically used to embed or refer to JavaScript code.
• <script src="..."> specifies the URI of an external script and is used as an alternative to embedding a script directly within a document.
• JavaScript scripts required during the loading of the page are added to the document head section.
• JavaScript scripts not required during the loading of the page are added at the end of the document body section.
• JavaScript's best practice is to use external JavaScript files and load them at the end of the document body section. Alternatively, external JavaScript files may be added at the end of the document head section and loaded asynchronously using the async or delay attributes.
• The async attribute indicates that the browser should, if possible, load the script asynchronously. The script is executed as soon as it is loaded.
• The defer attribute indicates that the browser should, if possible, load the script asynchronously. The script is executed after the document has been parsed.

Implement exception handling

try; catch; finally

• The try...catch statement marks a block of statements to try and specifies a response should an exception be thrown.
• The optional finally block will execute after the try and/or catch block(s) have finished executing.

try {
    statements;
}
catch (exception){
    console.log(exception);
    statements;
}
finally {
    statements;
}

Complete and debug code that interacts with the Browser Object Model (BOM)

Manage state; display dialogs; determine screen size

References

Exam 98-382: Introduction to Programming Using JavaScript

Program with Variables, Data Types, and Functions →