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

webかたつむり

ウェブデザインを勉強中

javascript

jsの復習 objectリテラル

コピペばかりで、jsを忘れてしまう。 たまには復習してみる。 // JavaScript Document var flight = { airline: "ocianic2", number: 815, departure: { IATA: "SYD", time: "2017-07-29", city: "Sydney" }, arrival: { IATA: "LAX", time: "2017-07-30", …

複数のカスタマイズした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…