Programming for the Internet
with
JavaScript – Assign03
09/20/2015………..………..…..……….…..Learning/JavaScript/Assign03-JavaScript.doc[email protected]
M-F 6am-8pm, S-S 8am-8pm
http://JilMac.com
JilMac 802-254-8628
1.
Review
2.
Reading Assignment
3.
Discussion/Research Assignment worth up to 2 points
4.
Code Examples Assignment worth up to 3 points
5.
CHAT times will be worth up to 1 extra credit point per wk
===========================================================
1. Review
Breathe and Laugh - it fuels the brain with Oxygen - which is important in the learning process!
Great Week!! Lots of good discussions. I am getting more of you up and running – still have a few more students to go. This class and all my classes are NOT RACES. Some students have more experience in one area than other students. I encourage them to run – other students may have not touched web development in years – since their first HTML class. So it will take them longer. So What?
Learning technology is a JOURNEY, Not a RACE. Breath and enjoy the learning experience.
F R E E Extra Credit Opportunities!
Vermont Code Camp Saturday Sept 19 at the UVM Campus http://www.vtcodecamp.org/ Hack Vermont http://hackvt.comis Oct 9-10 in Burlington
- SAS workshop on Oct 6th at New England Adobe Users Group in Brattleboro http://NEAUG.org For each 100 words you write about your experience you will receive 1 extra credit point.
Checkout my User Group page https://sites.google.com/site/jilmactraining/user-groups for more ideas!
They are giving students their own eMail address ... well you always had one, but now you are going to have to POINT it
towards your gMail account. This is what it will look like:
[email protected]
TEST by sending yourself an email to your CCV email address - IF it forwards to your normal email then you have done it
correctly ... give it about a 1/2 hour for the email to forward.
Our Class Web Site: http://stweb.ccv.edu/CIS-2140-VO01-V15FA/jam08260/Assignment03 will contain information and/or links to information for our class.. Moodle will be for asking questions, and telling me when your work is ready to be graded. If any assignment needs more time – you are granted it – just state that in the discussion.
There are two types of errors that you will come across:
SYNTAX - you have not closed a tag properly or are not using a tag correctly. Where can you get help to find errors in your code??
Different Vadidators may display different messages,
Validators:
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.
LOGIC - your program is not working the way you thought you designed it to.
This is a harder type of problem to find - because there is no Automated Validator that you can run it through. You will have to walk the code and step through the steps to debug this.
Most of you are feeling comfortable with the Before + After assignments – if you are having issues – give me a call and we will walk through it together. But the class as a whole is progressing nicely. I didn’t say 100% I said progressing. That’s what I expect – not for everything to go perfectly – but to identify issues, work on solutions, and make progress.
Reminder#1: Please don’t WAIT to contact me until you are near hysterical … if you’re spinning your wheels – that’s a good time to start contacting me. And you can call/email me a couple of times. CCV instructors have other jobs – none of us can be full time instructors – it’s the rules – so we have to divide our time between multiple clients. If I don’t get back to you in the time you need – please just call/email/connect with me again. I’m just working on something else – so if you need me contact me.
Reminder#2: – for Attendance (important to all you getting financial aid) You need to post to the Research Forum in Moodle by Sunday evening. If you have not yet done your Research – just say you want more time. I need to have you post – to receive an attendance. If you have missing attendance that is causing issues with your financial aid - you need to contact me so that you can make up the attendance - but you need to contact me so we can work on these together.
2. Reading Assignment
Each week we will be Reading two chapters. Assignment03 is to read Chapter 5 & 6 from the text
JavaScript: Visual QuickStart Guide (9th Edition or 8th Edition)
[Paperback] Book's Web Site http://www.javascriptworld.com/
Download the scripts - click the download button from the TOP Nav http://www.javascriptworld.com/
Before each chat I will be updating our class web page http://stweb.ccv.edu with this semesters data. You will see each assignments changes the week before. You are free to look ahead = just be aware I may change small things.
Breathe and Laugh - it fuels the brain with Oxygen - which is important in the learning process!
3. Discussion/Research Assignment – 2 point
Question: Client-side programming is what JavaScript does. What information can JavaScript pull from a Client computer? For this assignment you can research the internet, other JavaScript books, Visit the DOM, etc. DOM = Document Object Module - it explains what is built into each version. There are several users friendly ways to learn about the DOM for JavaScript
W3Schools - http://www.w3schools.com/jsref/
JavaScript Kit - http://www.javascriptkit.com/domref/
QuirksMode - http://quirksmode.org/dom/core/
NOTE: it is highly recommended that you read each other’s posts – My classes are run like a users group.
Explain the TRY IT editor
What browser is being used to access this page ? = navigator.appName http://www.w3schools.com/js/tryit.asp?filename=tryjs_nav_appcodename
Another example - JS Browser DOM, JS Window and JS Screen
http://www.w3schools.com/js/js_window.asp - Reads how big is Current Window
http://www.w3schools.com/js/js_window_screen.asp - Reads how big is the Clients screen capability
NOTE:
1.) You can only make correct changes - otherwise it ignores what you entered
2.)correct changes could include: Change within " " press Submit Code button
Add a line or two after the <body> tag, Press Submit Code Button
What time-day does the computer have ? = now.getDay and now.getMonth, now.getYear, now.getTime if you look on w3schools.com they have a nice example http://www.w3schools.com/jsref/jsref_getTime.asp
Put a digital clock on a page http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock
Research/Discussion questions should take about 2 hours per week. You should research it, give links to your research, and do an example. In this case – there are lots of good examples – that you should make a web page to demonstrate. 100+ words.
4.Code Examples=Before + After – 3 points
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.
Book's Web Site http://www.javascriptworld.com/
Download the scripts - click the download button from the TOP Nav http://www.javascriptworld.com/
Download the source code – I DO NOT expect you to hand type the examples (if it helps you learn - hand type,
but that time is your own and is not built into our 8 hours per week):
o
Click the
Downloads
TAB below the picture of the book
o
Click “Download the source code”
o
Save the .zip file to your hard drive or other media
o
Unzip the files
From chapters 5 & 6 do 3 Before + After Assignments. do 3 B&A examples – post them to your
Assignment Page on your Web Site.
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.
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.
In all my classes and the work you turn in should all be accessible from your index.html
By the end of the semester – all your work to be graded should be in your Web Site and access able from
the links and navigation on your site.
5. CHAT – 1 point extra credit
Each Week - I have a set time where I present material and answer student’s questions live. It is NOT
required to attend, but it is required to watch the recordings. It is nice to touch base with students and
answer questions real time. I also go over the chapter examples and present material from sources other
than our text book.
Watching each weeks chats are HIGHLY recommended & required- they cover topics that may not have
been covered in the regular postings. Plus if you comment as if you were in the chat – you get Extra
Credit too.
Check
https://sites.google.com/site/jilmactraining/internet-programming-js/
js-chat-rec
to see when the next CHAT Day/Time is. To Get to CHAT:
Open a browser window
GoTo http://JilMac.com web site
From the LEFT-NAV select “Connect with JilMac”
It will bring you to the Adobe Connect Pro web site.
Enter the name you want displayed – NOTE: HIPPA, please consider the CHATS a field trip. They will be recorded, and they will be available on the internet to anyone who has the URL address. So if you don’t want to use your real name – you don’t have to! Pick what you want displayed.
TOPICS
Come when you can – leave when you must – you are always welcome! Some of us will stay up late to solve
issues or discuss other topics – you are always welcome to watch.
FERPA = Fieldtrip, enter name you want recorded, all recordings are available to anyone on web.
Before + After Examples – let’s start adding comments!
Notepad++ How to use compare, Change Backgrounds & see beginning & ending tags
o Each browser has their version of Developer Toolkits, I will be using Chrome's Developer Toolkit in CHATs, however there are others:
FireFox - addOn - Web Developer
FireFox - Disable
Backups – using Google Sites & Google Docs to create a backup.
VALIDATORS - An Introduction
THIS IS NOT A RACE – This is a journey.
Debugging JavaScript
As browsers advance, each browsers development tools gets more robust, plus there are lots of IDE -
Integrated Development Environments that have very powerful tools. The tools grow everyday - so it is
important from time to time to Google, YouTube and Visit help pages and forums to see what the new
features are. When you are watching tutorials - be sure they are up to date - or be aware that changes
happen quickly.
Chrome's Debugger
https://developers.google.com/chrome-developer-tools/docs/javascript-debugging
FireFox's FireBug: Download
http://getfirebug.com/
Tutorials:
http://getfirebug.com/javascript
InternetExplorer F12 Developer ToolBar
http://msdn.microsoft.com/en-us/library/ie/hh968260(v=vs.85).aspx
================================================================================
This is a screen shot of Chrome's Developer Tools -- JilMac still working on - for Chat Assignment04
In the first Column we have select to look at the .js file
In the center Column we are looking at the .js file
On the right we are On the left we
are running the program, on the right - you are walking the code
The blue marks are on the line numbers where the code will PAUSE in the Source-script10.js
This is the CHROME Developer Tool Bar. We are looking at
http://stweb.ccv.edu/CIS-2140-VO01-V15SU/jam08260/Assignment01/chap02/script10.html
I am watching three Expressions: ans errMsg and errMsg.message
I have break points on the script10.js at lines: 4, 6, 9, 12
