Java Script, HTML, CSS系フレームセット 2016/7/30gaibu2.yukishigure.com/txt1/pdfs/html2.pdf · Java Script, HTML, CSS系キーダウンイベント 2016/7/30 document.onkeydown=testkeydown

Java Script, HTML, CSS系2016/7/30フレームセット

<frameSet cols="15%,*" frameBorder=0> 指定は% or 数値

<frame src="./HTMLs/Left.html" name="Left">

<frame src="./HTMLs//Right.html" name="Right"> nameにRightセット

</frameSet>

フレームタイトル部分

<html><head><title>インデックス左側</title></head>

<body bgcolor="LightCyan"> ボディー設定可能

<table style="Font-Size:16pt;" cellspacing=1 cellpadding=5>

<tr><td>

<a href="./Group1.html" target="Right">Group1</a> 右側表示のため・・・

</td></tr>

<tr><td>

<a href="./Group2.html" target="Right">Group2</a> ・・・Targetは全てRightに

</td></tr>

</table>

グローバル変数

<script Type="text/javascript">

 文字列はダブルQも可

</script> Function内var宣言はローカル変数扱い

バックグランドとサウンド

<body background="./Sepia.png"> 

<bgsound id="idsound" loop="infinite" src="./Pic/Can you feel the love tonight.mp3">

VBAからのJava Script実行

hDoc.parentWindow.execScript "ChangePic('./Pic/Pic1.png', 300, '1')"

インプットボックス, 改行は <br>, \n

Const2 = 'コメント2<br>2行目' //変数

lngHeight=prompt("シェイプ高を入力して下さい。 \n規定は600です。",400); \n利用

prompt 第二引数は初期値, キャンセル=Null

- 1 -

Java Script, HTML, CSS系2016/7/30オンクリック, マウスオーバー

【Aタグ内】」

<a onmouseover="ChangePic('./Pic/Pic1.png', 600, '2')" 引数にSrc, Height, テキスト

onclick="ChangePic('./Pic/Pic1.png', 800, '2')">2</a> AタグHrefは必須でない

Hrefが無いと内部文字にアンダー無し

【Script】




</script>

オンクリック系からHTML変更


 グローバル変数へ変更しているが引数利用も

</script>

ファイルシステムオブジェ利用、新規テキスト作成

var fso = new ActiveXObject("Scripting.FileSystemObject");

var a = fso.CreateTextFile("D:/Work/HTML/aaa.txt", true); //パス\不可⇒×D:\, ○D:/

a.Write("This is a test");

a.close();

- 2 -

Java Script, HTML, CSS系2016/7/30時刻の取得と単純表示 (現在時刻の動的表示など)


vartmp= new Date().getHours() + "時" + new Date().getMinutes()

+ "分" + new Date().getSeconds() + "秒"

vartmp= "現在" + vartmp + ""

</script>

配列

Ary=new Array(10)

Ary[0]= Math.abs(-100) 　　　// 100

Ary[1]= Math.ceil( 123.456*100 ) /100 　// 123.45

Ary[2]= Math.floor( 123.456*100 ) /100 　// 123.46

Ary[3]= Math.round( 123.452*100 ) /100 　// 123.45

Ary[4]= Math.round( 123.456*100 ) /100 // 123.46

Ary[5]= Math.max( 30, 40, 20 ) 　　// 40

Ary[6]= Math.min( 30, 40, 20 ) 　　　 // 20

Ary[7]= Math.pow( 3, 3 ) 　　　// 27

alert( Ary[3] );

alert( ary.join(", ") ); 配列を区切り文字でスプリット(split)

変数名・関数名・オブジェクト名先頭は英文字(数値不可), 大文字小文字別認識

文字列置換

alert( "京都市上京区".replace(/上/, "下") )

テキストエリアセレクト

document.getElementById("TestTextArea").select();

ファイル選択ボックス

<input type="file" name="file" id="file" value="val"/>

alert (document.getElementById("file").value );

フォームテキスト要求値

<form>

<p>要求値有り：<input type="text" id="require" required value=""></p>

<input type="submit" value="バリデートあり"

onClick="alert( document.getElementById('require').value )">

</form>

複数function指定

onClick="alert('1');alert('2')" セミコロン区切り

- 3 -

Java Script, HTML, CSS系2016/7/30文字列正規表現

http://www.openspc2.org/JavaScript/data/regexp.html 参考サイト

http://so-zou.jp/web-app/tech/programming/javascript/grammar/data-type/string/regular-expression.htm

if ( "abcdefg".match(/de/) ) {

alert( 'match' )

}else{

alert( 'nonmatch' )

}

．任意の一文字, "．．"で任意の二文字 "私は．です" ⇒ 私は犬です

．+ 任意の1文字以上(×ゼロ文字) "私は.+です"⇒ ○私は馬です, ×私はです

a+ プラス前が1つ以上(×ゼロ) "gaa+p" ⇒ ○gaap, gaaaap ×gap

、? ？前が1つ or ゼロ(ゼロ可能) "私も、?犬です" ⇒ ○私も、犬です, 私も犬です

．* 任意のゼロ文字以上(ゼロ可) "は．*い" ⇒ ○はい, はーい, はーーーい

o{2} 直前の指定文字数 "Go{2}d" ⇒ ○Good, ×God, Goood

o{2, } 直前の指定文字数以上 "Go{2, }d ⇒ ○Good, Goooood, ×God

o{2, 5} 直前の指定文字数間 "Go{2, 4} ⇒ ○Good, Gooood, ×God, Gooooooood

foo|bar or条件 "aa(foo|bar)bb" ⇒ ○aafoobb, aabarbb

a[xyz]b いづれか1文字 ⇒ "a[xyz]" ⇒ ○axb, ayb, azb

a[xyz]?b いづれか1文字があっても無くてもOK

a[^xyz]b いづれか1文字が無い

[a-zA-Z0-9] \d [0-9]

^a 行頭マッチ \D [^0-9]

z$ 行末マッチ \w [a-Za-z0-9_]

\D 上記否定

\b 単語境界(空白) "Space□racer" ⇒ ○(ce)\b, (ce)\br, (pa)\B

\ エスケープ \v 垂直タブ

\n ラインフィード \f フォームフィード(次のページへ)

\r キャリッジリターン \s [ \f \n \r \t \v ]

\r\n 改行 \S [^ \f \n \r \t \v ]

\t タブ \x?? 任意の文字コード

abcdefg.match( /.e/g ) ⇒ eの前に1文字以上存在

/g ⇒ マッチするもの全てを返す /i ⇒ 大文字小文字を区分しない

エクセルオープン

var excel = new ActiveXObject("Excel.Application");

var workbook = excel.Workbooks.Open(

"D:/Work/HTML/sample12.xls", false, true);

excel.visible=true;

- 4 -

http://www.openspc2.org/JavaScript/data/regexp.html

http://so-zou.jp/web-app/tech/programming/javascript/grammar/data-type/string/regular-expression.htm

Java Script, HTML, CSS系2016/7/30確認メッセージ

if ( window.confirm('ok?') ) {

IE, ウィンドウスクロール

IE.Document.parentWindow.execScript "window.scrollTo(100, 100);" 絶対座標

IE.Document.parentWindow.execScript "window.scrollBy(100, 100);" 相対座標

第二引数が縦位置

【特定IDへ】 location.hash ="TestID2";

window.scrollBy(0, -10);

特定サイト, ファイル, フォルダオープン

var w= window.open("D:/Work/HTML/HTMLs/tmp1.html");

w.focus();

現在選択されている範囲

selection = window.getSelection();

alert( selection );

エスケープシーケンス

alert( 'abc\ndef');

alert( 'abc\\ndef');

文字列の数値変換

str='0'; str='0';

//str= str - 0; str= str - 0;

alert( str + 2 ); alert( str + 2 );

str='0'; str='12345abc';

str= Number(str); str= parseFloat(str);

alert( str + 2 ); alert( str );

数値の文字列変換

var s = String( number );

ゼロパッティング

alert( ('0000000' + 12).slice(-4) );

小数点以下

alert( 1.23.toFixed(4) );

- 5 -

Java Script, HTML, CSS系2016/7/30カンマ区切り

var num = new String( 1234 );

while( num != ( num = num.replace( /(\d)((\d\d\d)+\b)/, '$1,$2' ) ) );

日付セット

var sDate2;

eval("sDate2 = new Date(2015,11,13);");

絶対パス取得

var FSO = new ActiveXObject("Scripting.FileSystemObject");

strPath = FSO.GetAbsolutePathName( './' );

alert( strPath ); ← ディレクトリに円マーク\不可 /で

組み込み関数を見る

alert(Date() ); ←戻り値に現在時刻

alert(Date); ←関数の内容

Wクォートエスケープ

file = "\"C:/Users

現ファイルの存在場所

alert(location.pathname);

スプリット分解

var pathinfo = location.pathname.split('/');

最後の要素 = alert(pathinfo.pop());

For繰返し

var pathinfo = location.pathname.split('/');

alert(pathinfo.pop());

for (i=0;i<pathinfo.length;i++)

{

alert(pathinfo[i]);

}

HTML最初のActiveXポップアップ対策

インターネットオプション ⇒ 詳細設定 ⇒ "マイコンピュータでのアクティブ・・・☑ ⇒ IE再起動

- 6 -

Java Script, HTML, CSS系2016/7/30java scriptで外部機能

(fso, ados, access)使用時ポップアップ削除

ハイフン入りIDなどの記述

document.all("JS-script").src= strPath_ + "jsText.js";

java script の src をページ読込時後付けにする場合、既存 body に srcはつけてはいけない。

コール

CreateTable.call(); ファンクション名．Call(), パーレン内は引数(カンマ区切り)

for while文中

break exit for if(i==3) continue;

continue 何もせず次へ if(i==7) break;

配列宣言かつ格納

var yobi = new Array("日曜日","月曜日","火曜日",…,"土曜日");

○パーレン, ×ブラケット

一般的命名規則＜ = less than

変数名は大文字でも小文字でも問題なくプログラムは動きます。

しかし一般的な命名規則では、最初の文字は小文字となっています。

関数名も小文字から始めるという命名規則があります

一般的な命名規則では、定数名は全て大文字で書くことが推奨されています

Internet Explorerでは現時点（Ver.10）でconstは対応していません。ということで、

JavaScriptで定数を使うのは避けた方がいいでしょう。

switch文

var v1= "金";

switch (v1) {

case "月": alert(v1 + 0); break; 要コロン区切り

case "火": alert(v1 + 1); break; 要break

default : alert(v1 + 2); break; case else ⇒ default

}

java script オフ時表示

<noscript>JavaScriptはOFFです！</noscript>

null 判定

if (!rs(col).value) { "rs(col).value" がnull の場合の処理

- 7 -

Java Script, HTML, CSS系2016/7/30キーダウンイベント

document.onkeydown=testkeydown ドキュメント中のscript内へ

function testkeydown() {

alert(event.keyCode);

複数イベントの登録

//既存の関数をイベントリスナに登録する

obj2.addEventListener( "click" , fnc2 , false );

//直接関数を記述して登録する

obj2.addEventListener( "click" , function () {

alert("イベント３の追加")

} , false );

</script>

Exit系

target: {

break target; Gotoに近いがコロン付ラベルから抜ける意味

} for や while 中で　continue ラベル名; も可能

文字列関数 http://www.ajaxtower.jp/js/string_class/

.length

concat(val1, val2, ...)

substr(start[, len]) Midと同じ

slice(start[, end]) Midと違い第二引数は not n文字, but n文字目

第二引数にマイナス可能、その場合は最終文字から

substring(start[, end]) 第二引数マイナス不可

charAt(int) 文字列の中から指定の位置の文字を返します。

charCodeAt(int)

String.charCodeAt(code1, code2, ...)

toLowerCase()

toUpperCase()

.indexOf Instr, [第二引数] =検索開始位置

lastIndexOf(str[, start]) InstrRev

onTime, タイマーインターバル

lngTimerId= setInterval('timerInterval()', lngSec); clearInterval(タイマーID)

onclick="setTimeout('mes()',3000)"> clearTimeout(タイマーID)

現在日時 var hiduke=new Date();

- 8 -

http://www.ajaxtower.jp/js/string_class/

Java Script, HTML, CSS系2016/7/30for each 文

for (c in document.all.body) { id=bodyに対して

if (c=="id") {

alert(c); 200以上ある各種プロパティの中を連続処理

}

}

【全タグに対して】【getElementsByTagName】

for (c in document.all) { for (c in document.getElementsByTagName("td")) {

alert(c); alert(c);

} }

【実際処理】

var ele= document.getElementsByTagName("input")

for (var c in ele) {

if (ele(c).id=="get_path") {

var msg1= c;

var msg2= ele(c);

var msg3= ele(c).value;

// ×c.value×

alert( msg1 + "\n" + msg2 + "\n" + msg3);

}

}

スタイル

太字 fontWeight bold ⇔ normal

H位置 textAlign left, center, right, justify

インデント textIndent 1em, 50px

正インデント padding-left:10px 1em, 50px

表示・非表示 display block, none 以下行高が変動

表示・非表示 visibility visible, hidden 以下行高不変

カーソル cursor pointer 指

style="cursor:pointer"

グラフ案

文字列を数値へ

var num1=parseInt(document.keisan.elements[0].value);

少数変換 ⇒ parseFloat(文字列)

- 9 -

Java Script, HTML, CSS系2016/7/30try, chatch, finally, throw

try{

// 何らかのプログラム

}catch( e ){ "e" は固定文字

alert( e ); // バグの内容をダイアログで表示する Error Descriptionが戻る

}finally{

// 終了処理

}

エラー処理詳細

function stop() {//

try{

errorThrow();//①strEr ①あらかじめエラー文字列を入れておく

asass.call();//③Error ③エラー発生後直ちに④へ行く、以下の行は

clearTimeout(lngTimerId); 実行されない

blnTF=true;

document.getElementById("cnt").innerText= "Suspension"

} catch(e) {//④Goto here ④エラー発生時に飛ばされる場所

alert(e);//⑤　if non error then, ④⑤is not stoped ⑤エラー発生時のみコード

} finally { エラーが無ければここは未発生

alert("finally");//⑥ ⑥finallyはエラーの有無に関わらず

} 必ず発生

}

function errorThrow() { 別ファンクションに throw

throw "throw error!.";//②this is error description

} ② throwにエラー文字列

※chtchのパーレン内はそのまま "e", アラートのパーレン内もそのまま "e"

これで throw 中のエラー文字列がそのまままアラートされる

新ウィンドウ(関数式)

function winOpen() {

//中央位置取得

var w=(screen.width-640)/2;

var h=(screen.height-480)/2;

var info="width=640,height=480," + "left=" + w + ",top=" + h; //window位置サイズ

info= info + ",scrollbars=no,menubar=no,toolbar=no"; //window詳細

//第一引数:URL, 第二:ウィンドウ名, 第三:ウィンドウ位置サイズなど詳細

window.open("staffroll.html","sub","width=640,height=480,"+

"left="+w+",top="+h+",scrollbars=no,menubar=no,toolbar=no");

}

- 10 -

Java Script, HTML, CSS系2016/7/30表セル結合

colspan, rowspan rowspan=3

マージン, パディング

<div style="margin:100px 50px 20px 30px;padding:10px 50px">京都</div>

"margin", "padding"共に値1つ=上下左右, 値2つ=上下, 左右

値3つ=上, 左右, 下値4つ=上, 右, 下, 左

マージンは領域間スペース, パディングは領域内スペース、表中指定も可能

spacing=1

spacing=20

padding=20

both=20

spacing=10, padding=20

spaceing=20, padding=10

1行のIF文 if (min=="") min=0;

数値変換 int=parseInt(int);

enabled .elements[2].disabled=true;

- 11 -

Java Script, HTML, CSS系2016/7/30スクロール関数サンプル

<script language='javascript' type='text/javascript'></script>

スタイルからフォント下線 http://www.1uphp.com/con1/abc/underline-etc1.html

border-bottom:double 3px lime

第一引数 ⇒ solid(実践), dotted(点線), dashed(破線), double(二重線)

第二引数 ⇒ pxでフォント太さ

第三引数 ⇒ 色(red, crimsonなど)

半角スペース

タグ認識文字変換

strCode = Replace(Replace(strCode, "<", "<"), ">", ">")

現在座標取得

function getPosition() {

var lngX= document.documentElement.scrollLeft || document.body.scrollLeft;

var lngY= document.documentElement.scrollTop || document.doby.scrollTop;

scrollTo(lngX, lngY-50);

alert(lngY);

}

カーソルスタイルポインター

style="cursor:pointer"

スタイルなど特定情報 set or get

alert(document.getElementById('before5').style.color);

ADO, フィールド型をテキスト指定強制時

[IMEX=1;] 最後のセミコロンは必須, 不存在時はエラーにならずに非テキスト型

Excelは1フィールド中にテキスト型と文字列型共存がIMEX=1で可能。csvは不可。

- 12 -

http://www.1uphp.com/con1/abc/underline-etc1.html

Java Script, HTML, CSS系2016/7/30

var key; 【For each文？】

for (key in array){

console.log("---");

console.log("index:" + key);

console.log("data:" + array[key]);

}

- 13 -


- 14 -


メソッド

onClick="history.back()

onClick="history.forward()

onClick="location.reload()

onClick="location.href='D:/Work/HTML/Test.html'"

java script からのADO 成功例

//Cn, Rs新オブジェセット

var Cn = new ActiveXObject("ADODB.Connection");

var Rs = new ActiveXObject("ADODB.Recordset");

//Cnコネクション設定

Cn.Provider = "MSDASQL";

- 15 -

Java Script, HTML, CSS系2016/7/30Cn.ConnectionString =

Driver={Microsoft Excel Driver (*.xls, *.xlsx, *.xlsm, *.xlsb)};DBQ=D:/DB/Book1.xlsm; ReadOnly=False;

//Cnオープン

Cn.Open;

//レコードセット

Rs = Cn.Execute('Select * From [Sheet1$];');

//移動して1列目メッセージ

Rs.Move (5);

alert( Rs(0).value );

【最新】

//Cn, Rs新オブジェセット



//オープン + 接続文字列

var CnStr= "Provider=Microsoft.ACE.OLEDB.12.0;";

CnStr= CnStr + "Data Source=D:/Work/MyFunc.accdb";

Cn.Open(CnStr);


//Rs = Cn.Execute('Select * From [T1];');

Rs.Open ("Select * From [T1]", Cn, 1, 3)


Rs.Move (2);

alert( Rs("Str").Value );

//フィールド及びレコードカウント

alert(

Fields.Count = + Rs.Fields.Count + "\n" +

RecordCount = + Rs.RecordCount

);

//更新

Rs.Update ("Str", "京都");

alert("Complete");

- 16 -


【テキストver】

//Cn, Rs新オブジェセット, もとファイルを開いていると×



//オープン + 接続文字列

var CnStr= "Provider=Microsoft.ACE.OLEDB.12.0;";

CnStr= CnStr + "Extended Properties='Text;Hdr=Yes;[IMEX=1]';";

CnStr= CnStr + "Data Source=D:/DB";

Cn.Open(CnStr);


Rs = Cn.Execute('Select * From [csv1.csv];');

//Rs.Open ("Select * From [csv1.csv]", Cn, 1, 3)


Rs.Move (2);

alert( Rs("Str").Value );

//フィールド及びレコードカウント

alert(

Fields.Count = + Rs.Fields.Count + "\n" +

RecordCount = + Rs.RecordCount

);

- 17 -


- 18 -


- 19 -


- 20 -


- 21 -


- 22 -


- 23 -


- 24 -


- 25 -


- 26 -


- 27 -


- 28 -


- 29 -


- 30 -


- 31 -


- 32 -


- 33 -


- 34 -


- 35 -


- 36 -


- 37 -


- 38 -


- 39 -


- 40 -


- 41 -


- 42 -


- 43 -


- 44 -

Documents

Java Script, HTML, CSS系 フレームセット 2016/7/30gaibu2.yukishigure.com/txt1/pdfs/html2.pdf · Java Script, HTML, CSS系 キーダウンイベント 2016/7/30 document.onkeydown=testkeydown

Java Script, HTML, CSS系フレームセット 2016/7/30gaibu2.yukishigure.com/txt1/pdfs/html2.pdf · Java Script, HTML, CSS系キーダウンイベント 2016/7/30 document.onkeydown=testkeydown