JavaScript入門

概要

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文

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);
}

実行結果

0
1
2
3
4

continue

  • 処理をスキップする
for(var i = 0; i < 10; i++){
  if(i === 5){
    continue;
  }
  console.log(i);
}

実行結果

0
1
2
3
4
6
7
8
9

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

alert

alert("hello");
スクリーンショット 2016-05-07 10.28.58.png

confirm

  • OKでtrue、キャンセルでfalseが返り値としてセットされる
  • 使用例としては削除処理などの条件分岐での使用など
var answer = confirm("are you ok?");
console.log(answer);
スクリーンショット 2016-05-07 10.23.52.png

prompt

  • 入力した値を返り値としてセットされる
  • 第二引数にデフォルトの返り値をセットできる
  • 第二引数がない場合に何も入力しないとnullが返り値としてセットされる
var name = prompt("お名前は？", "名無しさん");
consolo.log(name);
スクリーンショット 2016-05-07 10.39.37.png

関数

基本構文

返り値無し

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オブジェクト

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 JSON編集（記事）
,