1. Coding Quickstart!

See appendix for installing and running MS Visual Studio Code, Google Chrome

JavaScript and Chrome Inspector Tool

1. Open inspector tool
   • Open up Google Chrome
   • Right click on page, then click on inspector
   • Click on console button
2. Run JavaScript in the inspector tool
   • Press return
3. Go to next line of code without running script
   • Shift + Return

User input / output

• Message user with an alert
  • alert(‘Hello World!’);
• Get user input and store it in a variable called “name”
  • var name = prompt(‘what is your name’);
• User variable in user message
  • alert(‘Hello’ + name + ‘, it is great to meet you!’);

Calculator and variables

• Calculate numbers (e.g., 2*3); Don’t forget semi-colons after each line!
  • 2*3;
• Use variables to store data; You must “var” before the variable the first time you declare but not afterwards; This returns 8
  • var x = 3;
  • x = 4;
  • var y = 2;
  • x * y; // this will result in 8

Parsing user data

• If the user inputs data from your prompt, it will get stored a string. To use it as a number, convert it with “Parsing”
  • parseInt(prompt(‘what year were you born?’));

If then else statements

• These creates basic logic in your program
• Your program reads if something is true then do some tasks, else, if it is not true, do some other tasks
• Note that each line that is doing something has a semicolon after but not the lines with the if or else
• Also note that you don’t actually have to write out “then”, you simply use the curly brackets before and after the block of code that you want to run when the statement is true:
  • var age = prompt(‘how old are you?’);
  • if (age >= 21) {
  •   alert(‘you can drink!’);
  • } else {
  •   alert(‘you can not drink’);}

Comments: you can write comments in your code that are ignored by the computer; Typically you write pseudo code as comments; You can also comment out lines of code to help debug it

• // this is a JavaScript comment

Random number generator

• Math.random() returns a random number between 0 and 1
• Math.floor() returns largest integer less than or equal to given #
• Combining them, then multiplying the random number by 10, and then adding 1 will get you a random between 1 and 10
  • Math.floor(Math.random()* 10) + 1

Running JavaScript Programs locally

1. Create a HTML file and a JavaScript file
   • index.js
   • playground.html
2. Link your html file to your JavaScript file so that it runs when you open HTML file; Write this in your HTML code
• <script src=index.js> </script>
3. Write you code in JavaScript file
   • alert(‘Hello World’);
4. Go to the html file and open it with Google chrome
   • Always make sure to save all files before running program
   • Note, to open file in Chrome, you should be able to just double click the file or right click the file and then click “open with” and then google chrome

2. Programming Overview

2.1. Basics

Scripts: series of instructions computer can follow one-by-one

• Languages include JavaScript and Python and others
• A very simple script could asks a user for their birthday and check if they are old enough to drink

Pseudo code:

• Function – Check customers IDs
•   Count number of customers in line
•   Until you have checked all customers, check each id
• Function – Check ID
•   If user is under 21, they can’t drink, otherwise they can

Communication:

• alert(‘hello’)// send user message
• prompt(‘enter info’)// get input from user
• console.log(‘test’)// good for debugging; sends message to console

Other

• parseInt()// turn string into number
• Math.floor(Math.random()* 10) + 1// random # between 1 and 10

2.2. Expressions and operators:

These are built in functions of most programming languages that act like calculators of the program

• var color = ‘white’; // assignment operator
• var weight = 30*15; // arithmetic operators; declares and sets weight to 450
• greeting = ‘Hi’ + ‘John’; // string operator; sets greeting equal to ‘Hi John’
• buy = 3 > 5; // comparison operator…buy=false
• buy = (5>3) && (2>4); // logical operators; and statement; buy = false
• buy = (5>3) || (2>4); // logical operators; or statement; buy = true
• i++; // adds one to current number
• x = x +5; // adds 5 to x; if x was 12, then x would be set to 17
• i--; // subtracts one from current number
• 8 % 5; // returns the remainder of 3
• 2**4; // exponent of 2^4, which equals 16

2.3. If then for loops

Most of a program’s “brains” comes from if then functions and loops. This is primarily why it is can be smarterthan a simple calculator or database.

If (true) then…else if (true)…else…: If then functions allow computers to make decisions (sort of). In our very simple ID checker program, the program asks the user their birthday. If the user is greater than 21 years, it lets them drink. “Else” or otherwise, it doesn’t. Below is how to write this in javascript:

• if (today - user_birthday > 21 ) {
•   print(‘you can drink’);
• } else if (user_birthday < =0) {
•   print(‘not a valid ID’);
• } else {
•   print(‘you can’t drink);
• }

For (true) loops: allow you to repeat certain functions while something is true. For example, lets say you want to add the numbers 1 through 100 together. Instead of manually writing out 100 numbers and 100 plus signs (ugh), you could use write belowJS function

• var sum = 0;
• for (x=1 x <= 100; x++) {
•  sum = sum + x;
• }
• alert(sum); // this will show the number 5050

While (true) do… this function will continue to run until the statement is false. Enclosed in the curly brackets is what tasks the while loop will do as long as it is running. Note that this loop can run infinitiy times if the statement is always true so be careful not to accidentially create an “infinite loop”!

• while (still_playing == true) {
•   play_game();
• }

Switch case… this is a short hand way of writing out multiple if then statements; example syntax

• switch (response) {
•   case: blue return ‘b’;
•   case: red return ‘r’;
•   case: yellow return ‘y’;
• }

2.4. Data types:

Strings: letters, words, sentences…Note: To make quotes within quotes use either double quotes the outside of the string and single quotes on the inside or vice versa. You just can’t put single quotes within single quotes.

• ‘I am a string’
• “I’m a string too”
• ‘I’m a syntax error!!’
• str.length; // returns the number of characters in a string

Floats: numbers ( integers are used for whole numbers)

Boolean: only has two values, true or false. Note that these are special words within JavaScript.

Lists: Simple lists of strings, or floats, or variables, etc. Lists items are ordered starting from 0 up through length of list. For example, below list has 3 items, 1st item is at point 0, 2nd is at 1, 3rd at 2. Commonly used list methods include:

push(), pop(), splice(), length, and indexOf().

• var new_list = []; // declares a new list
• new_list = [2, 81, 52];// sets new_list equal to list containing three numbers: 2, 81, and 52
• new_list[1];// returns the number 81
• new_list[1] = 82; // changes the element in position 1 (i.e. 81) to the number 82
• new_list.push(3);// adds the number 3 to that list
• new_list.pop(); // removes and returns the last item from that list
• new_list.splice(1,2); // starting at index position 1, removes two elements from list
• new_list = [‘apple’, ‘banana’, ‘orange’]// creates a new list called groceries
• new_list.splice(1,0,’grapes’);// adds grapes to left of index 1; i.e. [‘apple’,‘grapes’,‘banana’,‘orange’]
• new_list.length;// returns the number of elements in an array
• new_list.indexOf(‘banana’)// searches array for apple

Dictionary: Includes a series of unordered key: value pairs. The key is used to describe an item and value is associated with that key. It could be a definition, like in an actual dictionary or an attribute. Example:

• var quick_dict = {‘tiger’: ‘a large cat’, ‘ice cream’: ‘a tasty desert’};
• var my_hotel = {‘address’: ‘111 main street’, ‘rooms available’: 13};
• my_hotel[‘address’];// looks up the key ‘address’ and returns the value for that key, ‘111 main street’

2.5. Functions

Functions are a series of statements that have been grouped together and can be run whenever function is called

Parameters are variables that you can pass to functions that they can perform actions on;

Arguments are values of paramters

Declaring function is creating the function. Below is JS:

• function add_numbers(x,y) {
•   print(x+y);
• }

Calling a function will run code in function

• add_numbers(1,2);// outputs 3

Global variables vs local variables: If a variable is declared within a function, then it is a local variable that can only be used or accessed within that function. If a variable is declared outside a function, then it is a global variable and can be used or accessed anywhere.

2.6. Object oriented programming

Most programming languages allow you to build objects (e.g., house, car, person ,..) and give that object properties, events and methods. Objects are constructed in a way similar to how functions and dictionaries are built.

Properties: characteristics about object; have both “key” that describes property (e.g., address) and “value” (e.g., 111 main st)

Events: These run programs when different events occur (e.g., hotel room booked, car breaks, button clicked)

Methods: Functions that are specifically built for each object (e.g., book_hotel_room(), find_room_price(), …)

Built-in Objects: web browsers and application interfaces typically come with built in objects and methods that make it easier to create webpages or applications.

Object / Class Constructor:

• Declare a new class that you can use to construct objects
  • function MovieStar(name, birthday) {
  •   this.name = name;
  •   this.birthday = birthday
  •   this.greeting = function(){
  •    alert(‘hi, my name is ‘ + this.name);
  •   }
  • }
• Create a new object using the class you created
  • var tom_cruise = new MovieStar(‘Tom Cruise’, ‘July 3, 1962’);
  • var dwayne_johnson = new MovieStar(‘Dwayne Johnson’, ‘May 2, 1972’)
• Recall or change values from the object
  • tom_cruise.birthday;// returns July 3, 1962
  • tom_cruise[“birthday”];// returns July 3, 1962
  • tom_cruise.birthday = ‘July 4, 1962’; // changes value of birthday to July 4th
  • tom_cruise.greeting();// calls the greeting method; alerts user ‘hi, my name is Tom Cruise’
• Create a list of objects
  • var star_list = [tom_cruise];// adds tom_cruise object to star_list
  • star_list.push(dwayne_johnson);// adds dwayne_johnson object to star_list

for… in loop can be used to loop through all of the key / value pairs in an object

• for (p in person) {
•   alert(p);
• }

3. Your First Website

3.1. Hello World and Intro

HTML is used to create the structure of your webpage (e.g., like the bones in your body)

CSS is used to create the formatting and style of your webpage (e.g., like the skin of your body)

Tags: HTML documents use <tags> to tell the browser how to format content. Pictures need tags, texts need tags, the entire website is made up of tags. Everything must be sandwiched within the tags. In the below code, <p> is the opening tag and </p> is the closing tag and this is used for a paragraph. You can write the content of your paragraph in between the tags.

• <p> Hello World </p>

We can add an attribute name (class) and attribute value (”greeting”), to select specific paragraphs to format differently with CSS

• <p class=”greeting”> Hello World </p>
• p {font-size: 24px;}

…Or you can change all elements with a class equal to “greeting”. The below code includes a Selector (.greeting ), Declaration Block ({color:pink;} ), Property Name(color ) and Property Value (pink )

• .greeting {color:pink;}

3.2. HTML tags and structure

• <!-- Comments are placed in between the following -->
• <!doctype html><!-- needed once for all websites; tells browser to expect html code -->
• <html>...</html><!-- surrounds all the code for your website’s html file -->
• <head>...</head> <!-- includes all the browser information (e.g., doc title, technical information) -->
• <meta charset=”UTF-8”> <!-- Goes inside head tag for U.S. websites -->
• <title> …</title> <!-- Shows up in the web browser title; Goes inside the <head> tag -->
• <link href="main.css" rel="stylesheet"> <!-- Link to external style sheet; put this in head section -->
• <body> …</body><!-- Includes all the content of the website -->
• <header> … </header> <!-- Often has navigation bar & site logo; this is different from <head> -->
• <nav> …</nav><!-- Used to group together major navigational blocks on a page; Often put inside the header -->
• <a href=’www.fb.com’> fb</a><!-- links to other sites or internal sites -->
• <h1> … </h1><!-- Header 1 used typically in <header> tags -->
• <main>… </main><!-- General for main part of the website -->
• <h2> …</h2><!-- Header 2 used typically in <main> tags for sub-headers, can also use <h3>, <h4>, <h5> -->
• <p> …</p><!-- chunks of texts on site; html is whitespace insensitive -->
• <article> …</article><!-- Used for unique part of site (e.g., used for individual blog post) -->
• <aside>... </aside><!-- Not required to understand the rest of the page -->
• <section> … </section><!-- use for section tag -->
• <div> </div><!-- Allows you style a group of elements with the same CSS. It’s also a great multi-purpose tag. It is a non-semantic tag unlike other tags like <ul> or <article>, which are semantic tags that tell you something about the element; It is also a block-line element by default; It is generic and can be used in a wide range of activities. It is used when none of the above apply. -->
• <footer> ….</footer><!-- Web page footer -->
• <ul> <li> point 1 </li> <li> point 2 </li> </ul> <!-- Unordered lists: bullet points; put each List Item <li> within <ul> -->
• <ol> <li> step 1 </li> <li> step 2 </li> </ol> <!-- Ordered lists: bullet points with numbers instead of bullets -->
• <img src=”images/gummy.jpg”> <!-- image found in image folder; use “../images/crispy.jpg” if your index.html is not in same directory -->

3.3. CSS Intro and properties

CSS = Cascading Style Sheet. It means that styles flow or cascades in order of what came last and what is most specific to that HTML element

• Source Order: whatever came last overrides what came before it
• Specificity Order: whatever is more specific overrides other style commands regardless of the Source Order (external less specific than internal; p span is more specific than span)
• Inheritance: A child element will inherit any applicable styles from its parent HTML element

Three ways to add CSS code:

• (Preferred method) Using separate CSS files External Style Sheets allow you to put all of your CSS code in one place and apply it to all of the pages in your website. Need to add below code between <head> tags of html <link href="normalize.css" rel="stylesheet"><

Definitions

• Selector: this is the element that you want to change; for example, pargraphs in the following p {color:purple;}
• Property: what you want to change about your elements; for example, color in above example
• Value:what you want to change you element property too; for example, purple

/* Enter comments between these characters in your CSS code */

Font Properties

• font-family: “georgia”, “serif”; /* If Georgia font does not load on person’s browser, serif is back up font */
• color:blue;
• color:#630600;
• color: rgba(255,255,255,1); /* Uses color on a 0 to 255 scale for R G B and then 0 to 1 for the last value for transparency */
• font-weight: bold;
• font-weight: 600;
• font-style: italic;
• font-size:16px;
• text-transform: uppercase;
• text-decoration: underline;
• font:bold 14px Tahoma;
• text-indent:25px;
• text-align: center;

Background properties

• background-color: rgba(0,0,0,0.5);
• background-image: url("http:dash.ga.co/assets/anna-bg.png");
• background-image: url(“../images/header_bg.jpg”); /* select an image that is up one folder in structure and in images */
• background-size: cover;
• background-repeat: no-repeat;
• background-repeat: repeat-x; /* Left Right Tile */
• background-repeat: repeat-y; /* UpDown tile */
• background-position: 10px 60px; /* Change starting position */
• background-position: 50% 60px; /* Change starting position */

Floating properties

• img {float:right;} /* Element float images to right or left or none */
• p {clear:none;} /* Allows floating elements on both sides. This is default. */
• p {clear: left;} /* No floating elements allowed on the left side. Also can use right or both - No floating elements on either side */
• p {clear: inherit;} /* Element inherits the clear value of its parent */

HTML element properties

• max-width: 500;/* Allows website to be responsive & have 500 max width */
• width:60%;
• height:5%;

Other properties

• ol { list-style-image:url(checkmark.jpg); } /* Custom Bullet points */

Google Fonts:Allows you to easily import different types of fonts

1. Go to Google Fonts: https://fonts.google.com/
2. Click the plus sign on the fonts you want to add
3. Click the minus sign next to the “family selected” tab
4. There will be instructions on what code to add to the HTML section and the CSS code

CSS Selectors

• p { }/* Type - selects all elements of specified type (e.g., <p>)*/
• * { } /* Universal - selects all elements in html file not selected by other selectors */
• #myID { }/* ID - are supposed to singular and unique to allow you format a specific element */
• .class { } /* Class – similar to ID but for formatting multiple elements at same time Note HTML elements can have multiple classes */
• h1, h2, #myID { } /* Compound - format multiple selectors at same time */
• body article p { } /* Descendent - element that is nested inside of specified parent element */
• a:link /* Pseudo class - links in their default state before visitor has interacted with them */
• a:visited /* Links after user has already clicked on them and is visiting that page again */
• a:hover /* Links when the user is hovering their mouse over the link */
• a:active /* Links when the user is hovering their mouse over the link */

3.4. Boxes!

CSS Box Model

• All HTML elements can be thought of as boxes within a CSS box wrapping around each element. The box has four dimensions: margin, border, padding, and actual content.
• Margin: distance between the element’s box and what is around it
• Margin: 40px 0px 0px 0px; /* 40px on top, 0 on right, 0 on bottom, 0 on left */
• Margin: 0 auto; /* Zero margin on top and bottom; auto margin on left/right */
• Margin-top:40px;
• Border: thickness of the border
• border-width: 5px; /* sets border width to 5px */
• border: solid; /* border style */
• border-color: black;
• border-top-color: green;
• border: 2px dashed; /* border width and border style */
• border: 10px ridge rgba(0,0,0,.5); /* border width, style and color */
• border-radius:12px; /* makes the borders curved rather than square */
• border-radius:20%; /* makes the borders curved rather than square */
• Padding = space between the content and the border
• padding:10px; puts 10px /* padding on all sides */
• padding:0px 10px 0px 10px; /* Padding on top, right, bottom, left (i.e. it goes clockwise) */
• padding-top:20px;
• padding:0px 10px; /* Padding on vertical, horizontal */
• Content = size of the content of the element

Block vs Inline

• Block-level elements begin on new lines, which means that the “boxes” for block-level elements extend the full width of the available space (even if the content doesn’t)
• display:block; /* Makes an inline element act like an block element */
• display:inline-block; /* Flows like inline element but can use properties of block element */
• display:none; /* hides the element */
• text-align: center; /* only works on block level elements!! Not in-line! */
• In-line elements do not begin on new lines. Width and height have no impact on in-line elements (must wrap them in a block-level element). Padding, border, and margin don’t vertically push away other elements. Links and images are in line are inline elements.
• display: inline; /* Makes a block element act like an inline element */

Content box vs. border box sizing

• box-sizing: “content-box”; /* specifies size of content box (margin, border, padding added on top of content); default setting */
• box-sizing: “Border-box”; /* specifies size of entire element (margin + border + padding + content); good to use to avoid mistakes */

Absolute vs Relative vs. Fixed Layout types

• Note: You should not chose one of the below layouts for your entire website; you should use a combination of the below layouts
• # div1 {position:absolute; top:2px; left:2px; } /* Absolute positioning allows you to control exactly where div is based on top left 0 position */
• #div1 {position:fixed; top:2px; left:2px; }/* Fixed positioning – similar to absolute positioning but doesn’t move when user scrolls */
• # div1 {position:relative; top:2px; left:2px; }/* Relative positioning – instead of using the origin and then moving it absolutely, it starts at where top left position of element would be without adjustments; this can be tricky to use */

Flex box layouts allow you to have the size of your boxes dynamically change based on the size of the browser or screen being used to view your site

• In HTML, you can set up a main section with two div’s inside
• <main> <div id=”1”> </div> <div id=”2”> </div> </main>
• In CSS, main {display:flex;} changes main element to a flex container and all elements underneath it (i.e. div1, div2) to a flex items
• main {display:flex;}
• #div1 {width:60%;}
• #div2 {width:40%;}
• main {justify-content:flex-start;} /* Items are positioned horizontally at left of container; flex-end, center, space-around, space-between */
• main {align-items:flex-start;} /* Items are positioned vertically at bottom of container; flex-end, center, stretch, baseline */

3.5. Mobile first design and dynamic formatting

Responsive web design is about automatically adjusting the look and feel of a website based on the screen size and the device being used (e.g., mobile vs. desktop) instead of having to create two separate websites (one for mobile and one for desktop). 3 types of layouts:

• Fixed: fixed pixel width container; can create “pixel perfect” design
• Flexible: scales based on size of screen size; not optimized for all screens though
• Responsive:combo of media query and flexible boxes so that you can change the website layout if the screen is smaller; creates breakpoints at different screen sizes

“Mobile-First” Design is creating your website to look good on mobile first (instead of desktop, which is what developers used to do) and then use media queries to change formatting when screen size is larger

• this makes you design for the mobile experience first because it is most important
• it allows mobile devices to only load up the necessary code!!! Which matters more for load speeds on mobile than on desktop

Media Query Allows you to change the format of different items based on the screen size (measured in pixels)

• @media screen and (min-width: 480px) {body {background: red;}}/* sets background to red when screen size is more than 480px wide */
• NOTE: NEED TO ADD VIEWPORT META TAG TO < HEAD> to make media query work!
• <meta name=”viewport” content=”width=device-width”, initial-scale=1”>
• Common Breakpoints (used by Bootstrap)
• Min 480px, 768px, 992px, 1200px…(Mobile first; do this)
• Max 1200px, 992, 768, 480px (Non-mobile first; don’t do this!)

Em…responsive sizing: Em is a CSS relative unit for font-siz; 1em = 100% of the font-size of the parent element (default is 16px if not defined)

• letter-spacing:0.09em;/* em inherits either default font size or font size of parent; 1em = parent size; 2em = 2x parent’s size */
• margin: 0 0 1.5em 0;
• font-size: 2em;
• overflow:hidden;/* Hide content that overflows (e.g., nav bar) */

Bootstrap is an open source webframework and library that allows you to create websites quickly!

4. JQuery and Buttons

4.1. Intro

What is JQuery? a library of Java Script code to make it easier for you to code; JQuery is open-source, cross browser

Why jQuery?It allows you to easily perform DOM manipulation and event listening without some of the issues and length of plain javascript; Most websites use it

Example syntax

• When button is clicked, color_switcher function is run
• $(‘CSSselector’).action()
• $(‘button’).click(color_switcher);

Adding JavaScript and JQuery to HTML:

• Option 1) Add link to JQuery API
• In index.html file ABOVE script link <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> (it links to file with a CDN)
• Note if you don’t add JQuery first then you won’t be able to reference it in .js file
• Option 2) Download JQuery file and link to it
1. Save JQuery file locally as .js in a js folder
2. In your index.html file, add below code right before closing </body> tag <script src="js/myscript.js"></script>
3. Again, make sure this link comes before any of your JS file links

Wrap code JS and JQuery with below as good practice

• prevents your code from running until the entire document is done loading

• $(document).ready(function() {
• //Put all of your code in here
• });

4.2. CSS Selectors

• $(‘*’).click(color_switcher)// all elements
• $(‘h2’).click(color_switcher)// all <h2>’s
• $(‘#big_box’).click(color_switcher)// elements with id big_box
• $(‘.important’).click(color_switcher)// elements with id big_box
• $(‘this’).val();// element that is currently being selected
• $(‘p, h1’).click(color_switcher)// all <p>’s and <h1>’s
• $(‘#sidebar a’).click(color_switcher)// <a>’s that are within sidebar id
• $(‘p > a’).click(color_switcher) // <a>’s that are direct children of <p>
• $(‘div.container’).click(color_switcher)// all <div>’s with class container

4.3. Methods

Most commonly used

• $('#check_boxes').change(prog1);// when check_boxes is changed (i.e. checked / unchecked), then run prog1
• $('#id').click(edit_program); // when id is clicked, then edit_program is run
• x = $(‘#id’).val(); // get value of element and set x to it; can also set element values
• $(‘#id’).text("Changes h1 text to this”); // change html text
• $(‘#id’).css("background-color": "yellow"); // change CSS attribute
• $(‘#id’).attr(‘class’,’important’); // add ‘important’ class to id
• $(‘#id’).append(“<option> choice 4 </option>”); // adds option html code to id
• $(‘#id’).remove(); // deletes html code to id
• $('#id').on('click', '.btn-delete', delete_program); // similar to .click() method but used after you use .append() to add html

Additional methods

• $(‘#id’).css({"background-color": "yellow", "font-size": "200%"}); // change multiple CSS attributes in one line of code
• $(‘#id’).hide(); // hides element
• $(‘#id’).show(); // shows element
• $(‘#id’).slideUp(); // hides element by sliding it up
• $(‘#id’).slideDown(); // shows element by sliding it down
• $(‘#id’).slideToggle(); // toggles between .slideUp() and .slideDown() methods
• $(‘#id’).toggleClass(); // toggles between adding/removing one or more class names
• $(‘#id’).attr(“src”, “http://lorempixel.com/g/500/400/food”); // changes the source attribute picture to a different picture
• $(‘#id’).children(); // returns all direct children of the selected element
• $(‘#id’).parent(); // returns the direct parent of the selected element
• $(‘S#id’).html(“<span> new text </span>”); // changes actual HTML vs. just text of element