Assignment_11_JavaScript.doc

(1)

Programming for the Internet

with

JavaScript – Assign11

11/15/2015…………..………..………..…..……….…..Learning/JavaScript/Assign11-JavaScript.doc [email protected] & [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 –

THIS IS NOT A RACE – This is a journey, our JavaScript Intro has another 5 wks.

 You are not expected to memorize – but to be aware & know "How to find What you Need, When you Need it"

 I have graded everything to date - PLEASE check to make sure I have graded EVERYTHING you have turned in ... if not then RE-POST to the thread - and I will re-grade. Moodle isn't perfect, I'm not perfect, and sometimes ... well ...

 Web Site’s Semester at a glance: https://sites.google.com/site/jilmactraining/internet-programming-js

 Remaining Chats are ...

11/29, 12/6 and 12/13

 The difference i++, i+1 another linkhttp://stackoverflow.com/questions/17241877/difference-between-and-1-in-javascript

2. Reading Assignment

Read Chapter 15 - Designing with JQuery

JavaScript: Visual QuickStart Guide

Tom Negrino (Author), Dori Smith (Author)

 Start Reading JavaScript: Visual QuickStart Guide on your Kindle in under a minute

 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 deeply & Laugh ... it fuels the brain with Oxygen ... which is important in the learning process!

Note: Chapter 15 in the 8th and 9th editions of our text are slightly different - I will include the expamples in the

3. Discussion/Research Assignment – 2 points

(2)

Learn JavaScript

Learn jQuery

Learn jQueryMobile

Learn AppML

Learn AngularJS

Learn AJAX

Learn JSON

Give me a link to 3 tutorials/articles that you found interesting in your research.

Have fun with this research, keep your eyes open – and your mind ready for new ideas! It’s a big web – and we have to learn to use the new tools available to us, and yet still know who/what/how to trust.

300+ words and links to your research.

4.Code Examples=Before + After – 3 points

Chapter 15 - Designing with jQuery

Do 3 Before + After ex.–post to STWEB Assignment Page

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 this button from the TOP Nav on

http://www.javascriptworld.com

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)

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. JilMac’s discussions are never closed – you are allowed to learn any assignment at any time of the semester.

CHAT – Dates & Times are on the Recording page of

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.

(3)

 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

(4)

Last Week we began looking at WordPress on the Shared Web Host ... BlueHost.com that CCV and the VSC Tech Support are evaluating as a replacement for STWEB.

jQuery - Free JavaScript Library

http://jquery.com

This API (Application Program Interface) works across a multitude of browsers. It has changed the way people write JavaScript.

In our first example in Chapter 14 Script Chapter14/script01.html

on line 5 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

this is calling Google API - ajax

This doesn't mean you don't use other JavaScript as demonstrated in line 6 that calls script01.js

script01.js

Tips on page 366 - tip 3 states that you can make jQuery even lighter by using the

minified version (http://en.wikipedia.org/wiki/Minification_(programming))

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min .js

Since we can see jQuery's code - should we copy the file and run it from our server?

Or should we run it from another server ... like Google ??? Google is a CDN-Content Delivery Network.

http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/

1. Faster Download - from Google

2. Decrease load on your server

3. Caching - jQuery is used frequently

4. JilMac's favorite - Maintenance - who will update jQuery on YOUR server?

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js <-- the 1 denotes the MOST recent!!

Where to learn more:

http://learn.jquery.com/

(5)

Forms, Forms, Forms

How Ajax Works http://www.noupe.com/ajax/how-ajax-works.html

 50 Useful JavaScript and jQuery Techniques and Plugins

 FORMS http://www.noupe.com/category/ajax

 http://www.noupe.com/css/47-excellent-ajax-css-forms.html

 http://www.noupe.com/ajax/how-ajax-works.html

 That also lead me to http://www.noupe.com/css

 http://www.noupe.com/css/50-useful-css-tools-and-generators-for-developers.html I liked CSSportal.com

 GOOGLE FORMS Quick & Easy - you can imbed them into an HTML WebPage

o https://sites.google.com/site/jilmacgsites/form

 You can create a form in JavaScript that emails information - it can only email from your computer - so for Windows

computers that means it will try to email from Outlook. However most people today use web based email so they can use their phones & tablets.

 To create a form that updates a file - you either have to:

o Use a third party application like Survey Monkey, etc.

o Use Google Docs Forms

o Use PHP or another Server side language

 Last week we learned how PHP can update a file on your server - you either have to check the file every day or combine that

with an email alert.

 Google Docs has email alerts built into it's forms & files.

================================================================================

Web Services: REST & SOAP - Other Examples

Web Services and Models

A web service, in its most simplistic form, is merely a service hosted on a network. Generally, we tend to only think of websites but these service might also include email, secure shell, irc, and secure HTTP (to name a few). The purpose is to provide some functionality to a group, in many cases, to provide a graphical front end to a data set (what many websites are, like your bank).

Representational state transfer

REST is a style, that takes the form of the traditional client-server relationship. A client requests data from a server. The server interprets that request, and returns a result. The requests are build around the transfer of representations of data (resources). For example, passing variables to a server via a URL is RESTful - https://arcti.cc/stats2.html?sysinfo&info=serverTime Here, we're asking the server for sysinfo, info of serverTime. It parses these variables and dumps out an appropriate response.

Simple Object Access Protocol

Like rest, SOAP is a style, but instead of focusing on data (content), it focuses on the service. SOAP allows RPC calls to be made to a listening service, which then invoke a procedure on the server. The AmazonEC2 API is a SOAP-based API. When you send (request) something to happen, an instance can be spun up, shut down, deleted, or even a new logical volume attached to an existing instance

(6)

What are Web Services?

A web service is, according to Wikipedia, an application programming interface (API) that is accessed by

HTTP and executed on a remote system.

There are two major classes of Web services: REST-compliant Web

services and arbitrary Web services. REST-compliant Web services manipulate XML representations of Web

resources using a uniform set of “stateless” operations. Arbitrary Web services may expose an arbitrary set of

operations.

1

Some of the API’s used in Web services are: REST, SOAP, WSDL and UDDI. REST and SOAP were

covered in chapter 22 of our text. WSDL stands for Web Service Description Language. The acronym UDDI

stands for Universal Description Discovery and Integration. UDDI is designed to be interrogated by SOAP

messages and to provide access to WSDL documents.

2

REST:

The acronym REST stands for

Re

presentational

S

tate

T

ransfer. According to our text REST focuses on two

network design principles:

1. Resources are represented by URL’s

2. Operations are carried out by standard HTTP methods

3

The subject was first introduced by Roy Fielding at UC Irvine in the academic dissertation, "Architectural

Styles and the Design of Network-based Software Architectures” in the year 2000. REST follows these four

design principles:



Uses HTTP methods



Be stateless



Expose directory structure-like URI’s



Transfer XML, JavaScript Object Notation (JSON) or both

4

SOAP:

The acronym SOAP stands for

S

imple

O

bject

A

ccess

P

rotocol. According to our text, SOAP was designed to

package remote procedure calls into XML wrappers in a standardized way.

5