Chictech 2015

Javascript Workshop

Emily Chao / elchao2@illinois.edu

Link to presentation: http://tinyurl.com/omhsc7b

Workshop Plan

• An overview of the web
• A light intro to HTML/CSS
• A deeper intro to Javascript
• Creating your own custom soundboard.
• Controlling a song's play/pause/looping
• Animation, maybe to the beat of the song

Basic Overview of a Website

• Content - HTML
• Styling - CSS
• Interactivity - JavaScript
• Logic - various languages, frameworks

What is HTML?

• Renders your content on the webpage in the form of tags and attributes
• Tags represent certain elements: images, paragraphs, headings, etc
• The most generic and most customizable tag is the <div> tag

What is CSS?

• HTML is to architect as CSS is to interior designer
• CSS specifies the style for our html elements
• Can style an element by tag, by id, by class

div {
	width: 100px;
	height: 100px;
	border: 1px solid;
}

But What is Javascript?

Motivation

• Websites used to be boring and static.
• Needed some way to animate things, have user interaction, make things more fun.
• Handle alerts, custom key and mouse clicks, etc.
• Powerful frameworks

Javascript - the language of the web

• Created by Brendan Eich in 10 days - UIUC alum
• EcmaScript Standard, Managed by ECMA International
• Latest version - not fully supported yet in browsers - EcmaScript 6
• Separate from Java - not related at all
• Interactivity is based on events - mouse click, key press, etc
• Can set colors, change styles of elements

var variableName = "some value";
function someFunction() {
	alert(variableName);
}
					

Feelings about Javascript

Let's get started

https://github.com/IllinoisWCS/chictech-javascript-framework