ガレコレ
Garage Collection
［トップページ］


 HTML5&CSS3&JavaScript
2020年3月23日(月)
[JavaScript] 変数名および関数名
　どうして、ガレコレのJavsScriptプログラミングでは、変数名の頭に[$]を付けているの？とよく言われます。ちなみに、関数名の頭には[_]を付けています。

--
変数名　$*
関数名　_*()
--


　変数名や関数名を『識別子』と呼びます。識別子のルールは下記の通りです。

--
①識別子の頭は、アルファベット、アンダースコア[_]、ドル記号[$]です。
②続く文字は、数字[0-9]も使えます。
③アルファベットでは、大文字・小文字を区別します。[a-z,
 
A-Z]
④予約語など、利用できない文字列があります。

【予約語】
break
case
catch
continue
default
delete
do
else
false
finally
for
function
if
in
instanceof
new
null
return
switch
this
throw
true
try
typeof
var
void
while
with

【グローバル変数とグローバル関数】
arguments
Array
Boolean
Date
decodeURI
decodeURIComponent
encodeURI
Error
escape
eval
EvalError
Infinity
isFinite
isNaN
Math
NaN
Function
Object
parseFloat
parseInt
RangeError
ReferenceError
Number
String
SyntaxError
TypeError
undefined
unescape
RegExpURIError

【予約語となる可能性がある単語】
abstract
as
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
is
long
namespace
native
package
private
protected
public
short
static
super
synchronized
throws
transient
use
volatile
--


　すべてのアルファベット1文字は、識別子として利用できます。慣例的によく使われるものを挙げてみます。[i][j]は、ループのカウンタ変数として使われます。

--
for(i=0;
 
i<5;
 
i++){
 
 
for(j=0;
 
j<10;
 
i++){}
}

x:
 
x-axis
y:
 
y-axis
z:
 
z-axis
w:
 
width
h:
 
height
t:
 
time
y:
 
year
m:
 
month
d:
 
day
h:
 
hour
m:
 
minute
s:
 
second
c:
 
count
e:
 
event
--


　よく使う短縮形で、一時的に変数に格納する際によく使われるのが下記です。

--
tmp:
 
temporary
 
一時的
 

str:
 
string
 
文字列
num:
 
number
 
数字
--


　その他、よく使う短縮形です。

--
obj:
 
object
 
オブジェクト
tbl:
 
table
 
表
--


　さて、ガレコレでは、うっかり予約語などを使わないようにするために、変数名に[$]、関数名に[_]を付けています。変数や関数が検索しやすいという利点もあります。

--
×Date
○$Date

×do
○$do
--


　ガレコレでは、加えて、アルファベットを小文字のみにしています。ワードを繋げるときに、ガレコレでは[_]で繋げます。ちなみに、JavaScriptでは頭を大文字にして繋げ、CSSでは[-]で繋げます。区別が付くので、そうしています。

--
×font-size　//
 
CSS
△fontSize　//
 
JavaScript
○font_size
--


　プログラミングは、機能拡張していくと、どんどん大きくなります。変数名と関数名を認識しやすくすることは、非常に大事です。


P.S.
 
hogeとかhogehogeは、プログラムを説明するときに、何か適当なものを入れてねと言う意味です。最近では通用しないかもね。
　
2018年10月20日(土)
[JavaScript] スマホでtouchイベント
　スマホでは、onclickのレスポンスが遅く、プログラミングが上手く機能しないことがあります。

　そこで、スマホではtouchイベント（tapイベント）を利用します。

onclick
　↓
ontouchend

　今まで起きていた問題が、すべて解決したようです。

　スマホでは、ontouchendのあとにonclickが処理されます。スマホ用ontouchendとパソコン用ontouchendを併記する場合は、スマホでonclickを無視する仕組みが必要です。

--
<script>

function _click(){
  if(!("ontouchend" in document)){
    tap();
  }else{
    // 処理の順序の確認の為
    alert("click!");
  }
}

function _tap(){
  alert("OK");
}

</script>

<h3 ontouchend="_tap();" onclick="_click();">見出し３</h3>
--


P.S. 下記のように記述しても同様。いずれにせよ、ontouchendが定義されているか判断しています。

if(!("ontouchend" in document))
　↓
if(window.ontouchend === undefined)


P.S.2 さらに、jQueryでは.on()を使用してスマートに記述できるとありますが、あまりそう感じません。jQueryは優秀ですが、自分好みではありません。


P.S.3 『子猫の手』では、この仕組みに切り替える作業をしています。
http://neconote.jp/prg/touch.html
　
2018年9月30日(日)
[CSS3} 無限段組み
　ブロック要素をインライン要素に変換します。１行に表示が収まらなかった場合は、自動的に改行されます。

--
<html>

<head>

<style>

.inline {
  display:inline;
}

</style>

</head>



<body>

<h1 class="inline">見出し1</h1>

<p class="inline">段落</p>

<div class="inline">区分</div>

</body>

</html>
--
　
2018年9月30日(日)
[CSS3] 段組み
　二段組で、左は左寄せ、右は右寄せにします。表示幅が１行に収まらないときは、２行で表示されます。

--
<html>

<body>

<h1 style="float:left;">ガレコレ パソコン教室</h1>
<p style="float:right;">〒781-6401<br>
高知県安芸郡奈半利町甲1942</p>
<hr style="clear:both;">

<p>本文</p>

</body>

</html>
--
　
2018年9月30日(日)
[CSS3} ページ全体の表示幅
　パソコン（表示幅800px以上）では幅800pxで中央揃え、スマホ（表示幅800px未満）では幅100%にします。

--
<html>

<head>

<style>

#center {
  width:100%;
  max-width:800px;
  margin:auto;
}

</style>

</head>



<body><div id="center">

<p>本文</p>

</div></body>

</html>
--


P.S. 『子猫の手』でも次期バージョンで、これを採用します。
　

お問い合わせ
by Network Communication Note