1. 1
Copyright (c) 株式会社HEART QUAKE All rights reserved .
診断アプリを作ろう

2. 2
Copyright (c) 株式会社HEART QUAKE All rights reserved .
診断アプリについて
l 診断アプリとは・・・
- ⼊入⼒力力された情報によって結果が変わるアプリ
- 姓名判断なども診断アプリの⼀一種

3. 3
Copyright (c) 株式会社HEART QUAKE All rights reserved .
診断アプリを作ろう
l 診断アプリの開発ステップ
- 基本的な考え⽅方
ü STEP1. ⼊入⼒力力された情報を受け取る
ü STEP2. 情報を数値に変換する
ü STEP3. 数値によって結果を変更更する
STEP1.
⼊入⼒力力された
情報を受け取る
STEP2.
情報を数値に
変換する
STEP3.
数値によって
結果を変更更する
document.getElementById
を⽤用いる
if⽂文を⽤用いる

4. 4
Copyright (c) 株式会社HEART QUAKE All rights reserved .
last.html
Q1.ケータイはスマホである<br>
<input type="checkbox" id="q1">はい
<hr>
Q2.タブレット(iPad,Kindleなど）を持っている<br>
<input type="checkbox" id="q2">はい
<hr>
Q3.PCはMacである<br>
<input type="checkbox" id="q3">はい
<hr>
<button onclick=checkPoint()>判定！</button>
<div id="result">結果</div>
<hr>はhorizonの略略で
⽔水平線を引く
last.html
チェックボックスは
type=“checkbox”
最終的に「結果」の
部分の⽂文字を変えるプログラム

5. 5
Copyright (c) 株式会社HEART QUAKE All rights reserved .
last.html
function checkPoint(){
var point = 0;
if(document.getElementById("q1").checked == true){
point += 1;
}
if(document.getElementById("q2").checked == true){
point += 1; }
if(document.getElementById("q3").checked == true){
point += 1; }
if(point == 0){
document.getElementById("result").innerHTML = ”a";
}else if(point == 1){
document.getElementById("result").innerHTML = ”b”;
}
}
last.html
id=“q1”のチェックボックスに
チェックが⼊入っていたら
pointという箱に⼊入っている数値に1を⾜足す
pointによって表⽰示を変える