NISRA-HTML & JavaScript

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

還記得上星期的課程

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

傳說...

只要學會了JavaScript

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

創造與使⽤用者的互動

成為這個世界的神

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

先來⼩小試⾝身⼿手⼀一下

Google Web Designer

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

First Page: Do a sample example! Just Dot it!

First Page: Do a sample example! Gallery Page: T o
show your photo! Just Dot it!

呼...瀏覽器上跑看看吧!

First Page: Do a sample example! Gallery Page: T o
show your photo! Maps Page: T ry to use Google Maps! Just Dot it!

Now , let’s create an ad !!

現在來為NISRA打造廣告吧!

T oo easy? Let’s coding!

Click me to the Ofﬁcal Website

JavaScript with C\C++ ! C\C++: int、ﬂoat、String、double?function!? but JavaScript: var (See
it’s easy!!) C\C++: void myFunctionName(int num) function myFunctionName(num) Not so hard,right?

Project 1: Use while loop

JavaScript with HTML How to use in <html></html> ? <script>Put
your code here!!</script> or <script src="Put your ﬁle here!!"></script> 1. Create a .js ﬁle in the folder 2.Put <script> in your HTML Page(index.html)

<!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 …

Challenge to use while loop ﬁrst! You will use… 1.
while() 2. <br> (like \n next line) 3. document.write()

Project 2: Make a list

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 ''); */ }

Make a list with JavaScript window.onload = init; ! function
init() { var button = document.getElementById("addButton"); button.onclick = handleButtonClick; /* 從HTML取出該物件(getElementById) 並對按鈕加⼊入事件 (如果點擊會發⽣生什麼事) */ loadPlaylist(); }

Handle the button click now function handleButtonClick(e) { var textInput
= document.getElementById("T extInput"); var listName = textInput.value; //取出輸⼊入的值，並放⼊入變數listName中 … }

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>節點下 }

Project 3:Play Google Map

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" };

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

<!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 …

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"); } }

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 }

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 }; //⼀一些基本設定:縮放⼤大⼩小、中央位置、街道地圖或衛星地圖 … }

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

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); … }

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); //最後加⼊入標記和視窗就⼤大功告成 });

That’s all !?

More !!

Only Google !?

Facebook Developers T witter Developers

I want more !!

Find on Internet and share with us

NISRA-HTML & JavaScript

NISRA-HTML & JavaScript

More Decks by Yun Chen

Other Decks in Programming

Featured

Transcript