Programming for the Internet
with
JavaScript – Assign06
10/13/2015………..………..…..……….…..Learning/JavaScript/Assign06-JavaScript.doc
http://JilMac.com
[email protected]
M-F 6am-8pm, S-S 8am-8pm
http://[email protected]
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 is NOT a race it is a Journey!
Deep Breaths – bring more oxygen into your bloodstream. Staying relaxed keeps your breaths long & deep. Laughing and Singing also bring oxygen!
IDEAS HOW TO EARN EXTRA CREDIT
Critical Habits of Mentally Tough People https://www.linkedin.com/pulse/critical-habits-mentally-tough-people-dr-travis-bradberry
They Embrace Failure . . . Yet, They Don’t Dwell on Mistakes
Khan Academy's Summer of Scripting (I believe it is still going on!) https://www.khanacademy.org/summer-of-script
It's Hackademic http://itshackademic.com/ is now Polymer - its new - I just started reading about it! it's from Google!
Third-Party JavaScript book has free Chapter 1 http://manning.com/vinegar/TPJS_meap_ch01.pdf
& Chapter 4 in PDF format Download them from this page http://manning.com/vinegar/ with example files!
Moodle - works best with FireFox - BUT ... if you use FireFox and cut & paste into Moodle it can sometimes give you a hard time. Right-Click Cut & Paste don't work, use Ctrl-C (copy) and Ctrl-V(Paste). If you are cutting & pasting a large amount if you receive an error - cut & paste smaller amounts. Sometimes it will skip spaces between words if they were on separate lines, etc.
Validators:
https://sites.google.com/site/jilmactraining/internet-programming-js/editors
This week – Project OUTLINES are due Here is a link to my outline
https://sites.google.com/site/jilmactraining/Classes/project
CCV News: You have the ability to evaluate your instructors - I encourage everyone to do this. CCV listens.
I will be doing your Midterms/Early Progress Reports (or whatever they are named) next week.
Veteran Resource Assistance http://ccv.edu/veterans/advisors/
ERRATA
Although the book does not have an errata page (has anyone checked when they registered their book this semester???) – we have created one on our Class Google Site's pageif you see any typo’s please email me and I’ll update the page. You Get an EXTRA CREDIT point.
2. Reading Assignment
Chapter 9, JavaScript & Cookies
JavaScript: Visual QuickStart Guide
Tom Negrino(Author), Dori Smith(Author)
Start Reading
JavaScript: Visual QuickStart Guide Don't have a Kindle?Get your Kindle here, or download a FREE Kindle 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!
3. Discussion/Research Assignment – 2 point
The objectives for this class – include understanding Cookies.Cookies go in and out of favor - right now they are OK, but you can still Google and find negative reviews. Cookies hold small amounts of Data ... with HTML5 & JavaScript
Now cookies are so common place that we don’t even think about them. People assume that web sites they visit will leave a cookie of information on their computer to store their preferences.
There have been many articles about privacy - cookies play a part in this. (Pg 6 below)
Browser Storage
http://www.html5rocks.com/en/tutorials/offline/quota-research/
With HTML5 - we get Client Side Storage .... which is interesting ... how will it be used?
Local Storage - Stored until a program says to removed it
Session Storage - only until the Browser Window is closed
Local Storage TODO list Example
http://sdaityari.github.io/to-do-list/
How it works:
http://www.sitepoint.com/building-list-jquery-local-storage
Get the Code:
https://github.com/sdaityari/to-do-list
JilMac working example
http://stweb.ccv.edu/CIS-2140-VO01-V15SU/jam08260/Assignment06/ToDo-HTML5-LocalStorage/to-do-list-master/
What is a JavaScript
Library
? What is
Minify
?
http://www.computerworld.com/s/article/9224465/HTML5_client_side_storage_tutorial_Beyond_cookies
Chrome
http://www.google.com/support/chrome/bin/answer.py?answer=95647
Where are they kept?
http://stackoverflow.com/questions/5700746/where-do-browsers-store-cookies
Win7 locks access to the directory where the cookie files are written to. So I'll share what WinXP does
Let's look at this simple program in the Chrome's Developer Toolkit
I am going to "Watch Expressions "userName", "expireDate", document.cookie" and others
created
JKJRDAAM.txt
file that contained:
userName
Jjjjjjjiiiiiiiillllll
stweb.ccv.edu/CIS-2140-VO01-V14FA/jam08260/Assignment06/chap09/
1088
3218973440
30394110
2782179216
30357104
*
Enable/Disable Cookies
http://support.google.com/chrome/bin/answer.py?hl=en&answer=1301211
So I would like to take this Research question and have you research Cookies.
Explain what HTTP cookies
are, and discuss their use and abuse on the World Wide Web. Create client-side scripts that store and
retrieve data using cookies.
DOM
1.
http://www.w3schools.com/JS/js_cookies.asp
has a nice write-up on a welcome cookie
2.
http://www.quirksmode.org/js/cookies.html
their example shows how to create, read and erase a
cookie. Demonstrating that a cookie, stores information, can be read and display that
information, and that cookies can be erased – or given a life span – so they delete themselves.
How could you use a cookie for your project. What would you store in the cookie, and why would they
be useful?
200+ words. You are also free to research another topic that is important to your project.
CLIENTS Include many types of Computer, Phones & Tablets: use
http://Responsinator.com
-OR-Many products generate JavaScript. DreamWeaver, Photoshop's Automate, Versions CS4, 5, 5.5 & 6 also can Automate through Bridge (to mention a few). Give me 300+ words with links to the Software, Training Tutorials & YouTube video training for how to Generate: CSS, HTML, JS, XML.
On our CHAT recordings page - there are several links from previous semesters demonstrating this.
jQuery Widgets from within DreamWeaver 6.6
http://tv.adobe.com/watch/learn-dreamweaver-cc/using-jquery-widgets-in-web-pages-in-dreamweaver/
Chat 10/17/2011 - Chap12, PHP, Dreamweaver's 5.0 built-in Library SPRY:
http://experts.adobeconnect.com/p714m1le80x
https://experts.adobeconnect.com/_a204547676/p9jvin3rood?
launcher=false&fcsContent=true&pbMode=normal
(at the 1 hour mark)
Assign12 CHAT recording:
http://experts.adobeconnect.com/p6b912lnm44/
Assign 13 CHAT 12/06/2011 Photoshop + Bridge Creating a Web Slide Show
2. Create your Project Outline Project OUTLINES are due next week Here is a link to my outline
https://sites.google.com/site/jilmactraining/Classes/project
1 point for the Outline, 1 point if it is detailed, 1 point if you create a Project page and include it there. The Assignment is 5 points - 3 you can earn now, the other 2 can be earned at the end of the semester if you update your Project Outline to a Project Overview.4.Code Examples=Before + After – 3 points
Our Text Book’s accompanying Web Page is: http://www.informit.com/store/product.aspx?isbn=0672329654 Download the source code – I DO NOT expect you to hand type the examples:
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
NOTE: if you Cut and Paste from a PDF – be aware that syntax may be incorrect. Quotes may be incorrect – make sure to do a compare to the actual code from the download
– see if all special characters are the same.
Do 3 B&A examples – post them to your Assignment Page on your Web Site.
I have demonstrated the PUZZEL in several previous CHATs
http://experts.adobeconnect.com/p95263172/- watch
a previous recording - and try it out - if you are looking for something FUN and VISUAL. The code is
all in Assign06-OtherExamples
PUZZEL and WordPress from a previous semester recording http://experts.adobeconnect.com/p8qgaiozu1u
All students have the option to use an example from their text books – or to find a similar example from
the web.
You now ALSO have the option to run these programs on your own server. Some examples
could be run on different servers and outcomes compared. While STWEB will give us SOME exposure to
a Shared Web Host, it is VERY limited or what the Systems Administrators = SysAdmins call “Tied Down”,
“Secured”, “Secured Down”. Which translates to safe but you can’t do much. However – this is
EXCELLENT experience … to compare Servers. You need to know, understand, and be flexible with
knowing that every server is set up the way their Administrator wants it to be. Just like every Family’s
House has their own rules. And that House rules change. After our teenagers had all grown up – I
mentioned to one of them who was still living at home … When you kids are not here – Daddy & I eat in
the living room. They giggled and said when you guies are not here – we eat in the living room too!!
LOL
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.
Each Week - I have a set time where I present material and answer student’s questions live. It is NOT
required that you attend the LIVE CHAT, but it is required that you watch the CHATs. 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. JilMac’s
discussions are never closed – you are allowed to learn any assignment at any time of the semester.
IF you comment on the CHAT you can receive UP TO 1 Extra Credit Point, over the course of the semester
that is an extra 14 points! If you want to increase your grade - this is a good way to do it.
Recordings
https://sites.google.com/site/jilmactraining/internet-programming-js/js-chat-rec
Chat Times and Dates are posted https://sites.google.com/site/jilmactraining/internet-programming-js/js-chat-rec
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: 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
Each week I record the CHAT sessions – so anyone who wants to view the chat and comment/ask questions can do so in the CHAT discussion and receive up to 1 point in extra credit. You can watch them at any time during the semester.
PUZZEL and WordPress from a previous semester recording http://experts.adobeconnect.com/p8qgaiozu1u
Word Press current version 4 - http://wordpress.org using PHP's INCLUDE & REQUIRE ( Word Press uses REQUIRE more!). We went over this in last weeks chat, you can also see another version of it from a previous recording of the Chat
http://experts.adobeconnect.com/p4yc1x4ftng.
PHPinfo is in Assignment06 HANDOUTS page https://sites.google.com/site/jilmactraining/internet-programming-js/ip-handouts
• Deep Breath – and why it is so important in Learning
• What is in the Puzzle example
o Where did it come from?
http://madrobby.github.io/scriptaculous/puzzle-demo/
What made you think of that??? SAMS Page 144 Chapter 9 and Chapter 27 (pg 325)
Script.acuio.us is about downloading the library and putting in your STWEB space
How do you find out what kind of a site this is???
When you go to this site http://wiki.github.com/madrobby/scriptaculous/puzzle-demo
It redirects you toGIhub https://github.com/madrobby/scriptaculous
“git” is a
distributed version control system
“git-hub” is a collaborative “git” repository
“madrobby” is Thomas Fuchs “git” repository where his scriptaculous is stored
http://script.aculo.us is the website for Script.aculo.us
What else can Script.aculol.us do??? Puzzel, Morphing, Slider (Ajax Controls)
Slider http://madrobby.github.com/scriptaculous/slider/
<pre> http://www.w3schools.com/tags/tag_pre.asp
?? what does .asp stand for?? Google it ....
?? have you tried the “try it yourself”??
?? show how you can change the code – and test it ??
?? how could we use this … if we didn’t have access to STWEB ??
Interesting Tutorials and/or Articles
o
Companion Videos for the ADC - Advanced Design Template for jQuery Mobile
Chris Converse shows you how Dreamweaver CS6 features a streamlined workflow for creating a
jQuery Mobile project containing the necessary CSS and HTML markup. Read the article to learn
more.
http://tv.adobe.com/watch/companion-videos-for-adc/advanced-design-template-for-jquery-mobile/
Tweet: New Companion Videos for the ADC - Advanced Design Template for jQuery Mobile
http://
adobe.ly/OkZjyn
#AdobeTV
o
Build a Currency Converter with jQuery Mobile and Cordova: Introduction
http://www.sitepoint.com/build-a-currency-converter-with-jquery-mobile-and-cordova
o
10 Steps to creating a DreamWeaver CS6 site:
http://www.adobe.com/inspire/2012/10/ten-steps-dreamweaver-cs6.html
o
Introducing the HTML5 storage APIs
http://www.adobe.com/devnet/html5/articles/html5-storage-apis.edu.html
Inspire Magazine October issue now available
http://www.adobe.com/inspire/2012/10
========================
Chrome Code School
http://discover-devtools.codeschool.com
GDG groups
Google Drive has teamed up with Code School to launch the Google Drive API course and it is free for everyone! This is a great way for GDG members to learn more about developing for Google Drive. Check it out and spread the word:Discover Drive
http://campus.codeschool.com/courses/discover-drive/intro
http://Coursera.org
It's a fantastic site which connects with universities around the world to offer various courses for
free. You can even pay $30 to get a certificate of completion. (Which can be super useful.)
===================================
Snow
Meta Tags are used for a variety of things in programs.
Meta Tags were used for SEO (Search Engine Optimization) by Google but is no longer.
Meta Tags have many purposes.
One is the "viewport" - Using
the viewport meta tag to control layout on mobile browsers
A typical mobile-optimized site contains<meta name="viewport" content="width=device-width">
GitHub list complete list of Meta Tags
https://gist.github.com/kevinSuttle/1997924
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
(viewport is listed under Apple)
All of this is dependent on the BROWSERS support. If a browser does not support it - it cannot accomplish it.
Making snow in 2014 -
webkit-user-select: none; cursor: -webkit-zoom-in;<html> <head>
<meta name="viewport" content="width=device-width"> <title>2rzfasz.jpg (640×360)</title>
</head>
<body style="margin: 0px;">
<img style="-webkit-user-select: none; cursor:
-webkit-zoom-in; " src="2rzfasz.jpg"
width="314" height="176"> </body>
</html>
OK - so what does WebKit do?? Web Kit Cursors
http://trac.webkit.org/export/37902/trunk/WebCore/manual-tests/cursor.html Cursor over each gray blocks - see how your cursor changes????
