NISRA-HTML & JavaScript

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

還記得上星期的課程

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

傳說...

Slide 5

Slide 5 text

只要學會了JavaScript

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

創造與使⽤用者的互動

Slide 8

Slide 8 text

成為這個世界的神

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Google Web Designer

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Now , let’s create an ad !!

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

現在來為NISRA打造廣告吧!

Slide 42

Slide 42 text

T oo easy? Let’s coding!

Slide 43

Slide 43 text

Click me to the Ofﬁcal Website

Slide 44

Slide 44 text

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?

Slide 45

Slide 45 text

Project 1: Use while loop

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

My First JavaScript …… I think you will get this …

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Project 2: Make a list

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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); //將

物件加到

節點下 }

Slide 54

Slide 54 text

Project 3:Play Google Map

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

JavaScript with Google API 1.Put this script in too 2.Raise your hand if you have any question. Create another script and link to Google Maps API http://maps.google.com/maps/api/js?sensor=true

Slide 57

Slide 57 text

Where am I? …… I think you will get this …

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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 }

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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