Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[JavaScript]JavaScript①記述、読み込み、変数(4/16)

JavaScript

記述方法

HTML内部に記述
  • HTML文書内に実行結果を表示したいとき
<body>
<script>
  //コードを記述
</script>
</body>
</html>
外部から読み込む
<head>
<script src="sample.js"></script>
</head>


属性に記述

開発における注意

  • JavaScriptは無効化できる
    • 無効の場合を視野に入れる
    • 動的メニューのときメニューが表示できないときがある
<script>
//メニューを生成するJavaScriptのコード
</script>
<noscript>
代替メニューを表示するHTMLのコード
</noscript>
  • サーバ側でも入力漏れがあるかチェックできる仕組みをつくる
    • サーバ側のPHPでエラーを検知する

変数

  • 数値や文字を格納する箱のようなもの
  • いくつでも使える
  • JavaScriptの予約語は使えない
//予約語
break, case, catch, continue, default, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with

記述の基本

  1. 初期値
  2. 演算
  3. 出力
<script>
//初期値
var msg = '答えは';
var x = 10, y = 20;
var ans;
//演算
ans = x+y; 
//出力
console.log(msg+ans);
</script>
数値リテラル

　変数とは逆に、数値そのものを「数値リテラル」という。

  • リテラル▶プログラムのソースコードで使用される、数値や文字列を直接記述した定数のこと
  • 変更されないことを前提とした値
文字列リテラルと数値リテラル
<script>
//case 1
//数値リテラルを変数に代入
var x = 2;
var y = 2;
//数値として表示される
document.write(x+y);
//case 2
//数値リテラルを変数に代入
var a = 2;
//文字列リテラルを変数に代入
var b =  '2';
//文字列として表示される
console.log(a+b);
</script>

型とtypeof演算子

　typeof演算子…型を調べることができる。 * 数値型（number） * 論理型（boolean） * object型（オブジェクトの参照先を表す） * null型（値がないのを表す） * 未定義型(undefined)

<script>
//数値型
var x = 1;
var y = 2;
a = typeof(1);
document.write(a +'<br>');
//論理型
var x = true;
var y = false;
b = typeof(true);
document.write(b +'<br>');
//object「オブジェクト型」
var x = null;
c = typeof(window);
document.write(c +'<br>');
//object「null型」
d = typeof(null);
document.write(d +'<br>');
//未定義型
e = typeof(undefined);
document.write(e +'<br>');
//文字列型
var x = 'Hello'; 
f = typeof( 'Hello World! ');
document.write(f +'<br>');
</script>
delete演算子

変数を削除し、未使用状態に戻す。成功するとtrue,失敗するとfalseを返す。

<script>
a= 1;
delete a;
console.log(a);
</script>

d.hatena.ne.jp