スクリプト «クライアント側のWeb技術» の基本

概要

目的：Web（元来は静的なコンテンツだった）上でアプリケーションを動作させる

参考にできる情報源：JavaScript入門ほか多数
　　(ぐぐって見て下さい)

• JavaScriptが標準の言語（JS と略記することも多い）
  • altJS が多数候補には上がっている
  • この言語はECMAScriptという名前で標準化が行われており、 通称：JavaScript、正式名：ECMAScript というような位置関係になっている（現時点ではどちらの名前で呼んでも差支えない）
• Scriptタグの中にプログラムを書くことができる
  • type属性は省略しても大丈夫（JSの場合）
  • SLIMでは 代わりに javascript: セクションを作る

  • AltJSの１つであるCoffeeScript言語は、 Slimの中に coffee: セクションを作って プログラムを書くことができ、（別途プラグインが必要だが）javascriptに変換されて出力される。 （後で例示します）

       <script>
         function abc () {
            ...
         }
         abc() ;
       </script>
    

• Scriptタグのsrc属性で 外部ファイルを指定することもできる
  このときも </ script>タグが必要
  <script …… /> でも大抵大丈夫だが
  • このあたりの関係は（タグの名前は違うが）CSSの場合と似ている
• Scriptタグを生成するSlim記述の例を以下に示す

javascript:
  alert("こんちは");

script src="https://code.jquery.com/jquery-2.1.4.min.js"

JavaScriptの基本（要点のみ）

• 大前提： Java という言語があるが、JavaScriptとはまったくの別物
  • 名前に共通部分があり、字面や文法も互いに似ているが、
  • 言語の性格は正反対
  • なので混同しないように

JS

• 関数の定義は、キーワード function で始め、変数はキーワード var で始める。
  • 関数名のあと、引数リストを () で囲む。引数がないときも ()は省略できない。
  • 最近は キーワード function を使わない書き方も 普及しつつある（次回紹介します）。
• 関数を呼び出す時も、関数名の後ろに ()が必要。
• 文（式）の最後は、’;’ で終端させることが必要。
  • だったが、最近の文法は省略可になっている。
• 従って、後述の関数 abcde を呼び出す時に書き方は、このようになる。

javascript:
   abcde();
   // コメントの例も付加しておきます

補足 JSを動作させられる場所

1. HTMLのScriptタグの中
2. HTMLの大抵のタグにある、イベント（ユーザの操作等に呼応して起こる）に対する動作を指定する属性（onClick, onMouseOver等）の値（となる文字列）の中
   • HREF属性などにも’javascript:’を前置して指定できる
3. ブックマーク（IEでは「お気に入り」）のURLのフィールド
   • やはり（http:// の代わりに） ‘javascript:’ を前置して指定する
4. ブラウザの開発ツール（Windowsでは多くの場合 F12で呼び出す）にある「コンソール」の入力フィールド
   • 各自、実際に試してみて下さい
   • 右に列挙したような式（関数呼出）を入力してみて どんな反応があるか確認してみること。
   • 右図のように、（コマンドプロンプトなど多くのCUIシステムと同様に） 矢印キーによる履歴編集 補完
     といった操作が使える。
5. 他に、node.js などのような、独立したプログラミング言語として動作させる環境も昨今は幅広く使われている。

実習a 簡単なスクリプトを動作させる

1. JSの関数を１つ定義する。(スクリプトタグの中)

javascript:
  function abcde() {
       alert("hello");
  }

coffee:
  @abcde=()->
       alert "hello"

注）

• alert() はダイアログボックスを表示する
• console.log() という関数も使える

2 . ボタンを置く

<INPUT TYPE="BUTTON" VALUE="押してね">

または slimで

input type="button" value="押してね"

注）

• 上記の例で HTMLでは大文字で、SLIMでは小文字でタグや属性名を書いたが、 この資料の中での区別のために大文字小文字を使い分けただけで、 いずれも原則として case-insensitive なので、いずれの文字を使ってもいい。
• ボタンは従来のHTMLでは FORM の構成部品として、
• TYPE属性に、submit, reset といった値を持つものが使われ、
• submit属性のボタンを押すと FORMで指示した動作（一般にリンクへの遷移）を 行うために使われてきた。

3. ボタンの応答として 1.の関数を呼び出す

<INPUT    …     ONCLICK="abcde();">     <!-- HTML -->

input   ...    onclick="abcde()"          / SLIM

注）

• 元来のWebでは ＜ input>タグは formの中に置かれ、 （TYPE属性に、submit, reset といった値を持つものが使われ） formタグのaction属性に従ってページ遷移を行うものだった。
• 現在は < input>タグ単独で使えるほか、 < BUTTON>タグもある
• 上記を１つのファイルにまとめたサンプル とそのHTML版（ソース表示させてみて下さい。）

実習b DIV要素の内容を変更する

HTMLの中に クラス名やID名のついたDIV、例えば

<DIV ID='id1' CLASS='class1'>　あいうえお </DIV>

div id='id1' class='class1' あいうえお
/ または
#id1.class1 あいうえお

を用意しておき、

/ 以下は もっぱら SLIMで例示します

javascript:
  var e1=document.getElementById('id1');
  var e2s=document.getElementsByClassName('class1');

coffee:
  e1=document.getElementById 'id1'
  e2s=document.getElementsByClassName 'class1'

といった関数で要素(element）を選択する。

javascript:
    element.innerHTML="新しい文字列" ;

のようにその中身を動的に変更することができる。
（innerHTML属性またはtextContent属性(あるいはinnerText）

• これを何かのタイミングで起動するためには、たとえばボタンを用意して、

    button onClick="javascript:abc();" 変更
    javascript:
      function abc() {
         var e=document.getElementById('id1')
         e.innerHTML="新しい文字列"
      }
  

  または

    button onClick="javascript:abc();" 変更
    coffee:
      @abc=()->
         e=document.getElementById 'id1'
         e.innerHTML="新しい文字列"
  

  のように仕掛けておく。

なお、要素を取得する関数として、Mozilla Developer Network の documentオブジェクトのページに、

• getElementsByTagName,
• getElementById,
• getElementsByClassName,
• getElementsByName

といった関数が用意されこれまで使われてきている。最近はそれに加えて、

• querySelector
• querySelectorAll も多くのブラウザが実装している。

補足

上記に示した、getElementById(), getElementsByClassName() といった関数は、
JavaScriptネイティブの（ブラウザ等に作り込まれている）関数であるが、
要素の選択などの場面ではネイティブの機能を使わずライブラリ関数
（第三者の作ったJavaScirptによるプログラムを別途読み込んで使うもの）で実現
することが多い。

要素の選択を始めとするDOMの操作を総合的に支援するライブラリは多数 流通しているが、
中でも jQuery が最も有名である。