http://bit.ly/entamina

JavaScriptの
苦手意識を克服しよう。

これくらいは分かる


<script>
	var RINGO = 'りんご';
	alert( RINGO );
</script>

意味分かりますか?


<script>
	// DOM ( Document Object Model )
	var title = document.getElementById('title');

	// DOMで取得したObject(プロパティ)の上書き
	title.style.color = 'red';
</script>

15分のセッションを聞くと
Objectとは?、DOMとは?
スッキリ理解できる

自己紹介

阿部 正幸(あべ まさゆき)
KDDIウェブコミュニケーションズ

  • ACE01 / SmartRelease プロダクトマネージャー
  • CPI エバンジェリスト 統括
  • KDDIウェブ 公認 CPI スタッフブログ 編集長
  • TechAcademy講師 HTML5 Fun 理事
  • ANNAI株式会社 社外取締役(CMO)

エンターテイメント + セミナー

 

私は

時間通りに終わらないセッションが大嫌いです。
1秒でも長くても、短くてもイヤだ!!

本日は

1秒もずれることなく、完全ピッタリにプレゼンを
終わらせます。

現在 175秒(2分 55秒が経過)
残り 725秒(12分 5秒)

お気づきでしょうか

このスライド15秒経過すると、
次のスライドに強制的に進みます

左下のアイコンは、次のスライドになるまでの目安を
教えてくれる、ドSカウンターです。
↓↓↓↓

持ち時間は15分です。
15分は、900秒で、1ページのスライドが15秒で進むので

スライドのページ数

900(秒) / 15(1ページの秒数)  = 60 (ページ)

絶対に時間通りに終わるプレゼン!!
ここにあり!!

強制的にスライドが進む?

え? 私はドMか?

ですって?

はい!! ドMです!!

もちろんこのスライドも15秒です。

本日のお題

JavaScriptの苦手意識を克服しよう!!

  • Objectのプロパティとは?
  • Objectのメソッドとは?
  • DOMとは?

Object(オブジェクト)とは

  • ドラえもんの四次元ポケットみたいな物
  • Objectにはなんでも格納することができる

オブジェクトへ代入


// Object
var object_name = {
	string: 'TEST',
	nummber: 10,
	boolean: true
}

// オブジェクトの確認
console.log(object_name.string);

HTML5のBasicな雛形を用意します


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title id="title">TEST</title>
</head>
<body>
	<h1>JavaScriptデモ</h1>
	<script>

		// ここにスクリプトを書きます

	</script>
</body>
</html>

Objectに値を代入


<script>
	// ここに
</script>

↓↓↓↓


<script>
	// Object
	var object_name = {
		string: 'TEST',
		nummber: 10,
		boolean: true
	}
	console.log(object_name.string);
</script>

Objectに値を代入


<script>
	// Object
	var object_name = {
		string: 'TEST',
		nummber: 10,
		boolean: true
	}
	console.log(object_name.string);
</script>

<script>
	// Object
	var object_name = {
		string: 'TEST',
		nummber: 10,
		boolean: true
	}
	console.log(object_name.string);
</script>

Objectのプロパティ


<script>
	// Object
	var object_name = {
		string: 'TEST', // 文字列
		nummber: 10, // 数字
		boolean: true // 真偽値

		// その他
		// null (値が存在しない)
		// undefined (値が定義されていない)
	}
	console.log(typeof(object_name.string));
</script>

Objectのプロパティとは

文字列や、数値などを入れるための箱(Object)

Objectに関数を代入

Q. 関数とは何かわかりますか?

関数とは

繰り返しの処理をまとめるもの


<script>
	var suji1 = 10;
	var suji2 = 20;
	var suji3 = 30;
	var suji4 = 40;
	var result;

	result = suji1 + suji2;
	console.log(result);
	result = suji3 + suji4;
	console.log(result);
	result = suji1 + suji4;
	console.log(result);
</script>

関数で処理をまとめる


<script>
	var suji1 = 10;
	var suji2 = 20;
	var suji3 = 30;
	var suji4 = 40;

	tashizan(suji1,suji2);
	tashizan(suji3,suji4);
	tashizan(suji1,suji4);

	function tashizan(s1,s2){
		var result = s1 + s2;
		console.log(result);
	}
</script>

関数で処理をまとめる(30s......)


<script>
	var suji1 = 10;
	var suji2 = 20;
	var suji3 = 30;
	var suji4 = 40;

	tashizan(suji1,suji2);
	tashizan(suji3,suji4);
	tashizan(suji1,suji4);

	function tashizan(s1,s2){
		var result = s1 + s2;
		console.log(result);
	}
</script>

関数で処理をまとめる(45s......)


<script>
	var suji1 = 10;
	var suji2 = 20;
	var suji3 = 30;
	var suji4 = 40;

	tashizan(suji1,suji2);
	tashizan(suji3,suji4);
	tashizan(suji1,suji4);

	function tashizan(s1,s2){
		var result = s1 + s2;
		console.log(result);
	}
</script>

関数で処理をまとめる(60s......)


<script>
	var suji1 = 10;
	var suji2 = 20;
	var suji3 = 30;
	var suji4 = 40;

	tashizan(suji1,suji2);
	tashizan(suji3,suji4);
	tashizan(suji1,suji4);

	function tashizan(s1,s2){
		// 急な仕様変更で + を * に変更も1箇所で修正可能
		var result = s1 * s2;
		console.log(result);
	}
</script>

Obejectに関数を代入する


<script>
	// 関数型
	function tashizan(s1,s2){
		var result = s1 + s2;
		console.log(result);
	}
</script>

↓↓↓↓


<script>
	// オブジェクト型
	var object_name = {
		tashizan : function(s1,s2){
			var result = s1 + s2;
			console.log(result);
		}
	}
</script>

Obejectに関数を代入する


<script>
	function tashizan(s1,s2){
		var result = s1 + s2;
		console.log(result);
	}
</script>

function tashizanを逆にして
: で繋ぎ、Objectの中に入れるだけ!!


<script>
	var object_name = {
		tashizan : function(s1,s2){
			var result = s1 + s2;
			console.log(result);
		}
	}
</script>

Objectのメソッド


<script>
	var object_name = {
		tashizan : function(s1,s2){
			var result = s1 + s2;
			console.log(result);
		}
	}

	// 作成したObjectの実行
	object_name.tashizan(10,20);
</script>

<script>
	var object_name = {
		tashizan : function(s1,s2){
			var result = s1 + s2;
			console.log(result);
		}
	}

	// 作成したObjectの実行
	object_name.tashizan(10,20);
</script>

Objectとは

Objectにプロパティと、
メソッドを代入


<script>
	var object_name = {
		string: 'TEST',
		nummber: 10,
		boolean: true,
		tashizan : function(s1,s2){
			var result = s1 + s2;
			console.log(result);
		}
	}
</script>

Objectの利用


<script>
	var object_name = {
		string: 'TEST',
		nummber: 10,
		boolean: true,
		tashizan : function(s1,s2){
			var result = s1 + s2;
			console.log(result);
		}
	}
	// プロパティの利用
	console.log ( object_name . string );

	// メッソドの利用
	console.log ( object_name . tashizan(10,20) );	
</script>

Objectの利用


<script>
	// プロパティの利用
	console.log ( object_name . string );

	// メッソドの利用
	console.log ( object_name . tashizan(10,20) );	
</script>

この形どこかで見たことないですか??

Objectの利用


<script>
	// プロパティの利用
	object_name . string;

	// メッソドの利用
	object_name . tashizan( );
</script>

この形どこかで見たことないですか??
JavaScript書いているとよく使うあれです。

Objectの利用


<script>
	// Object名 . プロパティ名()
	object_name . string;

	// Object名 . メソッド名()
	object_name . tashizan( );
</script>

↓↓ よく使うDOM操作に似ていませんか? ↓↓


<script>

	document . getElementById( );

</script>

DOMとは

Document Object Modelのこと

DOM (Document)

Documentとは、window.documentで、Chromeや、IEが持っているWindowそのものです。

DOM (Object Model)

先ほど習ったObjectのModelです。
DOMとは、Windowが持っているデータがObject化されたものです。

DOMをもう少し
詳しく見てみましょう

window objectを参照


<script>
	console.dir(window);
</script>

Windowが保持
している
全情報の参照や、
上書きができる

window objectを参照

window objectを参照

プロパティの参照なので


<script>
	var w_position = 
	  window . screenLeft;
	console.log( w_position );
</script>

window.documentを参照

innerTextを発見!!
見たことありますよね??

getElementByIdメソッド


<script>
	// window document内にある、特定IDのコンテンツを、取得するメソッド
	document . getElementById( );
</script>

なので


<script>
	// window document内にある、特定IDのコンテンツを、取得するメソッド
	document . getElementById( 'title' );
</script>

id に title が付与されたDOMを取得することができる


<script>
	var title_content = document . getElementById( 'title' );
	console.dir(title_content);
</script>

window objectを参照

プロパティの参照なので


<script>
	var title_content = document . getElementById( 'title' );
	alert( title_content . innerText );
</script>

window objectの上書き


<script>
	var title_content = document . getElementById( 'title' );
	title_content . innerText = 'DOMで上書き';
</script>

その他にも


<script>
	var title_content = document . getElementById( 'title' );
	console.dir( title_content );
</script>

style objectの下に color プロパティを発見!!


<script>
	var title_content = document.getElementById('title');
	title_content . style . color = 'red';
</script>

まとめ

  • 阿部は時間ピッタリにプレゼンを終わらすことができる、時間にうるさい男
  • Objectとは、文字列、数値、関数などを入れる箱
  • DOMとはWindowが持つ全てのデータをObject化したもの
  • DOMのデータを参照したり、データを上書きしたりすることでインタラクティブなwebサイトを構築することができる

おかわりタイム

今話題のオープンソースMAツール(Marketing Automation)「mautic」を徹底解析

ありがとうございました