無料ゲームで稼げる&高還元率ポイントサイト│ドル箱
↑↑↑↑↑↑
手軽にお小遣い稼ぎができます!!
お得なポイント貯まる!ECナビ
↑↑↑↑↑
ポイントをためよう!!

2010年12月10日

jQeryを使うには

こんにちわ(^^

前回突如として表れた(?)jQueryなる言葉。

知っている人もいるかもしれませんが、

Javascriptライブラリの1つです。

簡単にDOMにアクセスが出来てしかもクロスブラウザ対応なので、

かの有名なIE(インターネットエクスプローラー)とFx(ファイヤーフォックス)の違いにも簡単に対応が可能という、

まぁプログラマにしても、WEBデザイナにしてもすごく助かるものです(^^。

続きを読む
posted by GABAscript at 09:53 | 神奈川 ☀ | Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする

2010年07月15日

Javascriptの動作

最近Javascriptの話をしていなかったので久しぶりにしてみたいと思います(^^;

Javascriptのイベント動作についてです。

が、まず、その前に、ブラウザがHTMLをどう処理しているか、

皆さんご存知ですか?

基本的には、



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



(中身は手抜きです(^^;)

とあった場合、上から順番に読み込まれ、その順番どおりに実行されます。

当然、



<head>
<script type="text/javascript">
alert("こんにちわ。\nJavascriptの世界へようこそ!");
</script>
</head>



とHEADタグの中にある場合、BODYの要素が表示される前にalertが表示され、

画面上には小さなウインドウが表示されます。

しかし、これではタイミング的にまずい場合があります(例えば画像をクリックしたときに処理したいとか、ロードが終わったら処理したい・・・など

その場合に出てくるのがイベント処理です。

例えば何かをクリックしたら何かするという場合。(何かって何よって?何かです(^^


<head>
<script type="text/javascript">
 function hyouji(){
  alert("こんばんわ");
 }
</script>
</head>
<body>
<p onclick="hyouji();">おしてね</p>
</body>


とすれば、「おしてね」をクリックした場合、画面上に小窓が表示されます。

同様に、HTMLが読み込まれた場合というときは


<head>
<script type="text/javascript">
 function hyouji(){
  alert("たぶん良いことあるよ");
 }
</script>
</head>
<body onload="hyouji();">
<h3>おみくじ!</h3>
</body>

と、すればOKです。





次回はこれの解説を行いたいと思います。(^^
posted by GABAscript at 23:33 | 神奈川 ☀ | Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする

2010年06月06日

Javascriptその7

こんばんわ。Gavascriptです。

今日は「return」のお話。

Javascriptでは自分で関数(サブスクリプト)を定義することが可能ですが、その場合…



function kansu(){

何らかの処理

 retrun str;

}



とする場合が往々にしてあります。

こうすると受け手側で好きな変数で受け取ることが可能となります。



<script type="text/javascript">
var a=kansu(1,2);
alert("あなたの入力した数は"+a);
function kansu(n,m){
 var kazu = n + m;
 return kazu;
}
</script>



こんな感じで使うことができます(本来はもっといろんなことが出来るんですがそれは追々(^^;

さて、この時、複数の変数を返したいとき。

どうすればよいのでしょう?

答えは配列を使います。



<script type="text/javascript">
function kansu(){
 return [1,"abc",hensuu,20,"日本語"];
}
var ukeru = new Array();
ukeru = kansu();
for(var i=0;i<ukeru.length;i++){
 alert(ukeru[i]);
}
</script>




これを実行すると返された変数が次々と現れるはずです。






百聞は一見にしかず。

やってみてください(^^
タグ:javascript
posted by GABAscript at 00:30 | ☔ | Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする

2010年05月26日

Javascriptその6

今日は「if」の使い方についてもう少し突っ込んでみてみましょう。

前回、「if(条件文){処理}」と書きましたが、具体的にどういう条件文を書くのかを見たいと思います。

まず、aとbが等しいとき。



var a=0;
var b=0;

if(a==b){
 alert("Javascriptへようこそ!");
}



この「a==b」が等しいときをあらわしています。

逆に言えば「a」と「b」が等しくなければ処理は行われません。

次は小さいときの処理。



var a=0;
var b=1;

if(a<b){
 alert("Javascriptへようこそ!");
}



これも同様で「a<b」が、「a」が「b」よりも小さければと言うところです。

これを、小さいか、等しいときとする場合、

var a=0;
var b=10;

if(a<=b){
 alert();
}



と、します。

同様に大きいときと、大きいか等しいとき。



var a=0;
var b=1;
var c=2;

if(c>a){
 alert("お好きな言葉を入れてね");
}
if(b>=a){
 alert("お好きな言葉を入れてね");
}



で、「c>a」が「c」が「a」より大きいとき。「b>=a」が「b」が「a」より大きいか等しいときです。

これは文字列にも利用できます。



var str="Javascript";

if(str == "Javascript"){
 alert("Javascriptへようこそ!!");
}



また、否定することも出来ます。



var str="こんにちわ";

if(str != "こんにちわ"){
 alert("こんばんわ");
}else{
 alert("こんにちわ");
}


この場合、「!=」が否定ですが、formタグに入れられた言葉で出力する文字を変えたりするときや、スイッチの切り替えなどで使われることが多いです(^^

このように「if」が使えるとスクリプトっぽくなってきます。

この「条件分岐」と「繰り返し処理(ループ処理)」が使えるようになると、いよいよ「プログラムやってる」感が出てきます(^^

今日はここまでです。
タグ:javascript HTML CSS
posted by GABAscript at 22:20 | ☔ | Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする

2010年05月21日

Javascriptその5

前回・・・じゃなくその4の解説です(^^;

特に難しいことはないのですが、

一応確認しておきましょう。



<script type="text/javascript">
 alert("Javascriptへようこそ!!");
</script>



<script type="text/javascript">
function al2(){
if(confirm("
私は男だ。")){
   alert("男の方ですね。");
 }else if(confirm("いやいや女ですよ。")){
   alert("
女性の方ですね。");
 }else{
   alert("どちらでもないとは・・・^^;");
 }
}
</script>
<form><input
type="button" value="Yes,No窓" onclick="al2();" /></form>



の2つのスクリプトでした。

まず2行目の

alert("Javascriptへようこそ!!");

ですが、これは「警告("文字列"+変数);」こんな感じで記述します。

「alert」は「警戒」と訳すみたいですが、警告のほうがしっくりきます。

さて、中の文字はなんでもいいのですが、必ず「"」このダブルクォーテーションでくくります。

この「"」はいろんなプログラミング言語で文字列、すなわち「画面に出したい文字または文章」を扱うさいに使用されます。

では、変数はどうすればよいのかといえば、「"」の外側においてあげればOKです。

しかし、「"」が前後にある場合は「"文字列"+変数」としないといけません。

また、改行する事も出来ます。

alert("こんにちは\nGAVAscriptです。\nJavascriptへようこそ!!");

というように「\n」で入力してあげると改行されます。

\とは¥と同義語となりますので、「私のPCじゃ\が出ない!!」と嘆かなくてもOKです(^^

ちなみに「 \ 」はバックスラッシュといいますが、日本語では¥マークが普通に出るかと思います。

長くなりましたが・・・(^^;

続いて、functionはその3で解説していますのでそちらを・・・

また新しいものが出てきましたね・・・「if(confirm("私は男だ。")){」ですが、

まず、「if」について。

これは「条件分岐」を示します。

「if(条件){}」という風に書き、「条件が真」なら「{}」を実行。

という意味になります。

さて、「真」ならとはどういう意味でしょうか。

簡単に言えば、「0(オーではありません。ゼロです(^^;)」でないときが「真」です。

ちょっと分かり難いかもしれませんが、何度かやっていくうちにわかるようになると思います。

これからもちょくちょく「真」でなければ、や「真」であればというような表記が出てくるかと思いますが、よく読めば分かるはずです。

では、上の「if(〜)」は何なのかといえば、「confirm("私は男だ。")」の結果が「真」ならば{}の処理をする。

confirmとはドラクエ(ドラゴンクエストモンスターズ ジョーカー2
)でよく出てくる「はい」、「いいえ」の選択肢みたいなものが出てきます。

その結果が「はい」であれば「真」となるので、{}の中のalertが実行されるわけです。

その次も同様です。

また、ifの後、「{}」で結ぶのも忘れないように。

Javascriptの場合、改行しなければそのまま続きで処理はしてくれますが、

後々改造したりするときに混乱をきたすことがありますので、

必ず「{}」で結びましょう。

また、「else」というのが出てきますが、「if」が「真」でない場合次に実行されるものです。

これについては必ずなければならないというわけではありませんが、「その他」があればこの「else」に続けて「if」を書いてください。

上のように「男か?」という質問に、「No」と答えた。

じゃぁ次の質問「女か?」という質問に、「Yes」と答えたなら、

画面に「女性ですね」と出す。

と書くだけなら3つ目の処理はいりませんが、ちょっと面白くするために、3つ目をつけてみました(^^

ちなみに、<input 〜>タグもありますが、これはボタンを押すと実行とするためにおいているだけなので、functionをつけなければ、HTMLが読み込まれたときに実行することも可能です。

まぁ、画面読み込むたびに「男ですか?」と聞かれるのもねぇ・・・(^^;

と言う事で本日はここまでです。

何かリクエスト等がありましたらコメントまでお願いします。
タグ:javascript HTML CSS
posted by GABAscript at 00:25 | ☔ | Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする

2010年04月17日

Javascriptその4

今日は画面上に警告をだす方法です。



<script type="text/javascript">
 alert("Javascriptへようこそ!!");
</script>







これは基本的に何かしらエラーを出すための物ですが、
私は基本的に自分で組んだscriptがどこまで動いているかを確認するときに使っています(^^

ちなみ、ゲームのような「OK、キャンセル」ボタンを出すことも可能です。






こんな感じにすると簡単なゲームも作れそうですね(^^

内容はこんな感じです↓


<script type="text/javascript">
function al2(){
if(confirm("私は男だ。")){
   alert("男の方ですね。");
 }else if(confirm("いやいや女ですよ。")){
   alert("女性の方ですね。");
 }else{
   alert("どちらでもないとは・・・^^;");
 }
}
</script>
<form><input type="button" value="Yes,No窓" onclick="al2();" /></form>


と言う事で今日はここまでです。
タグ:javascript HTML
posted by GABAscript at 23:41 | ☔ | Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする

2010年04月15日

Javascriptその3

今日は前々回の解説です。



<script type="text/javascript"><!--
function tasu(){

var i = eval(document.myform.mf0.value);
var j =
eval(document.myform.mf1.value);
var k = i+j;
document.myform.kotae.value = k;
}
//--></script>
<br>
数字1と数字2を足します。
<br>
<form name="myfrom">

数字1<input type="text" name="mf0" value="0">
数字2<input
type="text" name="mf1" value="0">
<input type="button"
value="計算!" onclick="tasu();">
答え<input type="text"
name="kotae" value="0">
</form>



上から順に見ていきましょう。

まずは1行目は既に解説していますので2行目から。
function tasu(){
とありますが、これは「関数」が呼び出されているところです。

「function」これが関数を定義するところで、その隣「tasu()」が関数名となります。

ここは基本的に好きな名前をつけられますが、必ず「半角英数」で、先頭は「英」のみとなります。

なので「たす()」や、「123()」や、「12abc()」などはつけられません。

この辺は覚えやすくわかりやすいものでいいと思います(^^。

続いて3〜5行目。
var i = eval(document.myform.mf0.value);

var j =
eval(document.myform.mf1.value);

var k = i+j;
document.myform.kotae.value = k;

「var」とありますがこれは「var 変数名」とし、「変数を使いますよ〜」と宣言しているところです。

C言語やVBなどはこの宣言によって、小数点を扱えるものや整数のみ、文字が入るものなどいろいろと区別されますが、Javascriptでは特に区別はなくこの「var」宣言のみ(配列は別ですが(^^;)です。

しかもこの宣言は必ず必要というわけではなく突然変数を使用することも可能です。

さて、「var i」など、通常変数は「i」からなんですが・・・この辺は気にせず「i」から始まるんだなと覚えておいてください(^^;
ちなみにこの変数名も関数名と同じくつけられます。

その後の「eval(document.myform.mf0.value);」ですが、これはhtmlの<form>タグの「myform」というところの「mf0」という名前に入力された数値「value」を読み込み、それを「eval();」という関数で数値に変更しているところです。

わかりにくいですね(^^;

要するに「数値1の数字を読み取りJavascriptで利用できる【数値】に変換している」ということなんです。

この辺は慣れてくればわかりますので今はそんなもんだと覚えておいてください。

で、3,4行目は変数「i」、「j」にそれぞれ代入しています。

今回の場合そのままでも計算できなくはありませんが、練習と言う事で、変数への代入を行っています。

5行目が計算です。変数「i」、「j」を足し、「k」に代入しています。

そしてその後、「document.myform.kotae.value」は先ほどと同じで、「kotae」に変数「k」を代入しています。

最後に「}」ですが、最初に「function tasu(){」にあるように、関数で呼び出した処理は通常「{}」で囲みます。

この「{」から「}」までが「function tasu()」の処理として行われますので、この「{}」の外に処理を書いても「tasu()」で、処理されません。

また、各行の最後に「;(セミコロン)」がありますが、
これも、「var i = eval(document.myform.mf0.value);」ここまでが1処理です。

と言う事で1つ処理が終わるごとに「;」を必ず打つようにしてください。

忘れるとエラーでとまるか、エラーすら出ずにそこで処理が強制終了してブラウザがとまってしまうかもしれません。

また、無用に打ってしまうと、必要な処理がされないこともありますので気をつけてください(^^


長々と説明しましたが、今日はここまでです。

何かわからないこと等あればコメントへどうぞ。
タグ:javascript
posted by GABAscript at 22:58 | ☁ | Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする

2010年04月11日

Javascriptその2

今回はJavascriptでの計算方法です。

エクセルなどを使ったことがある方はすぐに覚えられると思いますが・・・



答えを入れる変数 代入演算子 計算式
         x                       =          1+1;



簡略化してかくとこんな感じです。

左側に「変数」というものがありますが、これは数学などで習った「X+Y=Z」と同じような、
中身を計算などで替えられるものです。

実際にやってみましょう。



<script type="text/javascript"><!--
 var i=0;
 i = 2+3;
 document.write(i);
//-->



こうすると計算結果が画面に出力されます







これを発展させるといろいろな計算が出来るようになります。

例えば<input>タグなどを使い入力スペースを作りその数を計算させたりすることが可能です。






数字1と数字2を足します。



数字1
数字2

答え





中身はこんな感じです↓



<script type="text/javascript"><!--
function tasu(){
var i = eval(document.myform.mf0.value);
var j = eval(document.myform.mf1.value);
var k = i+j; document.myform.kotae.value = k;
}
//--></script>
<br>数字1と数字2を足します。
<br>
<form name="myfrom">
数字1<input type="text" name="mf0" value="0">
数字2<input type="text" name="mf1" value="0">
<input type="button" value="計算!" onclick="tasu();">
答え<input type="text" name="kotae" value="0">
</form>



最後にどんな計算が出来るか少しですがのせておきます。
ちなみに、競合する場合の優先順位は上のほうほど高くなります。



() [] .
! ++ --
* / %
; -
== !=
&&
||





ちなみに掛け算は「*」、割り算は「/」、引き算は「-」です。

他には「==」等しいとき、「!=」等しくないとき、「++」1加算、「--」1減算などをよく使います

今日はここまで。
Javascriptに関する質問等を募集中です。
コメントに書き込んでいってください(^^。
タグ:javascript
posted by GABAscript at 23:41 | ☁ | Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする

2010年04月09日

Javascriptその1

と言う事で、今回からJavascript編となります(駄文もありますが(^^;)

まずはJavascriptの利用を宣言し、JavascriptをHTMLに記述します。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Javascriptでいこう!!</title>
</head>
<body>
<script type="text/javascript"><!--
 document.write("ようこそJavascriptへ!");  //Javascriptでhtmlに書き込み
//--></script>
</body>
</html>



ここで、Javascriptの部分を見てみましょう。
<script type="text/javascript"><!--

 document.write("ようこそJavascriptへ!");  //Javascriptでhtmlに書き込み

//--></script>


ここがJavascriptですが、この中の「document.write」という部分ですが、
「文書に書き込め」という命令となります。
その後ろの「("ようこそJavascriptへ!");」という部分が、
書き込まれる文字をあらわしています。
すると「どこまでが画面に表示されるのか?」、
では見た目を見てみましょう。









つまり「("");」の部分は表示されません。

Javascriptでは「document」をオブジェクト、「write」をメソッドと呼びます。

その隣の「("");」で囲まれた部分を処理するという意味になります。(英語に強い方はわかると思いますが、この場合documentに書き込むという意味です(^^)

つまり、


document.write(""Javascriptへようこそ!);


とすると、エラーとなり、実行されません(ブラウザによっては止まってしまうかもしれません(^^;)

今回はここまでです。


もし何かJavascriptで組んでほしいscriptがあればコメントに記入してください(^^
タグ:javascript
posted by GABAscript at 22:47 | 🌁 | Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。