- -pv
スレッドの閲覧状況:
現在、- がスレを見ています。
これまでに合計 - 表示されました。
※PC・スマホの表示回数をカウントしてます。
※24時間表示がないスレのPVはリセットされます。

JavaScript HTML5

1名無しさん:2013/07/01(月)09:20:49 ID:ukT/HvmBn()
HTML5.JP - 次世代HTML標準 HTML5情報サイト
http://www.html5.jp/
2名無しさん :2013/07/01(月)11:19:23 ID:ukT/HvmBn()
初めてのHTML5ゲーム作成 2-4
http://homepage2.nifty.com/t_ishii/site/html5game/p2_4.html

データを保存する
localStorage.setItem("GameName_HighScore","0");

データを読み出す
highscore = localStorage.getItem("GameName_HighScore");
3名無しさん :2013/07/01(月)12:35:11 ID:ukT/HvmBn()
HTML5 テーブルテニス
http://homepage2.nifty.com/t_ishii/HTML5/tabletennis/index.html
http://homepage2.nifty.com/t_ishii/HTML5/tabletennis/tabletennis.js
4名無しさん :2013/07/01(月)14:46:53 ID:ukT/HvmBn()
動かない
他の人のキャラは動いているが、
自分はマウスクリックしても動かない。
Firefox21.0

BrowserQuest
http://browserquest.mozilla.org/
5名無しさん :2013/07/01(月)15:41:57 ID:ukT/HvmBn()
配列でピクセルにアクセス

canvasをバイト単位で修正する方法(ImageDataの使い方) | tech.kayac.com - KAYAC engineers' blog
http://tech.kayac.com/archive/javascript-canvas-imagedata.html
6名無しさん :2013/07/02(火)07:16:37 ID:ZOpfpd2nf
JavaScriptリファレンス(オブジェクト別)
http://www.htmq.com/js/index.shtml
7名無しさん :2013/07/02(火)07:18:20 ID:ZOpfpd2nf
JavaScript逆引きサンプル集 - JavaScriptist
http://javascriptist.net/docs/samples.html
8名無しさん :2013/07/02(火)07:30:53 ID:ZOpfpd2nf
JavaScriptオンラインエディタ - JavaScriptist
http://javascriptist.net/exec/

タイマーのテスト
http://javascriptist.net/exec/?f=window.setinterval&t=ref
9名無しさん :2013/07/02(火)07:42:17 ID:ZOpfpd2nf
JavaScriptでリアルタイムに音を鳴らす方法を3つほど - つまみ食う
http://d.hatena.ne.jp/mohayonao/20110808/1312803835
10名無しさん :2013/07/02(火)07:46:44 ID:ZOpfpd2nf
単純なBeep音がないんだな
11名無しさん :2013/07/02(火)07:56:24 ID:ZOpfpd2nf
HTMLの書き換え用APIはDOMと言う
Document Object Model

DOMを操作 - JavaScriptist
http://javascriptist.net/docs/basic_dom.html
12名無しさん :2013/07/02(火)09:46:30 ID:ZOpfpd2nf
そうか、「ページのソースを表示(V)」ではDOMによる変更は反映されていないんだな
13名無しさん :2013/07/02(火)09:49:20 ID:ZOpfpd2nf

スクリプトを動的に読み込む方法 - JavaScriptプログラミング解説
http://www.crystal-creation.com/web-appli/technical-information/programming/javascript/sample/script.htm
14名無しさん :2013/07/02(火)13:36:36 ID:ZOpfpd2nf
Firefoxのスクラッチパッドってこんなんです

とりあえずJavaScriptを記述して動作を確認したいって時はFirefoxに搭載のスクラッチパッドが断然便利 - YATのBLOG
http://wp.yat-net.com/?p=3648
https://s3-ap-northeast-1.amazonaws.com/yatblogimg/2013/04/scratchpad_02.jpg
https://s3-ap-northeast-1.amazonaws.com/yatblogimg/2013/04/scratchpad_05.jpg
15名無しさん :2013/07/02(火)14:05:28 ID:ZOpfpd2nf
2013年6月25日リリースのFirefox22からClipboardDataがサポートされてる

高速化した「Firefox 22」正式日本語版がダウンロード可能に、第4世代JavaScriptエンジンOdinMonkeyとasm.jsを採用 - GIGAZINE
http://gigazine.net/news/20130625-firefox22/
16名無しさん :2013/07/02(火)14:20:14 ID:ZOpfpd2nf
使い方がさっぱり分からない
clipboardData.setText("abc");
だと
Exception: clipboardData is not defined がでる
17名無しさん :2013/07/02(火)20:19:18 ID:ZOpfpd2nf
画像の左上の点の色でfillRectする方法がわからない

onload = function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
var dat = ctx.createImageData(img.width, img.height);
//ctx.drawImage(img, 0, 0, 10, 10, 0, 0, 10, 10);
//var dat = ctx.createImageData(1, 1);
//var dat = ctx.getImageData(0, 0, 10, 10);
//var dat = ctx.getImageData(0, 0, canvas.width, canvas.height);
var rgb = 'rgb(' + dat.data[0] + ',' + dat.data[1] + ',' + dat.data[2] + ')';
document.title = rgb;
ctx.fillStyle = rgb;
ctx.fillRect(0, 0, canvas.width, canvas.height);
};
img.src="


";
}
18名無しさん :2013/07/02(火)20:26:46 ID:ZOpfpd2nf
Index.htmlがこれ

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>エロゲ(仮)</title>
<script type="text/javascript" src="Main.js"></script>
</head>
<body>
<canvas id="canvas" width=640 height=480></canvas>
</body>
</html>
19名無しさん :2013/07/02(火)20:29:06 ID:ZOpfpd2nf
Main.jsがこれ。 縦横比を変えずに絵を描画

onload = function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
var ratio;
if (img.width / canvas.width > img.height / canvas.height)
ratio = canvas.width / img.width
else
ratio = canvas.height / img.height;
if (ratio > 1) ratio = 1;
ctx.drawImage(img, 0, 0, img.width * ratio, img.height * ratio);
};
img.src="


";
}
20名無しさん :2013/07/02(火)22:16:35 ID:ZOpfpd2nf
Firefox22はこのサンプルで左クリックしなくても、マウスカーソルが
入るだけで「左クリック状態です」となる。

Event.isLeftClick - 左クリックが押されているかどうか調べる - prototype.jsリファレンス
http://javascriptist.net/ref_prototype/Event.isLeftClick.html
21名無しさん :2013/07/03(水)00:23:30 ID:8erkdc/wb
1さん すごいな
機能テストスレの画像も1さんなんやろ?
前から写真を載せてる人がいたけど
あれもそういうプログラムでやってるのやろか?
22名無しさん :2013/07/03(水)03:55:06 ID:h6prVVl5y
猫の画像のオリジナルは私じゃないけど、JavaScript貼り付けてるのは私です。
やり方はそうだと思います。
23名無しさん :2013/07/03(水)15:00:24 ID:h6prVVl5y
JavaScriptで、メソッド名が定義されておらず、 function()の前にドルマーク”$”が... - Yahoo!知恵袋
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1444158294

jQuery(function() { /*...*/ })
と、
$(function() { /*...*/ })
はjQueryの中では同じ処理になります。
24名無しさん :2013/07/03(水)15:58:35 ID:h6prVVl5y
context.drawImage(img, x, y, 1, 1, 0, 0, 1, 1);

SecurityError: The operation is insecure.
エラーが出る。 回避方法がさっぱり分からない

4.8 Embedded content _ HTML5
http://www.w3.org/TR/html5/embedded-content-0.html#security-with-canvas-elements
2521 :2013/07/03(水)16:15:45 ID:1MmOWo79k
画像貼り付けできんよぉー
どうしたらいいんだろぉ

どうも猫の他にも魚と河合奈保子とニューススレに
画像貼り付けの技をもってる人がいるようだ


これ↓は1さんの投稿なの?  そこにヒントがあるように見えるのだけど
http://open.open2ch.net/test/read.cgi/open2ch/1369417067/322
26名無しさん :2013/07/03(水)16:32:09 ID:h6prVVl5y
それはこんな感じで作ったやつ
function draw() {
var canvas = document.getElementById('sketch');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
var grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
grad.addColorStop(0, 'rgb(0, 0, 0)');
grad.addColorStop(0.1, 'rgb(255, 0, 0)');
grad.addColorStop(0.2,'rgb(0, 0, 255)');
grad.addColorStop(0.4,'rgb(255, 0, 255)');
grad.addColorStop(0.6,'rgb(0, 255, 0)');
grad.addColorStop(0.8,'rgb(255, 255, 0)');
grad.addColorStop(0.9,'rgb(0, 255, 255)');
grad.addColorStop(1, 'rgb(255, 255, 255)');
ctx.fillStyle = grad;
ctx.rect(canvas.width-30, 0, 30, canvas.height);
ctx.fill();
}
draw();

2721 :2013/07/03(水)16:42:57 ID:1MmOWo79k
うーむぅー  悩む
28名無しさん :2013/07/03(水)17:14:59 ID:h6prVVl5y
canvas の getImageDataが少しめんどくさい(特にローカルで動かす場合) - 地平線に行く
http://d.hatena.ne.jp/chiheisen/20100815/1281885412
>ローカルにある画像をキャンバスへ張り付けた場合、getImageData が動かなくなります。


2921 :2013/07/03(水)17:39:12 ID:InqySpODh
>>28 セキュリティなんちゃらで難しそうやね

で・・ワシはputImageDataで行こうかと思ってるのだけど
ローカルファイルをcanvasに表示するにはどうしたらいいかな
30名無しさん :2013/07/03(水)18:06:44 ID:h6prVVl5y
RGBデータをソースに埋め込むとか
3121 :2013/07/03(水)18:16:50 ID:bt82nZBNx
>>30
それはこれを参考にするつもり
http://tech.kayac.com/archive/javascript-canvas-imagedata.html


>>29は質問の仕方を間違えた
まずはローカルでcanvasに表示したい
↓のhtmlでファイル参照したらローカルイメージをローカルのcanvasに表示したい

<!DOCTYPE html>
<html lang="ja">
<meta charset="shift_jis">
<head>
<script type="text/javascript">
<!--

function draw(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

}

//-->
</script>
</head>

<body onLoad="draw()">

<h1>画像表示</h1>

<canvas id="canvas" width="300" height="300" style="background-color:yellow;"></canvas>
<input id="upload" type="file" value="filepath">

</body>
</html>
3221 :2013/07/03(水)18:17:49 ID:bt82nZBNx
javascriptの基本から初めてますので
33名無しさん :2013/07/03(水)20:34:43 ID:h6prVVl5y
とりあえず、putImageDataで出来ました

お絵かき機能テストすれ
http://open.open2ch.net/test/read.cgi/open2ch/1369417067/358-363
34名無しさん :2013/07/03(水)21:06:27 ID:h6prVVl5y
スクラッチパッドからはタイマーは動かないのか
var x = 0;
function exec() {
document.title = x++;
}
var timer;
timer = window.setInterval('exec()', 1000);
35名無しさん :2013/07/03(水)22:07:59 ID:h6prVVl5y
スマートフォン比較表
http://www.smph.info/
解像度は720×1,280が多い 9:16

iPad 2,048 × 1,536 4:3
36名無しさん :2013/07/04(木)12:54:02 ID:3BB3bsSyk
引数の数で処理を分ける

JavaScriptの使える小技です。: Javascriptでオーバーロードを実現する
http://javascript-memo.seesaa.net/article/24972384.html

switch (arguments.length) {
case 1: test1(arg1);
case 2: test2(arg1,arg2);
default:
}
37名無しさん :2013/07/06(土)12:14:46 ID:PHQQOH9E4
DOMから始めるJavaScriptモダン・スクリプティング - DOMから始めるJavaScriptモダン・スクリプティング---...:ITpro
http://itpro.nikkeibp.co.jp/article/COLUMN/20070626/275913/

DOMから始めるJavaScriptモダン・スクリプティング - 第3回 DOMスクリプティングのことはじめ(1) ~要素(...:ITpro
http://itpro.nikkeibp.co.jp/article/COLUMN/20070627/276127/
なるべきidをつけて、document.getElementById でアクセス

DOMから始めるJavaScriptモダン・スクリプティング - 第5回 DOMを使ってHTMLを自由自在に書き換える:ITpro
http://itpro.nikkeibp.co.jp/article/COLUMN/20070831/280881/
要素の追加・削除のサンプル
38名無しさん :2013/07/06(土)12:31:48 ID:PHQQOH9E4
第7回 スクリプトを完全に分離しよう ~コンテンツ,プレゼンテーション,ビヘイビア~:ITpro
http://itpro.nikkeibp.co.jp/article/COLUMN/20071001/283380/
IE対応サンプル
window.onloadは一つしか使えない

IEを考慮しなければこれだけでいい
var init = function() { alert('ABC'); };
window.addEventListener("load", init, false);
39名無しさん :2013/07/06(土)12:39:54 ID:PHQQOH9E4
DOMから始めるJavaScriptモダン・スクリプティング - 第8回 スクリプトのパッケージ化 ~使い回しできるス...:ITpro
http://itpro.nikkeibp.co.jp/article/COLUMN/20071105/286427/?ST=develop

オブジェクトによるラッピングで名前の衝突を避ける
40名無しさん :2013/07/06(土)15:05:46 ID:PHQQOH9E4
命名規則

Google JavaScript スタイルガイド - 日本語訳 - JavaScriptのスタイルに関するルール
http://www38.atwiki.jp/aias-jsstyleguide2/pages/15.html
41名無しさん :2013/07/06(土)15:11:51 ID:PHQQOH9E4
jQuery, JavaScript のリファレンス

アルファシス _ alphasis.info -
http://alphasis.info/
42名無しさん :2013/07/06(土)15:22:48 ID:PHQQOH9E4
いくつかあるけどよく分からん

jQueryプラグインの作り方|jQuery Tips|Ajax|PHP & JavaScript Room
http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin
43名無しさん :2013/07/06(土)15:34:40 ID:PHQQOH9E4
ASCII.jp:0日目:jQueryプラグイン作成の基礎知識 (2/2)|【短期集中連載】この冬作ろう!jQueryプラグイン講座
http://ascii.jp/elem/000/000/199/199909/index-2.html

<div id="ascii">ASCII.jp</div>
にアクセスする方法
$("#ascii")

$は単独で変数名や関数名に使える文字
だから、$("#ascii") は 文字列 #ascii を引数に、関数 $ を呼び出しているって意味だ
44名無しさん :2013/07/06(土)16:11:34 ID:PHQQOH9E4
jQueryを使い始めたときに感じる13の疑問 | tech.kayac.com - KAYAC engineers' blog
http://tech.kayac.com/archive/jquery-first-questions.html
45名無しさん :2013/07/06(土)16:19:34 ID:PHQQOH9E4
ちゃんと jQuery.js を読み込ませたページを表示しておかないと、
スクラッチパッドでの実行で
Exception: $ is not defined
エラーが出る
46名無しさん :2013/07/06(土)17:52:56 ID:PHQQOH9E4
JavaScriptのいろいろなコーディングルールをまとめてみた | Web scratch
http://efcl.info/2011/0527/res2764/

JavaScript style guide | MDN
https://developer.mozilla.org/ja/docs/JavaScript_style_guide
47名無しさん :2013/07/07(日)15:48:47 ID:4lJL8oD4F
canvas のタイポグラフィ効果 - HTML5 Rocks
http://www.html5rocks.com/ja/tutorials/canvas/texteffects/#toc-introduction
http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/ja/tutorials/canvas/texteffects/media/xpastedGraphic.png.pagespeed.ic.J3xXqLmwx8.jpg
48名無しさん :2013/07/07(日)15:52:00 ID:4lJL8oD4F
HTML 5 canvas要素 + Javascriptで作る、動的コンテンツ | yoppa org
http://yoppa.org/taumedia10/2065.html
http://i0.wp.com/lh3.ggpht.com/_S9tCNvdm3tU/TNbRj9dJSTI/AAAAAAAAEjE/4K-0OPR4vac/s400/SafariScreenSnapz004.png
49名無しさん :2013/07/07(日)16:02:32 ID:4lJL8oD4F
jQueryの初歩の分かりやすい説明

jQueryで拡がるWebデザインの可能性 | yoppa org
http://yoppa.org/taumedia10/2181.html
50名無しさん :2013/07/07(日)16:24:23 ID:4lJL8oD4F
jQueryの文法
jQuery Syntax
http://www.w3schools.com/jquery/jquery_syntax.asp

$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".

documentが読み込まれた後に実行されるコード
$(function(){
// jQuery methods go here...
});
51名無しさん :2013/07/07(日)16:34:33 ID:4lJL8oD4F
引数を書くべきところに関数の定義を書くんだな

jQuery Event Methods
http://www.w3schools.com/jquery/jquery_events.asp

$("p").click(function(){
// action goes here!!
// 全<p>要素がクリックされたとき
});
52名無しさん :2013/07/07(日)16:50:18 ID:4lJL8oD4F
メソッドを数珠繋ぎで呼び出す

jQuery Chaining
http://www.w3schools.com/jquery/jquery_chaining.asp

$("#p1").css("color","red").slideUp(2000).slideDown(2000);
53名無しさん :2013/07/07(日)17:04:23 ID:4lJL8oD4F
DOM取得
jQuery Get Content and Attributes
http://www.w3schools.com/jquery/jquery_dom_get.asp
$("#id1").text(); タグ無しテキスト
$("#id2").html(); タグ付きのHTML
$("#id3").val(); valueフィールド
$("#id4").attr("href"); 属性

DOM設定
jQuery Set Content and Attributes
http://www.w3schools.com/jquery/jquery_dom_set.asp
$("#id1").text("Hello world!");
$("#id2").html("<b>Hello world!</b>");
$("#id3").val("Dolly Duck");
$("#id4").attr("href","http://www.hoge.com/hoge");

attrの複数設定方法
$("#id5").attr({
"href" : "http://www.w3schools.com/jquery",
"title" : "W3Schools jQuery Tutorial"
});
54名無しさん :2013/07/07(日)17:20:50 ID:4lJL8oD4F
DOM追加
jQuery Add Elements
http://www.w3schools.com/jquery/jquery_dom_add.asp

$("p").append("Some appended text."); 全<p>要素の最後に追加
$("p").prepend("Some prepended text."); 全<p>要素の先頭に追加
リストならリストの先頭、最後になる
$("img").after("Some text after"); 前に追加
$("img").before("Some text before"); 後ろに追加
ちょとよく分からない

DOM削除
jQuery Remove Elements
http://www.w3schools.com/jquery/jquery_dom_remove.asp
$("#div1").remove(); 自分と子を削除
$("#div1").empty(); 子のみ削除
55名無しさん :2013/07/08(月)12:58:19 ID:QFmubFkGT
JavaScript How To
http://www.w3schools.com/js/js_howto.asp
type="text/javascript" はもういらなくなった
<script src="myScript.js"></script> でいい
56名無しさん :2013/07/08(月)13:05:06 ID:QFmubFkGT
JavaScript Variables
http://www.w3schools.com/js/js_variables.asp
var carname;
未初期化の変数には undefined が入ってる
0 や '' や nil が入っているわけではない
57名無しさん :2013/07/08(月)13:09:01 ID:QFmubFkGT
var carname="Volvo";
...
var carname;
...

これでエラーが出ないのか。
しかも、carname の値は "Volvo"だ
58名無しさん :2013/07/08(月)13:18:12 ID:QFmubFkGT
JavaScript Data Types
http://www.w3schools.com/js/js_datatypes.asp
>Variables can be emptied by setting the value to null;
FireFoxでは null を代入したら、 undefined ではなく、nullになっとるが
undefinedで代入できたが
59名無しさん :2013/07/08(月)15:48:08 ID:QFmubFkGT
localStorageはローカル(HDDに保存してあるhtmlファイル)では使えないのかな
60名無しさん :2013/07/08(月)15:59:59 ID:QFmubFkGT
ローカルじゃなくても insecure が出るな。 なんでだろう

この記事は関係ないが
ローカルストレージに簡単な解決策はない | Mozilla Developer Street (modest)
https://dev.mozilla.jp/2012/03/there-is-no-simple-solution-for-local-storage/
61名無しさん :2013/07/08(月)16:06:37 ID:QFmubFkGT
あわかった、cookieを有効にしないとダメだ
62名無しさん :2013/07/08(月)16:14:32 ID:QFmubFkGT
ん~でもローカルにあるhtmlでは無理みたいだ
127.0.0.1とかじゃ保存されない
63名無しさん :2013/07/08(月)18:07:09 ID:QFmubFkGT
一行入魂 jQueryでselect操作まとめ
http://aoyagikouhei.blog8.fc2.com/blog-entry-106.html

■選択された文字列の取得
jQuery('#target option:selected').text();
64名無しさん :2013/07/08(月)18:24:30 ID:QFmubFkGT
elementで操作できる

context - jQuery 日本語リファレンス
http://semooh.jp/jquery/api/core/context/
jQueryオブジェクトからelementに変換

var i = $(this).context.selectedIndex;
$(this).context.options[i].text で取得

65名無しさん :2013/07/11(木)18:18:17 ID:ebTaCbkah
厳格なエラー

Strict モード - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Strict_mode

'use strict';
66名無しさん :2013/07/11(木)19:13:31 ID:ebTaCbkah
なんでこれで 5 が返ってこないんだ

var map = {
data: '12345',
width: function() { return map.data.length; }
}

document.title = map.width;
67名無しさん :2013/07/11(木)19:17:06 ID:ebTaCbkah
こっちはちゃんと5が返ってくる
document.title = map.data.length;
68名無しさん :2013/07/11(木)19:52:40 ID:ebTaCbkah
あ、わかった map.width() ってやらないとダメなんだ
69名無しさん :2013/07/14(日)17:19:58 ID:ziiBdlcxR
ASCII.jp:無料で使えるHTML5 JavaScriptゲームエンジンまとめ
http://ascii.jp/elem/000/000/706/706640/
70名無しさん :2013/07/15(月)11:23:38 ID:/8N3DGFrG
jsdo.it - Share JavaScript, HTML5 and CSS
http://jsdo.it/
71名無しさん :2013/07/15(月)12:53:37 ID:/8N3DGFrG
canvasに赤色"rgb(255,0,0,1)"円を塗りつぶすと、アンチエイリアスがかかるが、
canvasのrgbの値は 255,0,0 か 0,0,0のみでaの値が変化する。
72名無しさん :2013/07/16(火)18:28:39 ID:LFv3R+l8b
jQuery のプラグインを作成する : ブログの新着記事を表示 - Goodpic
http://www.goodpic.com/mt/archives2/2007/11/jquery.html

$.fn.sketch = function() { の意味
sketchがプラグインの名称かつ関数名

read.cgi.jsで
var sketch = $('#sketch').sketch();
と呼び出している
73名無しさん :2013/07/18(木)12:28:09 ID:Iv1hVONEI
まいった。 sleepに相当するものが無いらしい。

// 12534
function D(s) { document.title = document.title + s; }
window.onload = function(){
var c = document.createElement('canvas');
document.body.appendChild(c);
var img = new Image();
document.title = '';
D('1');
img.src = 'http://upload.wikimedia.org/wikipedia/commons/3/3c/Guycat.jpg';
D('2');
img.onload = function(){
D('3');
c.getContext('2d').drawImage(img, 0, 0);
D('4');
}
D('5');
};
74名無しさん :2013/07/18(木)12:48:12 ID:Iv1hVONEI
画像の読み込みが完了する前に、どんどん先のコードが実行されてしまう
75名無しさん :2013/07/18(木)14:07:16 ID:Iv1hVONEI
画像が読み込まれるまで待つコードを書くより、
画像が読み込まれていなくても問題の出ないコードを書けばいいのか
76名無しさん :2013/07/19(金)07:23:45 ID:sUaB8V8KY
いったん base64に変換すればセキュリティーエラーを回避できるかもと思ったが、
toDataURL()で出る。 まあ、そうだよね。

img.src = url1;
ctx.drawImage(img, 0, 0);
var dat1 = canvas.toDataURL();
img.src = dat1;
ctx.drawImage(img, 0, 0);
77名無しさん :2013/07/20(土)16:32:25 ID:r5bCI0hBf
連載:Ajax時代のJavaScriptプログラミング再入門:第4回 JavaScriptでオブジェクト指向プログラミング (1/4) - @IT
http://www.atmarkit.co.jp/ait/articles/0709/25/news148.html

関数を new で呼び出せばコンストラクタとして関数を呼んだ事になる。
prototype はメンバ関数ってこと。
78名無しさん :2013/07/20(土)17:09:03 ID:r5bCI0hBf
ここ大事だな。
配列、オブジェクト、関数が参照型

連載:Ajax時代のJavaScriptプログラミング再入門:第3回 変数の宣言とスコープ (1/4) - @IT
http://www.atmarkit.co.jp/ait/articles/0708/21/news116.html

var x = [0, 1, 2]; // 配列
var y = x; [D]
x[0] = 10; // 配列の先頭の要素を書き換え [E]
window.alert(y); // 10,1,2(参照元の値を表示) [F]
79名無しさん :2013/07/27(土)16:22:09 ID:YVfgVJWFX
JavaScriptでびっくりしたのは「連想配列とオブジェクト?一緒でいいじゃん」って考え方だな。
フィールドに、値としてメソッド入れてあったらメソッドで。

もうひとつびっくりしたのは 配列 == 連想配列 かと言うとそれも微妙に違ってて
配列は添字を連続した数値と仮定する「連想配列を拡張した」型ってのが。
80名無しさん :2013/11/05(火)12:32:50 ID:YB4fr8pHv
Dateオブジェクト (日付と時刻) - JavaScriptプログラミング解説
http://www.crystal-creation.com/web-appli/technical-information/programming/javascript/grammar/object/date.htm

toLocaleString()
chrome4は Thu May 01 2008 02:00:00 GMT+0900 (Japan Standard Time)

あと、
var d = new Date('2008年5月1日 2:00:00'); // Invalid Date
81名無しさん :2013/11/06(水)06:12:30 ID:VjXd8KQI+
new Date('2008/05/01 02:00:00') は解釈できるのに、

Dateオブジェクトから、'2008/05/01 02:00:00'を一発で得られる関数が用意されてない。
82名無しさん :2013/11/11(月)18:14:27 ID:yfpI/pGF+
全角半角も大文字小文字も全て区別される

var han_a = 'a';
var han_A = 'A';
var zen_a = 'a';
var zen_A = 'A';
console.log("han_a==zen_A " + (han_a==zen_A).toString()); // false
console.log("han_a==zen_a " + (han_a==zen_a).toString()); // false
console.log("han_a==han_A " + (han_a==han_A).toString()); // false
console.log("zen_a==zen_A " + (zen_a==zen_A).toString()); // false
console.log("han_a.localeCompare(zen_A) " + han_a.localeCompare(zen_A).toString()); //-1
console.log("han_a.localeCompare(zen_a) " + han_a.localeCompare(zen_a).toString()); //-1
console.log("han_a.localeCompare(han_A) " + han_a.localeCompare(han_A).toString()); //-1
console.log("zen_a.localeCompare(zen_A) " + zen_a.localeCompare(zen_A).toString()); //-1
83名無しさん :2013/11/12(火)08:37:08 ID:023e3UWtn
短いコードがいっぱい

JavascriptTips - jslibs - JavaScript language advanced tips and tricks - standalone JavaScript development runtime environment with general purpose native libraries - Google Project Hosting
http://code.google.com/p/jslibs/wiki/JavascriptTips
84名無しさん :2013/11/12(火)08:50:00 ID:023e3UWtn
こんな書き方ができるのか
function f(x) x * x;
document.title = f(3); // 9
85名無しさん :2013/11/12(火)09:18:47 ID:023e3UWtn
function f() {
return [1, 2];
}

var [a, b] = f();

Print( a + ' ' + b ); // prints: 1 2
86名無しさん :2013/11/12(火)09:23:34 ID:023e3UWtn
入れ替え
var a = 1;
var b = 2;
[a,b] = [b,a];
87名無しさん :2013/11/12(火)09:50:44 ID:023e3UWtn
なじみない表記だけど覚えたほうがいいのだろうか

for each ( var i in [3,23,4] )
Print(i)

Prints:
3
23
4
88名無しさん :2013/11/12(火)09:54:15 ID:023e3UWtn
配列には決して使うなと書いてあるが、詳細はリンク切れ

for each...in - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for_each...in
89名無しさん :2013/11/12(火)10:18:15 ID:023e3UWtn
for each in も for in もプロパティー列挙用だ

for...in - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...in

プロパティー名と値を列挙
function show_props(obj, objName) {
  var result = "";
  for (var i in obj) {
   result += objName + "." + i + " = " + obj[i] + "\n";
  }
  return result;
}
90名無しさん :2013/11/13(水)14:06:42 ID:XSgCGhV1I
arguments - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments

arguments.callee
現在実行している関数の関数本体を示す。
arguments.caller
現在実行している関数を呼び出した関数の名前を示す。

var args = Array.prototype.slice.call(arguments);
で配列化
91名無しさん :2013/11/13(水)14:52:33 ID:XSgCGhV1I
callerはもう使えない
92名無しさん :2013/11/26(火)16:57:23 ID:nNJyae6Nv
if ([]) console.log('[] is true'); // true
if ([].length) console.log('[].length is true'); // false
if (0) console.log('0 is true'); // false
93名無しさん :2013/11/29(金)07:02:46 ID:NLRJVGdZc
要素が一つだけだと連結できないから、0なのかな

console.log(Array(0).join('x').length); // 0
console.log(Array(1).join('x').length); // 0
console.log(Array(2).join('x').length); // 1
console.log(Array(3).join('x').length); // 2
94名無しさん :2014/03/06(木)17:51:55 ID:Tp4ilRae8
配列の列挙はfor-ofを使う
95名無しさん :2014/03/07(金)10:31:06 ID:K6Heycodl
forEachと同じじゃね?

for...of - JavaScript リダイレクト 1 | MDN
https://developer.mozilla.org/ja/docs/JavaScript/Reference/%E6%96%87/for...of
96名無しさん :2014/03/07(金)12:53:20 ID:m4kvQIs6C
違う
forEachはArrayクラスのメソッド
for-ofはiterableな値をイテレートする構文
97名無しさん :2014/03/08(土)00:58:48 ID:EVHnOIYBQ
質問相談雑談なんでも来い
HTML5プロフェッショナルの俺が答えてやる
98名無しさん :2014/03/08(土)06:40:52 ID:iodK1wCah
コールバック関数内から引数 s にアクセスしても大丈夫ですか?

function test(s) {
 setTimeout(function(){
  document.title = s;
 }, 1000);
 //s = "TEST"; コレを入れるとタイトルが TEST になる
}

test((new Date()).toString());
99名無しさん :2014/03/08(土)08:45:22 ID:iodK1wCah
EST になる
sがいつまで有効なのか分からない

function test(s) {
 setTimeout(function(){
  let ss = s.slice(1);
  document.title = ss;
 }, 1000);
 s = "TEST"; //コレを入れるとタイトルが TEST になる
}
test((new Date()).toString());
100名無しさん :2014/03/08(土)08:47:49 ID:iodK1wCah
at Mar 08 2014 08:46:33 GMT+0900 になる

function test(s) {
 let ss = s.slice(1);
 setTimeout(function(){
  document.title = ss;
 }, 1000);
}
test((new Date()).toString());

新着レスの表示 | ここまで読んだ

名前: mail:





JavaScript HTML5
CRITEO