Programming for the Internet
with
JavaScript – Assign04
09/27/2015………..………..…..……….…..Learning/JavaScript/Assign04-JavaScript.doc[email protected]
or [email protected]
M-F 6am-8pm, S-S 8am-8pm
http://JilMac.com
.
JilMac 802-254-8628
1.
Review
2.
Reading Assignment
3.
Discussion 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!
Busy Week!! Lots of good questions and work being done by you. More of you are getting into things – which means harder questions, which is what I expect – but they will take longer to figure out as the weeks go on – be patient with yourselves. Remember … class and all my classes are NOT RACES. Learning technology is a JOURNEY, Not a RACE. Breath and enjoy the learning experience.
BROWSERS - http://www.w3schools.com/browsers/browsers_stats.asp Old Graphic but still funny, to the right ---> Some Say "The murders were probably committed by designers and developers who
couldn't convince clients to stop using IE.
Using W3Schools for testing & learning what the programs do. TryIt - what did we learn?
http://
w3.org and
http://www.w3schools.org
HTML DOM -
http://www.w3schools.com/html/default.asp
CSS DOM -
http://www.w3schools.com/css/default.asp
XML DOM -
http://www.w3schools.com/xml/xml_dom.asp
JavaScript DOM-
http://www.w3schools.com/js/default.asp
jQuery DOM -
http://www.w3schools.com/jquery/default.asp
PHP DOM -
http://www.w3schools.com/php/default.asp
sort
http://www.w3schools.com/jsref/jsref_sort.asp
document.write
http://www.w3schools.com/jsref/met_doc_write.asp
Window Object
http://www.w3schools.com/jsref/obj_window.asp
Reminder: You need to post by SUNDAY at Midnight to the weeks Assignment Discussion RESEARCH question. That is how Attendance is taken – no post – no attendance. It’s a CCV on-Line rule. You don’t have to complete the assignment – but you have to post for Attendance – and some of you are on Financial Aid – so it is important. The research question for many of the assignments will help with understand the B+A’s
NOTE: sometimes I don’t get to “do Attendance” by midnight on Sunday (imagine). I’m not exactly sure when CCV runs it’s attendance reports – but if something is missing give me a shout – and I’ll check it – I know your financial aid is tied to attendance.
Your RESEACH Forum will receive 2 points IF …
Each weeks research will give you 1 point - if you add the
research to your web page - then you get the 2nd point. I want all your work (for any of my classes) to be on your
web page.
It is easiest to have the research on a web page - because then you can demonstrate how it is used. One example
would be that the code you posted - could be in an .html file and you could use it to test with.
It just gives the "incentive" to DO the code instead of just READ the code, (but I still want that discussion element) -
and that is what I am pushing all the students to - because you learn more - you see differences in how the
browsers/phones/appliances work with the web page. Things you can't really see from inside a research paper alone.
Our RESEARCH question this last assignment was “What can JavaScript READ from your computer?” As
we study JavaScript and learn what it can do … we will be discussing … "tracking" what we do on-line may
initially appear invasive - it is how computers offer us options of what it thinks we would like. We will explore
some of the ideas of what is inquisitive/invasive/intuitive - we will get to look at it from the INSIDE.
2. Reading Assignment
Each week we will be Reading two chapters. Assignment04 is to read Chapter 7 Forms & Regular Expressions
JavaScript: Visual QuickStart Guide
Tom Negrino(Author), Dori Smith(Author)
Start Reading
JavaScript: Visual QuickStart GuideDon't have a Kindle?Get your Kindle here, or download a FREEKindle Reading App.
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!
Logic:
Computers have the ability to make decisions – Yes, No; which is 1, 0 – a lightning speed. However life it a bit more complex than that – every morning when we wake – we start making decisions.Is it a weekday? Yes – start the coffee, No – lay back down
As you go over the scenario of IF it a weekday or weekend, you begin to see the thousands of decisions we make moments after we get up. To create programs on a computer is that same decision making process. Why?? Because, humans created computers in their image. Basically electricity runs computers – so they are made up of Positive (1, yes) and Negative (0, No) rules.
If/Else - In this chapter we are learning about the basic If/Then/Else – now denoted as If/Else (the “Then” is implied but you will hear me say the “Then” even when it is not physically there anymore.
Combining Variables into If/Else statements. If variable is true or If variable = 1 or If variable = “cat”
Nesting If/Else
Switch statements have multiple cases
Each example builds on to the previous example. They try to make things progressively complex – and they show you how you can do the same thing differently. The answer here is “It Depends”. Are their rules in life when you should do this –vs- that … well, “It Depends”.
Don’t get frustrated, they set up a problem and show you several ways to solve it. They are trying to teach you Problem Solving techniques … pointed at JavaScript Programming. So Breath, Drink fluids, and be patient.
IF this is the first time you have used IF’s be good to yourself.
ELSE you have used IF’s before in other languages – they may be a bit different here, be good to yourself.
You can also read a chapter on ‘Functions” from the O’Reilly book HeadFirst JavaScript - http://www.headfirstlabs.com/
books/hfjs/,
Google Books let’s you see most of the book Pages 1 – 147 = Chapters 1-3. It is an easy read – but does not contain much Ajax or PHP. The examples are a little different too. But Many students like the easy reading style.
http://books.google.com/books?
id=xsmBjw814qwC&printsec=frontcover&dq=headfirst+javascript&hl=en&ei=6bmiTMTlF4GClAfDyfmOBA&sa=X&oi=bo ok_result&ct=book-thumbnail&resnum=1&ved=0CDAQ6wEwAA#v=onepage&q&f=false
Regular Expressions are a way of taking the old "Brute-Force Code" and streamlining it to make it FAST - so you can process faster. However they may be a little bit harder to look at and decifer what it means. Use the tables from your Text Book Pg 186 & 16 to understand. I have included a contact-us.php form that uses Brute-Force to verify an email address. It works similarly but is slower to run (which you will not notice -but it there were a million visitors to your site ... you would notice! It's all in the SCALE!)
http://stweb.ccv.edu/CIS-2140-VO01-V15SU/jam08260/Assignment04/e-Mail_Verification-BruteForce/
3. Discussion/Research Assignment – 2 point
Question: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ you learned about in the tutorial. Here is a link to some from YouTube http://www.youtube.com/results?search_query=tutorial+javascript+functions&aq=f give me 50 words what you think about Regular Expressions.
Forms - find a form on the Internet - maybe a page that you visit on occasion. What do you like about this form. Give me 50 words and a link to it.
NOTE: it is highly recommended that you read each other’s posts – My classes are run like a users group. Explain what you learned with this exercise
Provide the links to the YouTube tutorials (or others) that you liked
Explain how you could use the function in the tutorial in your project.
Research/Discussion questions should take about 2 hours per week. You should RESEARCH the question (not just give your CURRENT OPINION if you want the full 2 points), 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. 150+ words on what you learned and what information you want to share.
they show how easily their code works in multiple browsers - they will be the first to update the code as new browsers, versions, and operating systems emerge. Keep an open mind - have FUN with your research.
4.Code Examples=Before + After – 3 points
You need to have an index.html or index.htm file in your root directory. You can also 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. Or as Chris Pederick says “Inspired by”.
An
excellent example of complimenting them can be found in the CHAT outline – for the Web Developer
Toolbar
http://chrispederick.com/work/web-developer/features/
under Acknowledgements. Things
I’m asking you to do in our Assignments – are HOW THINGS ARE DONE IN THE REAL WORLD. This is an
Open Source community – where you EARN respect, not Salaries. You are working under the
“Volunteer” rules of conduct –vs- the “Corporate” conduct.
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 - but 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 - 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.
Next Chat – Check
https://sites.google.com/site/jilmactraining/internet-programming-js/js-chat-rec
for Dates & Times
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: FERPA, 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.
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. Invite your family, friends, associates to
see what an On-Line meeting looks and works like.
Those who have microphones – use them – Mary was able to use hers last week. It made the experience richer. o To set up your microphone, once you are in Adobe Connect PRO
o Click Meeting > Manage my Settings > Audio Setup Wizard
o If this is the first time you have used Audio – then install the small app
o If you have used Audio in Connect Pro then just click the NEXT button and follow the instructions
Recordings Page
https://sites.google.com/site/jilmactraining/internet-programming-js/js-chat-rec
CHAT TOPICS could include ....
Chrome Tools
>Developer Tools DOM tree tutorial:
https://developers.google.com/chrome-developer-tools/docs/elements
... we looked at this a little in the CHAT in Assignment03 - we will look at it more in Assignment04
IF you prefer another browser spend time learning that - write up what you learned for 1 pt extra credit
Breaking up your .html to make them more maintainable
We are going to re-visit the Menu-Clean+Crisp from Assignment01
http://stweb.ccv.edu/CIS-2140-VO01-V15FA/jam08260/Assignment01/Menu-Clean+Crisp/Menu=PHP-Clean+Simple
specifically the folder
http://stweb.ccv.edu/CIS-2140-VO01-V15FA/jam08260/Assignment01/Menu-Clean+Crisp/Menu=PHP-Clean+Simple
/
It consists of:
index-all-html.html
--> Because this file is hard to maintain especially when you create a copy for each Assign
style.css
---> external .css file which is easy to maintain
student-pic.jpg
---> graphic file displayed on the index-all-html web page
We use the
PHP
commands of
Include & Require
index-broken-into-includedFILES.php <---- NOTE: if you have PHP commands in a file it MUST be named .php
assignment-02.php
For Assignment 04 - for those that are ready - you can break up your index.html and start to streamline your web site.
It will be required for the final project. Redundant code will not grade as well
If Time Permits ...
Add-Social-Media-ICONS-to-your-web-site.doc
From the Handouts page - in Assign04-of-14
To capture a screen
press your PrntScrn Key and then go to a
WordProcessing, Ctrl-V (paste)
Alt-PrntScrn - Captures
the
ACTIVE windows
CHAT TOPICS (if we get to all this)
3.
EXTRA CREDIT OPPORTUNITY- View/Read one of these articles, write up 200 words about it and PLACE it in the Weeks GENERAL Discussion and receive 1 Extra Credit Point.The Adobe Developer Connection team publishes & promotes lots of great topics! http://www.adobe.com/devnet.html
-or-Many Flash developers ask me what will the new Flash be ... it is still
a questions that is up in the air ... however, Adobe has been investing
a lot of resources to developing Adobe Edge
– HTML, CSS & JavaScript developing,
http://www.adobe.com//newsletters/inspire/september2011/articles/article1/index.html?trackingid=JCJVV
Edge a closer look
http://tv.adobe.com/watch/adobe-edge-preview/edge-closer-look/
Download EDGE (Mac or Win) - you will need to create an Adobe Account with is free:
http://labs.adobe.com/technologies/edge/?sdid=JAXXO&skwcid=TC|23230|download%20edge||S|b|
8333479386
WebKit is incorporated with Edge – which is used in Mobile Development.
The EDGE of Flash
http://www.adobe.com//newsletters/inspire/september2011/articles/article3/
index.html?trackingid=JCJVX
4. Forms that Calculate using JavaScript:
HTML Form, Data Entered into Form, JavaScript calculation, Print results to the Screen.
HTML Form Print results: document.write("<H2>Average of 5000 numbers: " + average + "</H2>");
http://www.yaldex.com/FSCalculators/5Functions.htm
http://www.yaldex.com/FSCalculators.htm
http://www.mcfedries.com/javascript/ordertotals.asp
