Interactive Web Sites - CIS250/47

Weekly Schedule

Remember RE-SUBMIT. If you get back a homework with errors and without a grade it means it has not been graded - you need to fix and resubmit to get a grade.

The CIS pool is now available for students that need to access licensed software that they cannot use from home.
Remote access virtual desktop
Instructional video for using Remote Access Virtual Desktop - HTML

Week Information
Assignments due in one week unless otherwise stated. I may add some things during the week, so double check the schedule each week! Please keep copies of all work you submit until you receive your final grade at the end of the semester.
HELP schedule My office hours are 1 on Monday, 10 on Tuesday, 1 on Wednesday, 10 on Thursday. If it turns out other hours work better for students these may change, so check back. I am also available by request (give me a few time options) especially while we get other support in place. There is access to WiFi from your car under the solar canopies on the Fall River Campus.
Week #14
Week of May 2nd
The final is under week 13th as is the status sheet.
I will be around this afternoon and evening (Friday the 6th)- most of the time at my Zoom site if you have questions.
See yourself in STEM, a guest speech I have been told about on May 5th at 11:00AM.
Extra credit (if you are taking more than one course with me, need to choose which course it counts for)
Speech on Hacking from Thursday, April 28th Passcode is: F^Xd!90y
Extra credit if you write a short paper on some things you learned from this speech.
Week #13
Week of April 25th

INFORMATION:

Continuing looking at things you can do with JavaScript.
FINAL:
REQUIRED STATUS SHEET
For your final I want you to make a web site for a new store that is opening in Fall River. Include Lots of JavaScript, use DOM and interactivity. The JavaScript should use a variety of things you have learned this semester. It is due on Monday. May 9th. Ask questions if you want to clarify something. Think of it as worth two assignments in the grade to help figure out the level. Needless to say this is an independent project.

ASSIGNMENTS TO DO:

To Do
Do another group of things from the To DO. This time only 15 since the end is near. Again, name and label. If you do another 10 you can get some extra credit.
Week #12
Week of April 18th

INFORMATION:

CATCH-UP WEEK - no new work or assignments
Week #11
Week of April 11th

INFORMATION:

The CIS Alum round table/panel is being held on Zoom on Tuesday, April 12th at 12 noon. It will last until sometime between 1 and 1:30 but you can leave when you need to.
PLEASE try to come for all or part. The discussion about careers that Bristol CI alum have is really interesting and the insite into the jobs out there is valuable. You also have the chance to ask the questions you want to know the answers to and get a variety of perspectives.

Recording alum 4/12/22
Passcode: G0YiY?=w
Office hours by appointment since I am not getting attendance. Let's plan a time that works!

ASSIGNMENTS TO DO:

To Do
Please do your original examples of the things listed below plus eight more that you decide you would like to see how they are done.
For all our sakes please combine and do not send 20 pages and put in notes to tell me what you are doing.
  1. Slideshow
  2. Responsive Image Grid
  3. Image Overlay
  4. Filter List
  5. Password validation
  6. Zebra Striped Table
  7. Responsive Tables
  8. Modal Boxes
  9. Display Element Hover
  10. To Do List
  11. Flip Card
  12. Responsive Text
Check back!
Week #10
Week of April 4th

INFORMATION:

Note that there will be a week devoted mainly to catch up before the end of the semester.
April 8th is the last day that students can withdraw from their classes. If you are far behind you should do a realistic analysis and decide if you want to withdraw. If you have questions, we can talk!!! You should also talk to financial aid if you have financial aid and you want to be sure you understand the impact of failing and the impact of withdrawing.
There are lots of examples of Hangman games written in JavaScript on the web and in books. Feel free to look at them to help you understand how to write one.
We will also start experimenting with ways to show things like menus etc.
Go to JavaScript how to and explore.

ASSIGNMENTS TO DO:

I want you to write a Hangman game in JavaScript. You need to include graphics to show the changes to the hangman.
Menu assignment: I want you to write a program using one of the menus discussed in the JavaScript how to. Then modify the program to show a different way of handliig menus. I want you to keep trying until I get 5 different programs handling menus in different ways.
Week #9
Week of March 28th

INFORMATION:

On April 12th there will be a round taable discussion of CIS alum talking about their careers and the paths they took. It is always a great session and students tell me how much they benefit from it. There is a question and answer session. The roundtable runs from 12:00 to about 1:00 to 1:30 depending on the conversation. I will post the address. There are several people who work with web development.
This week I want you to read about and experiment with graphics in JavaScript.
Very introductory tutorial
I found a nice group of tutorials by Adam Khoury on youtube but you can also look for others if you do not like his style.
First in a series
Other sources:
I also found this site on drawing graphics
Basic animation
Another explanation of drawing shapes
Experiment and check back! If you can find a good JavaScript editor feel free to use it. I have tried a few free ones but have not found anything I really like.

ASSIGNMENTS TO DO:

I want you to try ten different things in drawing - mostly in one page. They can be modifications of existing examples or original. If you modify please give me the address of the original.
Week#8
Week of March 21st

INFORMATION:

We are going to start out looking at some other data manipulation.
Then I want you to research and read about object-oriented JavaScript. Here are some articles I suggest:
Javascript objects
Objects
Object-Oriented JavaScript
I also am including some more examples of arrays, functions and the try...catch and the =>
Tutorial on => that I found.
Examples of OOP, arrays, functions and misc
If you can find a good JavaScript editor feel free to use it.
I will keep adding little extras to review in the work that follows.

EXAMPLES TO LOOK AT: (look at console.log)

Using stringify and parse
More data
Data to console and screen

TOPIC VIDEOS:

Stringify/parse etc

ASSIGNMENTS TO DO:

Problem #1: Write your own program using the techniques from searchparallel.html and substring.html.
Problem #2: Write your own program using the basic object oriented techniques. Check back!
Break
Week of March 14th
Catch up week!
Week #7
Week of March 6th

INFORMATION:

Note that I added an example under week 6 that might help with that assignment.
Now I want you to do some research on using JSON with JavaScript to get data and create data.
I have been sick this weekend into the week (not Covid) so I am running late getting things up and corrected. Please check back!

EXAMPLES TO LOOK AT:

Examples of arrow notation (no video)
Fetch JSON basic programs zipped
Student Fetch JSON programs zipped

TOPIC VIDEOS:

Fetch JSON basic programs video
Student Fetch JSON programs video

ASSIGNMENTS TO DO:

Do a very basic program fetching information from a very basic JSON tableand producing output.
Use your JSON from last week and process that to produce output.
Week #6
Week of February 28th

INFORMATION:

Women in STEM Panel on Wednesday, March 2 (11AM-12:30PM). You may register here for the event: https://forms.office.com/r/w6ps kiBhH6 We are going to start out this week by looking at JSON. For those of you who tooks CIS258 this is a review or a repeat... So JSON is this week and using it with JavaScript will follow. Here are some resources, but please do your own research as well.
JSON
JSON tutorial
Learn JSON in 10 minutes
Another introduction to JSON
Note you can validate your JSON at jsonlint to validate

EXAMPLES TO LOOK AT:

Student JSON
Student JSON(text)

TOPIC VIDEOS:

Student JSON video

ASSIGNMENTS TO DO:

Set up a JSON layout to handle a real estate tax bill. You need a parcel id, deed date, owner name, owner address broken down into street, city, state, zip, assessments broken down into land value and building value, an array of quarter payments, total paid YTD, and tax rate per thousand. Check back.
Week #5
Week of February 21st

INFORMATION:

I want you to watch this video which creates a web page and introduces some new things and approaches.
Pets JavaScript video Note that when watching the video you do not have to use codepen, your choice.
When you encounter a language element or technique you do not understand, you should check it out and do some research.
My office hour at 10 on Thursday is cancelled.

ASSIGNMENTS TO DO:

Now I want you to write a similar problem but make significant changes. Make sure you have a variety of if statements involved in choosing what to display.
As always, check back!
Week #4
Week of February 14th

INFORMATION:

Sorry - this originally had more info for Feb 7th - should have been 14th - copy and paste does me in again.
This week we are going to continue with DOM and specifically work with radiobuttons, checkboxes, arrays and functions.
I tried some videos at youtube and this is one you might find helpful:
JS Basics video

EXAMPLES TO LOOK AT: (some output in console.log F12)

Checkbox: 1) chkboxfirst.html 2) chkbox.html 3) chkboxanother.html
Radiobutton: 1) radiobutton.html 2) radiobutton2.html 3) radiobuttonalt.html
Arrays:
arrayfoundation.html
JSarraysintro.html
arraymaintain.html
Arraypropmethod.html
1 and 2 dim arrays
1 and 2 dim arrays (another version)

TOPIC VIDEOS:

Checkbox and Radiobutton:
chkboxJS.mp4
radiobuttonJS.mp4
Arrays:
arrayintrofoundJS.mp4
arraymaintainJS.mp4
moreAraypropmethodJS.mp4
1 and 2 dim arrays

ASSIGNMENTS TO DO:

Programs for week 4
Week #3
Week of February 7th

INFORMATION:

we are going to continue with DOM looking at a variety of things dealing with conditions and loops and some things related to the coding.

EXAMPLES TO LOOK AT: (some output in console.log F12)

Conditions (IF)
While loops
For loops
Some other things:
2 equal vs 3 equal
Alt to concatenate etc
Manipulating data

TOPIC VIDEOS:

Conditional (IF)
While loops
For loops
Some other things:
2 vs 3 equal and alt concatenate
Manipulating data

ASSIGNMENTS TO DO:

Loop, if DOM, functions etc
Check back...
Week #2
Week of January 31st

INFORMATION:

Please look at the DOM examples and videos for DOM under CIS122.

EXAMPLES TO LOOK AT:(look under these headings in CIS122)

"Looking at basic DOM substitutions for document.write"
"More DOM from previous JavaScript"
segments of "Some examples I tried using HTML5 and JavaScript"
"DOM examples"
"More DOM examples"(actually you may want to delay this group)

TOPIC VIDEOS:

We started DOM in week 7 in CIS122 so you will find the videos there. Remember you go to Previous Semesters from my home page to get to last semesters work.

SMARTBOARD, AUDIO AND OTHER NOTES FROM Fall 2019:

You will find the audio lectures and Smartboard also starting at week #7.

ASSIGNMENTS TO DO:

DOM etc assignment
Check back...
Week #1
Week of January 24th

INFORMATION:

Welcome to CIS250
Welcome to CIS250 (youtube version)
The first topic of this course will be a continuation of JavaScript, so please review the JavaScript from CIS122. You should also look at the videos that accompany them. We will look at DOM next week.
Previous courses are available using Previous Semesters from my home page.
Be sure to look at if statements, loops , math facts series and guess game series. I would also like you to look at events and functions.
This book is free to read on line and looks good so you might mark it for reference and use it as a textbook.
Eloquent JavaScript third edition

ASSIGNMENTS TO DO:

Write an HTML with JavaScript program for an invoice.
It should have a space for date to be gotton and name and address to be entered. There should be a series of radio buttons that will give various discounts. Lets say three discounts and a fourth button for 0 or no discount.
The invoice form should have rows about the products ordered including item number, item name, price and quantity. There should be multiple rows.
After the user enters the information, calculate the total before discount and taxes are subtracted. Then using the radio button determine which discount to give. Subtract the discount and the tax at a rate you decide on and give the final total.

Send e-mail to Priscilla Grocer: Priscilla.Grocer@bristolcc.edu

Back to the Top
Return to home page
Return to previous page