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

NISRA-HTML & JavaScript

Yun Chen
December 08, 2013

NISRA-HTML & JavaScript

Have fun with Google Web Designer & JavaScript

Yun Chen

December 08, 2013
Tweet

More Decks by Yun Chen

Other Decks in Programming

Transcript

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

    show your photo! Maps Page: T ry to use Google Maps! Just Dot it!
  2. 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?
  3. 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)
  4. <!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 …
  5. Challenge to use while loop first! You will use… 1.

    while() 2. <br> (like \n next line) 3. document.write()
  6. 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 ''); */ }
  7. Make a list with JavaScript window.onload = init; ! function

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

    = document.getElementById("T extInput"); var listName = textInput.value; //取出輸⼊入的值,並放⼊入變數listName中 … }
  9. 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>節點下 }
  10. 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" };
  11. 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
  12. <!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 …
  13. 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"); } }
  14. 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 }
  15. 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 }; //⼀一些基本設定:縮放⼤大⼩小、中央位置、街道地圖或衛星地圖 … }
  16. 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
  17. 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); … }
  18. 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); //最後加⼊入標記和視窗就⼤大功告成 });