学科 JavaScript基礎

By その他

-本日のアジェンダ-

1限目
学科 JavaScript基礎
JavaScriptとJQueryについて

2限目
学科 JavaScript基礎
ドロップダウンメニューについて

3限目
学科 JavaScript基礎
作品制作

4限目
学科 JavaScript基礎
作品制作

5限目
学科 JavaScript基礎
作品制作

本日のテーマ

JavaScript (JQuery) とは

JavaScript とは？

JavaScript（ジャバスクリプト）とは、プログラミング言語のひとつである。JavaScriptはプロトタイプベースのオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる。
利用される場面はWebサイト・Webアプリ・バックエンド・デスクトップアプリ・モバイルアプリなど、ブラウザからサーバー、デスクトップからスマートフォンまで多岐にわたっている。
Javaと似た名称を持つが、異なるプログラミング言語である

https://ja.wikipedia.org/wiki/JavaScript

簡単に言うと、
◆HTMLで土台を作る
◆CSSでレイアウトや飾りをつける
◆JavaScriptで動きをつける。

jQuery とは？

ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる。ロゴの下に表記されているキャッチコピーは「write less, do more」（「少ない記述で、もっと多くのことをする」の意）。

https://ja.wikipedia.org/wiki/JQuery

jQueryとは、「JavaScriptのライブラリ」です。JavaScriptを扱いやすくしてくれます。
JavaScriptは生の魚、jQueryは調理しやすいように捌いた魚。すぐに実装できるように用意してくれてます！

ドロップダウンメニューを作ってみましょう。

jQueryを使って作る方法です。jQueryを使わないと、記述が長くなり、動作の変更の際も知識が必要となり難しいです。

STEP.1 HTMLを書く

<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">ファイル</a>
<ul>
<li><a href="#">新規</a></li>
<li><a href="#">編集</a></li>
</ul>
</li>
<li><a href="#">News</a>
<ul>
<li><a href="#">最新</a></li>
<li><a href="#">過去</a></li>
<li><a href="#">Top5</a></li>
</ul>
</li>
</ul>
<div class="content">
<p>メニュー部分へマウスを移動するとサイドメニューがドロップダウンメニューとして表示されます。</p>
</div>

STEP.2 CSSを書く

.nav {
overflow: hidden;
width: 600px;
margin: 0 auto;
padding: 0;
display: flex;
}
.nav li {
list-style: none;
}
.nav li a {
display: block;
width: 200px;
height: 40px;
text-align: center;
color: #fff;
font-size: 14px;
line-height: 2.8;
background: #51ff00;
text-decoration: none;
border-right: 1px solid #eee;
box-sizing: border-box;
}
.nav > li:hover > a {
color: brown;
}
.nav li ul {
width: 200px;
display: none;
margin-left: -40px;
position: absolute;
}
.nav > li li:hover > a {
color: gray;
}
.nav li ul li a {
border-top: 1px solid #eee;
}
.content {
width: 600px;
height: 150px;
background: #eee;
margin: 0 auto;
padding: 10px;
text-align: left;
box-sizing: border-box;
}

STEP.3 headでjqueryを読み込む

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

STEP.4 bodyの中の一番下にjavascriptを書く

<script>
$(function() {
var nav = $('.nav');
$('li', nav)
.mouseover(function(e) {
$('ul', this).stop().slideDown('fast');
})
.mouseout(function(e) {
$('ul', this).stop().slideUp('fast');
});
});
</script>

jQueryを使わないで同じような動きを指定するには、下記サイトの手順を踏まなければなりません。

jQueryを使った方が、わかりやすいですね！

外部ファイルに記述してみましょう

STEP.1 新規ファイルに<script>〜</script>の中だけコピペ、○○○.jsで保存

STEP.2 下記のソースで読み込む

<script src="○○○.js"></script>