JavaScriptに関して過去問（H24春IP問67不正解選択肢）では、「ブラウザで動作する処理内容を記述するスクリプト言語である」と述べられています。
JavaScriptはJavaとついていますが、Javaとは別物です。
共通点があるとか、派生したとかでも？
はい。全くの別物です。JavaとJavaScriptはメロンとメロンパンくらい違うとよくいわれます。メロンを注文してメロンパンが出てきたら、「それは違う」といいたくなりますよね。
また、ECMASctiptは、ブラウザなどの環境によって仕様が異なるJavaScriptの標準仕様を定めたもので、標準化団体Ecma Internationalが標準化を進めています。
参考ですが、情報セキュリティスペシャリスト試験では、試験問題に出題するプログラム言語は、C++、Java、ECMAScriptの3言語のいずれかです。
https://www.jitec.ipa.go.jp/1_00topic/topic_20111026_sc_yougo.html
簡単な例を挙げます。
これにより、以下のアラートを表示します。
ブラウザ上に「こんにちは」と表示する場合は以下です。
■H22春AP午前
問7 HTMLだけでは実現できず, JavaScriptを使うことによってブラウザ側で実現可能になることはどれか。
ア アプレットの使用
イ 画像の表示
ウ サーバヘのデータの送信
エ 入力データの検査
正解：エ
■書き方の基本
IPAの資料に例があります。
https://www.ipa.go.jp/files/000024729.pdf
JavaScriptですが、昔と違って今は<body>の下の方に書きます。上記でも</body>の直前に書いています。
サンプルを例に解説
・<script>～</script>で囲う
・末尾は;をつける
その他
・//はコメント
■その他補足
①変数の定義
var a = 1
※varはVariant型のことで、整数INT型や文字String型などを意識しなくていいのです。
②関数の定義
function()
③getElementById
上記のIPAの資料において以下の部分
document.getElementById('p1')
このドキュメントのid=p1のデータを取得する
■JavaScriptとHTML
JavaScriptですが、いろいろなことができることは間違いありません。ただ、実際に使うのはWEB（HTML）での操作が多いので、そのあたりの基本的なところをメモ
１．まずは書いてみよう
(1)HTMLのページにJavaScriptで文字を書く。タグも書ける
<html>
<head>
<title>JavaScriptサンプル</title>
</head>
<body>
<script>
document.write("JavaScriptでHTMLの本文を書く。<br>もちろん、タグも使えます");
</script>
<br>通常のHTMLの記述はこれ
</body>
</html>
(2)ポップアップ表示
<html>
<head>
<title>JavaScriptサンプル</title>
</head>
<body>
OKを押すと、この文字が表示されるはずです。
<script>
alert("Hello");
</script>
</body>
</html>
(3)DOMの理解があったうえで、ページに表示
DOM(Document Object Model)についての理解があった方がいいだろう。階層構造を持つことがポイントの1つである。
https://eng-entrance.com/what-is-dom
①Bodyを書き換え
document.bodyに対してプロパティがinnerTextで文字を指定します。すると、bodyそのものが書き換えられるので、それ以外の文字も上書きされます。
<html>
<head>
<title>JavaScriptサンプル</title>
</head>
<body>
この文字も以下のScriptで書き換えられます。
<script>document.body.innerText = "Hello"; </script>
</body>
</html>
②DOMにおいて、bodyの配下にあるdivやpタグなどを指定して書きかえ
<div id="abc">ここに文字があります</div>
ここは書き換わりません。
<script>
document.getElementById("abc").innerHTML = "書き換えます";
</script>
②-2 瞬間的に書き換わるので、setTimeout関数を使って、3秒（3000ミリ秒）後に書き換えます。
<div id="abc">ここに文字があります</div>
ここは書き換わりません。
<script>
function kakikae(){
document.getElementById("abc").innerHTML = "書き換えます";
}
setTimeout("kakikae()", 3000);
</script>
(7)いろいろな情報を取得してをAlertで表示
①Cookieの取得
<script>alert(document.cookie)</script>
※まず、Cookieを付与されていることが前提
②URL
alert(window.location.href);
③URLのハッシュ文字（#）以降の文字を取得する
alert(window.location.hash);
→URLの後ろに、#と文字を付けてみよう。たとえば、http://sc.seeeko.com#123456
#に関して補足します。まず、URLに記載されるハッシュ文字（#）は、フラグメント識別子と言われます。以下、私のサイトのSSLのページを見て下さい。
http://sc.seeeko.com/archives/3824933.html#3
URLのうしろに#3とあります。このページには以下のように目次の設定が埋め込んで、#を変えると、その部分に飛ぶようになっています。存在しない値をいれると、先頭が表示されます。
<h2 id="1">
<h2 id="2">
<h2 id="3">
#以降はWebサーバには送られず、この仕組みを利用したDOMベースのXSSがあります。
(5)違うページへ遷移
以下のいずれかの方法で遷移
<script>window.location='http://nw.seeeko.com';</script>
<script>window.location.href='http://nw.seeeko.com';</script>
２．変数を使ってみよう
変数の宣言はvar
(1)単純な変数の足し算
<html>
<head>
<title>JavaScriptサンプル</title>
</head>
<body>
<script>
var x = 1;
var y = 2;
sum=x+y;
document.write("x+yの合計は" + sum);
</script>
</body>
</html>
(2)ボタンを作って、押したら表示する
以下で動くが、<script>がないので、JavaScriptっぽくない。
<html>
<head>
<title>JavaScriptサンプル</title>
</head>
<body>
ボタンをクリック<br>
<input type="button" value="click" onclick='alert("Hello")'>
</body>
</html>
■■■javascriptを外部ファイルに書く
■右クリックの禁止
JavaScriptはJavaとついていますが、Javaとは別物です。
共通点があるとか、派生したとかでも？
はい。全くの別物です。JavaとJavaScriptはメロンとメロンパンくらい違うとよくいわれます。メロンを注文してメロンパンが出てきたら、「それは違う」といいたくなりますよね。
また、ECMASctiptは、ブラウザなどの環境によって仕様が異なるJavaScriptの標準仕様を定めたもので、標準化団体Ecma Internationalが標準化を進めています。
参考ですが、情報セキュリティスペシャリスト試験では、試験問題に出題するプログラム言語は、C++、Java、ECMAScriptの3言語のいずれかです。
https://www.jitec.ipa.go.jp/1_00topic/topic_20111026_sc_yougo.html
簡単な例を挙げます。
| <html lang = "ja"> <body> <script> alert('ご注意ください'); </script> </body> </html> |
ブラウザ上に「こんにちは」と表示する場合は以下です。
| <html> <body> <script> document.write("こんにちは"); </script> </body> </html> |
■H22春AP午前
問7 HTMLだけでは実現できず, JavaScriptを使うことによってブラウザ側で実現可能になることはどれか。
ア アプレットの使用
イ 画像の表示
ウ サーバヘのデータの送信
エ 入力データの検査
正解：エ
■書き方の基本
IPAの資料に例があります。
https://www.ipa.go.jp/files/000024729.pdf
| <html> <head> //文字化けしたのでmetaの記述は省略 <title>サンプルページ</title> </head> <body> <p id="p1">このページはサンプルです。</p> <script type="text/javascript"> setTimeout(function(){ var p1_textnode = document.getElementById('p1').firstChild; p1_textnode.data = 'このページはサンプルでした。'; },5000 ); </script> </body> </html> |
JavaScriptですが、昔と違って今は<body>の下の方に書きます。上記でも</body>の直前に書いています。
サンプルを例に解説
・<script>～</script>で囲う
・末尾は;をつける
その他
・//はコメント
■その他補足
①変数の定義
var a = 1
※varはVariant型のことで、整数INT型や文字String型などを意識しなくていいのです。
②関数の定義
function()
③getElementById
上記のIPAの資料において以下の部分
document.getElementById('p1')
このドキュメントのid=p1のデータを取得する
■JavaScriptとHTML
JavaScriptですが、いろいろなことができることは間違いありません。ただ、実際に使うのはWEB（HTML）での操作が多いので、そのあたりの基本的なところをメモ
１．まずは書いてみよう
(1)HTMLのページにJavaScriptで文字を書く。タグも書ける
<html>
<head>
<title>JavaScriptサンプル</title>
</head>
<body>
<script>
document.write("JavaScriptでHTMLの本文を書く。<br>もちろん、タグも使えます");
</script>
<br>通常のHTMLの記述はこれ
</body>
</html>
(2)ポップアップ表示
<html>
<head>
<title>JavaScriptサンプル</title>
</head>
<body>
OKを押すと、この文字が表示されるはずです。
<script>
alert("Hello");
</script>
</body>
</html>
(3)DOMの理解があったうえで、ページに表示
DOM(Document Object Model)についての理解があった方がいいだろう。階層構造を持つことがポイントの1つである。
https://eng-entrance.com/what-is-dom
①Bodyを書き換え
document.bodyに対してプロパティがinnerTextで文字を指定します。すると、bodyそのものが書き換えられるので、それ以外の文字も上書きされます。
<html>
<head>
<title>JavaScriptサンプル</title>
</head>
<body>
この文字も以下のScriptで書き換えられます。
<script>document.body.innerText = "Hello"; </script>
</body>
</html>
②DOMにおいて、bodyの配下にあるdivやpタグなどを指定して書きかえ
<div id="abc">ここに文字があります</div>
ここは書き換わりません。
<script>
document.getElementById("abc").innerHTML = "書き換えます";
</script>
②-2 瞬間的に書き換わるので、setTimeout関数を使って、3秒（3000ミリ秒）後に書き換えます。
<div id="abc">ここに文字があります</div>
ここは書き換わりません。
<script>
function kakikae(){
document.getElementById("abc").innerHTML = "書き換えます";
}
setTimeout("kakikae()", 3000);
</script>
(7)いろいろな情報を取得してをAlertで表示
①Cookieの取得
<script>alert(document.cookie)</script>
※まず、Cookieを付与されていることが前提
②URL
alert(window.location.href);
③URLのハッシュ文字（#）以降の文字を取得する
alert(window.location.hash);
→URLの後ろに、#と文字を付けてみよう。たとえば、http://sc.seeeko.com#123456
#に関して補足します。まず、URLに記載されるハッシュ文字（#）は、フラグメント識別子と言われます。以下、私のサイトのSSLのページを見て下さい。
http://sc.seeeko.com/archives/3824933.html#3
URLのうしろに#3とあります。このページには以下のように目次の設定が埋め込んで、#を変えると、その部分に飛ぶようになっています。存在しない値をいれると、先頭が表示されます。
<h2 id="1">
<h2 id="2">
<h2 id="3">
#以降はWebサーバには送られず、この仕組みを利用したDOMベースのXSSがあります。
(5)違うページへ遷移
以下のいずれかの方法で遷移
<script>window.location='http://nw.seeeko.com';</script>
<script>window.location.href='http://nw.seeeko.com';</script>
２．変数を使ってみよう
変数の宣言はvar
(1)単純な変数の足し算
<html>
<head>
<title>JavaScriptサンプル</title>
</head>
<body>
<script>
var x = 1;
var y = 2;
sum=x+y;
document.write("x+yの合計は" + sum);
</script>
</body>
</html>
(2)ボタンを作って、押したら表示する
以下で動くが、<script>がないので、JavaScriptっぽくない。
<html>
<head>
<title>JavaScriptサンプル</title>
</head>
<body>
ボタンをクリック<br>
<input type="button" value="click" onclick='alert("Hello")'>
</body>
</html>
■■■javascriptを外部ファイルに書く
### 1.ベースとなるJavascript
Javascriptを書いてみる。
a.html
<html>
<script>
var msg = "Hello";
alert(msg);
</script>
こんにちは
</html>
※<script>のところは、以下でも同じ
<script type="text/javascript" language="JavaScript" src="123.js"></script>
### 2.jsファイルをインクルード
a.html
<html>
<script type="text/javascript" language="JavaScript" src="123.js"></script>
こんにちは
</html>
123.js
var msg = "Hello";
alert(msg);
### 3.相対パスでjsファイルをインクルード
a.html
<html>
<script type="text/javascript" language="JavaScript" src="./js/123.js"></script>
こんにちは
</html>
### 4.相対パスでjsファ
jsの中身が他人から見えないようにする。
パスを../../123.jsとすると、うまくいかなかった。
→Javascriptはサーバではなくブラウザが読みに行くので、外部からアクセスできないと動作しない。
→Javascriptはサーバではなくブラウザが読みに行くので、外部からアクセスできないと動作しない。
■右クリックの禁止
<body onContextmenu="window.alert('右クリックはできません');return false">
こんにちは
</body>
といっても、Ctrl＋Uでソースファイルを見たり、F12の開発者ツールでソースを見たり、JavaScriptを禁止すれば見ることができる。
