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

webかたつむり

WEB制作会社のフォトグラファー

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('凶');
}else{
document.write('小吉');
}
</script>

 

和暦 

<script>
var heisei;
var fullyear;
var now =new Date();
var fullyear = now.getFullYear();
console.log(typeof fullyear);
var heisei = fullyear -1988;
document.write('今年は平成'+heisei+'年です。');
</script>

 

  • typeof は演算子
  • getFullYear();の戻り値は、number型

f:id:ohta-felica:20170103213818p:plain

 

f:id:ohta-felica:20170103213948p:plain

 

 

string+number

<script>
var str = 'string';
var num = 100;
console.log(typeof str);
console.log(typeof num);
var add = str + num;
console.log(typeof add);
</script>

 

f:id:ohta-felica:20170104105440p:plain

  •  異なる型の連結。文字列と数値を「+」で連結すると数値は文字列に変換されます。

関数 引数

<script>
function multiply(a, b){ /*変数a,bを宣言しない、引数として記述する*/
var m =a*b;
document.write(m);
}
multiply(5, 6);/*関数を呼び出す。引数を入力する*/
</script>

 

  • 引数とはなんぞや?たぶん、関数の処理過程で必要になる変数のことだ。

変数のスコープ

<script>
function summary(){
var i;
var total=0;
for(i=1; i<=100; i++){
total += i;
}
return total;
}
document.write(summary());
</script>

 

  • 変数totalは関数summaryの内部で宣言したから、document.write(total);としても、なにも戻ってこない。
  • では、単純にvar totalを関数の定義より前に宣言してみるとどうなるのか?

<script>
var total=0;
function summary(){
var i;
for(i=1; i<=100; i++){
total += i;
}
return total;
}
summary();
document.write(total);
</script>

  • document.write(); の前に、関数summary();を呼び出す。
  • これでもきちんと値が戻ってくる。
  • なるほど!これが「変数のスコープ」というやつだ。

 <script>
function summary(){
total = 0;
for(i=1; i<=100; i++){
total += i;
}
return total;
}
summary();
document.write(total);
</script>

ちなみに、var宣言しないとグローバル変数になるので、上のケースでも大丈夫。

java script練習帳

javascriptは大文字と小文字を区別する。

これを間違えるといっさい動きません。

変数の定義もすべてcamelCaseで記述してみようと思う。

 

innerHTML = 

すべて大文字

document内部の各要素には必ず「innerHTML」propertyが存在する。

「Html」と記述して、迷路に迷い込んだ、、、ことを忘れずに。

 

getElementById();

IDはdocumentに対して1つしかないからElement

対象となる「html要素」をオブジェクト(インスタンス)にする。

そのオブジェクトに対して操作をする。

 

getElementsByTagName();  

TagNameはドキュメントに複数存在するからElements

このメソッドによる戻り値は配列になる。

var a = document.getElementsByTagName();

a[0]とは、該当するタグの一番初めに記述されているものを指す。

getElementsByClassName();

TagName同様複数存在する

class instance

クラスとオブジェクトとインスタンスの関係 - Qiita からの転記。

クラスとインスタンス

クラスは設計図で、インスタンスはその設計図を実体化したもの
(実体化することをインスタンス化という)。

例えば、人間という言葉を想像した時に、思い浮かべるものは、特定の誰かではなく、漠然とした人間を思い浮かべる。ただ、自分も人間だし、自分の友達や親も人間である。
この始めに思い浮かべた人間がクラスで、自分のと友達や親といった実体があるものがインスタンスと考えてもよい。

オブジェクト指向

オブジェクト指向とは、オブジェクト同士の相互作用として、システムの振る舞いをとらえる考え方。
このオブジェクト指向によって、考えられたのが、クラスやインスタンス

人クラス、猫クラス、家クラスなどそれぞれクラスを用意することで、それぞれの振る舞いをとらえることができるようになる。なので、クラスはオブジェクトである。

同様に、自分インスタンス、自分が飼っている猫インスタンスなどそれぞれのインスタンスを用意することで、それぞれの振る舞いをとらえることができるようになる。なので、インスタンスもオブジェクトである。

まとめる

まとめると
・クラスはオブジェクトである。
インスタンスはオブジェクトである。
・クラスをインスタンス化したものがインスタンス
(クラスは設計図でインスタンスは実体化される。)

オブジェクト指向の考えに則って作られたのがクラスとインスタンスです。
結局、クラスもインスタンスもオブジェクトなのです。

 

5分で絶対に分かる:5分で絶対に分かるオブジェクト指向 (5/6) - ITmedia エンタープライズからの転記。

- クラスとインスタンス

 同じ種類のオブジェクトをまとめて考えると便利です。これをクラス――classと呼びます。クラスとはオブジェクトの抽象概念です。例えば自分と家族のPさん、Qさん、Aさんや同僚のBさんなど人間オブジェクトの抽象概念を「人」というクラスにします。自分の勤務先O社や妹の勤務先U社など個々の会社の抽象概念を「会社」というクラスにします。

 インスタンス――instanceの言葉の意味は例です。for instanceは「例えば」です。クラスに属するオブジェクトをインスタンスと呼びます。例えばクラス「人」のインスタンスは自分や家族のPさん、Qさん、Aさんや同僚のBさんです。クラス「会社」のインスタンスはP社やU社です。

 インスタンスとオブジェクトは同じ意味で使われる場合が多いですが、インスタンスといった場合は必ずクラスを意識しています。つまり、インスタンスはあるクラスに属するオブジェクトの具体例だからです。

ALT図4 クラス(抽象概念)とインスタンス(具体例)
 
 

Date object

注意すること

  1. getFullYear();    西暦表示はgetYearではない。
  2. getMonth();  1月は「0」。配列の一番目。
  3. getDay(); は変換しないといけない。配列の一番目は日曜日。

Date object

f:id:ohta-felica:20170102141221p:plain

 

f:id:ohta-felica:20170102141257p:plain

 

f:id:ohta-felica:20170102141918p:plain

  •  getYearメソッドは、1900年に対して加減算する。
  • 今年は117つまり1900+117=2017という具合。
  • 2000年問題の根本?
  • いずれにせよもう使わない。
  • get FullYearを使う。

f:id:ohta-felica:20170102142042p:plain

 

f:id:ohta-felica:20170102141854p:plain

 getFullYear

f:id:ohta-felica:20170102142430p:plain

 

f:id:ohta-felica:20170102142538p:plain

 

f:id:ohta-felica:20170102142512p:plain

  • new演算子を使って、新しいオブジェクトを生成する。
  • new Date(); とは新しい「Dateオブジェクト」を生成したということ。
  • 生成されて、利用可能(=インスタンスになる。(どの、いつの、dateなのかパラメータによって指定されると使用可能になるのか?ちなみに括弧の中が空欄の時は現在時刻!)
  • ある値によって生成された「dateオブジェクト」から、「西暦」「月」「日」など、部分の情報(そのオブジェクトに含まれるプロパティー??なのか)を抽出する作業。
  • その抽出する処理=関数がメソッド。
  • getFullYear()メソッド。

f:id:ohta-felica:20170102151519p:plain

 new Date(); と Date(); の違い

f:id:ohta-felica:20170102180657p:plain

 

 

f:id:ohta-felica:20170102180728p:plain

  • new演算子を使わない、Date();は 現在時刻を表す文字列を生成する。オブジェクトではない。

 

170103追記

<script>
var now = new Date();
document.writeln(now);
var year = now.getFullYear();
document.writeln(year+'年');
var month = now.getMonth()+1;
document.writeln(month+'月');
var date = now.getDate();
document.writeln(date+'日');
var hour =now.getHours();
document.writeln(hour+'時');
var minute = now.getMinutes();
document.writeln(minute+'分');
var day = now.getDay();
var youbi = new Array ('日','月','火','水','木','金','土');
console.log(youbi);
var youbi = youbi[day];
document.write(youbi+'曜日');
</script>

 

 

sp movie

スマートフォンで動画の反省点。同じ轍を踏まないための備忘録

  • spブラウザーでの使用で、html5 videoタグを使用すると、autoplayにならない。自動再生するためには他の方法を用意しておかなくてはいけない。写真のフェードイン、フェードアウトであれば、代案がいくつか思いつく。
  • そこでCSS3のアニメーションを使った方法を試してみる。自分が所有するiphone-6ではうまく再生できた。ここでの油断が命取り、、、
  • iphone-5では「かくかく」した動きになり、まったく見られたものではなかった。同様の症状が軽いながら、androidsony)でも見られた。

 

qiita.com

 

f:id:ohta-felica:20161226233624p:plain

 

発音記号を表示する

  •  下の黄色い部分の発音記号を、htmlで表示するにはどうすればよいのか?

  • そんな時の備忘録

f:id:ohta-felica:20161223133051p:plain

f:id:ohta-felica:20161223133523p:plain

f:id:ohta-felica:20161223133615p:plain

  •  上の表の黄色部分から目的の発音記号は、「&#652」であると推測。
  • 読みは当たって、めでたしめでたし。

 

photoshop 描画色と背景色

 

f:id:ohta-felica:20161214231905p:plain

  •  photoshopで新規ファイルを作る。
  • いったい、この「白」はなんなのか?という疑問、、、
  • 長方形ツールを使って、長方形を作る。
  • 描画色は「グレー」背景色は「赤」。

f:id:ohta-felica:20161214232319p:plain

 

  • 長方形を移動しても、長方形が移動するだけ。なんのこっちゃ??
  • レイヤー構造はこんな感じ。
  • 「背景」の上に「別レイヤー」があって、そのレイヤー上に「ベクトルシェイプ」が存在しています。

f:id:ohta-felica:20161214232644p:plain

  •  今度は「背景」レイヤーを選択した状態で、長方形の選択範囲を作る。
  • わたしは、背景の一部分を長方形で選択したわけです。

f:id:ohta-felica:20161214232757p:plain

  •  「背景レイヤー」しかない状態で「ctrl」+「backspace」で選択範囲を塗ると、背景色で塗られる。
  • 背景を選択して、塗りを指定したのですから、背景色で塗られるわけです。

f:id:ohta-felica:20161214232946p:plain

  •  選択を解除してから、移動しようとするとこんな表示が出てきます。

 

f:id:ohta-felica:20161214233125p:plain

  •  背景は不動です。動きません。まぁ背景ですから。
  • 試しに、「標準レイヤー」に変換してみます。
  • すると、白い部分も含めて、つまり背景レイヤーのそのままが標準のレイヤーになります。
  • 背景なしでレイヤーが宙に浮いています。

f:id:ohta-felica:20161214233409p:plain

  •  再び長方形の選択範囲を作ります。

f:id:ohta-felica:20161214233855p:plain

  •  そして色を塗る。「ctrl」+「back space」
  • 背景レイヤーじゃないけれども、背景色で色が塗られます。標準レイヤーなのに、、、

f:id:ohta-felica:20161214234041p:plain

  • 選択を解除して動かします。

f:id:ohta-felica:20161214234320p:plain

  •  だからなんだという話で恐縮です。
  • 背景を標準にすると、背景は存在しなくなるけれども、標準化した「元背景レイヤー」は「背景」のように振る舞います。

handwritten stroke illustrator

  • 少しだけ直線をラフにする方法。
  • 「線」を「線」のままではなく、「拡張」して「形」する。
  • weightを持ったstrokeではなく、「fill」と「stroke」に拡張します。
  • 「オブジェクト」「分割、拡張」

f:id:ohta-felica:20161213223859p:plain

  •  「効果」「パスの変形」「ラフ」 

f:id:ohta-felica:20161213222721p:plain

  •  「パラメータ」の意味はよくわからないので、プレビューしながら探ればよいと思います。

f:id:ohta-felica:20161213223135p:plain

  •  「使用前」↓

f:id:ohta-felica:20161213223329p:plain

  •  「使用後」↓

f:id:ohta-felica:20161213224054p:plain