課題研究 JavaScriptの基礎理論と活用方法

http://www.tunagle.co.jp～ヒト、モノ、社会をつなぐ～
つなぐる株式会社
代表取締役井口敬之
課題研究【JavaScriptの基礎理論と活用方法】
２０１５．０６．１５

プログラムとは
コンピュータに対する命令（処理）を記述したもの。
wikiより引用
• 順番に処理をする。（順次）
• 繰り返し処理をする。（反復）
• ある条件の時に処理をする。（分岐）

プログラミング言語
 プログラムを書くために使われる言葉
• Java
• C#
• VB(Visual Basic)
• C
• C++
• Ruby
• Perl
• JavaScript
さぁ、やれ！
はい！

JavaとJavaScriptって違うの？
これぐらい違います！

JavaとJavaScriptって違うの？
これぐらい違います！
インドインドネシア

Java VS JavaScript
項目 Java JavaScript
実行形式コンパイラインタプリタ
型チェックが厳しい自由
用途主にサーバ側主にクライアント側
インターネットにアクセス
ページをダウンロード
クライアントサーバ

JavaScript
実行環境が主にウェブブラウザに実装され、動的な
ウェブサイト構築や、リッチインターネットアプリ
ケーションなど高度なユーザインタフェースの開発
に用いられる。
wikiより引用
var username = prompt("名前を入力して下さい", ""); // 入力を要求する
if ( username != "" ) { // 入力があった場合
document.write(username, "さん、ようこそ！"); // 画面に出力
}
else { // 入力がなかった場合
document.write("名無しさん、ようこそ！"); // 画面に出力
}

それでは実際に書いてみましょう！
1. デスクトップに「exercise」フォルダを作成
2. その中に「helloworld」フォルダを作成

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という言語で書かれたプログラムの集ま
りを「スクリプト」という。

JavaScriptの基本的なルール
 大文字小文字は区別する
<html>
<body>
var num = 10;
document.write("<p>" + num + "</p>");
document.write("<p>" + Num + "</p>");
</script>
</body>
</html>

 空白と改行は無視される
var name = "gose";
var name ="gose";
var name = "gose";
var name =
"gose";
var name = "gose";

 最後にセミコロンを付ける
var age = 10;

 「//」または「/**/」はコメントとして扱われる
コメントとは、スクリプトの中に書かれるがプログラムとして実行されない
文書のこと。
var name = "御所実業";
name = name + "高校"; // 高校の名前を生成する
/*
* 商品の消費税を
* 計算する
*/
var product = 100;
var price = 0;
price = product * (100 + 8) / 100; /* 税率は8%とする */

JavaScriptのデータ型
文字列
文字を扱うとき
数値
数字を扱うとき
論理値
「true」、「false」を扱うとき
null
「値が存在しない」を扱うとき

JavaScriptの変数
 変数名の前に、「var」をつけること
/*
* 計算する
*/
var product = 100;
var price = 0;
変数とは、扱うデータを一定期間記憶して、必要なときに利用できるように
するために、データに固有の名前を付けたもの。

JavaScriptの予約語
 既に仕様で使うと決められているキーワード
break
case
catch
continue
debugger
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with
[引用]https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Reserved_Words

JavaScriptの演算子
 演算に使う記号のこと
演算とは、広い意味で「計算すること」を意味する。
例えば、
足し算、引き算、掛け算、割り算。
文字を連結する。
/*
* 計算する
*/
var product = 100;
var price = 0;

 単一演算子
 算術演算子
 関係演算子
 等価演算子
 ビットシフト演算子
 バイナリビット演算子
 バイナリ理論演算子
 三項演算子
 代入演算子
 カンマ演算子
/*
* 計算する
*/
var product = 100;
var price = 0;

JavaScriptにおける演算子の優先順位と結合性
 たくさんある演算子を同時に使った場合、優先順
位に従って式が評価される。
 演算子は、結合性に従って式を評価する。
結合性演算子
右 ! ++ --
左 * / %
左 + -
左 > >= < <=
左 == != === !==
左 &
左 &&
左 ||
右 =
()括弧は、演算子ではないが、最優先で評価される

JavaScriptにおける演算子の優先順位と結合性
/*
* 計算する
*/
var product = 100;
var price = 0;
結合性演算子
左 * / %
左 + -
右 =
-------------
①
---------------------
②
①---------
②--------------------
-------------------------- ③
④---------------------------------

JavaSctiptが実行する順番（順次）
 プログラムの上から順番に処理する
<html>
<body>
</script>
</body>
</html>

JavaSctiptの繰り返し処理（反復） - while文 -
 一定の条件が満たされている間、処理を繰り返す
<html>
<body>
var i=0;
while(i<10){
text.innerHTML += "繰り返し"+(i+1)+"回目<br>";
i=i+1;
}
</script>
</body>
</html>

JavaSctiptの繰り返し処理（反復）- for文 -
 一定の条件が満たされている間、処理を繰り返す
<html>
<body>
for(var i=0; i<10; i++){
}
</script>
</body>
</html>

JavaSctiptの条件分岐（分岐） - if文 -
 ある条件を満たすなら処理Aを、そうでなければ処
理Bを行う。
<html>
<body>
for(var i=0; i<10; i++){
if(i==0){
text.innerHTML += "<br>繰り返し"+(i+1)+"回目<br>";
}else{
}
}
</script>
</body>
</html>

知っておくと便利！関数
 まとまりのある処理を束ねたもの

知っておくと便利！関数
<html>
<body>
for(var i=0; i<10; i++){
if(i==0){
writeText("<br>繰り返し"+(i+1)+"回目<br>“);
}else{
writeText("繰り返し"+(i+1)+"回目<br>“);
}
}
/* htmlを書き換える */
function writeText(html){
text.innerHTML += html;
}
</script>
</body>
</html>

課題研究 JavaScriptの基礎理論と活用方法

Recommended

Recommended

More Related Content

Similar to 課題研究 JavaScriptの基礎理論と活用方法

Similar to 課題研究 JavaScriptの基礎理論と活用方法 (20)

課題研究 JavaScriptの基礎理論と活用方法

Editor's Notes