概要

Javascriptとは

ブラウザに実装されているスクリプト言語
動きのあるウェブサイトやユーザーインターフェースなどを作るのに使う

リファレンス

MDN javascriptで検索すると出てくる
https://developer.mozilla.org/ja/docs/Web/JavaScript

javascriptの書き方

htmlファイル内への記述

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <script>
    // ここにjavascriptを記述する
    console.log("hello world!");
  </script>
</body>
</html>

外部ファイルへの記述

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <script src="myscript.js"></script>
</body>
</html>

myscript.js

console.log("hello world from myscript.js!");

変数とデータ型

変数

データにつけるラベルのようなもの
varで宣言をする

変数の宣言とデータの格納

var msg = "hellow world!";

データ型

文字列
数値
真偽値
- 文字列：　空文字以外だったらtrue
- 数値：　0かNaN（Not a Number）以外だったらtrue
- true / false
- object：　null以外だったらtrue
- underfined, null => false
オブジェクト
- 配列
- 関数
- 組み込みオブジェクト
undefined 定義されていない
null 何もない

数値を扱う

数値
- 整数値
- 実数値
- マイナス値
演算子
- 四則演算子
- 代入演算子
- 単項演算子

文字列を扱う

文字列
- 特殊文字列
  - 改行　\n
  - タブ \t
演算子
- 文字列結合

条件分岐

if文

var score = 80;
if(score > 60){
  console.log("OK!");
}

if+else文

var score = 80;
if(score > 60){
  console.log("OK!");
}else{
  console.log("OK!");
}

if+else_if文

var score = 80;
if(score > 60){
  console.log("OK!");
}else if(score > 40){
  console.log("soso...");
}else{
  console.log("NG!");
}

比較＆論理演算子

演算子	説明
>	より大きい
<	より小さい
<=	より小さいまたは等しい
>=	より大きいまたは等しい
==	等しい
===	厳密に等しい
!=	等しくない
!==	厳密に等しくない
&&	AND条件
｜｜	OR条件

三項演算子

三項演算子とは

ある条件下においてif-else文を書き換える事ができる構文

if-else文

var a, b, c
if (条件) {
  a = b;
}else{
  a = c;
}

三項演算子での書き換え

a = (条件) ? b : c;

switch文

ある変数が取りうる値が複数あって、それに応じて処理を振り分けたい場合に使うとすっきり書ける構文

var signal = "red";
switch(signal){
  case "red":
    console.log("stop!");
    break;
  case "blue":
  case "green":
    console.log("go!");
    break;
  case "yellow":
    console.log("slow down!");
    break;
  default:
    console.log("wrong signal");
    break;
}

繰り返し処理

while文

var i = 0;
while(i < 10){
  console.log(i);
  i++;
}

do ... while文

do {
  console.log(i);
  i++;
} while(i < 10)

while文との違いは条件判定が先に行われるか後に行われるかの違いのみ

for文

for(var i = 0; i < 10; i++){
  console.log(i);
}

break

処理を抜ける

for(var i = 0; i < 10; i++){
  if(i === 5){
    break;
  }
  console.log(i);
}

実行結果

continue

処理をスキップする

for(var i = 0; i < 10; i++){
  if(i === 5){
    continue;
  }
  console.log(i);
}

実行結果

ユーザへの情報提示、確認要求

alert

alert("hello");

confirm

OKでtrue、キャンセルでfalseが返り値としてセットされる
使用例としては削除処理などの条件分岐での使用など

var answer = confirm("are you ok?");
console.log(answer);

prompt

入力した値を返り値としてセットされる
第二引数にデフォルトの返り値をセットできる
第二引数がない場合に何も入力しないとnullが返り値としてセットされる

var name = prompt("お名前は？", "名無しさん");
consolo.log(name);

関数

基本構文

返り値無し

function 関数名(引数){
  処理;
}

function hello(name){
  console.log("hello" + name);
}

返り値有り

function 関数名(引数){
  return 返り値;
}

function hello(name){
  return "hello" + name;
}
var greet = hello("Tom");
console.log(greet);

ローカル変数

その関数の中でのみ有効な変数

無名関数・匿名関数

関数にもデータ型があるので変数に入れることも可能
その場合、関数名は省略可能
それ自体が式になるので最後のセミコロンをつける

var greet = function(name){
    var msg = "hello" + name;
    return msg;
};

即時関数

定義した関数をすぐに呼び出したい場合に使用する
関数名は省略可能
即時関数を使用することによりローカル変数として安全に変数を扱える
複雑なコードを記述する際には即時関数を使うように心がける

(function(name) {
  console.log("hello" + name);
})("Tom");

タイマー処理

setInterval

前の処理が終わったかどうか考えないので処理が重い場合は次々に新しい処理が実行されてブラウザがクラッシュされる問題がある
第二引数にミリ秒で指定できる

var i = 0;
function show(){
  console.log(i++);
}

setTimeout(function(){
  show();
}, 1000);

setTimeout

前の処理が終わったかどうか考慮するので、繰り返し処理によく使われる

setTimeoutでループ処理を実装

var i = 0;
function show(){
  console.log(i++);
  setTimeout(function(){
    show();
  }, 1000);
}

show();

setTimeoutでのループ処理を止める

var i = 0;
function show(){
  console.log(i++);
  var tid = setTimeout(function(){
    show();
  }, 1000);
  if(i > 3){
    clearTimeout(tid);
  }
}

show();

配列

グループ化されたデータ
色々なデータ型を格納可能

配列

var score = [100, 300, 500];

多次元配列

var score = [
  [1, 2, 3],
  [4, 5, 6]
];

オブジェクト

グループ化されたデータ
名前と値のペアがグループ化されたもの
名前をプロパティと呼ぶ

書き方

var user = {
  email: "example@gmail.com",
  score: 80
};

// アクセスの方法は下記
console.log(user["email"]);
console.log(user.email);

オブジェクトのメソッド

プロパティの値に関数が来た場合、その関数の事をオブジェクトのメソッドと呼ぶ

var user = {
  email: "example@gmail.com",
  score: 80,
  greet: function(name){
    console.log("hello, " + name);
  }
};

user.greet("Tom");

this

メソッドの中で使える特殊なキーワード
メソッド内で使うと、今自分がいるオブジェクトを参照することができる
オブジェクトの中の他のプロパティにもアクセスできる

var user = {
  email: "example@gmail.com",
  score: 80,
  greet: function(name){
    console.log("hello, " + name + "from" + this.email);
  }
};

user.greet("Tom");

組み込みオブジェクト

Javascriptが提供する組み込みオブジェクトの一つ
便利なメソッドやプロパティが使えるようになる
リテラルに対してもオブジェクトのプロパティを使用することができる
よく使われる組み込みオブジェクト
- Stringオブジェクト
  - 文字列に関するオブジェクト
- Arrayオブジェクト
  - 配列に関するオブジェクト
- Mathオブジェクト
  - 数学に関するオブジェクト
- Dateオブジェクト
  - 日付に関するオブジェクト

Stringオブジェクト

リファレンス

文字列オブジェクトに対して

var s = new String("example");
console.log(s.length);
console.log(s.replace("e", "E"));
console.log(s.substr(1, 3));

文字列リテラルに対して

var s = "example";
console.log(s.length);
console.log(s.replace("e", "E"));
console.log(s.substr(1, 3));

実行結果

7
Example
xam

Arrayオブジェクト

リファレンス

配列へ要素を追加する

unshift
- 配列の先頭へ要素を追加
push
- 配列の最後へ要素を追加

配列から要素を削除する

shift
- 配列の先頭の要素を削除する
pop
- 配列の最後の要素を削除する

var a = new Array(100, 300, 200);
// var a = [100, 300, 200];

console.log(a.length);
a.splice(1, 2, 800, 1000);
console.log(a);

実行結果

3
[100, 800, 1000]

Mathオブジェクト

newする必要無し
リファレンス

console.log(Math.PI);
console.log(Math.ceil(5.3));
console.log(Math.floor(5.3);
console.log(Math.round(5.3));
console.log(Math.random());

実行結果

3.141592653589793
6
5
5
0.18007751712454434

Dateオブジェクト

リファレンス

// 現在の日付情報の取得
var d = new Date();
// 年の取得
console.log(d.getFullYear());
// 月の取得（０から始まる）
console.log(d.getMonth());
// Unixタイムの取得
console.log(d.getTime());

実行結果

2016
4
1462602380710

// 日付の指定もできる
var d = new Date(2014, 4, 16, 10, 30, 30);
console.log(d);

実行結果

Fri May 16 2014 10:30:30 GMT+0900 (JST)

DOM

document object model
ブラウザによって命令によって異なる場合がある

windowオブジェクト

ブラウザ自体からJavascriptを扱うためのオブジェクト

// 
console.dir(window);
// windowの高さをJavascriptからアクセスし、取得
console.log(window.outerHeight);
// 今見てるページから別のページへ飛ばす
window.location.href = 'https://google.co.jp';
// 今開いてるページを取得
window.document;

DOMを操作

JavascriptではHTMLでidを付けておくと扱いやすい

基本のHTML

<!DOCTYPE html>
 <html lang="ja">
 <head>
   <meta charset="UTF-8">
   <title>javascript practice</title>
   <style>
    .myStyle {
      font-weight: bold;
      border: 1px solid gray;
    }
   </style>
 </head>
 <body>
   <h1>見出し</h1>
   <p id="msg">Hello!</p>
 </body>
 </html>

javascriptでDOM操作①

 <!DOCTYPE html>
 <html lang="ja">
 <head>
   <meta charset="UTF-8">
   <title>javascript practice</title>
   <style>
    .myStyle {
      font-weight: bold;
      border: 1px solid gray;
    }
   </style>
 </head>
 <body>
   <h1>見出し</h1>
   <p id="msg">Hello!</p>
   <script>
     var e = document.getElementById('msg');
     e.textContent = 'hello!';
     e.style.color = 'red';
     e.className = 'myStyle';
   </script>
 </body>
 </html>

javascriptでDOM操作②

 <!DOCTYPE html>
 <html lang="ja">
 <head>
   <meta charset="UTF-8">
   <title>javascript practice</title>
   <style>
    .myStyle {
      font-weight: bold;
      border: 1px solid gray;
    }
   </style>
 </head>
 <body>
   <h1>見出し</h1>
   <p id="msg">Hello!</p>
   <script>
     var e = document.getElementById('msg');
     e.textContent = 'hello!';
     e.style.color = 'red';
     e.className = 'myStyle';

     var greet = document.createElement('p'),
         text = document.createTextNode('hello world!');
     document.body.appendChild(greet).appendChild(text);
   </script>
 </body>
 </html>

イベントの設定

要件
- あるボタンを押す度に'hello world!'が追加される

javascriptでDOM操作②

 <!DOCTYPE html>
 <html lang="ja">
 <head>
   <meta charset="UTF-8">
   <title>javascript practice</title>
   <style>
    .myStyle {
      font-weight: bold;
      border: 1px solid gray;
    }
   </style>
 </head>
 <body>
   <h1>見出し</h1>
   <p id="msg">Hello!</p>
   <button id="add">Click!</button>
   <script>
     var e = document.getElementById('msg');
     e.textContent = 'hello!';
     e.style.color = 'red';
     e.className = 'myStyle';

     document.getElementById('add').addEventListener('click', function() {
       var greet = document.createElement('p'),
           text = document.createTextNode('hello world!');
       document.body.appendChild(greet).appendChild(text);
     });

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

Javascript入門

概要

Javascriptとは

リファレンス

javascriptの書き方

htmlファイル内への記述

外部ファイルへの記述

変数とデータ型

変数

データ型

数値を扱う

文字列を扱う

条件分岐

if文

比較＆論理演算子

三項演算子

三項演算子とは

switch文

繰り返し処理

while文

do ... while文

for文

break

continue

ユーザへの情報提示、確認要求

alert

confirm

prompt

関数

基本構文

返り値無し

返り値有り

ローカル変数

無名関数・匿名関数

即時関数

タイマー処理

setInterval

setTimeout

配列

オブジェクト

書き方

オブジェクトのメソッド

this

組み込みオブジェクト

Stringオブジェクト

Arrayオブジェクト

配列へ要素を追加する

配列から要素を削除する

Mathオブジェクト

Dateオブジェクト

DOM

windowオブジェクト

DOMを操作

イベントの設定