web制作勉強中です。

職業訓練校でweb制作を勉強しています。勉強のメモなど記録します。

【授業メモ】jQuery基礎

jQuery 授業メモ
jQuery本体を使う方法
  • Google　CDNからライブラリーを持ってくる　
  • jQueryのサイトからダウンロードして配置する
 
CDN（Contents Delivery Network, CDN）とは、インターネット上にあるファイルのこと。GoogleフォントなどもCDN。
多くの人が使っているサイトのCDNを使うことで、関係ない人のサイトでも、キャッシュが残っていることが多く、都度読み込む必要がないメリットがある。
ネット環境がない場合は読み込むことができないデメリットがある。
 
★Google　CDNから持ってくる方法
  • 2x　の部分を使うこと　
  • ””の中をコピーしダウンロード→2xの部分から開くページを名前を付けて保存し、自分のフォルダに保存し、（ファイル名など決していじらない！）HTMLでCSSのように、自分のフォルダ内のjQueryファイルをリンクさせる。
 
★jQueryのリンク記述
HTMLへのリンクの記述は、<head>内の一番下
<meta charset="utf-8">
<title>jQueryでHTML CSSを操作する</title>
<script src="js/jquery.min.js"></script>
</head>
 
jQueryを使ってみる
★必ず$(function(){ 　});で記述する
<meta charset="utf-8">
<title>jQueryでHTML CSSを操作する</title>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
});
</script>
  • 具体的な記述は、リンクの下に<script>で記述
  • function（ready　function）の意味は、HTMLを先に読み込んでからjQueryを動かすための記述方法
  • HTML全部ではなく、functionで指定した要素までbody内のHTMLを読み、指定した要素に行ったらfunctionが動く。
  • （HTML全部読んでから動く記述も別にある）
 
★命令の書き方
$(function(){
$('要素名#ID名').何を変えるか('何に変えるか');
});
命令を入れ子にする事が多いので、どこがどこの指示か整理して考えること
<script>
$(function(){
$('#btn').click(function(){
$('p#second').text($('p#first').text());
});
});
</script>
 
HTMLに変更を加える
[元にする記述例]以下もこのソースをもとに記述する
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryでHTML CSSを操作する</title>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('#btn').click(function(){
$('p#first').html('<strong>文字の変更</strong>');
});
});
</script>
</head>
 
<body>
<button id="btn">HTMLの変更</button>
<p id="first">取得する文字列</p>
</body>
</html>
 
・記述例
btnを押すと#secondを、#firstに変える　
（）が空なのは、何も変更せずただ持って来るということ＝btnを押すと#secondが#firstに変わる
<script>
$(function(){
$('#btn').click(function(){
$('p#second').html($('p#first').html());
});
});
</script>
 
HTMLの挿入（テキスト59P）
★prepend()　要素の先頭に挿入する
<script>
$(function(){
$('#btn').click(function(){
$('p#first').prepend('<strong>P要素内の先頭に挿入</strong>');
});
});
</script>
</head>
 
<body>
<button id="btn">HTMLの挿入</button>
<p id="first">ここに入るテキストテキストテキスト</p>
 
 
★append()　要素内の最後に挿入する
<script>
$(function(){
$('#btn').click(function(){
$('p#first').append('<strong>P要素内の最後に挿入</strong>');
});
});
</script>
</head>
 
<body>
<button id="btn">HTMLの挿入</button>
<p id="first">テキストテキストテキストここに入る</p>
 
★before()　要素の前に挿入する
<script>
$(function(){
$('#btn').click(function(){
$('p#first').before('<h1>P要素の前に挿入</h1>');
});
});
</script>
</head>
 
<body>
<button id="btn">HTMLの挿入</button>
ここに入る<p id="first">テキストテキストテキスト</p>
 
★after()　要素の後に挿入する
<script>
$(function(){
$('#btn').click(function(){
$('p#first').after('<h1>P要素の後に挿入</h1>');
});
});
</script>
</head>
 
<body>
<button id="btn">HTMLの挿入</button>
<p id="first">テキストテキストテキスト</p>ここに入る
 
要素の置き換え、削除（テキスト67P）
★replaceWith()　要素を置き換える
<script>
$(function(){
$('#btn').click(function(){
$('p#first').replaceWith('<h1>h1要素に置き換える</h1>');
});
});
</script>
</head>
 
<body>
<button id="btn">HTMLの挿入</button>
<p id="first">テキストテキストテキスト</p>←h1に変わる
 
 
★remove()　要素の削除
<script>
$(function(){
$('#btn').click(function(){
$('p#first strong').remove();
});
});
</script>
</head>
 
<body>
<button id="btn">HTMLの挿入</button>
<p id="first"><strong>削除する部分</strong>テキストテキストテキスト</p>↑ここが消える
 
属性値の変更
attrとは「アトリビュート」、「属性」のこと。
属性とは、imgタグにとってのsrc,imgタグにとってのalt,aタグにとってのhref,scriptタグにとってのsrcのこと。
 
★ 属性値の変更のattr()　
$('どこの').attr('何の属性を','何に変えるか');
<script>
$(function(){
$('#btn').click(function(){
$('a').attr('href','https://www.rakuten.co.jp/');
});
});
</script>
</head>
 
<body>
<button id="btn">HTMLの挿入</button>
<a href="https://www.amazon.co.jp/">リンク先へ</a>
←ボタンを押すとリンク先が変わる
 
★属性値の取得のattr()
<script>
$(function(){
$('#btn').click(function(){
$('a').text($('a').attr('href'));
});
});
</script>
</head>
 
<body>
<button id="btn">HTMLの挿入</button>
<a href="https://www.amazon.co.jp/">リンク先へ</a>
←ここの「リンク先へ」の文字が、hrefに入れたURLに変わる
 
CSSの制御（テキストP71）
★CSSプロパティの設定
$('どこの').css('何を','どう変えるか');
<script>
$(function(){
$('#btn').click(function(){
$('#first').css('color','red');
});
});
</script>
</head>
 
<body>
<button id="btn">HTMLの挿入</button>
<p id="first">テキストテキストテキスト</p>
 
 
複数指定の場合は記述方法が変わる！
一つの指定→.css('何を','どう変えるか');　
カンマでプロパティ名とプロパティ値を区切る
 
複数の指定→.css({ 'プロパティ名':'プロパティ値','プロパティ名':'プロパティ値','プロパティ名':'プロパティ値' });
プロパティ名とプロパティ値はコロンで区切り、命令同士はカンマで区切る
<script>
$(function(){
$('#btn').click(function(){
$('#first').css({
'color':'red','font-size':'30px','background-color':'orange'
});
});
});
</script>
</head>
 
<body>
<button id="btn">HTMLの挿入</button>
<p id="first">テキストテキストテキスト</p>
 
 
 
★メソッドチェーン（テキストP73）
一つのセレクタに対して複数の命令を記述する場合は、メソッドチェーンの書き方[命令と命令をドットでつなげて記述]することができる
$('p').prepend('<strong>先頭に挿入</strong>')
      .append('<strong>最後に挿入</strong>');
 
 
★onClickの書き方（テキストP90）
onClickと書かず、on('click')と書くことで、複数のイベントを指定することができる
<script>
$(function(){
$('#btn').on('click', function(){
$('#first').css({
'color':'red',
'font-size':'30px',
'background-color':'orange'
});
});
});
</script>
 
 
 
イベントの基本（テキストP78）
★画像を変更
メソッドチェーンの書き方で、ボタンをクリックして画像が変わるようにする
<script>
$(function(){
$('#btn').on('click', function(){
$('img').attr('src','img/2.jpg').attr('alt','トイプードル');
});
});
</script>
</head>
 
<body>
<button id="btn">画像の変更</button>
<p><img src="img/1.jpg" alt="ラブラドール"></p>
 
 
★a要素にclickイベントを設定するときは要注意！！！
<script>
$(function(){
$('#btn').on('click', function(){
$('img').attr('src','img/2.jpg').attr('alt','トイプードル');
});
});
</script>
</head>
 
<body>
<br><br><br><br><br><br><br><br>
<!--今確認のために入れてるけど、本当はこんなところにbr入れるのはダメ-->
<p><img src="img/1.jpg" alt="ラブラドール"></p>
<a id="btn" href="img/2.jpg">画像の変更</a>
 
これだと、同じ場所にいて画像だけ変えるということができず、 img/2.jpgに飛んで行ってしまう！
→return false;をclickイベント内の一番下に記述することで、aのどこかに行っちゃう機能を取り消す！！！
 
<script>
$(function(){
$('#btn').on('click', function(){
$('img').attr('src','img/2.jpg').attr('alt','トイプードル');
return false; 　←clickの命令内の一番下に入れる！！！
});
});
</script>
</head>
 
<body>
<br><br><br><br><br><br><br><br>
<!--今確認のために入れてるけど、本当はこんなところにbr入れるのはダメ-->
<p><img src="img/1.jpg" alt="ラブラドール"></p>
<a id="btn" href="img/2.jpg">画像の変更</a>
 
 
★イベントが発生した要素を取得するthis（テキストP80）
attrはアトリビュート　属性のこと
属性とは、要素の中に含まれるもの　pには属性はない　imgの属性はsrcとalt二つある　aはhrefが属性
 
aをクリックしたら、imgのsrcが、クリックされたaのhrefの値に変わり、imgのaltにaのテキストが入る
ここでいうthisはa　html内にaは四つあるが、クリックしたアンカーすならちイベントを仕掛けている要素がthisということになる
<script>
$(function(){
$('a').on('click', function(){
$('img').attr('src',$(this).attr('href')).attr('alt',$(this).text());
return false;
});
});
</script>
</head>
 
<body>
<p><a href="img/spring.jpg">春</a></p>
<p><a href="img/summer.jpg">夏</a></p>
<p><a href="img/autom.jpg">秋</a></p>
<p><a href="img/winter.jpg">冬</a></p>
<p><img src="img/spring.jpg" alt="春"></p>
</body>
 
 
 
 
 

【授業メモ】jQuery　アニメーションで動きをつける

授業メモ jQuery
復習
★イベントが発生した要素を取得するthis
attrはアトリビュート　属性のこと
属性とは、要素の中に含まれるもの　pには属性はない　imgの属性はsrcとalt二つある　aはhrefが属性
 
下記の指示は、「四つあるうちのどれかのaをクリックしたら、imgのsrcが、クリックされたaのhrefの値に変わり、imgのaltにクリックされたaのテキストが入る」というもの
 
・ここでいうthisはa　html内にaは四つあるが、クリックしたアンカーすなわちイベントを仕掛けている要素がthisということになる
・後半の.attrの書き方は「メソッドチェーン」　同じimgに命令するので何度も $('img')を書かずに省略してドットで命令をつなげている
・return falseは、アンカーの持つリンクの飛んで行っちゃう機能を消すもの　アンカーにイベントを設定するときは必ずセットで設定するもの
 
<script>
$(function(){
$('a').on('click', function(){
$('img').attr('src',$(this).attr('href')).attr('alt',$(this).text());
return false;
});
});
</script>
</head>
 
<body>
<p><a href="img/spring.jpg">春</a></p>
<p><a href="img/summer.jpg">夏</a></p>
<p><a href="img/autom.jpg">秋</a></p>
<p><a href="img/winter.jpg">冬</a></p>
<p><img src="img/spring.jpg" alt="春"></p>
</body>
 
 
 
アニメーション効果で動きをつける
★ display:none;をdisplay:block;にする show()
cssでdisplay:none;をdisplay:block;にするのと同じ動きをさせる事ができる
<style>
#box {
  width: 300px;
  height: 300px;
  background: orange;
  display: none; 　←buttonをclickすると、cssのここがdisplay:block;に変わる！
}
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('button').on('click',function(){
$('#box').show();
});
});
</script>
 
 
★show()の中には、以下の二種類の方法で速度指定が入れられる
  • キーワード　slow fastを入れる　テキストなので’’で囲うこと
.show('slow');
 
  • ミリ秒を入れる　1000ミリ秒＝1秒
.show(1000);
 
 
★display:none;にするhide()
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('#show').on('click',function(){
$('#box').show(1000);
});
$('#hide').on('click',function(){
$('#box').hide('slow');
});
});
</script>
 
 
★「ある処理が終わったら、この処理をしてほしい」コールバック関数
記述例）#boxが1000ミリ秒かけて出現してから、色が変わるという設定
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('#show').on('click',function(){ 　←こっちが先
$('#box').show(1000,function(){ 　  ←次にこれ
$(this).css('background','green');//ここのthisは#box
});
});
$('#hide').on('click',function(){
$('#box').hide('slow');
});
});
</script>
 
 
 
★:not(:animaited)でアニメーションがとまらなくなることを制限する
<script>
$(function(){
$('#show').on('click',function(){
$('#box:not(animated)').show(1000,function(){
$(this).css('background','green');//ここのthisは#box
});
});
$('#hide').on('click',function(){
$('#box:not(:animated)').hide('slow');
});
});
</script>
 
 
★表示非表示を切り替えるtoggle
表示されているときは非表示に、非表示の時は表示にと切り替える　※あまりもう使わないらしい
<script>
$(function(){
$('button').on('click',function(){
$('#box:not(animated)').toggle(500);
});
 
});
</script>
 
★表示非表示をスライドで切り替えるslideDown() slideUp()
show/hideで表示させる場合は左上の00地点から表示が始まってからcssで指定されている大きさになる
slideで表示させる場合はcssで指定した横幅だけ確保された状態から徐々に指定した高さになるように表示が始まる
ナビゲーションメニューなど、文字などの中身が入っているものを表示させる場合はslideが適している
 
★ひとつのボタンで表示非表示をまかなう　slideToggle
<script>
$(function(){
$('#toggle').on('click',function(){
$('#box:not(animated)').toggle(500);
});
});
$(function(){
$('#slide').on('click',function(){
$('#box2:not(:animated)').slideToggle(500);
});
});
</script>
 
★フェードインフェードアウト
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('#in').on('click',function(){
$('img').fadeIn(800);
});
});
$(function(){
$('#out').on('click',function(){
$('img').fadeOut(800);
});
});
</script>
 
 
まとめ
  • フェードインは opacityが1になる /フェードアウトは0になる
  • slideはwidthは元から指定された値で、heightが指定地まで動いていく
  • show/hideはwidthとheight両方が指定した値になるために動いていく
 
練習：ボタンをクリックしたらナビゲーションが表示されるようにする
・jQueryはなるべく要素名ではなくidをつけてid名で指定する
・scriptはcssの下に書く
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ボタンを押したらメニューボタンが表示されるようにする</title>
<style>
html,body,div,nav,ul,li,a {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
 
#container {
  margin: 50px auto;
  width: 200px;
}
#menu {
  width: 200px;
  display: none;
}
li {
  width: 200px;
  height: 50px;
}
li a {
  border: 1px solid orange;
  box-sizing: border-box;
  display: block;
  text-align: center;
  line-height: 50px;
  background:#F9FDAC;
  color: orange;
}
 
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('#btn').on('click',function(){
$('#menu:not(:animated)').slideToggle(800);
});
});
</script>
</head>
 
<body>
<div id="container">
<button id="btn">メニュー</button>
<nav id="menu">
<ul>
<li><a href="#">ボタン1</a></li>
<li><a href="#">ボタン2</a></li>
<li><a href="#">ボタン3</a></li>
<li><a href="#">ボタン4</a></li>
</ul>
</nav>
</div>
</body>
</html>
 

【授業メモ】レスポンシブデザイン

授業メモ
レスポンシブデザイン
フルードグリッドでのレスポンシブデザイン
カラムのレスポンシブは、ブレイクポイントごとの幅に合わせてカラムの並び方を変えるやりかた
フルードグリッドは、レスポンシブにしても元のデザインのまま小さくするやりかた
 
★「高さ÷親要素の横幅」の％をpadding-bottomにいれ、paddingはゼロにすることで高さを可変にする
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フルードグリッドのレスポンシブ</title>
<meta name="viewport" content="width=device-width">
<style>
html,body,div,ul,li {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
 
body{
  background: pink;
}
ul {
  width: 960px;
  padding:10px;
  height: 340px;
  overflow: hidden;
  box-sizing: border-box;
  margin: 50px auto;
  background: white;
}
li {
  width: 33.33%;
  height: 0;
  padding-bottom: 33.33%; 　
★指定したい固定値の高さ320÷親要素の横幅960　heightは0にする
  float: left;
  background: orange;
}
li:nth-child(2) {
  background: yellow;
}
</style>
</head>
 
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
 
 
★固定値の場合、calcを使えば複雑なサイズ指定も可能　
　calcは四則演算なので、ー＋の両側は必ずスペース！calcと()の間はスペース禁止！
　calc(〇% - △px)
ul {
  width: 980px;
  padding: 5px;
  overflow: hidden;
  box-sizing: border-box;
  margin: 50px auto;
  background: white;
}
li {
  width: calc(33.33% - 10px);
  height: 0;
  padding-bottom:calc(33.33% - 10px);
  float: left;
  background: orange;
  margin: 5px;
}
 
 
レスポンシブの隙間の開け方
・pxで固定ー簡単だけどデザインによっては見づらくなる
・%で可変ー計算できればデザインもきれいにできる
 
 

【授業メモ】JavaScript　配列

JavaScript 授業メモ
JavaScriptではあまり使われないメソッドだが、データベースの考えで必要なため、
「こういうのがあるんだ」程度に覚えておく。（テスト範囲に出るのは配列のみ）
 
★記述例
<script>
var favorites = {
  food:'カレー',//インデックス（キー）で指定　セミコロンではなく、続きがあるのでカンマ
  color:'青',//続きのカンマ
  number:7//これで終わりなのでカンマ無し
};//ここにセミコロン
console.log(favorites.food);//favoritesの中のfoodだけ呼び出す
console.log(favorites.color);//favoritesの中のcolorだけ呼び出す
console.log(favorites.number);//favoritesの中のnumberだけ呼び出す
console.log(favorites['number']);//ブラケッツで呼び出すこともできる
 
favorites.sports = 'サッカー';//後から値を追加することもできる
console.log(favorites.sports);
</script>
 
配列をHTMLに適した形で表示する方法
 
★記述例
ulはfor文の外側に置く。繰り返したいliは中に置く。
<script>
var fruit = new Array('りんご', 'バナナ', 'メロン', 'もも', 'みかん','キウイ' );
document.write('<ul>');
  for (i =0; i <fruit.length; i ++){//追加しても中のものが都度表示されていくようにlength
  document.write('<li>' + fruit[i] + '</li>');
}
document.write('</ul>');
</script>
 
配列で日付時刻曜日を取得する方法
★記述例1
<script>
var now = new Date();//日付時刻取得の宣言
var mon = now.getMonth()+1;//月
var date = now.getDate();//日付
var day = now.getDay();//曜日
var week = ['日', '月', '火', '水', '木', '金', '土'];//曜日を配列化
var today = '今日は' + mon + '月' + date + '日' + week[day] + '曜日' + 'です';
document.write('<h1>' + today + '</h1>' );
</script>
 
★記述例2
<script>
var date =new Date();
var myMonth = date.getMonth()+1;//月
var myDate = date.getDate();//日付
var myDay = date.getDay();//曜日
var youbi = ['日', '月', '火', '水', '木', '金', '土'];
var myDay = youbi[myDay];
document.write( '<h1>' + myMonth + '月' + myDate + '日' + myDay + '曜日' + '</h1>' );
</script>
 
 

【授業メモ】JavaScript　DOMの使い方

JavaScript 授業メモ
DOMでのオブジェクトの使い方
★DOMとは HTMLやCSSに変更を加えずに、要素に命令をすることができる仕組み
  • ドキュメント　HTMLのこと
  • オブジェクト　HTMLの中の要素(p,h1..)及び要素の中(alt,テキスト)
  • モデル　
 
DOMを通して、「オブジェクト指向」という、対象をオブジェクト（要素ノード）、
つまり「もの」のように捉えてプログラミングを行う手法を覚える。
1、命令するオブジェクトを選ぶ
2、メソッド（命令）をかける
3、どのタイミングで命令を実行するか
 
★Node(ノード)とは？
ノードとは、DOMでアクセス・変更できるブロック単位。
HTMLタグ全てがノードで作られていまいる。
DOMで扱うノードの種類
  • エレメントノード（HTMLタグ）
  • 属性ノード（src や alt）
  • テキストノード（タグで囲まれたテキスト）
 
★命令の仕方
1、命令するオブジェクトを選ぶ
ノードの指定方法
要素のId名で指定する　　  「document.getElementById」
要素のclass名で指定する　 「document.getElementsByClassName」（※IE8以下では利用できません）
指定した要素全てに命令する「document.getElementsByTagName」
 
2、メソッド（命令）をかける
メソッドはドットシンタックス（ドットでつなぐ文法）で記述
innerHTM(取得した要素の内容を変更)
style.backgroundColor(取得した要素のスタイルを変更)
image.src （取得した要素の属性を変更）
 
 
3、どのタイミングで命令を実行するか
window.onload（ファイルが読み込まれたタイミング）
onclick（ボタンを押したら）
 
 
★オブジェクト
windowオブジェクト
ブラウザの情報をそのまま取得できる。
<script>
console.log(window);
</script>
 
documentオブジェクト
HTMLで表現されているコンテンツをすべて保持しているオブジェクト
 
DOMの操作
★getElementById(id)
<h1 id="title">DOMの練習</h1>を変数h1に代入したい
<h1 id="title">DOMの練習</h1>
<p id="one">テキスト１</p>
<p id="two">テキスト２</p>
<script>
var h1 = document.getElementById('title');
console.log(h1);
</script>
 
★テキストの取得
変数h1＝<h1 id="title">DOMの練習</h1>　の中のテキスト部分だけ取得したい
<script>
var h1 = document.getElementById('title');
console.log(h1);
var title = h1.textContent;
console.log(title);
</script>
 
★テキストの変更
変数h1＝<h1 id="title">DOMの練習</h1>　の中のテキスト部分のテキストを変更したい
<script>
var h1 = document.getElementById('title');
console.log(h1);
var title = h1.textContent = 'こんにちは';
console.log(title);
</script>
 
★要素の書き換え
変数p1に <p id="one">テキスト１</p> を代入し、中身全てを差し替えたい
HTMLをいじらずに、HTMLに変更を加える
<script>
var p1 = document.getElementById('one');
  p1.innerHTML = '<h2>中見出し</h2>';
</script>
 
 
★要素や要素の中身を生成
→jQueryでやるのでまた今度
 
★画像の差し替え
ファイルが読み込まれたときに画像を差し替える
  • どのタイミングで画像を変えるか決めて、作業をfunctionに入れる
  • 変数imgにidで<img id="img" src="img/asa.png" alt="朝の画像">を丸っと入れる
  • 何を変えるか指示する
<img id="img" src="img/asa.png" alt="朝の画像">
 
//ファイルが読み込まれたタイミングで画像の差し替え
window.onload = function() {
  var img = document.getElementById('img');
  var img.src = 'img/yuugata.png';
  var img.alt = '夕方の画像';
}
 
ボタンを押した時に画像を差し替える　
//ボタンを押したタイミングで画像の差し替え
function gazou() {
  var img = document.getElementById('img');
  img.src = 'img/yuugata.png';
  img.alt = '夕方の画像';
console.log(img);
};
</script>
<button onClick="gazou();">画像を変更する</button>
 
CSSに変更を加える　
CSSで設定している#boxの背景色を、CSSをいじらずに変える
<style>
#box {
  width: 300px;
  height: 300px;
  background: orange;
}
</style>
</head>
<body>
<div id="box"></div>
<button onClick="colorchange();">色を変える</button>
<script>
function colorchange() {
var box = document.getElementById('box');
  box.style.backgroundColor= 'pink';
}
</script>
</body>
 
ボタンを押しておみくじを表示させる
<body>
<p><img id="one" src="img/0.png" alt=""></p>
<button onClick="kuji();">ボタン</button>
<script>
function kuji() {
var a = Math.floor( Math.random() * 4 ) +1;
var omikuji = document.getElementById('one');
  omikuji.src = 'img/' + a + '.png';
}
</script>
</body>
 
 

【授業メモ】Math.randomと関数の使い方

JavaScript 授業メモ
Math.randomの使い方
Math.random()は、0〜0.9999...(1未満)の間から、1つの数値をランダムで返す。0は含むが、1は含まない。
 
★Math.round
Math.round()は、小数点以下を四捨五入する。整数を取得したい場合に利用。
★Math.ceil
Math.ceil()は、小数点以下を切り上げる。0.999なら1、3.21なら4という数値にする。
 
★Math.floor
Math.floor()は、小数点以下を切り捨てる。0.999なら0、3.21なら3という数値にする。
 
<!--0~10の数をランダムで表示させる　０はあるが1にはならない-->
var a = Math.random()* 10;
 
<!--0~10の数をランダムで表示させる　小数点以下四捨五入-->
var b = Math.round(Math.random()* 10);
 
<!--0~10までの数をランダムに表示させる　小数点以下切り上げ-->
var c = Math.ceil(Math.random()* 10);
 
<!--0~10までの数をランダムに表示させる　小数点以下切り捨て-->
var d = Math.floor(Math.random()* 10);
 
  document.write(a + '<br>');
  document.write(b + '<br>');
  document.write(c + '<br>');
  document.write(d + '<br>');
 
 
★任意の範囲で表示させるには
　表示させたい範囲と、表示させたくない範囲の数を分けて考える
　範囲外には、何を足したり引いたりすれば範囲内の数になってくれるかがポイント
//5〜10の乱数を発生 [11-5]と[5]を指定する
//6は0~10のうちの、表示させたい5~10の数字の数（5678910）
//5はいらない0~4の数（01234　5を足すと、範囲内の数字になるので、範囲外の数＋５をしている）
 
var a = Math.floor( Math.random() * 6 ) + 5 ;
document.write(a);
 
練習
//0～７のうち、３～７を表示させる
//３～７は数字が5個ナノで＊５、いらない０～２が３つあり、それに3を足すとほしい３以上になるので＋３
var b = Math.floor( Math.random() * 5 ) + 3 ;
 
//１０～２０のうち、１０～２０を表示
var c = Math.floor( Math.random() * 11 ) + 10 ;
 
//０～３を表示させる
var d = Math.floor( Math.random() * 4 ) ;
 
//1～4を表示させる
var e = Math.floor( Math.random() * 4 ) +1;
 
document.write('<p>' + a + '</p>');
document.write('<p>' + b + '</p>');
document.write('<p>' + c + '</p>');
document.write('<p>' + d + '</p>');
document.write('<p>' + e + '</p>');
 
文字列をランダムで表示させる
//1～4を表示させる
var a = Math.floor( Math.random() * 4 ) +1;
document.write('img/' + a + '.jpg');
 
★画像をランダムで表示させる
まずどこかに<img>タグを書いて、必要な部分をあてはめればok!
var a = Math.floor( Math.random() * 4 ) +1;
document.write('<img src="img/' + a + '.png">');
でも、document.writeだと毎回更新ボタンを押してファイルを読み込ませないと表示できない！
画像が増えたりファイルが長いと、毎回更新するのは非効率！！！
ひと部分だけ動かしたい場合には、Document Object Model (DOM)を使う！
ちなみに、画像でなくせめて更新ボタンを作って更新させる方法もある（下記関数）
 
関数の使い方
作業に名前を付けて、簡単に呼び出すことができる。functionで定義する。
（ちなみに関数は、値に付ける名前。varで定義。）
★任意の関数名をつけて、呼び出す
//hello（関数名は任意）をいう関数名をつけ、作業を囲う
function hello() {
document.write('こんにちは');
}
hello();//関数呼び出し
 
★ボタンタグを作ってボタンを押したら画像を更新できるようにするプログラム
ボタンダグは特殊なリセットが必要
button {
margin: 0;
padding: 0;
border: none;
}
button:focus {
outline: none;
}
ボタンをクリックしたら関数が呼び出されるようにする
とはいえ画像が表示されるとボタンは消えて、どのみち更新押さないといけない→DOMがあればボタンを表示させたまま関数を呼び出すことができる！
<style>
button { margin: 0; padding: 0; border: none; }
button:focus { outline: none; }
</style>
</head>
 
<body>
<button onClick="kuji();">ボタン</button>
<script>
function kuji() {
var a = Math.floor( Math.random() * 4 ) +1;
document.write('<img src="img/' + a + '.png">');
}
</script>
</body>
 
 
練習：昨日の九九表をfunctionで呼び出す
<body>
<button onClick="kuku();">ボタン</button>
 
<script>
 
function kuku() {
document.write('<table>');
document.write('<tr><th>&nbsp;</th>');
for (var x = 1; x <=9; x = x+1){
  document.write('<th>' + x + '</th>');
}//th
document.write('</tr>');
for (var i = 1; i <= 9; i = i + 1 ) {
  document.write('<tr>');
  document.write('<th>' + i + '</th>');
  for (var a = 1; a <= 9; a = a + 1) {
  document.write('<td>' + a * i + '</td>');
  }
  document.write('</tr>');
}
document.write('</table>');
}//function
</script>
</body>
 
 

【授業メモ】JavaScript　for文の応用　多重ループ

JavaScript 授業メモ
for文の応用　多重ループ
繰り返しのfor文に、ループを入れ子にしていくことが可能になる。
 
★for文のかたち
for ( var i = 1; i <= 3 ; i = i + 1 ){}
＝変数iは1で、3回までループ、そのたびに1ずつ足されていく
 
★多重ループ
親要素のループにはその都度子要素のループが含まれてしまう
子aのループごとのあいまに親iが入っていく
for ( var i = 1; i <= 3 ; i = i + 1 )
for ( var a =1; a <= 3 ; a = a + 1 ){
document.write(a);
}
document.write(i);
}
 
123112321233
aの一回目
iの一回目
aの二回目
iの二回目
aの三回目
iの三回目
 
★for文による九九の考え方
<table width="300" border="1"> 　　※
<script>
for ( var i = 1; i <= 3 ; i = i + 1 ){
document.write('<tr>');
for ( var a =1; a <= 3 ; a = a + 1 ){
document.write('<td>' + 3 * 1 + '</td>');
}
document.write('</tr>');
}
</script>
</table>
 
<!--JavaScriptはこういうことを示してる
<table width="300" border="1">
'<tr>''<td>' + 1 * 1 + '</td>''<td>' + 2 * 1 + '</td>''<td>' + 3 * 1 + '</td>''</tr>'
'<tr>''<td>' + 1 * 2 + '</td>''<td>' + 2 * 2 + '</td>''<td>' + 3 * 2 + '</td>''</tr>'
'<tr>''<td>' + 1 * 3 + '</td>''<td>' + 2 * 3 + '</td>''<td>' + 3 * 3 + '</td>''</tr>'
</table>-->
 
<!--掛け算の結果はこう
<table width="300" border="1">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>2</td><td>4</td><td>6</td></tr>
<tr><td>3</td><td>6</td><td>9</td></tr>
</table>-->
※ここのtableタグに直接幅とか指定しているのは練習だからであって、ほんとうはだめ。もしやるとしても、widthのpxはつけたらエラーになるので注意。
 
★tableタグとJavaScriptで九九の表を作る
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>九九の表</title>
<style>
table {
  width: 500px;
  border: 1px solid black;
  border-collapse: collapse;/*ボーダーが重なっている時に直す方法*/
}
 
th,td {
  border: 1px solid black;
}
 
th {
  background: #999;
}
 
</style>
</head>
 
<body>
<h1>九九表</h1>
<table>
<script>
document.write('<tr><th>&nbsp;</th>');
for (var x = 1; x <=9; x = x+1){
  document.write('<th>' + x + '</th>');
}
document.write('</tr>');
for (var i = 1; i <= 9; i = i + 1 ) {
  document.write('<tr>');
  document.write('<th>' + i + '</th>');
  for (var a = 1; a <= 9; a = a + 1) {
  document.write('<td>' + a * i + '</td>');
  }
  document.write('</tr>');
}
</script>
</table>
</body>
</html>
 
★為替表を作る
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>為替表</title>
</head>
 
<body>
<table>
<script>
document.write('<tr><th>ドル</th><th>円</th></tr>');
 
var y = 110;
 
for (var s = 10; s <= 50; s = s + 10) {
  document.write( '<tr><td>' + s + '</td>' );
  document.write( '<td>' + s * y + '</td></tr>' );
}
</script>
</table>
</body>
</html>