JavaScript – Page 11 – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

javascript volume

audioのvolumeの調整 0～1の間

<audio src="mp3/180307112410.mp3" controls></audio>
<input type="button" value="↑" onClick="upVolume()">
<input type="button" value="↓" onClick="downVolume()">
<script>
var v = document.getElementsByTagName("audio")[0];

function upVolume(){
	v.volume = v.volume + 0.25;
}
function downVolume(){
	v.volume = v.volume - 0.25;
}

</script>

javascript split

文字列を分割

<script>
	str = "チャート,ニュース,優待";
	array = str.split(",");
	for(var i in array){
		document.write(i + ":"+ array[i] + " <br>");
	}
</script>

escape と unescape

<script>
var career = 'ドコモ';
console.log(career);
var result = escape(career);
console.log(result);
</script>

document.cookie

cookieをsetする

<script>
document.cookie ="key01=value01;";
</script>

複数セット

<script>
document.cookie ="keyA=valueA;";
document.cookie ="keyB=valueB;";
</script>

<script>
var cookieString = document.cookie;

function getCookie(key){
	var cookieString = document.cookie;

	var cookieArray = cookiString.split(";");

	for (var i=0; i<cookieKeyArray.length; i++){
		var targetCookie = cookieKeyArray&#91;i&#93;;

		targetCookie = targetCookie.replace(/^\s+|\s+$/g, "");

		var valueIndex = targetCookie.indexOf("=");
		if(targetCookie.substring(0, valueIndex) == key){
			returnn unescape(targetCookie.slice(valueIndex + 1));
		}
	}
	return "";
}
</script>

cookieを取得して配列にする

<script>
var str = document.cookie;

function getCookieArray(){
	var arr = new Array();
	if(document.cookie != ''){
		var tmp = document.cookie.split('; ');
		for(var i=0; i<tmp.length; i++){
			var data = tmp&#91;i&#93;.split('=');
			arr&#91;data&#91;0&#93;&#93; = decodeURIComponent(data&#91;1&#93;);
		}
	}
	return arr;
}

console.log(getCookieArray());
</script>

わかったような、わかってないような。
passの指定

document.cookie = 'data=123; path=/hoge/';

<script>
var expire = new Date();
expire.setTime(expire.getTime() + 1000 * 3600 * 24);
document.cookie = 'data=123; expires=' + expire.toUTCString();
</script>

vagrantでのlocation.hostとlocation.hostname

locationオブジェクトのhostプロパティは、現在ページURLのホスト情報（ホスト名とポート番号）を参照

http://192.168.33.10:8000で、
location.hostnameは「192.168.33.10」
location.hostは「192.168.33.10:8000」
location.portは「8000」

location.hostnameで動かないな、と思っていたら、location.hostでしたね。

InfoWindow.setContent()

InfoWindow.setContent()はInfoWindowクラスのメソッド

infoWindowはそのままですが、情報ウィンドウ

var infoWindow = new google.maps.InfoWindow({
	position: new google.maps.LatLng( 35.708194, 139.808565 ) ,
	content: "SYNCER" ,
});

infoWindow.open(map);

infoWindow.setContent("Hello!!");

open: 新しい副ブラウザウィンドウを生成し、参照されているリソースをロード
var win = window.open(url, name)
失敗した場合、var winはnull

var win;
var features = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
{
  win = window.open("http://www.cnn.com/", "cnn", features);
}

window.XMLHttpRequest

XMLHttpRequestはサーバーに対してHTTPリクエストを発行するオブジェクト。ブラウザを更新しない。

firefox, operaの場合は、単にXMLHttpRequestクラスのオブジェクトを作るだけだが、IE6はActiveXObjectとして作成しなければならない。

ActiveXObject :
オートメーションオブジェクトへの参照を有効にして返します。
newObj = new ActiveXObject(servername.typename[, location])

ActiveXのXMLHTTPのバージョン: Msxml2.XMLHTTP, Microsoft.XMLHTTP
new ActiveXObject(‘Msxml2.XMLHTTP’);
new ActiveXObject(‘Microsoft.XMLHTTP’);

「readyState」プロパティはサーバからデータを受信するたびに値の更新が行われます。よってこの値を監視することでデータの受信が完了したかどうかを判別できます。
「readyState」プロパティの値が変化すると「onreadystatechange」イベントが発生します。そこで「onreadystatechange」イベント発生する度にチェックする関数を呼び出し、データの受信が完了していたらデータを表示する。
function checkStatus(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
alert(xmlHttp.responseText);
}
}

httpRequest = false;
if(window.XMLHttpRequest){
	httpRequest = new XMLHttpReqeust();
	httpRequest.overrideMimeType('text/xml');
} else if(window.ActiveXObject){
	try {
		httpRequest = new ActiveXObject('Msxml2.XMLHTTP');
	} catch(e){
		httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
	}
}

function request(page){
	if(page == "") return;
	httpRequest.abort();
	httpRequest.open('GET', 'http//webos-goodies.jp/archives/' + page+ '.html', true);
	httpRequest.onreadystatechange = function(){
		if(httpRequest.readyState == 4){
			if(httpRequest.status == 200){
				document.getElementById('page_text').value = httpRequest.responseText;
			}
		}
	}
	httpRequest.send(null);
}

responseXML

xmlを取得する

<test>
	<sample>米ドル/円</sample>
	<sample>ユーロ円</sample>
	<sample>豪ドル/円</sample>
</test>

<form>
	<input type="button" name="submit" value="表示" id=button>
</form>
<div id="result"></div>

<script>
function createXMLHttpRequest() {
  if (window.XMLHttpRequest) {
    return new XMLHttpRequest()
  } else if (window.ActiveXObject) {
    try {
      return new ActiveXObject("Msxml2.XMLHTTP")
    } catch (e) {
      try {
        new ActiveXObject("Microsoft.XMLHTTP")
      } catch (e2) {
        return null
      }
    }
  } else {
    return null
  }
}

function send(){
		var url = "sample.xml";
		var request = createXMLHttpRequest();
		request.open("GET", url, true);
		request.onreadystatechange = function(){
			if(request.readyState == 4 && request.status == 200){
				var result = document.getElementById("result");
      			var xml = request.responseXML;
      			var nodes = xml.getElementsByTagName("sample");
      			var text = nodes[0].firstChild.nodeValue;
      			result.innerHTML =text;
			}
		}
		request.send("");

}
window.onload = function(){
	document.getElementById("button").onclick = send;
}
</script>

Category: JavaScript