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">
<!-- ●定数的に使用する定形文字列●
var Const1 = 'コメント1' 基本的全てにグローバル扱い
var Const2 = 'コメント2' Function渡しはローカル扱い
var Const3 = 'コメント3<br>改行' 改行入り
--> 文字列はダブル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 Type="text/javascript">
<!-- ●数値オンカーソル(オンクリック)時のシェイプ交換(シェイプサイズ変更)●
function ChangePic(myPicURL, lngHeight, strComment){
document.images["OriginalPic"].src = myPicURL; //シェイプ交換
document.images["OriginalPic"].border= 1;
document.images["OriginalPic"].height= lngHeight; //シェイプサイズ
if( strComment == '1') { IF分
strComment = Const1;
}else if ( strComment == '2') { ElseIF
strComment = Const2;
}else{ Else
strComment = Const3;
}
document.getElementById("idOriginalPic").innerHTML =
"<br>" + strComment; //シェイプ付随コメントテキスト
}
-->
</script>
オンクリック系からHTML変更
<script Type="text/javascript">
<!--
function ChangeSound(SoundSrc){
document.getElementById("idsound").src = SoundSrc; Src変更など
document.getElementById("pageTitle").innerText = vartmp;
} 内部テキスト変更
--> グローバル変数へ変更しているが引数利用も
</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時刻の取得と単純表示 (現在時刻の動的表示など)
<script Type="text/javascript">
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 -
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("イベント3の追加")
} , 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 -
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'><!--//●スクロールセットタイム
function scroll()
{
scrollBy(0,1);
setTimeout("scroll()",10);
}
//--></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 -
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 -
Java Script, HTML, CSS系2016/7/30
- 14 -
Java Script, HTML, CSS系2016/7/30
メソッド
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 Cn = new ActiveXObject("ADODB.Connection");
var Rs = new ActiveXObject("ADODB.Recordset");
//オープン + 接続文字列
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)
//移動して1列目メッセージ
Rs.Move (2);
alert( Rs("Str").Value );
//フィールド及びレコードカウント
alert(
Fields.Count = + Rs.Fields.Count + "\n" +
RecordCount = + Rs.RecordCount
);
//更新
Rs.Update ("Str", "京都");
alert("Complete");
- 16 -
Java Script, HTML, CSS系2016/7/30
【テキストver】
//Cn, Rs新オブジェセット, もとファイルを開いていると×
var Cn = new ActiveXObject("ADODB.Connection");
var Rs = new ActiveXObject("ADODB.Recordset");
//オープン + 接続文字列
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)
//移動して1列目メッセージ
Rs.Move (2);
alert( Rs("Str").Value );
//フィールド及びレコードカウント
alert(
Fields.Count = + Rs.Fields.Count + "\n" +
RecordCount = + Rs.RecordCount
);
- 17 -
Java Script, HTML, CSS系2016/7/30
- 18 -
Java Script, HTML, CSS系2016/7/30
- 19 -
Java Script, HTML, CSS系2016/7/30
- 20 -
Java Script, HTML, CSS系2016/7/30
- 21 -
Java Script, HTML, CSS系2016/7/30
- 22 -
Java Script, HTML, CSS系2016/7/30
- 23 -
Java Script, HTML, CSS系2016/7/30
- 24 -
Java Script, HTML, CSS系2016/7/30
- 25 -
Java Script, HTML, CSS系2016/7/30
- 26 -
Java Script, HTML, CSS系2016/7/30
- 27 -
Java Script, HTML, CSS系2016/7/30
- 28 -
Java Script, HTML, CSS系2016/7/30
- 29 -
Java Script, HTML, CSS系2016/7/30
- 30 -
Java Script, HTML, CSS系2016/7/30
- 31 -
Java Script, HTML, CSS系2016/7/30
- 32 -
Java Script, HTML, CSS系2016/7/30
- 33 -
Java Script, HTML, CSS系2016/7/30
- 34 -
Java Script, HTML, CSS系2016/7/30
- 35 -
Java Script, HTML, CSS系2016/7/30
- 36 -
Java Script, HTML, CSS系2016/7/30
- 37 -
Java Script, HTML, CSS系2016/7/30
- 38 -
Java Script, HTML, CSS系2016/7/30
- 39 -
Java Script, HTML, CSS系2016/7/30
- 40 -
Java Script, HTML, CSS系2016/7/30
- 41 -
Java Script, HTML, CSS系2016/7/30
- 42 -
Java Script, HTML, CSS系2016/7/30
- 43 -
Java Script, HTML, CSS系2016/7/30
- 44 -