[Work/Class/Web基礎/js_basic]

JavaScriptの基礎 基礎の基礎

JavaScriptの基礎

基本の基本 bodyの中にコードを指定して開いた時に実行

bodyタグの中に 

<script type="text/javascript">
      //ここにJavaScriptのコードを書く．
</script>

と書くことで，HTMLが開かれた時にJavaScirptを実行できる． 

alert("表示したい文");

は，中に書いた文章をポップアップウィンドウを開いて表示する命令である．

以下がコードの例である．→動作確認ページ 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>JavaScriptの基礎 開いた時にAlert</title>
  </head>
  <body>
    
    <script type="text/javascript">
      alert("Hello JavaScript World!");
    </script>
    
  </body>
</html>

Buttonを押した時にJavaScriptを実行

最初の例では，htmlが読み込まれると同時にポップアップウィンドウが表示された．

これを，ボタンが押されたら実行されるように変更する．

htmlのheadタグの中に 

<script type="text/javascript">
    //ここに実行したいJavaScriptを記述する
    function onButtonClick(){ //実行したい機能に名前をつける
        alert("ボタンを押されたのでHello World!");
    }
</script>

とJavaScriptのコードを記入しておく．

この時の「onButtonClick」は実行したい機能をまとめて名前をつけたもので，これを関数(function)と呼ぶ．名前は自由につけることができる．

body側では，以下のようにボタンをhtmlで作成し， 

<input type="button" value="ボタンに表示する文章" onclick="functionにつけた名前();" />

と書くことで，ボタンを押したらhead内に作った関数が実行される．

以下が全体のコードである．→動作確認ページ 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>JavaScriptの基礎 ボタンを押したらAlert</title>

    <script type="text/javascript">
      function onButtonClick(){
        alert("ボタンを押されたのでHello World!");
      }
    </script>
  </head>
  <body>
    <input type="button" value="ボタンを押したら実行" onclick="onButtonClick();" />
  </body>
</html>

ちなみに<input type="button" />を装飾するCSSの指定は，以下の通り．(書き方がちょっと特殊) 

input[type="button"] {
   /* input要素のうちtype属性値がbuttonのものに対して装飾 */
   background-color: pink;
   border: 2px solid deeppink;
}