JavaScriptとは

　 JavaScriptとは、閲覧ソフト：ブラウザを制御するスクリプト言語（プログラム言語）である。
 　 JavaScript作成のレジメ（カンペ）としてまとめる。市販の「辞典」では全体構成が見えず、「使用例」では構造についての解説不足で、Script作成に適切な本がなかなか得られず、実例を見ながら自家製の製作レジメを作成することにする。
　 #　理解不能の部分は取りあえずブラックボックス扱いで使用例をそのまま利用する。

JavaScript記述法

  1. Java Scriptは基本的にhtmlファイルの内部に記述領域を設けて記述する。その具体的定義部を外部ファイルとして読み込むことができる。これはStyle Sheetと同様である。
  2. JavaScriptの使用宣言
    <head>～</head>中のJavaScript定義以前に以下の行を記述する。
    <meta http-equiv="Content-Script-Type" content="text/JavaScript">
  3. 　 以下のブロックを<body>～</body>中、あるいは<head>～ </head>中のJavaScript使用宣言行以降に記述する。以下同様。
    <script language="JavaScript">
    <!--
    • ここにJavaScriptのプログラムを記述する。
    • 実行部は<body>内、宣言・定義部は<head>内に記述。
    • 前後のRem記号はJavaScript非対応ブラウザ対策。
    • JavaScript内のRemは/*～*/
    //-->
    </script>
     　 この領域宣言は、JavaScript の記述毎に繰り返し行う。同一ファイル内では、その総ての領域に変数値など状態が継承される。
  4. 外部JavaScriptファイルの読込
    <head>～</head>中のJavaScript定義以前に以下の行を記述する。
    <script language="JavaScript" src="JSfunc.js"></script>
  5. 外部Beheiviorファイルの読込
    スタイル・セレクターにイヴェント名、函数名、函数実行内容を記述したファイルを読み込んで定義する
    ［例］　div { behavior: url(Ａ.htc); } 　　　　として定義内容を'Ａ.htc'に記述する
    Ａ.htc の記述例
    　　　<script language="JavaScript">
    　　　<!--
    　　　　　　attachEvent("onclick",msg); 　　　イヴェント指定(click)、函数名msg指定
    　　　　　　function msg(){ alert("Oh!"); } 　　　msg函数定義(「Oh!」をalertに表示する)
    　　　//-->
    　　　</script>
  6. 文字の画面表示
    • document.write(表示リスト,"","文字列",変数,"<br>")
      　　文字列は""で囲み、変数はそのまま、表示リストの区切りはカンマ「，」。改行も記述する。
    • alart=表示したい変数、定数、"文字列"　　　alart枠に表示：確認
    • flag=confirm("表示したい文字列")　　　確認枠に表示：ｙ／ｎ出力
    • status=表示したい変数、定数、"文字列"　　　sutatus bar(枠左下部)に表示
    • title=表示したい変数、定数、"文字列"　　　title bar(枠左上部)に表示：<title>タグと同じ。
  7. 函数の基本構造
    　 函数とは、一意対応していることである。すなわち入力の状態により出力が一義的に定まるものをいう。多価函数というのも複数根が一義的に定まっている。プログラムで言えば、入力は与値に限らず、システムの状態などが含まれる。その場合独立変数の存在しない函数となる。また出力は複数も有り得る。JavaScriptの函数については、作用素、objectも包含して広義に「函数」としている模様で、
    • 形態　　　函数名称(パラメターリスト,,カンマ区切り)
      　　　#　引数のない函数でも（）を省略しない。ダミー引数は無用
    • 函数名　　　　　アルファベット+_名、(２文字目以降算用数字可)
    • 作用名称　　　 アルファベット+_名、(２文字目以降算用数字可)
      例（定義・宣言部)
      　　　document.作用名称.style.clip=
      　　　　　　"rect("+y1+" "+(算術演算式a)+" "+y2+" "+(算術演算式b)+")" ;
      　　　#　（上記のような文字列表現式中の演算式は（ ）で囲んで最終結果文字列を与える）
      　　(実使用部)
      　　　<img src="./url/file名" name="作用名称" style="position:absolute">
    • 変数宣言/代入
      　　　函数内で使用する変数は事前に値を定めることで初期化・使用宣言する。
      　　　x1=0;　
  8. 数学演算
    　　　#　（文字列表現式中の演算式は（ ）で囲んで演算結果の数値文字列を与える）
    • 四則演算　　＝代入演算子、右辺の演算を左辺の変数に代入
      x=a+b;
      x=a-b;
      x=a*b;
      x=a/b;
    • 数学函数：Math.xxxx
      函数表記数学函数
      Math.sqrt(n)
      Math.pow(ｘ,n)       		平方根n
      ｘ^n
      Math.sin(θ)
      Math.asin(n)       		sinθ
      arcsin(n)
      Math.cos(θ)
      Math.acos(n)       		cosθ
      arccos(n)
      Math.tan(θ)
      Math.atan(n)
      Math.atan2(y,x)       		tanθ
      arctan(n)
      arctan(x,y)　x,y逆順!
      Math.exp(n)
      Math.log(n)       		exp(n)
      log(n)      　　　 (自然対数)
      Math.round(n) 四捨五入
      Math.floor(n)
      Math.ceil(n)       		切り捨て(正整数)
      切り上げ（負整数部）
      Math.abs(x) 絶対値x
      Math.max(a,b)
      Math.min(a,b)       		大選択
      小選択
      Math.random() 乱数発生
      　 Math.atan2(y,x)は「全方位アークタンジェント」としてThe BASIC誌1991/03連載「DEF FN函数ハンドブック(2)」に掲載のFNACTAN（X,Y)を、x,y逆順として、値域を方位角でなく±π側を採用したもの。
      　 座標計算：測量、土木計測には非常に便利な函数だが、他では見掛けなかった。オリジナルは他業界人。それを拾ったのか？現場人は歴史的な測量計算慣行で４象限別々に計算する。


      下表、［諸定数表］の
      　 ε：自然対数の底：電気工学では「ｅ」は起電力、瞬時電圧などの略号として定着しており、それとの混同を避けるため数学で汎用のｅを避けて敢えて自然対数の底を表すのにεを用いている。こうした重複のない微分方程式解法の演算子ｐは、後日の数学の成果であるラプラス変換演算子ｓに変わっている。

      　 　 複素数による交流回路計算（過渡現象の定常解算出）と、演算子法による微分方程式の解法（過渡現象解析）が数学論的な裏付けのできる前に現場電気数学の計算法として普及した歴史経過から一般数学との差違を生じたもの。

      　 しかしながら、定数１．４１４２とか０．７０７１などが定義されているのを見ると、つい０．３０１０や０．４７７０は？と思ってしまう。log( )やSQRT( )函数があるのだからπ＆εで足りると思うが。　　　 負数の整数部なんて、わざわざ別の函数を定義しなくても　－int（－ｘ）　で良いと思う。.atan2(y,x)函数の座標指定に逆順は不自然でバグの元！コード系だけでなく、数学的にもあちこちこなれてない。

    • 諸定数
      定数表記数値解説
      Math.PI 円周率：π
      Math.E 自然対数の底：ε
      Math.SQRT2 √２
      Math.SQRT1_2 1/√２
      Math.LN2 ２の自然対数：ln(２)
      Math.LN10 １０の自然対数：ln(10)
      Math.LOG2E εの２底対数
      Math.LOG10E εの常用対数log(ε)

      　 （上表の実数値部は実際のJavaScriptのMath.xxxx定数に拠り表記している）
      全方位アークタンジェント（一覧表）リンク
      Math.atan2(y,x)試算
      区分
      象限
      /軸      		符号±０ 範囲方
      位
      角      		 使用例Math.
      atan2
      (y,x)      		方
      位
      角
      （Ｘ，Ｙ）(x,y)
      ０００(０)不存在(0,　 0)＝
      ＋Ｘ＋０θ＝０北(1,　 0)＝
      Ⅰ＋0＜θ＜π/2(1,　 1)＝
      ＋Ｙ０θ＝π／２東(0,　 1)＝
      Ⅱ－π/2＜θ＜π(－1,　 1)＝
      －Ｘ０θ＝π南(－1,　 0)＝
      Ⅲ－π＜θ＜3π/2(－1,－1)＝ 　 225゜
      －Ｙ０θ＝３π／２西(0,－1)＝ 　 270゜
      Ⅳ＋3π/2＜θ＜2π(1,－1)＝ 　 315゜
      ＋Ｘ０θ＝２π北(1,　 0)＝ 　 360゜


      　 Math.atan2( ，)のパラメター指定が動径座標（ｘ，ｙ）に対してｘ，ｙ逆順で、値域が方位角(０～２π)ではなく数学汎用の±πであることに留意。

      　 左表左半はThe BASIC誌(技術評論社)連載「DEF FN函数ハンドブック(2)」1991/03 P157記事＆表（水島哲生著）より作成。「全方位アークタンジェント函数」として定義法を含め方位角と±π双方を詳解した記事。microsoft Excelでは函数名称のみ変えてatan2(x,y)としており、javascript ではパラメターリストのxとyを逆順にすれば有用な汎用函数の著作権問題をクリア出来ると考えたのだろうか？これを掲載したThe BASIC 粉砕事件に続き、対応が実にみみっちい！


    • 論理演算
      演算子代入表記使用例説　　明　　
      a or bx=a|b; 10101B or 01010B＝11111B＝31
      a xor bx=a^b; 10101 xor 01110＝11011B＝27
      not ax=!a; not(0)＝11111111B
      not(1111B)＝0000
      a>b
      a<b      		x=a>b;
      x=a<b;       		偽：false
      真：true
      or xor のみ真理数値出力で、
      他は文字列出力(不統一に注意)
      比較演算子で
      「等しい」は「＝＝」を用いる。
      a=bx=a==b;
      a<>bx=a!=b;
      (A)and(B)x=(a==b)&&(c!=b);
      (A)or(B)x=(a==b)||(c!=b);

    • 式の簡易表現
      式内容説明
      x+=nx＝x＋nn加算
      x-=nx＝x－nn減算
      x*=nx＝x×nn乗算
      x/=nx＝x／nn除算
      x%=Mx＝x mod M0～M-1：剰余
      x^=1x＝x xor 11,0 のトグル
      x++x＝x＋11加算
      x--x＝x－11減算？
      　

  9. 文字列演算
    　 str1="SampleScript";
    　 str2="Strings";
    　 st=3;
    　 ed=6;    　　　(サンプル用与値)
    • 文字列の連結
      str＝str1＋str2　　　str＝SampleScriptStrings
    • 中間抜き出し(mid$)
      文字間にTop=0の文字座標を振り、座標st～座標ed間の文字を取り出す。
      (3,9)指定は#4～#8を抽出。
      str.substring(st,ed)＝ 　　　　　　 左端からed文字抽出し、その左端st文字を削除
    • 左端抜き出し(left$)
      str.substr(0,st))＝ 　　　　　　　　　　左端からst文字抽出
    • 右端抜き出し(right$)
      str.substr(str.length-st,st))＝ 　　　右端からst文字抽出
    • 文字列検索(str$())
      str.indexOf("iptStr",0)＝
      　　　文字列str中のどこ(座標)にstrx："iptStr"があるかを、座標０から捜す。不存在は－１
  10. 連続して複数の函数を呼び出す
    函数をセミコロン；で区切って並べる。同一函数可。
    ［例］<body onLoad="proc1(); proc2(); ">
  11. イヴェント　　　　　　(工事中)
    　 イヴェント名｛函数名（引数）｝　の形で用いる。引数なしも許容。
    • クリック・イヴェント：
      リンクエリアをクリックすると函数が動作。函数の前に 「JavaScript:」を記述する。
      　　　<a href="JavaScript:函数名(変数リスト,x1,x2,x3,…)"> リンク文</a>
      または、onclick{函数()}；単/　ondblclick{函数()}；複/を定義する。
    • インターバル・タイマー・イヴェント
      指定時隔で繰り返して函数起動
      　　　<body onload="setInterval('函数名(変数リスト,x1,x2,x3,…)',時隔ms)">
      • マウス・イヴェント
        表１表示　　　(工事中)
      • その他イヴェント
        表２表示　　　(工事中)
  12. Style Sheetを定義する　　　（JavaScriptがStyleSheetに作用を及ぼす）
    • Style Sheetの使用宣言
      <head>～</head>中のStyle Sheet定義以前に以下の使用宣言行を記述する。
      <meta http-equiv="Content-Style-Type" content="text/css">
    • 続いてStyle Sheetの定義
      <style type="text/css">
      <!--
      ここにStyle Seetを定義
      　 同一機能のhtmlとは書式：記述方法が異なる点に注意。
      項目html　　ＣＳＳ
      セパレータ　空白_　　　；
      代入演算子　　＝　　　：
      ＵＲＬ指定="files"：url(files)
      　bgcolorbackground-color
      　　　　 　等　参考
       //-->
      </style>
    • 外部ＣＳＳファイルの読込　　　
      <head>領域内で
      <link rel="stylesheet" href= "urlファイル名.css" type="text/css">

  13. JavaScript活用例1　小技集
    活用例2　画像切換解説
    活用例3　（画像分割法）
    活用例4　pre load 高速切換
    活用例5　画像クリップテスト

  14. 作用素：Object　　　　(工事中！)

  15. (未整理・要調査項目)
    • onload=""
    • document.作用名称.style.clip="rect(" y1 x2 y2 x1 ")
      rect("y1 x2 y2 x1)　 は画像の作用ウインドー指定
      clip　　　切り出し？？
      style　　スタイルシートへ作用？
      document 　　　表示関係？
      総合すると最下段の動作サンプル。画像の表示マスク制御


画像クリップ実験

原画
試験車

マスク画面
試験車



　 この機能は「マスク・ウィンドー」である。すなわち元図が固定位置に置かれ、その上のビュー・ウィンドー(x1,y1)－(x2,y2)を指定する形で表示される。画像データの切り取りではない。

　 #　原Scriptでは、クリック・イヴェントで函数を呼んでいたが、ここではインターバル・タイマーとした。

　　　　　　上例はJavaScript例文活用辞典#243 P335 古籏一浩著 技術評論社2001/08/27刊
mail to： adrs
 back 戻る next
Last Upload: ： 　　　Update 04/12/04