「職業訓練」カテゴリーアーカイブ

「基金訓練」についての投稿です。

職業訓練

基金訓練に行ってきました。(55日目)

コメントする


基金訓練(Webデザイン・プログラミング科)の55日目に行ってまいりました。
55日目から、JavaScriptプログラミングの実習が始まりました。

55日目の内容は下記のとおりです。

１．for文による繰り返し

プログラム例

for(var i=0; i<3; i++){
document.write("繰り返し");
}

説明

i=0　変数 i は、0から始める。
i<3　変数 i が、3より小さい間繰り返し。
i++　変数 i に1ずつ足していく。
よって、変数 i が、0,1,2の3回ループされるので、｛　｝内のプログラムが3回実行される。

結果

繰り返し繰り返し繰り返し

２．変数

プログラム例

var i;
i=1;
document .write ("i=1の結果 i の値は "+ i +"<br />");
i=1+2;
document .write ("i=1+2の結果 i の値は "+ i +"<br />");
i++;
document .write ("i=++の結果 i の値は "+ i +"<br />");
i=i+3;
document .write ("i=i+3の結果 i の値は "+ i +"<br />");

説明

var i　変数 i を宣言。
i=1　変数 i に、1を入れる。
i=1+2　変数 i に、1+2の結果の値を入れる。
i++　変数 i に、1足した結果の値を入れる。
i=i+3　変数 i に、3足した結果の値を入れる。(i+=3
でもよい）

結果

i=1の結果 i の値は 1
i=1+2の結果 i の値は 3
i=++の結果 i の値は 4
i=i+3の結果 i の値は 7

変数名のつけ方

英字で始まる英数字を使用する。
大文字、小文字を区別する。
予約語は使用できないが、予約語を含む変数名(例えば、force)は使用できる。
_（アンダーバー）は使用できるが、-（ハイフン）は使用できない。
慣習として、ループ変数には、i,j,k等を使用する。
変数名をわかり易くする為、userNameというような書き方をする。

備考

文字列も変数の値として使用できる。

３．if elseによる条件判定

プログラム例

var i;
i=5;
if (i==5){
document .write("これは真")
}
else {
document .write("これは偽")
}

説明

var i　変数 i を宣言。
i=5　変数 i に、1を入れる。
if (i==5) { }　変数 i の値が5ならば、{ }内のプログラムを実行する。
else { }　変数 i の値が5以外ならば、{ }内のプログラムを実行する。

結果

これは真

条件式

a>1　aが1より大きい時、真。
a<1　aが1より小さい時、真。
a==1　aが1の時、真。
a>=1　aが1以上の時、真。
a<=1　aが1以下の時、真。
a!=1　aが1以外のとき、真。
a==1 && b==1　aが1、かつ、bが1の時、真。
a==1 || b==1　aが1、または、bが1の時、真。

４．配列

プログラム例

var a=new Array(3);
a[0]=10;
a[1]=20;
a[2]=30;
document .write("a[0]の値は " + a[0] + "<br />")
document .write("a[1]の値は " + a[1] + "<br />")
document .write("a[2]の値は " + a[2] + "<br />")

説明

配列 a[0] に、10を入れる。
配列 a[1] に、20を入れる。
配列 a[2] に、30を入れる。
(上の3つをまとめて、var a=new Array(10,20,30)でもよい。)

結果

a[0]の値は 10
a[1]の値は 20
a[2]の値は 30





職業訓練

基金訓練に行ってきました。(54日目)

コメントする


基金訓練(Webデザイン・プログラミング科)の54日目に行ってまいりました。
54日目は、HTML＆CSSプログラミングの実習です。

54日目の内容は下記のとおりです。

１．ネット上のサイトを見てまねてみよう。（その２）

「基金訓練に行ってきました。(51日目)」でやり始めた、ネット上のホームページを真似てみるの続きです。
特に新しい内容はありませんでした。





職業訓練

基金訓練に行ってきました。(53日目その２)

コメントする


基金訓練(Webデザイン・プログラミング科)の53日目に行ってまいりました。
その１の続きです。
53日目は、HTML＆CSSプログラミングの実習です。

本日の内容は下記のとおりです。

１．メニューいろいろ（その２）

罫線で仕切られたメニュー

↑こんな感じです。↑

CSSの例は下記のとおりです。
.menu {
width: 100px;
}
.menu ul {
border-top: solid 1px #999966;
list-style-type:none;
}
.menu li {
border-bottom: solid 1px #999966;
padding: 5px 0;
}
.menu a:link {
color: #336666;
text-decoration: none;
}
.menu a:visited {
color: #999999;
text-decoration: none;
}
.menu a:active {
color: #999999;
text-decoration: none;
}
.menu a:hover {
color: #999999;
text-decoration: none;
}
HTMLの例は、下記のとおりです。
<div class=”menu”>
<ul>
<li><a href=”menu1.html>メニュー１</a></li>
<li><a href=”menu2.html>メニュー２</a></li>
<li><a href=”menu3.html>メニュー３</a></li>
<li><a href=”menu4.html>メニュー４</a></li>
</ul>
</div>

ボックス表示のメニュー

↑こんな感じです。↑

CSSの例は下記のとおりです。
.menu {
font-size:16px;
font-weight:bold;
}
.menu ul {
list-style-type:none;
}
.menu li a {
display:block;
line-height:30px;
width:95px;
padding-left:5px;
background-color:#0c907c;
color:#ffffff;
border-top:solid 1px #999966;
}
.menu li+li+li+li a {
border-bottom: solid 1px #999966;
}
.menu a:hover {
background-color:#0ce0c0;
color: #999966;
}
HTMLの例は、下記のとおりです。
<div class=”menu”>
<ul>
<li><a href=”menu1.html>メニュー１</a></li>
<li><a href=”menu2.html>メニュー２</a></li>
<li><a href=”menu3.html>メニュー３</a></li>
<li><a href=”menu4.html>メニュー４</a></li>
</ul>
</div>
  • ※a要素をブロック要素にした時、ボックスサイズはa要素で指定しないと、IE6では、リンクが文字だけになってしまいます。
  • ※IE6では、メニュー４の下のボーダーが、表示されません。

画像が変化するメニュー

↑こんな感じです。↑

CSSの例は下記のとおりです。
.menu {
font-size:16px;
font-weight:bold;
}
.menu ul {
list-style-type:none;
}
.menu li a {
display:block;
line-height:30px;
width:80px;
padding-left:20px;
background-image:url(menu.gif);
background-repeat:no-repeat;
color:#ffffff;
border-top:solid 1px #999966;
}
.menu li+li+li+li a {
border-bottom: solid 1px #999966;
}
.menu a:hover {
background-position:0 -30px;
color: #999966;
}
HTMLの例は、下記のとおりです。
<div class=”menu”>
<ul>
<li><a href=”menu1.html>メニュー１</a></li>
<li><a href=”menu2.html>メニュー２</a></li>
<li><a href=”menu3.html>メニュー３</a></li>
<li><a href=”menu4.html>メニュー４</a></li>
</ul>
</div>
  • ※IE6では、メニュー４の下のボーダーが、表示されません。

罫線区切り横長メニュー

↑こんな感じです。↑

CSSの例は下記のとおりです。
.menu {
font-size:16px;
font-weight:bold;
}
.menu ul {
list-style-type:none;
}
.menu li {
display:inline;
border-right:solid 1px #aaaaaa
padding:0 10px
;
}
.menu li a {
color:#000000;
}
.menu li+li+li+li {
border-right:none;
}
.menu a:hover {
color: #999966;
}
HTMLの例は、下記のとおりです。
<div class=”menu”>
<ul>
<li><a href=”menu1.html>メニュー１</a></li>
<li><a href=”menu2.html>メニュー２</a></li>
<li><a href=”menu3.html>メニュー３</a></li>
<li><a href=”menu4.html>メニュー４</a></li>
</ul>
</div>
  • ※IE6では、メニュー４の右のボーダーが、残ります。

罫線区切り横長メニュー（背景部分もクリック可）

↑こんな感じです。↑

CSSの例は下記のとおりです。
.menu {
font-size:16px;
font-weight:bold;
}
.menu ul {
list-style-type:none;
}
.menu li {
float:left;

}
.menu li a {
display:block;
width:100px;
line-height:30px;
text-align:center;
border-right:solid 1px #aaaaaa;
color:#000000;
}
.menu li+li+li+li {
border-right:none;
}
.menu a:hover {
background-color:#bbfdb5;
}
.clear {
clear:both;
}
HTMLの例は、下記のとおりです。
<div class=”menu”>
<ul>
<li><a href=”menu1.html>メニュー１</a></li>
<li><a href=”menu2.html>メニュー２</a></li>
<li><a href=”menu3.html>メニュー３</a></li>
<li><a href=”menu4.html>メニュー４</a></li>
</ul>
<div class="clear"></div>
</div>
  • ※IE6では、メニュー４の右のボーダーが、残ります。