LESSON2-JAVASCRIPT Flashcards
offer simplicity and flexibility, making them suitable for a wide range of applications, from basic contact forms to complex data entry interfaces.
HTML Forms
HTML provides a robust set of form elements, including input fields, buttons, checkboxes, radio buttons, dropdown menus, and text areas
HTML Forms
is essential for ensuring that user input meets specified criteria before submitting data to a server.
Form Validation Using JavaScript
display error messages or highlight invalid fields to guide users
Clear Feedback
define validation rules for each form field, such as required fields or email formats
Custom Rules
use JavaScript event handlers to trigger validation as users interact with fields
Event Handling
Test validation across browsers to ensure consistent behavior.
Cross-Browser Compatibility
utilize regex for precise validation, like checking emails or phone formats
Regular Expressions
Implement ___________- as a fallback for security.
Server-Side Validation
Optimize validation logic for efficient processing, especially in complex forms.
Performance Optimization
Ensure error messages are accessible to all users.
Accessibility
improves usability, data integrity, and user satisfaction in web applications.
JavaScript Form Validation
- involves executing code within the user’s web browser. This code is downloaded along with the web page and runs on the client’s device.
Client-Side Scripting
- The primary languages used for client-side scripting are ?, ? ,?.
HTML
CSS
JavaScript
Advantages of Client-Side Scripting
Improved User Experience
Reduced Server Load
Instant Feedback
Client-side scripting enables interactive and dynamic web pages, enhancing ________ through features like form validation, animations, and real-time updates.
Improved User Experience
By offloading processing tasks to the client’s device, client-side scripting helps distribute the workload, reducing the burden on the server and improving overall system performance.
Reduced Server Load
With client-side scripting, users receive immediate feedback without waiting for server responses, leading to faster interactions and smoother browsing experiences.
Instant Feedback
Common Use Cases of Client-side Scripting
- Form Validation
- Dynamic Content Generation
- User interface and user experience enhancements (e.g., dropdown menus, sliders)
- Client-side storage (e.g., cookies, local storage)
- involves executing code on the web server before delivering the resulting web page to the client’s browser.
Server-Side Scripting
- Common server-side scripting languages include ?, ?, ?, ?.
PHP
Python
Ruby
Node.js.
Advantages of Server-Side Scripting
Enhanced Security
Access to Server Resources
Platform Independence
Server-side scripting allows sensitive operations and data processing to be performed on the server, reducing the risk of exposing critical code or data to users.
Enhanced Security
Server-side scripting enables access to server resources like databases, file systems, and external APIs, facilitating complex operations and data manipulation.
Access to Server Resources
Server-side scripts run independently of the client’s device and browser, ensuring consistent behavior and compatibility across different platforms.
Platform Independence
Common Use Cases of Server-side Scripting
- User authentication and authorization
- Database operations (e.g., CRUD operations)
- Content Management Systems (e.g., WordPress)
In HTML, JavaScript code is inserted between ________ tags either within the head and/or body sections of an HTML document.
<script> </script>
One of the many JavaScript HTML methods is ________. This method finds an HTML element and changes the element’s content
getElementById()
- ______ are containers used to store data values in JavaScript
- They are declared using the var, let, or const keywords.
- _______ can hold various types of data, including numbers, strings, arrays, objects, and functions.
Variables
JavaScript can “display” data in different ways:
innerHTML
document.write()
window.alert()
console.log()
- ________ are similar to variables but their values cannot be changed once assigned.
- They are declared using the const keyword.
- ______ are useful for defining values that should remain constant throughout the program.
- ________cannot be redeclared nor reassigned, and they have block scope.
Constants
Use constants to declare the following:
a. A new array
b. A new object
c. A new function
- _________ allow developers to execute different blocks of code based on specified conditions.
- In JavaScript, the if, else if, and else statements are commonly used for conditional execution.
- Additionally, the switch statement provides an alternative for handling multiple conditions.
Conditional Statements
- ________ are used to assign values to variables.
- In JavaScript, the assignment operator “=” is used to assign values.
- Additionally, compound assignment operators like +=, -= can be used for shorthand assignment.
Assignment Statements
- Loops are used to execute a block of code repeatedly as long as a specified condition is true.
- JavaScript provides several types of loops, including for, while, and do-while loops.
- These loops offer flexibility in controlling the iteration process
Loop Statements
Inside the function, the _____ behave as local variables
Parameters
- is a programming paradigm that emphasizes the use of functions as the primary building blocks of software.
- In JavaScript, functions are first-class citizens, meaning they can be assigned to variables, passed as arguments to other functions, and returned from functions, making it well-suited for ____________
Functional programming
- Functions that have access to variables from their outer scope; a function bundled with its lexical environment
- allow a function to access variables from an outer function that has already returned, even though its scope is “closed” over the local variables it defines.
Closures
- Think of ______ in functional programming as encapsulation in OOP, giving us a degree of data
privacy - ______ can also be used to create function factories, where a function generates and returns another function with specific characteristics.
Closures
- Functional programming encourages ________, where data is kept immutable and changes are made by creating new copies rather than modifying
- This reduces the risk of unintended side effects and simplifies debugging.
- In JavaScript, ______ can be achieved using methods like Object.assign(), spread syntax (…), or libraries like Immutable.js.
Immutability
- __________ are functions that either take other functions as arguments or return functions as results.
- They enable abstraction and code reuse by allowing common patterns to be encapsulated into reusable functions.
- Examples of _________ in JavaScript include map(), filter(), and reduce(), which operate on arrays and accept functions as arguments.
Higher-order functions
- ______ are actions or occurrences that happen in the browser, such as mouse clicks, keyboard inputs, form submissions, and page loading.
Events
- ______ are triggered by user interactions or changes in the browser environment and can be captured and handled by JavaScript code.
DOM events
- a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
DOM (Document Object Model)
- are functions that are executed in response to specific events.
Event handlers
- In JavaScript, _______ can be attached to DOM elements using various methods, such as the addEventListener() method or by assigning event handler properties directly to DOM elements.
Event Handlers
- is a function in JavaScript that waits for an event to occur then responds to it.
Event Listener
Common Events
onchange
onclick
onmouseover
onmouseout
onkeydown
onload
- determines in which order the elements receive the event. There are two ways to handle this _______ order of HTML DOM is Event Bubbling and Event Capturing
Event Propagation
- When an event happens on a component, it first runs the event handler on it, then on its parent component, and then up on other ancestors’ components. By default, all event handles through this order from the center component event to the
outermost component event.
Event Bubbling
- It is the opposite of bubbling. The event handler is first on its parent component and then on the component where it wants to fire that event handler. In short, it means that the event is first captured by the outermost element and propagated to the inner elements. It is also called trickle down.
Event Capturing
Event Capturing also called?
Trickle Down
- When an event occurs, an _______ containing information about the event is created and passed to the event handler function. The ______ provides properties and methods that allow developers to access details such as the event type, target element, mouse coordinates, and keyboard key codes.
Event Object
is a technique used to handle events on multiple elements efficiently, particularly when dealing with dynamically generated or large sets of elements.
Event Delegation
- Instead of attaching event handlers to individual elements, _____ involves attaching a single event handler to a common ancestor element and using event bubbling to capture events from its descendants.
Event Delegation
