<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="jquery-1.12.4.min.js"></script>
<script src="program.js"></script>
</head>
<body>
</body>
</html>
<なんとか>」のようになっているもので、
それぞれ意味を持ちます。</なんとか>」を付ける
必要があり、対応する閉じタグまでが、その中身として扱われます。| タグ名 | 説明 |
|---|---|
| html | HTML全てをこの中に書きます。 |
| head | HTML(ページ)の設定を書きます。 |
| body | HTMLの構造を書きます。 |
| meta | ページに関する詳細な設定を指定します。 |
| title | ページのタイトルを指定します。 |
| link | 読み込む他のファイル(主にCSS)を指定します。 |
| script | 読み込むスクリプト(主にJavaScript)を指定します。 |
<title> はタイトルを指定するタグです。</title>の間に
書かれた内容を、そのHTMLのタイトルとして扱います。<title>たいとる！</title>」とすれば、
タイトルは「たいとる！」です。
<!DOCTYPE html>
<html>
<head>
<title>計算機アプリ</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="jquery-1.12.4.min.js"></script>
<script src="program.js"></script>
</head>
<body>
<div id="content">
<div id="hyouji"></div>
<div id="num_box">
<input id="num1">
<input id="num2">
</div>
<div id="button_box">
<button type="button" class="calbutton" id="plus">＋</button>
<button type="button" class="calbutton" id="minus">--</button>
<button type="button" class="calbutton" id="multi">×</button>
<button type="button" class="calbutton" id="divs">÷</button>
</div>
</div>
</body>
</html>
#hyouji {
border: 1px solid #000;
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
}
.calbutton {
width: 60px;
height: 60px;
text-align: center;
font-size: 20pt;
}
#num_box {
margin: 10px;
background: #faa;
}
#button_box {
padding: 10px;
background: #aaf;
}
#num1, #num2 {
width: 60px;
}
ターゲット {
デザインのタイプ: 設定値;
デザインのタイプ: 設定値;
デザインのタイプ: 設定値;
}
$(function () {
// ここにプログラムを書いていく
});function main() {
// ここにプログラムを書いていく
}
$(function () {
main();
});document.getElementById("foo")$(document.getElementById("foo"))jQueryで取ってきた要素.click(function() { 処理 })$(function () {
$('.calbutton').click(function() {
// class="calbutton" が押されたときにする処理
});
});jQueryで取ってきた要素.val()+文字列"12" + 3"12" - 3+文字列var a;$(function () {
$('.calbutton').click(function() {
var a = +($("#num1").val());
var b = +($("#num2").val());
var c;
switch($(this).attr("id")) {
case "plus":
c = a + b;
break;
case "minus":
c = a - b;
break;
case "multi":
c = a * b;
break;
case "divs":
c = a / b;
break;
}
alert(c);
});
});jQueryの要素.attr("foo")<div id="hoge" class="foobar"></div>$("#hoge").attr("class")alert(c);$("#hyouji").html(c);<div id="hyouji"></div><div id="hyouji">3</div>$(function () {
$('.calbutton').click(function() {
var a = +($("#num1").val());
var b = +($("#num2").val());
var c;
switch($(this).attr("id")) {
case "plus":
c = a + b;
break;
case "minus":
c = a - b;
break;
case "multi":
c = a * b;
break;
case "divs":
c = a / b;
break;
}
$("#hyouji").html(c);
});
});localStorage.setItem("キー", 保存したいもの);JSON.stringify(配列や変数);JSON.parse(JSON形式のもの);localStorage.getItem("キー");function 関数名(引数1, 引数2, ...) {
処理
} function save() {
localStorage.setItem("Sample", JSON.stringify([a,b,c]));
}
function load() {
var x = JSON.parse(localStorage.getItem("Sample"));
a = x[0];
b = x[1];
c = x[2];
$("#num1").val(a);
$("#num2").val(b);
$("#hyouji").html(c);
}$(function () {
var a, b, c;
function save() {
localStorage.setItem("Sample", JSON.stringify([a,b,c]));
}
function load() {
var x = JSON.parse(localStorage.getItem("Sample"));
a = x[0];
b = x[1];
c = x[2];
}
$('.calbutton').click(function() {
a = +($("#num1").val());
b = +($("#num2").val());
switch($(this).attr("id")) {
case "plus":
c = a + b;
break;
case "minus":
c = a - b;
break;
case "multi":
c = a * b;
break;
case "divs":
c = a / b;
break;
}
$("#hyouji").html(c);
});
});localStorage.getItem("foo")if (localStorage.getItem("Sample")) {
処理
}$(function () {
var a, b, c;
function save() {
localStorage.setItem("Sample", JSON.stringify([a,b,c]));
}
function load() {
var x = JSON.parse(localStorage.getItem("Sample"));
a = x[0];
b = x[1];
c = x[2];
$("#num1").val(a);
$("#num2").val(b);
$("#hyouji").html(c);
}
$('.calbutton').click(function() {
a = +($("#num1").val());
b = +($("#num2").val());
switch($(this).attr("id")) {
case "plus":
c = a + b;
break;
case "minus":
c = a - b;
break;
case "multi":
c = a * b;
break;
case "divs":
c = a / b;
break;
}
$("#hyouji").html(c);
save();
});
if(localStorage.getItem("Sample")) {
load();
}
});