javascript
コピペばかりで、jsを忘れてしまう。 たまには復習してみる。 // JavaScript Document var flight = { airline: "ocianic２", number: 815, departure: { IATA: "SYD", time: "2017-07-29", city: "Sydney" }, arrival: { IATA: "LAX", time: "2017-07-30", …
js/outline.jsの内容 // JavaScript Document function initialize() { var latlng_01 = new google.maps.LatLng(35.700122, 139.776031); var myOptions_01 = { zoom: 17, center: latlng_01, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map_01 = ne…
ハノイの塔 scr=source aux= auciliary 補助 dst=destination ここから本題、、、 var hanoi = function (disc, src, aux, dst){ if (disck>0){ hanoi(disc -1 , src, dst, aux); →ここが1行目 document.write ('move disc' + disc + 'from' + src + 'to' + …
オブジェクトリテラルは、「2つのcurly brackets」で囲まれ、その中に「name」と「value」のペアが列挙されたもの。commaでつなげる。 nameはalphabet, number, underscoreを使用する。 使用していない場合、および予約語を使用する場合は、doublequotation …
function showHide() { var para1 = document.getElementById('news1Paragraph'); var para2 = document.getElementById('news2Paragraph'); para1.style.display = 'block'; para2.style.display = 'none'; var title1 = document.getElementById('news1Tit…
<body> <h1 id="now" style="color: red; textalign: center; margin: 0 auto; width: 600px;"></h1> <script> function now(){ now = new Date(); year = now.getFullYear()+'年'; month = (now.getMonth()+1)+'月'; date = now.getDate()+'日'; hours = now.getHours()+'時'; minutes = now.getMinutes()+'分'; seconds = now.…</body>
htmlのタグは基本的に上から順番に読み込まれる。 scriptタグがheadタグ内にあり、先に処理されている時点でまだIDを持つタグが読み込まれていないと、getElementById('id');は実行されないでエラーになる。 うまくいかない <html lang="ja"> <head> <meta charset="UTF-8"> <title>display Date</title> <script> var now = new</meta></head></html>…
クリックすると画像が置換する 3枚の画像をクリックするたびに置換する。 ループにする。 <script> var images = new Array(); images[0]= 'images/d1.jpg'; images[1]= 'images/d2.jpg'; images[2]= 'images/d3.jpg'; var i = 0; function changeImg(){ if(i==2){ i…
<script> /*URLの配列*/ var url = new Array; url[0] = 'index.html'; url[1] = 'index_new.html'; //変更後のURLを入力する。 /*日付の配列*/ var date = new Array; date[0] = new Date(1970, 00, 01, 00, 00, 0000); date[1] = new Date(2017, 00, 05, 22, 30, 0…
window.location window.location.href window.location.pathname
window.prompt(); <script> var thisYear = window.prompt('今年は西暦何年？'); console.log(typeof thisYear); </script> テキストボックスに入力しても、しなくても（空文字列でも）戻されるのは。string。入力しない場合はからの文字列。 cancelをクリックすると、戻され…
おみくじ <script> var num; num= Math.floor(Math.random()*100+1); console.log(num); if(num == 77 || num==100){ document.write('大吉'); }else if(num%10==3 || num%10==5 || num%10==7){ document.write('中吉'); }else if(num%10 == 4){ document.write('凶'</script>…
javascriptは大文字と小文字を区別する。 これを間違えるといっさい動きません。 変数の定義もすべてcamelCaseで記述してみようと思う。 innerHTML = すべて大文字 document内部の各要素には必ず「innerHTML」propertyが存在する。 「Html」と記述して、迷路…
クラスとオブジェクトとインスタンスの関係 - Qiita からの転記。 クラスとインスタンス クラスは設計図で、インスタンスはその設計図を実体化したもの(実体化することをインスタンス化という)。 例えば、人間という言葉を想像した時に、思い浮かべるものは…
注意すること getFullYear(); 西暦表示はgetYearではない。 getMonth(); 1月は「０」。配列の一番目。 getDay(); は変換しないといけない。配列の一番目は日曜日。 Date object getYearメソッドは、1900年に対して加減算する。 今年は１１７つまり１９００＋…
制作実習課題にjQueryなど、殆ど使わない予定だったのに、気が付くとどんどん増えていきます。 ファイルによっては（たとえばgooglemapsとか…）読み込む順番によってうまく動作しない、といったことも起こり始めます。 どのように整理するか基本的な考えかた…
地図の中心に表示する座標を取得する まず、必要な位置情報を取得する。 Geocoding - 住所から緯度経度を検索 住所を入力すると、緯度経度を座標で教えてくれます。（googlemapsに値を代入しても誤差が生じる場合がある。googlemapsから値を取得するほうが思…
上手くいかなかったときの記述。なにがどのように悪さしていたのかは不明。 ページトップに移動するボタンに<a>がついていなかった。 <div id="content">が閉じていなかった。これは問題外！ htmlを修正 <div class="arrow "><a href="#"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i></a></div> 結局これは元に戻します。後ほど説明。 cssを修正 headerはposition: fixed</div></a>…
.scroll();は「スクロールした時」、イベントが発生した時点で（function）が起こる。 .scrollTop()、は数値。「スクロール可能な範囲」（windowではない！）の１番上から数えたピクセル数。 $('body', 'html').animate({'scrollTop':'0'},'slow'); どうして…
問10 button を作る。<p><button class="redbtn"><a href="#"> red </a></button></p> button の見映えを変更する。border-radius imgをfloatでレイアウトする。margin の値をうまくとって余白が均等になるようにする。 jQueryでは、どのようにセレクターを使うかで悩んだ。取っ掛かりでは、属性セレクタを使うことに…
http://ohtafelica.webcrow.jp/megaDropdown/ script accordion menuに近いスクリプトですが、動いてくれます。 まずは一つだけですが、今日はこれまで。 <script>$(function(){ $('#mddWrap').hide(); $('#mddNav>ul>li').on('mouseover',function(){ var wrap=$(th…
cssにとりかかる。 まずはシンプルなナビゲーションだと思ってはじめます。 見映えはボディー幅で、ボタンが５つ、幅800pxに収めてレイアウトします。 header{ width: 100%; height: 100px; background: #777; text-align: center; box-sizing: border-box; …
まず準備、図面を頭に入れる 絶対に入れ子構造を最初から作ろうとしない。 まずナビゲーションを作る、と考える。 ボタンはボタンだけでなく、ボタンの外側に見えない部分が隠れている。 その見えていない部分が、#mddWrap(構造部分、ブロック) #mddInner(内…
問09 cssがポイント。 全体を包む、#wrap containerのようなもの。 #wrapには、position: relative; 。ボタンをposition:absolute;で表示するため。 #wrapの中には、ボタンが２つと、#carouselが入っている。 表示領域、いちばんメインの、#carouselには、ov…
問08 ul,liのリセットを忘れて時間をかける。 途中から構造を変えるときは要注意。 サムネイルは、メイン画像へのリンクだと考える。 リンク→href属性、と連想する。 サムネイルにはhref属性を付けなければならない。 サムネイルは、なににリンクするのか？…
指示されたscriptと、違う記述するのは気持ちが悪いので先生に相談してみると、解決方法がわかりました。 とりあえずscriptはfancyBoxのHPに記載されているとおりに戻す。 $(document).ready(function() { $(".fancybox").fancybox(); }); 問題はhtmlのグル…
Create link elements whose href attributes will contain the path of the element you wish to open within the fancyBox. <a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a> <a class="fancybox" rel="group" href="big_image_2.jpg"></a>
赤丸部分の画像ファイル 矢印などの画像 jquery.fancybox.css jquery.fancybox.pack.js jquery.fancybox.js jquery.fancybox-media.js youtubeとの連携に必要。 jquery.mousewheel-3.0.6.pack.js マウスホイールをまわすとスクロールするプラグイン。 htmlを…
What's new Version 2 is completely rewritten with new features and updated graphics. Notable changes Extendable using helpers Responsive (try resizing window while fancyBox is open) Integrated slideshow New gallery transitions Uses CSS3 (s…
