JavaScript
■ はじめに https://dk521123.hatenablog.com/entry/2011/01/07/012520 の続き。 【１】要素の操作 ポイント * document.getElementById()を利用する => 指定したIDの要素のオブジェクト取得 １）サンプル 例１ <html> <head> <title>サンプル</title> <script type="text/javascript"> function sample() { var resultV</head></html>…
モーダル * モーダルレス（window.open()）だと、親画面を弄れてしまうので、モーダル(window.showModalDialog())について記す。 サンプル 親画面 <html> <head> <title>sample</title> <script type="text/javascript"> function showModal(targetID){ var returnValue = window.showModalDialog( "sampleModal.html", </head></html>…
ポイント * タブをCSSで表現 サンプル <html> <head> <title>サンプル</title> <style type="text/css"> #tab1, #tab2, #tab3 { float:left; // タブの表示を左並びに表示するため width:80px; background-color:#ffffff; border-width:1px; border-style:solid; cursor:pointer; // カーソルを指型にするため f</head></html>…
内部からJavaScriptを実行 構文 <script type="text/javascript"> function 【関数名】() { // 【実行したい内容】 } </script> サンプル <html> <head> <title>サンプル</title> <script type="text/javascript"> function sample() { alert('アラート表示'); } </script> </head> <body> <button onclick="sample()">ボタン押下でalretが表示</button> </body> </html> 外…
Step1 : 原理を学ぶ サンプル <html> <head> <title>サンプル・Step1</title> <style type="text/css"> #id1 { width:150px; height:150px; background-color: rgb(0,255,100); color: rgb(255,255,255); opacity: 0.5; visibility:hidden; // 初期値は非表示 } </style> <script type="text/javascript"> var ON = 1; var OFF = 0; var OnOrOff …</head></html>
■ はじめに https://dk521123.hatenablog.com/entry/2011/01/07/012520 の続き。 「３）オブジェクト操作系」を掘り下げる 目次 【１】appendChild() 【２】removeChild() 【３】replaceChild() 【４】cloneNode() 【１】appendChild() * 要素を追加する * e…
■ はじめに DOM について扱う 目次 【１】DOM 【２】代表的なメソッド一覧 １）オブジェクト取得系 ２）オブジェクト作成系 ３）オブジェクト操作系 ４）その他 【１】DOM * DOM = Document Object Model(ドキュメントオブジェクトモデル) 【２】代表的なメ…
【１】用語 １）バブリング * ある要素でイベントが発生した際に、 親や祖先要素にも同じイベントが発生すること ２）window.document * 表示している文書自体を示すオブジェクト 文法 １）letとvarの違い * どちらも変数を定義する * let の場合、ブロック…
