diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..fd5106f --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_STORE diff --git a/README.md b/README.md new file mode 100644 index 0000000..c94418a --- /dev/null +++ b/README.md @@ -0,0 +1,4 @@ +LLC-Javascript-Edmonton +======================== + +Slides for my version of the LLC Introduction to Javascript Course - Aug. 17, 2013 \ No newline at end of file diff --git a/assets/AngryBirds.png b/assets/AngryBirds.png old mode 100644 new mode 100755 diff --git a/assets/BentoBox.png b/assets/BentoBox.png old mode 100644 new mode 100755 diff --git a/assets/BentoBox2.png b/assets/BentoBox2.png old mode 100644 new mode 100755 diff --git a/assets/CirqueDuSoleil.png b/assets/CirqueDuSoleil.png deleted file mode 100644 index d27226a..0000000 Binary files a/assets/CirqueDuSoleil.png and /dev/null differ diff --git a/assets/LLC_sketch.gif b/assets/LLC_sketch.gif old mode 100644 new mode 100755 diff --git a/assets/Map.png b/assets/Map.png old mode 100644 new mode 100755 diff --git a/assets/Notepad.png b/assets/Notepad.png new file mode 100755 index 0000000..3e41ce3 Binary files /dev/null and b/assets/Notepad.png differ diff --git a/assets/OneMillionTowers.jpg b/assets/OneMillionTowers.jpg deleted file mode 100644 index d3d1b6a..0000000 Binary files a/assets/OneMillionTowers.jpg and /dev/null differ diff --git a/assets/Rice.png b/assets/Rice.png old mode 100644 new mode 100755 diff --git a/assets/SublimeTextIcon.jpg b/assets/SublimeTextIcon.jpg deleted file mode 100755 index 15c20c1..0000000 Binary files a/assets/SublimeTextIcon.jpg and /dev/null differ diff --git a/assets/Sublime_Text_Logo.png b/assets/Sublime_Text_Logo.png new file mode 100644 index 0000000..b62b8c1 Binary files /dev/null and b/assets/Sublime_Text_Logo.png differ diff --git a/assets/TRIAD-css.gif b/assets/TRIAD-css.gif old mode 100644 new mode 100755 diff --git a/assets/TRIAD-html.gif b/assets/TRIAD-html.gif old mode 100644 new mode 100755 diff --git a/assets/TRIAD-js.gif b/assets/TRIAD-js.gif old mode 100644 new mode 100755 diff --git a/assets/angelina-tiny.jpg b/assets/angelina-tiny.jpg new file mode 100644 index 0000000..a075a68 Binary files /dev/null and b/assets/angelina-tiny.jpg differ diff --git a/assets/beepbeep.jpg b/assets/beepbeep.jpg old mode 100644 new mode 100755 diff --git a/assets/bento_box_real.jpg b/assets/bento_box_real.jpg old mode 100644 new mode 100755 diff --git a/assets/blindfold.gif b/assets/blindfold.gif old mode 100644 new mode 100755 diff --git a/assets/browser-blocks.jpg b/assets/browser-blocks.jpg old mode 100644 new mode 100755 diff --git a/assets/browser-fieldset-div.jpg b/assets/browser-fieldset-div.jpg old mode 100644 new mode 100755 diff --git a/assets/browser-img.jpg b/assets/browser-img.jpg old mode 100644 new mode 100755 diff --git a/assets/browser-shoe-group.jpg b/assets/browser-shoe-group.jpg old mode 100644 new mode 100755 diff --git a/assets/browser-shoes.jpg b/assets/browser-shoes.jpg old mode 100644 new mode 100755 diff --git a/assets/browser-war-illustration.jpg b/assets/browser-war-illustration.jpg new file mode 100644 index 0000000..6a999ae Binary files /dev/null and b/assets/browser-war-illustration.jpg differ diff --git a/assets/browser-window.jpg b/assets/browser-window.jpg old mode 100644 new mode 100755 diff --git a/assets/browser.jpg b/assets/browser.jpg old mode 100644 new mode 100755 diff --git a/assets/christina_avatar.jpg b/assets/christina_avatar.jpg old mode 100644 new mode 100755 diff --git a/assets/clientversusserver.gif b/assets/clientversusserver.gif old mode 100644 new mode 100755 diff --git a/assets/computer-memory.jpg b/assets/computer-memory.jpg old mode 100644 new mode 100755 diff --git a/assets/dropbox_public.png b/assets/dropbox_public.png new file mode 100644 index 0000000..9050aa2 Binary files /dev/null and b/assets/dropbox_public.png differ diff --git a/assets/egg-carton.jpeg b/assets/egg-carton.jpeg old mode 100644 new mode 100755 diff --git a/assets/ejs_avatar.png b/assets/ejs_avatar.png new file mode 100644 index 0000000..5679bc6 Binary files /dev/null and b/assets/ejs_avatar.png differ diff --git a/assets/function-parameters.jpg b/assets/function-parameters.jpg old mode 100644 new mode 100755 diff --git a/assets/gift-boxes.jpg b/assets/gift-boxes.jpg old mode 100644 new mode 100755 diff --git a/assets/git-download-zip.gif b/assets/git-download-zip.gif old mode 100644 new mode 100755 diff --git a/assets/git-download-zip.jpg b/assets/git-download-zip.jpg new file mode 100644 index 0000000..c250051 Binary files /dev/null and b/assets/git-download-zip.jpg differ diff --git a/assets/globe-mail.jpg b/assets/globe-mail.jpg old mode 100644 new mode 100755 diff --git a/assets/icon-hint.jpg b/assets/icon-hint.jpg old mode 100644 new mode 100755 diff --git a/assets/icon-reminder.jpg b/assets/icon-reminder.jpg old mode 100644 new mode 100755 diff --git a/assets/javascript-the-good-parts-the-definitive-guide.jpg b/assets/javascript-the-good-parts-the-definitive-guide.jpg deleted file mode 100644 index 3c1a1c5..0000000 Binary files a/assets/javascript-the-good-parts-the-definitive-guide.jpg and /dev/null differ diff --git a/assets/jquery-novice-to-ninja-cover.png b/assets/jquery-novice-to-ninja-cover.png deleted file mode 100644 index 0251986..0000000 Binary files a/assets/jquery-novice-to-ninja-cover.png and /dev/null differ diff --git a/assets/jsbin.png b/assets/jsbin.png new file mode 100644 index 0000000..d8b54c9 Binary files /dev/null and b/assets/jsbin.png differ diff --git a/assets/llcodedotcom_hamster.gif b/assets/llcodedotcom_hamster.gif old mode 100644 new mode 100755 diff --git a/assets/llcodedotcom_viewsource.gif b/assets/llcodedotcom_viewsource.gif old mode 100644 new mode 100755 diff --git a/assets/loading.gif b/assets/loading.gif deleted file mode 100644 index 63e9092..0000000 Binary files a/assets/loading.gif and /dev/null differ diff --git a/assets/logo_jquery.gif b/assets/logo_jquery.gif deleted file mode 100644 index 4ccb1cf..0000000 Binary files a/assets/logo_jquery.gif and /dev/null differ diff --git a/assets/next_section_icon.gif b/assets/next_section_icon.gif deleted file mode 100644 index 39fb676..0000000 Binary files a/assets/next_section_icon.gif and /dev/null differ diff --git a/assets/no-while-loop.jpg b/assets/no-while-loop.jpg old mode 100644 new mode 100755 diff --git a/assets/node.png b/assets/node.png new file mode 100644 index 0000000..b206e75 Binary files /dev/null and b/assets/node.png differ diff --git a/assets/pearl_avatar.png b/assets/pearl_avatar.png old mode 100644 new mode 100755 diff --git a/assets/planet-robots.jpg b/assets/planet-robots.jpg old mode 100644 new mode 100755 diff --git a/assets/skepticsean.jpg b/assets/skepticsean.jpg new file mode 100644 index 0000000..d1ad703 Binary files /dev/null and b/assets/skepticsean.jpg differ diff --git a/assets/storage_boxes.png b/assets/storage_boxes.png deleted file mode 100644 index 925552e..0000000 Binary files a/assets/storage_boxes.png and /dev/null differ diff --git a/assets/textWranglerIcon.png b/assets/textWranglerIcon.png new file mode 100755 index 0000000..d07500d Binary files /dev/null and b/assets/textWranglerIcon.png differ diff --git a/assets/thenewdesignguidelines-pull.gif b/assets/thenewdesignguidelines-pull.gif old mode 100644 new mode 100755 diff --git a/assets/thenewdesignguidelines.gif b/assets/thenewdesignguidelines.gif old mode 100644 new mode 100755 diff --git a/assets/thumb-down.png b/assets/thumb-down.png old mode 100644 new mode 100755 diff --git a/assets/thumb-up.png b/assets/thumb-up.png old mode 100644 new mode 100755 diff --git a/assets/var-shipping-example.jpg b/assets/var-shipping-example.jpg old mode 100644 new mode 100755 diff --git a/assets/while-loop.jpg b/assets/while-loop.jpg old mode 100644 new mode 100755 diff --git a/exercises/assets/android-quantity.png b/exercises/assets/android-quantity.png old mode 100644 new mode 100755 diff --git a/exercises/assets/earbuds.jpg b/exercises/assets/earbuds.jpg old mode 100644 new mode 100755 diff --git a/exercises/assets/gold-usb.jpg b/exercises/assets/gold-usb.jpg old mode 100644 new mode 100755 diff --git a/exercises/assets/images.psd b/exercises/assets/images.psd old mode 100644 new mode 100755 diff --git a/exercises/assets/llc-logo.png b/exercises/assets/llc-logo.png old mode 100644 new mode 100755 diff --git a/exercises/assets/nesting-dolls.jpg b/exercises/assets/nesting-dolls.jpg old mode 100644 new mode 100755 diff --git a/exercises/assets/plush-android.jpg b/exercises/assets/plush-android.jpg old mode 100644 new mode 100755 diff --git a/exercises/assets/salt-pepper-shakers.jpg b/exercises/assets/salt-pepper-shakers.jpg old mode 100644 new mode 100755 diff --git a/exercises/assets/stencil-kit.jpg b/exercises/assets/stencil-kit.jpg old mode 100644 new mode 100755 diff --git a/exercises/assets/t-shirt.jpg b/exercises/assets/t-shirt.jpg old mode 100644 new mode 100755 diff --git a/exercises/assets/tea-infuser.jpg b/exercises/assets/tea-infuser.jpg old mode 100644 new mode 100755 diff --git a/exercises/assets/wrapping-paper.jpg b/exercises/assets/wrapping-paper.jpg old mode 100644 new mode 100755 diff --git a/exercises/chicken-wings.jpg b/exercises/chicken-wings.jpg deleted file mode 100644 index c476df4..0000000 Binary files a/exercises/chicken-wings.jpg and /dev/null differ diff --git a/exercises/hello-javascript.html b/exercises/hello-javascript.html old mode 100644 new mode 100755 diff --git a/exercises/jquery-effects.html b/exercises/jquery-effects.html deleted file mode 100644 index e2a4566..0000000 --- a/exercises/jquery-effects.html +++ /dev/null @@ -1,55 +0,0 @@ - - - jQuery Effects - - - - -
-

jQuery effects

-

http://api.jquery.com/category/effects/

- - - -
-
- - \ No newline at end of file diff --git a/exercises/jquery-examples.html b/exercises/jquery-examples.html new file mode 100755 index 0000000..4a0cb5e --- /dev/null +++ b/exercises/jquery-examples.html @@ -0,0 +1,70 @@ + + + jQuery + + + + + +
+

jQuery effects

+ Hide | + Show | + Fade | + Toggle | + Slide Up | + Slide Toggle + +
+ +

See full API: http://api.jquery.com

+
+ + \ No newline at end of file diff --git a/exercises/jquery-javascript.html b/exercises/jquery-javascript.html deleted file mode 100644 index 617bd32..0000000 --- a/exercises/jquery-javascript.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - jQuery and JavaScript - - - - - -
- -
- - - - - -
- Quantity - -
-
- Total Cost: - -
-
- - - -
- - - - - - diff --git a/exercises/jquery-javascript.js b/exercises/jquery-javascript.js deleted file mode 100644 index c43065a..0000000 --- a/exercises/jquery-javascript.js +++ /dev/null @@ -1,47 +0,0 @@ -// 1. Add jQuery's document.ready function - - - /* 2. Use jQuery to reference the elements by class, - add a click event and passing the corresponding function on the click */ - - - - - // Start quantity at 0 - var quantity = 0; - - // JavaScript functions, no need to changes these - function addItem(){ - quantity = quantity + 1; - refreshTotal(); - } - - function removeItem(){ - if ( quantity > 0 ) { - quantity = quantity - 1; - } else { - // do nothing - } - refreshTotal(); - } - - function checkout() { - if ( quantity <= 0 ) { - alert( "Sorry, you don't have anything in your cart!" ); - } else { - alert( "Thank you for your order!" ); - } - } - - function refreshTotal() { - // calculate the totalCost with a fixed price of $20. - var totalCost = quantity * 20; - // then update the quantity text field - document.getElementById('updateQuantity').value = quantity; - // update the total cost text field - document.getElementById('updateTotal').value = "$" + totalCost; - } - - - - diff --git a/exercises/mini-exercise-2.html b/exercises/mini-exercise-2.html old mode 100644 new mode 100755 diff --git a/exercises/pizza-factory.jpg b/exercises/pizza-factory.jpg deleted file mode 100644 index 510a750..0000000 Binary files a/exercises/pizza-factory.jpg and /dev/null differ diff --git a/exercises/pizzaMaking.html b/exercises/pizzaMaking.html old mode 100644 new mode 100755 index 3e9819b..67ffcae --- a/exercises/pizzaMaking.html +++ b/exercises/pizzaMaking.html @@ -3,23 +3,32 @@ Ladies Making Pizza By Code -

Hello, may I have your order?

+

Hello, may I have your order?

+ + - -

\ No newline at end of file diff --git a/exercises/shopping-cart.css b/exercises/shopping-cart.css old mode 100644 new mode 100755 diff --git a/exercises/shopping_cart.html b/exercises/shopping_cart.html old mode 100644 new mode 100755 diff --git a/exercises/shopping_cart_exercise.html b/exercises/shopping_cart_exercise.html old mode 100644 new mode 100755 diff --git a/exercises/shopping_cart_final.html b/exercises/shopping_cart_final.html old mode 100644 new mode 100755 diff --git a/exercises/shopping_cart_products_final.html b/exercises/shopping_cart_products_final.html old mode 100644 new mode 100755 diff --git a/exercises/shopping_cart_products_start.html b/exercises/shopping_cart_products_start.html old mode 100644 new mode 100755 diff --git a/exercises/shopping_cart_shipping_final.html b/exercises/shopping_cart_shipping_final.html old mode 100644 new mode 100755 diff --git a/exercises/shopping_cart_shipping_start.html b/exercises/shopping_cart_shipping_start.html old mode 100644 new mode 100755 diff --git a/exercises/slides.css b/exercises/slides.css old mode 100644 new mode 100755 diff --git a/exercises/solutions/chicken-wings.jpg b/exercises/solutions/chicken-wings.jpg deleted file mode 100644 index c476df4..0000000 Binary files a/exercises/solutions/chicken-wings.jpg and /dev/null differ diff --git a/exercises/solutions/complex-form-validation-org.txt b/exercises/solutions/complex-form-validation-org.txt deleted file mode 100644 index 2607174..0000000 --- a/exercises/solutions/complex-form-validation-org.txt +++ /dev/null @@ -1,48 +0,0 @@ - - -Name: - -
-Address: - -
-City: - -
-Postal Code: - -
-
- \ No newline at end of file diff --git a/exercises/solutions/complex-form-validation.txt b/exercises/solutions/complex-form-validation.txt deleted file mode 100644 index 7a5cf5c..0000000 --- a/exercises/solutions/complex-form-validation.txt +++ /dev/null @@ -1,76 +0,0 @@ - - -Name: - -
-Address: - -
-City: - -
-Postal Code: - -
-
- \ No newline at end of file diff --git a/exercises/solutions/form-validation-org.txt b/exercises/solutions/form-validation-org.txt deleted file mode 100644 index 45a260b..0000000 --- a/exercises/solutions/form-validation-org.txt +++ /dev/null @@ -1,24 +0,0 @@ - - -Address: - -
-
- \ No newline at end of file diff --git a/exercises/solutions/form-validation.txt b/exercises/solutions/form-validation.txt deleted file mode 100644 index e9d9054..0000000 --- a/exercises/solutions/form-validation.txt +++ /dev/null @@ -1,27 +0,0 @@ - - -Address: - -
-
- \ No newline at end of file diff --git a/exercises/solutions/jquery-effects.html b/exercises/solutions/jquery-effects.html deleted file mode 100644 index b1a0265..0000000 --- a/exercises/solutions/jquery-effects.html +++ /dev/null @@ -1,56 +0,0 @@ - - - jQuery Effects - - - - - -
-

jQuery effects

-

http://api.jquery.com/category/effects/

- - - -
-
- - \ No newline at end of file diff --git a/exercises/solutions/jquery-effects.js b/exercises/solutions/jquery-effects.js deleted file mode 100644 index 5afdb02..0000000 --- a/exercises/solutions/jquery-effects.js +++ /dev/null @@ -1,27 +0,0 @@ -$(document).ready(function(){ - - $('.hide').click(function(){ - $('#box').hide(); - }); - - $('.show').click(function(){ - $('#box').show(); - }); - - $('.fade').click(function(){ - $('#box').fadeOut(); - }); - - $('.toggle').click(function(){ - $('#box').toggle(); - }); - - $('.slide-up').click(function(){ - $('#box').slideUp(); - }); - - $('.slide-toggle').click(function(){ - $('#box').slideToggle(); - }); - -}); \ No newline at end of file diff --git a/exercises/solutions/jquery-javascript.html b/exercises/solutions/jquery-javascript.html deleted file mode 100644 index 811fa0b..0000000 --- a/exercises/solutions/jquery-javascript.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - jQuery and JavaScript - - - - - -
- -
- - - - - -
- Quantity - -
-
- Total Cost: - -
-
- - - -
- - - - - - diff --git a/exercises/solutions/jquery-javascript.js b/exercises/solutions/jquery-javascript.js deleted file mode 100644 index 42cdeab..0000000 --- a/exercises/solutions/jquery-javascript.js +++ /dev/null @@ -1,60 +0,0 @@ -$(document).ready(function(){ - - /* Using jQuery to reference the elements by class, - adding a click event and passing the function on click */ - - // Referencing the button with the 'add' class - $(".add").click(function(){ - //call the appropriate function - addItem(); - }); - - $(".removeItem").click(function(){ - removeItem(); - }); - - $(".checkout").click(function(){ - checkout(); - }); - - - // Start quantity at 0 - var quantity = 0; - - // JavaScript functions - function addItem(){ - quantity = quantity + 1; - refreshTotal(); - } - - function removeItem(){ - if ( quantity > 0 ) { - quantity = quantity - 1; - } else { - // do nothing - } - refreshTotal(); - } - - function checkout() { - if ( quantity <= 0 ) { - alert( "Sorry, you don't have anything in your cart!" ); - } else { - alert( "Thank you for your order!" ); - } - } - - function refreshTotal() { - // calculate the totalCost with a fixed price of $20. - var totalCost = quantity * 20; - // then update the quantity text field - document.getElementById('updateQuantity').value = quantity; - // update the total cost text field - document.getElementById('updateTotal').value = "$" + totalCost; - } - -});//closes the document.ready - - - - diff --git a/exercises/solutions/quantities-org.txt b/exercises/solutions/quantities-org.txt deleted file mode 100644 index 2ac1d79..0000000 --- a/exercises/solutions/quantities-org.txt +++ /dev/null @@ -1,46 +0,0 @@ - - - -
- -
- - -
- Quantity - -
-
\ No newline at end of file diff --git a/exercises/solutions/quantities.txt b/exercises/solutions/quantities.txt deleted file mode 100644 index 9e78aca..0000000 --- a/exercises/solutions/quantities.txt +++ /dev/null @@ -1,46 +0,0 @@ - - - -
- -
- - -
- Quantity - -
-
\ No newline at end of file diff --git a/exercises/solutions/quantity-check-org.txt b/exercises/solutions/quantity-check-org.txt deleted file mode 100644 index 03eae3d..0000000 --- a/exercises/solutions/quantity-check-org.txt +++ /dev/null @@ -1,66 +0,0 @@ - - -
- -
- - -
- Quantity - -
-
- Total Cost: - -
-
- -
\ No newline at end of file diff --git a/exercises/solutions/quantity-check.txt b/exercises/solutions/quantity-check.txt deleted file mode 100644 index 7798710..0000000 --- a/exercises/solutions/quantity-check.txt +++ /dev/null @@ -1,73 +0,0 @@ - - -
- -
- - -
- Quantity - -
-
- Total Cost: - -
-
- -
\ No newline at end of file diff --git a/exercises/solutions/simple-shipping-label-org.txt b/exercises/solutions/simple-shipping-label-org.txt deleted file mode 100644 index b586b3c..0000000 --- a/exercises/solutions/simple-shipping-label-org.txt +++ /dev/null @@ -1,18 +0,0 @@ - \ No newline at end of file diff --git a/exercises/solutions/simple-shipping-label.txt b/exercises/solutions/simple-shipping-label.txt deleted file mode 100644 index a0aa8bb..0000000 --- a/exercises/solutions/simple-shipping-label.txt +++ /dev/null @@ -1,18 +0,0 @@ - \ No newline at end of file diff --git a/exercises/solutions/totals-and-discounts-org.txt b/exercises/solutions/totals-and-discounts-org.txt deleted file mode 100644 index a7ba08c..0000000 --- a/exercises/solutions/totals-and-discounts-org.txt +++ /dev/null @@ -1,25 +0,0 @@ - \ No newline at end of file diff --git a/exercises/solutions/totals-and-discounts.txt b/exercises/solutions/totals-and-discounts.txt deleted file mode 100644 index 17c54e8..0000000 --- a/exercises/solutions/totals-and-discounts.txt +++ /dev/null @@ -1,25 +0,0 @@ - \ No newline at end of file diff --git a/exercises/solutions/wingMaking.html b/exercises/solutions/wingMaking.html deleted file mode 100644 index 9136d2c..0000000 --- a/exercises/solutions/wingMaking.html +++ /dev/null @@ -1,26 +0,0 @@ - - - Ladies Making Wings By Code - - - -

Hello, may I have your order?

- - - -

chicken wings

- - - \ No newline at end of file diff --git a/exercises/temperature-nojs.html b/exercises/temperature-nojs.html new file mode 100755 index 0000000..d5ad1c6 --- /dev/null +++ b/exercises/temperature-nojs.html @@ -0,0 +1,149 @@ + + + While Loop in Action + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CelsiusFahrenheit
032
133.8
235.6
337.4
439.2
541
642.8
744.6
846.4
948.2
1050
1151.8
1253.6
1355.4
1457.2
1559
1660.8
1762.6
1864.4
1966.2
2068
2169.8
2271.6
2373.4
2475.2
2577
2678.8
2780.6
2882.4
2984.2
3086
+ + \ No newline at end of file diff --git a/exercises/temperature.html b/exercises/temperature.html new file mode 100755 index 0000000..d7c4320 --- /dev/null +++ b/exercises/temperature.html @@ -0,0 +1,36 @@ + + + While Loop in Action + + + + + + + + + + + +
CelsiusFahrenheit
+ + \ No newline at end of file diff --git a/exercises/wingMaking.html b/exercises/wingMaking.html deleted file mode 100644 index 24c3add..0000000 --- a/exercises/wingMaking.html +++ /dev/null @@ -1,17 +0,0 @@ - - - Ladies Making Wings By Code - - -

Hello, may I have your order?

- - - -

- - - \ No newline at end of file diff --git a/index.html b/index.html old mode 100644 new mode 100755 index 976b9eb..f972feb --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - Ladies Learning Code - JavaScript Oct 13, 2012 + Ladies Learning Code - JavaScript Aug. 17, 2013 @@ -47,27 +47,1769 @@

I'm a H2 heading

- + +
+
+

Introduction to JavaScript

+
+

+ https://github.com/snostorm/LLC-JavaScript +

+

+ Github screenshot of ZIP button +

+

+ ( Interactive code slides thanks to + CoderDeck + ! ) +

+
+ + +
+
+

Introduction to JavaScript

+

Aug. 17, 2013

+
+

Your instructor today

+
+ SkepticSean +

Sean Ouimet

+ sean [at] seanouimet.com +
+ @skepticsean +
+
+ + +
+

Course Outline

+

The morning (lunch @ ~12:00pm)

+ +

After lunch (small break @ ~3:30pm)

+ +

Homestretch

+ +
+ + +
+

Development Environment

+

3 tools you need to get started

+
+ + +
+

1. Web Browser

+

+ Choose a modern web browser that has good, built-in development tools to help make building web pages easier. +

+
+ Chrome +
+ Google Chrome +
+
+
+
+
+

+ (If you are unable to install Chrome: +
+ install + Firefox + .) +

+
+ + +
+

A Website that lets you write code

+ +

+ JSBin lets you write HTML, CSS and JavaScript + directly in your browser. +

+ +
+ JSBin +
+ JSBin.com +
+
+
+ +
+ + +
+

Code Editor

+ +

+ JSBin (and other similar tools) are a great way to quickly try out and share your HTML, CSS and JavaScript + but in reality we want people to visit our actual web pages. +

+ +

+ There are many, many free and paid options but let's keep it simple for our mentors today and use the same + editor to edit our code. Other options like TextWrangler, Notepad++ and Text Edit are available, too. +

+ +
+
+ Sublime Text +
+ +
+
+
+
+ +
+ + +
+

How do I get it online?

+ +

+ Are you using Dropbox? Sharing your public files is easy: +

+ +

+ Dropbox public sharing +

+ +

+ There are many services now that turn your public Dropbox into a full website
+ instead of having to share the ugly public link), read more here. +

+
+ + +
+

Webhosting

+ +

+ Do you already have your own hosted website? FTP software will let you copy the files you work on today to + somewhere where the rest of the world can see them! +

+ +
+ CyberDuck +
+ CyberDuck +
+
+
+
+
+ +

+ Again, there are many, many free and paid options. +
+ FileZilla + is good when you're more advanced. +

+
+ +
+

Technology Overview

+

Programming and JavaScript

+
+ + +
+

What is JavaScript?

+

+ It's a + programming language +

+ that was designed to run in your web browser to +

+ manipulate content on web pages. +

+
+ + +
+

What is JavaScript?

+

+ It's a + programming language +

+ that was designed to run in your web browser to +

+ manipulate content on web pages. +

+
+ + +
+

What is Programming?

+

+ A + program + is a set of instructions + meant for a computer to execute. +

+

Computers are fast but blind.

+

As the first step to our new system integration, please take a blind fold.

+
+ + +
+

Programming is giving instructions to your computer

+

+ Think about a tourist that stops you to ask for directions:

+

+ The clearer the instructions, the more likely they will get to their destination.

+

Give clear directions

+
+ + + +
+

Break your goal down into steps

+

Suppose I want a computer to say hello using my name.

+

Break down the steps as much as possible:

+
    +
  1. Allow me to type in my name.
    2. +
  2. Remember my name.
    3. +
  3. Say "Hello" and repeat back my name.
    4. +
+

+ +
+ + + +
+

Speak the computer's language

+

Programming is like having a conversation with your computer. You write to it using a programming language and give it instructions this way.

+

+ Computers only understand instructions when you speak to them in a language they can understand. Much like Japanese, English or any other natural language, programming is about sticking to grammar rules called syntax. +

+

Beep beep Computers have come a long way since their binary days (0 1 0 0 1 0 0 0 0 1 0 0 0 1 0 1 0 1 0 0 1 1 0 0 0 1 0 0 1 1 0 0 0 1 0 0 1 1 1 1) so meet them half-way.

+
+
+ + +
+

Example Programming Syntaxes

+

Different programming languages have different syntax.

+

Here are two ways a computer could say hi to me:

+

+ Java

+ 
Scanner userInput = new Scanner(System.in);
+String name;
+System.out.print("What's your name? ");
+name = userInput.next();
+System.out.println("Hello, " + name);
+ +

+ JavaScript ( Try it out now! + )

+ + 
var name;
+name = window.prompt("What's your name?",'');
+document.write("Hello, " + name);
+ +
+ + +
+

JavaScript versus Java

+

+ They might vaguely look the same (as a lot of programming languages do) but they are not related at all.

+

+ Java is to JavaScript as ham is to hamster. +

+

(Java was really popular at the time so Netscape just hijacked the name.)

+
+ + + +
+

What is JavaScript?

+

+ It's a + programming language +

+ that was designed to run in your web browser to +

+ manipulate content on web pages. +

+
+ + +
+

JavaScript in the Browser

+ +

+ C++, Java, and .NET are also programming languages but they can be run directly by the operating + system + (e.g. Windows, Mac, Linux). +

+ +

+ JavaScript is typically meant to be run in a + web browser + (e.g. Safari, Firefox, Chrome, Internet Explorer). +

+ +

+ Different programmig languages and the environments they run in +

+
+ + +
+

Web Programming Languages: Server-side vs Client-side

+

+

+ Java, .NET, PHP or Ruby can be considered server-side or "back-end" web technology because the code is typically compiled and executed by the operating system of a computer serving up web pages.

+

+ JavaScript is often referred to as a client-side or "front-end" web technology because it is interpreted by the web browser. It can be used for server-side programs too, but today we'll be focusing on the browser.

+ +
- +
-



+

Simple Client-Side Code Check

+


+ Right-click to View Source +

+

+
+At any time, someone can right-click and "view source" on a web page to see all the JavaScript that went into it.

+

(I suggest that you do this yourself every time you see something you like!)

+

+
+

+ Whereas for server-side code, it's sometimes a mystery what technology is running on a server. +

+
+ + + +
+

What is JavaScript?

+

+ It's a + programming language +

+ that was designed to run in your web browser to +

+ manipulate content on web pages. +

+
+ + +
+

The Web Triad

+

+ JavaScript was meant to manipulate webpages written in HTML and works in tandem with CSS. +

+ + + + + + + + + + + + + + + + +
HTML (Hypertext Markup Language)
+ is the markup language.		CSS (Cascading Style Sheets)
+ is the style sheet language.		JavaScript
+ is the programming language.
content layerPresentation LayerBehaviour Layer
It should define the content.It should define the presentationIt should define behaviour.
+
+ + +
+

JavaScript in Different Browsers

+

+ Usually JavaScript will run the same way in various browsers. +

+

+ But, browsers are software programs written by many different people/companies (people programming things just like you!), so sometimes they say "hi" with different accents.

+

Imagine a British accent versus a Texas accent.

+

This is especially noticeable with newer "HTML5" features.

+

+ +
+ + +
+

A JavaScript Experiment

+

+ JavaScript is essential for "AJAX", "Web 2.0", and "HTML5" websites. All these terms refer to various methods of making interactive web pages using Javascript. +

+

+ Try this experiment: Turn off JavaScript in your web browser. Go to the JavaScript settings for Chrome ( + chrome://settings/content + ) and select "Do not allow any site to run JavaScript" +

+

Then visit your daily sites.

+

+ e.g. + Google + , + Facebook + , + Twitter +

+

(Remember to turn JavaScript back on to see this presentation!) +

+
+ + +
+

A JavaScript Experiment: Results

+

Note the sometimes subtle and sometimes major differences:

+ +

+ The modern web just sort of gives up without JavaScript! +

+
+ + +
+

JavaScript helps us make nice websites

+

+ Especially "one-page apps" where the experience is very seamless. +

+

+ The new web design guidelines
+ + + Like + this one

+
+ + +
+

JavaScript Theory
Hands-on

+

Part 1

+
+ + +
+

As the owner of the thriving store, Planet Robots, you have to make sure you have a top notch website.

-

Download zip file of slides
- and hands-on exercise code from:
- github.com/pchen/LLC-JavaScript

-
-

Let's get started!

-

Click to go to next section

+ planet-robots +
+ +
+ + +
+

JavaScript Exercise Overview

+
+

You'll want to do things like offer online shopping, print shipping labels and tempt loyal customers with members only sales!

+

You'll also want to make sure that everything works properly as well.

+

That means customers shouldn't be able to submit empty forms and product totals must be calculated properly in their shopping carts.

+

In order to create a website that can handle these requirements, we will need to learn how to use variables, functions, objects, arrays and loops.

+
+ + +
+

Variables

+
+

Variables are used to store values.

+

Declaring a variable tells the computer that it exists and to
+ remember it.

+

Variables are like boxes; it can be used to store different things.

+ gift-boxes + +
+ + +
+

Variables (cont'd)

+
+

computer-memoryVariables are also like the computer's short-term memory. It doesn't remember anything unless you tell it to. + In this example, the computer can't remember anyone's name!

+

+ + * +
+ + +
+

Variables (cont'd)

+
+

+ In a web checkout form that asks for your name and address, variables can be used to store this information. + Then they can be used to create things like shipping labels.

+
+

+ +

+
+ + +
+

An Aside...

+
+

Before we continue, here's a few helpful JavaScript built-ins that will help with testing and writing code.

+ + * +
+ + +
+

Variables How-to

+

Declare variables with the keyword var.

+ 
var email;
+

Assign a value to the variable using the equals (=) sign. +
End the statement with a semicolon (;). +

+ 
var email = "hello@isanybodyoutthere.com";
+

Now the computer will remember my email address!

+
+
+

Statements are commands that tell the computer what to do. +
+ Ending the statement with a semicolon is like ending a sentence +
+ with a period. It tells the computer that the statement is done. +

+
+
+ + +
+

Assigning Variables

+
+

IMPORTANT!

+ +

Using the equals (=) symbol in Javascript is NOT the same as in math.

+ +

var total = 1 + 1 + is not the same as + 1 + 1 = 2 +

+

You will see later that we can change the value of a variable.

+

Variables are assigned a value with whatever you place to the right of '='.

+
+ + +
+

Various Variables

+

Variables can hold different kinds of values.

+

1. Numeric variable (integers & decimals)

+ 
+var someIntegerNumber = 10;
+var someDecimalNumber = 10.5;
+

2. String variable (letters, words & sentences)

+ 
+var singleWordString = "hello";
+var sentenceString = "Hello, good day to you!";
+var numberString = "10";
+
+
+

3. Boolean variable (true/false)

+ 
+var isSaturday = false;
+var isSunday = true;
+
+
+

String values are always written inside single or double quotes ('string' or "string").

+
+
+
+ + +
+

Variables: Tips & Best Practices

+

+ Variables cannot start with a number or any special characters except for underscores (_) and dollar signs ($). +

+
+

Although it's valid to use underscore or a dollar sign, it is not used often +
and usually only in special circumstances. +

+
+
+ + * +
+ + +
+

Variables: Tips & Best Practices

+

Variables can't contain spaces. Use a convention called camel case. +
Every new word is capitalized and the result looks likeCamelHumps. +

+

JavaScript is case sensitive so variable names are also case sensitive.

+

Another convention is to use underscores to_separate_words. This is common in other programming languages (like PHP).

+ + * +
+ + +
+
+

Variables: Tips & Best Practices

+

+ When naming a variable, it's best to give it a descriptive name. +

+

+ It makes it easier to see at a glance, what kind of value that variable is going to hold. +

+

+ This is especially useful when sharing code with others who may not use the same kinds of abbreviations. +

+

+ var firstName; ← Clear that first name will go here. +
+ var fn; ← Not as obvious as firstName. +
+ var x; ← Not clear at all. +

+
+ + +
+

Whitespace in JavaScript

+

+ Whitespace refers to blank characters and includes space characters, tabs and line breaks. +

+

JavaScript ignores whitespace except when used in a string.

+
+var name="Sean";
+//same as 
+var name = "Sean";
+
+ + * +
+ + +
+

Comments

+

+ Sometimes you want to write notes to yourself (and others!) to organize blocks of code or leave explanations, but you want the browser to ignore it. Use comments! +

+
+// This is how you leave a single line comment.
+
+// You can write many single line comments.
+// Just make sure to add the double backslash
+// for every new line.
+
+

Here's another way to comment larger blocks of text.

+
+/* This is how you leave
+multi-line comments for when you
+want to write a longer message */
+
+

Multi-line comments are great for "hiding" large blocks of code so you can try something new without erasing your old code. Don't forget to remove the old code later if you decide that you don't need it though!

+
+ + +
+

Mini-exercise #1 (5-10 minutes)

+

+ Here's a test shipping form. Right now, after you press Run, the shipping label is blank. How do we fix this? +

+
+

(1) Use variables to store your name and address!
+ (2) To verify that your variables are working, uncomment out the document.write() lines and replace ********** with the actual name of your variables. +

+ + + * +
+ + + +
+

JavaScript Arithmetic Operators

+

We can use JavaScript to do math using arithmetic operators.

+

The arithmetic operators in JavaScript are (+) for addition, (-) for subtraction, (*) for multiplication and (/) for division.

+ + * +
+ + +
+

Arithmetic Operators and Variables

+

Getting JavaScript to do math can be very useful.
+ For example, we can use it to calculate totals in a shopping cart form.

+

Instead of using just numbers, JavaScript can do math using variables with numerical values.

+ + * +
+ + +
+

Arithmetic Operators,
+ Numbers & Strings

+
+

Remember there were different variable types? Arithmetic operators can only be performed on numerical values.

+

But numbers can be declared as strings too, so be careful!

+

If you put double quotes (" ") or single quotes (' ') around the value, the computer will thinks it's a string.

+ + * +
+ + +
+

Shopping Cart: Totals and Discounts

+

Let's try applying some arithmetic operations to our shopping cart.

+
+

addition (+), subtraction (-), multiplication (*), division (/)

+
+
+ + * +
+ + +
+

Re-assigning Variables

+

Even after a variable has been declared with a value, we can still
+ re-assign the value. For example, we may want to increase or decrease values by 1. This will come in handy when we discuss Loops later on. +

+ +
+ + +
+

Who loves LadiesLearningCode?

+

Don't worry about the function or unfamiliar parts right now. You will be familiar with them soon enough.

+

Run it and see what happens!

+ +
+ + +
+

Mini-exercise #2

+
+

Here's a one-product shopping page where you can update the
+ quantity by adding or removing it from the shopping cart.

+

Here's what it will look like.

+ android-quantity +

Go to the next slide to get the exercise code.

+
+ + +
+

Mini-exercise #2: Go! (5-10 minutes)

+
+

How do we increase or decrease the value of the variable?

+
+ + + +
+ + + +
+

Concatenation

+

Now that we've calculated some numerical totals, how do we format the output to add a non-numerical value like a dollar sign? + We use concatenation.

+

Concatenation is the joining of strings, using the (+) symbol. Remember this example?

+ + * +
+ + + +
+

Concatenation and Strings

+

If you use the (+) operator with numerical values, it will add the values. Otherwise, it will combine the outputs as a string.

+

Only the addition (+) operator can be used to combine strings. +

+ +
+ + +
+

Concatenation in action (results)

+

Let's re-visit mini-exercise #2 and add a total cost field.

+ + +
+ + + + + + +
+

Conditional Statements

+

Let's pretend to be your wise but nagging grandmother right now:

+ +

All these things make logical sense to us as grown up humans but computers are a blank slate. The last one is a little closer to the simple instructions that a computer needs.

+

As a programmer, you tell the computer how to behave across certain states or events by using CONDITIONALS.

+ + + +
+

If Conditionals

+

...

+ + + + + + +
+

A basic conditional test looks like this:

+

IF the weather is raining
+      + THEN bring an umbrella

+ 		+

In JavaScript,
+ it might look like this:

+ 
+if ( weather == rain ) {
+    bringUmbrella();
+}
+
+ + +
+
+

The round brackets () + group together a condition to test.

+

The curly braces {} + group together a set of statements to execute.

+

+
+ + +
+

Important!
+Assignment is not the same as equality

+
+

Drill this into your head. Tattoo it to your arm! So many errors happen because of this key difference:


+ + + + + +
+ =
+ assignment
+

+ Store a value to a variable: +

+ var kitten = "Fluffy"; + 		+ ==
+ equality
+

+ Compare a value to another value: +

+ if ( kitten == cat ) +
+
+ + +
+

Using Several If Conditionals

+

Sometimes it can be rainy but warm, or rainy and cold. You react to each thing individually.

+

Use several if statements when you're testing mutually inclusive scenarios.

+ + + + + + +


+

IF the weather is raining
+    THEN bring an umbrella
+
+IF the temperature is below 10°C
+    THEN wear a sweater

+ 		+

In JavaScript...

+
+if ( weather == rain ) {
+    bringUmbrella();
+}
+
+if ( temperature < 10 ) {
+    wearSweater();
+}
+
+
+
+ + + +
+

if/else Conditionals

+

Sometimes there's a catch-all state that you want to happen if your previous tests don't happen.

+ + + + + + +


+

IF the weather is raining
+     THEN bring an umbrella

+ OTHERWISE
+     dress normally

+ 		+

In JavaScript...

+ 
+if ( weather == rain ) {
+    bringUmbrella();
+}else{
+    dressNormally();
+}
+
+
+
+ + +
+

if/else if/else Conditionals

+

It shouldn't snow and rain at the same time so sometimes these conditions are mutually exclusive.

+ + + + + + +


+

+ IF the weather is raining
+     THEN bring an umbrella

+ BUT IF the weather is snowing
+     THEN wear warm boots

+ OTHERWISE
+     dress normally

+ 		+

In JavaScript...

+ 
+if ( weather == rain ) {
+    bringUmbrella();
+}else if ( weather == snow ) {
+    wearWarmBoots();
+}else{
+    dressNormally();
+}
+
+
+
+ + + +
+

Conditionals used for UI elements

+

A basic conditional that your browser does internally is to react to mouse clicks on a HTML element. The browser does its own conditional check behind the scenes.

+

+ +


+<button onclick="animate()">Pull</button>

+

IF a user has clicked on a button
+     THEN call the animate() function.

+
+ + + + + +
+
+ + + +
+

...And Interactivity

+

Notice how the brush acts when you speed up / slow down, or get close to other lines. You can even change brushes.

+

Procedural Drawing by Mr. Doob

+

http://mrdoob.com/projects/harmony/

+
+ + + + +
+

...And Games!

+

(Notice how the birds fly differently based on how far you pull them back in the slingshot, and in what direction.)

+

Angry Birds

+

http://chrome.angrybirds.com/

+
+ + + +
+

Conditional Statements Summary

+


+ + + + + + + + + + + + + + +
If Statement If...else statement If...else if...else statement

+
+
+if (condition) {

+ // do something

+}
+
+ 		+
+if (condition) {

+  // do something

+} else {

+  // otherwise do this

+}
+
+ 		+
+if (condition) {

+  // do something

+} else if (condition2) {

+  // do something else

+} else {

+  // otherwise do this

+}
+
+
+
+
+

 

+
+ + +
+

Testing Conditions

+

What does a condition actually look like?

+

if ( condition ) { ... }

+ +
+ + +
+

+ Cheat Sheet: Comparison and Logical Operators +

+

+ Here's a cheat sheet of different operators that can be used in conditional statements.

+

Using these two variables, var two = 2 and var ten = 10 , the examples below show how the statements would return true using the various operators. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Comparison operators
==is equal toten == two * 5
=== + is exactly equal to +
+ (value and type) + 		+ ten === 10 +
+ ten === "10" (false) +
!=is not equal toten !== two
>greater thanten > two
<less than + two + < ten +
>=greater than or equal to + ten >= two * 5 +
+ ten >= two * 5 + 1 +
<=less than for equal to + two + <= ten +
+ two + <= 2 +
+ + + + + + + + + + + + + + + + + + + +
Logical operators
&&and + (ten + < 11 && ten > 9) +
||or(ten == 10 || two == 2)
!not!(ten == two)
+
+
+ + + +
+

More Conditional Examples

+

+ Let's look at some examples. What do you think the output will be? Uncomment the code to be executed for each condition to see if the result is what you expected. Try changing the variable values too! +

+ +
+ + +
+

Variables, Operators, Concatenation and Conditionals

+

+Now that we know what variables, operators and conditionals are, let's put them all into action using dynamic content.

+ +
+ + +
+

Mini-exercise #3 (10 minutes)

+

+ Uh-oh! Someone can attempt to put a negative number of products in their shopping cart! Complete task #1 in the next slide to fix this. For task #2, warn the user that they are attempting to check out with an empty basket. Make a more robust shopping cart so that your customer's order doesn't go sideways. +

+

+ This is based on Exercise #3 so it should look very familiar! +

+

+ (Hint: How do you test if a number is greater than, less then, or equal to another number?) +

+
+ + +
+

Mini-exercise #3 (10 minutes)

+

TODO: Check within the code for your THREE tasks.

+ +
+ + +
+

Mini-exercise #4 (5-10 minutes)

+

+ Let's revisit the shipping form again -- it's a very simple shipping form, but you don't want someone to be able to submit their order if they haven't filled out their address! +

+

+ You have been supplied with 1 variable ("address") which will automagically match what is typed into the form field (minus extra whitespace) after you press the "Check out now!" button. +

+

+ (Hint: If you don't type anything into the address field, you get an "empty string". How do you test for an empty string?) +

+ +
+
+

Mini-exercise #4 (5-10 minutes)

+

TODO: Check within the code for your ONE task.

+ +
+ + +
+

Mini-exercise #5 (15-20 minutes)

+

+ Now here's a more complex shopping form that you require all fields to be filled in. You have been supplied with 3 additional variables which will automagically update: "name", "city", and "postal". +

+ +

+ (Hint for task #3: How do you test for something AND somethingElse OR anotherThing at one time?) +

+

+ Bonus: There's always different ways to get to the same end goal. If you're finished early, try out different ways that you can reduce the number of variables and lines of code. +

+
+ + +
+

Mini-exercise #5 (15-20 minutes)

+

TODO: Check within the code for your FOUR tasks.

+ +
+ + +
+

Regroup Before Lunch

+

Learn from our mistakes!

+

Name something that you did while writing code that caused an error. What were you attempting to do and what were your assumptions when doing it? How did you fix it?

+

+ What are some questions or issues you are having with the material covered so far? Lunch with your mentors and pick their brains. :) +

+
+ + + +
+

Lunch time!

+

Come back for 2:00pm

+

And we will move on to Part 2

+
+
-
(Use the left and right arrow keys on your keyboard to navigate.)
- diff --git a/index2.html b/index2.html new file mode 100755 index 0000000..f205616 --- /dev/null +++ b/index2.html @@ -0,0 +1,1577 @@ + + + + + Ladies Learning Code - JavaScript Aug. 17, 2013 + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+

Some JavaScript Inspiration...

+

+ What kind of crazy stuff can you do with HTML5 and JavaScript? +

+

+ + Arcade Fire's The Wilderness Downtown

+

+ Arcade Fire's interactive music video: + The Wilderness Downtown.
+ + (Dynamic content, Canvas 3D, Google Maps, drawing tools, and more!) + +

+
+ + +
+

The Ladies Learning Code Mentors

+

(Aren't they awesome?)

+
+ + +
+

Now Back To Your Regularly Programmed Workshop...

+
+ + +
+

+ JavaScript Theory +
+ Hands-on +

+

Part 2

+
+ + +
+

Functions & Methods

+

+ What is something that you do that's very repetitive or a hassle? Wouldn't it be great if it was automated? Or at least hidden away? +

+ + + + + + + + + + + + +
Paying for parking:
+ The old way + thumb-down + + The improved way + thumb-up +
+
    +
  1. Find bank machine
    2. +
  2. Pull out bank card
    3. +
  3. Get money out from ATM
    4. +
  4. Buy chips so you can make change
    5. +
  5. Put change into machine
    6. +
  6. Take receipt
    7. +
+ 		+
    +
  1. Pull the PayPass credit card from your wallet
    2. +
  2. Tap
    3. +
  3. Take receipt
    4. +
+
+ * +
+ + +
+

Functions in JavaScript

+
+

Functions are used to make the code "do things." Sometimes they are also called methods when found on an object - more on that in a bit!

+

+ prompt() + and + alert() + are two functions that are pre-written into JavaScript. +

+

+ Someone already did the hard work for us by writing these functions to show us popups in the browser. +

+

But we can also write our own!

+
+ + +
+

Defining a Function

+

+ Create your own functions to group together your own repetitive tasks. +

+

+ To create a function, it needs to be defined + first. +

+

+ There are different ways to define a function, but the most common way is using the + function + keyword and enclosing one or more lines of code within curly braces { }. +

+
+function nameOfFunction() {
+  //code to execute
+}
+
+ + * +
+ + +
+

Calling a Function

+

+ The code within functions doesn't execute until it's called! +

+

Let's try that again.

+ +
+ + +
+

Functions & Events

+

+ The browser executes the JavaScript as soon as the page loads. +

+

+ But sometimes you need to control when it executes. For example, +
+ if someone rolls over a navigation menu or presses a Submit button. +
+

+

This is where functions also come into play.

+ +
+ + +
+

Functions in Functions

+

+ Let's take another look at our shopping cart and figure out what the functions are doing. +

+ + + * +
+ + +
+

Review: What do we know about Functions so far?

+
+

› Created & defined by using the function keyword

+

› Used to group together related lines of code and store them under descriptive names

+

› Can be reused just by calling the function name

+

› Define the function first but it will not run until you call the function

+

› Can be used inside another function

+
+ + +
+

Functions and Pizza

+

+ Let's order a pizza!  The orderPizza() function below represents all the steps it takes to place an order (find the pizza place's phone number, call them, give them your address, etc). +

+

+ Inside the function is where the pizza restaurant will hold our option choices (toppings, crust type and size of pizza). Now they can use this stored information to make our order. +

+ +
+ + +
+

More Pizza!

+

+ What if we want to order another pizza but with different options? +
+ Let's order another pizza. +

+ +
+ + +
+

Global vs Local Variables

+

+ Let's say the pizza place always want to include cheese as a basic topping in all of the pizzas. We can declare a + baseTopping + variable outside of the function so it can be accessible from anywhere in the program. +

+ +
+ +
+

Functions, Pizza and Parameters

+

+ This could get cumbersome if we wanted to make a lot of pizzas.  How can we re-use the makePizza() function instead of creating multiple functions? We use PARAMETERS. +

+

+ Functions can be used with one parameter, more than one parameter or none at all. +

+ + + + * +
+ + +
+

Review: Functions and Parameters

+

Functions are more flexible when used with parameters because variables can be passed into the function.

+

In the makePizza() function, the variables from inside the function were removed and added as parameters. Now when we call the function we can pass the values right into the function.

+ function-parameters +
+ + + +
+

JavaScript Theory Applied

+

Putting it together on an actual HTML page

+ +
+ +
+

Inline JavaScript

+

+ JavaScript can appear + inline + in a webpage in several spots. Either in the + <head> + section or anywhere in the + <body> + section. +

+ 
+ <html>
+ <head>
+   <title>JavaScript example!</title>    
+   <script type="text/javascript">
+     alert("I'm in the head tag!");
+   </script>
+ </head>
+ <body>
+   <div id="example">This is an example.</div>
+   <script type="text/javascript">    
+     alert("I'm in the body tag!");
+   </script>
+ </body>
+</html>
+
+

+ Need to manipulate an html tag or have a quick loading page? Put the JavaScript just before the + closing + <body> + tag. +

+
+ + + + +
+

Using a Code Editor

+

Download and open up this file: exercises/pizzaMaking.html
+(Psst: It's also in the ZIP folder that you downloaded earlier today.)

+
+
+ Sublime +
+
+

+

This is almost the same code as previous. Why isn't it making pizza? :(

+

+ Take note of how your code is being coloured. It's the first sign of a possible syntax error and will save you headaches later. +
+ Some editors do a better job than others -- that's what you pay for sometimes. +

+ +
+ + + + +
+

Objects

+

If variables are boxes, OBJECTS can be thought of as bento boxes -- "advanced variables" if you will.

+

A Real Bento Box

+
+ + +
+

How Bento Boxes are like Objects

+



+ + + + + + + + + + +
+ Rice box diagram +


+ 		+

A basic variable only holds one value.

+ 
var takeout = "Fried Rice";
+
+ Bento Box diagram + +

An object holds a collection of values.

+ 
// create a new object
+var bentobox = {};
+
+// fill it with stuff
+bentobox.main = "Teriyaki";
+bentobox.side = "Tempura";
+bentobox.salad = "Seaweed Salad";
+bentobox.soup = "Miso";
+bentobox.sauce = "Soya";
+bentobox.dessert = "Fruit";
+
+
+ +
+

Creating an Object

+

Creating an object is easy. Just like any other variable, use the var keyword and give it a descriptive name.

+

But instead of assigning a single value right away, use these curly braces to make an empty object.

+

var bentobox = {};

+

Yes, it's weird but think about the {} as a sort of funky container.

+
+ +
+

Object Properties

+

The "compartments" of objects are called PROPERTIES.

+

If you already have an existing object, there are a few ways to access and set a value to a property. Since these two are very commonly used, they will both be discussed.

+ + + + + + + + + + + + +
+ Dot notation:
+myObject.property = value; +

+
+bentobox.main = "Teriyaki";
+bentobox.side = "Tempura";
+
+		 + Key-Value Lookup:
+ myObject[key] = value; +
+
+
+bentobox["main"] = "Teriyaki";
+bentobox["side"] = "Tempura";
+
+ +This will be most useful after you understand arrays. Advantage: +You can use concatenation with the key string in order to do look up something that's partially dynamic: +
+
+bentobox.soup0 = "Miso";
+bentobox.soup1 = "Udon";
+ 		+
+bentobox["soup"+1] = "Miso";
+bentobox["soup"+2] = "Udon";
+
+


+

Advanced sidenote:
+Alternatively, you can both declare an object and set it's values at the same time:
+var bentobox = { soup:"Miso", main:"Teriyaki" };

+
+ +
+

Why use Objects?

+

Advanced topic: Objects are useful because you group all these properties together and you can reuse the object over again.

+

There's an expectation of what you'll get in a bento box.
+
+Some items are fixed (a fruit dessert, a miso soup) but some compartments can be edited (a gyoza side versus tempura).

+ + + + + +
Bento box variation #1Bento box variation #2
+
+ +
+

Think of Everything as an Object*

+

When I said that objects were "advanced variables", here's another way of looking at it:

+

All JavaScript variables can be treated like objects too.

+
+

If curly braces are a container for a generic object, quotes are containers for characters. When we get to arrays next, you'll see that it uses square brackets. (The only "uncontainered" object we've introduced today was a number.)

+
+
+ 
var stringObject = “ ”;
+var arrayObject = [ ];
+
+

Some objects are simpler than others but almost everything in JavaScript has properties available to us.

+

*Again, I need to oversimplify. The concept called DATA TYPE is a hairy topic. For more info: http://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/ and http://www.2ality.com/2011/03/javascript-values-not-everything-is.html

+
+ +
+

Built-in JavaScript Properties

+

In this workshop we won't be creating any of our own objects, but JavaScript already has many objects built into the language.

+

Let's look at a string object and the length property which returns the number of characters in a string. Try putting your own name in here.

+ +
+ +
+

Functions in Objects

+

Previously, we talked about functions as blocks of re-usable code. This might sound crazy but you can store functions in variables too!

+ + + + + + + + + + + + + + + + +
+ This function... +
+function sayHello(){
+  document.write("hello");
+}
+
+sayHello();
+
+
+

+ ➞ + 		+ is the same as: +
+sayHello = function() {
+  document.write("hello");
+}
+
+sayHello();
+
+
+ + ↆ
+ + + But now look at this! +
+var welcomeTeam = {};
+welcomeTeam.sayHello = function() {
+  document.write("hello");
+}
+welcomeTeam.sayHello();
+
+
+
+ +
+

Object Methods

+

When a function is associated with an object we call it a METHOD.

+

Let's say you're having a robot sale! Everything is 50% off. But, after doing the math, you notice that the sale price is a bit off.. Let's declare a sale price and manipulate it using toFixed(). When you use a method, it gives you access to all the hard work that someone else did and it only takes you one line to use it!

+ +
+ + +
+

Looking up properties and references

+

length and toFixed() are only two of many (many!) more built-in properties and methods of objects in JavaScript.

+

Check out this list: https://developer.mozilla.org/en-US/docs/JavaScript_Methods_Index.

+

An overwhelming look at objects: https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Predefined_Core_Objects

+
+ + +
+

Arrays

+
+

+ Arrays are similar to objects; they both hold a collection of values. However, arrays hold its values in a numerical index rather than labels. +

+

+ Think of arrays as egg cartons. All the eggs are in one carton but each egg has its own slot. +

+

+ egg-carton + Just like variables and objects, declare an array with the keyword var. +

+ +

var eggspressions = [];

+




+
+

Unlike objects, arrays are declared with square brackets [ ].

+
+
+ + +
+

Arrays How-to

+ 
+//declaring an empty array
+var eggspressions = [];
+
+

Set values using square bracket [ ] notation.

+ 
+//assigning values
+eggspressions[0] = "skeptical";
+eggspressions[1] = "frazzled";
+eggspressions[2] = "silly";
+eggspressions[3] = "giggling";
+
+

+ The numbers inside the square brackets [ ] are referred to as the +
+ index number. Array indexes always start at zero. +

+ +
+

+ Arrays can be declared in different ways. +
+ The above example can also be declared like this: +
+ var eggspressions = ["skeptical","frazzled","silly", "giggling"]; +
+ See more info here: + http://www.w3schools.com/js/js_obj_array.asp +

+
+
+ + +
+

Arrays and Indexes

+

+ Index numbers are used to assign values. +

+

+ Index numbers are also used to access values. +

+

+ To access the value of the second egg in the eggspressions array, use index 1 since it's the second item in the list. +

+ +
+ + +
+

Arrays and Properties

+

+ Since Arrays are also objects, there are many properties associated with the Array object. +

+ +

The length property is also associated with array objects.

+

+ As mentioned previously, the length property returns the number of characters when associated with a string. When used with an Array, the length property returns the number of elements. +

+ +
+ + +
+

Arrays & Length:  Why?

+

+ It is common to use JavaScript to run through a list of values and apply some code to it. In order to do this, we need to know how many elements there are in total. +

+

+ Let's look at this photo gallery from + theglobeandmail.com + and figure out how length can be used here. +

+

globe-mail

+ * +
+ + +
+

Arrays & Length and the 0 Index

+

How do we access a particular value?

+

By using the index number.

+

+ So how do we access the + last + value? +

+
+var eggspressions = [];
+eggspressions[0] = "skeptical";
+eggspressions[1] = "frazzled";
+eggspressions[2] = "silly";
+eggspressions[3] = "giggling";
+
+

+ To access the last index value, you can use + eggspressions[3]. +

+

BUT...

+

+ You can also use + eggspressions[eggspressions.length-1]. +

+
+ + +
+

Huh?

+
+ + +
+

+ REWIND: Arrays & Length +
+ and the 0 Index +

+ 
+var eggspressions = [];
+eggspressions[0] = "skeptical";
+eggspressions[1] = "frazzled";
+eggspressions[2] = "silly";
+eggspressions[3] = "giggling";
+
+

Let's break it down.

+

› eggspressions.length returns 4
+ › index of last element is 3
+ › eggspressions.length-1 is the same as 4 - 1 and will return 3
+ › eggspressions[3] returns the last value
+ › eggspressions[eggspressions.length-1] is the same as eggspressions[3]

+ +

Clear as mud?

+
+ + +
+

How is this useful?

+

+ Since the index always begins at 0, the last index value is always length-1. + This is useful if you want to always access the last index, despite new additions, and apply some code to it. +

+ + * +
+ + +
+

Loopty-Loops

+
+

+ Why use loops? Because sometimes we need to execute repetitive code for a specified number of times or through a list of values. +

+

+ Loops will execute the same code continuously, using conditional statements to determine when to begin and stop. +

+

It's like creating a playlist on your favorite music player.

+

+ You create a list of songs, press play and then each song is played automatically in the set order of the playlist. +When it reaches the end of the playlist, it stops. +

+

+ We will be discussing + while loops + and + for loops. +

+
+ + +
+

While Loop

+

+ The + while loop + executes the code contained in curly braces { } + while + the condition is true. +

+

+ An index variable is required to keep track of its place in the loop. +

+

+ The + while loop + stops executing the code once the condition becomes false. +

+

+ If you had 10 songs in your playlist, the player won't stop until it reaches the end of song 10. +

+
+//declare index variable
+var i = 0; 
+
+while ( i < playlist.length ) {
+  playCurrentSong();
+  i = i + 1; // adds 1 to the current index so it moves to the next song  
+}
+
+ +
+

+ If the condition is always true, the loop will run infinitely and will never exit the while loop. +This can cause your browser to crash! +

+
+
+ + +
+

While Loop in Action!

+
+

+ Let's use the while loop to output the mathematical formula for converting Celsius to Fahrenheit. +

+

(The formula is: Temperature = Temperature * 9 / 5 + 32)

+

+ This next example uses a while loop to output the results of the temperature formula into HTML table rows that are also added dynamically. +

+

+ It will stop when we reach 30 degrees Celsius (or whatever number is declared in the condition). +

+

See next slide for the example.

+
+ + +
+

While Loop Temperature Conversion

+

+ Let's look at the temperature conversion table with and without JavaScript and compare the difference in the amount of repetitive code required to create a table like this manually. +

+

+ Conversion table using a while loop. +

+

+ Conversion table without JavaScript. +

+

+ View source and compare the difference between the amount of code. +

+
+ while-loop + no-while-loop +
+
+ + +
+

For Loops

+

+ A for loop also loops through the code a specified number of times until the condition is false. +

+

The index, conditional test and incrementer are all declared in one line. Basically, it's the while loop condensed.

+
+/* While Loop */
+var i = 0; //index
+while ( i < playlist.length ) { //condition
+  playCurrentSong();
+  i = i + 1; // incrementer
+}
+
+
+/* For Loop */
+// index, condition, incrementer
+for ( var i = 0; i < playlist.length; i++ ) {
+  playCurrentSong();
+}
+
+ +
+ Incrementer (i++) and decrementer (i--) operators add or subtract one.
+ i++ is the same as i = i + 1
+ i-- is the same as i = i - 1 +
+
+ + +
+

For Loops and Arrays

+

+ For loops are useful when used in conjunction with arrays because they can be used to execute specific actions while going through the list of values. +

+

+ Back to our robot store. It wouldn't be much of a store if there was only one product! +We can create a list of different products with various prices by creating an array. +

+
+var productPrices = [];
+productPrices[0] = 17.99;
+productPrices[1] = 25;
+productPrices[2] = 13.99;
+productPrices[3] = 9.99;
+productPrices[4] = 24.99;
+productPrices[5] = 8.99;
+
+
+ + +
+

For Loops, Arrays, Robots and Sales

+

Suppose we wanted to put all the items over $15 on sale?  Let's use the for loop to determine which items are eligible for the sale and output the product number.

+ + +
+ +
+

Mini-exercise #6 (10-15 minutes)

+

+ As owner of Planet Robot, you decide to have a special members-only sale: 50% off all items with a secret password! (p.s. the password is "llc"!) +

+

+ Sounds like a great deal for the customer, but all you have is a static HTML page right now. Are you going to go through every single product, calculate the discounted price, and then update every entry manually? No, you're going to use loops and arrays! +

+

+ Download the HTML exercise file: + exercises/shopping_cart_products_start.html +

+

TODO: Check within the code for your THREE tasks.

+ +

+ If you're stuck, here's the solution file: + + assets/exercises/shopping_cart_products_final.html + +

+
+ + + +
+

Regroup before break

+

Share your mistakes so we can learn from each other!

+
+ + +
+

Break time!

+

Come back in 15 minutes

+
+ + +
+

Document Object Model (DOM)

+

Manipulating objects on a real HTML page

+
+ + +
+

The Components of a Web Page

+

Think about your HTML web page (your "browser document") as being made up of many blocks.

+

Blocks

+
+ + + +
+

Pre-defined Blocks

+

Some blocks are defined by the browser, such as the browser window.

+

Window

+
+ + + +
+

User-defined Blocks

+

And some blocks we make ourselves via HTML
+(e.g. fieldset, div, and img HTML tags).

+

Blocks

+

A <div></div> block.

+
+ + + +
+

Document Objects

+

All of these blocks are objects -- just like the ones we covered earlier! And all these objects have pre-written functions/methods you can use.

+

Does the line of code below make more sense now? document is one of the main objects of a web page and it has a method named write that accepts a string as a parameter. document has lots of other properties and methods too: check out this list.

+ +
+ + +
+

HTML Element Objects

+

The most repetitive thing you'll ever do with JavaScript is getting references to your HTML tags ("elements") using document.getElementById().
+(It's important that your HTML tag has an id attribute in order to do this!)

+

For example, let's dynamically find out what the text is in a paragraph tag by reading its innerHTML property. (You can find all the things you can do with elements here.)

+ +
+ + +
+

HTML Element Objects (cont'd)

+

You can also use innerHTML to replace what's already in a element.

+
+ + +
+

HTML Element Objects (cont'd)

+

Or let's dynamically swap out one image for another by updating the src attribute of an image tag.

+ +
+ + +
+

Updating CSS Styles

+

You can even update an HTML element's CSS styles dynamically using its style property.

+

Consider how you might program a button toggle effect to show the difference between "selected" or "deselected" states. (Note the differences between how properties are written in CSS to how they appear in JavaScript -- background-color versus backgroundColor.

+ + +
+ + +
+

Updating CSS Styles (cont'd)

+

You could even update several style properties at once if you use CSS classes and update an element's class attribute.

+ +
+ + + +
+

Make DOM Elements Magically Appear!

+

You can even create completely new elements out of thin air! Use document.createElement() and + +

+ + +
+

Going Beyond JavaScript Basics

+

You're getting to be quite the pro!

+
+ + +
+

Debugging!

+

Squash those crawly things in your code.

+
+ + +
+

What's a Bug?

+

As the story goes, the term "software bug" got its name because a real moth flew into a computer system causing strange, unexpected behaviours to happen in a computer program.

+

Nowadays, bugs are mostly due to human error in one of two areas:

+
    +
  1. + Syntax - missing semi-colons, typos, case-sensitivity
    2. +
  2. + Logic - trying to access a variable that doesn't exist yet, writing an incorrect conditional test
+

Luckily there's a few things to help us hunt them down quicker...

+
+ + +
+

Chrome Developer Console

+

Use the built in developer tools in Chrome to debug your code. (Firefox+Firebug is similar but not exactly the same.)

+

Chrome debugger tabs

+
+ + +
+

Right click > Inspect Element

+

Easiest way to remember is to right-click on any web page and select "Inspect Element". In the new panel, select the "Console" tab to see JavaScript errors or to play in the console sandbox.

+

Right click to see Inspect Element in the popup

+
+ + + +
+

Inspecting the DOM

+

You can inspect any webpage with the debugger.

+

Let's open up the Ladies Learning Code Events page: http://ladieslearningcode.com/events/.

+

How can we use the console to find out how many events are listed on this page?

+
+ + +
+

More info

+

Lots to learn about the debugger! At your leisure, watch this video for features: + + http://www.youtube.com/watch?v=TH7sJbyXHuk

+
+ + + + +
+

External JavaScript

+

Keeping it organized and working with others

+
+ + +
+

<script src="">

+

As you write bigger pieces of JavaScript, you will want to start putting your code into their own files so they are easier to manage. Or you might want to enlist the help of others to write JavaScript for your website so you can work on different sections separately. A big site could have thousands of lines of code written by many different people!

+

To link to an external JavaScript file:

+ 
+<html>
+  <head>
+    <title>JavaScript example!</title>
+    <script type="text/javascript" src="scripts.js"></script>    
+  </head>
+  <body>
+    <div id="example">This is an example.</div>    
+  </body>
+</html>
+
+
+
+ + +
+

In the external file

+

In the external JavaScript file (scripts.js) you don't include script tags; just JavaScript code.

+

View this example: assets/exercises/external-javascript.html

+
+ + +
+

script tag gotchas

+

Even though you're not writing JavaScript between the script tags, you must use a closing </script> tag. A self-closing tag such as <script src="scripts.js" /> will not work. The correct way is highlighted below:

+

<script type="text/javascript" src="scripts.js"></script>

+
+ + +
+

JQuery

+

The Write Less, Do More, JavaScript Library

+
+ + +
+

jQuery: A brief introduction

+ +

jQuery is a cross-browser JavaScript library designed to simplify client-side scripting, manipulating HTML pages and handling events. The library contains many built-in functions and methods that make writing JavaScript code easier.

+ +

Getting started

+

Download the library and include the file in your HTML page

+

Download instructions can be found here: http://docs.jquery.com/Downloading_jQuery

+ +

Gotchas!

+

When adding your own custom-written jQuery/JavaScript files, make sure to include it after the jQuery file to ensure that the library loads first.

+
+ + +
+

jQuery: Demo

+ +

There are many built in methods and functions included in the jQuery library, too many to remember them all. +Never fear, jQuery has documented their API here: http://api.jquery.com +
It's searchable and provides explanations and examples.

+

Let take a peek at some jQuery code.

+ + +
+ +
+

BUT WAIT. Javascript isn't just for the browser anymore?

+ +

Javascript has grown beyond the browser! You can use this language for front-end (browser) AND back-end (server) programming now.

+

+

Node.js is a Javascript 'platform' (a bunch of tools and code to help you make complex programs) for building javascript without the browser. It is commonly used to build web servers, but it has other uses too... like ROBOTS!!

+

+ +

Here is a tutorial for getting started with Node.js at home: http://net.tutsplus.com/tutorials/javascript-ajax/this-time-youll-learn-node-js/ +

+ +
+
+

FIN

+
+

Your instructor today

+
+ SkepticSean +

Sean Ouimet

+ sean [at] seanouimet.com +
+ @SkepticSean +
+
+

Want to keep learning more?

+
+ ExchangeJS +

ExchangeJS (Edmonton's JavaScript Meetup)

+ @EdmontonJS +
+ www.exchange.js.com +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/intro.html b/intro.html deleted file mode 100644 index 02d3672..0000000 --- a/intro.html +++ /dev/null @@ -1,150 +0,0 @@ - - - - - Ladies Learning Code - JavaScript Oct 13, 2012 - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
-
-

Introduction to JavaScript

-
-
-

Your instructors today

-
- pearl chen -

Pearl Chen

- pearl [at] karma-laboratory.com -
- klab.ca/+ -
- @pearlchen -
-
- christina truong -

Christina Truong

- hello [at] christinatruong.com -
- christinatruong.com -
- @christinatruong -
-
-

- ( Interactive code slides thanks to - CoderDeck - ! ) -

-
-
- - -
-

Course Outline

-

The morning (break @ ~11:30am)

- -

After lunch (break @ ~3:30pm)

- -

Homestretch

- -
- - -
-

Click to go to next section

-
- - -
- - -
(Use the left and right arrow keys on your keyboard to navigate.)
- - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/jquery-indepth.html b/jquery-indepth.html deleted file mode 100644 index 0e41d01..0000000 --- a/jquery-indepth.html +++ /dev/null @@ -1,479 +0,0 @@ - - - - - Ladies Learning Code - JavaScript March 18, 2012 - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
-

jQuery Hands-on

-

Intro to jQuery and External JavaScript Files

-
- - -
- - -

-

The Write Less, Do More, JavaScript Library

-
- - -
-

jQuery: A brief introduction

- -

jQuery is a cross-browser JavaScript library designed to simplify client-side scripting, manipulating HTML pages, animating and handling events.

- -

jQuery is still JavaScript. It is a library of functions built on top of JavaScript to simplify your program. It does, however, have it's own syntax as well.

- -

The library contains many, many built-in functions and methods. It's not an easy task to remember them all. Never fear, jQuery has documented their API here: http://api.jquery.com.

- -

Let dive in and see how jQuery methods compare to using just JavaScript alone.

-
- - - -
-

jQuery vs JavaScript

-

Including inline JavaScript into your web page only requires the code to be written between the <script></script> tags.

-

In jQuery, the document needs to be "ready". This bit of code needs to wrap all of your jQuery: $(document).ready(function(){});. Your code goes between the curly braces {}, and will only run once the DOM is ready.

- -
-<script type="text/javascript">
-  // JavaScript code here
-</script>
-
-<script type="text/javascript">    
-  $(document).ready(function(){
-     //jQuery code here
-  });
-</script>
-
-
- - -
-

More on $(document).ready

-

Remember document.write()? The functionality is similar. document is the object, write() is the method we use to pass in parameters. (see slide)

- -

In jQuery syntax, the $ is simply a shorcut for a function called jQuery. It is how you access all of the functionality in the library. To select the document jQuery style, it looks like this:

-
-$(document)
-
-

.ready() specifies a function to execute when the DOM is loaded.

-
-$(document).ready();
-
-

An "anonymous function" needs to be passed into the above code to execute the jQuery code.

-
-//syntax for anonymous function
-function(){
-   code goes here
-}
-
-// pass the anonymous function in the ready() method    
-$(document).ready(function(){
-   jQuery code here
-});
-
-
-
- - -
-

jQuery vs JavaScript (cont)

- -

Remember document.getElementById?
- jQuery makes it easier to reference objects in the DOM.

- -
-<div id="status">
-  <p>Loading...</p>
-  <p><img src="assets/loading.gif"></p>
-</div>
-
- -
-// JavaScript
-document.getElementById("status")
-
-// jQuery 
-$("#status")
-
-
-

Your HTML tag must have an id attribute in order to do this!
- Use #name to reference and ID and .name to reference a class

-
-
- - - -
-

jQuery vs JavaScript (cont)

-

Let's see how the JavaScript innerHTML example can be done with jQuery - to replace what's already in an element.

- -
- - -
-

jQuery vs JavaScript (cont)

-

You can also use "dot notation" to write the statement in one line instead of declaring a variable.

- -
- - - -
-

External JavaScript

-

Keeping it organized, working with others
and adding libraries

-
- - -
-

<script src="">

-

As you write bigger pieces of JavaScript, you will want to start putting your code into their own files so they are easier to manage. Or you might want to enlist the help of others to write JavaScript for your website so you can work on different sections separately. A big site could have thousands of lines of code written by many different people!

-

To link to an external JavaScript file:

- 
-<html>
-  <head>
-    <title>JavaScript example!</title>
-    <script type="text/javascript" src="scripts.js"></script>  
-  </head>
-  <body>
-    <div id="example">This is an example.</div>    
-  </body>
-</html>
-
-
- - -
-

In the external file

-

In the external JavaScript file (scripts.js) you don't include script tags; just JavaScript code.

-

View this example: http://pchen.github.com/LLC-JavaScript/exercises/external-javascript.html

-
- - -
-

script tag gotchas

-

Even though you're not writing JavaScript between the script tags, you must use a closing </script> tag. A self-closing tag such as <script src="scripts.js" /> will not work. The correct way is highlighted below:

- -
-<script type="text/javascript" src="scripts.js"></script>
-
-
- - - -
-

jQuery: Getting started

-

To make use of the jQuery library, it needs to be included on your web page using an external file. There are two ways to include the file.

- -

1. Download the jQuery library and include it with the rest of your files.

-
-<script type="text/javascript" src="jquery.js"></script>
-
-

2. Link directly to the CDN (Content Delivery Network) hosted copies.

-
-<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
-
-
-

Download instructions: http://docs.jquery.com/Downloading_jQuery

-
-
- - -
-

Gotchas!

-

When adding your own custom-written jQuery/JavaScript files, make sure to include it after the jQuery file to ensure that the library loads first.

- -
-<script type="text/javascript" src="jquery.js"></script>
-<script type="text/javascript" src="custom.js"></script>
-
-
- - -
-

jQuery Selectors: Syntax Review

-

Selectors are always surrounded by single or double quotes, except when referencing a variable.

-
-  <div class="name">Class selector<div>
-  <div id="name">ID selector<div>
-
-  $(".name") - referencing a class
-  $("#name") - referencing an ID
-  $("div") - referencing an HTML element
-
-  var selector = $("name");
-  $(selector) - referencing a variable
-

-
- - - -
-

jQuery Events

-

Just like Javascript functions, we can execute the code on an event. A very common event is the click event.

- -
-$(selector).click(function(){ 
-  //code to execute
-});
-
-

click() triggers a click event, the selector is the element to be clicked and function goes between the parenthesis to run a function, containing one more commands.

- - -
- - -
-

jQuery AND JavaScript

-

jQuery may have its own syntax and methods but it's still JavaScript at
its core. Let's look at a previous example and see how jQuery and JavaScript work together.

- -

In the exercises folder, open jquery-javascript.html and jquery-javascript.js.

-

While it works using pure JavaScript, the functions are currently being called "inline" by adding an onclick directly in the element. It's best practice to avoid inline event handlers.

- -

Let's use the jQuery click() method instead and use it to select the element and pass the related function.

-
- - - -
-

jQuery Effects

- -

There are many handy built in methods that make it simpler to add effects. The full list is available here. It's searchable and provides explanations and examples.

-

Here's an example of how to use the .hide() and .show() methods.

- - -
- - -
-

Mini-exercise (20 mins)
jQuery Effects

-

Let's practice adding some more jQuery effects and using external javascript files.

-
    -
  1. In the exercises folder, open the jquery-effects.html into your text editor. HTML and CSS is already provided.
    2. -
  2. Include the jQuery library using one of the CDN hosted links listed here.
    3. -
  3. Create your own external file called 'jquery-effects.js' to write your own jQuery and included it in the HTML page.
    4. -
  4. Reference the previous example and add click events using the classes supplied in the <a> links, to add the following effects: -
      -
    • show()
      • -
    • hide()
      • -
    • slideDown()
      • -
    • slideToggle()
      • -
    • fadeOut()
      • -
    • fadeIn()
      • -
    -
    5. -
-
-

jQuery effects documentation: http://docs.jquery.com/Effects
- jQuery click event documentation: http://api.jquery.com/click/
- Solutions posted in the solutions folder.

-
- -
- - -
-

Click to go to next section

-
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/js_arrays_loops.html b/js_arrays_loops.html deleted file mode 100644 index 8f0c711..0000000 --- a/js_arrays_loops.html +++ /dev/null @@ -1,503 +0,0 @@ - - - - - Ladies Learning Code - JavaScript March 18, 2012 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - -
-

JavaScript Part ??

-

Arrays and Loops

-
- - -
-

Arrays

-
-

- Arrays are similar to objects; they both hold a collection of values. However, arrays hold its values in a numerical index rather than labels. -

-

- Think of arrays as egg cartons. All the eggs are in one carton but each egg has its own slot. -

-

- egg-carton - Just like variables and objects, declare an array with the keyword var. -

- -

var eggspressions = [];

-




-
-

Unlike objects, arrays are declared with square brackets [ ].

-
-
- - -
-

Arrays How-to

- 
-//declaring an empty array
-var eggspressions = [];
-
-

Set values using a square bracket [ ] notation.

- 
-//assigning values
-eggspressions[0] = "skeptical";
-eggspressions[1] = "frazzled";
-eggspressions[2] = "silly";
-eggspressions[3] = "giggling";
-
-

- The numbers inside the square brackets [ ] are referred to as the -
- index number. Array indexes always start at zero. -

- -
-

- Arrays can be declared in different ways. -
- The above example can also be declared like this: -
- var eggspressions = ["skeptical","frazzled","silly", "giggling"]; -

- To read up more on Arrays, go here:
- https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array -

-
-
- - -
-

Arrays and Indexes

-

- Index numbers are used to assign values. -

-

- Index numbers are also used to access values. -

-

- To access the value of the second egg in the eggspressions array, use index 1 since it's the second item in the list. -

- -
- - -
-

Arrays and Properties

-

- Since Arrays are also objects, there are many properties associated with the Array object. -

- -

The length property is also associated with array objects.

-

- As mentioned previously, the length property returns the number of characters when associated with a string. When used with an Array, the length property returns the number of elements. -

- -
- - -
-

Arrays & Length:  Why?

-

- It is common to use JavaScript to run through a list of values and apply some code to it. In order to do this, we need to know how many elements there are in total. -

-

- Let's look at this photo gallery from - theglobeandmail.com - and figure out how length can be used here. -

-

globe-mail

- * -
- - -
-

Arrays & Length and the 0 Index

-

How do we access a particular value?

-

By using the index number.

-

- So how do we access the - last - value? -

-
-var eggspressions = [];
-eggspressions[0] = "skeptical";
-eggspressions[1] = "frazzled";
-eggspressions[2] = "silly";
-eggspressions[3] = "giggling";
-
-

- To access the last index value, you can use - eggspressions[3]. -

-

BUT...

-

- You can also use - eggspressions[eggspressions.length-1]. -

-
- - -
-

Huh?

-
- - -
-

- REWIND: Arrays & Length -
- and the 0 Index -

- 
-var eggspressions = [];
-eggspressions[0] = "skeptical";
-eggspressions[1] = "frazzled";
-eggspressions[2] = "silly";
-eggspressions[3] = "giggling";
-
-

Let's break it down.

-

› eggspressions.length returns 4
- › index of last element is 3
- › eggspressions.length-1 is the same as 4 - 1 and will return 3
- › eggspressions[3] returns the last value
- › eggspressions[eggspressions.length-1] is the same as eggspressions[3]

- -

Clear as mud?

-
- - -
-

How is this useful?

-

- Since the index always begins at 0, the last index value is always length-1. - This is useful if you want to always access the last index, despite new additions, and apply some code to it. -

- - * -
- - -
-

Loopty-Loops

-
-

- Why use loops? Because sometimes we need to execute repetitive code for a specified number of times or through a list of values. -

-

- Loops will execute the same code continuously, using conditional statements to determine when to begin and stop. -

-

It's like creating a playlist on your favorite music player.

-

- You create a list of songs, press play and then each song is played automatically in the set order of the playlist. -When it reaches the end of the playlist, it stops. -

-

- We will be discussing - while loops - and - for loops. -

-
- - -
-

While Loop

-

- The - while loop - executes the code contained in curly braces { } - while - the condition is true. -

-

- An index variable is required to keep track of its place in the loop. -

-

- The - while loop - stops executing the code once the condition becomes false. -

-

- If you had 10 songs in your playlist, the player won't stop until it reaches the end of song 10. -

-
-//declare index variable
-var i = 0; 
-
-while ( i < playlist.length ) {
-  playCurrentSong();
-  i = i + 1; // adds 1 to the current index so it moves to the next song  
-}
-
- -
-

- If the condition is always true, the loop will run infinitely and will never exit the while loop. -This can cause your browser to crash! -

-
-
- - -
-

While Loop in Action!

-
-

- Let's use the while loop to output the mathematical formula for converting Celsius to Fahrenheit. -

-

(The formula is: Temperature = Temperature * 9 / 5 + 32)

-

- This next example uses a while loop to output the results of the temperature formula into HTML table rows that are also added dynamically. -

-

- It will stop when we reach 30 degrees Celsius (or whatever number is declared in the condition). -

-

See next slide for the example.

-
- - -
-

While Loop Temperature Conversion

-

- Let's look at the temperature conversion table with and without JavaScript and compare the difference in the amount of repetitive code required to create a table like this manually. -

-

- Conversion table using a while loop. -

-

- Conversion table without JavaScript. -

-

- View source and compare the difference between the amount of code. -

-
- while-loop - no-while-loop -
-
- - -
-

For Loops

-

- A for loop also loops through the code a specified number of times until the condition is false. -

-

The index, conditional test and incrementer are all declared in one line. Basically, it's the while loop condensed.

-
-/* While Loop */
-var i = 0; //index
-while ( i < playlist.length ) { //condition
-  playCurrentSong();
-  i = i + 1; // incrementer
-}
-
-
-/* For Loop */
-// index, condition, incrementer
-for ( var i = 0; i < playlist.length; i++ ) {
-  playCurrentSong();
-}
-
-
- Incrementer (i++) and decrementer (i--) operators add or subtract one.
- i++ is the same as i = i + 1
- i-- is the same as i = i - 1 -
-
- - -
-

For Loops and Arrays

-

- For loops are useful when used it conjunction with arrays because it can be used to execute specific actions while going through the list of values. -

-

- Back to our robot store. It wouldn't be much of a store if there was only one product! -We can create a list of different products with various prices by creating an array. -

-
-var productPrices = [];
-productPrices[0] = 17.99;
-productPrices[1] = 25;
-productPrices[2] = 13.99;
-productPrices[3] = 9.99;
-productPrices[4] = 24.99;
-productPrices[5] = 8.99;
-
-
- - -
-

For Loops, Arrays, Robots and Sales

-

Suppose we wanted to put all the items over $15 on sale?  Let's use the for loop to determine which items are eligible for the sale and output the product number.

- - -
- -
-

Mini-exercise #6 (10-15 minutes)

-

- As owner of Planet Robot, you decide to have a special members-only sale: 50% off all items with a secret password! (p.s. the password is "llc"!) -

-

- Sounds like a great deal for the customer but all you have is a static HTML page right now. Are you going to go through every single product, calculate the discounted price, and then update every entry manually? No, you're going to use loops and arrays! -

-

- Download the HTML exercise file: - exercises/shopping_cart_products_start.html -

-

TODO: Check within the code for your THREE tasks.

- -

- If you're stuck, here's the solution file: - - http://pchen.github.com/LLC-JavaScript/exercises/shopping_cart_products_final.html - -

-
- - -
-

Click to go to next section

-
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/js_conditionals.html b/js_conditionals.html deleted file mode 100644 index 102c964..0000000 --- a/js_conditionals.html +++ /dev/null @@ -1,795 +0,0 @@ - - - - - Ladies Learning Code - JavaScript Oct 13, 2012 - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
-

JavaScript Part 3

-

Making decisions with conditionals

-
- - -
-

Conditional Statements

-

Let's pretend to be your wise but nagging grandmother right now:

- -

All these things make logical sense to us as grown up humans but computers are a blank slate.

-

As a programmer, you try to give the computer the smarts to act on its own based on possible circumstances or events by using CONDITIONALS.

-
- - - -
-

If Conditionals

-

...

- - - - - - -
-

A basic conditional test looks like this:

-

IF the weather is raining
-      - THEN bring an umbrella

- 		-

In JavaScript,
- it might look like this:

- 
-if ( weather == rain ) {
-    bringUmbrella();
-}
-
- - -
-
-

The round brackets () - group together a condition to test.

-

The curly braces {} - group together a set of statements to execute.

-

-
- - -
-

Important!
-Assignment is not the same as equality

-
-

Drill this into your head. Tattoo it to your arm! So many errors happen because of this key difference:


- - - - - -
- =
- assignment
-

- Store a value to a variable: -

- var kitten = "Fluffy"; - 		- ==
- equality
-

- Compare a value to another value: -

- if ( kitten == cat ) -
-
- - -
-

Using Several If Conditionals

-

Sometimes it can be rainy but warm, or rainy and cold. You react to each thing individually.

-

Use several if statements when you're testing mutually inclusive scenarios.

- - - - - - -


-

IF the weather is raining
-    THEN bring an umbrella
-
-IF the temperature is below 10°C
-    THEN wear a sweater

- 		-

In JavaScript...

-
-if ( weather == rain ) {
-    bringUmbrella();
-}
-
-if ( temperature < 10 ) {
-    wearSweater();
-}
-
-
-
- - - -
-

if/else Conditionals

-

Sometimes there's a catch-all state that you want to happen if your previous tests don't happen.

- - - - - - -


-

IF the weather is raining
-     THEN bring an umbrella

- OTHERWISE
-     dress normally

- 		-

In JavaScript...

- 
-if ( weather == rain ) {
-    bringUmbrella();
-}else{
-    dressNormally();
-}
-
-
-
- - -
-

if/else if/else Conditionals

-

It shouldn't snow and rain at the same time so sometimes these conditions are mutually exclusive.

- - - - - - -


-

- IF the weather is raining
-     THEN bring an umbrella

- BUT IF the weather is snowing
-     THEN wear warm boots

- OTHERWISE
-     dress normally

- 		-

In JavaScript...

- 
-if ( weather == rain ) {
-    bringUmbrella();
-}else if ( weather == snow ) {
-    wearWarmBoots();
-}else{
-    dressNormally();
-}
-
-
-
- - - -
-

Conditionals used for UI elements

-

A basic conditional that your browser does internally is a react to mouse clicks on a HTML element.

-

- -


-<button onclick="animate()">Pull</button>

-

IF a user has clicked on a button
-     THEN call the animate() function.

-
- - - - - -
-
- - - -
-

...And Interactivity

-

Notice how the brush acts when you speed up / slow down, or get close to other lines. You can even change brushes.

-

Procedural Drawing by Mr. Doob

-

http://mrdoob.com/projects/harmony/

-
- - - - -
-

...And Games!

-

(Notice how the birds fly differently based on how far you pull them back in the slingshot, and in what direction.)

-

Angry Birds

-

http://chrome.angrybirds.com/

-
- - - -
-

Conditional Statements Summary

-


- - - - - - - - - - - - - - -
If Statement If...else statement If...else if...else statement

-
-
-if (condition) {

- // do something

-}
-
- 		-
-if (condition) {

-  // do something

-} else {

-  // otherwise do this

-}
-
- 		-
-if (condition) {

-  // do something

-} else if (condition2) {

-  // do something else

-} else {

-  // otherwise do this

-}
-
-
-
-
-

 

-
- - -
-

Testing Conditions

-

What does a condition actually look like?

-

if ( condition ) { ... }

-

Let's try also comparing Booleans using variables, Numbers, and Strings.

- - -
- - -
-

- Cheat Sheet: Comparison and Logical Operators -

-

- Here's a cheat sheet of different operators that can be used in conditional statements.

-

Using these two variables, var two = 2 and var ten = 10 , the examples below show how the statements would return true using the various operators. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Comparison operators
==is equal toten == two * 5
=== - is exactly equal to -
- (value and type) - 		- ten === 10 -
- ten === "10" (false) -
!=is not equal toten !== two
>greater thanten > two
<less than - two - < ten -
>=greater than or equal to - ten >= two * 5 -
- ten >= two * 5 + 1 -
<=less than for equal to - two - <= ten -
- two - <= 2 -
- - - - - - - - - - - - - - - - - - - -
Logical operators
&&and - (ten - < 11 && ten > 9) -
||or(ten == 10 || two == 2)
!not!(ten == two)
-
-
- - - -
-

More Conditional Examples

-

- Let's look at some examples. What do you think the output will be? Uncomment the code to be executed for each condition to see if the result is what you expected. Try changing the variable values too! -

- -
- - -
-

Variables, Operators, Concatenation and Conditionals

-

Now that we know what variables, operators and conditionals are, let's put them all into action using dynamic content.

- - -
- - -
-

Mini-exercise (10 minutes)
- Quantity Check

-

Uh-oh! Someone can attempt to put a negative number of products in their shopping cart! (This is based on the previous Quantity mini-exercise so it should look very familiar!) -

-
-

1. Use a conditional test to avoid a negative quantity. Typically this involves comparing against the number 0 and you can go about it in a few ways with the same result.
- 2. Similarly, warn the user that they are attempting to check out with an empty basket.
- 3. Bonus: Practice your concatention and display the price using a dollar sign. -

- - - -

If you get stuck, click here for the full solution.
Or if you want to reset, click here for the original code.

- -
- - -
-

Mini-exercise (5-10 minutes)
- Form validation -

-

- Let's revisit the shipping information form again -- however you don't want someone to be able to submit their order if they haven't filled out their address! -

-

- You have been supplied with 1 variable (address). After you press the "Check out now!" button, address which will automagically update to what is typed into the text field. -

-
-

1. Use a conditional test so someone cannot supply a blank address.
Hint: If you don't type anything into the address field, you get an empty string. Remember that an empty string is simply two quotes with nothing inbetween them. e.g. var emptyString = "";) -

-
- - - -

If you get stuck, click here for the full solution.
Or if you want to reset, click here for the original code.

- -
- - -
-

Mini-exercise (15-20 minutes)
- Complex form validation

-

- Now here's a more complex shopping form that you require all fields to be filled in. You have been supplied with 3 additional variables which will automagically update: name, city, and postal. -

- -
-

1. Since there are multiple fields, we'll need to keep track of them. Simplest way would be to use a descriptively named variable that can hold a true or false value.
- 2. Similiar to the previous exercise, use a conditional test so someone cannot supply any blank fields.
- 3. Alert the right message to the user. (Hint: How do you test for something AND something else OR another thing at one time? Try looking at the cheatsheet on Slide #12 of this section.) -

- - - -

If you get stuck, click here for the full solution.
Or if you want to reset, click here for the original code.

- -

- Bonus: There's always different ways to get to the same end goal. If you're finished early, try out different ways that you can reduce the number of variables and lines of code. -

- -
- - -
-

Click to go to next section

-
- - -
- - -
(Use the left and right arrow keys on your keyboard to navigate.)
- - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/js_debugging.html b/js_debugging.html deleted file mode 100644 index 63e41ae..0000000 --- a/js_debugging.html +++ /dev/null @@ -1,145 +0,0 @@ - - - - - Ladies Learning Code - JavaScript March 18, 2012 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
-

Going Beyond JavaScript Basics

-

You're getting to be quite the pro!

-
- - -
-

Debugging!

-

Squash those crawly things in your code.

-
- - -
-

What's a Bug?

-

As the story goes, the term "software bug" got its name because a real moth flew into a computer system causing strange, unexpected behaviours to happen in a computer program.

-

Nowadays, bugs are mostly due to human error in one of two areas:

-
    -
  1. - Syntax - missing semi-colons, typos, case-sensitivity
    2. -
  2. - Logic - trying to access a variable that doesn't exist yet, writing an incorrect conditional test
-

Luckily there's a few things to help us hunt them down quicker...

-
- - -
-

Chrome Developer Console

-

Use the built in developer tools in Chrome to debug your code. (Firefox+Firebug is similar but not exactly the same.)

-

[Wrench Icon] > Tools > Developer Tools ( Alt+Cmd+L for Mac, Ctrl+L for Windows) Click on the Console tab.

-

Chrome debugger tabs

-
- - -
-

Right click > Inspect Element

-

Easiest way to remember is to right-click on any web page and select "Inspect Element". In the new panel, select the "Console" tab to see JavaScript errors or to play in the console sandbox.

-

Right click to see Inspect Element in the popup

-
- - -
-

Inspecting the DOM

-

You can inspect any webpage with the debugger.

-

Let's open up the Ladies Learning Code Events page: http://ladieslearningcode.com/events/.

-

How can we use the console to find out how many events are listed on this page?

-
- - -
-

More info

- -
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/js_dom.html b/js_dom.html deleted file mode 100644 index 6abdcd4..0000000 --- a/js_dom.html +++ /dev/null @@ -1,519 +0,0 @@ - - - - - Ladies Learning Code - JavaScript March 18, 2012 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - -
-

JavaScript Part 5

-

The DOM and manipulating objects on a HTML page

-
- - -
-

The Components of a Web Page

-

Think about your HTML web page (your "browser document") as being made up of many blocks.

-

Blocks

-
- - - -
-

Pre-defined Blocks

-

Some blocks are defined by the browser, such as the browser window.

-

Window

-
- - - -
-

User-defined Blocks

-

And some blocks we make ourselves via HTML
- (e.g. <fieldset>, <div>, and <img> HTML tags).

-

Blocks

-
- - -
-

Document Objects

-

All of these blocks are objects -- just like the ones we covered earlier! And all these objects have pre-written functions/methods you can use.

-

Does the line of code below make more sense now? document is one of the main objects of a web page and it has a method named write that accepts a string as a parameter. document has lots of other properties and methods too: check out this list.

- - -
- - -
-

HTML Element Objects

-

The most common thing you'll do with JavaScript is get references to your HTML tags ("elements") via document.getElementById().

-

Important! Your HTML tag must have an id attribute in order to do this!

-
-<div id="status">
-  <p>Loading...>/p>
-  <p><img src="assets/loading.gif"></p>
-</div>
-
-
- - -
-

HTML Element Objects

-

For example, let's get a reference to the "status" div element by using document.getElementById(). Then confirm this by dynamically reading all the HTML in it using the innerHTML property.

-

(You can find all the things you can do with elements here.)

- - -
- - -
-

HTML Element Objects (cont'd)

-

You can also use innerHTML to replace what's already in an element.

- - - -
- - -
-

HTML Element Objects (cont'd)

-

Or let's dynamically swap out one image for another by updating the src attribute of an image tag.

- - -
- - - - -
-

However there is an easier way!

-

Typing document.getElementById() gets tedious after a while so many people will use a JavaScript library to make repetive tasks easier.

-

With the jQuery library:

-
-  document.getElementById("status")
-
-  document.getElementById("robot")
-
-


➞
-
-$("#status")
-
-$("#robot")
-
-
-

Just remember that it is still JavaScript under the hood!

-
- - -
-

Click to go to next section

-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/js_functions.html b/js_functions.html deleted file mode 100644 index 4b26804..0000000 --- a/js_functions.html +++ /dev/null @@ -1,723 +0,0 @@ - - - - - Ladies Learning Code - JavaScript March 18, 2012 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
-

JavaScript Part 2

-

Functions

-
- - -
-

Functions in JavaScript

-
-

Remember, functions are used to make the code "do things." It is especially useful for repetitive tasks.

-

- prompt() - and - alert() - are two functions that are pre-written into JavaScript. -

-

But sometimes you need to group tasks that aren't covered by one of the pre-written functions.

-

That's when we create our own!

-
- - -
-

Defining a Function

-

- To create a function, it needs to be defined - first. -

-

- There are different ways to define a function, but the most common way is using the - function keyword. -

-

- The keyword is followed by the function name, of your choosing, and round brackets (). And finally, the code to be executed are enclosed within curly braces { }. -

-
-function nameOfFunction() {
-  //code to execute
-}
-
-
- - -
-

Calling a Function

-

Let's define a function called sayMyName and use alert() to get the computer to "say" our names (functions can be used inside other functions too).

-

- Note that the code within a function doesn't execute until it's called. -

-
-

We've seen functions being called already!

-
-
- - -
-
-  //Here's the syntax again
-  function nameOfFunction() {
-    code to execute
-  }
-
-
- - -
-

Functions & Events

-

- The browser executes the JavaScript as soon as the page loads. -

-

- But sometimes you need to control when it executes, like when someone rolls over a navigation item or presses a Submit button, otherwise known as an event. -
-

-

This is another way functions are used.

- - -
-

Note: You can even use onclick() on any HTML element

-
-  <div onclick="sayMyName();">
-    Click here to call the function!
-  </div>
-
-

-
- - -
-

Who loves Ladies Learning Code?

-

Run it and see what happens!

- -
- - -
-

Mini-exercise (5-10 minutes):
- Quantities

-

Let's create a one-product shopping page where you can update the
- quantity by adding or removing it from the shopping cart.

-

Here's what it should look like:
- android-quantity

-
- - -
-

Mini-exercise (5-10 minutes):
- Quantities

-

Use the quantity variable to keep track of additions and subtractions to the running total.

-
-

1. The "Add" and "Remove" buttons haven't been clicked yet so quantity needs to be initialized to a default value first. Replace the asterix with your answer.
- 2. Use your knowledge of arithemetic operators and variable assignment to re-calculate the value of quantity.
- 3. Same as step 2 above.

-
- - -

If you get stuck, click here for the full solution.
Or if you want to reset, click here for the original code.

- -
- - -
-

Functions in Functions

-

- Let's take another look at our code and see what the functions are doing. -

-
-<script>
-  var quantity = 0; 
-    
-  function addItem() { 
-    quantity = quantity + 1;      
-    refreshTotal(); 
-  }
-  function removeItem(){  
-    quantity = quantity - 1; 
-    refreshTotal();  
-  }
-
-  function refreshTotal() {         
-    document.getElementById('updateQuantity').value = quantity;
-  }
-</script>
-
-<!-- HTML and CSS -->
-<link rel="stylesheet" href="http://pchen.github.com/LLC-JavaScript/exercises/slides.css" type="text/css" media="screen" />
-<div class="item">
-  <img src="http://pchen.github.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
-  <br />
-  <button onclick="addItem();">Add</button>
-  <button onclick="removeItem();">Remove</button>
-  <br />
-  Quantity
-  <input type="text" id="updateQuantity" value="0" readonly />
-  <br />
-  <br />
-  Total Cost:
-  <input type="text" id="updateTotal" value="0" readonly />
-</div>
-
-
- - -
-

Mini-exercise (5-10 minutes):
- Quantities and Total Cost

-

Let's re-visit the Quantities exercise and add a text field to show the total cost. If the Android plushie cost $20 each, how do we calculate the total cost?

- - - -
- - -
-

Review: What do we know about Functions so far?

-
-

› Created & defined by using the function keyword

-

› Used to group together related lines of code and store them into descriptive names

-

› Can be reused just by calling the function name

-

› Define the function first but it will not run until you call the function

-

› Can be used inside another function

-
- - -
-

Functions and Pizza

-

- Let's order a pizza!  The orderPizza() function below represents all the steps it takes to place an order (find the pizza place's phone number, call them, give them your address, etc). -

-

- Inside the function is where the pizza restaurant will hold our options choices (toppings, crust type and size of pizza). Now they can use this stored information to make our order. -

- -
- - -
-

More Pizza!

-

- What if we want to order another pizza but with different options? -
- Let's order another pizza by creating another function. -

- - - -
- - -
-

Global vs Local Variables

-

- Let's say the pizza place always want to include cheese as a basic topping in all of the pizzas. We can declare a - baseTopping - variable outside of the function so it can be accessible from anywhere in the program. -

- - - -
- -
-

Functions, Pizza and Parameters

-

- This could get cumbersome if we wanted to make a lot of pizzas.  How can we re-use the makePizza() function instead of creating multiple functions? We use parameters. -

-

- Functions can be used with one parameter, more than one parameter or none at all. -

- - - -
- - -
-

Review: Functions and Parameters

-

Functions are more flexible when used with parameters because variables can be passed into the function.

-

In the makePizza() function, the variables from inside the function were removed and added as parameters. Now when we call the function we can pass the values right into the function.

- function-parameters -
- -
-

Inline JavaScript

-

- JavaScript can appear - inline - in a webpage in several spots. Either in the - <head> - section or anywhere in the - <body> - section. -

- 
- <html>
- <head>
-   <title>JavaScript example!</title> 
-   
-   <script type="text/javascript">
-     alert("I'm in the head tag!");
-   </script>
-
- </head>
- <body>
-   <div id="example">This is an example.</div>
-
-   <script type="text/javascript">    
-     alert("I'm in the body tag!");
-   </script>
-
- </body>
-</html>
-
-
-

Need to manipulate an html tag or have a quick loading page? Put the JavaScript just before the - closing - <body> - tag.

-
-
- - -
-

Using a Code Editor

-

Go to the exercises folder and open up pizzaMaking.html
-(Psst: It's also in the ZIP folder that you downloaded earlier today.)

-
- Sublime Text 2 -
- Sublime Text -
-

-

Most computers are set to open .html files in the default web browser so right-click (Command+click or 2-finger click on Mac) and select the "open with..." option.

-
- - -
-

Using a Code Editor

-

Uh oh!

-

This is almost the same code as previous. Why isn't it making pizza? :( -

Spoiler! Click here to show answer if you really can't find it...
-
On line 16, there is a double quote missing before thin crust.
-

-

-

- Take note of how your code is being coloured. It's the first sign of a possible syntax error and will save you headaches later. -
- Some editors do a better job than others -- that's what you pay for sometimes. -

-
- -
-

Mini-exercise (now until lunch)
- Wing machine

-

1. Using pizzaMaking.html as an example, create a new .html file named wingMaking.html. -

2. Use inline JavaScript and write a new function that makes wings with these 3 variations:

- -

3. Use function parameters and a single function to make the job of creating multiple types and flavours of wings easier -- versus writing multiple wing making functions.

-

If you're really stuck, go to the solutions folder and open up wingMaking.html -

- - -
-

Click to go to next section

-
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/js_objects.html b/js_objects.html deleted file mode 100644 index 1aa4d2c..0000000 --- a/js_objects.html +++ /dev/null @@ -1,372 +0,0 @@ - - - - - Ladies Learning Code - JavaScript March 18, 2012 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - -
-

JavaScript Part 4

-

Objects

-
- - -
-

Objects

-

If variables are boxes, OBJECTS can be thought of as bento boxes -- "advanced variables" if you will.

-

A Real Bento Box

-
- - -
-

How Bento Boxes are like Objects

-



- - - - - - - - - -
- Rice box diagram -


- 		-

A basic variable only holds one value.

- 
var takeout = "Fried Rice";
-
- Bento Box diagram - -

An object holds a collection of values.

- 
// create a new object
-var bentobox = {};
-
-// fill it with stuff
-bentobox.main = "Teriyaki";
-bentobox.side = "Tempura";
-bentobox.salad = "Seaweed Salad";
-bentobox.soup = "Miso";
-bentobox.sauce = "Soya";
-bentobox.dessert = "Fruit";
-
-
- -
-

Creating an Object

-

Creating an object is easy. Just like any other variable, use the var keyword and give it a descriptive name.

-

But instead of assigning a single value right away, use these curly braces to make an empty object.

-

var bentobox = {};

-

Yes, it's weird but think about the {} as a sort of funky container.

-
- -
-

Object Properties

-

The "compartments" of objects are called PROPERTIES.

-

If you already have an existing object, there are a few ways to access and set a value to a property. Since these two are very commonly used, they will both be discussed.

- - - - - - - - - - - - -
- Dot notation:
-myObject.property = value; -

-
-bentobox.main = "Teriyaki";
-bentobox.side = "Tempura";
-
-		 - Key-Value Lookup:
- myObject[key] = value; -
-
-
-bentobox["main"] = "Teriyaki";
-bentobox["side"] = "Tempura";
-
- -This will be most useful after you understand arrays. Advantage: -You can use concatenation with the key string in order to do look up something that's partially dynamic: -
-
-bentobox.soup0 = "Miso";
-bentobox.soup1 = "Udon";
- 		-
-bentobox["soup"+1] = "Miso";
-bentobox["soup"+2] = "Udon";
-
-


-

Advanced sidenote:
-Alternatively, you can both declare an object and set it's values at the same time:
-var bentobox = { soup:"Miso", main:"Teriyaki" };

-
- -
-

Why use Objects?

-

Advanced topic: Objects are useful because you group all these properties together and you can reuse the object over again.

-

There's an expectation of what you'll get in a bento box.
-
-Some items are fixed (a fruit dessert, a miso soup) but some compartments can be edited (a gyoza side versus tempura).

- - - - - -
Bento box variation #1Bento box variation #2
-
- - -
-

Think of Everything as an Object*

-

When I said that objects were "advanced variables", here's another way of looking at it:

-

All JavaScript variables can be treated like objects too.

-
-

If curly braces are a container for a generic object, quotes are containers for characters. When we get to arrays next, you'll see that it uses square brackets. (The only "uncontainered" object we've introduced today was a number.)

-
-
- 
var stringObject = “ ”;
-var arrayObject = [ ];
-
-

Some objects are simpler than others but almost everything in JavaScript has properties available to us.

-

*Again, I need to oversimplify. The concept called DATA TYPE is a hairy topic. For more info: http://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/ and http://www.2ality.com/2011/03/javascript-values-not-everything-is.html

-
- - -
-

Built-in JavaScript Properties

-

In this workshop we won't be creating any of our own objects but JavaScript already has many objects built into the language.

-

Let's look at a string object and the length property which returns the number of characters in a string. Try putting your own name in here.

- -
- - -
-

Functions in Objects

-

Previously, we talked about functions as blocks of re-usable code. This might sound crazy but you can store functions in variables too!

- - - - - - - - - - - - - - - - -
- This function... -
-function sayHello(){
-  document.write("hello");
-}
-
-sayHello();
-
-
-

- ➞ - 		- is the same as: -
-sayHello = function() {
-  document.write("hello");
-}
-
-sayHello();
-
-
- - ↆ
- - - But now look at this! -
-var welcomeTeam = {};
-welcomeTeam.sayHello = function() {
-  document.write("hello");
-}
-welcomeTeam.sayHello();
-
-
-
- - -
-

Object Methods

-

When a function is associated with an object we call it a METHOD.

-

Let's say you're having a robot sale! Everything is 50% off. But, after doing the math, you notice that the sale price is a bit off.. Let's declare a sale price and manipulate it using toFixed(). When you use a method, it gives you access to all the hard work that someone else did and it only takes you one line to use it!

- - - -
- - - -
-

Object Methods

-

Here's another METHOD associated with strings.

-

Have you ever created an email newsletter? You usually have a template but you want to replace [First Name] with someone's actual name. Use .replace() for that!

- - - -
- - -
-

Looking up properties and references

-

length and toFixed() are only two of many (many!) more built-in properties and methods of objects in JavaScript.

-

Check out this list: http://www.scribd.com/doc/19457597/Javascript-Methods.

-

Or this cheatsheet: http://www.addedbytes.com/download/javascript-cheat-sheet-v1/png.

-
- - -
-

Click to go to next section

-
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/js_quick_start.html b/js_quick_start.html deleted file mode 100644 index 9e3a534..0000000 --- a/js_quick_start.html +++ /dev/null @@ -1,786 +0,0 @@ - - - - - Ladies Learning Code - JavaScript Oct 13, 2012 - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
-

JavaScript Part 1

-

Getting started with an intro to functions,
- variables and operators

-
- - -
-

As the owner of the thriving store, Planet Robots, you have to make sure you have a top notch website.

-
- planet-robots -
-
- - -
-

JavaScript Exercise Overview

-
-

You'll want to do things like offer online shopping and print shipping labels!

-

You'll also want to make sure that everything works properly as well.

-

That means customers can't submit empty forms and product totals are calculated properly in their shopping carts.

-

In order to create a website that can handle these requirements, we will need to learn how to use functions, variables, and conditionals.

-
- - -
-

Intro to Functions

-

- What is something that you do that's very repetitive or a hassle? Wouldn't it be great if it was automated? Or at least hidden away? -

- - - - - - - - - - - - -
Paying for parking:
- The old way - thumb-down - - The improved way - thumb-up -
-
    -
  1. Find bank machine
    2. -
  2. Pull out bank card
    3. -
  3. Get money out from ATM
    4. -
  4. Buy chips so you can make change
    5. -
  5. Put change into machine
    6. -
  6. Take receipt
    7. -
- 		-
    -
  1. Pull the PayPass credit card from your wallet
    2. -
  2. Tap
    3. -
  3. Take receipt
    4. -
-
-
- - -
-

Intro to Functions

-

- In the improved way, we can think of step 2 as a function. We can't see all the steps that happen but we know that if we perform the action of tapping the card, it will execute some instructions that will allow us to pay with the card. -

- - - - - - - -
- The improved way - thumb-up -
-
    -
  1. Pull the PayPass credit card from your wallet
    2. -
  2. Tap
    3. -
  3. Take receipt
    4. -
-
-
- - -
-

Intro to Functions

-
-

Functions are used to make the code "do things."

-

To get the function to execute, you have to call the function by using the function name followed by round brackets.

-

If the credit card tap was a function in JavaScript, it could look something like this:

-

tapCard()

-
- -
-

Intro to Functions

-

We can create our own functions but there are already some handy ones built into JavaScript. There are three functions that are useful for testing and writing code.

-

- prompt() and alert() show popups in the browser. - document.write() outputs text onto the page, aka the document. -

- -
- - -
-

Comments

-

- Sometimes you want to write notes to yourself (and others!!) to organize blocks of code or leave explanations. Use comments! JavaScript will ignore comments and not execute them. -

-
-// This is how you leave a single line comment.
-
-// You can write many single line comments.
-// Just make sure to add the double slash
-// for every new line.
-
-

Here's another way to comment larger blocks of text.

-
-/* This is how you leave
-multi-line comments for when you
-want to write a longer message */
-
-

Multi-line comments are great for "hiding" large blocks of code so you can try something new without erasing your old code.

-
- - -
-

Variables

-
-

Variables are like containers or a box. They are used to store values so you can use them later on, when you need them.

-

-
- - -
-

Variables How-to

-

Declare variables with the keyword var.

- 
var email;
-

Assign a value to the variable using the equals (=) sign.

- 
email = "hello@christinatruong.com";
-

Now the computer will remember my email address!

-
-

Take note that the value of the variable is written between quotes.
- More on this soon.

-
-
- - -
-

Variables (cont'd)

-
-

computer-memoryVariables are also like the computer's short-term memory. It doesn't remember anything unless you tell it to. In this example, the computer can't remember any one's name!

-

But it can remember if we use a variable.

- - -
- - -
-

Variables (cont'd)

-
-

- In a web checkout form that asks for your name and address, variables can be used to store this information. - The stored information can then be used to create things like shipping labels.

-
-

- -

-
- - - -
-

Aside: Statements

-

End a statement with a semicolon (;).

-

Statements are commands that tell the computer what to do. -
- Ending the statement with a semicolon is like ending a sentence -
- with a period. It tells the computer that the statement is done. -

-

You can also declare a variable and its value in one statement.

-
var email;
-email = "hello@christinatruong.com";
-
-
var email = "hello@christinatruong.com";
-
- - - -
-

Variables: Say My Name

-
-

Let's try creating some variables.

-

Below is an example of a variable for your name. Try creating another variable for your email address. Output the values using document.write().

- - -
- - -
-

Assigning Variables

-
-

IMPORTANT!

- -

Using the equals (=) symbol in Javascript is NOT the same as in math.

- -

var total = 1 + 1 means:
- evaluate everything to the right of the equals sign (e.g. 1 + 1), -
then assign this value (e.g. the number 2) to the variable on the left side. -

- -

You will see later that we can re-assign new values to an existing variable.

- -

- total = 1 + 1 - is not the same as - 1 + 1 = 2 -

-
- - -
-

Various Variables

-

Variables can hold different kinds of values. We've been using strings so far but variables can also hold other kinds of values.

-

1. Numeric variable (integers & decimals)

-
-var someIntegerNumber = 10;
-var someDecimalNumber = 10.5;
-
-

2. Boolean variable (true/false)

-
-var isSaturday = false;
-var isSunday = true;
-
-

3. String variable (letters, words & sentences)

-
-var singleWordString = "hello";
-var sentenceString = "Hello, good day to you!";
-var numberString = "10";
-
-
-

Only string values are written inside single or double quotes ('string' or "string").

-
-
-
- - -
-

Variables: Tips & Best Practices

-

Variables can't contain spaces. Use a convention called camel case. -
Every new word is capitalized and the result looks likeCamelHumps. -

-

JavaScript is case sensitive (uppercase and lowercase letters are treated differently) so variable names are also case sensitive.

-

Another convention is to use underscores to_separate_words. This is common in other programming languages (like PHP).

- -
- - -
-
-

Variables: Tips & Best Practices

-

- When naming a variable, it's best to give it a descriptive name. -

-

- It makes it easier to see, at a glance, what kind of value that variable is going to hold. -

-

- This is especially useful when sharing code with others who may not use the same kinds of abbreviations. -

-

- var firstName; ← Clear that first name will go here. -
- var fn;        ← Not as obvious as firstName. -
- var x;         ← Not clear at all. -

-
- - -
-

Variables: Tips & Best Practices

-

- Variables cannot start with a number or any special characters except for underscores (_) and dollar signs ($). -

-
-

Although it's valid to use underscore or a dollar sign, they should only be used in special circumstances. -

-
-
- - -
- - -
-

Whitespace in JavaScript

-

- Whitespace refers to blank characters and includes spaces, tabs and line breaks. -

-

JavaScript ignores whitespace except when used in a string.

-
-// both statements are the same to JavaScript
-var name="Christina";
-var name = "Christina";
-
- -
- - -
-

Getting user input

-

- So far we've been assigning the values to our variables. But what if we don't know what that value is going to be? -

-

- Remember prompt()? This function triggers a popup box that allows user input. We can assign the prompt to a variable, thus saving the value of the user input. -

- -
- - - -
-

Mini-exercise (5-10 minutes):
- Simple Shipping Label

-

- Here's a simple shipping information request form via popup prompts. Right now, after you press Run, the confirmation shipping label is blank. How do we fix this? -

-
-

1. Use variables to store your name and address.
- 2a. & 2b. To verify that your variables are working, uncomment out the document.write() lines and replace ********** with the actual name of your variables. -

-
- -

If you get stuck, click here for the full solution.
Or if you want to reset, click here for the original code.

-
- - - -
-

JavaScript Arithmetic Operators

-

We can also use JavaScript to do math using arithmetic operators.

-

Arithmetic operators in JavaScript are (+) for addition, (-) for subtraction, (*) for multiplication and (\) for division.

- -
- - -
-

Arithmetic Operators and Variables

-

Getting JavaScript to do math can be very useful.
- For example, we can use it to calculate totals in a shopping cart form.

-

Instead of using just numbers, JavaScript can do math using variables with numerical values.

- - -
- - -
-

Mini-exercise (5-10 minutes):
- Totals and Discounts

-

Let's pretend that someone has checked out of our online store intending to buy 1 t-shirt and 1 Android plushie. Apply some arithmetic operations to get the final total after applying a discount.

-
-

1. Calculate the sub-total given tshirtPrice and androidPrice. -
- 2. Calcuate the discount amount given the sub-total and discountPercentage. -
- 3. Calcuate the final total given the sub-total and discount amount. -

-
-
-

addition (+), subtraction (-), multiplication (*), division (/)

-
-
- -

If you get stuck, click here for the full solution.
Or if you want to reset, click here for the original code.

-
- - - -
-

Arithmetic Operators: Numbers vs. Strings

-

Remember how there are different variable types? Arithmetic operators can only be performed on numerical values.

-

But numbers can come disguised as strings so be careful!

-

When the addition (+) operator is used on strings, it doesn't "add" values, it concatenates them.

- - -
- - -
-

Concatenation

-

Unlike the other arithmetic operators, the (+) symbol has another purpose other than adding numbers. It is used to join strings together, also known as concatenation. You can concatenate variables, strings or a combination of both.

- -
- - - -
-

Concatenation and Strings

-

If you use the (+) operator with only numerical values, it will add the values. Otherwise, it will combine the outputs as a string.

- -
- - - -
-

Concatenation Practice

-

Let's practice concatenating using variables and strings.

- - -
- - -
-

Re-assigning Variables

-

Even after a value has been set for the first time, we can still overwrite it and - re-assign a new value.

-

For example, we may want to increase or decrease values.

- -
- - - -
-

Click to go to next section

-
- - -
- - -
(Use the left and right arrow keys on your keyboard to navigate.)
- - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/lunch_break.html b/lunch_break.html deleted file mode 100644 index bfea476..0000000 --- a/lunch_break.html +++ /dev/null @@ -1,136 +0,0 @@ - - - - - Ladies Learning Code - JavaScript March 18, 2012 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
-

Regroup Before Lunch

-

Learn from our mistakes!

-

Name something that you did while writing code that caused an error. What were you attempting to do and what were your assumptions when doing it? How did you fix it?

-

- What are some questions or issues you are having with the material covered so far? -

-
- - - -
-

Lunch time!

-

Come back in an hour.

-

While you're resting your brain, check out the next couple of slides for great examples of JavaScript.

-

(Even try turning off your JavaScript to see how boring the web gets.)

-
- - -
-

Some JavaScript Inspiration...

-

(Note: Requires use of your laptop camera for head tracking!)

-

- - Cirque du Soleil's Movi Kanti Revo

-
- - -
-

Some JavaScript Inspiration...

-

And check out 30 top examples of JavaScript compiled by Creative Bloq.

-

- - NFB's One Millionth Tower

-
- - -
-

The Ladies Learning Code Mentors

-

(Aren't they awesome?)

-
- - -
-

Now Back To Your Regularly Programmed Workshop...

-
- - -
-

Click to go to next section

-
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/photoslider/assets/flickr-500.jpg b/photoslider/assets/flickr-500.jpg new file mode 100755 index 0000000..1a72e2c Binary files /dev/null and b/photoslider/assets/flickr-500.jpg differ diff --git a/photoslider/assignment.zip b/photoslider/assignment.zip new file mode 100755 index 0000000..11f35f9 Binary files /dev/null and b/photoslider/assignment.zip differ diff --git a/photoslider/assignment/1.jpg b/photoslider/assignment/1.jpg new file mode 100755 index 0000000..2d350e7 Binary files /dev/null and b/photoslider/assignment/1.jpg differ diff --git a/photoslider/assignment/2.jpg b/photoslider/assignment/2.jpg new file mode 100755 index 0000000..4c05bb7 Binary files /dev/null and b/photoslider/assignment/2.jpg differ diff --git a/photoslider/assignment/3.jpg b/photoslider/assignment/3.jpg new file mode 100755 index 0000000..c6222f5 Binary files /dev/null and b/photoslider/assignment/3.jpg differ diff --git a/photoslider/assignment/4.jpg b/photoslider/assignment/4.jpg new file mode 100755 index 0000000..58af5ab Binary files /dev/null and b/photoslider/assignment/4.jpg differ diff --git a/photoslider/assignment/5.jpg b/photoslider/assignment/5.jpg new file mode 100755 index 0000000..931c4bc Binary files /dev/null and b/photoslider/assignment/5.jpg differ diff --git a/photoslider/assignment/left.png b/photoslider/assignment/left.png new file mode 100755 index 0000000..2c6e1c1 Binary files /dev/null and b/photoslider/assignment/left.png differ diff --git a/photoslider/assignment/photos.css b/photoslider/assignment/photos.css new file mode 100755 index 0000000..991e027 --- /dev/null +++ b/photoslider/assignment/photos.css @@ -0,0 +1,49 @@ +html,body { + background: #333; + color: #FFF; + font-size: 14px; + font-family: Geneva, Arial, Helvetica, sans-serif; +} + +#wrapper { + width: 560px; + margin: 40px auto; + text-align: middle; +} + +.image-holder img { + width: 500px; + height: 375px; +} + +#main { + + color: black; +} + +#main div { + width: 560px; /*add padding to 500px*/ + height: 465px; /*add padding to 375px*/ + padding-top: 30px; + text-align: center; + background-color: white; + overflow: hidden; + margin-bottom: 30px; +} + +.show { + display: block; +} + +.hide { + display: none; +} + +nav { + width: 135px; + margin: 10px auto; +} + +#next, #previous { + cursor: pointer; +} \ No newline at end of file diff --git a/photoslider/assignment/photos.html b/photoslider/assignment/photos.html new file mode 100755 index 0000000..21a6a9f --- /dev/null +++ b/photoslider/assignment/photos.html @@ -0,0 +1,56 @@ + + + + Things I Like + + + + +
+ +
+
+ I like cupcakes! +
+
+ ...and more cupcakes +
+
+ Lots of cupcakes! +
+
+ So much sugar! +
+
+ mmmmm +
+
+ + + +
+ + + + \ No newline at end of file diff --git a/photoslider/assignment/right.png b/photoslider/assignment/right.png new file mode 100755 index 0000000..a41097f Binary files /dev/null and b/photoslider/assignment/right.png differ diff --git a/photoslider/css/common.css b/photoslider/css/common.css new file mode 100755 index 0000000..f638cfc --- /dev/null +++ b/photoslider/css/common.css @@ -0,0 +1,101 @@ +#speaker-note { + position:absolute; + left: 0; + top: 80%; + width: 100%; + height: 20%; + z-index: 8; + opacity: 0.75; + background-color: white; + overflow: auto; + padding: 2px 20px; + -webkit-transition: top 0.5s ease-in-out; + -moz-transition: top 0.5s ease-in-out; + -o-transition: top 0.5s ease-in-out; + transition: top 0.5s ease-in-out; +} +#speaker-note.invisible { + top: 101%; +} +.sidebar { + z-index: 999; + box-sizing: border-box; + height: 100%; + overflow: hidden; + top: 0; + position: absolute; + display: block; + margin: 0; + padding: 10px 16px; + overflow: auto; + -webkit-transition: margin 0.2s ease-in-out; + -moz-transition: margin 0.2s ease-in-out; + -o-transition: margin 0.2s ease-in-out; + transition: margin 0.2s ease-in-out; +} +.sidebar.invisible { + margin-left: -400px; +} +.sidebar table { + border-collapse: collapse; +} +.sidebar caption { + text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px; + font-size: 24px; + font-weight: bold; + line-height: 55px; +} +.sidebar tr { + margin: 2px 0; + border-bottom: 1px solid #CCC; +} +.sidebar th{ + text-align: left; + max-width: 300px; +} +.sidebar td { + text-align: right; + padding-left: 20px; + padding-right: 5px; + font-family: Monospace; +} + +nav#helpers { + border-top-left-radius: 5px; + border-top-right-radius: 5px; + text-align: center; + position: fixed; + bottom: 0; + z-index: 10; + left: 50%; + margin-left: -200px; + width: 400px; + background-color: black; + opacity: 0.1; +} +nav#helpers:hover { + opacity: 0.5; +} +nav#helpers button { + background: none; + border: none; + color: white; + cursor: pointer; +} +.toc { + font-size: 10px; + position: relative; + top: -3px; +} +nav#helpers button#slide-no { + font-size: 10px; + border: 1px solid white; + padding: 4px; + margin-bottom: 4px; +} +#nav-next { + margin-right: 20px; +} +menu { + display: inline; +} diff --git a/photoslider/css/default.css b/photoslider/css/default.css new file mode 100755 index 0000000..d75deb6 --- /dev/null +++ b/photoslider/css/default.css @@ -0,0 +1,552 @@ +/** + * HTML5 Slide Deck Theme - Moon + * Author: Eric Bidelman + */ + +body { + font-family: 'Istok Web', Arial, sans-serif; + font-size: 16px; + padding: 0; + margin: 0; + width: 100%; + height: 100%; + position: absolute; + left: 0px; top: 0px; + -webkit-font-smoothing: antialiased; +} + +.presentation { + position: absolute; + height: 100%; + width: 100%; + left: 0px; + top: 0px; + display: block; + overflow: hidden; + background: #fff; + background: url(../../assets/ladieslearningcode-125x125.gif) 10px top no-repeat; + border-top: 15px #b1009a solid; +} + +.slides { + width: 100%; + height: 100%; + left: 0; + top: 0; + position: absolute; + display: none; + -webkit-transition: -webkit-transform 1.5s ease-in-out; + -moz-transition: -moz-transform 1.5s ease-in-out; + -o-transition: -o-transform 1.5s ease-in-out; + transition: transform 1.5s ease-in-out; +} + +.slide { + display: none; + position: absolute; + overflow: hidden; + width: 900px; + height: 700px; + left: 50%; + top: 50%; + margin-top: -350px; + background-color: #fff; + border: 3px solid #b1009a; + border-radius: 10px; + -moz-border-radius: 10px; + opacity: 0.35; + + -webkit-transform: scale(0.8) translateZ(0); + -moz-transform: scale(0.8); + -o-transform: scale(0.8); + + -webkit-transition-property: margin, -webkit-transform, opacity; + -webkit-transition-duration: 0.3s, 0.3s, 0.3s; + -webkit-transition-timing-function: ease-in-out; + + -moz-transition-property: margin, -moz-transform, opacity; + -moz-transition-duration: 0.3s, 0.3s, 0.3s; + -moz-transition-timing-function: ease-in-out; + + -o-transition-property: margin, -moz-transform, opacity; + -o-transition-duration: 0.3s, 0.3s, 0.3s; + -o-transition-timing-function: ease-in-out; + + /* NOTE(slightlyoff): simpler animations for slower boxes */ + /* + -webkit-transition: margin 0.3s ease-in-out; + -moz-transition: margin 0.3s ease-in-out; + -o-transition: margin 0.3s ease-in-out; + */ +} + +.slide:nth-child(even) { + border-radius: 10px 30px 10px 30px; + -moz-border-radius: 10px 20px 10px 20px; +} + +.slide:nth-child(odd) { + border-radius: 20px 10px 20px 10px; + -moz-border-radius: 20px 10px 20px 10px; +} + +.slide p, .slide li, .slide textarea { + font-size: 20px; +} + +.slide ul li { + list-style: circle; +} + +.slide ol li { + list-style-type:inherit; +} + +ol p { + font: normal .8em Arial, Helvetica, sans-serif; + color: #000000; +} + + +.slide .small { + font-size: 16px; +} + +.slide .counter { + color: #999999; + position: absolute; + left: 20px; + bottom: 20px; + display: block; + font-size: 12px; + width: 100%; +} + +.slide:not(.transitionSlide) .counter:after { + content: ''; + width: 32px; + height: 32px; + background-repeat: no-repeat; + background-position: right bottom; + position: absolute; + bottom: 0; + right: 45px; + opacity: 0.25; +} + +.slide.title > .counter, +.slide.segue > .counter, +.slide.mainTitle > .counter { + display: none; +} + +.slide.transitionSlide h2 { + font-size: 40px; + margin: 0; + line-height: 10px; +} +.slide.transitionSlide p { + margin: 0; +} + +.slide.transitionSlide img { + opacity: 0.25; + width: 64px; + height: 64px; +} + +.vbox { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-box-align: stretch; + + display: -moz-box; + -moz-box-orient: vertical; + -moz-box-align: stretch; + + display: box; + box-orient: vertical; + box-align: stretch; +} + +.hbox { + display: -webkit-box; + -webkit-box-orient: horizontal; + -webkit-box-align: stretch; + + display: -moz-box; + -moz-box-orient: horizontal; + -moz-box-align: stretch; + + display: box; + box-orient: horizontal; + box-align: stretch; +} + +.flex { + -webkit-box-flex: 1; + -moz-box-flex: 1; + box-flex: 1; +} + +.noflex { + -webkit-box-flex: 0; + -moz-box-flex: 0; + box-flex: 0; +} + +.boxcenter { + -webkit-box-pack: center; + -moz-box-pack: center; + box-pack: center; +} + +.slide.far-past { + display: block; + margin-left: -2400px; +} + +.slide.past { + visibility: visible; + display: block; + margin-left: -1400px; +} + +.slide.current { + visibility: visible; + display: block; + margin-left: -450px; + -webkit-transform: scale(1.0); + -moz-transform: scale(1.0); + -o-transform: scale(1.0); + opacity: 1.0; +} + +.slide.future { + visibility: visible; + display: block; + margin-left: 500px; +} + +.slide.far-future { + display: block; + margin-left: 1500px; +} + +body.three-d div.presentation { + /*background: -webkit-gradient(radial, 50% 50%, 10, 50% 50%, 1000, from(#333), to(#000)); */ +} + +body.three-d div.slides { + -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg); + -moz-transform: translateX(50px) scale(0.8) rotateY(10deg); + -o-transform: translateX(50px) scale(0.8) rotateY(10deg); + transform: translateX(50px) scale(0.8) rotateY(10deg); +} + +/* Content */ +/* + Font sizes: + header h1 - 50px + h2, p - 20px + default, pre, input - 16px +*/ + +@font-face { + font-family: 'Inconsolata'; + font-style: normal; + font-weight: normal; + src: url('src/fonts/inconsolata/Inconsolata.ttf') format('truetype'); +} + +header { + font-family: 'Podkova', Arial; + font-weight: normal; + letter-spacing: -.05em; + color: #b1009a; + font-weight: normal; + text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px; + position: absolute; + left: 30px; + top: 25px; + margin: 0; + padding: 0; + font-size: 50px; +} + +h1 { + font-size: 100%; + display: inline; + font-weight: normal; + padding: 0; + margin: 0; +} + +h2 { + font-family: 'Podkova', Arial; + color: black; + font-size: 20px; + padding: 0; + margin: 15px 0 5px 0; +} + +h2:first-child { + margin-top: 0; +} + +section, footer { + font-family: 'Istok Web', Arial; + font-weight: normal; + color: #333; + text-shadow: white 0px 1px 0px, rgba(0, 0, 0, 0.2) 0 2px 5px; + margin: 100px 30px 0; + display: block; + overflow: hidden; +} + +footer { + font-size: 12px; + margin: 20px 0 0 30px; +} + +a { + color: inherit; + display: inline-block; + text-decoration: none; + line-height: 110%; + border-bottom: 2px solid #3f3f3f; +} + +.gmap a { + line-height: 100%; + border-bottom: none; +} + +li { + list-style: none; + padding: 10px 0; +} + +button { + font-size: 20px; +} + +pre button { + margin: 2px; +} + +.summary { + font-size: 30px; +} + +.bullets { + font-size: 40px; +} + +section.left { + float: left; + width: 390px; +} + +section.small { + font-size: 24px; +} + +section.small ul { + margin: 0 0 0 15px; + padding: 0; +} + +section.small li { + padding-bottom: 0; +} + +section.middle { + line-height: 68px; + text-align: center; + display: table-cell; + vertical-align: middle; + height: 700px; + width: 900px; +} + +pre { + font: 'Inconsolata'; + color: #000; + text-align: left; + padding: 10px 20px; + border-radius: 10px; + background: rgba(255, 204, 0, 0.05); + border: 2px solid rgba(255, 204, 0, 0.3); + /*text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;*/ +} + +pre select { + font-family: Monaco, Courier; + border: 1px solid #c61800; +} + +input { + font-size: 16px; + margin-right: 10px; + font-family: Helvetica; + padding: 3px 5px; +} +input[type="range"] { + width: 100%; +} + +button { + font-family: Verdana; +} + +button.large { + font-size: 32px; +} + +pre b { + font-weight: normal; + color: #c61800; + text-shadow: #c61800 0 0 1px; + /*letter-spacing: -1px;*/ +} +pre em { + font-weight: normal; + font-style: normal; + color: #18a600; + text-shadow: #18a600 0 0 1px; +} +pre input[type="range"] { + height: 6px; + cursor: pointer; + width: auto; +} + +div.example { + display: block; + padding: 10px 20px; + color: black; + background: rgba(255, 255, 255, 0.4); + -webkit-border-radius: 8px; + -khtml-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + margin-bottom: 10px; + border: 1px solid rgba(0, 0, 0, 0.2); +} + +video { + -moz-border-radius: 8px; + -khtml-border-radius: 8px; + -webkit-border-radius: 8px; + border-radius: 8px; + border: 1px solid rgba(0, 0, 0, 0.2); +} + +.css, +.js, +.html, +.key { + font-family: 'Inconsolata'; + color: black; + display: inline-block; + padding: 6px 10px 3px 10px; + font-size: 25px; + line-height: 30px; + text-shadow: none; + letter-spacing: 0; + bottom: 10px; + position: relative; + -moz-border-radius: 10px; + -khtml-border-radius: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; + background: white; + box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; + -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; + -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; + -o-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px; +} + +.key { font-family: "Lucida console", Monospace, Arial; } + +:not(header) > .css, +:not(header) > .js, +:not(header) > .html, +:not(header) > .key { + margin: 0 5px; + bottom: 4px; +} + +.css { + background: -webkit-gradient(linear, left top, left bottom, from(#ff4), to(#ffa)); + background-color: #ff4; + background: -moz-linear-gradient(left top, #ff4, #ffa); +} +.js { + background: -webkit-gradient(linear, left top, left bottom, from(#4f4), to(#afa)); + background-color: #4f4; + background: -moz-linear-gradient(left top, #4f4, #afa); +} +.html { + background: -webkit-gradient(linear, left top, left bottom, from(#e88), to(#fee)); + background-color: #e88; + background: -moz-linear-gradient(left top, #e88, #fee); +} + +.two-column { + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; +} + +.summary li::before, .bullets li::before { + content: '· '; +} + +.stroke { + -webkit-text-stroke-color: red; + -webkit-text-stroke-width: 1px; +} /* currently webkit-only */ + +.center { + text-align: center; +} + +.formula { + font-size: 50px; +} + +#presentation-counter { + color: #fff; + font: 100px Arial; + letter-spacing: 1px; + position: relative; + top: 40%; + width: 100%; + text-align: center; +} + +.hsl-value { + display: inline-block; + width: 50px; +} + +[data-build] > * { + -webkit-transition: opacity 0.5s ease-in-out 0.2s; + -moz-transition: opacity 0.5s ease-in-out 0.2s; + -o-transition: opacity 0.5s ease-in-out 0.2s; +} + +[data-build] > *.to-build { + opacity: 0; +} + +.sidebar { + background-color: #F3F3F3; + border-right: 5px solid #987; +} + +a .try { + font-weight: normal; +} \ No newline at end of file diff --git a/photoslider/css/sea_wave.css b/photoslider/css/sea_wave.css new file mode 100755 index 0000000..238c304 --- /dev/null +++ b/photoslider/css/sea_wave.css @@ -0,0 +1,529 @@ +body { + font: 16px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; + padding: 0; + margin: 0; + width: 100%; + height: 100%; + position: absolute; + left: 0px; top: 0px; +} + +.presentation { + position: absolute; + height: 100%; + width: 100%; + left: 0px; + top: 0px; + display: block; + overflow: hidden; + background: #778; + background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#01386b)); + background: -moz-linear-gradient(top, #fff, #01386b); +} + +.slides { + width: 100%; + height: 100%; + left: 0; + top: 0; + position: absolute; + display: none; + -webkit-transition: -webkit-transform 1s ease-in-out; + -moz-transition: -moz-transform 1s ease-in-out; + -o-transition: -o-transform 1s ease-in-out; + transition: transform 1s ease-in-out; +} + +.slide { + display: none; + position: absolute; + overflow: hidden; + width: 900px; + height: 700px; + left: 50%; + top: 50%; + margin-top: -350px; + border-radius: 10px; + border: 2px solid #aaa; + background-color: #fff; + -webkit-transition: margin 0.25s ease-in-out; + -moz-transition: margin 0.25s ease-in-out; + -o-transition: margin-left 0.25s ease-in-out; + transition: margin 0.25s ease-in-out; +} + +.slide:nth-child(even) { +} + +.slide:nth-child(odd) { +} + +.slide p, .slide textarea { + font-size: 20px; +} + +.slide .counter { + color: #999999; + position: absolute; + left: 20px; + bottom: 20px; + display: block; + font-size: 12px; + width: 100%; +} + +.slide:not(.transitionSlide) .counter:after { + content: ''; + width: 32px; + height: 32px; + background-repeat: no-repeat; + background-position: right bottom; + position: absolute; + bottom: 0; + right: 45px; + opacity: 0.25; +} + +.offline-storage .counter:after { + background-image: url(http://www.html5rocks.com/static/images/identity/classes_32/HTML5_Offline_Storage_32.png); +} + +.device-access .counter:after{ + background-image: url(http://www.html5rocks.com/static/images/identity/classes_32/HTML5_Device_Access_32.png); +} + +.realtime-communication .counter:after { + background-image: url(http://www.html5rocks.com/static/images/identity/classes_32/HTML5_Connectivity_32.png); +} + +.performance .counter:after { + background-image: url(http://www.html5rocks.com/static/images/identity/classes_32/HTML5_Performance_32.png); +} + +.semantics .counter:after { + background-image: url(http://www.html5rocks.com/static/images/identity/classes_32/HTML5_Semantics_32.png); +} + +.multimedia .counter:after { + background: url(http://www.html5rocks.com/static/images/identity/classes_32/HTML5_MultiMedia_32.png); +} + +.effects .counter:after { + background: url(http://www.html5rocks.com/static/images/identity/classes_32/HTML5_3D_Effects_32.png); +} + +.styling .counter:after { + background: url(http://www.html5rocks.com/static/images/identity/classes_32/HTML5_Styling_32.png); +} + +.slide.title > .counter, +.slide.segue > .counter, +.slide.mainTitle > .counter { + display: none; +} + +.slide.transitionSlide h2 { + font-size: 40px; + margin: 0; + line-height: 10px; +} +.slide.transitionSlide p { + margin: 0; +} + +.slide.transitionSlide img { + opacity: 0.25; + width: 64px; + height: 64px; +} + +.vbox { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-box-align: stretch; + + display: -moz-box; + -moz-box-orient: vertical; + -moz-box-align: stretch; + + display: box; + box-orient: vertical; + box-align: stretch; +} + +.hbox { + display: -webkit-box; + -webkit-box-orient: horizontal; + -webkit-box-align: stretch; + + display: -moz-box; + -moz-box-orient: horizontal; + -moz-box-align: stretch; + + display: box; + box-orient: horizontal; + box-align: stretch; +} + +.flex { + -webkit-box-flex: 1; + -moz-box-flex: 1; + box-flex: 1; +} + +.noflex { + -webkit-box-flex: 0; + -moz-box-flex: 0; + box-flex: 0; +} + +.boxcenter { + -webkit-box-pack: center; + -moz-box-pack: center; + box-pack: center; +} + +.slide.far-past { + display: block; + margin-left: -2400px; +} + +.slide.past { + visibility: visible; + display: block; + margin-left: -1400px; +} + +.slide.current { + visibility: visible; + display: block; + margin-left: -450px; +} + +.slide.future { + visibility: visible; + display: block; + margin-left: 500px; +} + +.slide.far-future { + display: block; + margin-left: 1500px; +} + +body.three-d div.presentation { + /*background: -webkit-gradient(radial, 50% 50%, 10, 50% 50%, 1000, from(#333), to(#000)); */ +} + +body.three-d div.slides { + -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg); + -moz-transform: translateX(50px) scale(0.8) rotateY(10deg); + -o-transform: translateX(50px) scale(0.8) rotateY(10deg); + transform: translateX(50px) scale(0.8) rotateY(10deg); +} + +/* Content */ +/* + Font sizes: + header h1 - 50px + h2, p - 20px + default, pre, input - 16px +*/ + +@font-face { + font-family: 'JunctionRegular'; + src: url('/src/fonts/junction02/junction02-webfont.eot'); + src: local('☺'), url('/src/fonts/junction02/junction02-webfont.woff') format('woff'), url('/src/fonts/junction02/junction02-webfont.ttf') format('truetype'), url('/src/fonts/junction02/junction02-webfont.svg#webfontwzJOjWvv') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'LeagueGothicRegular'; + src: url('/src/fonts/leaguegothic/leaguegothic-webfont.eot'); + src: local('☺'), url('/src/fonts/leaguegothic/leaguegothic-webfont.woff') format('woff'), url('/src/fonts/leaguegothic/leaguegothic-webfont.ttf') format('truetype'), url('/src/fonts/leaguegothic/leaguegothic-webfont.svg#webfontWgfhmMGx') format('svg'); + font-weight: normal; + font-style: normal; +} + +header { + color: #0055ab; + font-weight: normal; + text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px; + font-family: Arial; + letter-spacing: -.05em; + position: absolute; + left: 30px; + top: 25px; + margin: 0; + padding: 0; + font-size: 50px; +} + +h1 { + font-size: 100%; + display: inline; + font-weight: normal; + padding: 0; + margin: 0; +} + +h2 { + font-family: Arial; + color: black; + font-size: 20px; + padding: 0; + margin: 15px 0 5px 0; +} + +h2:first-child { + margin-top: 0; +} + +section, footer { + font-family: Arial; + color: #3f3f3f; + text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px; + margin: 100px 30px 0; + display: block; + overflow: hidden; +} + +footer { + font-size: 12px; + margin: 20px 0 0 30px; +} + +a { + color: inherit; + display: inline-block; + text-decoration: none; + line-height: 110%; + border-bottom: 2px solid #3f3f3f; +} + +.gmap a { + line-height: 100%; + border-bottom: none; +} + +li { + list-style: none; + padding: 10px 0; +} + +button { + font-size: 20px; +} + +pre button { + margin: 2px; +} + +.summary { + font-size: 30px; +} + +.bullets { + font-size: 40px; +} + +section.left { + float: left; + width: 390px; +} + +section.small { + font-size: 24px; +} + +section.small ul { + margin: 0 0 0 15px; + padding: 0; +} + +section.small li { + padding-bottom: 0; +} + +section.middle { + line-height: 68px; + text-align: center; + display: table-cell; + vertical-align: middle; + height: 700px; + width: 900px; +} + +pre { + text-align: left; + font-family: 'Inconsolata', Courier; + padding: 10px 20px; + -webkit-border-radius: 10px; + -khtml-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + background: rgba(255, 150, 60, 0.08); + border: 2px solid rgba(255, 200, 0, 0.3); +} + +pre select { + font-family: Monaco, Courier; + border: 1px solid #c61800; +} + +input { + font-size: 16px; + margin-right: 10px; + font-family: Helvetica; + padding: 3px 5px; +} +input[type="range"] { + width: 100%; +} + +button { + font-family: Verdana; +} + +button.large { + font-size: 32px; +} + +pre b { + font-weight: normal; + color: #c61800; + text-shadow: #c61800 0 0 1px; + /*letter-spacing: -1px;*/ +} +pre em { + font-weight: normal; + font-style: normal; + color: #18a600; + text-shadow: #18a600 0 0 1px; +} +pre input[type="range"] { + height: 6px; + cursor: pointer; + width: auto; +} + +div.example { + display: block; + padding: 10px 20px; + color: black; + background: rgba(255, 255, 255, 0.4); + -webkit-border-radius: 8px; + -khtml-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + margin-bottom: 10px; + border: 1px solid rgba(0, 0, 0, 0.2); +} + +video { + -moz-border-radius: 8px; + -khtml-border-radius: 8px; + -webkit-border-radius: 8px; + border-radius: 8px; + border: 1px solid rgba(0, 0, 0, 0.2); +} + +.css, +.js, +.html, +.key { + font-family: Arial; + color: black; + display: inline-block; + padding: 6px 10px 3px 10px; + font-size: 25px; + line-height: 30px; + text-shadow: none; + letter-spacing: 0; + bottom: 10px; + position: relative; + -moz-border-radius: 10px; + -khtml-border-radius: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; + background: white; + box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; + -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; + -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; + -o-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; +} + +.key { font-family: "Lucida console", Monospace, Arial; } + +:not(header) > .css, +:not(header) > .js, +:not(header) > .html, +:not(header) > .key { + margin: 0 5px; + bottom: 4px; +} + +.css { + background: -webkit-gradient(linear, left top, left bottom, from(#ff4), to(#ffa)); + background-color: #ff4; + background: -moz-linear-gradient(left top, #ff4, #ffa); +} +.js { + background: -webkit-gradient(linear, left top, left bottom, from(#4f4), to(#afa)); + background-color: #4f4; + background: -moz-linear-gradient(left top, #4f4, #afa); +} +.html { + background: -webkit-gradient(linear, left top, left bottom, from(#e88), to(#fee)); + background-color: #e88; + background: -moz-linear-gradient(left top, #e88, #fee); +} + +.two-column { + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; +} + +.summary li::before, .bullets li::before { + content: '· '; +} + +.stroke { + -webkit-text-stroke-color: red; + -webkit-text-stroke-width: 1px; +} /* currently webkit-only */ + +.center { + text-align: center; +} + +.formula { + font-size: 50px; +} + +#presentation-counter { + color: #ccc; + font-size: 100px; + letter-spacing: 1px; + position: absolute; + top: 40%; + left: 0; + width: 100%; + text-align: center; +} + +[data-build] > * { + -webkit-transition: opacity 0.5s ease-in-out 0.2s; + -moz-transition: opacity 0.5s ease-in-out 0.2s; + -o-transition: opacity 0.5s ease-in-out 0.2s; +} + +[data-build] > *.to-build { + opacity: 0; +} + +.sidebar { + background-color: #F8F8F8; + border-right: 5px solid #AAA; +} diff --git a/photoslider/examples/1.jpg b/photoslider/examples/1.jpg new file mode 100755 index 0000000..2d350e7 Binary files /dev/null and b/photoslider/examples/1.jpg differ diff --git a/photoslider/examples/2.jpg b/photoslider/examples/2.jpg new file mode 100755 index 0000000..4c05bb7 Binary files /dev/null and b/photoslider/examples/2.jpg differ diff --git a/photoslider/examples/3.jpg b/photoslider/examples/3.jpg new file mode 100755 index 0000000..c6222f5 Binary files /dev/null and b/photoslider/examples/3.jpg differ diff --git a/photoslider/examples/4.jpg b/photoslider/examples/4.jpg new file mode 100755 index 0000000..58af5ab Binary files /dev/null and b/photoslider/examples/4.jpg differ diff --git a/photoslider/examples/5.jpg b/photoslider/examples/5.jpg new file mode 100755 index 0000000..931c4bc Binary files /dev/null and b/photoslider/examples/5.jpg differ diff --git a/photoslider/examples/left.png b/photoslider/examples/left.png new file mode 100755 index 0000000..2c6e1c1 Binary files /dev/null and b/photoslider/examples/left.png differ diff --git a/photoslider/examples/pearl.c/scripts-draft2.js b/photoslider/examples/pearl.c/scripts-draft2.js new file mode 100755 index 0000000..8477032 --- /dev/null +++ b/photoslider/examples/pearl.c/scripts-draft2.js @@ -0,0 +1,18 @@ +var imageDivs = [ "image1", "image2", "image3", "image4", "image5" ]; + + +var numImages = imageDivs.length; //get total number of items in the array + +for ( var i=0; i 0 ) { + currentDivIndex = currentDivIndex - 1; + alert( "showPrevious called! currentDivIndex is: " + currentDivIndex ); + } +} + +function showNext() { + //remember: the last index of an array is always it's length subtract 1... + if ( currentDivIndex < numImages-1 ) { + currentDivIndex = currentDivIndex + 1; + alert( "showNext called! currentDivIndex is: " + currentDivIndex ); + } +} \ No newline at end of file diff --git a/photoslider/examples/pearl.c/scripts-draft6.js b/photoslider/examples/pearl.c/scripts-draft6.js new file mode 100755 index 0000000..8db0918 --- /dev/null +++ b/photoslider/examples/pearl.c/scripts-draft6.js @@ -0,0 +1,44 @@ +var imageDivs = [ "image1", "image2", "image3", "image4", "image5" ]; +var currentDivIndex = 0; + +var numImages = imageDivs.length; //get total number of items in the array + +updateAllNodes(); + +function updateAllNodes() { + for ( var i=0; i 0 ) { + currentDivIndex = currentDivIndex - 1; + //alert( "showPrevious called! currentDivIndex is: " + currentDivIndex ); + updateAllNodes(); + } +} + +function showNext() { + if ( currentDivIndex < numImages-1 ) { + currentDivIndex = currentDivIndex + 1; + //alert( "showNext called! currentDivIndex is: " + currentDivIndex ); + updateAllNodes(); + } +} \ No newline at end of file diff --git a/photoslider/examples/photos.css b/photoslider/examples/photos.css new file mode 100755 index 0000000..991e027 --- /dev/null +++ b/photoslider/examples/photos.css @@ -0,0 +1,49 @@ +html,body { + background: #333; + color: #FFF; + font-size: 14px; + font-family: Geneva, Arial, Helvetica, sans-serif; +} + +#wrapper { + width: 560px; + margin: 40px auto; + text-align: middle; +} + +.image-holder img { + width: 500px; + height: 375px; +} + +#main { + + color: black; +} + +#main div { + width: 560px; /*add padding to 500px*/ + height: 465px; /*add padding to 375px*/ + padding-top: 30px; + text-align: center; + background-color: white; + overflow: hidden; + margin-bottom: 30px; +} + +.show { + display: block; +} + +.hide { + display: none; +} + +nav { + width: 135px; + margin: 10px auto; +} + +#next, #previous { + cursor: pointer; +} \ No newline at end of file diff --git a/photoslider/examples/photos_final.html b/photoslider/examples/photos_final.html new file mode 100755 index 0000000..3f988ff --- /dev/null +++ b/photoslider/examples/photos_final.html @@ -0,0 +1,93 @@ + + + + Things I Like + + + + +
+ +
+
+ I like cupcakes! +
+
+ ...and more cupcakes +
+
+ Lots of cupcakes! +
+
+ So much sugar! +
+
+ mmmmm +
+
+ + + +
+ + + + \ No newline at end of file diff --git a/photoslider/examples/right.png b/photoslider/examples/right.png new file mode 100755 index 0000000..a41097f Binary files /dev/null and b/photoslider/examples/right.png differ diff --git a/photoslider/index.html b/photoslider/index.html new file mode 100755 index 0000000..c697952 --- /dev/null +++ b/photoslider/index.html @@ -0,0 +1,420 @@ + + + + + + + JavaScript - Ladies Learning Code - March 18, 2012 + + + + + + + + + +
+
Loading...
+
+ +
+ +
+

Photo Slider Assignment

+

Press → key to advance.

+
+
+ +
+ +

Overview

+
+

In this final part, we'll be creating a photo slider with images of 5 things you like.

+

See the finished product.

+

An HTML web page (photos.html) with 5 images (1.jpg to 5.jpg) and CSS (photos.css) has been supplied to you already to get you started.

+ <

Notice that there's already stub JavaScript code for you at the bottom of the page.

+
+
+ +
+ +

Create an array of image divs

+
+
    +
  1. Within the script tag, create an array named "imageDivs" and populate the array with the id names of all your div tags from step 6.
    2. +
+
var imageDivs = [ "image1", ********** ];
+

If you're stuck, click here to show a hint...

+
+
+ +
+ +

Loop through your array

+
+
    +
  1. Use either a while loop or a for loop to iterate over each item in your imageDivs array.
    2. +
  2. Within this loop, use getElementById() to keep a temporary reference to the div at the current index.
    3. +
+
var numImages = **********.length; //get total number of items in the array
+
+for ( var i=0; i<numImages; i++ ) {
+    
+    //use the loop index to access the array item for that index
+    var divIdName = imageDivs[ ********** ]; 
+    
+    var divNode = document.getElementById(divIdName);
+    
+    //testing only -- to confirm your work
+    alert( "Loop index is: " + i + ". " + 
+      " My divNode id is: " + divNode.getAttribute("id") );   
+}
+

If you're stuck, click here to show a hint...

+

If you're getting errors, consider this trouble-shooting idea: The JavaScript code is attempting to reference html tags that exist on the web page. Knowing this, should your script tag be at the top of the page or bottom? +

+
+ +
+ +

Style your image-containing divs

+
+
    +
  1. There is a CSS file already created for you at:
    + http://workshop.ladieslearningcode.com/assets/photos.css.

    + Use the <link rel="stylesheet" /> tag to link to this stylesheet from your photos.html web page.
    2. +
  2. Within your loop in scripts.js, dynamically update the "class" attribute of each div node to be "image-holder" to add a thick, solid white border around all your images.
    3. +
+
divNode.setAttribute( "**********", "image-holder" );
+

If you're stuck, click here to show a hint...

+

It should look like this when you're done.

+
+
+ +
+ +

Start coding the image navigator

+
+
    +
  1. In your JavaScript code, create a number counter variable called currentDivIndex and default it to be the first index number of the imageDiv array.
    + (Hint: Should it be 0 or should it be 1?)
    2. +
  2. Within your loop, instead of giving a white border around all the imges, use a conditional if/else test. Add the "image-holder" class only to the div node that's in the same array index position as currentDivIndex. For everything else, use removeAttribute() to remove the "class" attribute
    3. +
+
var currentDivIndex = **********;
+var numImages = imageDivs.length;
+for ( var i=0; i<numImages; i++ ) {
+  // stuff you already wrote.....
+  // but instead of this: divNode.setAttribute( "class", "image-holder" );
+  //use an if/else test
+  if ( i == ********** ) {
+    divNode.setAttribute( "class", "image-holder" );
+  }else{
+    divNode.removeAttribute( "class" );
+  }   
+}
+
+

If you're stuck, click here to show a hint...

+

It should look like this when you're done.

+
+
+ +
+ +

Add in image navigator buttons

+
+
    +
  1. In your HTML code, create previous and next buttons using img tags with an onclick attribute that will point to showPrevious and showNext JavaScript functions that you will write very shortly. For each arrow img tag, give it an appropriate id value of either "previous" and "next" so CSS styles can be applied to them.

    + Images urls: http://workshop.ladieslearningcode.com/assets/left.png & right.png
    2. +
  2. In your JavaScript code, create showPrevious and showNext functions. Each function should either decrease the value of currentDivIndex by one, or increase it. For testing, add in an alert() to show that you've created your functions correctly.
    3. +
+
********** **********() {
+	currentDivIndex = **********; //what kind of mathematical operation here?
+	alert( "showPrevious called! currentDivIndex is: " + currentDivIndex );
+}
+
+********** **********() {
+	currentDivIndex = **********; //what kind of mathematical operation here?
+	alert( "showNext called! currentDivIndex is: " + currentDivIndex );
+}
+
+

If you're stuck, click here to show a hint...

+

It should look like this when you're done. (Click on the arrows.)

+
+
+ +
+ +

Refine your math

+
+

Did you notice that you can get currentDivIndex to be equal to -1 or even 10?

+

If your code attempts to get a value of an array using an index number that doesn't exist (e.g. imageDivs[-10]), you get what is called an "out of bounds" error. Don't let it happen!

+
    +
  1. In your showPrevious and showNext functions, use an if test to make sure that currentDivIndex doesn't ever get set to an "out of bounds" number. For testing, add in an alert() to show that you've handled your arrow clicks correctly.
    2. +
+
function showPrevious() {
+  if ( ***** > ***** ) {
+	currentDivIndex = currentDivIndex - 1;
+	alert( "showPrevious called! currentDivIndex is: " + currentDivIndex );
+  }
+}
+
+function showNext() {
+  //remember: the last index of an array is always it's length subtract 1...
+  if ( ***** < ***** ) {
+	currentDivIndex = currentDivIndex + 1;
+	alert( "showNext called! currentDivIndex is: " + currentDivIndex );
+  }
+}
+
+

If you're stuck, click here to show a hint...

+

It should look like this when you're done. (Click on the arrows.)

+
+
+ +
+ +

Almost there! (Part 1 of 2)

+
+

The next step is to be able to use currentDivIndex to update the CSS class style based on the arrow button clicks! Consider that you have for loop that does this already.

+
for ( var i=0; i<numImages; i++ ) {
+  var divIdName = imageDivs[i];
+  var imageDiv = document.getElementById(divIdName);
+
+  if ( i == currentDivIndex ) {
+    divNode.setAttribute( "class", "image-holder" );
+  }else
+    divNode.removeAttribute( "class" );
+}
+
    +
  1. Make the for loop more re-usable by putting it in an function named updateAllNodes()
    2. +
+ +
function ********** () {
+  for ( var i=0; i<numImages; i++ ) {
+    //your loop stuff
+  }
+}
+

If you're stuck, click here to show a hint...

+
+
+ +
+ +

Almost there! (Part 2 of 2)

+
+

Remember that you need to call the function before that code block gets executed so where are the three spots you should call updateAllNodes so that:

+
    +
  • there's a default state
    • +
  • nodes get updated when you click the previous button arrow
    • +
  • nodes get updated when you click the next button arrow
    • +
+ +
    +
  1. Call the function updateAllNodes() in your code in the 3 spots it should be.
    2. +
+ +

It should look like this when you're done. (Click on the arrows.)

+
+
+ +
+ +

Finally!

+
+

By now you've mastered arrays, loops, functions, and conditionals! Congratulations!

+

Your photo slider should be able to make the white border appear around the appropriate image when you click the arrow buttons so let's just tidy it up.

+
    +
  1. Update the conditional if/else test in updateAllNodes() function to set the nodes's display mode (visibility) to either "none" or "block" -- only the current node should be visible.
    2. +
+ +
if ( i == currentDivIndex ) {
+    divNode.setAttribute( "class", "image-holder" );
+    divNode.style.display = **********;
+}else{
+    divNode.removeAttribute( "class" );
+    divNode.style.display = **********;
+}
+

If you're stuck, click here to show a hint...

+

The final result should look like this when you're done!!

+
+
+ + +
+ +

Back to the assignment! Gather images.

+
+
    +
  1. Download 5 images of things you like from Flickr.com (Note: Download landscape-only images that are 500px wide by 375px tall. Easiest way to do this is to view a photo on Flickr and right-click for options. A "Medium 500" option will appear. If you have your own image editing software, feel free to use your own photos cropped to this size.)
    + Flickr Medium 500 option
    2. +
  2. Name them: 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg (Optional but it may help while debugging.)
    3. +
+
+
+ +
+ +

Extra points

+
+

If you're eager to flex your JavaScript skillz, try some of these bonus challenges:

+
    +
  • Loop the images.
    e.g. When the slideshow is at the end, clicking next should show the first photo.
    • +
  • Use the alt attribute of the img tag to create photo captions using the node's innerHTML property.
    • +
  • Add an alpha fade animation as a photo transition.
    • +
+ +
+
+ +
+ + + + + + + +
+ + + + + + + + \ No newline at end of file diff --git a/photoslider/js/utils.js b/photoslider/js/utils.js new file mode 100755 index 0000000..ed0ec09 --- /dev/null +++ b/photoslider/js/utils.js @@ -0,0 +1,535 @@ +(function() { + var doc = document; + var disableBuilds = false; + var disableNotes = false; + + var ctr = 0; + var spaces = /\s+/, a1 = ['']; + + var toArray = function(list) { + return Array.prototype.slice.call(list || [], 0); + }; + + var byId = function(id) { + if (typeof id == 'string') { return doc.getElementById(id); } + return id; + }; + + var query = function(query, root) { + return queryAll(query, root)[0]; + } + + var queryAll = function(query, root) { + if (!query) { return []; } + if (typeof query != 'string') { return toArray(query); } + if (typeof root == 'string') { + root = byId(root); + if(!root){ return []; } + } + + root = root || document; + var rootIsDoc = (root.nodeType == 9); + var doc = rootIsDoc ? root : (root.ownerDocument || document); + + // rewrite the query to be ID rooted + if (!rootIsDoc || ('>~+'.indexOf(query.charAt(0)) >= 0)) { + root.id = root.id || ('qUnique' + (ctr++)); + query = '#' + root.id + ' ' + query; + } + // don't choke on something like ".yada.yada >" + if ('>~+'.indexOf(query.slice(-1)) >= 0) { query += ' *'; } + return toArray(doc.querySelectorAll(query)); + }; + + var strToArray = function(s) { + if (typeof s == 'string' || s instanceof String) { + if (s.indexOf(' ') < 0) { + a1[0] = s; + return a1; + } else { + return s.split(spaces); + } + } + return s; + }; + + // Needed for browsers that don't support String.trim() (e.g. iPad) + var trim = function(str) { + return str.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); + }; + + var addClass = function(node, classStr) { + classStr = strToArray(classStr); + var cls = ' ' + node.className + ' '; + for (var i = 0, len = classStr.length, c; i < len; ++i) { + c = classStr[i]; + if (c && cls.indexOf(' ' + c + ' ') < 0) { + cls += c + ' '; + } + } + node.className = trim(cls); + }; + + var removeClass = function(node, classStr) { + var cls; + if (classStr !== undefined) { + classStr = strToArray(classStr); + cls = ' ' + node.className + ' '; + for (var i = 0, len = classStr.length; i < len; ++i) { + cls = cls.replace(' ' + classStr[i] + ' ', ' '); + } + cls = trim(cls); + } else { + cls = ''; + } + if (node.className != cls) { + node.className = cls; + } + }; + + var toggleClass = function(node, classStr) { + var cls = ' ' + node.className + ' '; + if (cls.indexOf(' ' + trim(classStr) + ' ') >= 0) { + removeClass(node, classStr); + } else { + addClass(node, classStr); + } + }; + + + // modernizr lite via https://gist.github.com/598008 + var testStyle = function(style) { + + var elem = document.createElement('div'); + var prefixes = ['Webkit', 'Moz', 'O', 'ms', 'Khtml']; + var bool; + var bump = function(all, letter) { + return letter.toUpperCase(); + }; + var prop; + + bool = style in elem.style; + prop = style.replace(/^(.)/, bump).replace(/-([a-z])/ig, bump); + + for (var len = prefixes.length; len--; ){ + if (bool) { + break; + } + bool = prefixes[len] + prop in elem.style; + } + + document.documentElement.className += ' ' + (bool ? '' : 'no-') + style.replace(/-/g, ''); + return bool; + }; + + var canTransition = testStyle('transition'); + + // + // Slide class + // + var Slide = function(node, idx) { + this._node = node; + var note = query('.note > section', node); + this._speakerNote = note ? note.innerHTML : ''; + if (idx >= 0) { + this._count = idx + 1; + } + if (this._node) { + addClass(this._node, 'slide distant-slide'); + } + this._makeCounter(); + this._makeBuildList(); + }; + + Slide.prototype = { + _node: null, + _count: 0, + _buildList: [], + _visited: false, + _currentState: '', + _states: [ 'distant-slide', 'far-past', + 'past', 'current', 'future', + 'far-future', 'distant-slide' ], + setState: function(state) { + if (typeof state != 'string') { + state = this._states[state]; + } + if (state == 'current' && !this._visited) { + this._visited = true; + this._makeBuildList(); + } + removeClass(this._node, this._states); + addClass(this._node, state); + this._currentState = state; + + // delay first auto run. Really wish this were in CSS. + /* + this._runAutos(); + */ + var _t = this; + setTimeout(function(){ _t._runAutos(); } , 400); + + if (state == 'current') { + this._onLoad(); + } else { + this._onUnload(); + } + }, + _onLoad: function() { + this._fireEvent('onload'); + this._showFrames(); + }, + _onUnload: function() { + this._fireEvent('onunload'); + this._hideFrames(); + }, + _fireEvent: function(name) { + var eventSrc = this._node.getAttribute(name); + if (eventSrc) { + eventSrc = '(function() { ' + eventSrc + ' })'; + var fn = eval(eventSrc); + fn.call(this._node); + } + }, + _showFrames: function() { + var frames = queryAll('iframe', this._node); + function show() { + frames.forEach(function(el) { + var _src = el.getAttribute('_src'); + if (_src && _src.length) { + el.src = _src; + } + }); + } + setTimeout(show, 0); + }, + _hideFrames: function() { + var frames = queryAll('iframe', this._node); + function hide() { + frames.forEach(function(el) { + var _src = el.getAttribute('_src'); + if (_src && _src.length) { + el.src = ''; + } + }); + } + setTimeout(hide, 250); + }, + _makeCounter: function() { + if(!this._count || !this._node) { return; } + var c = doc.createElement('span'); + c.className = 'counter'; + this._node.appendChild(c); + }, + _makeBuildList: function() { + this._buildList = []; + if (disableBuilds) { return; } + if (this._node) { + this._buildList = queryAll('[data-build] > *', this._node); + } + this._buildList.forEach(function(el) { + addClass(el, 'to-build'); + }); + }, + _runAutos: function() { + if (this._currentState != 'current') { + return; + } + // find the next auto, slice it out of the list, and run it + var idx = -1; + this._buildList.some(function(n, i) { + if (n.hasAttribute('data-auto')) { + idx = i; + return true; + } + return false; + }); + if (idx >= 0) { + var elem = this._buildList.splice(idx, 1)[0]; + + var _t = this; + if (canTransition) { + var l = function(evt) { + elem.parentNode.removeEventListener('webkitTransitionEnd', l, false); + elem.parentNode.removeEventListener('transitionend', l, false); // moz + elem.parentNode.removeEventListener('oTransitionEnd', l, false); + _t._runAutos(); + }; + elem.parentNode.addEventListener('webkitTransitionEnd', l, false); + elem.parentNode.addEventListener('transitionend', l, false); + elem.parentNode.addEventListener('oTransitionEnd', l, false); + removeClass(elem, 'to-build'); + } else { + setTimeout(function() { + removeClass(elem, 'to-build'); + _t._runAutos(); + }, 400); + } + } + }, + getSpeakerNote: function() { + return this._speakerNote; + }, + buildNext: function() { + if (!this._buildList.length) { + return false; + } + removeClass(this._buildList.shift(), 'to-build'); + return true; + }, + }; + + // + // SlideShow class + // + var SlideShow = function(slides) { + this._slides = (slides || []).map(function(el, idx) { + return new Slide(el, idx); + }); + var h = window.location.hash; + try { + this.current = h; + } catch (e) { /* squeltch */ } + this.current = (!this.current) ? "landing-slide" : this.current.replace('#', ''); + if (!query('#' + this.current)) { + // if this happens is very likely that someone is coming from + // a link with the old permalink format, i.e. #slide24 + alert('The format of the permalinks have recently changed. If you are coming ' + + 'here from an old external link it\'s very likely you will land to the wrong slide'); + this.current = "landing-slide"; + } + var _t = this; + doc.addEventListener('keydown', + function(e) { _t.handleKeys(e); }, false); + doc.addEventListener('touchstart', + function(e) { _t.handleTouchStart(e); }, false); + doc.addEventListener('touchend', + function(e) { _t.handleTouchEnd(e); }, false); + window.addEventListener('popstate', + function(e) { if (e.state) { _t.go(e.state, true); } }, false); + query('#left-init-key').addEventListener('click', + function() { _t.next(); }, false); + this._update(); + queryAll('#nav-prev, #nav-next').forEach(function(el) { + el.addEventListener('click', _t.onNavClick.bind(_t), false); + }); + queryAll('menu button').forEach(function(el) { + el.addEventListener('click', _t.onCommandClick.bind(_t), false); + }); + }; + + SlideShow.prototype = { + _presentationCounter: query('#presentation-counter'), + _menuCounter: query('#slide-no'), + _speakerNote: query('#speaker-note'), + _help: query('#help'), + _slides: [], + _getCurrentIndex: function() { + var me = this; + var slideCount = null; + queryAll('.slide').forEach(function(slide, i) { + if (slide.id == me.current) { + slideCount = i; + } + }); + return slideCount + 1; + }, + _update: function(targetId, dontPush) { + // in order to delay the time where the counter shows the slide number we check if + // the slides are already loaded (so we show the loading... instead) + // the technique to test visibility is taken from here + // http://stackoverflow.com/questions/704758/how-to-check-if-an-element-is-really-visible-with-javascript + var currentIndex = this._getCurrentIndex(); + + if (targetId) { + var savedIndex = currentIndex; + this.current = targetId; + currentIndex = this._getCurrentIndex(); + if (Math.abs(savedIndex - currentIndex) > 1) { + // if the current switch is not "prev" or "next", we need clear + // the state setting near the original slide + for (var x = savedIndex; x < savedIndex + 7; x++) { + if (this._slides[x-4]) { + this._slides[x-4].setState(0); + } + } + } + } + var docElem = document.documentElement; + var elem = document.elementFromPoint( docElem.clientWidth / 2, docElem.clientHeight / 2); + if (elem && elem.className != 'presentation') { + this._presentationCounter.textContent = currentIndex; + if (this._menuCounter) { + this._menuCounter.textContent = currentIndex; + } + } + this._speakerNote.innerHTML = this._slides[currentIndex - 1].getSpeakerNote(); + if (history.pushState) { + if (!dontPush) { + history.pushState(this.current, 'Slide ' + this.current, '#' + this.current); + } + } else { + window.location.hash = this.current; + } + for (var x = currentIndex; x < currentIndex + 7; x++) { + if (this._slides[x-4]) { + this._slides[x-4].setState(x-currentIndex); + } + } + }, + + current: 0, + next: function() { + if (!this._slides[this._getCurrentIndex() - 1].buildNext()) { + var next = query('#' + this.current + ' + .slide'); + //this.current = (next) ? next.id : this.current; + this._update((next) ? next.id : this.current); + } + }, + prev: function() { + var prev = query('.slide:nth-child(' + (this._getCurrentIndex() - 1) + ')'); + //this.current = (prev) ? prev.id : this.current; + this._update((prev) ? prev.id : this.current); + }, + go: function(slideId, dontPush) { + //this.current = slideId; + this._update(slideId, dontPush); + }, + + showNotes: function() { + if (disableNotes) { + return; + } + this._speakerNote.style.display = "block"; + this._speakerNote.classList.toggle('invisible'); + }, + switch3D: function() { + toggleClass(document.body, 'three-d'); + }, + toggleHightlight: function() { + var link = query('#prettify-link'); + link.disabled = !(link.disabled); + sessionStorage['highlightOn'] = !link.disabled; + }, + changeTheme: function() { + var linkEls = queryAll('link.theme'); + var sheetIndex = 0; + linkEls.forEach(function(stylesheet, i) { + if (!stylesheet.disabled) { + sheetIndex = i; + } + }); + linkEls[sheetIndex].disabled = true; + linkEls[(sheetIndex + 1) % linkEls.length].disabled = false; + sessionStorage['theme'] = linkEls[(sheetIndex + 1) % linkEls.length].href; + }, + toggleHelp: function() { + this._help.style.display = "block"; + this._help.classList.toggle('invisible'); + }, + viewSource: function() { + window.open("view-source:" + window.location.href); + }, + handleKeys: function(e) { + if (/^(input|textarea)$/i.test(e.target.nodeName) || e.target.isContentEditable) { + return; + } + switch (e.keyCode) { + case 37: // left arrow + this.prev(); break; + case 39: // right arrow + case 32: // space + this.next(); break; + // case 48: // 0 + // this.toggleHelp(); break; + case 51: // 3 + this.switch3D(); break; + case 72: // H + this.toggleHelp(); break; + case 78: // N + this.showNotes(); break; + case 83: // S + this.viewSource(); break; + case 84: // T + this.changeTheme(); break; + case 67: // C + this.toggleHightlight(); break; + } + }, + _touchStartX: 0, + handleTouchStart: function(e) { + this._touchStartX = e.touches[0].pageX; + }, + handleTouchEnd: function(e) { + var delta = this._touchStartX - e.changedTouches[0].pageX; + var SWIPE_SIZE = 150; + if (delta > SWIPE_SIZE) { + this.next(); + } else if (delta< -SWIPE_SIZE) { + this.prev(); + } + }, + onNavClick: function(e) { + if (e.target.id == "nav-prev") { + this.prev(); + } else if (e.target.id = "nav-next") { + this.next(); + } + }, + onCommandClick: function(e) { + var n = e.target.getAttribute('data-command'); + switch(n) { + // case 'toc': + // this._update("table-of-contents"); break; + case 'resources': + break; + case 'notes': + this.showNotes(); break; + case 'source': + this.viewSource(); break; + case 'help': + this.toggleHelp(); break; + default: + return; + } + } + }; + + // load highlight setting from session storage, if available. + // session storage can only store strings so we have to assume type coercion + // for the boolean logic here + query('#prettify-link').disabled = !(sessionStorage['highlightOn'] == 'true'); + + // disable style theme stylesheets + var linkEls = queryAll('link.theme'); + var stylesheetPath = sessionStorage['theme'] || 'css/default.css'; + linkEls.forEach(function(stylesheet) { + stylesheet.disabled = !(stylesheet.href.indexOf(stylesheetPath) != -1); + }); + + // Initialize + var li_array = []; + var transitionSlides = queryAll('.transitionSlide').forEach(function(el) { + li_array.push( ['
  • ', + query('h2', el).textContent, '
    • '].join('') + ); + }); + + //query('#toc-list').innerHTML = li_array.join(''); + + var slideshow = new SlideShow(queryAll('.slide')); + + document.addEventListener('DOMContentLoaded', function() { + query('.slides').style.display = 'block'; + }, false); + + // queryAll('#toc-list li a').forEach(function(el) { + // el.onclick = function() { slideshow.go(el.dataset['hash']); }; + // }); + + queryAll('pre').forEach(function(el) { + addClass(el, 'prettyprint'); + }); +})(); diff --git a/photoslider/src/fonts/inconsolata/Inconsolata.ttf b/photoslider/src/fonts/inconsolata/Inconsolata.ttf new file mode 100755 index 0000000..312d1e4 Binary files /dev/null and b/photoslider/src/fonts/inconsolata/Inconsolata.ttf differ diff --git a/photoslider/src/fonts/junction02/junction02-webfont.eot b/photoslider/src/fonts/junction02/junction02-webfont.eot new file mode 100755 index 0000000..5439a96 Binary files /dev/null and b/photoslider/src/fonts/junction02/junction02-webfont.eot differ diff --git a/photoslider/src/fonts/junction02/junction02-webfont.svg b/photoslider/src/fonts/junction02/junction02-webfont.svg new file mode 100755 index 0000000..73e22db --- /dev/null +++ b/photoslider/src/fonts/junction02/junction02-webfont.svg @@ -0,0 +1,223 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Designer : Caroline Hadilaksono +Foundry : Caroline Hadilaksono +Foundry URL : httpwwwtheleagueofmoveabletypecom + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/photoslider/src/fonts/junction02/junction02-webfont.ttf b/photoslider/src/fonts/junction02/junction02-webfont.ttf new file mode 100755 index 0000000..51700b1 Binary files /dev/null and b/photoslider/src/fonts/junction02/junction02-webfont.ttf differ diff --git a/photoslider/src/fonts/junction02/junction02-webfont.woff b/photoslider/src/fonts/junction02/junction02-webfont.woff new file mode 100755 index 0000000..290e147 Binary files /dev/null and b/photoslider/src/fonts/junction02/junction02-webfont.woff differ diff --git a/photoslider/src/fonts/leaguegothic/leaguegothic-webfont.eot b/photoslider/src/fonts/leaguegothic/leaguegothic-webfont.eot new file mode 100755 index 0000000..43deaf0 Binary files /dev/null and b/photoslider/src/fonts/leaguegothic/leaguegothic-webfont.eot differ diff --git a/photoslider/src/fonts/leaguegothic/leaguegothic-webfont.svg b/photoslider/src/fonts/leaguegothic/leaguegothic-webfont.svg new file mode 100755 index 0000000..e1c568b --- /dev/null +++ b/photoslider/src/fonts/leaguegothic/leaguegothic-webfont.svg @@ -0,0 +1,223 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/photoslider/src/fonts/leaguegothic/leaguegothic-webfont.ttf b/photoslider/src/fonts/leaguegothic/leaguegothic-webfont.ttf new file mode 100755 index 0000000..8b24095 Binary files /dev/null and b/photoslider/src/fonts/leaguegothic/leaguegothic-webfont.ttf differ diff --git a/photoslider/src/fonts/leaguegothic/leaguegothic-webfont.woff b/photoslider/src/fonts/leaguegothic/leaguegothic-webfont.woff new file mode 100755 index 0000000..12c1069 Binary files /dev/null and b/photoslider/src/fonts/leaguegothic/leaguegothic-webfont.woff differ diff --git a/photoslider/src/fonts/yanone/YanoneKaffeesatz-Regular.ttf b/photoslider/src/fonts/yanone/YanoneKaffeesatz-Regular.ttf new file mode 100755 index 0000000..2dd57fd Binary files /dev/null and b/photoslider/src/fonts/yanone/YanoneKaffeesatz-Regular.ttf differ diff --git a/photoslider/src/prettify/prettify.css b/photoslider/src/prettify/prettify.css new file mode 100755 index 0000000..c828f5e --- /dev/null +++ b/photoslider/src/prettify/prettify.css @@ -0,0 +1,48 @@ +/* Pretty printing styles. Used with prettify.js. */ + +/* SPAN elements with the classes below are added by prettyprint. */ +.str { color: #080; } +.kwd { color: #008; } +.com { color: #800; } +.typ { color: #606; } +.lit { color: #066; } +.pun, .opn, .clo { color: #660; } +.pln { color: #000; } +.tag { color: #008; } +.atn { color: #606; } +.atv { color: #080; } +.dec { color: #606; } + +/* Use higher contrast and font-styling for printable form. */ +@media print { + .str { color: #060; } + .kwd { color: #006; font-weight: bold; } + .com { color: #600; font-style: italic; } + .typ { color: #404; font-weight: bold; } + .lit { color: #044; } + .pun, .opn, .clo { color: #440; } + .pln { color: #000; } + .tag { color: #006; font-weight: bold; } + .atn { color: #404; } + .atv { color: #060; } +} + +/* Put a border around prettyprinted code snippets. */ +pre.prettyprint { } + +/* Specify class=linenums on a pre to get line numbering */ +ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */ +li.L0, +li.L1, +li.L2, +li.L3, +li.L5, +li.L6, +li.L7, +li.L8 { list-style-type: none } +/* Alternate shading for lines */ +li.L1, +li.L3, +li.L5, +li.L7, +li.L9 { background: #eee } diff --git a/photoslider/src/prettify/prettify.js b/photoslider/src/prettify/prettify.js new file mode 100755 index 0000000..c9161da --- /dev/null +++ b/photoslider/src/prettify/prettify.js @@ -0,0 +1,33 @@ +window.PR_SHOULD_USE_CONTINUATION=true;window.PR_TAB_WIDTH=8;window.PR_normalizedHtml=window.PR=window.prettyPrintOne=window.prettyPrint=void 0;window._pr_isIE6=function(){var y=navigator&&navigator.userAgent&&navigator.userAgent.match(/\bMSIE ([678])\./);y=y?+y[1]:false;window._pr_isIE6=function(){return y};return y}; +(function(){function y(b){return b.replace(L,"&").replace(M,"<").replace(N,">")}function H(b,f,i){switch(b.nodeType){case 1:var o=b.tagName.toLowerCase();f.push("<",o);var l=b.attributes,n=l.length;if(n){if(i){for(var r=[],j=n;--j>=0;)r[j]=l[j];r.sort(function(q,m){return q.name"); +for(l=b.firstChild;l;l=l.nextSibling)H(l,f,i);if(b.firstChild||!/^(?:br|link|img)$/.test(o))f.push("");break;case 3:case 4:f.push(y(b.nodeValue));break}}function O(b){function f(c){if(c.charAt(0)!=="\\")return c.charCodeAt(0);switch(c.charAt(1)){case "b":return 8;case "t":return 9;case "n":return 10;case "v":return 11;case "f":return 12;case "r":return 13;case "u":case "x":return parseInt(c.substring(2),16)||c.charCodeAt(1);case "0":case "1":case "2":case "3":case "4":case "5":case "6":case "7":return parseInt(c.substring(1), +8);default:return c.charCodeAt(1)}}function i(c){if(c<32)return(c<16?"\\x0":"\\x")+c.toString(16);c=String.fromCharCode(c);if(c==="\\"||c==="-"||c==="["||c==="]")c="\\"+c;return c}function o(c){var d=c.substring(1,c.length-1).match(RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g"));c=[];for(var a=[],k=d[0]==="^",e=k?1:0,h=d.length;e122)){s<65||g>90||a.push([Math.max(65,g)|32,Math.min(s,90)|32]);s<97||g>122||a.push([Math.max(97,g)&-33,Math.min(s,122)&-33])}}a.sort(function(v,w){return v[0]-w[0]||w[1]-v[1]});d=[];g=[NaN,NaN];for(e=0;eh[0]){h[1]+1>h[0]&&a.push("-"); +a.push(i(h[1]))}}a.push("]");return a.join("")}function l(c){for(var d=c.source.match(RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g")),a=d.length,k=[],e=0,h=0;e=2&&c==="[")d[e]=o(g);else if(c!=="\\")d[e]=g.replace(/[a-zA-Z]/g,function(s){s=s.charCodeAt(0);return"["+String.fromCharCode(s&-33,s|32)+"]"})}return d.join("")}for(var n=0,r=false,j=false,q=0,m=b.length;q=0;l-=16)o.push(" ".substring(0,l));l=n+1;break;case "\n":f=0;break;default:++f}if(!o)return i;o.push(i.substring(l));return o.join("")}}function I(b, +f,i,o){if(f){b={source:f,c:b};i(b);o.push.apply(o,b.d)}}function B(b,f){var i={},o;(function(){for(var r=b.concat(f),j=[],q={},m=0,t=r.length;m=0;)i[c.charAt(d)]=p;p=p[1];c=""+p;if(!q.hasOwnProperty(c)){j.push(p);q[c]=null}}j.push(/[\0-\uffff]/);o=O(j)})();var l=f.length;function n(r){for(var j=r.c,q=[j,z],m=0,t=r.source.match(o)||[],p={},c=0,d=t.length;c=5&&"lang-"===k.substring(0,5))&&!(e&&typeof e[1]==="string")){h=false;k=P}h||(p[a]=k)}g=m;m+=a.length;if(h){h=e[1];var s=a.indexOf(h),v=s+h.length;if(e[2]){v=a.length-e[2].length;s=v-h.length}k=k.substring(5);I(j+g,a.substring(0,s),n,q);I(j+g+s,h,Q(k,h),q);I(j+g+v,a.substring(v),n,q)}else q.push(j+g,k)}r.d=q}return n}function x(b){var f=[],i=[];if(b.tripleQuotedStrings)f.push([A,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/, +null,"'\""]);else b.multiLineStrings?f.push([A,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):f.push([A,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);b.verbatimStrings&&i.push([A,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);if(b.hashComments)if(b.cStyleComments){f.push([C,/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"]);i.push([A,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/, +null])}else f.push([C,/^#[^\r\n]*/,null,"#"]);if(b.cStyleComments){i.push([C,/^\/\/[^\r\n]*/,null]);i.push([C,/^\/\*[\s\S]*?(?:\*\/|$)/,null])}b.regexLiterals&&i.push(["lang-regex",RegExp("^"+Z+"(/(?=[^/*])(?:[^/\\x5B\\x5C]|\\x5C[\\s\\S]|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+/)")]);b=b.keywords.replace(/^\s+|\s+$/g,"");b.length&&i.push([R,RegExp("^(?:"+b.replace(/\s+/g,"|")+")\\b"),null]);f.push([z,/^\s+/,null," \r\n\t\u00a0"]);i.push([J,/^@[a-z_$][a-z_$@0-9]*/i,null],[S,/^@?[A-Z]+[a-z][A-Za-z_$@0-9]*/, +null],[z,/^[a-z_$][a-z_$@0-9]*/i,null],[J,/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],[E,/^.[^\s\w\.$@\'\"\`\/\#]*/,null]);return B(f,i)}function $(b){function f(D){if(D>r){if(j&&j!==q){n.push("");j=null}if(!j&&q){j=q;n.push('')}var T=y(p(i.substring(r,D))).replace(e?d:c,"$1 ");e=k.test(T);n.push(T.replace(a,s));r=D}}var i=b.source,o=b.g,l=b.d,n=[],r=0,j=null,q=null,m=0,t=0,p=Y(window.PR_TAB_WIDTH),c=/([\r\n ]) /g, +d=/(^| ) /gm,a=/\r\n?|\n/g,k=/[ \r\n]$/,e=true,h=window._pr_isIE6();h=h?b.b.tagName==="PRE"?h===6?" \r\n":h===7?" 
    \r":" \r":" 
    ":"
    ";var g=b.b.className.match(/\blinenums\b(?::(\d+))?/),s;if(g){for(var v=[],w=0;w<10;++w)v[w]=h+'
  • ';var F=g[1]&&g[1].length?g[1]-1:0;n.push('
    1. ");s=function(){var D=v[++F%10];return j?""+D+'':D}}else s=h; +for(;;)if(m");j=null}n.push(o[m+1]);m+=2}else if(t");g&&n.push("
    ");b.a=n.join("")}function u(b,f){for(var i=f.length;--i>=0;){var o=f[i];if(G.hasOwnProperty(o))"console"in window&&console.warn("cannot override language handler %s",o);else G[o]=b}}function Q(b,f){b&&G.hasOwnProperty(b)||(b=/^\s*1&&m.charAt(0)==="<"){if(!ba.test(m))if(ca.test(m)){f.push(m.substring(9,m.length-3));n+=m.length-12}else if(da.test(m)){f.push("\n");++n}else if(m.indexOf(V)>=0&&m.replace(/\s(\w+)\s*=\s*(?:\"([^\"]*)\"|'([^\']*)'|(\S+))/g,' $1="$2$3$4"').match(/[cC][lL][aA][sS][sS]=\"[^\"]*\bnocode\b/)){var t=m.match(W)[2],p=1,c;c=j+1;a:for(;c=0;){var e=p.indexOf(";",k);if(e>=0){var h=p.substring(k+3,e),g=10;if(h&&h.charAt(0)==="x"){h=h.substring(1);g=16}var s=parseInt(h,g);isNaN(s)||(p=p.substring(0,k)+String.fromCharCode(s)+p.substring(e+1))}}a=p.replace(ea,"<").replace(fa,">").replace(ga,"'").replace(ha,'"').replace(ia," ").replace(ja, +"&")}f.push(a);n+=a.length}}o={source:f.join(""),h:r};var v=o.source;b.source=v;b.c=0;b.g=o.h;Q(i,v)(b);$(b)}catch(w){if("console"in window)console.log(w&&w.stack?w.stack:w)}}var A="str",R="kwd",C="com",S="typ",J="lit",E="pun",z="pln",P="src",V="nocode",Z=function(){for(var b=["!","!=","!==","#","%","%=","&","&&","&&=","&=","(","*","*=","+=",",","-=","->","/","/=",":","::",";","<","<<","<<=","<=","=","==","===",">",">=",">>",">>=",">>>",">>>=","?","@","[","^","^=","^^","^^=","{","|","|=","||","||=", +"~","break","case","continue","delete","do","else","finally","instanceof","return","throw","try","typeof"],f="(?:^^|[+-]",i=0;i:&a-z])/g,"\\$1");f+=")\\s*";return f}(),L=/&/g,M=//g,X=/\"/g,ea=/</g,fa=/>/g,ga=/'/g,ha=/"/g,ja=/&/g,ia=/ /g,ka=/[\r\n]/g,K=null,aa=RegExp("[^<]+| - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    -

    Resources

    -

    Where to go from here?

    -
    - - - - -
    -

    Books

    -

    JavaScript: The Good Parts by Douglas Crockford

    -

    Watch this 1-hour video for a sampler, then pick up the book.

    -

    JavaScript: The Good Parts versus The Definitive Guide

    -
    - -
    -

    Books

    -

    jQuery: Novice to Ninja by Earle Castledine and Craig Sharkie

    -

    Make sure to get the 2nd edition book.

    -

    jQuery: Novice to Ninja cover

    -
    - - - - - - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/codemirror/LICENSE b/src/codemirror/LICENSE old mode 100644 new mode 100755 diff --git a/src/codemirror/README.md b/src/codemirror/README.md old mode 100644 new mode 100755 diff --git a/src/codemirror/compress.html b/src/codemirror/compress.html old mode 100644 new mode 100755 diff --git a/src/codemirror/css/baboon.png b/src/codemirror/css/baboon.png old mode 100644 new mode 100755 diff --git a/src/codemirror/css/baboon_vector.svg b/src/codemirror/css/baboon_vector.svg old mode 100644 new mode 100755 diff --git a/src/codemirror/css/docs.css b/src/codemirror/css/docs.css old mode 100644 new mode 100755 diff --git a/src/codemirror/demo/activeline.html b/src/codemirror/demo/activeline.html old mode 100644 new mode 100755 diff --git a/src/codemirror/demo/changemode.html b/src/codemirror/demo/changemode.html old mode 100644 new mode 100755 diff --git a/src/codemirror/demo/complete.html b/src/codemirror/demo/complete.html old mode 100644 new mode 100755 diff --git a/src/codemirror/demo/complete.js b/src/codemirror/demo/complete.js old mode 100644 new mode 100755 diff --git a/src/codemirror/demo/fullscreen.html b/src/codemirror/demo/fullscreen.html old mode 100644 new mode 100755 diff --git a/src/codemirror/demo/marker.html b/src/codemirror/demo/marker.html old mode 100644 new mode 100755 diff --git a/src/codemirror/demo/mustache.html b/src/codemirror/demo/mustache.html old mode 100644 new mode 100755 diff --git a/src/codemirror/demo/preview.html b/src/codemirror/demo/preview.html old mode 100644 new mode 100755 diff --git a/src/codemirror/demo/resize.html b/src/codemirror/demo/resize.html old mode 100644 new mode 100755 diff --git a/src/codemirror/demo/runmode.html b/src/codemirror/demo/runmode.html old mode 100644 new mode 100755 diff --git a/src/codemirror/demo/search.html b/src/codemirror/demo/search.html old mode 100644 new mode 100755 diff --git a/src/codemirror/demo/theme.html b/src/codemirror/demo/theme.html old mode 100644 new mode 100755 diff --git a/src/codemirror/index.html b/src/codemirror/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/internals.html b/src/codemirror/internals.html old mode 100644 new mode 100755 diff --git a/src/codemirror/lib/codemirror.css b/src/codemirror/lib/codemirror.css old mode 100644 new mode 100755 diff --git a/src/codemirror/lib/codemirror.js b/src/codemirror/lib/codemirror.js old mode 100644 new mode 100755 diff --git a/src/codemirror/lib/overlay.js b/src/codemirror/lib/overlay.js old mode 100644 new mode 100755 diff --git a/src/codemirror/lib/runmode.js b/src/codemirror/lib/runmode.js old mode 100644 new mode 100755 diff --git a/src/codemirror/manual.html b/src/codemirror/manual.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/clike/clike.js b/src/codemirror/mode/clike/clike.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/clike/index.html b/src/codemirror/mode/clike/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/clojure/clojure.js b/src/codemirror/mode/clojure/clojure.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/clojure/index.html b/src/codemirror/mode/clojure/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/coffeescript/LICENSE b/src/codemirror/mode/coffeescript/LICENSE old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/coffeescript/coffeescript.js b/src/codemirror/mode/coffeescript/coffeescript.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/coffeescript/index.html b/src/codemirror/mode/coffeescript/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/css/css.js b/src/codemirror/mode/css/css.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/css/index.html b/src/codemirror/mode/css/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/diff/diff.css b/src/codemirror/mode/diff/diff.css old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/diff/diff.js b/src/codemirror/mode/diff/diff.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/diff/index.html b/src/codemirror/mode/diff/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/haskell/haskell.js b/src/codemirror/mode/haskell/haskell.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/haskell/index.html b/src/codemirror/mode/haskell/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/htmlmixed/htmlmixed.js b/src/codemirror/mode/htmlmixed/htmlmixed.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/htmlmixed/index.html b/src/codemirror/mode/htmlmixed/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/javascript/index.html b/src/codemirror/mode/javascript/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/javascript/javascript.js b/src/codemirror/mode/javascript/javascript.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/jinja2/index.html b/src/codemirror/mode/jinja2/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/jinja2/jinja2.js b/src/codemirror/mode/jinja2/jinja2.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/lua/index.html b/src/codemirror/mode/lua/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/lua/lua.js b/src/codemirror/mode/lua/lua.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/markdown/index.html b/src/codemirror/mode/markdown/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/markdown/markdown.css b/src/codemirror/mode/markdown/markdown.css old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/markdown/markdown.js b/src/codemirror/mode/markdown/markdown.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/ntriples/index.html b/src/codemirror/mode/ntriples/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/ntriples/ntriples.js b/src/codemirror/mode/ntriples/ntriples.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/pascal/LICENSE b/src/codemirror/mode/pascal/LICENSE old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/pascal/index.html b/src/codemirror/mode/pascal/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/pascal/pascal.js b/src/codemirror/mode/pascal/pascal.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/php/index.html b/src/codemirror/mode/php/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/php/php.js b/src/codemirror/mode/php/php.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/plsql/index.html b/src/codemirror/mode/plsql/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/plsql/plsql.js b/src/codemirror/mode/plsql/plsql.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/python/LICENSE.txt b/src/codemirror/mode/python/LICENSE.txt old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/python/index.html b/src/codemirror/mode/python/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/python/python.js b/src/codemirror/mode/python/python.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/r/LICENSE b/src/codemirror/mode/r/LICENSE old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/r/index.html b/src/codemirror/mode/r/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/r/r.js b/src/codemirror/mode/r/r.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/rst/index.html b/src/codemirror/mode/rst/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/rst/rst.css b/src/codemirror/mode/rst/rst.css old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/rst/rst.js b/src/codemirror/mode/rst/rst.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/ruby/LICENSE b/src/codemirror/mode/ruby/LICENSE old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/ruby/index.html b/src/codemirror/mode/ruby/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/ruby/ruby.js b/src/codemirror/mode/ruby/ruby.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/scheme/index.html b/src/codemirror/mode/scheme/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/scheme/scheme.js b/src/codemirror/mode/scheme/scheme.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/smalltalk/index.html b/src/codemirror/mode/smalltalk/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/smalltalk/smalltalk.js b/src/codemirror/mode/smalltalk/smalltalk.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/sparql/index.html b/src/codemirror/mode/sparql/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/sparql/sparql.js b/src/codemirror/mode/sparql/sparql.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/stex/index.html b/src/codemirror/mode/stex/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/stex/stex.js b/src/codemirror/mode/stex/stex.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/velocity/index.html b/src/codemirror/mode/velocity/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/velocity/velocity.js b/src/codemirror/mode/velocity/velocity.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/xml/index.html b/src/codemirror/mode/xml/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/xml/xml.js b/src/codemirror/mode/xml/xml.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/xmlpure/index.html b/src/codemirror/mode/xmlpure/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/xmlpure/xmlpure.js b/src/codemirror/mode/xmlpure/xmlpure.js old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/yaml/index.html b/src/codemirror/mode/yaml/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/mode/yaml/yaml.js b/src/codemirror/mode/yaml/yaml.js old mode 100644 new mode 100755 diff --git a/src/codemirror/oldrelease.html b/src/codemirror/oldrelease.html old mode 100644 new mode 100755 diff --git a/src/codemirror/test/index.html b/src/codemirror/test/index.html old mode 100644 new mode 100755 diff --git a/src/codemirror/test/test.js b/src/codemirror/test/test.js old mode 100644 new mode 100755 diff --git a/src/codemirror/theme/cobalt.css b/src/codemirror/theme/cobalt.css old mode 100644 new mode 100755 diff --git a/src/codemirror/theme/default.css b/src/codemirror/theme/default.css old mode 100644 new mode 100755 diff --git a/src/codemirror/theme/eclipse.css b/src/codemirror/theme/eclipse.css old mode 100644 new mode 100755 diff --git a/src/codemirror/theme/elegant.css b/src/codemirror/theme/elegant.css old mode 100644 new mode 100755 diff --git a/src/codemirror/theme/neat.css b/src/codemirror/theme/neat.css old mode 100644 new mode 100755 diff --git a/src/codemirror/theme/night.css b/src/codemirror/theme/night.css old mode 100644 new mode 100755 diff --git a/src/css/coderdeck.css b/src/css/coderdeck.css old mode 100644 new mode 100755 index 05290a6..6b9e644 --- a/src/css/coderdeck.css +++ b/src/css/coderdeck.css @@ -3,23 +3,23 @@ html, body { color: #222; margin: 0; padding: 0; - /*background: url(../../assets/ladieslearningcode-125x125.gif) 10px -10px no-repeat;*/ + background: url(../../assets/ladieslearningcode-125x125.gif) 10px -10px no-repeat; /*border-top: 7px #b1009a solid;*/ } .deck-container #presentation { - + padding-top: 20px !important; } .deck-container { font-family: 'Istok Web', Arial, sans-serif; font-weight: 400; font-size: 1em; padding: 0; /* overriding deck.coder.css */ - padding-left: 5px; /* use 145px if using LLC logo */ + padding-left: 145px; } .deck-container h1, .deck-container h2, .deck-container h3 { color: #B1009A; - font-family: 'Podkova', Arial, sans-serif; + font-family: 'Podkova', Arial, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .deck-container strong { @@ -30,7 +30,7 @@ html, body { .deck-container .slide { background: #fff; width: 940px; - /*height: 100%;*/ /* allow vertical scrolling -- espeically when there's lots of code */ + height: 100%; min-height: 600px; border: 3px solid #b1009a; border-radius: 10px; @@ -39,26 +39,12 @@ html, body { padding: 30px 50px 40px 50px; } -/* Added so code editor areas won't resize in height */ -.CodeMirror-scroll { - height: auto !important; - overflow-y: hidden; - overflow-x: auto; - width: 100%; - min-height: 200px; -} - -.coder-destination { - bottom: auto !important; - top: 0 !important; -} - .deck-container .slide-title { font-size: 1em; text-align: center; } .deck-container .slide-title .workshop_title { - margin: 90px 0 0 0; + margin: 30px 0 0 0; } .deck-container .slide-title .download_link { font-size: 1.3em; @@ -73,7 +59,7 @@ html, body { .deck-container .instructor_holder { width: 560px; - margin: 70px auto 0 auto; + margin: 110px auto; } .deck-container .instructor_holder h2 { text-transform: uppercase; @@ -105,7 +91,7 @@ html, body { margin-bottom: .1em; } .deck-container .slide-list ul, .deck-container .slide-list p { - font-size: 1.8em; + font-size: 1.6em; } .deck-container .slide-list ul { margin-left: 1em; @@ -114,7 +100,7 @@ html, body { } .deck-container .slide-list li { padding-left: .5em; - line-height: 1.2em; + line-height: 1em; } .deck-container .slide-list li ul { margin-bottom: 0; @@ -241,19 +227,13 @@ table.comparison-table tr td, table.comparison-table tr th { } .deck-container ol { - font-size: 1.8em; + font-size: 1.6em; } .centered { text-align: center; } -.vertically_centered { - position: absolute; - top:30%; - left: 40%; -} - .sidenote { font-size: 17px !important; line-height: 18px; @@ -275,11 +255,10 @@ table.comparison-table tr td, table.comparison-table tr th { } .keyword { - color: #B1009A; - font-weight: bold !important; - font-style: italic !important; + font-weight: 700; + text-transform: uppercase; + color: #2E2E2E; } - .deck-container .reminders { background: url("../../assets/icon-reminder.jpg") no-repeat; font-size: 1.2em; @@ -325,28 +304,4 @@ span.marker { .highlight { background-color: #FF9; -} - -.smaller { - font-size: 0.5em !important; -} - -.solution-link { - text-align: center; - padding-top: 20px !important; - font-size: 17px !important; -} - -.show-hint { - color: #B1009A; - font-size: 16px !important; - font-style: italic !important; - cursor: pointer; -} - -.hint-solution { - display: none; - color: #888; - font-size: 16px !important; - font-style: italic !important; } \ No newline at end of file diff --git a/src/css/coderdeck.scss b/src/css/coderdeck.scss old mode 100644 new mode 100755 diff --git a/src/css/deck.coder.css b/src/css/deck.coder.css old mode 100644 new mode 100755 diff --git a/src/css/prettify.css b/src/css/prettify.css old mode 100644 new mode 100755 diff --git a/src/deck.coder.js b/src/deck.coder.js old mode 100644 new mode 100755 index d26a138..79d3d45 --- a/src/deck.coder.js +++ b/src/deck.coder.js @@ -295,7 +295,7 @@ This module adds a code editor that shows up in individual slides } - //$("a").attr('target','_blank'); //removed by Pearl Chen - Oct 8 + $("a").attr('target','_blank'); $.each($[deck]('getSlides'), prepareSlide); prettyPrint(); @@ -312,12 +312,3 @@ This module adds a code editor that shows up in individual slides }); })(jQuery,'deck',this); - -/* *********** Added by Pearl ********** -* Incorporate this into final framework -*/ - -function showHint(answerContainerId) { - var preTags = document.getElementById(answerContainerId).style.display = "block"; -} - diff --git a/src/deck.js/GPL-license.txt b/src/deck.js/GPL-license.txt old mode 100644 new mode 100755 diff --git a/src/deck.js/MIT-license.txt b/src/deck.js/MIT-license.txt old mode 100644 new mode 100755 diff --git a/src/deck.js/README.md b/src/deck.js/README.md old mode 100644 new mode 100755 diff --git a/src/deck.js/core/deck.core.css b/src/deck.js/core/deck.core.css old mode 100644 new mode 100755 diff --git a/src/deck.js/core/deck.core.html b/src/deck.js/core/deck.core.html old mode 100644 new mode 100755 diff --git a/src/deck.js/core/deck.core.js b/src/deck.js/core/deck.core.js old mode 100644 new mode 100755 diff --git a/src/deck.js/extensions/goto/deck.goto.css b/src/deck.js/extensions/goto/deck.goto.css old mode 100644 new mode 100755 diff --git a/src/deck.js/extensions/goto/deck.goto.html b/src/deck.js/extensions/goto/deck.goto.html old mode 100644 new mode 100755 diff --git a/src/deck.js/extensions/goto/deck.goto.js b/src/deck.js/extensions/goto/deck.goto.js old mode 100644 new mode 100755 diff --git a/src/deck.js/extensions/hash/deck.hash.css b/src/deck.js/extensions/hash/deck.hash.css old mode 100644 new mode 100755 diff --git a/src/deck.js/extensions/hash/deck.hash.html b/src/deck.js/extensions/hash/deck.hash.html old mode 100644 new mode 100755 diff --git a/src/deck.js/extensions/hash/deck.hash.js b/src/deck.js/extensions/hash/deck.hash.js old mode 100644 new mode 100755 diff --git a/src/deck.js/extensions/hash/deck.hash.scss b/src/deck.js/extensions/hash/deck.hash.scss old mode 100644 new mode 100755 diff --git a/src/deck.js/extensions/menu/deck.menu.css b/src/deck.js/extensions/menu/deck.menu.css old mode 100644 new mode 100755 diff --git a/src/deck.js/extensions/menu/deck.menu.js b/src/deck.js/extensions/menu/deck.menu.js old mode 100644 new mode 100755 diff --git a/src/deck.js/extensions/navigation/deck.navigation.css b/src/deck.js/extensions/navigation/deck.navigation.css old mode 100644 new mode 100755 diff --git a/src/deck.js/extensions/navigation/deck.navigation.html b/src/deck.js/extensions/navigation/deck.navigation.html old mode 100644 new mode 100755 diff --git a/src/deck.js/extensions/navigation/deck.navigation.js b/src/deck.js/extensions/navigation/deck.navigation.js old mode 100644 new mode 100755 diff --git a/src/deck.js/extensions/scale/deck.scale.css b/src/deck.js/extensions/scale/deck.scale.css old mode 100644 new mode 100755 diff --git a/src/deck.js/extensions/scale/deck.scale.js b/src/deck.js/extensions/scale/deck.scale.js old mode 100644 new mode 100755 diff --git a/src/deck.js/extensions/scale/deck.scale.scss b/src/deck.js/extensions/scale/deck.scale.scss old mode 100644 new mode 100755 diff --git a/src/deck.js/extensions/status/deck.status.css b/src/deck.js/extensions/status/deck.status.css old mode 100644 new mode 100755 diff --git a/src/deck.js/extensions/status/deck.status.html b/src/deck.js/extensions/status/deck.status.html old mode 100644 new mode 100755 diff --git a/src/deck.js/extensions/status/deck.status.js b/src/deck.js/extensions/status/deck.status.js old mode 100644 new mode 100755 diff --git a/src/deck.js/introduction/index.html b/src/deck.js/introduction/index.html old mode 100644 new mode 100755 diff --git a/src/deck.js/introduction/introduction.css b/src/deck.js/introduction/introduction.css old mode 100644 new mode 100755 diff --git a/src/deck.js/introduction/introduction.js b/src/deck.js/introduction/introduction.js old mode 100644 new mode 100755 diff --git a/src/deck.js/jquery-1.6.4.min.js b/src/deck.js/jquery-1.6.4.min.js old mode 100644 new mode 100755 diff --git a/src/deck.js/modernizr.custom.js b/src/deck.js/modernizr.custom.js old mode 100644 new mode 100755 diff --git a/src/deck.js/test/fixtures/complex.html b/src/deck.js/test/fixtures/complex.html old mode 100644 new mode 100755 diff --git a/src/deck.js/test/fixtures/iframe_simple.html b/src/deck.js/test/fixtures/iframe_simple.html old mode 100644 new mode 100755 diff --git a/src/deck.js/test/fixtures/iframes.html b/src/deck.js/test/fixtures/iframes.html old mode 100644 new mode 100755 diff --git a/src/deck.js/test/fixtures/standard.html b/src/deck.js/test/fixtures/standard.html old mode 100644 new mode 100755 diff --git a/src/deck.js/test/index.html b/src/deck.js/test/index.html old mode 100644 new mode 100755 diff --git a/src/deck.js/test/spec.goto.js b/src/deck.js/test/spec.goto.js old mode 100644 new mode 100755 diff --git a/src/deck.js/test/spec.hash.js b/src/deck.js/test/spec.hash.js old mode 100644 new mode 100755 diff --git a/src/deck.js/test/spec.menu.js b/src/deck.js/test/spec.menu.js old mode 100644 new mode 100755 diff --git a/src/deck.js/test/spec.navigation.js b/src/deck.js/test/spec.navigation.js old mode 100644 new mode 100755 diff --git a/src/deck.js/test/spec.scale.js b/src/deck.js/test/spec.scale.js old mode 100644 new mode 100755 diff --git a/src/deck.js/test/spec.status.js b/src/deck.js/test/spec.status.js old mode 100644 new mode 100755 diff --git a/src/deck.js/themes/style/neon.css b/src/deck.js/themes/style/neon.css old mode 100644 new mode 100755 diff --git a/src/deck.js/themes/style/neon.scss b/src/deck.js/themes/style/neon.scss old mode 100644 new mode 100755 diff --git a/src/deck.js/themes/style/swiss.css b/src/deck.js/themes/style/swiss.css old mode 100644 new mode 100755 diff --git a/src/deck.js/themes/style/swiss.scss b/src/deck.js/themes/style/swiss.scss old mode 100644 new mode 100755 diff --git a/src/deck.js/themes/style/web-2.0.css b/src/deck.js/themes/style/web-2.0.css old mode 100644 new mode 100755 diff --git a/src/deck.js/themes/style/web-2.0.scss b/src/deck.js/themes/style/web-2.0.scss old mode 100644 new mode 100755 diff --git a/src/deck.js/themes/transition/fade.css b/src/deck.js/themes/transition/fade.css old mode 100644 new mode 100755 diff --git a/src/deck.js/themes/transition/fade.scss b/src/deck.js/themes/transition/fade.scss old mode 100644 new mode 100755 diff --git a/src/deck.js/themes/transition/horizontal-slide.css b/src/deck.js/themes/transition/horizontal-slide.css old mode 100644 new mode 100755 diff --git a/src/deck.js/themes/transition/horizontal-slide.scss b/src/deck.js/themes/transition/horizontal-slide.scss old mode 100644 new mode 100755 diff --git a/src/deck.js/themes/transition/vertical-slide.css b/src/deck.js/themes/transition/vertical-slide.css old mode 100644 new mode 100755 diff --git a/src/deck.js/themes/transition/vertical-slide.scss b/src/deck.js/themes/transition/vertical-slide.scss old mode 100644 new mode 100755 diff --git a/src/intro.js b/src/intro.js old mode 100644 new mode 100755 diff --git a/src/jquery.min.js b/src/jquery.min.js old mode 100644 new mode 100755 diff --git a/src/jquery.tmpl.min.js b/src/jquery.tmpl.min.js old mode 100644 new mode 100755 diff --git a/src/modernizr.js b/src/modernizr.js old mode 100644 new mode 100755 diff --git a/src/prettify.js b/src/prettify.js old mode 100644 new mode 100755 diff --git a/tech_overview.html b/tech_overview.html deleted file mode 100644 index 0eada36..0000000 --- a/tech_overview.html +++ /dev/null @@ -1,459 +0,0 @@ - - - - - Ladies Learning Code - JavaScript Oct 13, 2012 - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    -

    Development Environment

    -

     3  2 tools you need to get started

    -
    - - -
    -

    1. Web Browser

    -

    - Choose a modern web browser that has good, built-in development tools to help make building web pages easier. -

    -
    - Chrome -
    - Google Chrome -
    -
    -
    -
    -
    -

    - (If you are unable to install Chrome: -
    - install - Firefox and - Firebug - .) -

    -
    - - -
    -

    2. Code Editor

    -

    - There are many, many free and paid options* but let's keep it simple for our mentors today and just use one to edit our code. -

    -
    - Sublime Text 2 -
    - Sublime Text -
    -
    -
    -
    -
    -

    - *Others include: TextMate, Notepad++, and Text Wrangler. -
    - Ask a group of developers what they use and arguments will ensue -- it's a very personal choice! ;) -

    -
    - - -
    -

    3. File Transfer Program (FTP)

    -

    - Do you already have your own hosted website? FTP software will let you copy the files you work on today to somewhere where the rest of the world can see them! -

    -
    - CyberDuck -
    - CyberDuck -
    -
    -
    -
    -
    -

    - Again, there are many, many free and paid options. -
    - FileZilla - is good when you're more advanced. -

    -
    - - -
    -

    Technology Overview

    -

    Programming and JavaScript

    -
    - - -
    -

    What is JavaScript?

    -

    - It's a - programming language -

    - designed to run in your web browser to -

    - manipulate content on web pages. -

    -
    - - -
    -

    What is JavaScript?

    -

    - It's a - programming language -

    - designed to run in your web browser to -

    - manipulate content on web pages. -

    -
    - - -
    -

    What is Programming?

    -

    - A - program - is a set of instructions - meant for a computer to execute. -

    -

    Computers are fast but blind.

    -

    As the first step to our new system integration, please take a blind fold.

    -
    - - -
    -

    Better Code = Clearer Instructions

    -

    - Think about a tourist that stops you to ask for directions:

    -

    - The clearer the instructions, the more likely they will get to their destination.

    -

    Give clear directions

    -
    - - - -
    -

    Break it down

    -

    Suppose I want a computer to say hello to using my name.

    -

    Break down the steps as much as possible:

    -
      -
    1. Allow me to type in my name.
      2. -
    2. Remember my name.
      3. -
    3. Say "Hello" and repeat back my name.
      4. -
    -

    - -
    - - - -
    -

    What is a Programming Language?

    -

    - Programming is about having a conversation with your computer.

    -

    - Computers only understand things when you speak to them in a certain way. Much like English or any other natural language, programming is about sticking to grammar rules -- this is called - syntax - . -

    -

    Beep beep Computers have come a long way since their binary days (0 1 0 0 1 0 0 0 0 1 0 0 0 1 0 1 0 1 0 0 1 1 0 0 0 1 0 0 1 1 0 0 0 1 0 0 1 1 1 1) so meet them half-way.

    -
    -
    - - -
    -

    Example Programming Syntaxes

    -

    Different programming languages have different syntax.

    -

    Here are two ways a computer could say hi to me:

    -

    - Java

    - 
    Scanner userInput = new Scanner(System.in);
-String name;
-System.out.print("What's your name? ");
-name = userInput.next();
-System.out.println("Hello, " + name);
    - -

    - JavaScript ( Try it out now! - )

    - - 
    var name;
-name = window.prompt("What's your name?",'');
-document.write("Hello, " + name);
    - -
    - - -
    -

    JavaScript versus Java

    -

    - They might vaguely look the same (as a lot of programming languages do) but they are not related at all.

    -

    - Java is to JavaScript as ham is to hamster. -

    -

    (Java was really popular at the time so Netscape just hijacked the name.)

    -
    - - - -
    -

    What is JavaScript?

    -

    - It's a - programming language -

    - designed to run in your web browser to -

    - manipulate content on web pages. -

    -
    - - -
    -

    JavaScript in the Browser

    -

    - C++, Java, and .NET are also programming languages but they can be run directly by the operating system - (e.g. Windows, Mac, Linux). -

    -

    - JavaScript is typically meant to be run in a - web browser - (e.g. Safari, Firefox, Chrome, Internet Explorer). -

    -

    - Different programmig languages and the environments they run in -

    -
    - - -
    -

    Web Programming Languages: Server-side vs Client-side

    -

    -

    - Java, .NET, PHP or Ruby can be considered server-side or "back-end" web technology because the code is typically compiled and executed by the operating system of a computer serving up web pages.

    -

    - JavaScript is referred to as a client-side or "front-end" web technology because it's interpreted by the web browser.

    - -
    - - -
    -

    Simple Client-Side Code Check

    -


    - Right-click to View Source -

    -

    -
    -At any time, someone can right-click and "view source" on a web page to see all the JavaScript that went into it.

    -

    (I suggest that you do this yourself every time you see something you like!)

    -

    -
    -

    - Whereas for server-side code, it's sometimes a mystery what technology is running on a server. -

    -
    - - - -
    -

    What is JavaScript?

    -

    - It's a - programming language -

    - designed to run in your web browser to -

    - manipulate content on web pages. -

    -
    - - -
    -

    The Web Triad

    -

    - JavaScript was meant to manipulate webpages written in HTML and works in tandem with CSS. -

    - - - - - - - - - - - - - - - - -
    HTML (Hypertext Markup Language)
    - is the markup language.    		CSS (Cascading Style Sheets)
    - is the style sheet language.    		JavaScript
    - is the programming language.
    content layerPresentation LayerBehaviour Layer
    It should define the content.It should define the presentationIt should define behaviour.
    -
    - - -
    -

    JavaScript in Different Browsers

    -

    - For the most part, JavaScript will run the same in various web browsers but sometimes they say "hi" with different accents.

    Imagine a British accent versus a Texas accent -- it's still English underneath but there's some variations and unique slang.

    -

    This is especially noticeable with newer "HTML5" features.
    - Insert Internet Explorer joke here. ;)

    - -
    - - -
    -

    A JavaScript Experiment

    -

    - JavaScript is essential for "AJAX", "Web 2.0", and "HTML5" websites. -

    -

    - Try this experiment: Turn off JavaScript in your web browser. Go to the JavaScript settings for Chrome ( - chrome://settings/content - ) and select "Do not allow any site to run JavaScript" -

    -

    Then visit your daily sites.

    -

    - e.g. - Google - , - Facebook - , - Twitter -

    -

    (Remember to turn JavaScript back on to see this presentation!) -

    -
    - - -
    -

    A JavaScript Experiment: Results

    -

    Note the sometimes subtle and sometimes major differences:

    -
      -
    • - No search auto-completion and instant page refreshes on google.com -
      • -
    • - No inline video content or lightboxed photo viewers on facebook.com -- not to mention broken "Like" buttons and inability to comment on posts! -
      • -
    • - On twitter.com - older tweets don't load at the bottom of the page. Warning message on top of page. Navigation doesn't work. Popups don't work. -
      • -
    • - And you can't see it but most analytics tracking won't work either.
      • -
    -

    - The modern web just sort of gives up without JavaScript! -

    -
    - - -
    -

    JavaScript helps make very nice websites!

    -

    - Especially "one-page apps" where the experience is very seamless. -

    -

    - The new web design guidelines
    - - - Like - this one

    -
    - - -
    -

    Click to go to next section

    -
    - - - -
    - - -
    (Use the left and right arrow keys on your keyboard to navigate.)
    - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file