Month: March 2018

fontWeightを判定します。

<p id="list1">Catcher In The Light</p>
<p id="list2">About You</p>
<p id="list3">GAME</p>
<input type="button" value="ボタン" onclick="changeFontWeight();">

<script>
function changeFontWeight(){
	var obj1 = document.getElementById("list1");
	var obj2 = document.getElementById("list2");
	var obj3 = document.getElementById("list3");
	if(obj1.style.fontWeight == "bold"){
		obj1.style.fontWeight = "normal";
		obj2.style.fontWeight = "bold";
	} else if(obj2.style.fontWeight == "bold") {
		obj2.style.fontWeight = "normal";
		obj3.style.fontWeight = "bold";
	} else if(obj3.style.fontWeight == "bold"){
		obj3.style.fontWeight = "normal";
		obj1.style.fontWeight = "bold";
	} else {
		obj1.style.fontWeight = "bold";
	}
}
</script>

変数をHTMLに渡して表示する

<h1>MyStory <div style="display:inline;" id="title"></div></h1>

<p id="list1">Catcher In The Light</p>
<p id="list2">About You</p>
<p id="list3">GAME</p>
<input type="button" value="ボタン" onclick="changeFontWeight();">

<script>
function changeFontWeight(){
	var obj1 = document.getElementById("list1");
	var obj2 = document.getElementById("list2");
	var obj3 = document.getElementById("list3");
	if(obj1.style.fontWeight == "bold"){
		obj1.style.fontWeight = "normal";
		obj2.style.fontWeight = "bold";
		list = "list2";
		

	} else if(obj2.style.fontWeight == "bold") {
		obj2.style.fontWeight = "normal";
		obj3.style.fontWeight = "bold";
		list = "list3";
	} else if(obj3.style.fontWeight == "bold"){
		obj3.style.fontWeight = "normal";
		obj1.style.fontWeight = "bold";
		list = "list1";
	} else {
		obj1.style.fontWeight = "bold";
		list = "list1";
	}
	var obj4 = document.getElementById(list).innerHTML;
	var title = document.getElementById("title");
	title.textContent = obj4
}
</script>

ボタンを押す度に、タイトルとfontWeightがboldに切り替わる。

<audio src="mp3/180307112410.mp3" controls></audio>

<input type="button" value="start" onClick="start()">
<input type="button" value="pause" onClick="pause()">
<script>
var v = document.getElementsByTagName("audio")[0];
 
function start(){
    v.play();
}
function pause(){
    v.pause();
}
</script>

toGMTString()
インターネットグリニッジ標準時 (GMT) 協定に基づき、与えられた日付を表す

<script>
var today = new Date();
var str = today.toGMTString();

document.write(str);
</script>

Wed, 07 Mar 2018 11:23:29 GMT

fontをboldにする

<p id="list1">Catcher In The Light</p>
<!-- <p id="list2">About You</p>
<p id="list3">GAME</p> -->
<input type="button" value="ボタン" onclick="changeFontWeight('list1');">

<script>
function changeFontWeight(idname){
	var obj = document.getElementById(idname);
	if(obj.style.fontWeight == "bold"){
		obj.style.fontWeight = "normal";
	} else {
		obj.style.fontWeight = "bold";
	}
}
</script>

beforeunload が送られるときに、実行コードを含められる。このイベントが windowのリソースがunloadする時、実行。
次のページに移動する時など。

<p>黒田バズーカ</p>
<script>
window.onbeforeunload = function() {
console.log("Before Unload");
}

</script>

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>

isNaN() 関数は引数が NaN （非数）かどうかを判定

NaN はNot a Numberの略

<script>
	if(isNaN(155) === false){
		document.write("数字です");
	}
	if(isNaN("文字") !== false){
		document.write("文字です");
	}
</script>

数字です文字です

文字列を分割

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

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

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>

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でしたね。