IT関係 – ページ 95

データ型

文字型

リテラル

文字列のリテラルを表すには、対になったダブルクォート(“)かシングルクォート(‘)で囲む。

x = "abcd";
y = 'efgh';

1 2	x = "abcd"; y = 'efgh';

エスケープ文字

\n	NewLine(改行文字)
\f	フォームフィード
\b	バックスペース
\r	キャリッジリターン
\t	タブ
\’/\”	シングルクォート／ダブルクォート
\\	バックスラッシュ
\0nn/\0onn	8進数
\xnn	16進数nnによる文字コード指定(ex. ‘A’=’\x41’)
\unnnn	Unicode文字(ex. ‘あ’=’\u3042’)

数値型

JavaScriptでは、内部的にすべての数値が浮動小数点として扱われる。

整数値の表現

10進数	数字の列で指定。先頭の数字は0(ゼロ)以外。
8進数	先頭が0(ゼロ)である数字の列で指定。
16進数	先頭”0x”に続く0～9, a～fの列で指定、

8進数、16進数では、負の値を表すことはできるが、小数部分はなく、浮動小数点表記は使用できない。

以下の例は、10進、8進、16進の各数値の演算結果をconsole.logに出力する。

function test_var1() {
  var num_dec = 100;
  var num_oct = 0100;
  var num_hex = 0x100;

  console.log( "Numeric Test" );
  console.log( num_dec );
  console.log( num_oct );
  console.log( num_hex );

  console.log( num_dec + num_oct + num_hex);
}

function test_var1() {

var num_dec = 100;

var num_oct = 0100;

var num_hex = 0x100;

console.log( "Numeric Test" );

console.log( num_dec );

console.log( num_oct );

console.log( num_hex );

console.log( num_dec + num_oct + num_hex);

}

浮動小数点数の表現

以下の4つの表現は全て同じ値を表す。

0.0001
.0001
1e-4
1.0e-4

論理型(Boolean)

trueとfalseの二値。なお、比較式において以下の評価はすべてfalseとして解釈される。

0
null
undefined
空の文字列

特殊な値

Null	Null型にはnullという値が1つだけある。typeof演算子ではnull値はnull型ではなくObject型として扱われる。
undefined	未定義の変数を参照した場合に返される。
NaN	不適切な値で、以下の場合に返される。未定義の変数を含む数値演算文字列を含む数値演算ゼロをゼロで除算した場合
Infinity	正の無限大。計算結果が正の数値でオーバーフローした場合や、通常の正の数値をゼロで割った場合に返される。
-Infinity	負の無限大。計算結果が負の数値でオーバーフローした場合や、通常の負の数値をゼロで割った場合に返される。

演算

代入演算子

代入演算子は、文字列／数値のリテラル／変数を変数に割り当てる。

str = "abc";
val = 123;
newStr = str;
newVal = val;

str = "abc";

val = 123;

newStr = str;

newVal = val;

文字列演算子

結合演算子

“+”演算子は2つの文字列を結合。

a = "abc" + 'def';

1	a = "abc" + 'def';

数値演算子

算術演算子

Javaと同じ算術演算子+、-、*、/、%(剰余)、インクリメント／デクリメント演算子++、–がある。

比較演算子

Javaと同じ演算子==、!=、<、>、<=、>=がある。

論理演算子

Javaと同じ演算子、&&、||、!(否定)がある。

複合代入

演算結果を代入する場合、複合代入演算子の短縮表記も可能。

x += y
x <<= y

1 2	x += y x <<= y

条件演算子

==、!=	等しい／等しくない
===、!==	同一である／同一でない

たとえば文字列と数値を比較するとき、==を用いると文字列がNumber型に変換され比較される。

一方===では型変換は行われない状態で、厳密にその内容が等しいかどうかが比較される。

typeof演算子

typeof <em>引数</em>

1	typeof <em>引数</em>

引数の型に応じて、以下の文字列が返される。

数値	number
文字列	string
オブジェクト	object
配列	object
関数	function
論理型	boolean
null	number
NaN	number
undefined	undefined

文字列と数値が混在した演算

以下のルールに従う。

数値同士の演算の結果は数値
二項のうち少なくとも一つが文字列の場合、数値であっても文字列と評価し、結果は文字列
先頭から演算を進め、数値が続く限りは数値演算を続け、一旦文字列演算になると以降は全て文字列演算として評価。

1 + 2	3
“1” + 2	“12”
1 + “2”	“12”
1 + 2 + “3”	“33”
1 + “2” + 3	“123”
“1” + 2 + 3	“123”

記述位置と記述方法

HTMLソース内に直接記述
HTMLソース内に関数を直接記述
HTMLからJavaScriptの外部ファイルを読み込み

HTML内への直接記述

HTMLソースに以下のように記述。

<script>
document.write("<p>Javascriptテスト<br>");
document.write("body内直接記述の例</p>");
</script>

document.write("<p>Javascriptテスト<br>");

document.write("body内直接記述の例</p>");

</script>

正確には<script type=”text/javascript”>だが、HTML5ではscript要素のtype属性はデフォルトでJavaScriptなので省略可能。

関数の直接記述

head要素内に以下を記述し、

<script>
<!--
  function test0() {
    document.write("head要素内でのJavaScript実行例");
  }
//-->
</script>

<!--

function test0() {

document.write("head要素内でのJavaScript実行例");

}

//-->

</script>

body要素で以下のように記述することもできる。

<script>
<!--
  test0();
//-->
</script>

<!--

test0();

//-->

</script>

外部ファイルの読み込み

例えば以下の内容のファイルを”test1.js”として準備。

保存する場所は、HTMLファイルと同じディレクトリにある”js”ディレクトリの下とする。

function test1() {
  alert("JavaScriptの外部ファイルテスト");
}

function test1() {

alert("JavaScriptの外部ファイルテスト");

}

headセクションで以下のようにスクリプトファイルを読み込む。

<script src="./js/test1.js"></script>

1	<script src="./js/test1.js"></script>

そして、たとえば以下のように関数を呼び出して実行。

<input type="button" value="JavaScript外部ファイル実行" onclick="test1()">

1	<input type="button" value="JavaScript外部ファイル実行" onclick="test1()">

覚え書き

VistaとSugarSyncでの問題

Windows Vista上のSugerSyncと同期したフォルダ内でこれを実行したところ、alert内の文字が文字化けしてしまった。HTMLソースがUTF-8で、scriptタグの属性に明示的に”charset=UTF-8″を記述しても解消されない。また、スクリプトソースの<!–などのコメントを除き、出力文字を全て半角としても現象は変わらない（そもそもalertダイアログの冒頭に表示される日本語が文字化けしている可能性もある）。

これに対して、デスクトップ上に新たなフォルダをつくり、関係するHTMLファイルとCSSファイルを移動させて実行したところ、以下のような挙動。本現象が発生したVista＋SugarSyncの不安定性に関しては、今しばらく調査が必要。

デスクトップ上に”dev”フォルダを作成し、SugarSyncの動機フォルダから必要なファイルとフォルダを移動
devフォルダ内のhtmlファイルを直接エディタで編集可能
しばらく編集、保存、ブラウザ表示を繰り返していると、htmlファイルにロックがかかる
devフォルダの名前を変更しようとしたところ、ロックがかかる
表示中のブラウザを閉じるとロックがかからんくなったので、フォルダ名をdev→dvに変更
その後ロックがかからなくなる

2015-12-21.

TauStation

カテゴリー: IT関係

JavaScript – データ型・演算

データ型

文字型

リテラル

エスケープ文字

数値型

整数値の表現

浮動小数点数の表現

論理型(Boolean)

特殊な値

演算

代入演算子

文字列演算子

結合演算子

数値演算子

算術演算子

比較演算子

論理演算子

複合代入

条件演算子

typeof演算子

文字列と数値が混在した演算

JavaScript – 記述位置

記述位置と記述方法

HTML内への直接記述

関数の直接記述

外部ファイルの読み込み

覚え書き

VistaとSugarSyncでの問題