Web制作をする上で、Javascriptは必ず必要になってくると思います。
「そろそろJavascriptを覚えて」と言われた方や、Javascriptで何ができるの？と疑問をお持ちの方向けにJavascriptでよく作るものをデモ付きで4選紹介します。
参考記事ではすべてjQueryというJavascriptを記述しやすくするライブラリを使用していますが、javascriptの記述がかなりシンプルになりますので、覚えておいて損はないと思います。
モーダルポップアップ
ページにアクセスした時や、何かボタンをクリックした時に暗めの背景と一緒にコンテンツが表示されて暗めの背景をクリックすると閉じるような、モーダルポップアップを見たことがあると思います。
このモーダルポップアップのように、ユーザーのアクション（クリックやスクロールなど）に合わせてページ上のコンテンツを操作したい場合、Javascriptが必須になります。
下記のボタンをクリックするとモーダルポップアップが開くので試してみてください。
作り方は下記の記事が参考になるかと思います。
トグルボタン
押すとコンテンツがスライドされながら表示され、もう一度押すと非表示になるようなボタンです。
下記のボタンをクリックするとトグルボタンの動きが確認できるので、試してみてください。
タブ切り替え
下記のデモのようにタブのクリックに合わせて、コンテンツが切り替わるものです。
- タブ1
- タブ2
- タブ3
タブ1の中身
タブ2の中身
タブ3の中身
カルーセルスライダー
ボタンクリックでコンテンツがスライドしていくカルーセルスライダーはとても便利なので、かなり多くのWEBサイトで見かけると思います。
下記のデモや記事ではカルーセルスライダーのライブラリであるslick.jsを用いて実装しています。
以上、Javascriptでよく作るもの4選でした。
これからJavascriptを学ぶ方はコピペからでいいと思うのでぜひ手を動かしながら学んでみてください！
コメント