JS-Assignments

Classes are broken into 14 Assignments.

For Fall & Spring semesters that are 15 weeks - we will do 1 Assignment per week

For Summer semesters that are 12 weeks - we will do 2 Assignments for the first 2 weeks and then 1 Assignment for the 10 remaining weeks

Assign01 due in approx 1 week, Note: Setting up your ClassWeb may take longer.

  • Please watch our Welcome video: https://www.youtube.com/watch?v=wCPl4gl-SQw

  • Research

    • Introduction:

        • Introduce yourself to the class. Tell us about what other classes you have taken, what you do for work/hobbies/passions, If you have chosen a degree or certificate, What your goals are for this class.

          • What type of computer you have Win/Mac, operating system Win10, OSx, Linux, etc.

          • What software applications you use, Microsoft, Word, Excel, Access, Photoshop, Flash, Dreamweaver, etc.

          • Have you learned any other languages? Python, Java, C++ or others

          • What Website(s) do you use most often?

          • Have you ever used W3Schools https://www.w3schools.com where we will be learning about PHP and MySQL ?

          • And anything else you think would help me when it comes time to explain a new concept - so I know something to attach the concept to.

        • Here is my Bio - My introduction to you. https://sites.google.com/site/jilmactraining/jil_macmenamin

      • CCV has their own Student Web Server ClassWeb.ccv.edu

      • We will be using ClassWeb to upload and run our JavaScript, HTML & CSS programs LIVE on the web.

=================== PREVIOUS SEMESTERS ==============

PREVIOUS Semester Assignments 2016 CCV's CIS-2140 Programming for the Internet using JavaScript, HTML5 & CSS

YES that is correct, this class is an accelerated Summer 7 week session. There is an Assignment on Tues (odd's) & Fri (even's) each week.

Assignment01 Jun 28 due in approx 1 week, although it may take longer

  • JS_Assign01-14.doc https://sites.google.com/site/jilmactraining/internet-programming-js/ip-handouts

  • Read the Introduction and Chapters 1 + 2 JavaScript & Start Me Up! from your Textbook

  • Research - Introduce Yourself & your Computer System

    • Introduce Yourself, Your Background & Goals and your Computer Systems

    • put this in an eMail to Jil@JilMac.com

  • Coding-Before & After it may take you several weeks to complete this assignment.

    • Download the Source Code

    • Download & Install an FTP Client

=================================

Assignment02 Jul 01 due in approx 1 week, although it may take longer

  • Overview

    • Each week/assignment you will have the option to earn 3 points, one for each code examples.Each code example will consist of the BEFORE code – that runs on your STWEB site, you make changes to the code – and list the changes in the comments and put the AFTER code on your web site with a link to each.

    • Download the source code – I DO NOT expect you to hand type the examples:

      • 1. Click the "Download the Scripts" from the TOP navigation

      • 2. Save the .zip file to your hard drive or other media

      • 3. Extract or Unzip the files

    • Post the link to your Assignment in Moodle.

    • All students have the option to use an example from their text books – or to find a similar example from the web.You need to post the link to where the before example came from if you use a web example.

    • You can create an index.htm file in each Assignment Directory where you can put a link to your Discussion Research problem and links to each of the three Before+After examples you want credit for.

    • Each person is allowed to learn at their comfort level.I don’t tell you WHAT to change – you get to decide.I only want you to change something at your comfort level.I want you to get the process down, find and example – make it run ON YOUR SERVER, save that as your BEFORE, then change something, document it, and save it as your AFTER example – have LINKS to the Before & After from your web site.This is so others can look at your work

  • THIS IS NOT A RACE – This is a journey.

    • If someone else has something more exciting than your example – go into their source code (View, Source Code) and see what they did, compliment them on it.

    • When you are more comfortable – you can expand your examples – maybe incorporate some of what you have learned from each other.I also encourage you to combine this class with another class/project/work assignment - applying what we are doing, and sharing that application makes the projects richer.

  • JS_Assign02-14.doc https://sites.google.com/site/jilmactraining/internet-programming-js/ip-handouts

  • Read the Introduction and Chapters Chap 3 + 4 First Web App & Working with Images from your Textbook

  • Research - Editors: Sublime Text or Notepad++

    • What do Sublime Text or Notepad++ do that Notepad or plain text editors don't??

    • How does it compare to say ... Dreamweaver or the Editor you use?

    • Create an index.html with the info from your Introduction and Assign01.html document containing your research.

  • Coding-Before & After it may take you several weeks to complete this assignment.

    • Download the Source Code

    • Download & Install an FTP Client https://youtu.be/HNNfaBsTIiQ Note: this video is for the intro to WebDev class but many of the concepts are the same.

      • If you have any questions give JilMac a call - 802-254-8628 - leave your phone number, repeat it slowly, thank you

=================================

JilMac is transitioning from a Table Based layout (good for computers) to a Linear based outline (better for phones) - these will be updated each week.

Jul 05

Jul 08

Jul 12

Jul 15

Jul 19

Jul 22

Jul 26

Jul 29

Aug 02

Aug 05

Aug 09

Aug 12

Aug 21 at 11:59 PM

Aug 21 at 11:59 PM

Chap 5 + 6

Windows & Frames & Form Handling

Chap 7 - Forms & Regular Expressions

Client Side Programming

DOM & W3schools (TryIT)

IP Address tracer

Extra Examples from previous book: Chap 5 + 6

JavaScript & DOM

Menu's & Navigation is easier if you use PHP Includes or Requires

Extra Examples from previous book: Chap 7 + 8

Functions, Objects, Flow & Loops

JavaScript Libraries

LinkedIN - everyone should have an account

Chap 5 & Chap 6

Chap 7

Chap 8

OR

Examples of Students Choice

Chap 9

Text Book ERRATA

Chap 10

Chap 11

Chap 12

Chap 13 and Be aware there are "Variations of Ajax as Chap 20 outlines & RSS Feeds.

Chap 14 and A nice analogy for REST vs. SOAP is mailing a letter: with SOAP, you're using an envelope; with REST, it's a postcard."

Chapter 15 and Advanced Ajax or Student Choice.

Chapter 16

Chapter 17

Chapter 18

Script.aculo.us

You want included in your grade

What data can JavaScript pull from Client Computers?

Debuggers -vs-Editor ..... our First Look

http://www140.lunapic.com

Use LunaPic to create a ripple effect on your .gif graphics. Or pick another of their effects.

Graphic Fun - adding effects to images

Chap 8 - Handling Events

and

Appendix A - JavaScript Genealogy & Reference

Chap 9

JavaScript & Cookies

and

Appendix B - JavaScript Reserved Words

Chap 10

Objects and the DOM

and

Appendix C - CSS Cascading Style Sheets Ref.

Chap 11

Making your Pages Dynamic

and

Appendix D - Where to learn more

Chap 12

Applied JavaScript

and

Chap 13 Introducing AJAX

Chap 14

Toolkits, Frameworks and Libraries

Chap 15

Designing with JQuery

Chap 16

Building on jQuery

Chap 17

Scripting Mobile Devices

Chap 18

Bookmarklets

Completion of Project, Share projects with the Class.

Midnight (11:59pm)

Domain Names

Extra Examples from previous book: Chap 15 + 16 Variables & Flow Control

Menus, Pull=Down, SlideShows, Graph Generators

Extra Examples from previous book: Chap 17 + 18 Functions, Values, PHP Objects & OOP

Extra Examples from previous book: Chap 13 + 14 AJAX & PHP

Ajax

Extra Examples from previous book: Chap 19 + 20 Text files stored on the Server

Shared Web Hosting. What applications and versions of the programs & applications run on each host?

Extra Examples from previous book: Chap 21 + 22 XML files stored on the Server. Web Services, REST & SOAP Protocals

CMS - Content Management Systems: Joomla, Word Press, Drupal, Moodle, Google

Extra Examples from previous book: Chap 23 + 24 Dynamic Data, XML & Ajax

Google Sites

Extra Examples from previous book: Chap 25 + 26

ToolKit & Rico

Discuss J-QueryMobile

Extra Examples from previous book: Chap 27

Script.aculo.us & XOAD

Project Final Push

DOM, Nodes, Objects

Research: PHP & Editors

Products that generate JavaScript: Dreamweaver, Photoshop Automate, On-Line sources, etc.

Cookies-each browser/version stores cookies in a different way.

Products that generate JavaScript: Dreamweaver, Photoshop Automate, On-Line sources, etc.

Validators: I have a page devoted to them & editors and the list is growing https://sites.google.com/site/jilmactraining/internet-programming-js/editors

http://validator.w3.org/ - you enter your URL and the W3C (WWW Consortium) Validator lists things that you should address. These may be causing something else further down to not function properly.

Overview of Chap 8 and Other Examples

Extra Examples from previous book: Chap 9 + 10

Functions, Libraries & AJAX

What do examples do? How to tell

Responsive Web Sites

http://www.youtube.com/watch?v=GVoP5WEgCfY#!

JavaScript Generators http://www.csgnetwork.com/codegenconverters.html

Working with the Dom

https://www.youtube.com/watch?feature=player_embedded&v=t15KrZA4yRY#!

PHPinfo.php - program that runs on the server

1 wk

1 wk

1 wk

1 wk

1 wk

1 wk

1 wk

1 wk

1 wk

1 wk

1 wk

by Midnight

Explination for Functions & Classes

http://www.htmlgoodies.com/beyond/php/article.php/3472491/PHP-Tutorial-Functions.htm

CSS3 has some generators:

All Assignments, Code, Project, Extra Credit on your Web Server that you want included in your grade by Midnight

Shared Web Hosting - how is STWEB similar/different?

The newest Library D3 = Data Driven Documents

https://www.dashingd3js.com/why-build-with-d3js

It is a data visualization framework

Why? https://www.dashingd3js.com/why-data-visualizations

Searching Google, Images, Maps, etc.

Captcha http://www.captcha.net the original

the new Captcha is called reCaptcha

https://www.google.com/recaptcha/intro/index.html

Developers at Google

https://developers.google.com/recaptcha

to get one from Google you have to sign up

https://developers.google.com/recaptcha/docs/star

Answer Students Questions on Projects as needed