Web: Plan for thuesday 10th marts (week 11) - and preparation


Teachers plan for the day

We will briefly work with few basic HTML elements

 

Slides and examples from the lecture are accessible here:

http://bjoerks.net/klasser/Mobile_2015_Foraar/materials/

From the lecture special:

 

 

Prepare yourself by before lecture

- Reading briefly about XmlHttpRequest object:
      http://www.w3schools.com/dom/dom_http.asp
      Simple example retrieving textfile: http://www.w3schools.com/dom/tryit.asp?filename=try_dom_xmlhttprequest_first

- Reading briefly about JSON: http://www.w3schools.com/json/default.asp  


- Reading Simple examples of hosting the script on a ASPX page with

- page webmethods on page
- scriptmanager to get realy easy access to webmethods (call them just like javascript function)
I will bring this in to get easy data from "the outside"   (
se info at BLOG used at 3.sem danish class)
 Pp_JavaScriptCodeBehindOgPageMethods.ppt

 

Extra useful tools for making interacting with webservices:

·         With WCF services (and ASMX) you can get the necessary data for SOAP call with WcfTestClient.exe you probably will find  here

-          "C: \ Program Files (x86) \ Microsoft Visual Studio 10.0 \ Common7 \ IDE \ WcfTestClient.exe"

·         Fidler is a usefull tool to show all what is sent and received on the http protocol: http://www.telerik.com/download/fiddler
You can use this tool for discover how to interact with a webservice, by using the service from other applications.

 

 

 Ideas for small exercises:

Using this example as basic Week09_SolutionJavaScriptPart03_WithWebClientDataConverted_20150224.zip
You can find some webservice (Soap, JSON and XML) here: http://webservicedemo.datamatiker-skolen.dk/
You can also find service (JSON and XML) here:
Odense Kommune - Geografiske services - fx Kælkebakker
You now could receive data from the webservice and make small javascript solution showing data on the page.


Make a list of object an when holding the mouse over an element show details in a new window or an element on same page.

It could be persons or maybe you could receive the RSS from your fronter room and present a list of titles and when clicking on the title show the details. In the example you find how to get the author and title (fill in the rss link from fronter room) – use debugging for exploring the data together with the raw data received to find the element in the xml document.

Expand retrieve data by using your own Webservice (WCF) on same webserver and access  from javascript by XmlHttpRequest

Retrieve document from www.eal.dk or www.dr.dk and make a list of all images on the page or all links or just integrate part of page in your page.
 

More links about javascript

General tutorial about Javascipt/Js - where you also can try on the fly...
-http://www.w3schools.com/js/default.asp

Topic: basic elements in javascript

Materials:

-tutorial (and examples) - http://www.w3schools.com/js/default.asp

-tutorial (and examples) -Variables, Functions, Operators, Conditionals

 

Topic: basic elements in javascript

Materials:

-tutorial (and examples) - http://www.w3schools.com/js/default.asp

-tutorial (and examples) -Variables, Functions, Operators, Conditionals

 

Topic: Objects in javascript

Materials:

-tutorial (and examples) - http://www.w3schools.com/js/default.asp

-tutorial (and examples) - JavaScript and Object Oriented Programming (OOP)

 

Topic:   Builtin Objects in javascript

Materials:

Reading:

-JavaScript Objects

-JavaScript Object Examples

-JavaScript DOM Examples

-DOM (Document Object Model) Reference