課題研究 javascriptの基礎理論と活用方法
TRANSCRIPT
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
つなぐる株式会社代表取締役 井口 敬之
課題研究【 JavaScript の基礎理論と活用方法】
2015.06.15
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
プログラムとは
コンピュータに対する命令(処理)を記述したもの。wiki より引用
• 順番に処理をする。(順次)• 繰り返し処理をする。(反復)• ある条件の時に処理をする。(分岐)
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
プログラミング言語
プログラムを書くために使われる言葉
• Java• C#• VB(Visual Basic)• C• C++• Ruby• Perl• JavaScript
さぁ、やれ!はい!
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
Java VS JavaScript
項目 Java JavaScript
実行形式 コンパイラ インタプリタ
型 チェックが厳しい 自由
用途 主にサーバ側 主にクライアント側
インターネットにアクセス
ページをダウンロードクライアント サーバ
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
JavaScript
実行環境が主にウェブブラウザに実装され、動的なウェブサイト構築や、リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられる。
wiki より引用
var username = prompt(" 名前を入力して下さい ", ""); // 入力を要求する if ( username != "" ) { // 入力があった場合 document.write(username, " さん、ようこそ! "); // 画面に出力}else { // 入力がなかった場合 document.write(" 名無しさん、ようこそ! "); // 画面に出力}
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
それでは実際に書いてみましょう!
1. デスクトップに「 exercise 」フォルダを作成2. その中に「 helloworld 」フォルダを作成
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
Hello World
<html> <body>
<p id="text"> この部分のテキストを書き換えたい! </p>
<script type="text/javascript"> var text = document.getElementById("text"); text.innerHTML = "hello world"; </script>
</body></html>
1. 「 index.html 」ファイルを作成2. 以下の内容を記述
JavaScript という言語で書かれたプログラムの集まりを「スクリプト」という。
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
JavaScript の基本的なルール
大文字小文字は区別する
<html> <body> <script type="text/javascript">
var num = 10;document.write("<p>" + num + "</p>");document.write("<p>" + Num + "</p>");
</script> </body></html>
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
JavaScript の基本的なルール
空白と改行は無視される
var name = "gose"; var name ="gose";var name = "gose";var name ="gose";
var name = "gose";
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
JavaScript の基本的なルール
「 // 」または「 /**/ 」はコメントとして扱われる
コメントとは、スクリプトの中に書かれるがプログラムとして実行されない文書のこと。
var name = " 御所実業 ";name = name + " 高校 "; // 高校の名前を生成する
/* * 商品の消費税を * 計算する */var product = 100;var price = 0;price = product * (100 + 8) / 100; /* 税率は 8% とする */
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
JavaScript のデータ型
文字列文字を扱うとき
数値数字を扱うとき
論理値「 true 」、「 false 」を扱うとき
null「値が存在しない」を扱うとき
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
JavaScript の変数
変数名の前に、「 var 」をつけること
var name = " 御所実業 ";name = name + " 高校 "; // 高校の名前を生成する
/* * 商品の消費税を * 計算する */var product = 100;var price = 0;price = product * (100 + 8) / 100; /* 税率は 8% とする */
変数とは、扱うデータを一定期間記憶して、必要なときに利用できるようにするために、データに固有の名前を付けたもの。
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
JavaScript の予約語
既に仕様で使うと決められているキーワード
breakcasecatchcontinuedebuggerdefaultdeletedoelsefinallyforfunctionif
ininstanceofnewreturnswitchthisthrowtrytypeofvarvoidwhilewith
[ 引用 ]https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Reserved_Words
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
JavaScript の演算子
演算に使う記号のこと
演算とは、広い意味で「計算すること」を意味する。例えば、 足し算、引き算、掛け算、割り算。 文字を連結する。
var name = " 御所実業 ";name = name + " 高校 "; // 高校の名前を生成する
/* * 商品の消費税を * 計算する */var product = 100;var price = 0;price = product * (100 + 8) / 100; /* 税率は 8% とする */
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
単一演算子 算術演算子 関係演算子 等価演算子 ビットシフト演算子 バイナリビット演算子 バイナリ理論演算子 三項演算子 代入演算子 カンマ演算子
var name = " 御所実業 ";name = name + " 高校 "; // 高校の名前を生成する
/* * 商品の消費税を * 計算する */var product = 100;var price = 0;price = product * (100 + 8) / 100; /* 税率は 8% とする */
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
JavaScript における演算子の優先順位と結合性
たくさんある演算子を同時に使った場合、優先順位に従って式が評価される。
演算子は、結合性に従って式を評価する。
結合性 演算子
右 ! ++ --
左 * / %
左 + -
左 > >= < <=
左 == != === !==
左 &
左 &&
左 ||
右 =
() 括弧は、演算子ではないが、最優先で評価される
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
JavaScript における演算子の優先順位と結合性
var name = " 御所実業 ";name = name + " 高校 "; // 高校の名前を生成する
/* * 商品の消費税を * 計算する */var product = 100;var price = 0;price = product * (100 + 8) / 100; /* 税率は 8% とする */
結合性 演算子左 * / %
左 + -
右 =
-------------①
---------------------②
①---------②---------------------------------------------- ③
④---------------------------------
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
JavaSctipt が実行する順番(順次)
プログラムの上から順番に処理する
<html> <body>
<p id="text"> この部分のテキストを書き換えたい! </p>
<script type="text/javascript"> var text = document.getElementById("text"); text.innerHTML = "hello world"; </script>
</body></html>
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
JavaSctipt が実行する順番(順次)
プログラムの上から順番に処理する
<html> <body>
<script type="text/javascript"> var text = document.getElementById("text"); text.innerHTML = "hello world"; </script>
<p id="text"> この部分のテキストを書き換えたい! </p> </body></html>
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
JavaSctipt の繰り返し処理(反復) - while 文 -
一定の条件が満たされている間、処理を繰り返す
<html> <body> <p id="text"> この部分のテキストを書き換えたい! </p> <script type="text/javascript"> var text = document.getElementById("text");
var i=0; while(i<10){ text.innerHTML += " 繰り返し "+(i+1)+"回目 <br>"; i=i+1; }
</script> </body></html>
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
JavaSctipt の繰り返し処理(反復) - for 文 -
一定の条件が満たされている間、処理を繰り返す
<html> <body> <p id="text"> この部分のテキストを書き換えたい! </p> <script type="text/javascript"> var text = document.getElementById("text");
for(var i=0; i<10; i++){ text.innerHTML += " 繰り返し "+(i+1)+"回目 <br>"; } </script> </body></html>
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
JavaSctipt の条件分岐(分岐) - if 文 -
ある条件を満たすなら処理 A を、そうでなければ処理 B を行う。
<html> <body> <p id="text"> この部分のテキストを書き換えたい! </p> <script type="text/javascript"> var text = document.getElementById("text");
for(var i=0; i<10; i++){ if(i==0){ text.innerHTML += "<br> 繰り返し "+(i+1)+" 回目 <br>"; }else{ text.innerHTML += " 繰り返し "+(i+1)+" 回目 <br>"; } } </script> </body></html>
つなぐる株式会社
http://www.tunagle.co.jp~ ヒト、モノ、社会をつなぐ ~
知っておくと便利!関数
<html> <body> <p id="text"> この部分のテキストを書き換えたい! </p> <script type="text/javascript"> var text = document.getElementById("text");
for(var i=0; i<10; i++){ if(i==0){ writeText("<br> 繰り返し "+(i+1)+"回目 <br>“); }else{ writeText(" 繰り返し "+(i+1)+"回目 <br>“); } }
/* html を書き換える */ function writeText(html){ var text = document.getElementById("text"); text.innerHTML += html; } </script> </body></html>