SamMakesCode · November 2, 2018 16:32
diff --git a/test.html b/test.html
 <!DOCTYPE html>

 <html lang="en">
    <body>
        <!-- In programming you can pass arguments to your functions like this... -->
        <script>
            function setUserNameTo(name) {
                // Do some stuff
            }
            setUserNameTo('John');
        </script>

        <!-- Javascript loves passing other functions as arguments to functions like this... -->
        <!-- This is called a "closure" or "anonymous function" -->
        <script>
            function doSomething(thing)
            {
                thing(); // Do the thing
            }
            doSomething(function () {
                // Some stuff
            })
        </script>

        <!-- To listen to an event (like when someone clicks on a button) you need to get the button -->
        <button id="hi_button">Say Hi</button>
        <script>
            // This is how to get a button by it's ID "hi_button"
            var button = document.getElementById('hi_button');
        </script>

        <!-- Once you have the button, you can listen for events (and we're going to pass in a closure like above) -->
        <script>
            button.addEventListener('click', function () {
                alert('Hi');
            });
        </script>

        <!-- Sometimes an element might not have an ID, so you want to get by it's class name -->
        <div class="menu_item">Menu Item 1</div>
        <div class="menu_item">Menu Item 2</div>
        <div class="menu_item">Menu Item 3</div>
        <script>
            var collection_of_menu_items = document.getElementsByClassName('menu_item');
        </script>

        <!-- If you wanted to listen to an event on all of these items you can loop over them -->
        <script>
            // Get the number of menu items first
            var number_of_menu_items = collection_of_menu_items.length;

            // Then loop over the items
            // This is called "traversing arrays"
            for (var i = 0; i < number_of_menu_items; i++) {

                // For every menu item, "listen" for clicks and alert the user if it's clicked

                collection_of_menu_items[i].addEventListener('click', function () {
                    alert('You\'ve clicked a menu item.')
                });
            }
        </script>

        <!-- Sometimes, you won't even have a class name, so you can get the menu items above like this -->
        <script>
            // But be careful, because this will get all the divs on the page and that might be a lot
            var another_collection_of_menu_items = document.getElementsByTagName('div');
        </script>

        <!-- There are other events you can listen to -->
        <button id="bye_button">Say Bye</button>
        <script>
            var bye_button = document.getElementById('bye_button');

            // These two events will "edit the DOM" because they're changing the button
            bye_button.addEventListener('mouseover', function () {
                bye_button.innerHTML = 'Please don\'t say goodbye';
            });
            bye_button.addEventListener('mouseout', function () {
                bye_button.innerHTML = 'Say Bye';
            });

            // You could remove the button
            bye_button.addEventListener('click', function () {
                bye_button.remove();
            });
        </script>

        <!-- You can also edit the DOM by adding things -->
        <ul id="list"></ul>
        <button id="add_item">Add List Item</button>
        <script>
            // First get the list
            var list = document.getElementById('list');

            // Then get the button
            var add_item_button = document.getElementById('add_item');

            // When the button is clicked...
            add_item_button.addEventListener('click', function () {
                // Add a list item
                list.innerHTML += '<li>A list item</li>';
            });
        </script>

        <!-- (back to traversing things) -->
        <!-- Sometimes you won't have an array, you'll have an object -->
        <script>
            var person = {
                firstname: 'Jane',
                lastname: 'Doe',
                nationality: 'American',
            };

            // To traverse this you would do this
            // In Google Chrome, press F12 to see this output
            for (key in person) {
                console.log('The value of ' + key + ' is ' + person[key]);
            }
        </script>

        <!-- A little more complicated, you might have an array of objects -->
        <!-- View this in the console by pressing F12 again -->
        <script>
            console.log(' ');
            console.log('Let\'s traverse some people...');
            var people = [
                {
                    firstname: 'John',
                    lastname: 'Smith',
                    nationality: 'British',
                },
                {
                    firstname: 'John',
                    lastname: 'Doe',
                    nationality: 'American',
                },
                {
                    firstname: 'Freja',
                    lastname: 'Nilsson',
                    nationality: 'Swedish',
                },
            ];

            var number_of_people = people.length;

            for (var j = 0; j < number_of_people; j++) {
                console.log(people[j].firstname + ' ' + people[j].lastname + ' is ' + people[j].nationality);
            }
        </script>

        <!-- To check a network request in the console, open the console with F12... -->
        <!-- Go to the "Network" tab -->
        <!-- Press F5 to reload -->
        <!-- As you can see, test.html returns a "200" which means everything is good -->
    </body>
 </html>
	<!DOCTYPE html>

	<html lang="en">
	<body>
	<!-- In programming you can pass arguments to your functions like this... -->
	<script>
	function setUserNameTo(name) {
	// Do some stuff
	}
	setUserNameTo('John');
	</script>

	<!-- Javascript loves passing other functions as arguments to functions like this... -->
	<!-- This is called a "closure" or "anonymous function" -->
	<script>
	function doSomething(thing)
	{
	thing(); // Do the thing
	}
	doSomething(function () {
	// Some stuff
	})
	</script>

	<!-- To listen to an event (like when someone clicks on a button) you need to get the button -->
	<button id="hi_button">Say Hi</button>
	<script>
	// This is how to get a button by it's ID "hi_button"
	var button = document.getElementById('hi_button');
	</script>

	<!-- Once you have the button, you can listen for events (and we're going to pass in a closure like above) -->
	<script>
	button.addEventListener('click', function () {
	alert('Hi');
	});
	</script>

	<!-- Sometimes an element might not have an ID, so you want to get by it's class name -->
	<div class="menu_item">Menu Item 1</div>
	<div class="menu_item">Menu Item 2</div>
	<div class="menu_item">Menu Item 3</div>
	<script>
	var collection_of_menu_items = document.getElementsByClassName('menu_item');
	</script>

	<!-- If you wanted to listen to an event on all of these items you can loop over them -->
	<script>
	// Get the number of menu items first
	var number_of_menu_items = collection_of_menu_items.length;

	// Then loop over the items
	// This is called "traversing arrays"
	for (var i = 0; i < number_of_menu_items; i++) {

	// For every menu item, "listen" for clicks and alert the user if it's clicked

	collection_of_menu_items[i].addEventListener('click', function () {
	alert('You\'ve clicked a menu item.')
	});
	}
	</script>

	<!-- Sometimes, you won't even have a class name, so you can get the menu items above like this -->
	<script>
	// But be careful, because this will get all the divs on the page and that might be a lot
	var another_collection_of_menu_items = document.getElementsByTagName('div');
	</script>

	<!-- There are other events you can listen to -->
	<button id="bye_button">Say Bye</button>
	<script>
	var bye_button = document.getElementById('bye_button');

	// These two events will "edit the DOM" because they're changing the button
	bye_button.addEventListener('mouseover', function () {
	bye_button.innerHTML = 'Please don\'t say goodbye';
	});
	bye_button.addEventListener('mouseout', function () {
	bye_button.innerHTML = 'Say Bye';
	});

	// You could remove the button
	bye_button.addEventListener('click', function () {
	bye_button.remove();
	});
	</script>

	<!-- You can also edit the DOM by adding things -->
	<ul id="list"></ul>
	<button id="add_item">Add List Item</button>
	<script>
	// First get the list
	var list = document.getElementById('list');

	// Then get the button
	var add_item_button = document.getElementById('add_item');

	// When the button is clicked...
	add_item_button.addEventListener('click', function () {
	// Add a list item
	list.innerHTML += '<li>A list item</li>';
	});
	</script>

	<!-- (back to traversing things) -->
	<!-- Sometimes you won't have an array, you'll have an object -->
	<script>
	var person = {
	firstname: 'Jane',
	lastname: 'Doe',
	nationality: 'American',
	};

	// To traverse this you would do this
	// In Google Chrome, press F12 to see this output
	for (key in person) {
	console.log('The value of ' + key + ' is ' + person[key]);
	}
	</script>

	<!-- A little more complicated, you might have an array of objects -->
	<!-- View this in the console by pressing F12 again -->
	<script>
	console.log(' ');
	console.log('Let\'s traverse some people...');
	var people = [
	{
	firstname: 'John',
	lastname: 'Smith',
	nationality: 'British',
	},
	{
	firstname: 'John',
	lastname: 'Doe',
	nationality: 'American',
	},
	{
	firstname: 'Freja',
	lastname: 'Nilsson',
	nationality: 'Swedish',
	},
	];

	var number_of_people = people.length;

	for (var j = 0; j < number_of_people; j++) {
	console.log(people[j].firstname + ' ' + people[j].lastname + ' is ' + people[j].nationality);
	}
	</script>

	<!-- To check a network request in the console, open the console with F12... -->
	<!-- Go to the "Network" tab -->
	<!-- Press F5 to reload -->
	<!-- As you can see, test.html returns a "200" which means everything is good -->
	</body>
	</html>