CS 250 midterm
The Document object branch of the browser object model is represented by its own object model called the ______________________________.
Document Object Model (DOM) Document Object Model DOM
____ can turn static documents into applications such as games or calculators.
JavaScript
Sending arguments to the parameters of a called function is called ____________________ arguments.
Passing
Parentheses are used with expressions to change the associativity with which individual operations in an expression are evaluated.
True
A(n) ____ label in a switch statement represents a specific value and is followed by one or more statements that are executed if the value of the label matches the value of the switch statement's expression.
case
A(n) ____________________ type is the specific category of information that a variable contains.
data
The ____ label contains statements that execute when the value returned by the switch statement expression does not match a case label.
default
Writing values directly to the console is known as ____.
logging
An infinite loop is an example of a(n) ____ error.
logic
____ refers to programming using a scripting language that is executed from a web server.
Server-side scripting
var fname = document.getElementById("firstName");
Sets the fname variable to the element of firstName The line of code var fname = document.getElementById("firstName"); is JavaScript code that accesses an HTML element with the ID "firstName" in the current document. The method document.getElementById() is used to retrieve an element from the document using its ID. The returned element is stored in a variable named fname. This variable can then be used to access and manipulate the properties of the element, such as its value, style, and content.
The And operator is ____.
&&
A set of statements contained within a set of braces is known as a(n) ____ block.
command
Use of the ____ attribute of the form element is not allowed in the strict DTD for XHTML.
name
Placing one decision-making statement within another decision-making statement creates a(n) ____________________ decision-making structure
nested
The ____ object is used to obtain information about the current web browser.
Navigator
A(n) ____ comment hides multiple lines of code.
block
Function statements are contained within the function ____.
braces
A program's ____ is the order in which various parts of the program run, or execute.
logic
To check a group of fields and trigger an error message if any of them is empty, you use a(n) ____ statement.
loop
JavaScript is a ____ programming language.
loosely typed
Which method returns all elements in a document that match the selector p figure img?
querySelectorAll("p figure img")
The rules of a programming language are known as its ____.
syntax
You use a ____ statement within a try block to specify an error message.
throw
What is a counter, and how is it used in programming?
A program counter is a register in a computer processor that contains the address (location) of the instruction being executed at the current time. As each instruction gets fetched, the program counter increases its stored value by 1. Counters are a useful tool for keeping track of the number of iterations in a loop, and they are often used in various algorithms and data structures.
What is the difference between a variables list and a watch list in browser debugging tools?
A watch list is variables that are chosen by you to watch to see if they through an error where as a variable list is all variables in a program that get watched. A variable list help you see how different valyes in the executing function affect program execution. A watch list is a list of expressions whose values are displayed adn updated throughout execution of a program. In browser debugging tools, the difference between a variable list and a watch list is that a variable list displays the current values of all variables in the current scope, while a watch list allows you to specifically monitor the values of a select few variables. A variable list typically displays all of the variables that are currently in scope, along with their values. This can be useful for getting a quick overview of the state of your program, but it can also be overwhelming if you have many variables, or if the values of some of the variables are complex data structures. A watch list, on the other hand, allows you to select specific variables that you want to monitor, and the values of those variables will be displayed in the watch list. This can be more efficient and easier to use than a variable list, as you can focus on only the variables that are most relevant to your current task. Additionally, many browser debugging tools allow you to set breakpoints and stop execution when the value of a variable in your watch list changes. This can be useful for tracking down bugs and understanding how your code is executing, as you can see exactly when and why a variable changes value. In summary, a variable list and a watch list serve different purposes in browser debugging tools. A variable list provides a broad view of all variables in the current scope, while a watch list allows you to specifically monitor the values of a select few variables.
Discuss case sensitivity in JavaScript.
Case sensitivity is when you use the same lettering but one in caps and one in lowercase aren't the same thing JavaScript is a case-sensitive language. This means that language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters. The while keyword, for example, must be typed "while", not "While" or "WHILE".
Unlike the while statement, the statements in a ____ statement always execute once, before a conditional expression is evaluated.
do/while
A set of connected nodes that are not part of a document is known as a(n) ____.
document fragment
Each piece of data contained in an array is called a(n) ____.
element
A literal string can be assigned a zero-length string value called a(n) ____ string.
empty
You implement custom error handling using the ____________________ event.
error or onerror
Which method returns a collection of references to all instances of a certain element in an HTML document?
getElementsByTagName()
The ____ statement is used to execute specific programming code if the evaluation of a conditional expression returns a truthy value.
if
The ____ object allows you to change to a new web page from within JavaScript code.
Location
In a(n) ____________________ loop, a loop statement never ends because its conditional expression is never falsy
infinite
When a control's value is found to be invalid during constraint validation, the ____ event is triggered.
invalid
Each repetition of a looping statement is called a(n) ____.
iteration
A single statement that declares a variable and specifies array values as its content is called an array ____.
literal
Symbols such as + and * used in expressions to manipulate operands are known as ____.
operators
When you open a new web browser window, you can customize its appearance using the ____ argument of the window.open() method.
options
The conditional expression in the while statement is enclosed within ____ following the keyword while.
parentheses
Special words that are part of the JavaScript language syntax and that can't be used as variable names are known as ____.
reserved words
What does a function to validate required fields generally need to do?
retrieve the values of required fields and check if any of them are empty. A function to validate required fields generally needs to do the following: Check if the field has a value: The function needs to check if the value of the field is not empty. If the field is empty, this means the user has not entered any information into the field, and the function should return an error message or perform some other action to indicate that the field is required. Ensure that only acceptable values are entered: The function may also need to check that the value entered into the field is of the correct type or format. For example, if the field is meant to be a number, the function should check that the value entered is actually a number and not a string or other data type. Handle errors: The function should be able to handle errors that occur when a user enters incorrect information into the field. This can be done by displaying an error message to the user, or by highlighting the field in a specific way to indicate that there is an issue with the information entered. Here is an example of a simple function to validate required fields in JavaScript: javascriptCopy code function validateRequiredFields() { var field = document.getElementById("inputField").value; if (field == "") { alert("This field is required"); return false; } return true; } In this example, the function first gets the value of the field using document.getElementById(). It then checks if the value is equal to an empty string. If it is, an error message is displayed using the alert() function, and the function returns false to indicate that the validation has failed. If the value is not equal to an empty string, the function returns true to indicate that the validation has succeeded.
One way of referring to the Window object is by using the ____________________ property, which refers to the current Window object
self
One way of referring to the Window object is by using the ____________________ property, which refers to the current Window object.
self
How is a for statement different from a while statement?
The major difference between for loop and while loop is that in the case of for loop the number of iterations is known whereas in the case of the while loop number of iterations is unknown and the statement will run until the condition is proved false. In summary, the main difference between for and while loops is that a for loop is used when you know the number of iterations beforehand, and a while loop is used when you don't know the number of iterations beforehand.
The ____ event fires when a form is submitted.
submit
To send the values entered in a form to a web server with JavaScript, you use the __________ method.
submit submit()
The rules of a programming language are known as its ____.
syntax
A system consisting of a client and a server is known as a ____ system.
two-tier
One of the simplest types of loop statements is the ____ statement, which repeats a statement or series of statements as long as a given conditional expression evaluates to a truthy value.
while
Explain how you access an element's value in an array.
you can accesses an elements value within a array by calling the array by its name than after the putting [] and the number index you want to access the element Once your arrays are declared, you access the elements in an array with the array name, and the index number inside brackets [ ]. If an array is declared as: typeName varName[size], then the element with index n is referred to as varName[n].
You create an empty document fragment using the ____ method.
createDocumentFragment()
The window.alert() debugging method results in messages ____.
displayed in dialog boxes
Which method returns the element created by the HTML tag pair <p id="weekend" class="first"></p>?
getElementsByClassName("first")
Which method returns all h1 elements in a document?
getElementsByTagName("h1")
Which method adds a node to a parent node before one or more existing child nodes?
insertBefore()
Which attribute enhances usability in modern browsers?
placeholder
You use the ____ method on an object to block the action normally associated with an event.
preventDefault()
Which form element is useful for limiting user options to a set of choices?
selection list
A breakpoint is a designation added to a specific statement in a program that causes program execution to pause when it reaches that statement.
True
A comparison operator is used to compare two operands and determine if one numeric value is greater than another.
True
Although JavaScript is considered a programming language, it is also a critical part of web page design and authoring.
True
By default, browsers create an collection of form objects that you can reference using array notation.
True
Elements that do not require a closing tag are called empty elements.
True
For each error encountered, a browser's console displays a line number and a description of the error.
True
Internet Explorer 8 does not support the textContent property.
True
The top-level object in the browser object model is the Window object, which represents a web browser window.
True
You access an array element's value just as you access the value of any other variable, except that you include the element index in brackets.
True
You can place script elements in either the document head or in the document body.
True
You can think of an array as a collection of variables contained within a single variable.
True
A breakpoint is a designation added to a specific statement in a program that causes program execution to pause when it reaches that statement.
True
__________ is the process of checking that information provided by users conforms to rules to ensure that it appropriately answers a form's questions and is provided in a format that the site's back-end programs can work with.
Validation validation
Explain what a library is and what it is used for, and name one commonly used library.
a library is a code base written by others that you can import into your program which allows you to use functions methods classes within the codebase without having to write it over again by your self A library is a collection of pre-written code that provides additional functionality to a program. Libraries are used to reduce the amount of time and effort required to write code for common tasks, and to allow developers to reuse code across multiple projects. A commonly used library is jQuery. jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
Describe the three behaviors that make up the placeholder effect in modern browsers, and that you need to replicate with JavaScript for older browsers.
add placeholder text when page finished loading.Remove placeholder text when a user selects the text area fieldCheck the contents of text are field when a user moves to another field, and if the field is empty, add back the placeholder text as the value.You'd add a placehodler text. Check the value of the mdoernizr.inputplaceholder value to se if the browser suprots placeholder attribute, if so, your function isn't necessary and will do nothing. If isn't recognized, your function will add text of placeholder attribute as the value for text area. Displaying text in a form field: The placeholder text is displayed in the form field as light gray text that disappears when the user focuses on the field. This provides a hint or instruction for the user about what type of information is expected in the field. Acting as a label: The placeholder text acts as a label for the field, providing context for the user. When the user focuses on the field, the placeholder text disappears, allowing the user to enter their own information. Disappearing when the field is filled in: The placeholder text disappears when the user enters information into the field, allowing the user to see their input without any distractions. To replicate these behaviors in older browsers that do not support the placeholder attribute, you can use JavaScript to dynamically add the placeholder text to the field, and to hide and show the text based on user interaction with the field. Here is an example of how you might do this: lessCopy code var input = document.getElementById("inputField"); var placeholder = "Enter your information here"; input.value = placeholder; input.style.color = "#aaa"; input.addEventListener("focus", function() { if (input.value === placeholder) { input.value = ""; input.style.color = "#000"; } }); input.addEventListener("blur", function() { if (input.value === "") { input.value = placeholder; input.style.color = "#aaa"; } }); In this example, the value property of the input field is set to the placeholder text when the page loads, and the text color is set to light gray using the style.color property. When the user focuses on the field, the focus event is triggered, and the code checks if the value of the field is equal to the placeholder text. If it is, the value is set to an empty string, and the color is set to black. When the user leaves the field, the blur event is triggered, and the code checks if the value of the field is an empty string. If it is, the value is set back to the placeholder text, and the color is set back to light gray.
You can use the CSS ____ pseudo-classes to change the properties of form elements based on their validity status.
:invalid and :valid
Briefly explain how to use comments to locate bugs with JavaScript.
you can comment out code to see if the error still occurs You can comment out all lines except ones that you know work Using comments is a simple and effective way to help locate bugs in JavaScript code. The basic idea is to insert comments in strategic locations in your code, and then use the comments as a roadmap to help you understand what your code is doing and to track down any issues. Here are some common ways to use comments to locate bugs in JavaScript: Adding a comment before a section of code: Before a section of code that you suspect may contain a bug, add a comment describing what the code is supposed to do. This will help you keep track of your code's intended behavior and make it easier to compare the actual behavior to what you expect. Adding a comment after a section of code: After a section of code that you suspect may contain a bug, add a comment describing what the code has actually done. This will help you understand how your code is executing and to determine if there are any discrepancies between the intended behavior and the actual behavior. Adding a comment to mark a line of code: If you suspect a specific line of code may be causing a bug, you can add a comment to that line. This will make it easier to find that line later and will help you remember why you added the comment in the first place. Adding a comment to disable a line of code: If you want to temporarily disable a line of code to see if it is causing a bug, you can add a comment to the line. This will prevent the line from being executed, and you can then re-enable the line by removing the comment later. By using comments in these ways, you can gain a deeper understanding of your code and identify any bugs or issues more quickly. Additionally, by keeping your comments organized and up-to-date, you can make your code easier to read and maintain, and you can more effectively collaborate with other developers on your codebase.
Explain the three stepping options found in the debugging tools in modern browsers.
step. step in. step out stepping in executes an individual line of code and then pauses until you tell the debugger to continue. Stepping over allows you to skip function calls. Program still executes each function that you step over, but it appears in each debugger as if a single statement executes. Stepping out executes all reamin code in the current function. Step Into: This option allows you to step into the next function call. If the next line of code contains a function call, the debugger will enter that function and pause execution on the first line of the function. This allows you to inspect the function's arguments and local variables, and to step through the function's code one line at a time. Step Over: This option allows you to execute the next line of code without entering any function calls. If the next line of code contains a function call, the function will be executed without stopping, and the debugger will pause execution on the next line after the function call. Step Out: This option allows you to finish the current function and return to the caller. The debugger will pause execution on the line of code that follows the function call.
In general, modern browsers display validation feedback after the ____ event is triggered by a form.
submit
Match each item with a statement below: 1. Also known as the browser object model (BOM) 2. Represents the web page displayed in the browser 3. Attaches a node to the DOM tree 4. Each item in the DOM tree 5. References elements using the value of the HTML class attribute 6.Indexed collection of HTML elements 7.References elements using the syntax of CSS 8.Nodes that are not part of a document 9.Closes the current window 10.Maintains an internal list of all the documents that have been opened during the current web browser session
1 client-side object model 2 Document object 3 appendChildmethod 4 node 5 getElementsByClassName 6 HTML collection 7 querySelectorAll()method 8 document fragment 9 self.close() 10. History object
The strict equal operator is ____.
===
An if statement keeps repeating until its conditional expression evaluates to false.
False
Assistive functions perform a type of validation.
False
In JavaScript code, you use the words yes and no to indicate Boolean values.
False
The getElementsBySelector() method returns a collection of elements matching a specified selector.
False
You can use HTML to set the default value of a selection list so no option is selected.
False
You log values to the console using the window.alert() method.
False
An anonymous function is a set of related statements that is assigned a name.
False
When a client requests a server-side script, a client will never see the server-side script, only the ____ that the web server software returns from the script.
HTML
Describe the differences between the setTimeout() and setInterval() methods, and specify the method you use to cancel each.
The setTimeout() and setInterval() methods are two methods in JavaScript that are used to schedule the execution of code. The setTimeout() method schedules a single execution of a function after a specified amount of time. For example, the following code sets a timeout to call the myFunction after 2 seconds: The setInterval() method, on the other hand, schedules the repeated execution of a function at specified intervals. For example, the following code sets an interval to call the myFunction every 2 seconds: To cancel a setTimeout() that has been scheduled, you can use the clearTimeout() method, which takes the ID returned by setTimeout() as an argument. For example: To cancel a setInterval() that has been scheduled, you can use the clearInterval() method, which takes the ID returned by setInterval() as an argument. For example: In summary, setTimeout() is used to schedule a single execution of a function after a specified amount of time, while setInterval() is used to schedule repeated executions of a function at specified intervals. To cancel a scheduled setTimeout(), use clearTimeout(), and to cancel a scheduled setInterval(), use clearInterval().
What are the advantages of using the addEventListener() method instead of the other two methods to specify an event handler?
The usage of addevent listen allows for better security features as well as adds more help with detecting errors within the statement addEventListener() has multiple advantages: Allows you to register unlimited events handlers and remove them with element. removeEventListener() . Has useCapture parameter, which indicates whether you'd like to handle event in its capturing or bubbling phase. There are several advantages of using the addEventListener() method instead of the other two methods to specify an event handler in JavaScript: Multiple Event Handlers: With addEventListener(), you can specify multiple event handlers for a single element. This is useful if you want to run different code in response to the same event, depending on the context. Event Order: Using addEventListener() allows you to specify the order in which event handlers will be executed, whereas the other two methods do not. Event Capturing and Bubbling: The addEventListener() method supports both event capturing and bubbling, allowing you to specify whether an event handler should be executed on the capturing phase (working from the outermost element to the innermost) or the bubbling phase (working from the innermost element to the outermost). Cross-browser Compatibility: The addEventListener() method is supported in all modern browsers, including Internet Explorer, Firefox, Safari, and Google Chrome, which makes it a more reliable and cross-browser compatible option than the other two methods. In summary, using the addEventListener() method is the recommended way to specify event handlers in JavaScript, as it offers a more versatile, reliable, and flexible approach to event handling.
____________________ is the examination of individual statements in an executing program.
Tracing
Name two tools you can use to analyze your HTML code for errors, and describe how to use them for this task.
W3C Validation Service: This is an online tool provided by the World Wide Web Consortium (W3C) that allows you to check the validity of your HTML code. To use it, simply enter the URL of your HTML page or paste the code into the validation service, and the tool will analyze it and report any errors or issues. Browser DevTools: Most modern web browsers, such as Google Chrome, Mozilla Firefox, and Apple Safari, come with built-in developer tools that can be used to analyze your HTML code for errors. To use these tools, right-click on the page you want to inspect and select "Inspect Element" (or similar), and then navigate to the "Elements" tab to view the HTML code and any associated errors. In both cases, the tools will analyze your HTML code and report any errors or issues they find, such as missing closing tags, incorrect nesting of elements, or incorrect use of attributes. By fixing these errors, you can improve the structure and maintainability of your HTML code and ensure that it is displayed correctly in the browser.
The ____________________ object represents a web browser window.
Window
Can you use JavaScript access URLs contained in the History object? If yes, provide code to do so. If no, why not?
Yes, you can access URLs contained in the History object in JavaScript. The History object provides access to the browser's history, allowing you to manipulate the navigation history of the current page. You can use the back(), forward(), and go() methods to navigate the history, and the length property to get the number of entries in the history. Here is an example of how to access URLs contained in the History object: lessCopy code // Get the number of entries in the history var numEntries = history.length; // Access the URL of the current entry var currentURL = history.location.href; // Access the URL of the previous entry var previousURL = history.back(); // Access the URL of the next entry var nextURL = history.forward(); It's worth noting that the back(), forward(), and go() methods can only navigate within the same tab or window. If you want to access history information for other tabs or windows, you need to use the Window object, which provides access to the browser window and its properties. // Get the number of entries in the history var numEntries = history.length; // Access the URL of the current entry var currentURL = history.location.href; // Access the URL of the previous entry var previousURL = history.back(); // Access the URL of the next entry var nextURL = history.forward();
Explain how access to the call stack is useful in debugging.
You can use the call stack in debugging will help you see what code runs until there is an error The purpose in the call stack is to allow you to see exactly what call caused an issue to happen. When you look at the stack trace in an Exception, you can see the original call that caused the error to happen. Access to the call stack is a key feature of most debugging tools and is useful in understanding the flow of execution of a program and identifying the source of problems or bugs. The call stack is a data structure that keeps track of the sequence of function calls that are made as a program executes. Each time a function is called, the current state of the program is saved on the stack, and each time a function returns, the state is popped off the stack. In debugging, the call stack provides a way to see the history of function calls that led to the current state of the program. This information is often displayed in the debugger's interface and can be used to understand the relationships between functions and to identify the source of an error. For example, if an error occurs in a program and the debugger stops execution, you can examine the call stack to see which functions were called leading up to the error. You can then use this information to isolate the source of the problem, whether it is in the current function or in a function that was called earlier. Additionally, by examining the values of variables and the state of the program at each level of the call stack, you can gain a deeper understanding of how your code is executing and how it is producing the results that you see. This can help you quickly identify and fix bugs, as well as optimize your code for performance. In summary, access to the call stack is a valuable tool in debugging, as it provides a way to see the sequence of function calls that led to the current state of the program and to understand how the program is executing.
Why is is usually not necessary to include testing for the number of characters in user input in custom validation functions?
because current and older browsers enforce the maxlength attribute. Makes it impossible for users to enter more characters than the maxlength value allows. It is usually not necessary to include testing for the number of characters in user input in custom validation functions because this type of validation is often already built into the HTML form element. For example, the input element has an maxlength attribute that allows you to specify the maximum number of characters that can be entered into the field. Additionally, many web browsers have built-in validation for the maxlength attribute, and will automatically prevent the user from entering more characters than are allowed. In addition, testing for the number of characters in user input can be done using the length property of a string in JavaScript. For example: pythonCopy code var input = document.getElementById("inputField").value; if (input.length > 10) { alert("Input must be less than 10 characters"); } So, while it is possible to include testing for the number of characters in user input in custom validation functions, it is often unnecessary as it can be handled in other ways. Instead, custom validation functions are typically used to validate the format or content of the input, such as checking if a required field has been filled out, or if an email address is in the correct format.
The term ____________________ refers to the temporary suspension of program execution so that you can monitor values and trace program execution.
break mode
The requirements of the form you're validating determine the kind of logic you need to incorporate into a custom validation program. However, a few types of validation functions are particularly common. Name two.
checking that required fields contains entries.Checking value that are dependent on the values of other controls.Checking for an appropriate content type in one or more fields. Two common types of validation functions are: Required field validation: This type of validation is used to ensure that the user has filled out all required fields in a form. It is often done by checking if the value of a field is an empty string, and if so, displaying an error message. Data type validation: This type of validation is used to ensure that the user has entered data of the correct type into a form field. For example, you might validate that a field contains a number, a date, an email address, or a certain number of characters. This type of validation is often performed using regular expressions, which are patterns used to match specific types of data. Examples of validation functions for these two types are: javascriptCopy code function validateRequiredField(field) { if (field.value === "") { // Show error message return false; } return true; } function validateEmail(email) { var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; if (!emailRegex.test(email.value)) { // Show error message return false; } return true; } In these examples, the validateRequiredField function checks if the value of the field is an empty string. If it is, an error message is displayed and the function returns false. If the value is not an empty string, the function returns true. The validateEmail function uses a regular expression to test if the value of the email field matches the pattern of a valid email address. If it does not, an error message is displayed and the function returns false. If the value does match the pattern, the function returns true.
