CSCI 4513
Week 5, Lecture 9
Having consistent style rules makes your code more maintainable and easier to read.
Linters scan your code with a set of style rules and report errors they find.
# Install as dev dependency
npm install --save-dev eslint
# Initialize configuration
npx eslint --init
eslint - The most popular JavaScript linter. Catches style errors and inconsistencies.
--init - Interactive wizard that creates a config file with your preferred rules
What it does: catches style errors, reports inconsistencies, auto-fixes some issues, enforces team standards.
Formatters automatically format your code according to a set of rules.
# Install Prettier
npm install --save-dev prettier
# Format a file
npx prettier --write myfile.js
prettier - Opinionated formatter: rewrites your code to follow consistent style
--write - Edits the file in place (without it, Prettier just prints the formatted output)
ESLint vs Prettier: ESLint finds problems in your code. Prettier fixes how it looks. Use both together!
Forms are crucial for most websites: sign-ups, contact forms, search, and more!
JavaScript provides built-in methods for form validation:
// Check if a field is valid
const emailInput = document.querySelector('#email');
if (!emailInput.validity.valid) {
console.log(emailInput.validationMessage);
}
// Common validity properties:
emailInput.validity.valueMissing; // Required field empty
emailInput.validity.typeMismatch; // Wrong type (bad email)
emailInput.validity.tooShort; // Below minlength
emailInput.validity.tooLong; // Above maxlength
// Set custom validation message
emailInput.setCustomValidity(
'Please use a company email');
validity - Object on every input element with boolean flags for each validation rule
validationMessage - Browser-generated error text (e.g., "Please include an '@' in the email")
setCustomValidity() - Override the default message with your own. Pass '' to clear it.
These properties map to HTML attributes: required, type, minlength, maxlength.
Validate as the user types, not just on submit!
const form = document.querySelector('form');
const email = document.querySelector('#email');
// Validate when user leaves field
email.addEventListener('blur', () => {
if (!email.validity.valid) {
showError(email, 'Please enter a valid email');
} else {
clearError(email);
}
});
// Prevent form submission if invalid
form.addEventListener('submit', (e) => {
if (!form.checkValidity()) {
e.preventDefault();
showErrors();
}
});
'blur' - Fires when user clicks/tabs away from a field. Better UX than validating on every keystroke.
showError / clearError - Your own helper functions to display/remove error messages in the DOM
checkValidity() - Returns true if the entire form passes all constraints
e.preventDefault() - Stops the form from submitting so you can show errors instead
JavaScript is a programming language that conforms to the ECMAScript standard.
let and constProblem: New JavaScript features take time to be supported across all browsers.
Solution: We can transpile modern JavaScript to older versions!
Babel transpiles modern JavaScript to code that older browsers can understand.
// Modern ES6 code you write:
const greet = (name = 'World') => `Hello, ${name}!`;
// Transpiled to ES5 by Babel:
var greet = function greet(name) {
if (name === undefined) name = 'World';
return 'Hello, ' + name + '!';
};What Babel converts:
=> arrow → function keywordconst → varif checkFor our curriculum, modern browsers support everything we use — no Babel needed yet!
By this point, you should have completed:
Use remaining class time to:
📅 Next Class: Async and APIs
📝 Homework: Catch up on previous projects!