JavaScript
スマホはレスボンシブ、iPadはPC画面縮小表示したい。 そんな訳で実装する為に、↓この3つについてご説明します。 ・レスボンシブサイトのviewport設定 ・PC表示をそのまま縮小する為のviewport設定(iPad用) ・デバイスによってviewport設定を振り分けるレス…
<html lang="ja"> <head> <meta charset="UTF-8"> <title>DOMでイベントとタイミングを記述</title> <style> <!-- p { cursor: pointer; } --> </style> </head> <body> <p id="myID">テスト</p> <script> function myidEvent() { alert( '押されました' ); } document.getElementById( 'myID' ).onclick = myidEvent; </script> <…</body></html>
getElementById('id名').style.color='#ff0000' <html lang="ja"> <head> <meta charset="UTF-8"> <title>DOMによる要素の指定例</title> </head> <body> <h1 id="myid">DOMによる要素の指定</h1> <script> document.getElementById('myid').style.color='#ff0000'; </script> </body> </html>
【実践課題A】おみくじ <html lang="ja"> <head> <meta charset="utf-8"> <title>【実践課題A】配列の練習(1)</title> </head> <body> <script> <!-- var msg=['大吉','中吉','小吉','吉','凶']; var r = Math.floor(Math.random()*msg.length); document.write(msg[r]); //--> </script> </body> </html> 【実践課題B】表組み
ActionScriptと同じ使い方をします。 <html> <head> <meta charset="utf-8"> <title>JavaScriptで配列</title> </head> <body> <script> <!-- var member = ['佐藤','伊藤','山田']; alert(member[2] + 'さん'); alert(member.length + '人登録されています。'); --> </script> </body> </html> 要素に複数の情報を入れる。 <html> </html>
▼デモ http://jewelcafe.main.jp/0613/cro/03.html ☆ソース <html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScriptでクロスフェード</title> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/jquery.cross-slide.min.js"></script> <style type="text/css"> * { margin: 0; padding: 0; }…</meta></head></html>
☆手順☆ 各サムネイル画像 altの後に↓追加と onMouseOver="document.mainImg.src='マウスオーバー時にメイン画像に表示したい画像パス'"mainのimgタグaltの後に↓追加するだけ name="mainImg" ex 各サムネイル画像 <img src="images/s1.jpg" width="100" height="100" alt=""> ↓
こちらはjquery.js使わずhtmlにちょっと書き加えるだけでロールオーバーを実装する方法です。あまりjsやcssをいじりたくない場合に良いと思います。☆手順☆ altの後に↓追加するだけ onMouseOver="this.src='マウスオーバー時の画像パス'" onMouseOut="this.sr…
2の倍数を合計してダイアログで表示 for ( 変数の初期値； 繰り返し条件； 変数の変更 ) { 実行される処理 } <html lang="ja"> <head> <meta charset="UTF-8"> <title>繰り返し処理</title> </head> <body> <h3>偶数の合計</h3> 以下のボタンをクリックすると、<br> 2、4、6、8、…、100を全て合計した結果を表示できます。<br> <button onclick="total()">計算結果</button> </body></html>
ナビゲーションボタンを作る。 imgタグの後ろに↓を入れる。onMouseOver="this.src='images/画像名_o.jpg'" onMouseOut="this.src='images/画像名.jpg'" <html lang="ja"> <head> <meta charset="UTF-8"> <title>ナビゲーションボタンを作る</title> <style type="text/css"> * { margin: 0; padding: 0; } ul { margin: 10px; list-style-type: </meta></head></html>…
標準体重プログラム 2(ダイアログボックスあり） <html lang="ja"> <head> <meta charset="UTF-8"> <title>標準体重</title> </head> <body> <script type="text/javascript"> </body></html>
<html lang="ja"> <head> <meta charset="utf-8"> <title>標準体重</title> </head> <body> <script type="text/javascript"> '); document.write('身長が',height,'cmの人の標準体重は'); d…</body></html>
<html lang="ja"> <head> <meta charset="utf-8"> <title>平成を西暦に変換する</title> </head> <body> <script type="text/javascript"> ',message,'<\/h1>');…</body></html>
演算子の優先順位 <html lang="ja"> <head> <meta charset="utf-8"> <title>演算子の優先順位</title> </head> <body> <script type="text/javascript"> '); document.write('2×(8−6)÷2＝',(2*(8-6)/2),'<br>'); document.write('1−2＋3＝',(1-2+3),'<br>'); document.write('1…</body></html>
【J01】 画像クリックでアラートを表示するJavaScriptを記述しなさい。 cursor: pointer;→マウスが出る <html lang="ja"> <head> <meta charset="utf-8"> <title>【J01】イベントハンドラの練習</title> <style type="text/css"> /*マウスが出る*/ p img { cursor: pointer; } </style> </head> <body> <p> </p></body></html>
window.document.write()→文字列を書きだす。 ( )の中の文字列を表示します。「window.」は省略できます。 <html lang="ja"> <head> <meta charset="utf-8"> <title>Hello!</title> </head> <body> <script type="text/javascript"> <!-- window.document.write('Hellow World!!'); //--> </script> <noscript> </noscript></body></html>
