こんにちは、LinuCエバンジェリストこと、鯨井貴博@opensourcetechです。
Node.jsを使ってみたいので、その練習としてjavascriptの学習メモです。
サンプル javascript
以下を使います。
https://github.com/kujiraitakahiro/html5/blob/master/test_javascript.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Javascript test</title>
</head>
<body>
<H3>Javascript Sample Page</H3>
<button type="clic" onclick="XYZ()">Please click.</button>
<script type="text/javascript">
function XYZ() {
let test = '試してみたよ'; //変数testに格納
let test2 = '実行できたね!<br> 再実行する場合は「F5」しよう!!' //変数test2に格納
console.log(test); //javascriptは実行される
document.write(test2); //HTMLテキストとして、実行結果を表示させる
alert(test); //ポップアップとして出力される
}
</script>
<br>
<noscript>JavaScriptが無効なようです...</noscript>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Javascript test</title>
</head>
<body>
<H3>Javascript Sample Page</H3>
<button type="clic" onclick="XYZ()">Please click.</button>
<script type="text/javascript">
function XYZ() {
let test = '試してみたよ'; //変数testに格納
let test2 = '実行できたね!<br> 再実行する場合は「F5」しよう!!' //変数test2に格納
console.log(test); //javascriptは実行される
document.write(test2); //HTMLテキストとして、実行結果を表示させる
alert(test); //ポップアップとして出力される
}
</script>
<br>
<noscript>JavaScriptが無効なようです...</noscript>
</body>
</html>
赤字(<script>〜</script>)が、javascript。
関数XYZの作成、変数test/test2を定義、
そして変数の内容をHTMLのテキストとポップアップで出力させるというものです。
緑字(<noscript>〜</noscript>)が、ブラウザでjavascriptの実行が無効化されている時に表示するテキスト。
青字(button)がjavascriptを実行するためのボタンです。
サンプル javascriptの実行
ブラウザからファイルを読み込みます。
ボタンをクリック。
「OK」をクリックする。
ブラウザのjavascript実行が禁止されている場合は、以下のようになります。