Upgrade to Pro — share decks privately, control downloads, hide ads and more …

NISRA-HTML & JavaScript

Cf6d8219ae9edc7620396d0f8ae7bc38?s=47 Yun Chen
December 08, 2013

NISRA-HTML & JavaScript

Have fun with Google Web Designer & JavaScript

Cf6d8219ae9edc7620396d0f8ae7bc38?s=128

Yun Chen

December 08, 2013
Tweet

Transcript

  1. 駕馭網⾴頁的魔法-JavaScript Yun Chen@NISRA

  2. 還記得上星期的課程

  3. 好像少了點什麼? 網⾴頁像魁儡⼀一樣被我們單調的操控著 就像少了靈魂似的,感受不到任何熱情 說好的與網⾴頁互動呢Q_Q

  4. 傳說...

  5. 只要學會了JavaScript

  6. 就能駕馭各種神器 Google、T witter、Facebook

  7. 創造與使⽤用者的互動

  8. 成為這個世界的神

  9. 來看看艾倫⼤大師怎麼說吧

  10. None
  11. 先來⼩小試⾝身⼿手⼀一下

  12. Google Web Designer

  13. 針對新世代廣告設計 ! Google Web Designer ! 透過簡單滑⿏鼠點按操作,即可迅速完成 以HTML5打造的互動多媒體內容 !

  14. None
  15. None
  16. None
  17. First Page: Do a sample example! Just Dot it!

  18. None
  19. None
  20. None
  21. First Page: Do a sample example! Gallery Page: T o

    show your photo! Just Dot it!
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. 呼...瀏覽器上跑看看吧!

  30. First Page: Do a sample example! Gallery Page: T o

    show your photo! Maps Page: T ry to use Google Maps! Just Dot it!
  31. None
  32. None
  33. None
  34. None
  35. Now , let’s create an ad !!

  36. None
  37. None
  38. None
  39. None
  40. None
  41. 現在來為NISRA打造廣告吧!

  42. T oo easy? Let’s coding!

  43. Click me to the Offical Website

  44. JavaScript with C\C++ ! C\C++: int、float、String、double?function!? but JavaScript: var (See

    it’s easy!!) C\C++: void myFunctionName(int num) function myFunctionName(num) Not so hard,right?
  45. Project 1: Use while loop

  46. JavaScript with HTML How to use in <html></html> ? <script>Put

    your code here!!</script> or <script src="Put your file here!!"></script> 1. Create a .js file in the folder 2.Put <script> in your HTML Page(index.html)
  47. <!doctype html> <html> <head> <title>My First JavaScript</title> <meta charset="utf-8"> <script

    src="yourjavascriptname.js"></script> </head> …… I think you will get this …
  48. Challenge to use while loop first! You will use… 1.

    while() 2. <br> (like \n next line) 3. document.write()
  49. Project 2: Make a list

  50. How to start? window.onload = function; //Why? You should load

    javascript after HTML ! function yourFunctionName() { /*Do something what you want!! like: Gary.yell('' I’m Gary not a gay ''); */ }
  51. Make a list with JavaScript window.onload = init; ! function

    init() { var button = document.getElementById("addButton"); button.onclick = handleButtonClick; /* 從HTML取出該物件(getElementById) 並對按鈕加⼊入事件 (如果點擊會發⽣生什麼事) */ loadPlaylist(); }
  52. Handle the button click now function handleButtonClick(e) { var textInput

    = document.getElementById("T extInput"); var listName = textInput.value; //取出輸⼊入的值,並放⼊入變數listName中 … }
  53. If else is same with C\C++ if (listName == "")

    { alert("Please enter a list"); } else { var li = document.createElement("li"); li.innerHTML = listName; //加⼊入(innerHTML)你想要的內容 var ul = document.getElementById("list"); ul.appendChild(li); //將<li>物件加到<ul>節點下 }
  54. Project 3:Play Google Map

  55. JavaScript with Object ! Object ? What’s that!? It looks

    like a dictionary var NISRA_Member = { "AllenOwn": " a handsome guy" , "SY": "a homebody" , "Yun Chen": "a student" };
  56. JavaScript with Google API 1.Put this script in <head> too

    2.Raise your hand if you have any question. Create another script and link to Google Maps API <script src=" "> </script> http://maps.google.com/maps/api/js?sensor=true
  57. <!doctype html> <html> <head> <title>Where am I?</title> <meta charset="utf-8"> <script

    src="http://maps.google.com/maps/api/js?sensor=true"></script> <script src="myLoc.js"></script> <link rel="stylesheet" href="myLoc.css"> </head> …… I think you will get this …
  58. How to get position from browser? window.onload = getMyLocation; !

    function getMyLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(displayLocation, displayError); //將結果傳⾄至function displayLocation() } else { alert("Oops, no geolocation support"); } }
  59. Print your location on HTML function displayLocation(position) { var latitude

    = position.coords.latitude;//緯度 var longitude = position.coords.longitude;//經度 //從你的位置(position)找出座標(coords) var div = document.getElementById("location"); div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: "+ longitude; /* 從HTML取出該物件(getElementById) 並加⼊入(innerHTML)你想要的內容 */ showMap(position.coords); //傳到下⼀一個function }
  60. Now , try to use Google Map API function showMap(coords)

    { var googleLatAndLong = new google.maps.LatLng(coords.latitude, coords.longitude); var mapOptions = { zoom: 10, center: googleLatAndLong, mapT ypeId: google.maps.MapT ypeId.ROADMAP }; //⼀一些基本設定:縮放⼤大⼩小、中央位置、街道地圖或衛星地圖 … }
  61. Then add the map to your page … var mapDiv

    = document.getElementById("map"); map = new google.maps.Map(mapDiv, mapOptions); ! var title = "Your Location"; var content = "You are here: " + coords.latitude + ", " + coords.longitude; addMarker(map, googleLatAndLong, title, content); //將資料傳到下⼀一個function
  62. Add a marker and put in your map function addMarker(map,

    latlong, title, content) { var markerOptions = { position: latlong, map: map, title: title, clickable: true //⽤用於設定彈出細節的視窗 }; //⼀一些基本設定:標記的座標、放的地圖、標題 var marker = new google.maps.Marker(markerOptions); … }
  63. Show the detail of window var infoWindowOptions = { content:

    content, position: latlong }; //⼀一些基本設定:彈出視窗的內容、視窗的位置 var infoWindow = new google.maps.InfoWindow(infoWindowOptions); ! google.maps.event.addListener(marker, 'click', function() { infoWindow.open(map); //最後加⼊入標記和視窗就⼤大功告成 });
  64. That’s all !?

  65. More !!

  66. Only Google !?

  67. Facebook Developers T witter Developers

  68. I want more !!

  69. Find on Internet and share with us

  70. Q & A