Module #4: Principles of Development Flashcards
What is jQuery and how do you enable it in your script
jQuery is a JavaScript Library.
We load the jQuery library by adding this line of code in the head
section of our HTML page:
< script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js” ></ script >
write the basic syntax of jQuery.
$(selector).action()
what is the html() method for?
Give writing syntax and reading syntax example.
To read or write the text inside the tag, use the jQuery html()
method (A method is an action you can do like adding or deleting an HTML element).
< p id=”tag1” >I am a paragraph</p >
var x = $(“#tag1”) .html(); //reading
$(“#tag1”). mhtml(“hello world”); //writing
now the p display hello world
what is the val() method for?
Give writing syntax and reading syntax example.
To read or write the value of the tag, use the jQuery val() method.
< input id=”tag2” type= “text” value=”Old text” >
var x = $(“#tag2”). val(); // Reading
$(“#tag2”). val(“New text”); // Writing
Click event fonction. Understand and give the basic syntax
basic: $(). click();
example:
$(“#btn_1”).click( function(){
//something happens here
console. log( “button click!”);
});
Note: this function has no name. For that reason, it is called an anonymous function.
What is AND, OR, NOT conditions in Javascript?
&& : AND Returns a true value if both expressions are true. This operator only evaluates the second expression if necessary.
||: OR Returns a true value if either expression is true. This operator only evaluates the second expression if necessary.
! NOT Reverses the value of the Boolean expression.
The order of precedence for the logical operators. (AND, OR, NOT)
- NOT operator
- AND operator
- OR operator
what is an array
Array is nothing but a collection of elements: the element can be in the format of a string, number,
Boolean, or even an array.
note: number 0 is assigned to first element of the array
find lenght of an array?
console. log(var of the array.length)
sort an array from a to z
var of the array. sort()
how do you iterate through an array. give me the formula.
var shoppinglist = (penis, graine, fesse)
for (let i = 0 ; i < shoppinglist.length; i++) {console.log(shoppinglist[i] ; }
what is the order output in an array
when using vararray.sort()
number, letter, boulian
Q: What is the role of JavaScript in web development?
–General-purpose language
–Used to manipulate HTML & CSS in the browser in response to events
–Interacts with HTML & CSS but can be studied separately
Q: What is the purpose of the developer console and how do you access it?
–Used to view output from JavaScript (e.g., console. log())
–Helps debug and inspect web pages
–Access in Chrome:
–Click the 3-dot icon (top-right)
–Go to More Tools → Developer Tools
–Select the Console tab
where and how to use JS in HTML?
what is the purpuse of use stric?
console.log() utility?
console.clear() utility?
with what must end a statement?
name me 2 type of data and explain them?
JavaScript is written inside < script> tags
–”use strict”; enforces variable declarations for cleaner code
–console.log() outputs messages to the developer console
–console.clear() clears the console
–Statements end with ;
–JavaScript supports different data types like strings (“hello”) and numbers (10)
Q: How do you write comments in JavaScript?
–Single-line: start with //
–Example: // This is a comment
–Multi-line: start with /* and end with /
–Example:
/ This is a multi-line comment */
Q: How do you create and use variables in JavaScript?
–Create with var (used in this course) or let
–Example: var x; or let y;
–Assign value: x = 5;
–Use in expressions: let z = x + y;
Q: What are the main arithmetic operators in JavaScript?
–Addition:
–Subtraction:
–Multiplication:
–Exponentiation:
–Division:
–Remainder (modulus):
Q: What are the main arithmetic operators in JavaScript?
–Addition: a + b
–Subtraction: a - b
–Multiplication: a * b
–Exponentiation: a ** b
–Division: a / b
–Remainder (modulus): a % b → returns the remainder (e.g., 13 % 5 = 3)
Q: How does order of precedence affect JavaScript expressions?
–Without parentheses: 10 + a / b → division happens first (implicit order)
–With parentheses:
–10 + (a / b) → forces division before addition
–(10 + a) / b → forces addition before division
–Different parentheses = different results due to operator precedence
Q: How does JavaScript handle strings and the + operator? (string concatenation)
–Strings can use single or double quotes: ‘Fred’ or “Velma”
–+ is used for concatenation (joining strings)
–Example: ‘Shaggy’ + ‘Scooby’ → ‘ShaggyScooby’
–+ in JavaScript works for both math and string concatenation
Q: What are the 4 ways to declare variables in JavaScript?
–Automatically (not recommended)
–Using var (used in this course)
–Using let (added in 2015)
–Using const (added in 2015)
–var was used from 1995–2015, mostly for older browsers
Q: What are the rules for naming variables (identifiers) in JavaScript?
–Can include letters, numbers, _, and $
–Cannot start with a number
–Case-sensitive (name ≠ Name)
–Can be any length
–Cannot use reserved words (e.g., var, console)
–Avoid global properties/methods as names
–Examples: subtotal, index_1, taxRate, $log
Q: What are camel case and underscore notation in JavaScript? general rules to write var
–Camel case: no spaces, capitalize each new word → theCat, theDog
–Underscore notation: use _ to separate words → the_cat, the_dog
–Both styles are acceptable — just stay consistent!
Q: What do .length, parseInt(), and .toFixed() do in JavaScript?
–string.length: returns number of characters in a string
→ “Shaggy”.length → 6
–parseInt(string): converts a string to an integer
→ parseInt(‘1812’) → 1812
→ parseInt(‘Elephant’) → NaN (not a number)
–number.toFixed(n): formats a number to n decimal places, returns a string
→ 3.14159.toFixed(2) → “3.14”
What does the return statement do in JavaScript?
–Ends a function and sends back a value
–Used to output a result from a function
What is a function in mathematics (and programming)?
–A function applies one or more rules to an input to produce an output
–Input: the value you give the function
–Output: the result the function gives back
–We say that f(x) returns the value of y
general structure of a fontion
general structure
function name(parameter1, parameter2, parameter3) {
// code to be executed
}
For example:
// Function to compute the product of p1 and p2
function myFunction(p1, p2) {
return p1 * p2;
}
JavaScript Functions (w3sc
exemple of a fonction
function convertToCelcius(degrees_fahrenheit){
var the_answer = (degrees_fahrenheit - 32) * ( 5 / 9 );
return the_answer;
}
Q: How do you pause JavaScript code using breakpoints in Chrome DevTools?
–Use line-of-code breakpoints
Open the Sources tab
Open the file containing your code
Go to the line you want to pause at
Click the line number → a blue icon will appear
–This lets you debug and inspect your code step-by-step
Q: Why use functions in JavaScript?
–Break complex problems into smaller parts (divide & conquer)
–Give meaningful names to reusable blocks of code
–Avoid repeating the same code over and over
–Use the same function with different inputs (arguments) to get different results
Q: What’s the difference between defining and calling a function in JavaScript?
–Defining a function:
–You create the function using the function keyword
–Example:
function greet (name) {
return “Hello “ + name;
}
–Calling a function:
–You run the function by using its name with parentheses
–Example:
greet(“Carl”);
Q: How can you generally tell what the data type of a variable is in JavaScript?
–If the value is in quotes, it’s a String
→ ‘Your car is getting ‘ + MPG + ‘ MPG.’ → String
–If the value is the result of math, it’s a Number
→ miles / gas → Number
–If a function returns a value, look at what’s being returned
→ return miles / gas; → returns a Number
→ return ‘Your car is getting ‘ + MPG + ‘ MPG.’; → returns a String
Q: What is a Boolean value in JavaScript and how is it used?
–A Boolean is always either true or false
–You can assign it directly: var x = true;
–Or use a comparison, which returns a Boolean:
–a == b returns true if a equals b, else false
–Used in conditions, logic, and control flow
Q: What is the general rule for comparing values in JavaScript?
what is the sign for this:
equal to
not equal to
greater than
less then
greater than or equal to
less than or equal to
–Use comparison operators to evaluate relationships
–Each comparison returns a Boolean (true or false)
–Key operators:
–== → equal to
–!= → not equal to
–> → greater than
–< → less than
–>= → greater than or equal to
–<= → less than or equal to
Q: What is the general rule for using if statements in JavaScript?
–Use if (condition) to run code only if the condition is true
–The condition uses a comparison (e.g., >=, ==)
–Use = for assignment, not comparison
–Code inside {} only runs if the condition is true
–Always use ; to end each statement
structure = if(condition) { …}
Q: What is the general rule and structure for using nested if statements in JavaScript?
–Use an if inside another if to check multiple conditions in sequence
–The inner block only runs if the outer condition is true
–Useful for situations with dependent logic (e.g., age AND gender)
General structure:
if (condition1) {
// Code runs if condition1 is true
if (condition2) {
// Code runs if condition1 AND condition2 are true
}
}
Q: What is the general rule and structure for using if and else statements in JavaScript?
–Use if to run code only if a condition is true
–Use else to run code when the condition is false
–Allows you to choose between two code blocks
General structure:
if (condition) {
// code runs if condition is true
} else {
// code runs if condition is false
}
Q: What is the general rule and structure for using if and else statements in JavaScript?
–Use if to run code only if a condition is true
–Use else to run code when the condition is false
–Allows you to choose between two code blocks
General structure:
if (condition) {
// code runs if condition is true
} else {
// code runs if condition is false
}
Q: What is the general rule and structure for using if…else if…else in JavaScript?
–Use if…else if…else when you want only one block to run
–JavaScript checks conditions top-down, stops at the first true
–This is called short-circuiting
General structure:
if (condition1) {
// runs if condition1 is true
} else if (condition2) {
// runs if condition1 is false AND condition2 is true
} else {
// runs if none of the above are true
}
Q: What is the general rule and structure when using multiple separate if statements?
–Each if is independent
–All true conditions run, not just the first one
–This can cause logic errors if conditions overlap
General structure:
if (condition1) {
// runs if condition1 is true
}
if (condition2) {
// also runs if condition2 is true
}
: What is the general rule and structure for using isNaN() in JavaScript?
–Use isNaN() to check if a value is “Not-a-Number”
–Returns true if the value is not a valid number
–Automatically tries to convert the value to a number before checking
General structure:
isNaN(expression) // returns true or false
Examples:
–isNaN(“123.45”) → false (valid number)
–isNaN(“zebra”) → true (not a number)
–isNaN(0) → false (number)
–isNaN(“$30”) → true (not a number)
Q: What is the general rule and structure for validating input using return in a function?
–Use if (isNaN(value)) to check for invalid (non-numeric) input
–Use return inside the if block to exit early and skip the rest of the function
–This helps prevent bad data from being processed
General structure:
function someFunction(input) {
if (isNaN(input)) {
return ‘Bad input’;
}
// Continue with the rest of the logic if input is valid
}
Q: What is the general rule and structure for using if, else, and else if in JavaScript?
–Use if to run code when a condition is true
–Use else to run code when the condition is false
–Use else if to test a new condition if the previous one is false
General structure:
javascript
Copier
Modifier
if (condition1) {
// runs if condition1 is true
} else if (condition2) {
// runs if condition1 is false AND condition2 is true
} else {
// runs if none of the above conditions are true
}
Q: What is the general rule and structure for a for loop in JavaScript?
–Use a for loop when you want to repeat a block of code a specific number of times
–The loop has three parts:
1. Initialization (e.g., let i = 0)
2. Condition (loop runs while this is true)
3. Increment (e.g., i++ increases the counter)
General structure:
for (initialization; condition; increment) {
// code to repeat
}
Example:
for (var x = 1; x <= 3; x++) {
console.log(x);
}
Q: What happens in the computer’s memory during a for loop?
–The variable declared in the loop (e.g., x) is stored in memory and updated each time the loop runs
–At the start, the memory holds the initial value (e.g., x = 1)
–Each loop cycle, the value is incremented (e.g., x = 2, then x = 3, etc.)
–Once the loop condition is false, the loop stops and memory stops updating
General structure reminder:
for (var x = 1; x <= 3; x++) {
console.log(x);
}
This explains how x changes from 1 → 2 → 3 → (stops at 4 because x <= 3 becomes false).
Q: What happens in computer memory when a for loop is used to calculate a running total?
–Use a running total variable (e.g., sumOfNumbers) initialized before the loop
–Inside the loop, update the total using:
sumOfNumbers = sumOfNumbers + counter;
–A loop counter is used to control the number of times this addition happens
–All involved variables (e.g., sumOfNumbers, counter, numberOfLoops) are stored and updated in memory
General structure:
var sum = 0;
for (var i = 1; i <= limit; i++) {
sum = sum + i;
}
Q: What is the general rule to calculate future value using a for loop in JavaScript?
–Start with an initial value (e.g., futureValue = investment)
–Use a for loop that runs once for each compounding period
–Each loop iteration increases the future value by a percentage of itself
–This is done using:
futureValue += futureValue * annualRate / 100;
Alternative forms:
futureValue = futureValue + (futureValue * (annualRate / 100));
futureValue = futureValue * (1 + (annualRate / 100));
General structure:
var futureValue = startingAmount;
for (var i = 1; i <= years; i++) {
futureValue = futureValue * (1 + rate / 100);
}
Q: What is the general rule for using loops to generate repetitive blocks of text in JavaScript?
–Use a for loop to repeat code multiple times
–Each iteration outputs a line of text using console.log() or document.write()
–Useful for patterns, menus, repeated instructions, etc.
General structure:
for (var i = 1; i <= numberOfLines; i++) {
console.log(“This is line “ + i);
}
Q: What is the general rule for nesting loops in JavaScript?
–A loop can be placed inside another loop
–The inner loop runs completely every time the outer loop runs once
–Used to handle rows and columns, tables, or combinations
General structure:
for (var i = 1; i <= outerLimit; i++) {
for (var j = 1; j <= innerLimit; j++) {
console.log(“i = “ + i + “, j = “ + j);
}
}
Q: What are loops good for in JavaScript?
–Performing calculations that require repetition (e.g., compound interest, sums)
–Generating repetitive content, including HTML elements like:
–< table> rows
–< select> options
–< ul> or < ol> list items
–Often used with conditionals and functions for more complex logic
