▶ JavaScript

短期プログラム学習資料（作成中）

書籍

スラスラわかるJavaScript
これから学ぶJavaScript
高校生からはじめる プログラミング

動画

ドットインストール はじめてのJavaScript
ドットインストール レッスン一覧

学習サイト

Progate ( 学習レッスン一覧表 )

Google Chrome デベロッパーツール

F12キー（Windows）
Command ＋ Option ＋ Iキー（Mac）

プログラム言語

(1) WEB / API

  • Ruby
  • PHP
  • Python
  • Go
  • Java
  • C#

(2) WEBブラウザ

  • JavaScript

(3) デスクトップアプリ

  • C# (Windows)
  • VB.NET (Windows)
  • Swift (Mac)
  • Objective-C (Mac)

(4) スマホアプリ

  • Swift (iOS)
  • Objective-C (iOS)
  • Kotlin (Android)
  • Java (Android)

インタプリタ／コンパイラ

(1) インタープリタ方式

  • Ruby
  • PHP
  • Python
  • JavaScript

(2) コンパイル方式

  • C/C++
  • C#
  • Java
  • Go
  • Swift
  • Objective-C
  • Kotlin

動的型付け言語／静的型付け言語

(1) 動的型付け言語

→ インタープリタ方式言語

(2) 静的型付け言語

→ コンパイル方式言語

JavaScript プログラム

(1) ブラウザ

  • jQuery
  • React (SPA)
  • Vue.js (SPA)

(2) サーバサイド(API)

  • node.js

(3) サーバーレスコンピューティング

  • AWS Lambda
  • Google Cloud Functions

(4) Googleサービス制御

  • Google Apps Script

(5) ChromeやFirefoxの拡張機能(プラグイン)

　

データ型

  • 数値型 int
  • 浮動小数点数型 double / float
  • 文字列型 string

  • ブーリアン型 bool / boolean

  • 配列 array

  • オブジェクト object / class

  • 何も示さない null / nil

変数とオブジェクト

(1) 変数

JavaScriptは変数オブジェクト
もれなく「メソッド（操作・指示プログラム）」と「プロパティ（状態）」が付属

JavaScript のコア・リファレンス
https://www.keicode.com/jsref/

配列

(2) クラスオブジェクト class

変数（クラス変数）、プロパティ（状態）、メソッド（操作・指示プログラム）
new インスタンス化

DOM（Document Object Model）

ブラウザから window、navigator オブジェクトの提供

navigatorオブジェクトと windowオブジェクトの階層構造
http://www.scollabo.com/banban/java/object.html

JavaScriptリファレンス（オブジェクト別）
http://www.htmq.com/js/

プログラムの流れ

(1) 手続き型

上から下へ単純に実行

(2) イベント駆動（イベントドリブン）

プログラムは実行されない
なにかイベントが発生したら、登録されたプログラムが実行される

DOMへのイベント（プログラム）登録

めも

オブジェクトでない変数 概要図

イコール
環境構築
HTML

HTML 雛形

※ HTML、JavaScript のファイルの文字コードは「UTF-8」にすること

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" href="https://cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
/* CSS */
</style>
</head>
<body>
<!-- HTML -->
<script>
/* JS */
</script>
</body>
</html>

JavaScript DOM 操作

jQueryを使わずにJavaScriptだけでDOM操作
https://tech-dig.jp/jqueryを使わずにjavascriptだけでdom操作/

// DOM 取得
var elem = document.getElementById('menu');
var elems = document.getElementsByClassName('class-name');
var elem = document.querySelector('#menu li');

// CSS 操作
elem.style.backgroundColor = "#fff";

// class 操作
elem.classList.add('foo');
elem.classList.remove('bar');
elem.classList.toggle('baz');

// 内容変更
elem.innerHTML = 'hoge';
elem.textContent = 'fuga';

// イベント登録
elem.addEventListener('click', function (e) {
    console.log(e);
});

素材

じゃんけん画像

http://tatenosystem.com/img/sample1/0.png
http://tatenosystem.com/img/sample1/1.png
http://tatenosystem.com/img/sample1/2.png

http://tatenosystem.com/img/sample1/10.png
http://tatenosystem.com/img/sample1/11.png
http://tatenosystem.com/img/sample1/12.png

くま画像

http://tatenosystem.com/img/sample2/0.png
http://tatenosystem.com/img/sample2/1.png
http://tatenosystem.com/img/sample2/10.png
http://tatenosystem.com/img/sample2/11.png

etc

Math.random() // ランダム
Math.floor() // 切り捨て

str.toUpperCase()

dateObj = new Date();
dateObj.getFullYear();