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

font-awesomeのハンバーガー

document.getElementByIdで、アイコンがクリックされた際に、document.body.className = ‘menu-open’とdocument.body.className = ”を返します。なお、font-awesomeはCDNで取得します。

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Top Menu Tab</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<style>
		body {
			padding: 0;
			margin: 0;
			font-family: Verdana, sans-serif;
			background: #eee;
			color: #333;
			padding: 8px;
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			overflow-x: hidden;
		}
		#cover {
			background: #000;
			opacity: 0.6;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left:0;
			z-index:1;
			display: none;

		}
		#menu {
			z-index:2;
			position: absolute;
			top: 0;
			right: -180px;
			color: #fff;
			background: #4c81e9;
			padding: 8px;
			box-sizing: border-box;
			width: 180px;
			min-height: 100%;
			transition: .4s;
		}

		#show, #hide {
			float: right;
			cursor: pointer;
		}
		body.menu-open {
			overflow-y: hidden;

		}
		body.menu-open #cover {
			display: block;

		}
		body.menu-open #menu {
			right: 0;
			
		}
	</style>
</head>
<body>

	<i class="fa fa-bars" id="show"></i>
		<h1>Hello</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet eius repudiandae aut, dolorum amet beatae distinctio quam, nemo minus, velit quod assumenda. Magnam distinctio fugiat in expedita officiis vitae.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet eius repudiandae aut, dolorum amet beatae distinctio quam, nemo minus, velit quod assumenda. Magnam distinctio fugiat in expedita officiis vitae.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet eius repudiandae aut, dolorum amet beatae distinctio quam, nemo minus, velit quod assumenda. Magnam distinctio fugiat in expedita officiis vitae.</p>
	<div id="cover"></div>

	<div id="menu">
		<i class="fa fa-times" id="hide"></i>
		<ul>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
		</ul>
	</div>
	<script>
	(function(){
		'use strict';

		var show = document.getElementById('show');
		var hide = document.getElementById('hide');

		show.addEventListener('click', function(){
			document.body.className = 'menu-open'
		});

		hide.addEventListener('click', function(){
			document.body.className = ''
		});
	})();
	</script>
</body>
</html>

addEventListener：The EventTarget.addEventListener() method registers the specified listener on the EventTarget it’s called on. The event target may be an Element in a document, the Document itself, a Window, or any other object that supports events (such as XMLHttpRequest).

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Top Menu Tab</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<style>
		body {
			padding: 0;
			margin: 0;
			font-family: Verdana, sans-serif;
		}
		#menu {
			position: absolute;
			top: 0;
			right: 0;
			color: #fff;
			background: #4c81e9;
			box-sizing: border-box;
			width: 180px;
			min-height: 100%;
		}
		#main {
			z-index: 1;
			background: #eee;
			position: absolute;
			top: 0;
			left: 0;
			color: #333;
			padding: 8px;
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			overflow: auto;
			transition: .4s;
		}
		#main.menu-open {
			left: -180px;
		}
		#show {
			float: right;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div id="menu">
		<ul>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
		</ul>
	</div>
	<div id="main">
		<i class="fa fa-bars" id="show"></i>
		<h1>Hello</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet eius repudiandae aut, dolorum amet beatae distinctio quam, nemo minus, velit quod assumenda. Magnam distinctio fugiat in expedita officiis vitae.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet eius repudiandae aut, dolorum amet beatae distinctio quam, nemo minus, velit quod assumenda. Magnam distinctio fugiat in expedita officiis vitae.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet eius repudiandae aut, dolorum amet beatae distinctio quam, nemo minus, velit quod assumenda. Magnam distinctio fugiat in expedita officiis vitae.</p>
	</div>
	<script>
	(function(){
		'use strict';

		var show = document.getElementById('show');
		var main = document.getElementById('main');

		show.addEventListener('click', function(){
			if (main.className === 'menu-open'){
				main.className = '';
			} else {
				main.className = 'menu-open';
			}
		});
	})();
	</script>
</body>
</html>

クリッカブルタブメニュー

%e7%84%a1%e9%a1%8c

event.preventDefault()
If this method is called, the default action of the event will not be triggered.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Top Menu Tab</title>
	<style>
		body {
			padding:0;
			margin:0;
			font-family: Verdana, sans-serif;
		}
		.container {
			padding: 0;
			margin: 30px auto;
			width: 500px;
			background: #dce0e0;
		}
		ul.menu {
			list-style: none;
			padding: 0;
			margin: 0;
			font-size: 0;
		}
		ul.menu li {
			display: inline-block;
		}
		ul.menu li a {
			display: inline-block;
			font-size: 14px;
			width: 80px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			text-decoration: none;
			padding: 7px;
			color: #333;
		}
		ul.menu li a.active {
			background: #353d3e;
			color: #fff;
		}
		ul.menu li a:not(.active):hover {
			opacity: 0.5;
			transition: .8s;
		}
		.content {
			font-size: 14px;
			padding: 7px 10px;
			line-height: 1.4;
			background: #353d3e;
			color: #fff;
			min-height: 150px;
			display: none;
		}
		.content.active {
			display: block;
		}
	</style>
</head>
<body>
<div class="container">
	<ul class="menu">
		<li><a href="#" data-id="about" class="active  menu_item">About</a></li>
		<li><a href="#" data-id="service" class="menu_item">Service</a></li>
		<li><a href="#" data-id="contact" class="menu_item">Contact</a></li>
	</ul>
	<div class="content active" id="about">
	Lorem1 ipsum dolor sit amet, consectetur adipisicing elit. Ad, beatae eos ab, esse cupiditate doloribus cumque tenetur atque aspernatur, maxime ipsam nemo ipsum quis placeat. Facere ipsam debitis possimus nostrum!
	</div>
	<div class="content" id="service">
	Lorem2 ipsum dolor sit amet, consectetur adipisicing elit. Ad, beatae eos ab, esse cupiditate doloribus cumque tenetur atque aspernatur, maxime ipsam nemo ipsum quis placeat. Facere ipsam debitis possimus nostrum!
	</div>
	<div class="content" id="contact">
	Lorem3 ipsum dolor sit amet, consectetur adipisicing elit. Ad, beatae eos ab, esse cupiditate doloribus cumque tenetur atque aspernatur, maxime ipsam nemo ipsum quis placeat. Facere ipsam debitis possimus nostrum!
	</div>
<p></p>
<script>
	(function(){
		'use strict'

		var menuItems = document.getElementsByClassName('menu_item');
		var contents = document.getElementsByClassName('content');

		var i;

		for (i=0; i < menuItems.length; i++){
			menuItems&#91;i&#93;.addEventListener('click', function(e){
				e.preventDefault();

				var i;
				for (i=0; i < menuItems.length; i++){
					menuItems&#91;i&#93;.className = 'menu_item';
				}
				this.className = 'menu_item active';

				var i;
				for (i=0; i < contents.length; i++){
					contents&#91;i&#93;.className = 'content';
				}
				document.getElementById(this.dataset.id).className = 'content active';

			});
		}

	})();
</script>
</body>
</html>

JavaScript　王様ゲーム

任意で一致しない複数の乱数を取得する場合は、Math.floor(Math.random()* (n+1))をdo whileで一致しない限りループさせて取得します。htmlに値を返すのは、document.getElementById(”).innerHTMLです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王様ゲーム</title>
    <style>
    body {

    }
    </style>
  </head>
  <body>
    <h1>王様ゲーム</h1>
    <p>人数: <input type="text" id="num"></p>
    <p><input type="button" value="王様曰く!" onclick="kingSaid();"></p>
    <p id="result"></p>    
    <script>
      function kingSaid(){
        var orders = [
        'デコピンしなさい',
        'クイズを出しなさい',
        'ほめちぎりなさい',
        'ドリンクを注ぎなさい'
        ];
        var order = orders[Math.floor(Math.random()* orders.length)]; 

        var num = document.getElementById('num').value;
        var p1 = Math.floor(Math.random()* (num)) + 1;
        var p2;

        if (num < 2){
          p2 = 1;
        } else {
          do {
            p2 = Math.floor(Math.random()* (num)) + 1;
          } while (p1 == p2);

        }

        

        document.getElementById('result').innerHTML = 
          '#' + p1 + 'の人が#' + p2 + 'の人に' + order;
      }
    </script>
  </body>
</html>

JavaScript getTimeによる日付計算

date(year, month, day)をgetTime()で取得し、1000(ミリ秒) * 60(秒)　* 60(分) * 24(時間)で割ります。　

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <title>日付計算の練習</title>
    <style>
    body {

    }
    </style>
  </head>
  <body>
    <h1>日付計算の練習</h1>
    <p>誕生日: <input type="text" name="birthday" id="birthday" value="1990-04-01"></p>
    <p><input type="button" value="計算!" onclick="getAge();"></p>
    <p>生まれてから<span id="daysPast">???</span>日経過していて、およそ<span id="age">???</span>歳です！</p>
    <script>
      function getAge(){
          var birthday = document.getElementById('birthday').value.split("-");

          var d1 = new Date(birthday[0], birthday[1]-1, birthday[2])
          var d2 = new Date();
          var diff = d2.getTime() - d1.getTime();
          var daysPast = Math.floor(diff / (1000 * 60 * 60 * 24));
          var age = Math.floor(daysPast / 365.25);

          document.getElementById('daysPast').innerHTML = daysPast;
          document.getElementById('age').innerHTML = age;
      }
    </script>
  </body>
</html>

Unity　Game作成

他のシーンを呼び出すには、build settingで設定します。
%e7%84%a1%e9%a1%8c

呼び出しのスクリプトです。

#pragma strict

var ball : Transform;
var n : int = 0;

function Update () {
	if (Input.GetButtonUp("Jump")){
	Instantiate(ball, transform.position, transform.rotation);
	n++;
	}

	if (n > 10){
	Application.LoadLevel("gameover");
	}
}

Gameの書き出しは、build and settingでbuidl and rundで行います。

player

#pragma strict

function Update () {
	var x: float = Input.GetAxis("Horizontal");
	transform.Translate(x * 0.2, 0, 0);

}

function OnCollisionEnter(obj: Collision) {
	if (obj.gameObject.name == "Enemy(Clone)"){
	 transform.localScale.x -= Random.Range(0.1, 0.5);
	 if (transform.localScale.x < 1.0) transform.localScale.x = 1.0;
	} 

}

enemy

#pragma strict


function Update () {
	transform.position.z -= 0.1;
	transform.Rotate(1, 1, 1);
	if (transform.position.z < -12.0){
	Application.LoadLevel("GameOver");
	}

}

function OnCollisionEnter(){
	Destroy(gameObject);
}

#pragma strict

var enemy: Transform;
function Update () {
	if(Time.frameCount % 60 == 0){
	Instantiate(enemy, Vector3(Random.Range(-5.0,5.0),1,8), transform.rotation);
	}
}

#pragma strict

var style: GUIStyle;

function OnGUI(){
	GUI.Label(Rect(10, 10, 100, 30), "GameOver", style);
}

unity JavaScript

Unityのスクリプトリファレンスです。
https://docs.unity3d.com/ScriptReference/index.html

objectに対するスクリプトを記述していきます。

#pragma strict

function Start () {
 Debug.Log("hello world");
}

function Update () {

}

unityのJSは変数の宣言など書き方が少し異なります。

#pragma strict

var x : int = 5;

function Start () {
 Debug.Log("hello world ->" + x);
}

function Update () {

}

オブジェクトを動かす際には、transformのポジションを動かします。

function Update () {
	transform.position.z += 0.1;
}

vector3でオブジェクトを移動させることもできます。

function Update () {
	transform.position += Vector3(0, 0, 0.1);
}

ユーザの入力受付

function Update () {
	if (Input.GetButtonUp("Jump")){
	Debug.Log("Jumped!");
	}
}

%e7%84%a1%e9%a1%8c

Edit->ProjectSetting->Inspectorで値を参照できます。

左右キーでオブジェクトを移動させます。

function Update () {
	if (Input.GetButtonUp("Jump")){
	Debug.Log("Jumped!");
	}

	var x : float = Input.GetAxis("Horizontal");
	transform.Translate(x * 0.2, 0, 0);
}

Digitbodyを設定して、以下のように記載すると、衝突判定ができます。

#pragma strict

function Start () {
 
}

function Update () {
	if (Input.GetButtonUp("Jump")){
	Debug.Log("Jumped!");
	}

	var x : float = Input.GetAxis("Horizontal");
	transform.Translate(x * 0.2, 0, 0);
}

function OnCollisionEnter(){
	Debug.Log("Hit!");
}

%e7%84%a1%e9%a1%8c

#pragma strict

var ball : Transform;

function Update () {
	if (Input.GetButtonUp("Jump")){
	Instantiate(ball, transform.position, transform.rotation);
	}
}

JavaScript　キャラ診断をツイートしよう

ランダム関数は、Math.floor(Math.random() * types.length、tweetリンクは、twitter developerのweb intentsを使います。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>キャラ診断</title>
    <style>
        body {
          text-align: center;
        }
    </style>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <h1>キャラ診断</h1>
      <p><input type="text" id="name" value=""></p>
      <p><input type="button" id="getResult" value="診断"></p>
      <h2>診断結果</h2>
      <p id="result">こちらに結果が表示されます。</p>
      <div id="tweet"></div>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script>
          $(function(){
              $("#getResult").click(function(){
                  var name = $("#name").val();
                  // console.log(name);

                    if (name === ""){
                      alert("名前を入力してください！");
                      return;
                    }
                  // タイプの定義
                  var types = ["勇者","魔法使い","戦士","遊び人","スーパースター"];
                  var type = types[Math.floor(Math.random() * types.length)];

                  var character = ["賢い","勇ましい","かわいい","情けない","人気の"];
                  var character = character[Math.floor(Math.random() * character.length)];

                  var result = name + "さんは「"　+ character + type + "」です。";
                  $("#result").text(result);

                  var tweetLink = "<a href='https://twitter.com/intent/tweet?text="+ encodeURIComponent(result) +"&hashtags=chara' target='_blank'>ツイートする</a>";
                  $("#tweet").html(tweetLink);
              });
          });
      </script>
  </body>
</html>

jQuery基礎

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script>
        $(function(){
            $('p').css('color','red').hide('slow');
        });
      </script>

セレクタの指定

<script>
        $(function(){
            $(".item").css('color', 'red');
        });
</script>

隣接セレクタ

<script>
        $(function(){
            $(" .item + .item").css('color', 'red');
        });
</script>

フィルタ: eq(), gt(), lt(), even, odd, contains(),first, last

<script>
        $(function(){
            $("#sub > li:contains('4')").css('color', 'red');
        });
</script>

メソッドを使ったDOM要素指定：parent(), children(), next(), prev(), siblings()

      <script>
        $(function(){
            $("#sub > li:eq(2)").siblings().css('color', 'red');
        });
      </script>

属性セレクタ: =, !=, *=, ^=, $=

<script>
        $(function(){
            $('a[href!="http://google.com"]').css('background', 'red');
        });
      </script>

css、addClass、removeClass

      <script>
        $(function(){
            //$('p').css('color', 'red').css('background', 'blue');
            //console.log($('p').css('color'));
            $('p').addClass('myStyle');
        });
      </script>

attribute, dataメソッド

$(function(){
            // attr
            console.log($('a').attr('href'));
            $('a').attr('href', 'http://google.co.jp');
            // data
            console.log($('a').data('sitename'));

});

タグの中身を操作: text, html, val, remove, empty

$(function(){
            // $('p').html('<a href="">click me!</a>');
            // console.log($('input').val());
            // $('input').val('hello, again!');
            $('p').empty();
        });

before, after, prepend, append

$(function(){
            var li = $('<li>').text('just added');
            // $('ul > li:eq(1)').before(li);
            // li.insertBefore($('ul > li:eq(1)'));

            // $('ul').prepend(li);
            // $('ul').append(li);
            li.appendTo($('ul'));
        });

コールバック関数 :hide, show, fadeOut, fadeIn, toggle

$(function(){
            // $('#box').hide(800);
            // $('#box').fadeOut(800);
            // $('#box').toggle(800);
            // $('#box').toggle(800);
            // $('#box').toggle(800);
            $('#box').fadeOut(800, function(){
                alert("gone!");
              });
        });

イベントの利用

$(function(){
          // $('#box').click(function(){
          //      alert("hi!");
          // });
          $('#box')
          .mouseover(function(){
                $(this).css('background', 'green');
           })
          .mouseout(function(){
                $(this).css('background', 'red');
           })
          .mousemove(function(e){
                $(this).text(e.pageX);
           })
        });

focus, blur, change

<script>
        $(function(){
            $('#name')
            .focus(function(){
                $(this).css('background', 'red');
            })
            .blur(function(){
                $(this).css('background', 'white');
            });
            $('#members').change(function(){
                alert('changed!');
            });
        });
      </script>

onメソッド

$(function(){
            $('button').click(function(){
                var p = $('<p>').text('vanish!').addClass('vanish');
                $(this).before(p);
            })

            $('body').on('click', '.vanish', function(){
                $(this).remove();
            });
        });

JavaScript　文字数チェック

入力文字数をkeyupによるthis.value.lengthで取得し、条件分岐で、CSSの要素を変える処理を作ります。

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comment</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
        <div class="container">
            <textarea id="comment" placeholder="your comment here"></textarea>
            <div class="btn">Submimt</div>
            <p><span id="label"></span> characters left</p>
            
      <script src="myscript.js">
      </script>
  </body>
</html>

styles.css

@charset "utf-8";

body {
	font-family: Verdana, sans-serif;
	font-size: 16px;
	background: #e0e0e0;
}

.container {
	width: 400px;
	margin: 30px auto;
}

textarea {
	width: 400px;
	box-sizing: border-box;
	height: 200px;
	padding: 14px;
	font-size: 16px;
	border: none;
	border-radius: 5px;
	margin-bottom: 14px;
	line-height: 1.5;
}
textarea:focus {
	outline: none;
}

p {
	color: #333;
	font-size: 14px;
	margin: 0;
	padding-top:8px;
}

#label{
	font-weight: bold;
}

.btn {
	display: inline-block;
	width: 150px;
	background: #00aaff;
	padding: 5px;
	color: #fff;
	border-radius: 5px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 4px 0 #0088cc;
	float: right;
}

.warning {
	color:red;
}

myscript.js

(function(){
		'use strict';

		var comment = document.getElementById('comment');
		var label = document.getElementById('label');

		var LIMIT = 20;
		var WARNING = 10;

		label.innerHTML = LIMIT;

		comment.addEventListener('keyup', function(){
				var remaining = LIMIT - this.value.length;
				label.innerHTML = remaining;
				if (remaining < WARNING){
					label.className = 'warning';
				} else {
					label.className = '';
				}
		});
})();

%e7%84%a1%e9%a1%8c

Category: JavaScript

font-awesomeのハンバーガー

ハンバーガーメニュー

クリッカブルタブメニュー

JavaScript　王様ゲーム

JavaScript getTimeによる日付計算

Unity　Game作成

unity JavaScript

JavaScript　キャラ診断をツイートしよう

jQuery基礎

JavaScript　文字数チェック