javascriptの基礎

JavaScript 基礎を理解しよう
KDDIウェブコミュニケーションズ
阿部正幸

● ACE01 / SmartRelease プロダクトマネージャー
● CPI エバンジェリスト統括
● KDDIウェブ公認 CPI スタッフブログ編集長
● Drupal(g.d.o Japan)日本コミュニティー
●日本ディレクション協会講演部
● HTML5 Fun 理事
OSSを広げる活動、Web制作に関する情報発信を行う
神戸生まれ、横浜育ち、7月31日生まれ
阿部正幸（あべまさゆき）
ディレクタープログラマープロマネ Evangelist

Venture
Since
1998
Web
Service
Hosting

直近こんな記事書きました
企業からイベント協賛費をもらうた
めの提案書と御作法
Facebookの「いいね」を押さずに
記事を読む方法
CMS選定に困ったWeb担当者様。
失敗しないCMSの選び方

cpi-line
LINE@ 始めました

開発に利用しているツール
● エディタ
- SublimeText
● デバッガー
- Chrome Consoleツール
● タスクランナー
- gulp (gulp-connect、Browser-sync)

JavaScriptを記述する場所
● HTMLに直接
<script>
// JavaScriptのコード
</script>
● 外部ファイルとして読み込む
<script src=”js/foo.js"></script>

変数
- 数字や、文字列を入れる箱 -
var foo;
変数『foo』ができました。

変数：型（基本）
- 変数の型種類 -
var foo;
foo = 123;
数値型
文字列型 var foo;
foo = “テスト”;

論理値 x = Boolean(true);
if (x) {
// 真の場合のコード
}
変数：型（基本）
- 変数の型種類 -
Null (値が存在しない)
Undefined (値が定義されていない)
特殊

var Suuji=123;
var Moji="ああああ”;
x = Boolean(true);
if (x) {
// 真の場合のコード
}
console.log(typeof(Suuji));
console.log(typeof(Moji));
console.log(typeof(x));
変数：型（出力してみよう）

function 関数名(引数１,引数２){
return XXXX ;
}
関数
繰り返しの処理に便利

x1=20; x2=30;
tashizan(x1,x2);
x1=40; x2=40;
tashizan(x1,x2);
x1=70; x2=40;
tashizan(x1,x2);
function tashizan(x1,x2){
var result = x1 + x2;
console.log(result);
}

var today = new Date();
//Dateオブジェクトの年が出力される
console.log(today.getFullYear());
String();
Number();
Boolean();
Array();
Date();
Math();
組み込み関数

var aaa=1;
function test1(){
console.log(aaa);
var bbb=2;
console.log(bbb);
}
// console.log(bbb);
test1();
ローカル変数

オブジェクト
オブジェクトとは
名前により値を参照したり、関数を
設定し処理を行う集合体

// オブジェクト
var fruits_color = new Object();
fruits_color = {
red:"ICHIGO",
yellow:"BANANA",
pink:"MOMO”
}
console.log(fruits_color.red);
console.log(fruits_color['red']);
オブジェクト：プロパティ

// オブジェクト
var fruits_color = new Object();
fruits_color = {
red:"ICHIGO",
yellow:"BANANA",
change_fruits:function(){
// コード
console.log(this.red);
}
}
オブジェクト：メソッド

DOM
ブラウザそのものでWindow.document
オブジェクトで、取得、操作が可能。
console.log(window);
console.log(window.screenX)

//Document getElementByID document
var hoge = document.getElementById('title1')
console.log(hoge );
console.log(hoge.textContent);
DOM：取得

DOM：作成
// タグ生成
var tag = document.createElement('h2');
// id生成
tag.setAttribute(“id”,“id_name”);
// テキスト追加
tag.innerText = 'テキスト';

DOM：dodumentに追加
document.body.appendChild(tag);
var el1 = document.getElementById("element1");
el1.appendChild(tag);

ありがとうございました
ID：chiyo.abe
阿部正幸
cpi-line

javascriptの基礎

More Related Content

What's hot (20)

Viewers also liked (20)

More from Masayuki Abe (15)

javascriptの基礎