顯示具有 HTML5 標籤的文章。 顯示所有文章
顯示具有 HTML5 標籤的文章。 顯示所有文章

2023/09/10

Mixed content blocked" when running an HTTP AJAX operation in an HTTPS page

再index.html加上下方即可 
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">


By at
標籤: , , ,

2019/06/03

XPath(XML Path Language)

XPath(XML Path Language)是一種XML路徑語言，那也能用來當查詢語言
以前玩爬蟲時也蠻常用XPath(XML Path Language)，現今瀏覽器也能直接透過原始碼複製XPath路徑
這次示範的網站一樣是RoS-BoT


今天主要想爬如下圖紅框部分

對紅圈內的文字按右鍵檢視原始碼，按右鍵/Copy/Copy XPath

Read more »
By at
標籤: ,

2019/03/09

使用Node.js和Redis建立一個HTML5聊天室

這篇程式碼主要由IBM Developerworks所提供
我建置的專案如下圖

這篇想法就是透過WebSocket來建立通訊
將接收到的值以JSON方式存進Redis的list內
並透過Broadcast filter到的訊息將其加入至聊天室內

app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var app = express();


// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;


www.js
Read more »
By at
標籤: , ,

2015/09/22

HTML5 存取相機與聲音 

<!DOCTYPE html>
<html lang="zh-tw">
 <head>
  <meta charset="utf8">
  <script type="text/javascript">
   navigator.getUserMedia = navigator.getUserMedia ||
          navigator.webkitGetUserMedia ||
          navigator.mozGetUserMedia ||
          navigator.msGetUserMedia;

   if(navigator.getUserMedia){
    navigator.getUserMedia({video : true, audio : true},
     function (stream) {
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(stream);
      video.onloadedmetadata = function(e){
       video.play();
      };
     },
     function (err) {
      console.log(err);
     }
    );
   }else
    alert("無法使用相機");
  </script>
  <title>Hi</title>
 </head>
 <body>
  <video autoplay></video>
 </body>
</html>
By at
標籤: ,

2015/09/07

JavaScript 阻擋Form表單送出動作

Form透過POST/GET方法傳送出資料，如果要檢查欄位輸入是否正確才讓傳送表單資料
可以透過onsubmit事件去攔截，該方法前得加上return

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script type="text/javascript">
  function test () {
   return false;
  }
 </script>
</head>
<body>
 <form onsubmit="return test();">
  ...
 </form>
</body>
</html>
By at
標籤: ,

2015/08/05

使用Google Maps API 結合高雄公車即時線路資訊

上班寫範例用


<!--停車場Sample url=http://data.kaohsiung.gov.tw/Opendata/DetailList.aspx?CaseNo1=AP&CaseNo2=12&Lang=C -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <title>OpenData Sample 1 by C.Y. Fang </title>
  <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map { height: 90%; width: 100% }
    #about { height: 10%; width: 100% }
  </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=zh-TW"></script>
  <script type="text/javascript">
  var markerArray;
  var mapOptions = {
      zoom: 12,
      center: new google.maps.LatLng(22.631386, 120.301951),
      mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map;

  function createMarker(position, title, icon, content, map){
    var marker = new google.maps.Marker({
        position: position,
        title: title,  
        icon: icon
    });

    var infowindow = new google.maps.InfoWindow({
        content: content,
        position: position
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });

    google.maps.event.addListener(marker, 'mouseout', function() {
        infowindow.close();
    });

    return marker;
  }

  function startTimer () {
    setInterval(function () {
      var url = "https://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20xml%20WHERE%20url%3D%22http%3A%2F%2Fxml11.kctmc.nat.gov.tw%3A8080%2Fxmldata%2FParking.xml%22&format=json&diagnostics=true";
      
      if(map === undefined)
        map = new google.maps.Map(document.getElementById("map"), mapOptions);

      if(markerArray === undefined)
        markerArray = Array();

    $.getJSON(url, function(data){
      if(data){

        var dataInfo = data.query.results.NewDataSet.Data;
        var length = dataInfo.length;

        for(var index = 0; index < length; index++){

          var update = '<p>';
          if(dataInfo[index].UPDATETIME)
            update += '最新更新時間：' + dataInfo[index].UPDATETIME + '<p>';

          var price = '';
          if(dataInfo[index].PRICE !== null)
            price = dataInfo[index].PRICE.toString();

          markerArray[index] = createMarker(
            new google.maps.LatLng(dataInfo[index].N, dataInfo[index].E),
            dataInfo[index].NAME,
            {
              url: 'https://www.iconfinder.com/icons/559874/download/png/32',
              size: new google.maps.Size(32, 32),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(0, 32)
            },
            price + update +
            '還有' + dataInfo[index].CAR_NUM + '個車位',
            map
          );

          markerArray[index].setMap(null);
          markerArray[index].setMap(map);
        }
      }
    });
  }, 3000);
}

  function initialize() {
    startTimer();
  }
 </script>

</head>
<body onload="initialize()">
  <div id="map"></div>
  <div id="about">
    <a href="https://www.facebook.com/ChenYoFang">My Facebook</a>&nbsp&nbsp&nbsp&nbsp&nbsp
    <a href="http://cyfangnotepad.blogspot.tw/">My Blogger</a>
  </div>
</body>
</html>


執行結果：


資料來源：
http://data.kaohsiung.gov.tw/Opendata/DetailList.aspx?CaseNo1=AP&CaseNo2=12&Lang=C
By at
標籤: , , ,

在Google Maps Market 加入InfoWindow

上課寫的範本


<!--停車場Sample url=http://data.kaohsiung.gov.tw/Opendata/DetailList.aspx?CaseNo1=AP&CaseNo2=12&Lang=C -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <title>OpenData Sample 1 by C.Y. Fang </title>
  <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map { height: 90%; width: 100% }
    #about { height: 10%; width: 100% }
  </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=zh-TW"></script>
  <script type="text/javascript">
  var markerArray;
  var mapOptions = {
      zoom: 12,
      center: new google.maps.LatLng(22.631386, 120.301951),
      mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map;

  function createMarker(position, title, icon, content, map){
    var marker = new google.maps.Marker({
        position: position,
        title: title,  
        icon: icon
    });

    var infowindow = new google.maps.InfoWindow({
        content: content,
        position: position
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });

    google.maps.event.addListener(marker, 'mouseout', function() {
        infowindow.close();
    });

    return marker;
  }

  function startTimer () {
    setInterval(function () {
      var url = "https://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20xml%20WHERE%20url%3D%22http%3A%2F%2Fxml11.kctmc.nat.gov.tw%3A8080%2Fxmldata%2FParking.xml%22&format=json&diagnostics=true";
      
      if(map === undefined)
        map = new google.maps.Map(document.getElementById("map"), mapOptions);

      if(markerArray === undefined)
        markerArray = Array();

    $.getJSON(url, function(data){
      if(data){

        var dataInfo = data.query.results.NewDataSet.Data;
        var length = dataInfo.length;

        for(var index = 0; index < length; index++){

          var update = '<p>';
          if(dataInfo[index].UPDATETIME)
            update += '最新更新時間：' + dataInfo[index].UPDATETIME + '<p>';

          var price = '';
          if(dataInfo[index].PRICE !== null)
            price = dataInfo[index].PRICE.toString();

          markerArray[index] = createMarker(
            new google.maps.LatLng(dataInfo[index].N, dataInfo[index].E),
            dataInfo[index].NAME,
            {
              url: 'https://www.iconfinder.com/icons/559874/download/png/32',
              size: new google.maps.Size(32, 32),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(0, 32)
            },
            price + update +
            '還有' + dataInfo[index].CAR_NUM + '個車位',
            map
          );

          markerArray[index].setMap(null);
          markerArray[index].setMap(map);
        }
      }
    });
  }, 3000);
}

  function initialize() {
    startTimer();
  }
 </script>

</head>
<body onload="initialize()">
  <div id="map"></div>
  <div id="about">
    <a href="https://www.facebook.com/ChenYoFang">My Facebook</a>&nbsp&nbsp&nbsp&nbsp&nbsp
    <a href="http://cyfangnotepad.blogspot.tw/">My Blogger</a>
  </div>
</body>
</html>

執行結果：



資料來源：
http://data.kaohsiung.gov.tw/Opendata/DetailList.aspx?CaseNo1=AP&CaseNo2=12&Lang=C


By at
標籤: , ,

2014/03/18

Google Maps API 分析導航功能Sample Code

最近幫忙滅火會用到導航功能，順便寫一下筆記XD

要實現這個功能必須使用Directions Service類別的route方法



route能帶入DirectionsRequest以及一個function
DirectionsRequest這個物件裡面有這些屬性


Read more »
By at
標籤: , ,

2014/02/26

透過YQL取得高雄復健醫療院所並繪製到Google Map 

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf8">
 <title>OpenData Demo1 by C.Y. Fang</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">
  function initialize() {
   var temp;
   var mapOptions = {
     zoom: 12,
     center: new google.maps.LatLng(22.631386, 120.301951),
     mapTypeId: google.maps.MapTypeId.ROADMAP,
    }
   var map = new google.maps.Map(document.getElementById("map"), mapOptions);
   var url = "http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20html%20WHERE%20url%3D%22http%3A%2F%2Fdata.kaohsiung.gov.tw%2FOpendata%2FDownLoad.aspx%3FType%3D2%26CaseNo1%3DAE%26CaseNo2%3D6%26FileType%3D1%26Lang%3DC%22&format=json&diagnostics=true&callback=?";
 
   $.getJSON(url, function(data){
    temp = JSON.parse(data.query.results.body.p);

    if(temp){
     var m_length = temp.length;
     for(var index=0; index<m_length;index++){
 
      var marker = new google.maps.Marker({
       position: new google.maps.LatLng(temp[index].lat, temp[index].lng),
       title:temp[index].org_Text + "\n" 
            + temp[index].informaddress + "\n"
            + temp[index].informtel
      });

      marker.setMap(map);
     }
    }

   });
  }
 </script>
 <style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map { height: 95% ; width: 100% }
 
    </style>
</head>
<body onload="initialize()">
 <div id="map"></div>
</body>
</html>



參考資料：
http://data.kaohsiung.gov.tw/Opendata/DetailList.aspx?CaseNo1=AE&CaseNo2=6&Lang=C
http://data.kaohsiung.gov.tw/Opendata/DownLoad.aspx?Type=2&CaseNo1=AE&CaseNo2=6&FileType=1&Lang=C
By at
標籤: , , ,

透過YQL取得高雄市私立課後托育中心並繪製到Google Map 

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf8">
 <title>OpenData Demo1 by C.Y. Fang</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">
  function initialize() {
   var temp;
   var mapOptions = {
     zoom: 12,
     center: new google.maps.LatLng(22.631386, 120.301951),
     mapTypeId: google.maps.MapTypeId.ROADMAP,
    }
   var map = new google.maps.Map(document.getElementById("map"), mapOptions);
   var url = "http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20html%20WHERE%20url%3D%22http%3A%2F%2Fdata.kaohsiung.gov.tw%2FOpendata%2FDownLoad.aspx%3FType%3D2%26CaseNo1%3DAE%26CaseNo2%3D12%26FileType%3D1%26Lang%3DC%22&format=json&diagnostics=true&callback=?";
 
   $.getJSON(url, function(data){
    temp = JSON.parse(data.query.results.body.p);
    
    if(temp){
     var m_length = temp.length;
     for(var index=0; index<m_length;index++){
 
      var marker = new google.maps.Marker({
       position: new google.maps.LatLng(temp[index].lat, temp[index].lng),
       title:temp[index].org_Text + "\n" 
            + temp[index].informaddress + "\n"
            + temp[index].servTime + "\n"
            + temp[index].informtel
      });

      marker.setMap(map);
     }
    }

   });
  }
 </script>
 <style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map { height: 95% ; width: 100% }
 
    </style>
</head>
<body onload="initialize()">
 <div id="map"></div>
</body>
</html>







參考資料：
http://data.kaohsiung.gov.tw/Opendata/DetailList.aspx?CaseNo1=AE&CaseNo2=12&Lang=C
http://data.kaohsiung.gov.tw/Opendata/DownLoad.aspx?Type=2&CaseNo1=AE&CaseNo2=12&FileType=1&Lang=C
By at
標籤: , , ,

2014/02/23

透過YQL取得高雄紅橘線捷運車站並繪製到Google Map

謝謝高雄市政府的開源資料，讓我順便學習YQL XDDDD

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf8">
 <title>OpenData Demo1 by C.Y. Fang</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">
  function initialize() {
   var temp;
   var mapOptions = {
     zoom: 12,
     center: new google.maps.LatLng(22.631386, 120.301951),
     mapTypeId: google.maps.MapTypeId.ROADMAP,
    }
   var map = new google.maps.Map(document.getElementById("map"), mapOptions);
   var url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fdata.kaohsiung.gov.tw%2FOpendata%2FDownLoad.aspx%3FType%3D2%26CaseNo1%3DAU%26CaseNo2%3D1%26FileType%3D2%26Lang%3DC%22&format=json&callback=?";

   $.getJSON(url, function(data){
    temp = JSON.parse(data.query.results.body.p);
    if(temp){
     var m_length = temp.length;
     for(var index=0; index<m_length;index++){

      var marker = new google.maps.Marker({
       position: new google.maps.LatLng(temp[index].車站緯度, temp[index].車站經度),
       title:temp[index].車站中文名稱
      });
      marker.setMap(map);
     }

    }
   });
  }
 </script>
 <style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map { height: 95% ; width: 100% }

    </style>
</head>
<body onload="initialize()">
 <div id="map"></div>
</body>
</html>




參考資料：
http://api.jquery.com/jquery.getjson/
http://developer.yahoo.com/yql/console/#h=desc+yql.env
http://data.kaohsiung.gov.tw/Opendata/DetailList.aspx?CaseNo1=AU&CaseNo2=1&Lang=C
http://data.kaohsiung.gov.tw/Opendata/DownLoad.aspx?Type=2&CaseNo1=AU&CaseNo2=1&FileType=2&Lang=C
https://developers.google.com/maps/documentation/javascript/examples/marker-simple
By at
標籤: , , ,

2013/11/17

JavaScript 取得鍵盤值 



<html>
 <head>
  <meta charset="utf8">
  <title>Demo</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script type="text/javascript">
   function GetKeyNumber (event) {
    alert(event.keyCode);
   }
  </script>
 </head>
 <body onkeydown="GetKeyNumber(event);">

 </body>
</html>





參考資料：
http://www.w3schools.com/jsref/event_onkeydown.asp
http://api.jquery.com/keypress/
http://api.jquery.com/keydown/
http://help.dottoro.com/ljlkwans.php
By at
標籤: ,

jQuery 修改z-index達成置頂廣告效果

平常看ETtoday新聞，閒置三分鐘後會出現廣告





廣告通常置頂於最上層，作法可能是去調整z-index

以下是我的程式碼：
<html>
 <head>
  <meta charset="utf8">
  <title>Demo</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script type="text/javascript">
   $(function () {
    $("#test2").position({
     left: 0,
     top:0
    });
   });

   function Hide () {
    $("#test2").hide();
   }
  </script>
  <style type="text/css">
   #test2{
    position: absolute;
    z-index: 1;
    left: 120px;
    top: 100px;
   }
   
   #test2 img{
    margin: 0 auto;
    width: 640px;
    height: 480px;
   }
  </style>
 </head>
 <body>
  <div id="test1">
   testdsadasdsad<br>
   eqwewqe<br>
   qewqeqwe<br>
   wqewqewqe<br>
   wqewqe<br>
  </div>
  <div id="test2">
   <img src="1.jpg" onclick="Hide();">
  </div>
 </body>
</html>

開啟範例網頁會出現假廣告


點擊時，會將廣告隱藏起來，或將廣告直接刪除



參考資料：
http://api.jquery.com/offset/

圖片來源：
http://www.wired.com/wiredenterprise/wp-content/uploads/2013/07/ff_googleinfrastructure_large.jpg
By at
標籤: ,

2013/10/16

使用ADB對Android Chrome Debugging

手機上的Chrome沒有像電腦的Chrome版本有開發人員工具可以使用，我找到了『Remote Debugging on Android』作為本篇文章的主要參考來源
除錯前要先到Chrome商店下載『ADB』，某些Chrome版本不支援『ADB』，不支援的狀況下可能要去安裝其他的Chrome版本

首先，下載ADB


安裝後，會在Chrome的右上角看到一個Android寶寶的圖示


點擊Android寶寶的圖示會出現選單，選擇Start ADB

就可以開始使用View Inspection Targets除錯了

開啟除錯畫面大概就是這樣，手機必須用USB線與電腦做連結，並且開啟Debugging功能
連接後，手機端必須開啟Chrome，沒有開啟的話不會有網址列給你輸入網址和不具備除錯功能

Read more »
By at
標籤: , ,

2013/10/11

HTML5 localStorage 與 sessionStorage

HTML5新增了Web Storage的方法，分別是『localStorage』與『sessionStorage』兩者差異僅在儲存時間長短而已

localStorage：能夠無限期將值儲存在瀏覽器內，除非使用者清除歷史紀錄，否則會一直儲存到瀏覽器的空間之中

sessionStorage：儲存期限僅止於網頁還沒被關閉前都會一直存在，網頁關閉時，會將值刪除

在還沒任何動作之前，我們可以透過瀏覽器的開發工具來查詢目前『localStorage』與『sessionStorage』使用狀況


 按鈕未被觸發時，可以得知『localStorage』與『sessionStorage』尚未被使用

Read more »
By at
標籤: ,

2013/10/05

在Bing Maps API加入標記圖示

Bing Maps API也可以標記圖示，有興趣可以參考『Adding Entities to the Map』

程式碼如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
  <script type="text/javascript">
   function GetMap(){

    // Create the locations
    var Kaohsiung = new Microsoft.Maps.Location(22.649264, 120.326293);
    var Taichung = new Microsoft.Maps.Location(24.264493, 120.944152);
    var Taipei = new Microsoft.Maps.Location(25.029617, 121.543451);

    // Initialize the map
    var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
    credentials: "Your key number",
    center: Kaohsiung,
    mapTypeId: Microsoft.Maps.MapTypeId.road,
    zoom: 8});

    // Create the entity collection with the polygon and pushpins at each corner
    var polygonWithPins = new Microsoft.Maps.EntityCollection();
    polygonWithPins.push(new Microsoft.Maps.Pushpin(Kaohsiung));
    polygonWithPins.push(new Microsoft.Maps.Pushpin(Taichung));
    polygonWithPins.push(new Microsoft.Maps.Pushpin(Taipei));

    // Add the shape to the map
    map.entities.push(polygonWithPins)
  }
  </script>
 </head>
 <body onload="GetMap();">
  <div id='mapDiv'></div>
 </body>
</html>

首先建立一個map元件，再來建立一個EntityCollection物件『polygonWithPins』
EntityCollection是一個群，EntityCollection可以加入Infobox, Polygon, Polyline, Pushpin  TileLayer, or EntityCollection.
polygonWithPins內包含了三個Pushpin，圖釘物件建構方法又可帶入位置

透過map的EntityCollection將圖釘群們加入到地圖



參考資料：
http://msdn.microsoft.com/en-us/library/gg427604.aspx
http://msdn.microsoft.com/en-us/library/gg427615.aspx
http://msdn.microsoft.com/en-us/library/gg427616.aspx
By at
標籤: , ,

申請 Bing Maps API

最近比賽需要，所以就來申請Bing Maps API
Bing Maps API既Google Maps API的另一個選擇
首先到Bing Maps申請一組Key，申請之前必須先擁有Microsoft account

Bing Maps API有分三種版本，在這邊我是用Basic Key



　 Trial Key Basic Key Enterprise Key
Public website ※ ※ ※
Windows Store app ※ ※ ※
Mobile ※ ※ ※
Broadcast ※ ※ ※
Not-for-profit ※ ※ 　
Education ※ ※ 　
Private website ※ 　 ※
Business asset management ※ 　 ※

申請完會看到Bing Maps Account Center


Read more »
By at
標籤: , ,

2013/09/30

透過HTML調用Mobile的Line

Line是一個可以透過網路去通訊的手機應用軟體，最近案子需要將這個功能加上去
但聽同學『螃蟹』說網頁版的已經關閉了，那只好開始找資料啦XDDDD

結果在BBS找到『[問題] 用javascript分享網頁至LINE』，底下有位大神TonyQ的回復非常有幫助，他說Line是走協定的，這句話真是點醒夢中人啊XDDD

找到了Line的應用說明，但都日文啊！！！！！！
算了，當英文看XDDD


看起來Line不只可以傳文字，也可以傳圖片，但如果要指定對象我就不知道怎麼用啦XDDD

這次示範如何傳遞文字



Read more »
By at
標籤:

2013/09/22

Google Maps API 街景服務

街景服務是Google Map其中一個功能，街景服務可以讓我們從Google Map小人圖去取得街景


透過小人去取得的街景圖，可以更清楚的知道該路口附近有什麼明顯的指標，像我自己蠻常用這項服務的，自從Google Map出來後，就極少用過別家的地圖服務了！



有了街景圖可以讓我們在查詢街道時有一個相對位置，不過別以店家作為相對位置喔，店家何時會倒都不知道喔！到時候約會遲到或找不到地點就不要怪Google Map，要怪自己把目標用錯！

Read more »
By at
標籤: , ,

2013/09/07

透過JavaScript讓HTML頁面互相傳值

最近在想如何將值傳遞到另一個網頁，大二有學過用PHP Post以及Get方式去傳遞
不過想嘗試用JavaScript傳遞，就上網找了一下方法

參考『在HTML頁面之間傳遞參數』文章，是透過JavaScript去分析網址內的內容，將內容的值取出來
我以該篇文章作為基礎，透過Button去傳遞值，讓第二個網頁的JavaScript去分析該網址值，並取出來用

第一個頁面的程式碼如下：

<!DOCTYPE html>

<html>
 <head>
  <meta charset="utf8">
  <title>測試1</title>
 </head>
 <body>
  <button onclick='location.href="index2.html?a=b&b=c&c=d"'>
   One
  </button>
 </body>
</html>

可以看得到我有一個Button，點擊之後會觸發onclick事件
觸發之後將網址轉到index2.html?a=b&b=c&c=d

問號後接的是我要傳遞的值

Read more »
By at
標籤: ,
訂閱： 文章 (Atom)