Cameron Pavey cpave3

Session 2

Recap

What is the DOM

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page. - MDN Web Docs

😱 Again in English, please.

Bonus Activities

Learning to code isn't just about remembering all the keywords and functions. What you are really learning is a new way of thinking, and solving problems. The language is just a tool to express these thoughts.

Think about the problem at hand, and how you would solve it yourself. The art of problem solving will only get you half way there, the rest of it depends on your ability to take your solution, distill it into its simplest form, and deliver it to the computer in a way that it can understand.

You will make mistakes, and that's okay. This code isn't Mission Critical. No one is in danger, and no money is on the line, so run your code early, and often. Break things, and then fix them again. A good practice is to break the problem down into basic units which you can solve, implement, and test easily, and in isolation of each other.

Another very important thing is how you express your thoughts as code. Generally speaking, simple is good. Complex solutions introduce new places for bugs

Session 1

What are we doing here?

This is a workshop intended to provide an introduction to JavaScript and other related web technologies.

JavaScript?

Wait, what is JavaScript? -- you (maybe)

Lesson 1

Values

Values are the raw data of your application. A value is a representation of an enitity, which the program can manipulate. They are generally atomic units of data, but in some cases can be more complex, and even composed of other values.

There are multiple different sorts of values, and they are differentiated by what is known as a type. Examples of common types are:

String - A string is essentially a bit of text. they are usually represented by some text wrapped in either "double quotes" or 'single quotes'. There are other kinds of quote marks which can denote strings as well, but these two are the most common

	#if defined(ESP32)
	#include <WiFiMulti.h>
	WiFiMulti wifiMulti;
	#define DEVICE "ESP32"
	#elif defined(ESP8266)
	#include <ESP8266WiFiMulti.h>
	ESP8266WiFiMulti wifiMulti;
	#define DEVICE "ESP8266"
	#endif

	{
	"basics": {
	"name": "Cameron Pavey",
	"label": "Full Stack Developer \| Laravel & React",
	"picture": "",
	"email": "[email protected]",
	"phone": "",
	"website": "https://github.com/cpave3",
	"summary": "A Full-stack PHP and JavaScript developer with a thing for clean, testable, and readable code.",
	"location": {

	<html>
	<head>
	<title>- ooops! -</title>
	<style>
	body {
	background: #0000aa;
	color: #ffffff;
	font-family: courier;
	font-size: 12pt;
	text-align: center !important;

	language: node_js
	node_js:
	- "stable"
	cache:
	directories:
	- node_modules
	script:
	- npm run build
	deploy:
	provider: surge

	const ioHook = require('iohook'); // For checking system input activity
	const logUpdate = require('log-update'); // For writing out to the terminal
	const moment = require('moment'); // Time related stuff

	let idleTime = moment();

	// Listen for all the events we consider activity
	ioHook.on("keyup", event => {
	resetIdle();
	});

	// The normal way
	for(let i = 1; i <= 100; i++) {
	let fizzable = false, buzzable = false;
	fizzable = (i % 3 === 0) ? true : false;
	buzzable = (i % 5 === 0) ? true : false;
	fizzable && buzzable ? console.log('Fizzbuzz') : fizzable ? console.log('Fizz') : buzzable ? console.log('Buzz') : console.log(i);
	}

	// Single Line
	for(let i = 1; i <= 100; i++) i % 3 === 0 && i % 5 === 0 ? console.log('Fizzbuzz') : i % 3 === 0 ? console.log('Fizz') : i % 5 === 0 ? console.log('Buzz') : console.log(i);