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
Post your Intro to the Assign01 in Moodle or Canvas.
Make sure your CCV email is forwarding to the email that you use daily!
Watch the Video: Java is NOT JavaScript https://www.youtube.com/watch?v=Wpeym1_lmPo&feature=youtu.be
Code B+A
Read about our Textbook (On Line Resources from W3Schools) https://www.w3schools.com/about/
JavaScript Home https://www.w3schools.com/js/default.asp
JavaScript Intro https://www.w3schools.com/js/js_intro.asp
JavaScript WhereTo https://www.w3schools.com/js/js_whereto.asp
This first example of JavaScript is INLINE, meaning you can write JavaScript inside the HTML file. Shortly we will be putting our JavaScript into a separate file, much as we do with CSS.
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.
Read and set up your ClassWeb.ccv.edu server space
https://sites.google.com/site/jilmactraining/web-development/CLASSweb_ccv_edu
From W3Schools, copy the code from MyFirstJavaScript save it - this is your Before Code
Modify the MyFirstJavaScript by adding your name to the Upload your
Post your Intro to the Assign01 in Moodle or Canvas.
Post a link to the file, it should look similar to this:
Before: http://jam08260.classweb.ccv.edu/JavaScript/Assign01/script01.html
After: http://jam08260.classweb.ccv.edu/JavaScript/Assign01/script01-after.html
or
Before: http://jam08260.classweb.ccv.edu/JavaScript/Assign01/MyFirstJavaScript.html
=================== 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
Make sure your CCV email is forwarding to the email that you use daily!
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 all EXAMPLES http://JavaScriptWorld.com Click DOWNLOAD THE SCRIPTS under the title
Download & Install an FTP Client
Note: this video is for the intro to WebDev class but many of the concepts are the same
MAC users if you are having issues with your FTP package Try Filezilla from this download https://filezilla-project.org/codesquid/temp/FileZilla3.app.tar.bz2 it works as of 2/9/2016
CCV info on STWEB https://harvey.ccv.edu/students/SitePages/StudentWebServer.aspx
If you have any questions JilMac can support you 100% through the course. give JilMac a call - 802-254-8628 - leave your phone number, repeat it slowly, thank you
=================================
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.
JavaScript: Visual QuickStart Guide (9th or 8th Edition)
Book's Web Site http://www.javascriptworld.com
Download the scripts - click the "Download the Scripts" from the TOP Nav http://www.javascriptworld.com
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 all EXAMPLES http://JavaScriptWorld.com Click DOWNLOAD THE SCRIPTS under the title
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
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
GoDaddy http://MyVermont.tv/CCV/PHP/PHPinfo.php
CrystalTech http://mac-rand.com/CCV/PHP/PHPinfo.php
MySQL Documentation ex. create-table
http://dev.mysql.com/doc/refman/5.6/en/create-table.html
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
HTML5's canvas - vs- Action Script = http://www.williammalone.com/articles/flash-vs-html5-canvas-drawing/?gclid=CPTByo-iqK0CFegSNAodoxPHng
Canvas & Browser Compatability http://www.williammalone.com/articles/html5-canvas-example/#subTitle0
20 Things I learned (written in HTML5) http://www.20thingsilearned.com/en-US/old-vs-new-browsers/2
HTML5 Demos http://html5demos.com try the interactive Canvas-Gradiant http://html5demos.com/canvas-grad