Category Archives: JavaScript

「JavaScript入門」input type = ”file”ファイルトリガーのサンプル

<script type=”text/javascript” src=”script/jquery-1.6.2.min.js”></script>
<script type=‘text/javascript‘>
function selectFile(){
//clickイベント
$(“#file”).trigger(“click”);
}
/*ファイルパスの取得*/
function getFilePath(){
alert($(“#file”).attr(“value”));
}
</script>
</head>
<body>
<input type=”file” id=”file” onchange=”getFilePath()”
style=”filter:alpha(opacity=0);opacity:0;width: 0;height: 0;”/>
<button onclick=”selectFile();”>select file</button>
<button onclick=”getFilePath()”>get FilePath</button>

「JavaScript入門」isNaN関数のサンプル

例1
var ct = isNaN(s) ? null : s < 0 ? -1 : 1;

例2
if(isNaN(xx))
{
//some code
}
例3
isNaN(NaN) // true
isNaN(‘sample’) //true
isNaN(undefined) // true
isNaN({}) // true

isNaN(0) // false
isNaN(‘2.423’) // false
isNaN(null) // false

Array.prototype.join()で 配列の要素を繋げて文字列を作る

1.Array.prototype.concat()
concat() メソッドは、配列に他の配列や値をつないでできた新しい配列を返します。
サンプルコード
var cft = [‘サンプルAA’, ‘サンプルBB’, ‘サンプルCC’];
var result = ary.concat(33,44,[55,66]); // [“サンプルAA”, “サンプルBB”, “サンプルCC”, 33, 44, 55, 66]

2.Array.prototype.join()
配列のすべての要素を繋いで文字列にします。
サンプルコード
var cft = [‘サンプルAA’, ‘サンプルBB’, undefined, ‘サンプルCC’];
var result = cft.join(); // “サンプルAA,サンプルBB,,サンプルCC”
var result = cft.join(”); // “サンプルAAサンプルBBサンプルCC”

「jQuery入門」lengthで要素が存在するか判定サンプル

1.htmlコード
<div class=”cft”>data-AA</div>
<div class=”kdf”>data-BB</div>
<div class=”cft”>data-AA</div>
<div class=”hyl”>data-CC</div>
<button>length要素チェック</button>
<p id=”result”></p>

2.JSコード
$(‘button’).click(function(){
if( $(‘.kdf’).length == 0){
$(‘#result’).text(‘data-BBが存在しません。’)
}else{
$(‘#result’).text(‘data-BBが存在します。’)
}
})

「JavaScript入門」call()でthisの値をコントロールする

サンプルコード
var cftObject = {}
var cftFunction = function(pp1, pp2){
this.a = pp1;
this.b = pp2;
console.log(this);
}

cftFunction.call(cftObject, ’31’,’32’);
console.log(cftObject);
//出力:Object { a: “31”, b: “32” }

「JavaScipt入門」onclick=function(e)を利用するサンプル

1.htmlコード
<div id=”cftDiv”>
<input type=”button” value=”testButtonOne” id=”btn1″>
<input type=”button” value=”testButtonTwo” id=”btn2″>
<input type=”button” value=”testButtonThree” id=”btn3″>
</div>

2.JSコード
<script type=”text/javascript”>
document.getElementById(“cftDiv”).onclick=function(e){
e=window.event||e;
var btnId=e.target.id;
switch(btnId){
case “btn1”:
console.log(“testButtonOne”);
break;
case “btn2”:
console.log(“testButtonTwo”);
break;
case “btn3”:
console.log(“testButtonThree”);
break;
}
}
</script>

「django入門」静的ファイル(css、js、images)を読み込むメモ

1.静的ファイルのフォルダ
STATICFILES_DIRS = (
(“images”,os.path.join(STATIC_URL, ‘images’).replace(‘\\’, ‘/’)),
(“css”, os.path.join(STATIC_URL, ‘css’).replace(‘\\’, ‘/’)),
(“js”, os.path.join(STATIC_URL, ‘js’).replace(‘\\’, ‘/’)),
)

2.ディフォルトの設定
STATICFILES_FINDERS = (
“django.contrib.staticfiles.finders.FileSystemFinder”,
“django.contrib.staticfiles.finders.AppDirectoriesFinder”

)

3.使用例
{% load static from staticfiles %}
{% static “css/sample.css” assample %}
<link href=”{{ sample }}” rel=”external nofollow” rel=”stylesheet”>

「JavaScript入門」requestFullScreen()でページのフルスクリーンを実行するサンプル

JSコード
function FullScreenEnterFunc() {
document.getElementById(‘cft’).style.height = screenHeight+”px”;
var d= document.getElementById(‘cft’);
if (d.requestFullscreen) {
d.requestFullScreen();
} else if (d.webkitRequestFullScreen) {
d.webkitRequestFullScreen();
} else if (d.mozRequestFullScreen) {
d.mozRequestFullScreen();
} else {
d.msRequestFullscreen();
}
}

「JavaScript入門」scriptタグを動的に実行する方法

サンプルコード
//IEの場合
var script = document.createElement(“script”);
script.setAttribute(“type”,”text/javascript”);
script.onreadystatechange = function() {
if(this.readyState == “loaded” || this.readyState == “complete”){
console.log(“load success”);
}
}
script.setAttribute(“src”,scripts[i]);

//Opera、FF、Chromeの場合
var script = document.createElement(“script”);
script.setAttribute(“type”,”text/javascript”);
script.onload = function() {
console.log(“load success”);
}
script.setAttribute(“src”,scripts[i]);

「JavaScript入門」指定時間後にwindowを閉じるサンプル

JSコード
<script language=”javascript”>
<!–
function closewindowFunc(){
self.opener=null;
self.close();
}

function clock(){
i=i-1
document.title=”本ウィンドウ”+i+”秒後自動閉じる”;
if(i>0)
setTimeout(“clock();”,1000);
else
closewindowFunc();}
var i=10;

clock();
//–>
</script>