condition
?
expression1
:
expression2
var isValid;
if (name.length > 0){
isValid = true;
}else{
isValid = false;
}
var isValid = (name.length > 0) ? true: false;
Simple Validation
var isValid = (name.length > 0) ? true: false;
Age Gate
var oldEnough = (age > 17) ? true: false;
var prefix = (isMarried) ? "Mrs.": "Ms.";
Event listeners allow us execute JavaScript when the user interacts with the document.
.forEach()
forEach loops through each item in an array and executes a function for each item.
[1,2,3].forEach(function(element, index, array){
//Code
});element - the current iterated element.index - the current zero based indexarray - the full array of itemsSee the Pen Array - forEach() by Jon (@Middaugh) on CodePen.
See the Pen Array - forEach() by Jon (@Middaugh) on CodePen.
.map()
map acts similar to forEach but it returns a whole new array.
[1,2,3].map(function(element, index, array){
return '';
});
element - the current iterated element.index - the current zero based indexarray - the full array of itemsSee the Pen Array - map() by Jon (@Middaugh) on CodePen.
.filter()Filter iterates through an array and adds the element to the new array if it returns true.
[1,2,3].filter(function(element, index, array){
return true | false;
});element - the current iterated element.index - the current zero based indexarray - the full array of itemsSee the Pen Array - filter by Jon (@Middaugh) on CodePen.
See the Pen Array - Filter Advanced by Jon (@Middaugh) on CodePen.
.find()Acts like filter, but only returns the first one found that matches the parameters
[1,2,3].find(function(element, index, array){
return true | false;
});element - the current iterated element.index - the current zero based indexarray - the full array of itemsSee the Pen Array - Filter Advanced by Jon (@Middaugh) on CodePen.
Sorting an array happens in place, it doesn't return a new array.
var food = ['taco', 'burger', 'hotdog'];
food.sort();
console.log(food); //['burger', 'hotdog', 'taco'];
var nums = [20, 3, 10, 1, 2]
nums.sort();
console.log(nums); //[1, 10, 2, 20, 3];
.sort sorts by unicode character. Everything gets converted to a string before sorting.
This is what we are going to use for now
var nums = [20, 3, 10, 1, 2]
nums.sort(function(a,b){
return a - b;
});
console.log(nums); //[1, 2, 3, 10, 20];
RegExp are patterns that are used to match specific characters.
We'll use them for text searching and text replacement.
RegExps are not unique to JavaScript.
Syntax: /pattern/modifiers
var pattern = /lorem/i
var str = "hello world. Hello class. hello things";
var pattern = /hello/i;
var newStr = str.replace(pattern, 'Goodbye');
Result: 'Goodbye world. Hello class. hello things'
We can add g to our pattern to globally replace.
var str = "hello world. Hello class. hello things";
var pattern = /hello/ig;
var newStr = str.replace(pattern, 'Goodbye');
Result: 'Goodbye world. Goodbye class. Goodbye things'
Regex Test is a method that allows us to see if a block of text contains a pattern. This leverages the RegExp object.
var str = "Lorem ipsum dolor";
var patt = new RegExp(/lorem/i);
var res = patt.test(str);
The i flag allows 'Lorem' to match.
Constructing RegExp patterns can be really hard. I always keep a few handy.
/[a-z]/gi - Letters only/[0-9]/gi - Numbers only/^[a-z0-9_-]{3,16}$/ - User Name min 3 max 16/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ - Email/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ - URL Labels are used to make inputs more accessible.
for - the ID of the corresponding input
See the Pen UA-ITR-Froms1 by Jon (@Middaugh) on CodePen.
The button element is a clickable element inside of your HTML. The button element can contain content of multiple types inside it.
type - defines default behavior of the button.
buttonreset - Clears inputs when in a formsubmit - Triggers a form submissionNameValueSee the Pen UA-ITR-Froms2 by Jon (@Middaugh) on CodePen.
Input elements are the primary way we retrieve information from the user.
There are many different attributes available to us, but we are only going to focus on the basics
id and classtype - sets the behavior of the input name - represents the input's name inside a form.value - represents the current text or value for the inputplaceholder - text displayed before the element is filled out.The text input is the most commonly used html input you will use. It represents a single line text.
See the Pen UA-ITR-Froms3 by Jon (@Middaugh) on CodePen.
The Password Input is very similar to the text input, but any text put in the textbox will be represented with circles or asterisks.
See the Pen UA-ITR-Froms4 by Jon (@Middaugh) on CodePen.
Radio inputs provide the user a list of items where only one can be selected
name
value
checked
Yes
No
Maybe
Radio inputs provide the user a list of items where only one can be selected
name
value
checked
Yes
No
See the Pen UA-ITR-From5 by Jon (@Middaugh) on CodePen.
select element
Selects, or dropdowns, are used to provide the user the ability to select one of many options. Selects are composed posed of option tags.
option element
Option are only used inside select elements.
selectedvalue
See the Pen UA-ITR-From6 by Jon (@Middaugh) on CodePen.
Textarea
The textarea element provides the user with the option for multi line input
There are attributes to control its size, but you should use CSS to set its size.
See the Pen UA-ITR-From6 by Jon (@Middaugh) on CodePen.
<form> Content </form>action - Represents the url where we are sending the data.method - specifies the HTTP method used
getpostnameautocomplete
novalidate