# 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).[1]

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.[2]

• `+` 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.[3]

• `&` 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.[4]

• `&&` 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.[5]

• `=` 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.[6]

• `==` 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

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

```// This is a single-line comment.

/* This
is
a
block
comment.
*/
```

### Indentations

Indent two or four spaces.[8]

```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).[9]

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

```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.[11]

```<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.[12]

```const PI = 3.14159265358979;
```

### Reserved Keywords

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

```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.[14]

```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.[15]

```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.[16]
• `<script src="...">` specifies the URI of an external script and is used as an alternative to embedding a script directly within a document.[17]
• JavaScript scripts not required during the loading of the page are added at the end of the document body section.[19]
• JavaScript's best practice is to use external JavaScript files and load them at the end of the document body section.[20] Alternatively, external JavaScript files may be added at the end of the document head section and loaded asynchronously using the `async` or `delay` attributes.[21]
• The `async` attribute indicates that the browser should, if possible, load the script asynchronously. The script is executed as soon as it is loaded.[22]
• The `defer` attribute indicates that the browser should, if possible, load the script asynchronously. The script is executed after the document has been parsed.[23]

## 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.[24]
• The optional finally block will execute after the try and/or catch block(s) have finished executing.[25]
```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