Jonathan Grover jongrover

JavaScript Part 1

Topics:

Variables & Data types
Conditional Statements
Functions & Scope
setting up a document to use jQuery
jQuery Selectors & Methods
Retrieving Form Values
Arrays

Student Sinata App: JS - Search Box

Objective

Add JavaScript Behavior to your existing Sinatra App. You will be adding the functionality to allow users to type search term into an input field and click a button to search the students page and highlight content.

Steps

First use git to create a new feature branch called search-box. Checkout this branch and use it to build the serach box feature.

Student Sinata App: JS - AJAX Sorting

Objective

Create a select drop down menu with options to sort by: alphabetical ordering by full names, longest quote (most characters), shortest quote (least characters).

Core JavaScript Fundamentals:

Code Avengers: http://www.codeavengers.com/javascript/1#1.1

JavaScript for Absolute Beginners video series (never watched all these before, but seems ok): http://channel9.msdn.com/Series/Javascript-Fundamentals-Development-for-Absolute-Beginners

Good reference book - JavaScript Definitive Guide: http://it-ebooks.info/go.php?id=416-1374962086-a7b5f33e035c5b66a423b1ceef3cfa60

An understanding of what parts of the language to stay away from - JavaScript the Good Parts book:

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
	<script>

	// Set starting addresses

	var start_address = 'Union square NYC',
	end_address = 'Times Square NYC',
	start_station = '',
	end_station = '';

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#wrapper {
	width: 600px;
	margin: 0 auto;
	}

	<script>
	/* ATM lab Directions

	1. set initial balance.

	2. prompt the user for their choice.

	3. run a particular function based on the users choice of withdrawal or deposit.

	4. tell the user their new balance.

	<script>
	var balance = 100.0; //set initial balance.

	function get_balance() {
	alert('Your current balance is: '+balance);
	atm();
	}

	function make_deposit() {
	var deposit = parseFloat(prompt('How much would you like to deposit?'));

	<h1>ATM</h1>
	<form id="atm" action="#" method="post">
	<select name="choice" id="choice">
	<option selected>-- select choice --</option>
	<option value="deposit">deposit</option>
	<option value="withdrawal">withdrawal</option>
	</select>
	<input type="text" id="amount" name="amount" placeholder="amount">
	<input id="submit" type="submit" value="submit">
	</form>