javascript – javascriptの型とreturnについて

javascriptの型とreturnについて

javascriptの型

javascriptの型には、5つの基本型と、それ以外のオブジェクト型の合計6つの型が存在する。typeof演算子を使うと、それらの型を調べることができる。(6つの型で返してくれる)

5つの基本型は、

1、文字列型(リテラル)
2、数値型(リテラル)
3、ブーリアン型(リテラル)・・・trueとfalseのみ
4、null型(リテラル)
5、undefined型(定義済みグローバル変数)

に分類できる。

リテラルというのは、変数や定数ではないもの。ぱっと見てその値が認識できるもの。

すなわち、”りんご”はぱっと見てりんごだとわかるので、文字列リテラル、var appleは変数でこれだけでは文字だか数値だかすらわからないのでリテラルではないという感じ。

var a = “1”;
typeof a;

のような感じで、typeof演算子を使って、返る値は、

1、文字列型は、string
2、数値型は、number
3、ブーリアン型は、boolean
4、null型は、object
5、undefined型は、undefined
6、オブジェクト型は、object

となる。上記例はstringが返る。

で、if(var a == 1){};は、自動型変換をする演算子なのでtrue、if(var a === 1){};は型変換しない演算子だから、文字列と数値で型が異なるため、falseとなる。

また、new演算子を使って、インスタンスを生成したときは文字列型や数値型のように見えてもオブジェクト型として認識される。typeofで返る値はstringでなくobjectである。

var a = new String(“1”);
typeof a;

javascriptのreturn

return文は主として関数(function)の中で、返り値を返すときに使用される。whileやfor文内ではbreakが使用される。

function内で、色々な計算結果の後に、return a; のように記述すると、その関数の最終結果としてa(値)が返される。

return trueとしたときは、true(数値でいうと1)が返される。

return falseとしたときは、false(数値でいうと0)が返される。

これらの関数から返される値を元にいろんな計算をしたり、if(a=true){・・・のように判定したりすることが多い。

returnの後に何も記述しない場合や、関数の中にreturnを記述しない場合は、undefinedが返される。つまり、値を返さないでそこでbreakのように離脱する。

たとえば、if(a>0) return;のような文であれば、その条件を満たさなければ、そこで離脱して、そこから先のスクリプトは実行されない。

formのsubmitやアンカーでページ推移を防止するためのreturn falseは深く考えずに覚えるしかないのかな。

2012年11月27日11:52 PM | カテゴリー: javascript | コメント(0)

javascriptのwindow.openについて

window.openといったら、新しいウィンドウを開く命令です。

タブブラウザが一般的となった今の時代においては、新規ウィンドウを開くといったら、タブとして開くか、もしくは別のウィンドウとして開くかの2つのケースを考えなければなりません。

簡単に1例下記の形を考えて見ます。

<script type="text/javascript">
function aiue() {
var w=window.open("http://nkdesk.com/", "_blank", "width=700,height=600,scrollbars=yes");
w.focus();
}
</script>

<input type="button" value="aaa" onclick="aiue()">

(さらに…)

2012年11月27日10:21 PM | カテゴリー: javascript | コメント(0)

フォーム入力のチェック方法

主としてメールフォームになりますが、入力漏れの有無をチェックすることで、送信ボタンを押した時に、「○○が入力されていません」的なコメントが出てくれると有りがたいですよね。

このチェックをする方法は、私のレベルではjQueryを使った方法とPHPを使った方法の2通りしかわからないため、それら2つをまとめてみます。

サンプルとしては、以前使用したPHPでメールフォーム作成のフォームを使用します。

その前に、cssとjQueryでちょっとだけ見やすくします。CSSの解説は省略。

(さらに…)

2012年3月1日10:21 PM | カテゴリー: javascript | コメント(0)

jQueryで画像を拡大プラグイン

サムネイル画像をクリックして、ページを移動せずに拡大させるのに、lightboxを使うことが主流になっていると思います。

自分でjavascriptを使用して書くのもいいですが、プラグイン(ここではprettyphoto)等を使って手抜きをするのも手です。

Wordpressのプラグインとして使用する場合は、下の方を参照してください。

注:このプラグインはIEで上手く表示されないことがあります。syntaxhighlighterのバージョン 3.0.83 の shCore.js が取り込まれると、IE6, IE7, IE8 の場合、JavaScript パーサーが jQuery.js をうまく解釈できないという問題らしい。そのため、lightboxとsyntaxhighlighterを共存させるためには、後者のバージョンを落とさなければならない。単体で使う文には問題ない。

一般サイトにlightboxを導入する

上記サイトのproduction versionというのをDL後、解凍、Macではないので普通の方のフォルダの中の、「cssとimagesとjs」フォルダをコピって、自分のindex.htmlとか表示させたいhtmlファイルの置いてあるフォルダに移動。

そしたら、サンプルのcssとjsファイルを読み込んでいる部分とプラグインスクリプトを貼付け。ファイルの階層は自分の環境にあわせて変えましょう。


<script type="text/javascript" src="js/jquery-1.6.1.min.js" charset="utf-8"></script>

<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />

<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
	$("a.z40[rel^='prettyPhoto']").prettyPhoto({
	animation_speed:'normal',
	theme:'light_square',
	slideshow:3000, 
	});
});
</script>

theme:’light_square’のところを、dark_square、dark_rounded、light_rounded、facebookとかにかえると又違った感じになります。何も書かなければ下記のデフォルトが適用されます。


<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a.z40[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});
});
</script>

(さらに…)

2012年2月9日6:37 PM | カテゴリー: javascript | コメント(0)

2 / 212