基金訓練(Webデザイン・プログラミング科)の54日目に行ってまいりました。
60日目は、HTML＆CSSプログラミングの実習です。
60日目の内容は下記のとおりです。
１．ネット上のサイトを見てまねてみよう。（その３)
「基金訓練に行ってきました。(51日目)」でやり始めた、ネット上のホームページを真似てみるの続きです。
特に新しい内容はありませんでした。
特に新しい内容はありませんでした。
実習で使用している教本
-
-
ページ
カテゴリー
-
基金訓練に行ってきました。(60日目)
基金訓練(Webデザイン・プログラミング科)の54日目に行ってまいりました。
60日目は、HTML＆CSSプログラミングの実習です。
カテゴリー: 職業訓練
コメント / トラックバック: 0個
基金訓練に行ってきました。(59日目)
基金訓練(Webデザイン・プログラミング科)の58日目に行ってまいりました。
59日目は、jQueryの実習です。
59日目の内容は下記のとおりです。
１．jQueryとは
- JavaScriptを簡単に書くためのライブラリ。
- HTML、CSSを知っていると使いやすい。
- プラグインが豊富。
２．jQueryで、できること。
JavaScriptでできることが、より簡単にできます。
(イベント処理、スタイルシート操作、アニメーション、サーバとの非同期通信(Ajax)等。)
(イベント処理、スタイルシート操作、アニメーション、サーバとの非同期通信(Ajax)等。)
３．jQueryで、できないこと。
JavaScriptでできないことはできません。
4．jQueryの設置方法。
jQuery本体のダウンロード
jQueryの公式サイトから、ダウンロードして設置します。
具体的には、TOPページのメニューからDownloadページに移動し、見出し「Download jQuery」の「Current Release」の「Minified」を右クリックして「名前をつけてリンク先を保存」(FireFoxの場合)します。(IEの場合は、｢対象をファイルに保存｣)
jQuery本体のHTMLへの読み込み
head内に記述します。
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
srcの値は、ファイルを置いた場所を指定します。
別の方法として、Google AJAX Libraries APIを利用するやり方があります。
この場合の記述は、下記のようになります。
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
</script>
</head>
URLの中の「1.2.6」は、jQueryのバージョンで、使用したいバージョンによって変更します。
５．jQueryの記述方法
jQueryは、JavaScriptと同じで、scriptタグ内、または、外部ファイルに
記述します。
<script type="text/javascript">
<!–
$(function() {
ここに jQuery を記述
});
//–>
</script>
６．html()メソッド
html()メソッドは、タグで囲まれた部分を、文字列で返します。
JavaScriptのinnerHTMLと同じです。
プログラム例
script部
$(function() {
$(‘#button’)
.click(function() {
$(‘.contents p’).html(‘p 書き換え後’);
$(‘.contents li’).html(‘li 書き換え後’);
});
});
HTML部
<input id="button" type="button" value="書き換え">
<div class="contents">
<p>p の中身</p>
<ul>
<li>li の中身</li>
<li>li の中身</li>
<li>li の中身</li>
</ul>
</div>
説明
$(‘#button’).click(function() { }
ID="button"のタグで、マウスクリックされた時{ }内を実行します。
$(‘.contents p’).html(‘p 書き換え後’)
class="contents"のpの中身を書き換えます。
$(‘.contents li’).html(‘li 書き換え後’)
class="contents"のliの中身を書き換えます。
結果
７．スタイルシートの書き換え
css()メソッドを使用してスタイルシートを書き換えます。
プログラム例
script部
$(function() {
$(‘#button2’) .click(function() {
$(‘.contents2 p’).css(‘fontSize’,’150%’);
$(‘.contents2 p’).css(‘fontWeight’,’bold’);
$(‘.contents2 p’).css(‘color’,’#ff0000′);
$(‘.contents2 li’).css(‘color’,’#00ff00′);
});
});
HTML部
<input id="button2" type="button" value="書き換え">
<div class="contents2">
<p>p の中身</p>
<ul>
<li>li の中身</li>
<li>li の中身</li>
<li>li の中身</li>
</ul>
</div>
説明
$(‘.contents2 p’).css(‘fontSize’,’150%’);
$(‘.contents2 p’).css(‘fontWeight’,’bold’);
$(‘.contents2 p’).css(‘color’,’#ff0000′);
class="contents2"のpタグに style="font-size:150%;font-weight:bold;color:#ff0000" を書き加えます。
結果
備考
jQueryは、配られたプリントで習っており、下に紹介している教本には載っていません。
実習で使用している教本
カテゴリー: 職業訓練
コメント / トラックバック: 0個
基金訓練に行ってきました。(58日目)
基金訓練(Webデザイン・プログラミング科)の58日目に行ってまいりました。
58日目は、JavaScriptプログラミングの実習です。
58日目の内容は下記のとおりです。
１．form要素のイベント処理
プログラム例
<script type="text/javascript">
function check (box)
{
var obj = document .getElementById ("img");
obj .src = box .options[box .selectedIndex] .value;
}
</script>
body内
<form>
<img id="img" src="square_1.gif">
<select onChange="check(this)">
<option value="square_1.gif">正面</option>
<option value="square_2.gif">左向き</option>
<option value="square_3.gif">右向き</option>
</select>
</form>
説明
function check (box)
プルダウンメニューのオブジェクトを受け取ります。
obj .src = box .options[box .selectedIndex] .value
プルダウンメニュー(box)の選択項目を配列のデータとして、選択された配列の番号の配列データのvalueの値を、関数objのsrcの値に入れます。
(
配列の番号は、選択項目の上から0,1,2とつきます。ここの例では、正面が0、右向きが1、左向きが2になります。)
<select onChange="check(this)">
プルダウンメニューが選択された時、関数checkを引数カレントオブジェクトで実行します。
(この場合カレントオブジェクトは、プルダウンメニュー)
結果
２．innerHTMLプロパティ
タグの中身を書き換えるのに使います。
プログラム例
<script type="text/javascript">
function disp2()
{
var msg = document .getElementById("msg");
var moji = document .getElementById("moji");
msg .innerHTML = "あなたは、" + moji .value + "と入力しました。";
}
</style>
body内
<input id="moji" type="text" size="30" />
<input type="button" value="表示" onclick="disp2()" />
</form>
<div id="msg">
ここに入力した内容が表示されます。
</div>
説明
msg .innerHTML = "あなたは、" + moji .value + "と入力しました。"
関数msgに入っているタグの中身を＝以降の文字列に書き換えます。
(関数msgにはdiv#msgが入っており、その中身は｢ここに入力した内容が表示されます。｣です。)
結果
３．JavaScriptの標準オブジェクト
Mathオブジェクト
数値計算を行うためのオブジェクト。
プログラム例
<script type="text/javascript">
function rnd(m,n)
{
return Math .floor(Math .random()*(n-m+1))+m;
}
function sai()
{
var n = rnd(1,6);
var obj = document .getElementById("hyouji");
obj .value = n
}
</style>
body内
<form>
<input id="hyouji" type="text" size="1" />
<input type="button" value="さいころ回転" onclick="sai()" />
</form>
説明
return Math .floor(Math .random()*(n-m+1))+m;
Math.random()で0以上1未満の乱数を発生させ、6を掛け、その値をMath.floorで小数点以下の数字を切り捨て、最後に1を足した値を返す。
(結果、1から6までの整数が返される。)
結果
dateオブジェクト
日付を管理するためのオブジェクト。
プログラム例
<script type="text/javascript">
function today()
{
setTimeout("today()",1000);
var obj=document.getElementById("hyouji2");
var t=new Date();
var h=t.getHours();
var m=t.getMinutes();
var s=t.getSeconds();
obj.value=h+":"+m+":"+s;
}
</script>
body内
<body onLoad="today()"
<form>
現在は、
<input id="hyouji2" type="text" size="10" />
です。
</form>
</body>
説明
var t=new Date()
関数 t に、システム時間を入れます。
var h=t.getHours()
関数 h に、関数 t の時を入れます。
var i=t.getHours()
関数 m に、関数 t の分を入れます。
var j=t.getHours()
関数 s に、関数 t の秒を入れます。
結果
stringオブジェクト
文字を扱うためのオブジェクト。
プログラム例
<script type="text/javascript">
var Msg = "sei2の日記にようこそ！！！！！";
function disp3()
{
setTimeOut("disp3()",500);
var obj = document .getElementById("hyouji3");
Msg = Msg.substring(1,Msg .length) + Msg .substring(0,1);
obj .value = Msg;
}
</script>
body内
<body onLoad="disp3()">
<form>
<input id="hyouji3" type="text" size="30" />
</form>
</body>
説明
Msg = Msg.substring(1,Msg .length) + Msg .substring(0,1)
変数Msgに、Msgのもとの値の2文字目から最後の文字までの後ろに、最初の1文字を連結した値を入れます。
Msg.substring(a,b)
文字列(変数Msg)のa番の文字から、b番の前の文字までを取得します。(この時、左の1文字目が0番になります。)
Msg.length
文字列(変数Msg)の文字数を取得します。
結果
ダイアログ
ダイアログを開くメソッド。
実習で使用している教本
カテゴリー: 職業訓練
コメント / トラックバック: 0個
