1 of 13

HTML & JavaScript

With Tone.js Web Audio Framework

​

  • Apps Script

�

​

  • Apps Script

�

2 of 13

HTML

  • ブラウザはサーバーに URL を送る

​

​

  • サーバーは、HTMLファイルを送り返す

​

​

<html>

<head></head>

<body>

text

</body>

</html>

Get http://domain.com/index.html

3 of 13

概要ーHTML と JavaScript

HTML

​

CSS

スタイル

みため

​

JavaScript

プログラム

​

4 of 13

HTML

<html>

<head>

<style> css </style>

<script>外部プログラム</script>

</head>

<body>

​

本文

​

<script>

// 自分のJavaScriptプログラム

</script>

</body>

</html>

5 of 13

HTML

<h1>タイトル</h1>

<img src="ファイル名">

<button onclick="プログラム">ボタン</button>

<script>プログラム</script>

6 of 13

テキストのコピーとペースト

  • ぜんぶコピー

​

  • [ctrl] を押しながら・・・
  • [a] ぜんぶ せんたく
  • [c] コピー

​

  • ぜんぶペースト（はりつけ）

​

  • [ctrl] を押しながら・・・
  • [a] ぜんぶ せんたく
  • [v] ペースト

7 of 13

カーソルいどう と コピー＆ペースト

  • [ctrl] を押しながら・・・
  • [a] ぜんぶ せんたく
  • [x] カット
  • [c] コピー
  • [v] ペースト
  • [z] とりけし

​

​

​

  • ↑ ↓ ←　→　上下左右

​

  • [Shift]を押しながら・・・
  • ↑ ↓　1行せんたく
  • ←　→　1文字せんたく

8 of 13

JavaScript コメント と ログ

//コメント

​

// ログ 「はじまり！」を表示

console.log("はじまり!");

​

// ; （セミコロン）は、文のおわり。なくてもよい。

9 of 13

JavaScript 変数

var abc //abc という変数（へんすう）をつくる

​

abc = 1234567　//変数 abc に 1234567 を入れる

​

var abc = 1234567　//2行をまとめて書いてもOK

10 of 13

JavaScript 関数

//abc という関数（かんすう）をつくる

function abc () { プログラム }

​

//abc 関数をよびだす

abc()

​

11 of 13

JavaScript リテラル

12345.67　　　//数字

​

"あいうえお"　　　//もじれつ

​

["Ａ","Ｂ","Ｃ"]　//配列（はいれつ）

12 of 13

JavaScript くりかえし

// i を1ずつふやしながら、

//プログラムを7回くりかえす

for (i = 0; i < 7; i++) { プログラム }

​

i++ // iを１ふやす

i-- // iを１へらす

13 of 13

JavaScript if文

// aが10より 小さいなら プログラムを実行

if (a < 10) {プログラム}

​

a < 10 // aが10より 小さいなら

a > 10 // aが10より 大きいなら

a == 10 // aが10と 同じなら

a != 10 // aが10と ちがうなら

​