JavaScriptとは?

javascriptとjavaは別物です。

目次

基本的な足し算 引き算 掛け算 割り算

変数a+変数b=変数i・・・・i=a+b
変数aー変数b=変数i・・・・i=a-b
変数a*変数b=変数i・・・・i=a*b
イヌでもわかるJavaScript講座  http://www.red.oit-net.jp/tatsuya/index.htm
とほほのJavaScriptリファレンス http://www.tohoho-web.com/js/
パズルネット智慧   http://www.pori2.net/index.html

乱数

乱数 Math.random()

0~4までの乱数を発生させる
rnd = Math.floor( Math.random() * 5 );

連想配列

■配列をつくる
var array = new Array();
var array = ["A" , "B" , "C" , 123 , 456 , true , false, banana, gorilla];

■多次元配列をつくる
var partyMember = new Array();

// 1次元配列の各番地に、配列を作成して格納する
partyMember[0] = new Array();
partyMember[1] = new Array();
partyMember[2] = new Array();

partyMember[0] =[100,10,5,6,7,8,9,0]; 
document.write(partyMember[0]);
// 100,10,5,6,7,8,9,0 と表示される

document.write(partyMember[0][1]);
// 10 と表示される

partyMember[1]=[200,30,15,16,17,18,19,10];
var chara1 = partyMember[1];
// chara1に代入
document.write(chara1 );
// 200,30,15,16,17,18,19,10と表示される

document.write(chara1[0]);
// 200 と表示される

配列リテラルを使って二次元配列を作成する
// ※ボードゲームの配置にも使える。0で初期化
var patyMember = [

  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]

];

http://hakuhin.jp/js/array.html
http://www.ajaxtower.jp/js/array/index5.html 引用元

Math.max 一番多い. sort昇順

<script type=”text/javascript”> 

var a = 100;

var b = 50;

var c = 60;

var d = 70;

alert(“a”+a+”です”);//a100です

alert(“b”+b+”です”);//b50です

alert(“aとbでは”+Math.max(a,b)+”です”); //100です

alert(“cとdでは”+Math.max(c,d)+”です”); //70です

var maxAray = new Array();

var maxAray = [a, b, c, d];//100,50,60,70

document.write(Math.max.apply(null,maxAray));//100 と表示されます 

</script>

https://www.softel.co.jp/blogs/tech/archives/1377 引用

<script type=”text/javascript”>

function sortNumber(a,b)

{

return a – b;

}

var n = [“10”, “5”, “40”, “40”, “100”, “1”];

document.write(n.sort(sortNumber));

</script>

100,40,25,10,5,1昇順にするだけ。最初が何かは自身で引き出してください。
http://memopad.bitter.jp/w3c/jsref/jsref_sort.html 引用元

関数

関数とはひとつの処理内容をまとめたものです。
なぜひとつにまとめる必要があるのか?というと、

まず、ひとつの理由として挙げると、

”「呼び出すタイミングを指定するときに必要。」

「”同じ処理”を”繰り返し利用”するときに便利である。」等”が挙げられます。

jsですとこのように書きます。※nameは自由に名前を変更できます。

※1

function name(){

処理内容を書く

alert(“関数です”);

}

呼び出し時には関数に使ったnameで呼び出します。

name();

厳密にはDOM要素がロードされてから!だとかクリックしてから!だとか、そういった類の処理が必要な場合があります。jsから入ってきた初心者は、その辺りが躓きやすいところでもあります。

ましては要素側に発火命令を書けない場合は特に。

jQueryには最初からそういった類の関数の書き方が用意されています。

$(function(){

処理内容を書く

});

これだけで、すでに全体のDOM要素がロードされてからとなっています。

しかも、要素をクリックをしたら等の命令も簡単に指定できます。

$(‘#typo’).on(‘mouseover’, 関数名);

※1まずはjs方式でいいので、アラートを呼び出す関数を作ることを体験してみるのがわかりやすくていいと思います。見て悩むより実際取り組んで調べて悩むこと。

変数の使用範囲 javascript

var a=”hoge1″

function hoge(){

var b=”hoge2″

alert(a); //underfind 見つからない!

var a=”hoge3″

alert(a);//hoge3

}

alert(b);//underfind 見つからない!

varがついた場合ローカル変数です。関数外で宣言した場合は関数外でのみの利用可能。
関数内で宣言した場合は関数内でのみ利用可能。

できるかぎりローカル変数を使用して不注意による上書きを減らします。

引数

function calc(a,b,c){
  n=a+b+c;
   //三つの何かを足す処理
   return n;
   //とりあえずnに答えをかえします。
   //nがないとi↓はunderfild

}

i=calc(100, 200, 300);

ここで実際に計算します。calcを呼び出して機能させ、かっこの中を計算します。
i=calc(変数x, 変数y, 変数z)でお買い物の計算に便利ですね。

表示には i を使って下さい。

iは600と表示されます。

表記ミスがあれば訂正お願いします。

クラス名を取得

(クラス名がわかっている場合)

<li class=”clname”>取得したい要素1</li>

〜〜〜

var elm= document.getElementsByClassName(“clname”);

あとはelm を使ってスタイルの変更等する。

elm[0].style.background = ‘#c0c0c0’; 

ゆうこさんを移動例

yuko tyrano_charaに”配列“として変数名yukoに入ります。
var yuko=document.getElementsByClassName(“yuko tyrano_chara”);

yuko[0].style.position = ‘absolute’;
yuko[0].style.left=’200px’;

yuko tyrano_charaに属したものが一個目なので0と記入してます。

jqueryの方が簡単かもしれませんが、jsから入った方用です。

jQueryとは

jQueryとは、John Resig(ジョン・レッシグ)氏によって開発/公開されたJavaScript用のライブラリです。

特にCSSを操るとき、よりわかりやすい構文となっています。
http://semooh.jp/jquery/ jQuery日本語リファレンス (このサイトのヌーの吹き出しを
マウスホバーしてみてください。短い構文でできちゃうことがわかります。)

$(“button”).mousedown(&color(#FF0000){downFunc}); //(“button”)のbuttonはnameで指定したものにしてみてください。 function &color(#FF0000){downFunc}(eo){ alert(“mousedownしたよ!”);//アラートalertがでます。 }

http://jquerystudy.info/reference/events/mousedown.html 引用


目次