更新日 2021.10.14
#8 変数を使う
「変数」という便利な機能を使ってみましょう。
変数とは簡単に言えば値(数値や文字列)を入れておく「箱」のようなものです。htmlで枠を作るのに<div>などのタグという記号を使ったのと同様、var（variable）という文字を付けて表現します。 =(イコール)をつけて右の値を変数に入れます(代入する)。
var 変数名 = 1; /*数値*/
var 変数名 = "CRI"; /*文字列*/
変数という箱には、文字列や数値、計算結果の答えなどを入れておき、のちのち計算などにつかっていく事ができます。
※宣言するときにはvar以外にも、letやconst、var無しというのもありますがここでは説明を省略します。
足し算してみる
+
=
$(function(){
$('#calc').change(function(){ /* changeメソッド = #calc内のinputが入力されたら */
var numA = parseInt( $('.number_A').val() ); /* $(クラス名).val() でinput内の文字を取得できる */
var numB = parseInt( $('.number_B').val() ); /* parseInt(文字) parseIntで文字が数値になる */
$('#number_total').text(numA + numB); /* textメソッドで対象のidに文字列を出力 */
});
});
+
=
よくあるメソッドは#6で
問題：上記を踏まえて、整数の円周を計算できる計算機を作ってみましょう。
cm × 3.14 =
cm
#9 関数を使う
自分で作った方法論や数式を使い回す
関数（独自関数）とは、自分で作った数式やロジックをひとまとめにしたものです。ある数式を考えたとして、このページでもあのページでも、そういえばあの式にも使える...といった具合に、 一度作った数式は何度も使い回せることがあります。そのようなシーンを想定して数式を関数化しておくことが多くあります。
例えば、家計簿アプリを作ろうとしたとします。
しかし商品の一つ一つに消費税の計算を入れるのは面倒です。消費税の計算は価格 × 0.08で簡単に求められますが関数化してみましょう。
/*関数*/
function tax(price) {
var tax = 0.08; /* 税率の初期設定 */
var floatTax = price * tax; /* 取得された値に設定された消費税率をかける */
return Math.round(floatTax); /* 四捨五入された値がreturnで出力 */
}
関数を作る場合はfunctionと宣言したあとにtaxなど自分で考えた関数名をいれます。
関数名のあとのカッコ()の中にいれる 引数には、その関数内で使われる入るであろう値を総称する自分で考えた適当な名前をいれます。
どういうことかといえば、例は「price」という名前にしてますが、このpriceという場所は入力される値によって、100だったり150だったり1,000だったりします。
関数では具体的な数値を入れるのではなく 文字記号にしておいて、どんな数値が入ってきても対応できるようにしておきます。
最後に、入ってきた値が計算を経てどんな値になって帰ってくるかをreturnで指定します。※関数のreturnは基本的にはひとつのみです。
先程の消費税計算での引数とreturn
function tax ()
var TAX = 0.08;
var floatTax = * TAX;
ちなみに現在のfloatTaxの値は、
return 四捨五入した値→
var TAX = 0.08;
var floatTax = * TAX;
ちなみに現在のfloatTaxの値は、
return 四捨五入した値→
<script>
/* 消費税を計算するtax関数 */
function tax(price) {
var TAX = 0.08;
var floatTax = price * TAX;
return Math.round(floatTax);
}
$(function(){
$('#tax').change(function(){ /* ← 文字入力を検知したら起動 */
var num = parseInt( $('.ex_price').val() ); /* ← inputタグに入力された値を変数numに代入 */
var t = tax(num); /* ← tax関数で計算した値を変数tに代入 */
$('.ex_tax').text(t); /* ← <span class="ex_tax">に変数tの値を出力 */
});
});
</script>
<div id="tax">
<input class="ex_price"> 消費税:<span class="ex_tax"></span> 円
</div>
<span class="ex_tax">〜この部分〜</span>
/*悪い例*/
$(function(){
var TAX = 0.08;
$('#tax').change(function(){
var num = parseInt( $('.ex_price').val() );
var floatTax = num * TAX;
var t = Math.round(floatTax);
$('.ex_tax').text(t);
});
});
#10 コンソールでデータの確認
デバッグの第一歩console.log
JavaScriptを書いている際に、思ったとおりの数値が出ないなど度々エラーがおきます。変数や関数に今どんなデータが入ってるんだろう？ そういったときに役に立つのがconsoleメソッドです。例えば、#9で消費税の計算を行いましたが、最終的に四捨五入して出力する前に「引数×0.08」という計算を行いましたが、 この値は表面上はどこにも出てきません。
function tax(price) {
var TAX = 0.08;
var floatTax = price * TAX; /* ←この部分 */
return Math.round(floatTax);
}
function tax(price) {
var TAX = 0.08;
var floatTax = price * FAX; /* TAXの記述ミス */
return Math.round(floatTax);
}
console.logをブラウザの開発ツールを使って確認
Macの場合は「⌘+option+i」WindowsはF12でブラウザの開発モードウィンドウが出てきます。コンソールタブをクリックしてみましょう。
本題に戻って、floatTaxの値をconsole.log(引数);で確認してみましょう。まず、以下の内容を記述します。
消費税: 円
$(function(){
$('#tax_console').change(function(){
var num = parseInt( $('.ex_price_console').val() );
var floatTax = num * 0.08; /* コンソール用の式 */
console.log(floatTax);
var t = tax(num);
$('.ex_tax_console').text(t);
});
});
消費税: 円
すると、入力するたびにコンソール欄にこのように表示されます。
#11 モーダルウィンドウを作ろう
モーダルウィンドウを作ろう
テスト：画面の中央にモーダルを出してみましょうモーダル起動!
<div class="modal-open">モーダル起動!</div>
<div class="modal-content">モーダルウィンドウ</div>
.modal-open{
padding:20px;
border: 1px solid #000;
display:inline-block;
}
.modal-content {
display: none;
position: fixed;
width: 80%;
height:200px;
padding: 10px 20px;
color: #333;
background: #ccc;
overflow-y: auto;
border-radius: 1em;
z-index: 100;
}
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 120%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 99;
}
$(function() {
$('クラス名').('クリックメソッド', function(){ /* クラス名をクリックしたら */
$('body').要素追加メソッド('<div class="modal-overlay"></div>'); /* bodyにオーバーレイの要素を追加 */
$('クラス名1, クラス名2').フェードインメソッド('速度指定'); /* モーダルコンテンツ要素とオーバーレイ要素をフェードイン */
$('クラス名').クリックメソッド(function(){ /* オーバーレイをクリックしたら削除する機能 */
$('クラス名1, クラス名2').フェードアウトメソッド('速度指定',function(){ /* モーダルコンテンツ要素とオーバーレイ要素をフェードアウトし、*/
$('クラス名').削除メソッド() ; /* オーバーレイ要素を削除*/
});
});
modalResize(); /* モーダル起動&リサイズしたら、再計算させる*/
function modalResize(){ /* 関数を設定 */
var w = $(window).width(); /* ウィンドウの横幅、高さを取得し、変数に入れる */
var h = $(window).height();
var cw = $('クラス名').outerWidth(); /* モーダルコンテンツの表示位置を取得し、変数に入れる */
var ch = $('クラス名').outerHeight();
$('クラス名').css({ /* 取得した数値をモーダルコンテンツにcssを付与 */
'left' : ((w - cw)/2) + 'px', /* cssのleftプロパティ */
'top' : ((h - ch)/2) + 'px' /* cssのtopプロパティ */
});
}
});
});
（ウィンドウ幅 - コンテンツ幅）/ 2 という計算で求めた値を入れるとセンターに配置されるロジックです。 例えば現在のウィンドウ幅が1,200pxでモーダルコンテンツが1,000pxだった場合、(1,200-1,000)/2 = 100。 つまりleft:100px;というわけです。よくでてくるので覚えておきましょう。
<script>
$(function() {
$('.modal-open').on('click', function(){
$('#contents').css('filter', 'none');
$('body').append('<div class="modal-overlay"></div>');
$('.modal-content, .modal-overlay').fadeIn('slow');
$('.modal-overlay').click(function(){
$('.modal-content, .modal-overlay').fadeOut('slow',function(){
$('.modal-overlay').remove() ;
});
});
modalResize();
function modalResize(){
var w = $(window).width();
var h = $(window).height();
var cw = $('.modal-content').outerWidth();
var ch = $('.modal-content').outerHeight();
$('.modal-content').css({
'left' : ((w - cw)/2) + 'px',
'top' : ((h - ch)/2) + 'px'
});
}
});
});
</script>
入門
基礎
応用
実践フロントエンド
実践バックエンド
デザイン
キッズ