Final Flashcards
The Two Types of Validation?
-Client-side validation (Using HTML, CSS and JavaScript)
-Server-side validation (Using server-side languages such as PHP)
However, it is important to know that server-side validation MUST always be performed even if client-side validation is being performed.
What does the type attribute allow you to do?
< input type = “email” >
The “type” attribute allows developers to implement constraints on user input. Some “type” values such as “email” or “URL” automatically checks whether the value is a valid email or URL.
Some “type” attributes must be used with other attributes in order to enforce validation checks. For example, an ioput with type=”number” may also use the min and max attributes to enforce a minimum and maximum value on the user’s input.
What does the required attribute do?
Can be used in an < input required> to force user to input data
What does the pattern attribute do? and provide examples
Country code: < input type=”text” name=”country_code”
pattern=”[A-Za-z]{{3}}” >
Input can be any letter case insensitive, {3} characters
Three types of variables when routing?
req.query variables(?), req.body variables, req.params variables(/variable).
How to use CSS to have the text change to red when user inputs invalid data?
:valid or :invalid pseudoclasses
EX
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
Connect, Prepare, Execute
Performed when trying to access a database
The default error message user interface provided by the browser may not be suitable for some applications.
Provide 2 examples that aren’t the default that use validation API.
Provide the following Custom error messages:
1. Custom error message text
2. Custom user Interface
- let email = document.getElementById(“mail”);
email.addEventListener(“input”, function (event) {
if (email.validity.typeMismatch) {
email.setCustomValidity(“I expect an e-mail!”);
} else {
email.setCustomValidity(“”);
}
});
- HTML CODE:
< form novalidate >
< input type=”email” id=”mail” name=”mail”>
< span class=”error” aria-live=”polite”>< /span>
JS code:
let form = document.getElementsByTagName(‘form’)[0];
let email = document.getElementById(‘mail’);
let error = document.querySelector(‘.error’);
email.addEventListener(“input”, function (event) {
if (email.validity.valid) {
error.innerHTML = “”; // Reset the content of the message
error.className = “error”;
}
}, false);
form.addEventListener(“submit”, function (event) {
if (!email.validity.valid) {
error.innerHTML = "I expect an e-mail!";
error.className = "error active";
event.preventDefault();
} }, false);
Provide an example that doesn’t use validation API to display an error message?
let targetForm = document.getElementById(“simpleForm”);
targetElement.addEventListener(‘submit’, handlerFunction, false);
function handlerFunction(e){
e.preventDefault();
let usernameElement = document.getElementById("username");
if(usernameElement.value.length < 8){
console.log("Username must be more than 8 characters long");
return false;
}else{
targetForm.submit();
}
}
Explain how javascript can perform text validation?
While a few validation rules may be implemented using simple String functions, comparison operators and if statements, JavaScript can also use Regular Expressions for more complex pattern matching.
Show syntax for regex and its use
let regex = RegExp(‘[A-Za-z]{{3}}’);
#RegExp( [A-Za-z] <- all letters {{3}} <- exactly 3 characters
if (regex.test(string)){
}
else{}
regex.test returns a true or false value
Syntax to instantiate a new object and how to instantiate it using literal syntax?
var car = {}
var car = new Object() //literal syntax
Show the code for creating an object called car that has a make, year, and color. Create it using both Literal syntax and Dot syntax.
//Literal syntax
var car = {make:”Honda”, year:2007, color:”red”}
//Dot syntax
car.make = “Honda
car.year = 2007
car.color = “red”
note: for dot syntax, if the attribute doesn’t exist it will be created as the value is being assigned.
Given an object named Car, use bracket notation([ ]) to give it a property called make and assign it a value of Audi
Car[“make”] = “Audi”
Given the list of Car properties in an array like so
let properties = [“make”, “model”, “year”]
How would you cycle through the list dynamically to apply the attributes for a Honda Civic 2007 to an empty object?
let values = [“Honda”, “Civic”, 2007]
let car = {}
for(let i =0; i < properties.length; i++){
car[properties[i]] = [values[i];
}
Difference between Objects and Arrays?
Both objects and arrays can hold multiple pieces of data.
However, if a piece of data can be referenced by a named property, then an object can be used to make the data structure more descriptive.
Arrays are a lightweight container for holding multiple pieces of data, especially collections of things. Arrays with numeric indexes do not the benefit of being descriptive.
Difference between JSON and Javascript Objects?
JSON: Properties must be written in double quotes. Example: { “make”: “Honda”}
JSON can have the following types of values: string, number, JSON object, array, boolean, null
Javascript Objects: Properties are not written in double quotes. Can also contain othwe JavaScript values and types such as functions.
How to loop through all properties/keys in an object?
Using for in
for (let key in object){
console.log(key +”=”+ object[key]);
}
How to use getters and setters in an object?
let person = {
name: “Tenzing”,
get getName(){
return this.name;
}
}
//Using the getter
console.log(person.getName);
How are classes in Javascript different from classes in Java?
The “class” keyword, under the hood, uses using prototypal inheritance (out of scope of this course). The “class” keyword is “syntactic sugar” over functions and prototype.
Essentially Javascript mimics the action of a Java class using functions
Write down a Javascript Class called Animal, with a constructor that takes name and age, and has a speak method where it says “ahh”
Then create a child class called Dog that also has an attribute called LicksPerSecond and when it speaks it says “ruff”
class Animal{
constructor(name, age){
this.name = name
this.age = age
}
speak(){
console.log(“ahh”)
}
}
class Dog extends Animal{
constructor(name, age, LicksPerSecond){
super(name, age);
this.LicksPerSecond = LicksPerSecond;
}
speak(){
console.log(“ruff”);
}
}
