Opensourcetechブログ

OpensourcetechによるNGINX/Kubernetes/Zabbix/Neo4j/Linuxなどオープンソース技術に関するブログです。

javascriptを試す

こんにちは、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>

 

赤字(<script>〜</script>)が、javascript。

関数XYZの作成、変数test/test2を定義、

そして変数の内容をHTMLのテキストとポップアップで出力させるというものです。

 

緑字(<noscript>〜</noscript>)が、ブラウザでjavascriptの実行が無効化されている時に表示するテキスト。

 

青字(button)がjavascriptを実行するためのボタンです。

 

 

サンプル javascriptの実行

ブラウザからファイルを読み込みます。

f:id:opensourcetech:20190405013130p:plain

 

ボタンをクリック。

f:id:opensourcetech:20190405013201p:plain

「OK」をクリックする。

f:id:opensourcetech:20190405013230p:plain

 

ブラウザのjavascript実行が禁止されている場合は、以下のようになります。

f:id:opensourcetech:20190405013320p:plain



 

 

 

 

www.slideshare.net

github.com

www.facebook.com

twitter.com

www.instagram.com

 

 

にほんブログ村 IT技術ブログ Linuxへ
Linux

にほんブログ村 IT技術ブログ オープンソースへ
オープンソース

 

 

Opensourcetech by Takahiro Kujirai