モナたんメモ

お知らせ

  • Twitter(一時的に鍵無しへ) -> https://twitter.com/monatannzunzun
  • 基本的に公開しているMODはバグがある旧バージョンです。Twitterでのみ最新版を配布します
  • Ctrl+Fを押すと文字検索できます

サイトトップ

解説メニュー

    JavaScript系解説

    JavaScriptとは

    • 略称 js
    • webサイトで使われる言語
    • jQuery等のライブラリを使用可能
    • イベント(ボタンクリックで動作)等を実現可能

    JS基礎

    HTMLへの読み込み

    • index.html
      • <!--外部JS読み込み-->
<script src="output.js"></script>
<!--HTML内記述-->
<script>console.log("HTML内のjsです");</script>
    • output.js
      • console.log("HTML外のjsです");
    • 結果
      • HTML外のjsです
HTML内のjsです

    コメントアウト

    動作をしない行を作ることでコード説明など書ける 
    //1行コメントアウト
 
/* 
複数段コメントアウト
*/

    log出力

    ブラウザでF12押すと出てくるデバック用の奴
    • js
      • console.log("ログ出力したい内容");
    • 結果
      • ログ出力したい内容

    変数定義

    • js
      • //outputValueの変数を作り文字testを代入
var outputValue = "test";
console.log(outputValue);

//outputValueに数字0を代入
outputValue = 0;
console.log(outputValue);
    • 結果
      • test
0

    四則演算

    • js
      • var num;

// 数字+数字 1+1=2
var num1 = 1 + 1;
console.log('1+1=' + num1);

// 文字+文字 "1" + "1" -> "11"
num1 = "1" + "1";
console.log('1+1=' + num1);

//数字+文字->文字 11 + "2" -> "112"
num1 = 11;
var num2 = "2";
console.log('11+2=' + num1 + num2);

//数字+文字->数字 11 + "2" = 13
num = num1 + parseInt(num2);
console.log('11+2=' + num);

//数字-数字 6-3=3
num1 = 6;
num2 = 3;
num = num1 - num2;
console.log('6-3='+num);

//数字×数字 6×3=18
num = num1 * num2;
console.log('6*3='+num);

//数字÷数字 6/3=2
num = num1 / num2;
console.log('6/3='+num);

//数字÷数字の余り 14/4=3余り2
num1 = 14;
num2 = 4;
num = num1 % num2;
console.log('14%4='+num);
    • 結果
      • 2
1+1=11
11+2=112
11+2=13
6-3=3
6*3=18
6/3=2
14%4=2

    要素取得・書き換え

    • index.html
      • <html>
	<head>
		<script src="output.js"></script>
	</head>
	<body>
		<div id="div1">
			<div class="divs">div1_1です</div>
			<div class="divs">div1_2です</div>
			<div class="divs">div1_3です</div>
			<div name="divname">div1_4です</div>
		</div>
	</body>
<html>
    • output.js
      • var html;
// HTMLのid名 div1 のHTML
html = document.getElementById('div1').innerHTML;
console.log('div1のhtml : ' + html);

// HTMLのclass名 divs のHTML
// 1番目のclass divs
html = document.getElementsByClassName('divs')[0].innerHTML;
console.log('1番目のdivs: ' + html);
// 2番目のclass divsのhtmlを変える
document.getElementsByClassName('divs')[1].innerHTML = "<div class='divs_changed'>div1_2変更しました</div>";

// 最初から4番目のtag名 div のHTML
document.getElementsByTagName('div')[4].innerText = 'div1_3変更しました';

// name名 divname のHTML
html = document.getElementsByName('divname')[0].innerHTML;
console.log('1番目のdivname: ' + html);
    • 結果
      • div1のhtml : <div id="div1"><div class="divs">div1_1です</div><div class="divs">div1_2です</div><div class="divs">div1_3です</div><div name="divname">div1_4です</div></div>
1番目のdivs: <div class="divs">div1_1です</div>
1番目のdivname: <div name="divname">div1_4です</div>
    • 変更後のindex.html
      • <html>
	<head>
		<script src="output.js"></script>
	</head>
	<body>
		<div id="div1">
			<div class="divs">div1_1です</div>
			<div class="divs_changed">div1_2変更しました</div>
			<div class="divs">div1_3変更しました</div>
			<div name="divname">div1_4です</div>
		</div>
	</body>
<html>
      指定した要素の 語尾に追加するもの
      親要素(1つ上のグループ) .parentNode
      子要素(1つ下のグループ) .childNodes
      最初の子要素(HTML見た時に一番上にあるもの) .firstChild
      最後の子要素(HTML見た時に一番下にあるもの) .lastChild
      前の要素(同じグループで手前にあるもの) .previousSibling
      次の要素(同じグループで後ろにあるもの) .nextSibling
    • output.js
      • var html;
// id名 div1 の上の要素のHTML
html = document.getElementById('div1').parentNode.innerHTML;
console.log('div1の上の要素 : ' + html);

// id名 div1 の下の2番目の要素のHTML
html = document.getElementById('div1').childNodes[1].innerHTML;
console.log('div1の下の2番目の要素: ' + html);

// id名 div1 の下の最初の要素のHTML
html = document.getElementById('div1').firstChild.innerHTML;
console.log('div1の下の最初の要素 : ' + html);

// id名 div1 の下の最後の要素のHTML
html = document.getElementById('div1').lastChild.innerHTML;
console.log('div1の下の最後の要素 : ' + html);

// id名 div1 の下の最後の要素の前のHTML
html = document.getElementById('div1').lastChild.previousSibling.innerHTML;
console.log('div1の下の最後の要素の前の要素 : ' + html);

// id名 div1 の下の最初の要素の後のHTML
html = document.getElementById('div1').firstChild.nextSibling.innerHTML;
console.log('div1の下の最初の要素の後の要素 : ' + html);
    • 結果
      • div1の上の要素 : <body><div id="div1"><div class="divs">div1_1です</div><div class="divs_changed">div1_2変更しました</div><div class="divs">div1_3変更しました</div><div name="divname">div1_4です</div></div></body>
div1の下の2番目の要素: <div class="divs_changed">div1_2変更しました</div>
div1の下の最初の要素 : <div class="divs">div1_1です</div>
div1の下の最後の要素 : <div name="divname">div1_4です</div>
div1の下の最後の要素の前の要素 : <div class="divs">div1_3変更しました</div>
div1の下の最初の要素の後の要素 : <div class="divs_changed">div1_2変更しました</div>

    要素追加/削除

    • js
      • var html = document.getElementById("div1");

//追加要素 この場合は<div></div>
var appendDiv = document.createElement("div");

//id名 div1の下の後ろに要素を追加
appendDiv.innerHTML = "appendChild追加";
html.appendChild('<li>appendChild追加</li><li class="removeTest">remove用要素</li>');

//id名 div1の下の前に要素を追加
appendDiv.innerHTML = "insertBefore追加";
html.insertBefore(appendDiv);

//2つのclass名 removeTestの要素を削除
document.getElementsByClassName("removeTest")[1].remove();
    • 変更後のindex.html
      • <html>
    	<head>
    		<script src="output.js"></script>
    	</head>
    	<body>
    		<div id="div1">
			<div><li>insertBefore追加</li><li class="removeTest">remove用要素</li></div>
    			<div class="divs">div1_1です</div>
    			<div class="divs_changed">div1_2変更しました</div>
    		<div class="divs">div1_3変更しました</div>
    		<div name="divname">div1_4です</div>
			<div><li>appendChild追加</li></div>
    	</div>
    </body>
<html>

    CSS関係

    • js
      • //id名 div1の要素取得
var html = document.getElementById("div1");

//取得した要素のstyle->colorの値を変更
html.style.color = "orange";

//取得した要素のstyle->font-sizeの値を変更
html.style.fontSize = "20px";

//取得した要素のfont-sizeの値を出力
console.log(html.style.fontSize);
    • 結果
      • 20px

    日時関係

    • js
      • //アクセス時間を2018年7月19日(木) 17時15分20秒とする

//2018年7月19日 17時15分20秒
var dt = new Date();
console.log("日時 : " + dt);

// 2018
var year = dt.getFullYear();
console.log("年 : " + year);

// 7
var month = dt.getMonth()+1;
console.log("月 : " + month);

// 19
var date = dt.getDate();
console.log("日 : " + date);

// 4
var day = dt.getDay();
console.log("曜日(数字) : " + day);

/*※　曜日まで出したい場合は以下のように記述(上は書かない)
日=0,月=1・・という配列になっており[番号]でその値を取得できる
*/
//配列定義
var dateT = ["日","月","火","水","木","金","土"];
//配列の4個目(=木)を取得
day = dateT[dt.getDay()];
console.log("曜日 : " + day);

// 17
var hours = dt.getHours();
console.log("時 : " + hours);

// 15
var minutes = dt.getMinutes();
console.log("分 : " + minutes);

// 20
var seconds = dt.getSeconds();
console.log("秒 : " + seconds);
    • 結果
      • 日時 : Thu Jul 19 07 2018 17:15:20 GMT+0900 (日本標準時)
年 : 2018
月 : 7
日 : 19
曜日(数字) : 4
曜日 : 火
時 : 17
分 : 15
秒 : 20

    URL取得

    • js
      • //開いているページを https://monatann.azurewebsites.net/index.html?name=kiritann#youとする。

// https://monatann.azurewebsites.net/index.html?name=kiritann#you
var url = location.href;
console.log("URL : " + url);

// monatann.azurewebsites.net
var host = location.host;
console.log("Host : " + host);

// /index.html
var path = location.pathname;
console.log("Path : " + path);

// ?name=kiritann
var paramater = location.search;
console.log("Paramater : " + paramater);

// #you
var anchor = location.hash;
console.log("Anchor : " + anchor);

// https
var protocol = location.protocol;
console.log("Protocol : " + protocol);
    • 結果
      • URL : https://monatann.azurewebsites.net/index.html?name=kiritann#you
Host : monatann.azurewebsites.net
Path : /index.html
Parameter : ?name=kiritann
Anchor : #You
Protocol : https

    文字列処理

    • js
      • var text = "0123456789";
						
//① 始点と終点の位置で抜き出し　後ろの位置の省略可能
// 56789
var after = text.slice(5);
// -が付くと後ろから
// 789
after = text.slice(-3);
// 567
after = text.slice(5, 8);
after = text.slice(5, -2);

//②　始点とそこからの文字列の長さで抜き出し　後ろの位置の省略可能
// 3456789
after = text.substr(3);
// 5678
after = text.substr(5, 4);
after = text.substr(-5, 4);

//③　開始の地点と、終了の地点の位置で抜き出し
//sliceとの違いは、
//・終了地点の省略不可
//・開始地点>終了地点の時、(終了地点, 開始地点)になる。
// 1234
after = text.substring(5, 1);

//④　文字数取得
// 10
var num = text.length;

//⑤　特定の文字の場所を探す
// ない場合-1　一つ見つけると終了
// 5
var num = text.indexOf('567');
// -1
num = text.indexOf('567', 8);

//⑥ 置換
//元の文字
text = "ｷﾘﾀﾝｶﾜｲｲﾔｯﾀｰ";
//置換
var text2 = text.replace("ｷﾘﾀﾝ","ｱｶﾈﾁｬﾝ");
//ｱｶﾈﾁｬﾝｶﾜｲｲﾔｯﾀｰ
console.log(text2);
    • 結果
      • ｱｶﾈﾁｬﾝｶﾜｲｲﾔｯﾀｰ