javascript redux

javascript enables interactivity beyond what the browser comes with
				
comes from HTML or CSS

a tags
:hover
video / audio players
form tags

you'll need Javascript

essentially everything else
				
<script type="text/javascript" src="script.js" defer>

	-- or --

<script>

	// in here we're writing javascript

	// open the developer tools to see the js console
	console.log('hello world')

</script>
Undefined - nothing
Boolean - True / False
Number - 15, 27, -7327720
String - "hello", 'whats up', `yo`

Array, Object, Function
				
Array is a numbered list of things.

let myArray = [ 'hi', 1, false, [ 'hello' ]]


				
Array is a numbered list of things.

let myArray = [ 'hi', 1, false, [ 'hello' ]]

myArray[0]    == 'hi'
				
Array is a numbered list of things.

let myArray = [ 'hi', 1, false, [ 'hello' ]]

myArray[3][0] == 'hello'
				
Object is a set of named things.

let willObject = {
	name : 'will',
	height : {
		measure : 70,
		units : 'inches'
	},
	age : 29,
	cool : false,
	favoriteFoods : [ 'pears', 'fries' ]
}
                                                        

				
Object is a set of named things.

let willObject = {
	name : 'will',
	height : {
		measure : 70,
		units : 'inches'
	},
	age : 29,
	cool : false,
	favoriteFoods : [ 'pears', 'fries' ]
}
                                                        
willObject.name == 'will'
				
Object is a set of named things.

let willObject = {
	name : 'will',
	height : {
		measure : 70,
		units : 'inches'
	},
	age : 29,
	cool : false,
	favoriteFoods : [ 'pears', 'fries' ]
}
                                                        
willObject.height == { measure : 70,  units : 'inches' }
				
Object is a set of named things.

let willObject = {
	name : 'will',
	height : {
		measure : 70,
		units : 'inches'
	},
	age : 29,
	cool : false,
	favoriteFoods : [ 'pears', 'fries' ]
}
                                                        
willObject.favoriteFoods[1] == 'fries'
				
Function is a thing that does something.

function agePerson(person){
	person.age = person.age + 1;
}






				
Function is a thing that does something.

function agePerson(person){
	person.age = person.age + 1;
}

willObject.age == 29

agePerson(willObject)

willObject.age == 30
				
Function is a thing that does something.

function agePerson(person){
	person.age = person.age + 1;
}

willObject.age == 29

agePerson(willObject)

willObject.age == 30
				
<script>
	// in here we're writing javascript

	let hoverParagraph = document.querySelector('#hoverParagraph')
	let that = document.querySelector('#thisIsThat')
	
	hoverParagraph.onpointerenter = function(){
		that.classList.add('red')
		// <pre id="thisIsThat" class="red"> ... </pre>
	}
	
	hoverParagraph.onpointerleave = function(){
		that.classList.remove('red')
		// <pre id="thisIsThat" class=""> ... </pre>
	}
</script>
this is that


hovering over this makes THAT red
<script>
	// in here we're writing javascript

	let someElement = document.querySelector('#someElement')
	
	someElement.onpointerdown = function(){
		// do a thing
	}

	someElement.onpointerup = function(){
		// do another thing
	}

	let scrollPosition = 0

	window.onscroll = function(){
		scrollPosition = window.scrollY
	}

	window.requestAnimationFrame(checkScrollPosition)

	function checkScrollPosition(){
		if(scrollPosition > 1000){
			console.log('scroll position is over 1000!')
		}
		window.requestAnimationFrame(checkScrollPosition)
	}
	
</script>

to glitch