Jump to content

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

From Wikiversity

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

Readings

[edit | edit source]
  1. Mozilla: JavaScript First Steps

Activities

[edit | edit source]
  1. W3Resources: JavaScript Basic Exercises

Complete or debug code that uses assignment and arithmetic operators

[edit | edit source]

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

Arithmetic Operators

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]

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

Comments

[edit | edit source]

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

[edit | edit source]

Indent two or four spaces.[8]

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

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

Naming Conventions

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]

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 required during the loading of the page are added to the document head section.[18]
  • 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

[edit | edit source]

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)

[edit | edit source]

Manage state; display dialogs; determine screen size

See Also

[edit | edit source]

References

[edit | edit source]