開発記録

みさの頑張りを見てください

JavaScriptに書き換えたプログラムたちの話

やあやあ!みさです。

テスト当日にブログを更新するブロガーの鏡です(?)

 

phpで書いてた占い・BMI値計算のアプリをJavaScriptで書き換えたのですがこっちに載せてなかったので載せます。

あっそうそう、MacbookProを購入しまして開発用PCにしてます。

色々見えてますが気にせずスクショ画面をご覧ください。

 

f:id:missamisa3333:20170721011203p:plain

 

f:id:missamisa3333:20170721011155p:plain

 

f:id:missamisa3333:20170721011143p:plain

 

はい、こんな感じです。

以下ソースコードです。

 

↓占い

<!DOCTYPE HTML>

<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>占いページ</title>
<script type=""text/javascript">
<!--
var records=["運勢は◎! 他人に優しくしてみよう","運勢は〇! 新しい発見があるかも","運勢は△! 忘れ物に気を付けて!",
"運勢は×! 何か悪いことが起きるかも","運勢は◎! 新しい出会いがあるかも!","運勢は〇! 外食したら何かいいことがあるかも",
"運勢は△! 会いたくなかった人と再会してしまうかも","運勢は×! たまには気分転換してみよう!",
"運勢は×! 今日あなたの身に危険が…!","運勢は◎! 憧れのあの人と出会えるかも!"]

function kekka(){

var rand = records[ Math.floor( Math.random() * records.length ) ] ;
document.getElementById('output').innerHTML=rand;

}
//-->
</script>
</head>

<body>
<h1>あなたの運勢を占います</h1>
<br>
<img src="teller1.gif">
<br>
<br>
<br>
<br>
<span id="output"></span>
<br><br><br><br>
<input type="button" value="占う" id="jsButtom" onclick="kekka()">

</body>
</html>

 

BMI値計算

<!DOCTYPE HTML>

<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>BMI計算</title>
<script type="text/javascript">
<!--
function keisan(){

var height=document.bmi.height.value/100;
var bmi=document.bmi.weight.value/(height*height);


document.getElementById('output').innerHTML=bmi;

if(bmi<18.5){

var kekka1="痩せ気味です!";
document.getElementById('kekka').innerHTML=kekka1;

}else if(bmi>25){

var kekka2="太り気味です!";
document.getElementById('kekka').innerHTML=kekka2;

}else{

var kekka3="標準です!このままキープしましょう";
document.getElementById('kekka').innerHTML=kekka3;

}

}
//-->
</script>
</head>

<body>
<br>
<h1>BMI値を計算します</h1>
<br>
<p>あなたの身長を入力してください(cm)</p>
<form name=bmi>
<input tupe="text" name="height">
<br><br><br>
<p>あなたの体重を入力してください(kg)</p>
<input tupe="text" name="weight">
<br><br><br>
<input type="button" value="計算" id="jsButtom" onclick="keisan()">
</form>
<br><br>
<p>計算結果</p>
<br>
<span id="output">??</span>
<br><br>
<span id="kekka"></span>
</body>
</html>

10秒当てゲーム(JavaScript)

やあやあ!みさです。

 

無事に東京から帰ってきました。

推しが目の前にいて刀で戦ってて華麗に舞ってて私はこれは夢なのかなってずっと思ってました。拡樹君が…ほんとに…好き…。

裕月君も最高に可愛かった。意外と喋っててアフタートークにも来てくれるし最&高。

 

はい、プログラムの話をします。

ほぼ写経みたいなものなのですが。

 

JavaScriptで10秒当てゲームを作成しました。

こんな感じです。

f:id:missamisa3333:20170604171459p:plain

f:id:missamisa3333:20170604171514p:plain

f:id:missamisa3333:20170604171526p:plain

 

10秒ぴったりを狙うのですが±0.5秒まではOKということで背景と文字色を変更しています。

また、StartボタンとStopボタンを押しているとわかるように設定をしました。

 

自分にはまだまだ知識が足りないと思うのでこれからもいろいろとプログラムを書いて覚えていきたいと思います。

 

明日も何か作るぞー↑

 

以下ソースコード

index.html

<!DOCTYPE HTML>

<html>
<head>
<meta charset=UTF-8">
<title>Ten secound!</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div class="counter">
<div id="terget">10.000</div>
<div id="result" class="standby">0.000</div>
<div class="button">
<div id="start">Start</div>
<div id="stop">Stop</div>
</div>
</div>

<script src="main.js">
</script>

</body>
</html>

 

main.js

(function(){

'use strict';

var start = document.getElementById('start');
var stop = document.getElementById('stop');
var result = document.getElementById('result');
var startTime;
var Started=false;

start.addEventListener('click',function(){

if(Started===true){

return;

}

Started=true;
startTime = Date.now();
this.className='pushed';
stop.className='';
result.textContent='0.000';
result.className='standby';

});

stop.addEventListener('click',function(){

var elapsedTime;

if(Started===false){

return;

}

Started=false;

elapsedTime=(Date.now()-startTime)/1000;

result.textContent=elapsedTime.toFixed(3);

this.className='pushed';
start.className='';
result.className='';

if(elapsedTime<10.5 && elapsedTime>9.5){

result.className='perfect';

}


});

})();

 

style.css

.counter{

text-align:center;
margin:30px auto 0 auto;
font-family: 'Raleway', sans-serif;
width:300px;

}

#terget,#result{

font-size:32px;
margin-bottom:15px;
height:70px;
line-height:70px;
background:#aaa;

}

#result.perfect{

background:#FA5858;
color:#FFFFFF;

}

#result.standby{

opacity:0.5;

}

#start{

float:left;

}

#stop{

float:right;

}

#start,#stop{

cursor:pointer;
font-size:18px;
width:140px;
background:#ccc;
height:35px;
line-height:35px;
box-shadow:0 6px 0 #aaa;

}

#start.pushed,#stop.pushed{

margin-top:3px;
box-shadow:0 3px 0 #aaa;

}

 

 

 

JavaScriptを学ぶ

やあやあ!みさです。

 

今日の24時頃に東京へ向かいます。何しに行くんだって?

推しに会いに行くんだよ!!!!!!!

舞台を見に行ってきます。推しが目の前で動いてる…だと…ってなりそう。

 

さあ東京に行く前にJavaScriptに手を出そうと思いまして書いてみました。

ただただコンソール画面に文字を表示させるだけです。

 

f:id:missamisa3333:20170602205350p:plain

 

簡単ですね。

さて、私が今作ろうと思っているのは10秒当てゲームです

 

JavaScriptで5秒当てゲームを作ろう - ドットインストール(http://dotinstall.com/lessons/just_five_js_v3)

 

上記のサイトを参考にして作ってみようと思っています。

 

以下ソース

<!DOCTYPE HTML>

<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>

<body>

<script>

var m="表示成功したよ";
var s="やったね";
var g="いええええええい!";

console.log(m);
console.log(s);
console.log(g);

</script>
</body>
</html>

 

BMI値計算アプリ(PHP)

やあやあこんばんは(?)

 

PHPでなんかほかにも作ってみたいなということで!

毎年健康診断のあとに調べるBMI値の計算が簡単に行えるものをPHPを用いて作りました。

 

こんな感じです。

f:id:missamisa3333:20170602021528p:plain

f:id:missamisa3333:20170602021550p:plain

 

……はい。

 結果の数値こんなにいらないですかね。

 

次は何を作ろうかと考えているのですがとりあえずJavaScriptで何か作ろうかなと。

それかPythonに手を出してみてもいいかなとも思っているのでそれは追々ということで。

 

Webアプリ(ゲーム)を今年か来年の春までには作って実力がついてきたらandroidアプリを作ってみたいなあと思っております

 

UnityもやりたいしRubyもやりたいしJavaC#もやりたいし……!

やりたいことがいっぱいだな…。

 

以下ソースコード

ホーム

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BMIの計算</title>
</head>

<body>
<?php
 $bgcolor = "#ffe4c4";
 $textcolor = "#80000";
 ?>

<body bgcolor="<?php print $bgcolor; ?>" text="<?php print $textcolor; ?>">


<form action="bmikekka.php" method="post">

<br>
<h1>あなたのBMI値を計算します</h1>
<br>
<li>身長</li>
<br>
<input type="text" name="height">
<br>
<br>
<li>体重</li>
<br>
<input type="text" name="weight">
<br>
<br>
<input type="submit" name="submit" value="送信">
<br>

</form>
</body>
</html>

 

結果

<?php
function bmi($height,$weight)
{
 $height=$height/100;
 $weight=$weight/($height*$height);
 return $weight;
}

function bmikekka($str){
 return htmlspecialchars($str,ENT_QUOTES,"UTF-8");
}

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BMIの計算</title>
</head>

<body>
<?php
 $bgcolor = "#ffe4c4";
 $textcolor = "#800000";
 ?>

<body bgcolor="<?php print $bgcolor; ?>" text="<?php print $textcolor; ?>">

<?php
if(isset($_POST["submit"])){

$bmi=bmi($_POST["height"],$_POST["weight"]);

print "<font size=5><br>あなたのBMI値は".bmikekka($bmi)."です<br>";

}else{

print "あなたのBMI値を計算します";

}

if($bmi<18.5){

print "<font size=4.5><br>痩せ気味ですね";

}else if($bmi>25){

print "<font size=4.5><br>太り気味ですね";

}else{

print "<font size=4.5><br>標準です!このままキープしましょう";

}

print "<br><br>";

$text = "<font size=4>戻る";

if (empty($_SERVER['HTTP_REFERER'])) { 
  echo $text;
}

else {
  echo "<a href=\"{$_SERVER['HTTP_REFERER']}\">".$text."</a>";
}
?>


</body>
</html>

 

 

占いアプリ完成(?)

やあやあ!みさです。

 

ここ数日テストやら課題やら実験やらで中々忙しい日々を過ごしてました。

ブログ更新しろやと誰かさんに言われた気がするので書いてます(?)

 

前回作っていた占いアプリ(笑)の背景色変更、文字色・文字サイズの変更、画像(フリー素材)の挿入を行いました。

 

こんな感じです。

f:id:missamisa3333:20170530231816p:plain

f:id:missamisa3333:20170530231840p:plain

 

これで完成のつもりです。

お疲れ様、私!(作成時間約5時間)

 

以下ソースコード

ホーム

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>占いページ</title>
</head>

<body>
<?php
 $bgcolor = "#ffffe0";
 $textcolor = "#a52a2a";
 ?>

<body bgcolor="<?php print $bgcolor; ?>" text="<?php print $textcolor; ?>">

<form action="uranaikekka.php" method="post">

<h1>今日の運勢を占います</h1><br>

<img src="teller1.gif">

<br>
<br>

<input type="submit" name="submit" value="占う">

</form>

 


</body>
</html>

 

結果

<html>
<head>
<title>占い</title>
</head>
<?php
 $bgcolor = "#ffffe0";
 $textcolor = "#a52a2a";
 ?>

<body bgcolor="<?php print $bgcolor; ?>" text="<?php print $textcolor; ?>">


<?php


if(isset($_POST["submit"])){

$uranai="<font size=6><br>運勢は◎! 他人に優しくしてみよう";
$uranai
="<font size=6><br>運勢は〇! 新しい発見があるかも";
$uranai="<font size=6><br>運勢は△! 忘れ物に気を付けて!";
$uranai
="<font size=6><br>運勢は×! 何か悪いことが起きるかも";
$uranai="<font size=6><br>運勢は◎! 新しい出会いがあるかも!";
$uranai
="<font size=6><br>運勢は〇! 外食したら何かいいことがあるかも";
$uranai="<font size=6><br>運勢は△! 会いたくなかった人と再会してしまうかも";
$uranai
="<font size=6><br>運勢は×! たまには気分転換してみよう!";
$uranai="<font size=6><br>運勢は×! 今日あなたの身に危険が…!";
$uranai
="<font size=6><br>運勢は◎! 憧れのあの人と出会えるかも!";


$min=0;
$max=count($uranai)-1;

$key=mt_rand($min,$max);

print $uranai[$key];

print "<br><br>";


$text = "<font size=5>戻る";

if (empty($_SERVER['HTTP_REFERER'])) { 
  echo $text;
}

else {
  echo "<a href=\"{$_SERVER['HTTP_REFERER']}\">".$text."</a>";
}


}else{

}


?>

</html>

 

 

 

占い(笑)アプリ作成

やあやあ!みさです。

もはやこれ登場文句だな。

 

今日はPHPで占いアプリの開発を行ってました。

画像あげます。こんな感じです。

f:id:missamisa3333:20170528001120p:plain

f:id:missamisa3333:20170528001141p:plain

占うボタンを押すと結果表示

結果表示画面の戻るボタンを押せばホーム画面に戻る仕様です

 

なーーーーんか物足りないといいますか、変な感じがするんですよねこのアプリ(と言っていいのかわからないもの)。

私的には生年月日診断とか動物占いとかにしようかと思ってたんです。

診断結果の結果数が多すぎて短時間ではできないなと思いました。はい。

 

3~5時間くらいでここまで作れたらいいほうなのではと思えてきたので今日のところはこれでいいでしょう。

 

追加機能だったり背景色やらなんやら変えたりするのも検討してみたいと思います。

 

以下ソースコード

ホーム

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>占いページ</title>
</head>

<body>

<form action="uranaikekka.php" method="post">

<h1>今日の運勢を占います</h1><br>

<br>

<input type="submit" name="submit" value="占う">

</form>

 


</body>
</html>

 

結果ページ

<html>
<head>
<title>占いページ</title>
</head>
<?php


if(isset($_POST["submit"])){

$uranai="運勢は◎! 他人に優しくしてみよう";
$uranai
="運勢は〇! 新しい発見があるかも";
$uranai="運勢は△! 忘れ物に気を付けて!";
$uranai
="運勢は×! 何か悪いことが起きるかも";
$uranai="運勢は◎! 新しい出会いがあるかも!";
$uranai
="運勢は〇! 外食したら何かいいことがあるかも";
$uranai="運勢は△! 会いたくなかった人と再会してしまうかも";
$uranai
="運勢は×! たまには気分転換してみよう!";
$uranai="運勢は×! 今日あなたの身に危険が…!";
$uranai
="運勢は◎! 憧れのあの人と出会えるかも!";


$min=0;
$max=count($uranai)-1;

$key=mt_rand($min,$max);

print $uranai[$key];

print "<br><br>";


$text = "戻る";

if (empty($_SERVER['HTTP_REFERER'])) { 
  echo $text;
}

else {
  echo "<a href=\"{$_SERVER['HTTP_REFERER']}\">".$text."</a>";
}


}else{

}


?>
</html>

 

 

PHP

f:id:missamisa3333:20170525185348p:plain

ここ2日間程ダウンしていたみさです。

 

ついに!!!!!ついに!!!!!

xamppのインストール及び起動に成功しました!!!!!!

いえええええええい!!!!!

 

意味不明なエラーが出ていて2日間(頭が使い物にならなかったのもあるが)とても悩んでいたのですがその原因分かった気がします。

原因として起動アプリのみデスクトップに移動していたためにCの直下に置いていたxamppのフォルダなどを参照出来なかったのではないかと。

起動アプリをデスクトップに移動させるならxamppファイルも移動させないといけないよね……!

 

ということでxamppを用いたPHPの学習ができるようになりました。

とりあえずPHPを用いて占いアプリを作ろうと思います。

自分がただ遊びたいだけです。

 

目標としては28日までに占いアプリを完成させます。

頑張るぞ!

 

以下check.phpのソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ホーム</title>
</head>

<body>

<?php
print '<h1>表示できました</h1><br>';

print 'やったね!!!!!';

?>

</body>
</html>

 

html感がすごい(sugoi)