Programming for the Internet
with
JavaScript – Assign07
10/18/2015………..………..…..……….…..Learning/JavaScript/Assign07-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
6.
Project Outlines - have them LINK from your STWEB web page
===========================================================
1. Review
Breathe and Laugh – THIS IS NOT A RACE – This is a journey (sometimes long & bumpy)
Class Web Site’s Semester at a glance: http://stweb.ccv.edu/CIS-2140-VO01-V15FA/jam08260/Assignment07
NOTE: The CHAT recordings are required, You can attend for 1 point or watch the recording & type 100+ words what you learned can earn you 1 extra credit point.
https://sites.google.com/site/jilmactraining/internet-programming-js/js-chat-rec
CHECK YOUR GRADES - sometimes they don't go through, human error or computer error - it doesn't matter - you have to verify everything in life - so check your grades - if I have not graded you the way you expected - post to Moodle again!!! Checking your GRADES - is like CHECKING your Credit Score - Your Worth It !!!
Cookies have been in an out of Favor ... but one thing for sure ... Web Site need and Users want a way to
store information about a web site locally. The next phase of Cookies is Session Storage & Local
Storage.
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API#Storage
Copywrite Troll - will scan your sites pictures http://www.reformer.com/localnews/ci_25969243/vernon-company-faces-lawsuit-from-copyright-troll?utm_content=buffer6c8a7&utm_medium=social&utm_source=linkedin.com&utm_campaign=buffer
More about CopyWrite Trolls http://abovethelaw.com/2014/08/getty-threatens-the-wrong-ip-law-firm-in-its-copyright-trolling-efforts/
Free & Clear Images, Sounds, Video, etc usually grouped into "Media":
http://commons.wikimedia.org/
images, sounds, video
PICTURES: Many Free
to use Pictures http://pixabay.com/ You need to credit where & who they are fromHow do you learn everything you need to learn?? How do you keep up with what is new?
-or- Microsoft YouthSpark - http://www.microsoft.com/about/corporatecitizenship/en-us/youthspark/youthsparkhub
We have been discussing Editors ... but Editors are only the beginning ...
FrontEnds have: Bootstrap and Foundation - Frameworks for CSS, Bootstrap integrated into DreamWeaver CC
Bootstrap uses the Responsive Grid - the "Grid" shows what will be displayed at different window widths.
Bootstrap CDN - Content Delivery Network - where the Bootstrap CSS, JS & JQuery resides
Bootstrap consists of Bootstrap CSS and Bootstrap JQuery Comparison http://responsive.vermilion.com/compare.php
BackEnds have IDE - Integrated Development Environments - we will talk more about these in the coming weeks.
IMAGES it's how we think
-
Gotta Watch!! Videos on IMAGES, WHAT CAN WE USE IMAGES for keeps Expanding!!
Improving Images -
https://www.youtube.com/watch?feature=player_embedded&v=SjbSEjOJL3U
Using Images to Control a Program http://www.youtube.com/watch?v=PCfsfdOmRcA&feature=em-uploademail
Google's Picture Editor has really grown up - easy quick and it
would take you 10x longer to do these editing tricks in
Photoshop and that's if you knew that level of Photoshop
Show: Google-ImageEditing.docx or .pdf
https://sites.google.com/site/jilmactraining/internet-programming-js/ip-handouts
Bucky's HTML5 - it is a 6 hour tutorial - packed with stuff!
https://www.youtube.com/watch?v=k0f9pC8b3wM
He does Web Storage API at 5:00:00 instead of Cookies
Here it is broken up http://www.floralaxia.com/floralaxia-html5-tutorial.html
PHP Academy & TheNewBoston http://www.floralaxia.com/floralaxia-jquery-tutorial.html
2. Reading Assignment
Working with the Dom https://www.youtube.com/watch?feature=player_embedded&v=t15KrZA4yRY#! Look in OtherExamples
Chapter 10, Objects and the DOM AND Appendix A & B
About Node Manipulation ...242
Adding Nodes ... 244
Deleting Nodes ... 246
Deleting Specific Nodes ... 248
Inserting Nodes ... 251
Replacing Nodes ... 254
Writing Code with Object Literals ... 257
JavaScript: Visual QuickStart Guide
Tom Negrino (Author), Dori Smith (Author)
Start Reading 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!
THIS IS NOT A RACE – This is a journey. Some journey’s take a LOT of breaths, so breathe deeply.
3. Discussion/Research Assignment – 2 point
Has 2 parts:PHP – is a Server Side Programming Language – what does that mean? What can PHP do that JavaScript can’t? Where can you get PHP code? 300+ words
Your links can include: links to information you need for this class, your project, and your training Explanations of terms and links to where you can get additional info
Examples of code, what the code does, comments on where it could come in handy, etc.
This Assignments CHAT - I will introduce you to our class Navigation Page and how you can use it on your website. All your navigation into just 1 file using PHP's INCLUDE or REQUIRE statement, you can start to expand your navigation with ease!! (if after watching me in CHAT you haven't put this into a separate file so that you only have to update it in one place - let's work together to get it done. It will make you LIFE much easier!! Give me a call and we can work one-on-one. You should add some LINKS pages. You can start to put together LINKS on one page or separate - which ever works for you.
Debuggers - there are three common that I use throughout this class - usually I use Google's development tool but sometimes I use FireBug(Download Firebug for Firefox) and IE's (F12-Developers Tools)
Find 3 tutorials on Debuggers
o Google Chrome's JavaScript Console
o or
o Firefox's Firebug
o or
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.
INTERESTING TUTORIAL - JavaScript Calculator you may want to substitute for one from above.
http://www.webestools.com/scripts_tutorials-code-source-8-javascript-calculator-buttons-calculator-keyboard-support-operations-modulo.html
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.
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 THE LIVE CHAT, BUT IT IS REQUIRED to WATCH. I enjoy working
interactively 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 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. JilMac’s discussions are never closed – you are allowed to learn any assignment at any time of the semester.
https://sites.google.com/site/jilmactraining/internet-programming-js/js-chat-rec
CHAT Directions
Open a browser window
GoTo http://JilMac.com web site
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
REMINDER-Project Outline due:
https://sites.google.com/site/jilmactraining/internet-programming-js/ccv-projectDebugging JavaScript
https://developers.google.com/chrome-developer-tools/docs/javascript-debugging#sources-panelLive Edit (right click) - done in the HTML or CSS - can be viewed from browser.
Live Edit - done in the JavaScript - must be Ctrl+S and then Save As and FTP'ed to see
after skimming the
Chrome Developer Tools
on
http://developers.google.com
use the terms you learned to get more
YouTube Videos
for more examples
training.
Let's use these debugging tools as we go through some examples from Chapter 10
Objects and the DOM ... Nodes are what make the DOM
Nodes can have Parents, Children & Siblings
Nodes represent HTML Elements called Element Nodes
Text called Text Nodes
Attributes called Attribute Nodes
all of these are the Document Node
Fun THINGS - ROLLOVERS - you may want to do one of these on your sites.
** http://www.ccv.edu/locations -
DOM info: http://www.w3schools.com/jsref/prop_area_coords.asp
We have an example of using the img tab usemap. Our own CCV site has a great map
Line 61
<p><img
src="files/images/Locations/VTmap2010.png" width="225"
height="369"
alt="map of CCV locations" usemap="#locationmap" align="right"
border="0"> <br />
IF you bring your graphic into PAINT – as you move your cursor around - the coordinate is displayed in
the Lower-Left Hand Coordinate. This measurement is the corner point, there are two – and they for the square of the graphic.
NOTE: When the graphic is NOT sized the same as the display Width & Height – the numbers get a little off. You can easily size a graphic in PICNIC – Google Picasa’s online editor
Line 75 is very long – off the page – but if you break it down – it looks like this <a href="/locations/central_administration/index.html">Central Administration</a>
: 802-828-2800</p> <p>
<map name="locationmap"><area shape="rect" coords="8,319,67,357"
href="locations/bennington/index.html" alt="Bennington" /> <area shape="rect" coords="65,333,124,366" href="locations/brattleboro/index.html" alt="Brattleboro" /> <area shape="rect" coords="0,135,59,171" href="locations/middlebury/index.html" alt="Middlebury" /> <area shape="rect" coords="89,122,147,153" href="locations/montpelier/index.html" alt="Montpelier" /> <area shape="rect" coords="82,53,137,87" href="locations/morrisville/index.html" alt="Morrisville" /> <area shape="rect" coords="139,3,216,28" href="locations/newport/index.html" alt="Newport" /> <area shape="rect" coords="23,206,67,244" href="locations/rutland/index.html" alt="Rutland" /> <area shape="rect" coords="18,22,96,46" href="locations/st_albans/index.html" alt="St. Albans" /> <area shape="rect" coords="139,72,213,108" href="locations/st_johnsbury/index.html" alt="St. Johnsbury" /> <area shape="rect" coords="62,272,119,308" href="locations/springfield/index.html" alt="Springfield" /> <area shape="rect" coords="78,184,146,218" href="locations/upper_valley/index.html" alt="Upper Valley" /> <area shape="rect" coords="13,65,73,95" href="locations/Winooski/index.html" alt="Winooski" /> </map></p>
NOTE: since this image has an invisible background, and used within the CCV website - I'm not sure WHY the "rec" coords do not line up with what PAINT or PHOTOSHOP say ... but use those methods to find coordinates that you want to use.
KEEP Learning
Certificates count MORE today than in the past.iVersity Courses: https://iversity.org/en/courses
