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]
Readings
[edit | edit source]Activities
[edit | edit source]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
ordelay
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]- ↑ Microsoft: Exam 98-382 Introduction to Programming Using JavaScript
- ↑ Mozilla: Expressions and operators
- ↑ Mozilla: Expressions and operators
- ↑ Mozilla: Expressions and operators
- ↑ Mozilla: Expressions and operators
- ↑ Mozilla: Expressions and operators
- ↑ Wikipedia: Comment (computer programming)
- ↑ JavaScript Info: Coding Style
- ↑ MDN: JavaScript Grammar and Types
- ↑ MDN: JavaScript Guidelines
- ↑ MDN: noscript
- ↑ MDN: JavaScript const
- ↑ MDN: JavaScript: Lexical Grammar
- ↑ MDN: JavaScript debugger
- ↑ MDN: console.log()
- ↑ MDN: script
- ↑ MDN: script
- ↑ MDN: Author Fast-Loading HTML Pages
- ↑ MDN: Author Fast-Loading HTML Pages
- ↑ MDN: Use JavaScript Within a Webpage
- ↑ MDN: script
- ↑ MDN: script
- ↑ MDN: script
- ↑ MDN: JavaScript try...catch
- ↑ MDN: JavaScript try...catch