JavaScript Basic 01

JavaScript入門01
JavaScriptの基本

最近、動いている
Webサイト
多いですよね
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 2

最近のWebサイト
• http://www.toclas.co.jp/
• http://adidasoriginals.tumblr.com/
• http://www.nikyniky.com/
• http://soppo.co/
• http://soniaby.com/en/looks
• http://www.talkative-jwl.jp/
• http://www.irobot-jp.com/roomba/800series/
• http://www.hadalabo.jp/shiroshizuku/
• http://www.nhk.or.jp/studiopark/

この動きを
実現しているのが

JavaScript

今、Webデザイナに
求められる技術

それが
JavaScript

この授業では
JavaScriptの基礎を
学習します

JavaScriptの
役割

JavaScriptの役割
HTML・CSSの内容を
書き換えること

HTMLの書き換え
<h1>こんにちは</h1>

HTMLの書き換え
<h1>おはよう</h1>

HTMLの書き換え
<h1>おはよう</h1>
Webサイトを表示した時刻に合わせて、文字を変更

HTMLの書き換え
<img src=“a01.jpg” />

HTMLの書き換え
<img src=“b03.png” />

HTMLの書き換え
Webサイトを表示ごとに、ランダムに画像を変更

CSSの書き換え
こんにちは h1{color:#000; font-size:16px}

CSSの書き換え
こんにちは h1{color:#000; font-size:32px;}
こんにちは h1{color:#0f0; font-size:6px;}

CSSの書き換え
見る人の環境に合わせて、文字サイズや文字色を変更

JavaScriptの役割
もう一つ
大切な役割

JavaScriptの役割
ユーザ操作を
取得

ユーザ操作
• 画像をクリックしたら・・・

ユーザ操作
• 文字にマウスを重ねたら・・・

JavaScriptの役割
JSの重要な
ポイントは２つ

JavaScriptのポイント
• 要素（タグ）を指定して、下記作業を行う
– 要素の内容（文字）の変更
– 要素の属性値の変更
• alt属性、src属性、id属性など
– 要素に設定されているCSS
• color、padding、margin など

JavaScriptのポイント
• ユーザ操作（イベント）を取得する
– 画像をクリックしたら
– 文字にマウスを重ねたら
– 重ねたマウスを外したら

今回の目標
• JavaScriptによるHTML・CSSの変更
– 要素の内容（文字）
– 要素に設定されているCSSの内容
• JavaScriptでユーザ操作を確認する

今回の目標
• クリックしたら写真が変わる簡易ギャラリー

JavaScriptの役割
JavaScriptの
記述場所

HTML5の場合
• HTMLファイルに直接記述
• 外部読み込み
<script>
JavaScriptのコードを記述
</script>
<script src=“ファイル名.js”></script>

JavaScript記述場所
• 要素（タグ）＝ DOM の構造を理解してから
JSを実行しないと誤動作する
– 要素の構造を理解してからJSを実行
• </body>の直前に記述する
• DOMContentLoadedを利用して実行
– 要素や画像ファイルなど全てを読み込んでから実行
• window.onloadを利用して実行
– jQueryのreadyメソッドを利用する
• 要素の構造を理解してから実行する
• DOMContentLoadedを利用している

簡単なJavaScript
• アラートの表示
<body>
<script>
console.log(‘こんにちは‘);
</script>
</body>

簡単なJavaScript
• コメント（メモ書き）の記述
<body>
<script>
// 一行のみのコメント
console.log(‘こんにちは‘);
/*
複数行のコメント
*/
</script>
</body>

Console.logの確認
• Google Chromeで確認ができる
– 右クリック→[要素を検証] → [Console] で、
console.logの内容が確認できる。

JavaScriptの記述の流れ
1. 変更したいHTML要素を指定
– まずは、変更したいHTML要素を決定
2. 指定した要素にCSS / HTMLの変更
– 決めたHTML要素の内容やCSSを変更

Copyright Ⓒ Yoshihiro Takahashi 2015 All
Rights Reserved.
36
要素を
指定してみよう

要素を指定する方法
• idを利用して要素を指定する
– id=“header”など
• タグ名を利用して要素を指定する
– pなど
• classを利用して要素を指定する
– class=“main”など

– pなど
一番処理が
速い

– pなど
一番処理が
速いページ内に一つ
ページ内に複数
ページ内に複数

idによる指定方法
• id名から要素を指定する方法
document.getElementById('id')

Rights Reserved.
41
HTMLの内容を
変更してみよう

要素の文字を変更しよう
• idを指定して、要素内に文字を挿入
– 記述例
document.getElementById(‘id’).innerHTML = ‘文字’;
– 表示結果
＜タグ id=‘id’＞文字＜／タグ＞

Rights Reserved.
43
CSSの値を

CSSの値を変更する
• CSSの変更
document.getElementById(‘id’).style.プロパティ = ‘値’;
• 記述例
document.getElementById(‘id’).style.color = ‘#d00’;
document.getElementById(‘id’).style.fontSize = ’20px’;

記述のポイント
• 選んだ要素を「オブジェクト」に入れて、使いま
わす
• 理由
– 処理を速くするため
var オブジェクト名 = document.getElementById(‘id’);
オブジェクト名.innerHTML = ‘文字’;
オブジェクト名.style.color = ‘#d00’;

記述ミスの確認
• Google Chromeで確認ができる
– 右クリック→[要素を検証] → [Console] で、エラー
の確認ができるので、使い慣れてください。
– 正しく動かない場合には、まず上記操作を行なって
ください。

課題
• JavaScriptで、さまざまなCSSの値を設
定してみてください。

48
アニメーション
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.

CSSを変化させてアニメーション
• JavaScriptを利用してCSSの値を変化
させる

プログラミングのポイント
• 考え方の基本は、
【いつ】 + 【どこ/誰】 + 【どうする】

皆さん、来週一緒にランチしましょう

皆さん、来週一緒にランチしましょう
誰いつどうする

文字

文字右に動け！！

• 【いつ】 + 【どこの/誰】 + 【どうする】
– 数ミリ秒間隔のタイミングで（いつ）
– ID名（どこ/誰）
– CSSの内容を変化させる（どうする）

• 数ミリ秒間隔のタイミングで
– 指定した値のミリ秒間隔で連続で実行
– 「何か」を繰り返し実行し続けたい場合に利用
– 「setInterval」というイベントを使います。
• 設定方法
setInterval(function (){
繰り返しやりたい事；
}, ミリ秒);

• 右に移動する → margin-leftの値を増やす
• 記述例
文字margin-left
A.style.marginLeft = ’10px’；
}, 30);

59
あれ、
動かない？

• この記述だと、10pxを何度も設定している
• 数値を定期的に変更する必要がある
1px→2px→3px→4px→5px・・・
A.style.marginLeft = ’10px’；
}, 30);

61
数値を
変更したい

Rights Reserved.
62
変数

変数について
• 変数とは
– 値を入れるための「入れ物」
– 値（数字など）を変化させたい場合に使用する
– 「 var 変数」で、変数の宣言（作成）
– 「変数＝値」で、変数に値を代入
• 記述例
var 変数 = 値 ;
var 変数 = ‘文字’ ; // 文字はシングルクォート ‘’ で囲む
var 変数 = 値, 変数 = ‘文字’； // カンマ, で複数宣言

ポイント
= 値
代入
「＝」は、代入という意味です。
「＝」の左側は「入れ物」、「＝」の右側は「値」となります
数学の X=Y とは違います
XとYが等しいというイメージを捨てましょう
入れ物

変数名のルール
• 使用できる文字は半角英字数字＿＄のみ
• 先頭は半角英字＿＄のみ
• 半角英字の大文字・小文字は区別
– 例
• Abc と abc と abC は別の名前
• 3data はNG、data3 はOK
• $123 はOK、_abc はOK

値の変更
• 変数内の値の変更
変数 = 数字;
変数 = 変数 + 数字;
– 記述例
• 足し算 num = num + 1 ;
• 引き算 num = num − 1 ;
• かけ算 num = num ＊ 1 ;
• 割算 num = num / 1 ;

文字表示の特長
• 変数と文字の文字連結表示
– プラス（＋）で連結する
– 文字は ‘ ’ で囲う
– ‘文字’ + 変数 + ‘文字’
• 記述例
var n = 1;
n = n + 1;
A.style.marginLeft = n + ‘px’;

Rights Reserved.
68
今の
問題点は？

現状の問題点
• 右に行きっぱなし
文字

現状の問題点
• 右に行ったら、左に戻したい
文字文字

Rights Reserved.
71
条件によって
処理を変えたい

Rights Reserved.
72
条件分岐
if

条件分岐（if文）
if (条件式１) {
実行したい処理；
}
else if (条件式２) {
}
else{
}

if (条件式１) {
}
}
else{
}
条件式１が成立したとき、
｛｝の中を実行する
条件式１が成立せず、
条件式２が成立したとき、
条件式１と条件式２が
成立しないとき、｛｝の
中を実行する

条件式の設定方法
• 比較演算子
A == B （等しい）
A > B （より大きい）
A < B （より小さい）
A >= B （以上）
A <= B （以下）
A != B （等しくない）

if (パソコンの価格＜５万円) {
パソコンを購入；
}
else{//条件を満たしていないとき
お店から出る；
}
• 普段からifは使っています

Rights Reserved.
77
マウス操作を
取得

ユーザ入力による制御
• マウスなどのユーザ操作（イベント）で
コンテンツを制御することが出来ます。
記述例
対象要素.addEventListener(ユーザ操作, function(e){
実行したい内容;
});

マウス操作
• 文字をクリックしたら、文字色を赤に変更
var ABC = document.getElementById(‘test’);
ABC.addEventListener(‘click’, function(e){
ABC.style.color = ‘#f00’;
});

マウス操作
• 以下のイベントから、命令を選ぶ
– click クリック
– dblclick ダブルクリック
– mouseout 要素上からマウスが離れた
– mouseover 要素上にマウスが乗った
– mousedown ボタン押した
– mouseup ボタンを離した
– mousemove マウスが動いた

マウス操作
• 下記のイベントの違いを確認しよう
– click クリック
– mousedown ボタン押した
– mouseup ボタンを離した

要素の属性を

要素の属性を変更しよう
• 記述方法
オブジェクト.属性 = ‘値’;
• 記述例
オブジェクト.src = ‘abc.jpg’;
オブジェクト.title = ‘写真1’;

これまでの応用
• 簡易写真ギャラリーをつくってみよう。

ギャラリー
• 写真サムネイルにマウスを重ねるとサム
ネイルが半透明になる
– 半透明 → opacity : 0.5;
– 透明 → opacity : 0;
– 不透明 → opacity : 1;

ギャラリー
• 写真サムネイルをクリックすると大きな
写真が変更
– id=‘img’の要素を指定し、src属性を変更する
<img id=“img” src="images/img001.jpg" />

Rights Reserved.
87
処理を
まとめたい

関数

function：処理をまとめる
• ユーザーが事前に設定できる、命令文です。
実行処理の再利用、一元管理するのに有効です。
関数は、「作ること」と「使うこと」は別になりますので、
勘違いしないよう気をつけてください。
function 関数名(引数1,引数2,・・){
・・・
return 戻り値;
}

• 前と次の写真を表示してみよう。

• 今までの仕組み
５番目のボタンを押すと、
５番目の写真に変わる
３番目のボタンを押すと、
３番目の写真に変わる
ボタンと写真の番号が
リンクしている

• 今回の仕組み
NEXTボタンを押すと、
2番目の写真に変わる
ボタンと写真の番号が
リンクしていない

• この考え方
– NEXTボタン押したら、数字だけ変えたい

数値を
変更したい

95
変数

• 今回の仕組み NEXTボタンを押すと、
１番目の写真に変わる
２番目の写真に変わる
３番目の写真に変わる
２番目の写真に変わる
番号が1増える
番号が1に変わる
番号が1増える

97
条件によって
処理を変えたい

98
条件分岐
if

if (条件式１) {
}
}
else{
}
条件式１が成立したとき、
条件式１が成立せず、
条件式２が成立したとき、
条件式１と条件式２が
成立しないとき、｛｝の
中を実行する

条件式の設定方法
• 比較演算子
A == B （等しい）
A > B （より大きい）
A < B （より小さい）
A >= B （以上）
A <= B （以下）
A != B （等しくない）

JavaScript Basic 01

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to JavaScript Basic 01

Similar to JavaScript Basic 01 (20)

More from Yossy Taka

More from Yossy Taka (12)

Recently uploaded

Recently uploaded (10)

JavaScript Basic 01