html/JavaScriptのTIPS集
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
#topicpath
----
//ここにコンテンツを記述します。
#contents
**JavaScript関数について [#x599000a]
再入門。
[[スクリプト言語:JavaScriptのイロハ - page2 - builder>htt...
***普通に宣言する [#f0ceeb56]
<script type='text/javascript'>
function hoge() {
alert('hogehoge');
}
hoge();
</script>
***変数ぽく宣言する [#jaa5e389]
<script type='text/javascript'>
var hoge= function() {
alert('hogehoge');
}
hoge();
</script>
***代入できる [#p44c7bd2]
<html>
<head>
<script type='text/javascript'>
var hoge= function() {
alert('hogehoge');
}
var init=hoge;
</script>
</head>
<body onload='init()'>
</body>
</html>
***さらに引数にもできる [#o3c361d9]
[[JavaScriptのイロハ:「関数はオブジェクト」って理解でき...
<script type='text/javascript'>
function callFunc(fn){
fn();
fn();
}
var init = function() {
callFunc( function(){
alert('aa');
});
}
</script>
</head>
<body onload='init()'>
</body>
**JavaScriptのオブジェクトについて [#hb2aa34a]
***ハッシュテーブルぽいはなし [#k217da7f]
function init(){
var obj= new Object();
obj.v1="a"; //フィールドの定義
obj.f1= function(){ //関数の定義
alert('bbb');
};
var obj2= new Object();
obj2.str="STR1";
obj.nested=obj2; //obj変数のフィールドにobjectを定義
obj.f1(); //関数呼び出し
alert(obj.v1); //フィールドへのアクセス
alert(obj['v1']); //フィールドへこのようにアクセスもで...
alert(obj['nested'].str); //ネストしたデータも同様
obj['f2'] = function(){ // 関数の定義のときも、ハッシ...
alert('f2f2f2');
};
obj.f2();
obj['f2'](); //呼び出し
}
***そしてオブジェクトリテラルという書き方 [#zd54db62]
var obj= new Object();
obj.v1="a"; //フィールドの定義
obj.f1= function(){ //関数の定義
alert('bbb');
};
var obj2= new Object();
obj2.str="STR1";
obj.nested=obj2; //obj変数のフィールドにobjectを定義
これと同値な書き方として下記のような表現がある(オブジェク...
var obj = {
v1: "a",
f1: function(){
alert('bbb');
},
nested: {
str:"STR1"
}
};
こう定義することで、さっきと同じようにアクセスできる
obj.f1();
alert(obj.v1);
alert(obj['v1']);
alert(obj['nested'].str);
***フィールド(プロパティ)への順次アクセス [#v6ce4d91]
http://builder.japan.zdnet.com/script/sp_javascript-kicks...
for(var property in obj){
alert(property);
alert(obj[property]);
}
結果:
v1 a
f1 function (){ alert('bbb'); }
nested [object Object]
みたいなのが表示される
*** そしてJSON [#c7647b85]
たとえばサーバからオブジェクトリテラル形式の文字列を受け...
var obj = eval("(" + もじれつ + ")");
ってやるとobjに代入できて
alert(obj.v1);
ってできる。JSON形式でやり取りすることですね。
これずいぶん昔の情報で、いま(2017/04/23)だと
var obj = JSON.parse(文字列);
が正統派でしょうか。
*** 配列 [#nb1c71df]
http://builder.japan.zdnet.com/script/sp_javascript-kicks...
var a=["a","b"]; //配列の定義その1
a['var1']='ccc'; //配列の定義その2
for (var prop in a){
alert(prop); // 0,1,var1 ←こういう順番の配列を定...
alert(a[prop]); // a,b,ccc
}
配列はハッシュテーブルみたいだし、先に見たとおりオブジェ...
なんだかオブジェクトのハッシュテーブルぽい。
ちなみにFor文は
var a = ["a", "b", "c"];
for (var i = 0, i < a.length; i++) {
alert(a[i]);
}
だけでなく
// indexには「0, 1, 2」という値が入る
for (var index in a) {
alert(a[index]);
}
って書くことも出来て、オブジェクトへのプロパティアクセス...
**TIPS集 [#x7c26c24]
***ブログにはてブのコメントを表示するhatana_bookmark_anyw...
[[ブログにはてブのコメントを表示する>http://blog.masuidri...
とりあえず自分の理解のために、いろいろな処理をそぎ落とし...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; char...
<script type= "text/javascript">
<!-- JSONを取得する関数の定義 -->
function getJSON() {
try {
if((typeof document.getElementById("result"))!="un...
var url="http://b.hatena.ne.jp/entry/json/?url="
url +="http%3a%2f%2fwww.masatom.in%2fpukiwiki%2f...
var script = document.createElement("script");
script.setAttribute("type","text/javascript");
script.setAttribute("src",url);
document.body.appendChild(script);
}
} catch(e) {
}
}
<!-- CallBackするメソッドの定義 -->
function writeDocument(json) {
id = document.getElementById("result");
id.innerHTML = json.url+" : "+json.count+" : "+ json.b...
}
<!-- イベントを登録 -->
try {
if(window.addEventListener) {
window.addEventListener("load", getJSON, false);
} else {
window.attachEvent("onload", getJSON);
}
} catch(e) {
}
</script>
<link rel="stylesheet" type="text/css" href="css/common....
<title></title>
</head>
<body>
<div id="result"></div>
</body>
</html>
処理の流れ的には、
-イベント登録の箇所で、画面を表示したときにgetJSONメソッ...
-getJSONメソッド内で、はてなのブックマーク取得I/Fにアクセ...
-ちなみにココはDOM使ってbodyの子要素としてJavaScriptのコ...
-はてなはコールバックのインタフェースをもってるみたいで、...
-これに従って、コールバックメソッドfunction writeDocument...
- <div id="result"></div> の箇所にjsonオブジェクトのデー...
うーんJavaScriptとかAjaxとかって処理があっちこっちに飛ん...
-[[Javascriptのイベントハンドラ設定方法 : ユージック>http...
***配列。 [#rac14e17]
var array=new Array(3);
array[0]="name1";
array[1]="name2";
array[2]="name3";
var model={name:input, names:array};
と
var model={"name":input,"names":["name1","name2","name3...
は等価。
***スクリプトを書く [#gf3a6dba]
<html>
<head>
<script type="text/javascript">
<!--
document.write("hoge");
-->
</script>
</head>
<body>
</body>
</html>
***スクリプトを書いた外部ファイルを読み込む [#x8400d3c]
<head>
<script type="text/javascript" src="hoge.js" ></script>
</head>
読み込んだファイルにはメソッドを書いておきます。んで、呼...
<input type="button" name="実行" value="実行" onclick="a...
てなかんじです。aFunctionというメソッドを呼んでるわけです...
***一部分を動的に書き換える [#a6640ff5]
あらかじめ
<script type="text/javascript">
<!--
function trackbackSubmit() {
var msg = "ある文字列";
document.getElementById("body").innerHTML = msg;
}
//-->
</script>
てなメソッドを定義しておきます。次にボタンを作ります。
<input type="button" name="Ping!" value="Ping!" onclick=...
このボタンを押すと、htmlファイル内の<div id="body"/>の箇...
***別ウィンドウを表示するスクリプト [#fe1f2068]
<html>
<head>
<script language="javascript">
<!--
function win(url){
wo = window.open(url, '', 'toolbar=yes,location=yes,st...
}
// -->
</script>
</head>
<body>
<a href="javascript:win('http://www.yahoo.co.jp')">別窓...
</body>
</html>
----
この記事は
#vote(おもしろかった[8],そうでもない[5])
#comment
#topicpath
SIZE(10){現在のアクセス:&counter;}
終了行:
#topicpath
----
//ここにコンテンツを記述します。
#contents
**JavaScript関数について [#x599000a]
再入門。
[[スクリプト言語:JavaScriptのイロハ - page2 - builder>htt...
***普通に宣言する [#f0ceeb56]
<script type='text/javascript'>
function hoge() {
alert('hogehoge');
}
hoge();
</script>
***変数ぽく宣言する [#jaa5e389]
<script type='text/javascript'>
var hoge= function() {
alert('hogehoge');
}
hoge();
</script>
***代入できる [#p44c7bd2]
<html>
<head>
<script type='text/javascript'>
var hoge= function() {
alert('hogehoge');
}
var init=hoge;
</script>
</head>
<body onload='init()'>
</body>
</html>
***さらに引数にもできる [#o3c361d9]
[[JavaScriptのイロハ:「関数はオブジェクト」って理解でき...
<script type='text/javascript'>
function callFunc(fn){
fn();
fn();
}
var init = function() {
callFunc( function(){
alert('aa');
});
}
</script>
</head>
<body onload='init()'>
</body>
**JavaScriptのオブジェクトについて [#hb2aa34a]
***ハッシュテーブルぽいはなし [#k217da7f]
function init(){
var obj= new Object();
obj.v1="a"; //フィールドの定義
obj.f1= function(){ //関数の定義
alert('bbb');
};
var obj2= new Object();
obj2.str="STR1";
obj.nested=obj2; //obj変数のフィールドにobjectを定義
obj.f1(); //関数呼び出し
alert(obj.v1); //フィールドへのアクセス
alert(obj['v1']); //フィールドへこのようにアクセスもで...
alert(obj['nested'].str); //ネストしたデータも同様
obj['f2'] = function(){ // 関数の定義のときも、ハッシ...
alert('f2f2f2');
};
obj.f2();
obj['f2'](); //呼び出し
}
***そしてオブジェクトリテラルという書き方 [#zd54db62]
var obj= new Object();
obj.v1="a"; //フィールドの定義
obj.f1= function(){ //関数の定義
alert('bbb');
};
var obj2= new Object();
obj2.str="STR1";
obj.nested=obj2; //obj変数のフィールドにobjectを定義
これと同値な書き方として下記のような表現がある(オブジェク...
var obj = {
v1: "a",
f1: function(){
alert('bbb');
},
nested: {
str:"STR1"
}
};
こう定義することで、さっきと同じようにアクセスできる
obj.f1();
alert(obj.v1);
alert(obj['v1']);
alert(obj['nested'].str);
***フィールド(プロパティ)への順次アクセス [#v6ce4d91]
http://builder.japan.zdnet.com/script/sp_javascript-kicks...
for(var property in obj){
alert(property);
alert(obj[property]);
}
結果:
v1 a
f1 function (){ alert('bbb'); }
nested [object Object]
みたいなのが表示される
*** そしてJSON [#c7647b85]
たとえばサーバからオブジェクトリテラル形式の文字列を受け...
var obj = eval("(" + もじれつ + ")");
ってやるとobjに代入できて
alert(obj.v1);
ってできる。JSON形式でやり取りすることですね。
これずいぶん昔の情報で、いま(2017/04/23)だと
var obj = JSON.parse(文字列);
が正統派でしょうか。
*** 配列 [#nb1c71df]
http://builder.japan.zdnet.com/script/sp_javascript-kicks...
var a=["a","b"]; //配列の定義その1
a['var1']='ccc'; //配列の定義その2
for (var prop in a){
alert(prop); // 0,1,var1 ←こういう順番の配列を定...
alert(a[prop]); // a,b,ccc
}
配列はハッシュテーブルみたいだし、先に見たとおりオブジェ...
なんだかオブジェクトのハッシュテーブルぽい。
ちなみにFor文は
var a = ["a", "b", "c"];
for (var i = 0, i < a.length; i++) {
alert(a[i]);
}
だけでなく
// indexには「0, 1, 2」という値が入る
for (var index in a) {
alert(a[index]);
}
って書くことも出来て、オブジェクトへのプロパティアクセス...
**TIPS集 [#x7c26c24]
***ブログにはてブのコメントを表示するhatana_bookmark_anyw...
[[ブログにはてブのコメントを表示する>http://blog.masuidri...
とりあえず自分の理解のために、いろいろな処理をそぎ落とし...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; char...
<script type= "text/javascript">
<!-- JSONを取得する関数の定義 -->
function getJSON() {
try {
if((typeof document.getElementById("result"))!="un...
var url="http://b.hatena.ne.jp/entry/json/?url="
url +="http%3a%2f%2fwww.masatom.in%2fpukiwiki%2f...
var script = document.createElement("script");
script.setAttribute("type","text/javascript");
script.setAttribute("src",url);
document.body.appendChild(script);
}
} catch(e) {
}
}
<!-- CallBackするメソッドの定義 -->
function writeDocument(json) {
id = document.getElementById("result");
id.innerHTML = json.url+" : "+json.count+" : "+ json.b...
}
<!-- イベントを登録 -->
try {
if(window.addEventListener) {
window.addEventListener("load", getJSON, false);
} else {
window.attachEvent("onload", getJSON);
}
} catch(e) {
}
</script>
<link rel="stylesheet" type="text/css" href="css/common....
<title></title>
</head>
<body>
<div id="result"></div>
</body>
</html>
処理の流れ的には、
-イベント登録の箇所で、画面を表示したときにgetJSONメソッ...
-getJSONメソッド内で、はてなのブックマーク取得I/Fにアクセ...
-ちなみにココはDOM使ってbodyの子要素としてJavaScriptのコ...
-はてなはコールバックのインタフェースをもってるみたいで、...
-これに従って、コールバックメソッドfunction writeDocument...
- <div id="result"></div> の箇所にjsonオブジェクトのデー...
うーんJavaScriptとかAjaxとかって処理があっちこっちに飛ん...
-[[Javascriptのイベントハンドラ設定方法 : ユージック>http...
***配列。 [#rac14e17]
var array=new Array(3);
array[0]="name1";
array[1]="name2";
array[2]="name3";
var model={name:input, names:array};
と
var model={"name":input,"names":["name1","name2","name3...
は等価。
***スクリプトを書く [#gf3a6dba]
<html>
<head>
<script type="text/javascript">
<!--
document.write("hoge");
-->
</script>
</head>
<body>
</body>
</html>
***スクリプトを書いた外部ファイルを読み込む [#x8400d3c]
<head>
<script type="text/javascript" src="hoge.js" ></script>
</head>
読み込んだファイルにはメソッドを書いておきます。んで、呼...
<input type="button" name="実行" value="実行" onclick="a...
てなかんじです。aFunctionというメソッドを呼んでるわけです...
***一部分を動的に書き換える [#a6640ff5]
あらかじめ
<script type="text/javascript">
<!--
function trackbackSubmit() {
var msg = "ある文字列";
document.getElementById("body").innerHTML = msg;
}
//-->
</script>
てなメソッドを定義しておきます。次にボタンを作ります。
<input type="button" name="Ping!" value="Ping!" onclick=...
このボタンを押すと、htmlファイル内の<div id="body"/>の箇...
***別ウィンドウを表示するスクリプト [#fe1f2068]
<html>
<head>
<script language="javascript">
<!--
function win(url){
wo = window.open(url, '', 'toolbar=yes,location=yes,st...
}
// -->
</script>
</head>
<body>
<a href="javascript:win('http://www.yahoo.co.jp')">別窓...
</body>
</html>
----
この記事は
#vote(おもしろかった[8],そうでもない[5])
#comment
#topicpath
SIZE(10){現在のアクセス:&counter;}
ページ名: