1. JavaScript Operators, Methods, and Keywords #
JavaScript: JavaScript is programming language that is primarily used for scripting web pages to make them interactive. Because this exam assesses understanding of JavaScript in this context, it is recommended to have some background knowledge of HTML/CSS. If you are new to HTML/CSS, we have a study guide for that here.
1.1 Complete and debug code that uses assignment and arithmetic operators #
- Assignment: Assignment in JavaScript refers to assigning (or reassigning) a value to a variable. To assign a value to a variable we use the equal sign (=).
- Operators: Basic math operations work exactly as we would expect. We can add (+), subtract (-), multiply (*), divide (/), and get the remainder of division (%); also known as modulus.
- Compound Assignment Operators: We can combine assignment with mathematic operators to perform operations on a variable and update their values all on one line.
The value of x is: 5
1 + 1 = 2
1 - 1 = 0
2 * 2 = 4
10 / 2 = 5
10 % 2 = 0
The value of x is: 7
The value of y is: 3
The value of z is: 10
The value of a is: 2.5
The value of b is: 1
1.2 Apply JavaScript best practices #
- Comments: Comments are text written inside of code that is ignored when the code is ran. There are two major reasons for adding comments to our code. One, we add comments to help ourselves and other programmers understand the code we have written. Two, we add comments to temporarily ignore code segments so they do not run while testing code. We use two forward slashes (//) to comment out a single line, and a forward slash and asterisk (/*) to start a multi-line comment, then an asterisk and forward slash to end a multi-line comment.
- Indentation: Code indentation is imporant for clarity and readability of our code. The browser will still run our code correctly if we do not indent our code, but it will be much harder to read. To demonstrate indentation, we will see an if/else statement below. We haven't covered this topic yet, so don't worry about what the code does, just focus on the way that it is written.
- Naming Conventions: Variables and functions can be named by the programmer who is writing the code. Because we can choose any names we'd like, it is imporatant to choose descriptive names and stick to a standard convention for capitalization. JavaScript conventions are to use camelCase, which is to start names with a lowercase letter, than each new word starts with a capital letter, just like in the name camelCase. Names can include any letter of the alphabet, upper or lowercase, any numeric character (0-9), an under-score (_), and the dollar sign ($).
- Reserved Keywords: Variable and function names cannot have the same name as keywords reserved by JavaScript. The common ones are "var", "let", "const", "function", "if", "else", "try", "catch", "finally". We can see a complete list here.
- script/noscript: It is best practice to add a warning message to user's who are using a browser that does not support JavaScript. We do this with the "noscript" element in HTML.
- Constants: Some variables we make should never change. JavaScript allows us to write "const" instead of "var" to make certain the variable value cannot be changed. If we try to change a "const", JavaScript will end in an error.
- console.log: To catch possible bugs in our JavaScript code, we can show the current value of variables in the developer console of the browser which can be shown by pressing the F12 key and clicking on the "Console" tab. Up to this point, we have been showing the value of variables in the code examples by using HTML and the "document.getElementById..." JavaScript code, but this takes up a lot of space. From now on, unless necessary, we will use the console.log method instead.
- debugger: "debugger" is a JavaScript statement that stops the code on the line where it is written and opens the browser's debug tool which can be shown by pressing the F12 key and refreshing the page by pressing Ctrl + r.
- Breakpoints: When the browser's debug tool is open, another way we can stop the code at a specific line is to turn on a breakpoint. We do this by clicking to the left of the line number where we'd like the code to stop. When we refresh the page, the code will stop at each breakpoint. This allows us to examine what is happening at that specific line.
The value of x is: 10
The value of x is: 15
The value of y is: 15
const.js
Uncaught TypeError: invalid assignment to const 'salesTax' const.js:2:1
log.js
8
1.3 Evaluate the use of internal and external scripts #
JavaScript code can be written as internal scripts by nesting code in the HTML "script" element, or as external scripts by writing code in a seperate text file that ends with the ".js" file extension.
- When to use: Just as with CSS, it is best practice to always write JavaScript in extrnal scripts so multiple pages can use the same code and it does not have to be rewritten for each page. It is okay to write short internal scripts to test a feature unique to that page.
- How to use: As mentioned earlier, internal scripts are nested inside of HTML "script" elements and external scripts are written as text files saved with the ".js" file extension. We can then use the HTML "src" attribute to link the ".js" file with our HTML file.
x is 5
y is 8
- What happens when scripts are used at multiple levels: If we create two scripts that contain conflicting information, the last script to run will take precedence.
console.log(x);
8
1.4 Implement exception handling #
- try, catch, finally: These three statements are for handling errors without the code stopping.
- try: This will hold the code we expect to contain an error.
- catch: This will hold the code that will run if "try" contains an error. Typically we just log the type of error here.
- finally: This will hold the code that we want to run regardless of if "try" had an error. This is optional as we typically do not want to run the same code after an error versus after a success
error.js
aplert is not defined
Program over
1.5 Complete and debug code that interacts with the Browser Object Model (BOM) #
- Displaying dialogs: There are three type of dialogue boxes that can be genereated by the browser.
- Alert: Alert dialogues are for displaying critical information to the user. Alerts provide no interaction for the user other than to close the dialogue box.
- Confirm: A confirm dialogue allows us to ask a question to the user and receive a yes or no answer back from them. The answer from the user is returned as a boolean value.
- Prompt: A prompt dialogue allows us to ask the user a question and receive input back from them. The input is always returned as a string value, though if we need a number, a string can always be parsed into a number.
- Determining screen size: We can get the screen width and screen height of the user's screen. This is very useful for changing how the page looks if the user is using a phone versus a tablet, or monitor.