JavaScriptおよびjQuery学習ノート(0)


最終更新日:2014年11月17日
この章ではjavascriptの小さな注意点について説明します.また、普段一番使っているのは配列とオブジェクトです.

<html>
<head>
<script>
function test(a){
	return a + '01';
};

function b(){
	var ret = test(0011);//   9
	//var ret = test('0011');//     0011
	document.getElementById("a").innerHTML=ret;
	//     0.3,          
	console.log(0.1+0.2);//System.out.println(0.1+0.2);
	console.log(+1);
	console.log([]);//Array[]
	console.log(+[]);//0
	console.log([]+1);//1
	console.log(++[[]][0]);//1
	console.log([0]);//Array[0]
	console.log([0][0]);//0
	console.log(+[0]);//0
};
</script>
</head>
<body onload="b()">
<div id="a"></div>
<body>
</html>

<html>
<head>
<script src="test.js"></script>
</head>
<body>
</body>
</html>

//example 1
//       b  function   ,  ()      
var 
	a,
	b = function(){
		console.log(1);
	};

b();

a = b;

console.log(a);


//example 2 
//       
//funtion(){}();//  

(function(){})();//  

(function(){}());//  
// : jQuery  1.11.1 2.1.1          
/**
(function( global, factory ) {}(
								typeof window !== "undefined" ? window : this, 
								function( window, noGlobal ) {}
								)
);
*/

!function(){}();//  

//example 3 
//           window   
(function(){
	var x=10,
		y=20,
		z;
	z = x + y;
	console.log(z);
})(window);


!function(){
	console.log(window);

	/**
	①
	undefined = "I am undefined";
	console.log(undefined);//              ,  37   undefined
    */

	/**
	②
	var undefined = "I am undefined";
	console.log(undefined);//I am undefined
	*/

	// ① ②     ,      ( 'I am undefined')
	undefined = "I am undefined";
	console.log(undefined);

	var undefined = "I am undefined";
	console.log(undefined);

}();

<html>
<head>
<script src="test.js"></script>
</head>
<body onload="test()">
</body>
</html>

function a(){
	console.log(1);
};

//  new    
var x = new a();//   a  

var y = new Object();
y.x = "2";
console.log(y.x);

var z1 = Object.create([1,2,3]);
console.log(z1);

var z2 = Object.create({key1:"value1",key2:"value2"});
console.log(z2);

//          
var a = {x:1,y:2};

function newIt(){};
newIt.prototype = a;

var b = new newIt();

b.x = 10;
b.z = 3;
console.log(b);//Object {x: 10, y: 2, z: 3}

//JavaScript       :
function inherit(a){
	if(a==null) {console.log('It is null');throw TypeError();}
	if(Object.create) {console.log('It is Object.create');return Object.create(a);}
	var checkType = typeof a;
	if(checkType!=="object"&&checkType!=="function"){console.log('type error'); throw TypeError();}
	function emptyConstruct(){};
	emptyConstruct.prototype = a;
	return new emptyConstruct();
};

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a id='a' class='a' href='1.png' title='this is a picture' onclick='test();return false;'>Test Picture</a>
<img id='x' src='blank.png' alt='hello world'/>
<div id='d'></div>
<a id='b' href='a.html' accesskey='y'>click me</a><!-- Alt+Y -->
<script>
function test(){
	//var x = document.getElementsByClassName('a');
	var x = document.getElementsByTagName('a');
	var y = x[0].getAttribute('href');
	var z = document.getElementById('x');
	//getElementById      ,    ,    z[0]
	z.setAttribute('src',y);//z.src = y;	
};
</script>
<script>
var x = document.getElementsByTagName('body');
var y = x[0].childNodes;//       
y = x[0].firstChild;//       
y = x[0].lastChild;//        
/*
var y = x[0].nodeType;
for(var i in y){
	//nodeType{1:    ;2:    ;3:    }
	console.log(y[i].nodeType);
}
*/
var z = document.getElementsByTagName('a');
console.log(z[0].childNodes[0].nodeValue);//Test Picture
//window.open('test.html','hello','width=300,height=300');
</script>
<script>
document.write("<p id='p'>this is p</p>");
document.getElementById('p').innerHTML = 'this is another p';
var newP = document.createElement('p');
var newDivText = document.createTextNode('this is div');
var newDiv = document.getElementById('d');
newP.appendChild(newDivText);
newDiv.appendChild(newP);
//newElement:   ;parentElement:   ;targetElement:    
//parentElement.insertBefore(newElement,targetElement)
</script>
<script>
function t(){
	document.getElementById('b').style.background = "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
};
//setTimeout("t()",1000);
setInterval("t()",1000);
</script>
</body>
</html>
<!--
<p class="a" id="b"><h1>hello</h1></p>
<p>world</p>
p.a{
   //TODO
}
#b h1{
   //TODO
}
-->

その他は添付ファイルをご参照ください