• ログインログイン
  • 新規登録新規登録

MENU

初心者の初心者による初心者のためのWEBサイト制作入門 第7回

連載初心者の初心者による初心者のためのWEBサイト制作入門

プログラミングが全くわからない!そもそもホームページの作られ方からよくわかっていない、という学生必見のコンテンツです。今となっては周りに聞きづらい、タグの説明やCSSの書き方まで、初心者が一番知りたい内容が盛りだくさんです。

前回までのプログラミング学習コラムに続き7回目の勉強内容です。

こんにちは、前回はWEBサイトにアニメーションを導入するところまで説明しました。今回もJQueryについて解説します。

第7回は、前回の記事の内容を理解した人にとっては消化試合であるかもしれませんが、

  1. HTMLの操作
  2. dblclick
  3. ifを用いた条件分岐

の3つについてです。

前回の操作の出発点となったコードを参考までに載せておきます。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">

</script>
<script type="text/javascript"></script>
<title>Black Box</title>
</head>
<body>
</body>
</html>

まずは、ホームページ上のテキストをボタンのクリック一つで変更する技術についてです。<body>内に、

<body>
<p id=”t_01”>HELLO</p>
</body>

と記述してください。

このHELLOを、ボタンをクリックすることでBYEに変えるという仕掛けを作ります。ここで、idは要素を識別するために、固有の名前を付ける効果がある、ということを思い出してください。

<script type="text/javascript"></script>

次に、このタグ内に、

$(function(){
$(“button”).click(function(){
$(“p#t_01”).text(“BYE”)
});
});

と記述すれば完成です。

同様にして、HTMLの変更と要素の移動も行うことができます。それぞれ、、

$(function(){
$(“button”).click(function(){
$(“p#t_01”).html(“<br>BYE</br>”)
});
});

$(function(){
$(“button”).click(function(){
$(“BYE”).insertAfter(“<p>”)
});
});

このinsertAfterはelement.insertAfter(target)の形で、elementをtargetで指定された場所、つまり要素の後ろに追加します。

つまり、この場合は<p>要素の後ろにBYEを追加するということですね。

さらに、1回ではなく2回クリック(ダブルクリック)した場合に変更を行いたい場合は、click部分をdblclickに変えてください。

次は、プログラミングを学ぶ際に避けては通れない概念である、条件分岐についてです。

条件分岐とは、プログラム中で、ある条件が満たされているかどうかによって次の行動を実行するコードを切り替える命令のことです。

if(条件){
条件を満たしたときの処理
}else{
それ以外の処理
}

のように記述します。

また、変数(variable)というのは、難しくいえばプログラムのソースコードにおいて、扱われるデータを一定期間記憶し必要なときに利用できるようにするために、データに固有の名前を与えたものです。

これでは何のことかわかりませんね。簡単にいえば、何かを投げ込んだら何かが返ってくる仕組みのブラックボックスのようなものです。

var 変数名=“値”

と記述します。一例を挙げると、

var currentColor=”#000000”

で、=は右のものを左に代入するという意味なので、このコードは赤色にしろ、という命令を表していることになります。

ちなみに、==は普段数学などで用いる=(イコール、同値)と同じ意味を表しますので、混同しないよう注意が必要です。

では最後にこの条件分岐と変数の概念を用いた、箱の色が赤と黒に交互になるようなプログラミングを紹介します。

$(function(){
var currentColor=”#000000”;
$(“button”).click(function(){
if(currentColor==”#000000”){
currentColor=”#FF0000”;
}else{
currentColor=”#000000”;
}
$(“#box”).css(“background-color”,currentColor)
});
});

最初は黒色でクリックするたびに赤→黒→赤・・・となります。

上の記述の内容を日本語で説明するならば、回りくどいかもしれませんが「最初の箱の色を黒色とし、クリックするたびに色を確かめる。このとき、箱の色が黒色であるならば赤色に変更し、そうでなければ、すなわち箱の色が赤色であるならば黒色に変更する」とでもなりましょうか。

第7回はこれにて終了です。

次回はこれまでの総まとめとなる記事を書くつもりです。お楽しみに!

オススメ記事一覧

もっと見る
完全無料!

1で登録完了!

エンジニアの仕事・年収や選考ノウハウ記事が読めるほか、
会員にはプログラミング講習やES・面接対策などリアルな無料サポートも充実。
ここだけの求人情報も多数。

今すぐ新規会員登録
Page Top