[効果] – [スタイライズ] – [ドロップシャドウ]でドロップシャドウメニューがポップアップするので
x軸方向オフセット、ｙ軸方向オフセット、(0にするとシャドウなし)ぼかし距離(0でぼかし無し）を指定する。
通常プレビューにチェックを入れておく。
ドロップシャドウ
PageOpen法の違いによるページの開かれ方の違い
HTMLページのOpen法には
1. inputタブのonclickに開くページを指定したwindow.openを仕込む
2. Aタグのhrefに開くページを指定する
方法があるが、それぞれの指定法の違いにより同一ウインドウの同一タブに指定ページが開くことから同一ウインドウの別タブ、他ウインドウに開くまで多種類あるので、その主要なものを添付図にまとめた
ページOpen法とその結果
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
</head>
<body>
<form>inputタグ<br />
<input type="button" value="1. window.open" onclick="window.open('http://www.shonan-gloca.com/new/100/10001.html')">同一ウインドウ別タブに開く タブが順次開く<br />
<input type="button" value="2. window.open _blank" onclick="window.open('http://www.shonan-gloca.com/new/100/10001.html', '_blank' )">同一ウインドウ別タブに開く 1.と同じ<br />
<input type="button" value="3. window.open 空白" onclick="window.open('http://www.shonan-gloca.com/new/100/10001.html', '')">同一ウインドウ別タブに開く 1.と同じ<br />
<input type="button" value="4. window.open ウインドウ名" onclick="window.open('http://www.shonan-gloca.com/new/100/10001.html', '', 'new')">同一ウインドウ別タブに開く 別タブが出来たら、そのタブに毎回開く<br />
<input type="button" value="5. window.open 空白 サイズ指定" onclick="window.open('http://www.shonan-gloca.com/new/100/10001.html', 'width=500,height=400')">同一ウインドウ別タブに開く 4.と同じ<br />
<input type="button" value="6. window.open ウインドウ名 サイズ指定" onclick="window.open('http://www.shonan-gloca.com/new/100/10001.html', 'new', 'width=500,height=400')">別ウインドウに開く 別ウインドウは閉じて、再作成<br />
<input type="button" value="7. window.open location.href" onclick="location.href='http://www.shonan-gloca.com/new/100/10001.html'">同一タブに開く 10.と同じ<br />
</form>
<p>Aタグ<a href="http://www.shonan-gloca.com/new/100/10001.html">10. href</a>同一タブに開く</p>
<p>Aタグ<a href="http://www.shonan-gloca.com/new/100/10001.html" target="_blank">11. href target="_blank"</a>同一ウインドウ別タブに開く 2.と同じ</p>
<p>Aタグ<a href="http://www.shonan-gloca.com/new/100/10001.html" target="new">12. href target="new"</a>同一ウインドウ別タブに開く 4.と同じ</p>
</body>
</html>
デザインビューの表示比率変更
[表示] – [表示比率]で表示比率やズームイン/アウトを設定
ページ全体に対するイベントハンドラの登録
HTMLで記述する場合、
などと タグ中に書くのが普通。一方、JavaScriptで行う場合 onLoadでは「window.onload=ハンドラ関数;」 とするのが一般的。
また、マウスが押された場合には「window」ではなく「document」を使い 「document.onmousedown=…」とすることも多いが、MOZILLA DEVELOPER NETWORKではウィンドウ上での keydown イベントに対応するイベントハンドラとして、
window.onkeydown = funcRef; //funcRef : 関数への参照、または関数式
が乗っている。
なお、funcRef()ではなくfuncRefと書くのは、funcRef()は、funcRef関数を実行するということで、関数を実行した戻り値を代入することになり、この場合戻り値なしなので、undefined を代入することになる。一方funcRefは
funcRef関数自体を代入するので、keydownイベントが発生したときに、funcRef関数を実行します。
カテゴリー: Javascript
コメントする
イベント処理でIEと他のブラウザを切り分ける
IEのみがサポートしている文書内のすべての要素にアクセスし、変更する機能(document.all)を使って切り分ける。
if (document.all) { //IE
var evnt = window.event;
x = evnt.keyCode;
}
else { //others
x = e.keyCode;
}
押されたキーを識別する
<body onkeydown="click_sub()">
<script language="Javascript">
<!--
function click_sub() {
if (window.event.altKey==true) {
alert("ALTキーが押されました");
}
if (window.event.ctrlKey==true) {
alert("CTRLキーが押されました");
}
if (window.event.shiftKey==true) {
alert("SHIFTキーが押されました");
}
}
-->
</script>
Aタグのデフォルトアクションをキャンセルする
Aタグのデフォルトアクション：クリックによるリンク移動をキャンセルする。
＜方法＞
CTRLキー以外が押された場合event.returnValueプロパティにfalseを設定する。
<html>
<head>
<SCRIPT language="JavaScript"><!--
function CtrlLink() {
if(window.event.srcElement.tagName == "A" && !window.event.ctrlKey) window.event.returnValue = false;
}
//--></SCRIPT>
</head>
<body onclick="CtrlLink()">
<h4>CTRLキー併用のクリックでリンク移動 </h4>
<p>下のリンクは CTRLキーを押しながらクリックしないとリンク移動しない。</p>
<div style="margin-left:1cm">
<p><a href="../aaa/start.htm">はじめに</a></p>
<p><a href="../aaa/books.htm">参考書籍</a></p>
</div>
</body>
</html>
切り上げ、切捨て、四捨五入
切り上げ Math.ceil()
切り捨て Math.floor()
四捨五入 Math.round()
計算は小数点位置固定の為、小数点2桁で四捨五入などの場合は一度10をかけて、四捨五入し、答えを10で割るという操作が必要。
ドキュメントサイズを知る
[イメージ] – [画像解像度]でポップアップする画像解像度ウインドウにドキュメントの幅、高さ、解像度が表示される。
もしくは、[ファイル] – [web用に保存]で表示されるウインドウの右側、情報表示欄の下部に画像サイズが表示される。
読み込みファイルのインクルード
一番簡単なのはjavascriptでdocument.writeする方法。
＜HTML＞
<script type="text/javascript" src="../js/import.js"></script>
＜javascript import.js＞
document.write('<script type="text/javascript" src="/shared/js/jquery.js"></script>');
document.write('<script type="text/javascript" src="/shared/js/fancybox.js"></script>'); document.write('<script charset="shift_jis" type="text/javascript" src="/shared/js/shCore.js"></script>');
document.write('<script type="text/javascript" src="/shared/js/shBrushXml.js"></script>'); document.write('<script type="text/javascript" src="/shared/js/shBrushJScript.js"></script>');
document.write('<script type="text/javascript" src="/shared/js/shBrushCss.js"></script>'); document.write('<script type="text/javascript" src="/shared/js/run.js"></script>');