見出し画像

Webデザイン・マーケティング課 授業31日目

いしかわ

1〜3時間目 javascript（jQuery）演習
オリジナル教材

ひとまず今日で、javascriptの時間は終わり。

■jQueryで値を取得したり書き換えたり

昨日に引き続き、jQueryで値を取得したり書き換えたりした。

$('#box1').text('文字を書き換える');
$('#box2').html('<ul><li>リスト</li></ul>');

textメソッドはテキストしか書けず、htmlタグは書けない。（htmlを書くと記号がエスケープされる）
htmlメソッドは、htmlを書くことが出来る。

const tit = $('#link').attr('title');
console.log(tit)
->title属性の値が出力される

$('#link').attr('href','https://note.com/k_ishikawa0914');
->id=linkのaタグのhref属性が書き換わる

attrメソッドを使うと、属性にアクセスしたり書き換えたり出来る。

$('#btn').on('click',()=>{
  console.log('ボタンがクリックされた');
});

jQueryでイベントを扱う時は、常にonメソッドを使う。
onメソッドは、イベントの種類とリスナー関数を指定して使う。


$('#select01').on('change',()=>{
  console.log('セレクトボックスが変更された');
})

selectタグは、「change」というイベントで変更された時にイベントを発火させることが出来る。

■プラグインbgSwitcherを使う

基本的には以下のサイトを参考に作っていく


ただし、渡したサンプルは、あえてクラス名や画像のファイル名はブログの情報と変えてある。

なので、きちんとブログを読み解いて、クラス名や画像のファイルなどは書き換えないといけない。その事をお伝えするために今回のプラグインを採用した。

<style>
    body {
        margin: 0;
        padding: 0;
    }

    .bg {
        width: 100%;
        height: 100vh;
        background-position: center center;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .title {
        color: #fff;
        font-size: 48px;
        line-height: 1.5;
        font-weight: bold;
        text-align: center;
        text-shadow: 1px 1px 1px #000;
    }
</style>
</head>

<body>
    <div class="bg">
        <div class="inner">
            <h1 class="title">背景が動く DEMO PAGE</h1>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="jquery.bgswitcher.js"></script>
    <script>
        $('.bg').bgSwitcher({
            images: ['img/main1.jpg', 'img/main2.jpg', 'img/main3.jpg'], // 切り替える背景画像を指定
        });
    </script>
</body>


■まとめ

今日でjavascriptが終了。

やっぱり短いなぁ。もうちょっと実践のコードをたくさん書きたかったが、ひとまず終わりなので、明日から始まるレスポンシブの授業でちょいちょい入れていこう。

この記事が気に入ったらサポートをしてみませんか？