webサイト制作の勉強|2019年10月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

要素の属性を操作する

属性とは各要素に付属している情報です。
img要素であればsrcやalt、a要素であればhrefなどです。もちろんidやclassも属性の一つです。
jqueryでは「attr」メソッドを使う事で任要素の属性に対して値を設定/取得するする事が出来ます。

img要素のalt属性を取得

var a=$('img').attr('alt');
console.log(a);

img要素のsrc属性を変更

$('img').attr('src','img/1234.jpg');

複数の属性を変更する場合

$('img').attr({
'src':'img/1234.jpg',
'alt':'bbbb'
});

jQueryの「animate」メソッドを使ったアニメーション

animateメソッドとは?
jQueryのanimateメソッドを使うと簡単にアニメーション(値を変化)させることが出来ます。
animateメソッドは値で指定出来る物(margin、color、width、positionなど)に対し有効です。

$('#box').animate({
    'left': '500px',
    'top': '300px'
});
メソッドチェーンを使い、順番に処理を行う
$('#box').animate({'left': '500px'}).animate({'top': '300px'});
速度を調節する

「slow」「normal」「fast」の文字列を指定するか、直接数値で指定します。

$('#box').animate({
    'left': '500px',
    'top': '300px'
},1000);
イージングの設定

イージングの設定をすれば「徐々に速くなる」などアニメーションに変化をつけることができます。
標準では「linear」と「swing」の2種類しかありません。「jQuery Easing Plugin」などを導入することでバリエーションが増えます。

$('#box').animate({
    'left': '500px',
    'top': '300px'
},1000, 'linear')
アニメーションの終了後に何かする
$('#box').animate({
     'left': '500px',
    'top': '300px'
},1000, 'linear', function(){
     alert('終わりました');
    });


このようにjQuery.animate() は大変便利ですが、CSS3の「transition」と「transform」を使うことで同じようなアニメーションがよりスムーズに動かす事が出来ます。「transform」の場合、GPUを使って処理される為、CPUを使って処理される「jQuery.animate()」よりCPUに負荷がかからなくなるので、レンダリングの高速化につながります。
ただ、GPUは処理するたびにメモリ(VRAM)を消費していきます。メモリは有限なので足りなくなると、CPUで処理しなくてはならない部分が増えてしまい、逆に処理が遅くなってしまうこともあ流ので注意が必要です。




Webサイトのパフォーマンス改善を行うためにGPU処理を取り入れてみた | un-Tech

javascript実技試験 復習

【問8】以下のコピーライトの「2019」の部分をdomとdateオブジェクトを使って、動的に変更させなさい。

<p><small>&copy; 2010-<span id="thisYear"></span>Felica Co., Ltd</small></p>
<script>
  myDate = new Date();
  myYear = myDate.getFullYear();
  document.getElementById("thisYear").innerHTML = myYear;
</script>

【問9】多重for文と配列を使って以下の表を作成する。

<table>
<script>
var products=['数量','商品A','商品B','商品C','商品D'];
var price=[300,400,600,850];

document.write('<tr>');
for(var a=0;a<=4;a++){
document.write('<th>'+products[a]+'</th>');
}
document.write('</tr>');

for(var i=1;i<=10;i++){
document.write('<tr>');
document.write('<th>'+i+'</th>');
for(var j=0;j<=3;j++){
document.write('<td>'+i*price[j]+'</td>');
}

document.write('</tr>');
}
</script>
</table>


【問10】サムネイル画像(3個)をクリックしたらメイン画像が変化するように記述しなさい。(画像サイズはグリッドレイアウトであれば自由)

<p><img  src="img/01.jpg" alt="" id="main"></p>
<p><img src="img/01-S.jpg" alt="" onClick="main.src='img/01.jpg'"></p>
<p><img src="img/02-S.jpg" alt="" onClick="main.src='img/02.jpg'"></p>
<p><img src="img/03-S.jpg" alt="" onClick="main.src='img/03.jpg'"></p>

cssプラグインを使ってハンバーガーメニューを作る

f:id:yachin29:20170417125330p:plain

前回の授業では擬似要素(before・after)を使ってハンバーガーメニューの3本線を作りましたが、スニペットを使う事で簡単に作る事が出来ます。



jonsuh.com



アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。


<p class="hamburger " id="btn">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</p>

jQueryとは

jQuery(ジェイクエリー)とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリのスタンダードと呼ぶ者もいる

f:id:yachin29:20160425030539j:plain
https://jquery.com/



jQueryの特徴

jQueryの使い方

jQueryを使用する際には、jQuery本体をダウンロード、もしくはCDN(Content Delivery Network)を使い、HTMLファイルにリンクさせる必要があります。

jQueryのバージョン

jQuery本体はバージョンが1系、2系、3系に分類されていて、新しいバージョンは古いブラウザーに対応させる記述を無くしている分、データが軽くなっています。



japanese.engadget.com


www.atmarkit.co.jp


本体をダウンロードして使う場合

上記のjQuery公式サイトからダウンロードしましょう。jQueryはバージョンにより動かないメソッドがあるのでバージョンコントロールが必要です。

古いjQueryのバージョンはこちらからダウンロード出来ます
code.jquery.com


また、公式サイトからダウンロードする際に「compressed」と「uncompressed」の2種類のファイルが用意されています。

  • compressed~……改行などを除去してファイルサイズを抑えたファイル
  • uncompressed~……圧縮前の元ファイル。構造が見やすいがファイルサイズは大きい

通常、jQuery本体の記述を触る事はほとんど無いので、ファイルにサイズの軽い「compressed」版を使用しましょう。

本体をCDNで使う場合

CDN(Content Delivery Network)とは、ネットワーク経由でコンテンツを提供するサービスで、jQuery本体をダウンロードする事無くネットワーク上にあるjQuery本体を使用する方法です。
CDNを使用する場合のメリットは、他のサイトでも同じCDNjQuery本体を使用している場合、ユーザーがそのサイトを先に閲覧してればブラウザにキャッシュされるのでjQueryを読み込む必要が無い。つまり、使うサイトが多いほど事前にキャッシュされてる可能性が上がります。
CDNの場合、一見メリットだらけのように見えますが、CDN元でシステムトラブルがあったり、ネットワークが不安定な所では動かないので注意が必要です。またCDNの場合は、Minified(改行が除かれた圧縮版)を使用しましょう。


CDNjQueryの公式サイト以外にもGoogleMicrosoftにも用意されています。


developers.google.com


www.asp.net



記述方法

HTMLファイルは上から順番に読み込まれるという原則から、jQueryを使用する際は必ずjQuery本体を最初に記述しましょう。

jQuery本体をダウンロードしている場合

<head>
 ・・・
<script src="js/jquery-3.4.1.min.js"></script>
</head>

もしくは

<body>
 ・・・
<script src="js/jquery-3.4.1.min.js"></script>
</body>
CDNの場合
<head>
 ・・・
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

基本形

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  //jQueryを利用したコード
</script>
</head>
<body>
</body>
</html>


CDNを使用する場合、万が一ネットワークが不安定になった時の事も考えて、バックアップ用にダウンロードしたjQueryと両方を記述する方法もあります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
window.jQuery || document.write('<script src="jquery-3.4.1min.js"><\/script>');</script>
</script>
</head>
<body>
</body>
</html>