webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

javascript

複数のカスタマイズしたgooglemapsを配置する(ここでは6つ)

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…

javascript 再帰関数 / ハノイの塔

ハノイの塔 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' + …

javascript object

オブジェクトリテラルは、「2つのcurly brackets」で囲まれ、その中に「name」と「value」のペアが列挙されたもの。commaでつなげる。 nameはalphabet, number, underscoreを使用する。 使用していない場合、および予約語を使用する場合は、doublequotation …

アコーディオンメニュー js

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…

Date(); の復習 / 日付の表示

<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>

scriptの記述場所

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…

javascript location object

window.location window.location.href window.location.pathname

window.prompt(); window.confirm();の戻り値

window.prompt(); <script> var thisYear = window.prompt('今年は西暦何年?'); console.log(typeof thisYear); </script> テキストボックスに入力しても、しなくても(空文字列でも)戻されるのは。string。入力しない場合はからの文字列。 cancelをクリックすると、戻され…

jsの練習

おみくじ <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>…

java script練習帳

javascriptは大文字と小文字を区別する。 これを間違えるといっさい動きません。 変数の定義もすべてcamelCaseで記述してみようと思う。 innerHTML = すべて大文字 document内部の各要素には必ず「innerHTML」propertyが存在する。 「Html」と記述して、迷路…

class instance

クラスとオブジェクトとインスタンスの関係 - Qiita からの転記。 クラスとインスタンス クラスは設計図で、インスタンスはその設計図を実体化したもの(実体化することをインスタンス化という)。 例えば、人間という言葉を想像した時に、思い浮かべるものは…

Date object

注意すること getFullYear(); 西暦表示はgetYearではない。 getMonth(); 1月は「0」。配列の一番目。 getDay(); は変換しないといけない。配列の一番目は日曜日。 Date object getYearメソッドは、1900年に対して加減算する。 今年は117つまり1900+…

jQuery を読み込む順番

制作実習課題にjQueryなど、殆ど使わない予定だったのに、気が付くとどんどん増えていきます。 ファイルによっては(たとえばgooglemapsとか…)読み込む順番によってうまく動作しない、といったことも起こり始めます。 どのように整理するか基本的な考えかた…

googlemaps を埋め込む

地図の中心に表示する座標を取得する まず、必要な位置情報を取得する。 Geocoding - 住所から緯度経度を検索 住所を入力すると、緯度経度を座標で教えてくれます。(googlemapsに値を代入しても誤差が生じる場合がある。googlemapsから値を取得するほうが思…

header を position:fixed; そして smooth scroll にしたい。

上手くいかなかったときの記述。なにがどのように悪さしていたのかは不明。 ページトップに移動するボタンに<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>…

smooth scroll "スクロールすると表示されるトップへ戻るボタン"

.scroll();は「スクロールした時」、イベントが発生した時点で(function)が起こる。 .scrollTop()、は数値。「スクロール可能な範囲」(windowではない!)の1番上から数えたピクセル数。 $('body', 'html').animate({'scrollTop':'0'},'slow'); どうして…

課題:06-10

問10 button を作る。<p><button class="redbtn"><a href="#"> red </a></button></p> button の見映えを変更する。border-radius imgをfloatでレイアウトする。margin の値をうまくとって余白が均等になるようにする。 jQueryでは、どのようにセレクターを使うかで悩んだ。取っ掛かりでは、属性セレクタを使うことに…

mega drop-down menu その3

http://ohtafelica.webcrow.jp/megaDropdown/ script accordion menuに近いスクリプトですが、動いてくれます。 まずは一つだけですが、今日はこれまで。 <script>$(function(){ $('#mddWrap').hide(); $('#mddNav>ul>li').on('mouseover',function(){ var wrap=$(th…

mega drop-down menu その2

cssにとりかかる。 まずはシンプルなナビゲーションだと思ってはじめます。 見映えはボディー幅で、ボタンが5つ、幅800pxに収めてレイアウトします。 header{ width: 100%; height: 100px; background: #777; text-align: center; box-sizing: border-box; …

mega drop-down menu その1

まず準備、図面を頭に入れる 絶対に入れ子構造を最初から作ろうとしない。 まずナビゲーションを作る、と考える。 ボタンはボタンだけでなく、ボタンの外側に見えない部分が隠れている。 その見えていない部分が、#mddWrap(構造部分、ブロック) #mddInner(内…

課題:06-09

問09 cssがポイント。 全体を包む、#wrap containerのようなもの。 #wrapには、position: relative; 。ボタンをposition:absolute;で表示するため。 #wrapの中には、ボタンが2つと、#carouselが入っている。 表示領域、いちばんメインの、#carouselには、ov…

課題:06-08

問08 ul,liのリセットを忘れて時間をかける。 途中から構造を変えるときは要注意。 サムネイルは、メイン画像へのリンクだと考える。 リンク→href属性、と連想する。 サムネイルにはhref属性を付けなければならない。 サムネイルは、なににリンクするのか?…

jQuery "modal window" その4

指示されたscriptと、違う記述するのは気持ちが悪いので先生に相談してみると、解決方法がわかりました。 とりあえずscriptはfancyBoxのHPに記載されているとおりに戻す。 $(document).ready(function() { $(".fancybox").fancybox(); }); 問題はhtmlのグル…

jQuery "modal window" その3

jQuery "modal window" その2

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 "modal window" その1

赤丸部分の画像ファイル 矢印などの画像 jquery.fancybox.css jquery.fancybox.pack.js jquery.fancybox.js jquery.fancybox-media.js youtubeとの連携に必要。 jquery.mousewheel-3.0.6.pack.js マウスホイールをまわすとスクロールするプラグイン。 htmlを…

jQuery plugin "fancy Box" 1

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…

jQuery plugin "fancy Box" 2

Various types HTML JavaScript Ajax Iframe Inline SWF Youtube (iframe) Google maps (iframe) Non-existing url Alternatively, you can set content type as an option: $(".open_ajax").fancybox({type: 'ajax'});. Note, ajax requests are subject to…

"bx slider" を使ってスライドショーを作る

使い勝手云々よりも、少しだけいじってみたくなったので… div id="container"を作って画面中央に配置。"container"の幅は<img>の幅と同じで大丈夫そう。 pagerの大きさ、マージン、ホバーの色をいじってみました。 スライドさせる写真のファイル名は「0」からでは…

jQuery plugin "bx slider"

step1 ファイルの準備 htmlファイルがあるフォルダに、js ,css ,img フォルダを用意する。この辺りの準備は自分の段取りとして習慣にしておく。 jsフォルダには、jQueryのファイルを1系統、2系統、migrateの3つと、bxSliderのjsファイル、jquery.bxslider…

jQuery plugin vol.2

Bx slider Max Image2

jQuery plugin vol.1

crossfade.js homepagehttp://mikefowler.me/crossfade.js/ download sitehttps://github.com/mikefowler/crossfade.js.git jQuery Easing Plugin http://gsgd.co.uk/sandbox/jquery/easing/ cross fader v1.1

.animate(); 4

<html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Q5</title><style>.box{ display: none; width: 300px; height: 300px; line-height: 300px; text-align: center; color: white; border: 4px solid white; box-sizing: border…</meta></meta></head></html>

.animate(); 3

<html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Q3</title><style>.box{ display: none; width: 300px; height: 300px; line-height: 300px; text-align: center; color: white; border: 4px solid white; box-sizing: borde…</meta></meta></head></html>

.animate(); 2

width; 300px height; 300px の色の異なる正方形を3つ非表示から各々、即座に表示、スローで表示、5秒かけて表示させる。 html <html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.box{ display: none; width: 300px; height: 300px; line-height: 300px; te…</meta></meta></head></html>

.animate(); 1

ボタンをクリックしたら、表示してある width: 100px、height: 100pxの正方形が1,000px 移動して止まるように記述する。duration=600ms html <html lang="ja"><head><meta charset="utf-8"><title>Q2</title><style>.box{ width: 100px; height: 100px; background: #777; line-height: 100px; text-align: center; color: white</style></meta></head></html>…

tab panel 手順2

<script>$(function(){ $('#panel li').hide(); $($('#tab>li a.selected').attr('href')).show(); });</script> $('#panel li').hide(); パネルの li をすべて隠す $($('#tab>li a.selected').attr('href')).show(); ul(#tab) 子供の li の.selectedの<a>のhref属性=つまり「#t</a>…

tab panel 手順1

タブパネルを作る 手順1 ulを2組、id をそれぞれ'tab'と'panel'にする。そして2つのul をcontainerで囲う。 ul #tabの li に<a href="#tab1">を書き足す。 ul#panelの li に id=tab1 をくわえる。 ここが仕掛けの肝です。 <body><div id="container"><ul id="tab"><li><a href="#tab1">html</a></li><li><a href="#tab2">css</a></li><li><a href="#tab3">javascript</a></li><li></li></ul></div></body></a>

insertBefore before insertAfter after

$('A').insertAfter('B'); AをBの後ろに挿入。B,Aの順番。 $('A').After('B'); Aの後ろにBをおく。A,Bの順番。 beforeとinsertBeforeも同じ関係 <html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery</title><style>html, body, p, ul, li, button{ margin…</meta></meta></head></html>

after before

$('A').after('B'); AのafterにB わかりづらい…が、基準(A)の後にBを持ってくると覚えるしかない。

append prepend appendTo prependTo

<html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery</title><style>html, body, p, button, ul, li{ margin: 0; padding: 0; line-height: 2.0;}#container{ width: 480px; margin: 50px auto;}button{ cursor: pointer;}u…</meta></meta></head></html>

appendTo prependTo

$('A').appendTo('B'); AをBの後ろに持っていく。 いますでに存在しているところの、AをBの後ろに移動する。 B Aの並びになる。 $('A').prependTo('B'); AをBの前に持っていく。 ちなみに、$('A').append('B');は、AにBをappend する。 Aの最後にBを持ってい…

append prepend

$('A').append(B); Aにくっつける。 Aに添える。なにを?Bを。 A(主体)にBを添える。 AのあとにBがくっつく。 $('A')prepend(B); Aの前に足す。なにを?Bですよ。 Aの前にBを持ってくる。 どちらも「新たに作ったもの」を挿入する、意味。

jQuery で console.log();

functionの中に、以下のように記述すれば良い。

toggle 画像置換

.toggle() 新しいバージョンではサポートされないメソッド。 jquery-migrate-1.3.0.min.jsをリンクすれば、過去のメソッドも使えるようになる。 <script src="js/jquery-2.2.3.min.js"></script><script src="js/jquery-migrate-1.3.0.min.js"></script> toggleさせたい関数を、.toggle(function(){ここの中に}); 列挙する。 <script> $(function(){$('img').toggle(functio…

.mouseover .mouseout 画像置換

2枚の画像を置換する html <body><div id="imgArea"><img src="img/ph01.jpg" alt="ph01" id="ph01"></div></body> jQuery のリンクがないまま、30分がんばってしまいました。 <div>にはsrcがないから、これではダメ。 <script>$(function(){ $('#imgArea').mouseover(function(){$('#imgArea').attr('src','img/ph02.jpg')}) .mouseout(function(){$('#img</div>…

アコーディオン 再び

手順の整理 1番先頭、以外のddは閉じる(hide) dtがクリックされたら クリックされた隣のddが閉じているならば すべてのddを閉じて クリックされた隣のddを開く 以上の5段階。 さらに、開いているddの上にあるdtの色を変える。 addClass, removeClassでcs…

ul でアコーディオン

html ここでのマークアップがすべてです。 クラス名の付け方にもセンスが必要です。 <div class="accordion"><ul class="nav"> <div class="category">家具・インテリア</div><ul class="menu"><li><a href="#">ソファ</a></li><li><a href="#">ベッド</a></li><li><a href="#">テーブル</a></li><li><a href="#">チェア</a></li></ul> <div class="category">ステーショナリー</div></ul></div>