JavaScriptのTips
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
] [
Twitter
]
開始行:
(本ページで扱うのはES6以前のJavaScript(Vanilla JS)の話で...
→JavaScript
→モダンJavaScript
→JavaScript関連ツール
→JavaScriptの基礎
→AJAX関連
#contents
*サブトピック [#z5b7cc25]
-JavaScript言語仕様系Tips
*一般 [#e640ed99]
-[[JavaScriptだけでユーザーのIPアドレスを取得する方法 | ...
-[[JavaScriptで要素をドラッグして移動する簡単な方法 #Java...
-[[JavaScriptの小技集 #JavaScript - Qiita>https://qiita.c...
-[[JavaScriptデザインパターン入門 - Qiita>https://qiita.c...
--モジュールパターン、オブザーバーパターン
-[[要素にあわせて形状が変化するマウスカーソル - Qiita>htt...
-[[コーディング時間を節約できる JavaScript1行コード20...
-[[【超ザックリ・図解付き解説】JavaScriptのDOM>https://ze...
-[[好きなサイトをダークモード化してみる。 - Qiita>https:/...
-[[How to check battery status with javascript : 2 simple...
-[[JavaScript generators ELI5 - DEV Community>https://dev...
--yieldとかの話
-[[JavaScript shorthand tips and tricks - DEV Community>h...
-[[JavaScriptのデバックにはdebugger文を使おう - Qiita>htt...
-[[【Javascript】配列内の重複要素を削除する - Qiita>https...
-[[JavaScript: Web Workerを動かす最小限のコード - Qiita>h...
-[[Native File System API でテキストエディタを作る>https:...
-[[JavaScriptのコーディングTips集>http://d.hatena.ne.jp/l...
-[[Ruby,Python,PHP,JavaScriptでマルチプラットフォームなデ...
-[[JavaScriptプログラマが理解しておくべき8つのこと。の個...
-[[javascriptプログラマのレベル10>http://tech.kayac.com/a...
-[[JavaScript初心者におくる24のグレイトなtips>http://d.ha...
-[[JavaScriptを高速化する31のチェックリスト>http://journa...
-[[7 JavaScript Techniques You Should Be Using Today>http...
-[[9 Javascript Tips you may not know:http://aymanh.com/9...
*console.log [#mf5a3ce4]
-[[console.log() の代わりにdevtoolsのLogpointsを使う #Jav...
-[[【JavaScript】Consoleの基本的な出力とグループ化 - Qiit...
-[[console.logをもっと使いこなす! - Qiita>https://qiita....
-[[console.log(); しか使えなかった自分へ。。。 - Qiita>ht...
--console.log({変数名});
--console.time();
--console.assert();
--console.table();
-[[JavaScriptでconsole.log()を使うのはやめよう - Qiita>ht...
-[[今すぐJavaScriptデバッグ効率を上げるconsoleテクニック>...
-[[【2019年4月版】JavaScriptのconsoleがすごいことになって...
*Web画面制御系 [#n0c6469c]
-[[JSでブラウザの戻るボタンを止める方法。 - Qiita>https:/...
-[[[JS]スマートフォンのタッチイベントを取得する各スクリプ...
-[[ソースコピーですぐ使えてスマホ専用サイト作成に便利!PC...
-[[ amachang の 「一行で IE の JavaScript を高速化する方...
-htmlのタイトルを画面中に表示させるJavaScriptの例
element = document.getElementsByTagName("body");
var title = document.title;
if(element[0]){
var childElement = document.createElement("span");
element[0].appendChild(childElement);
childElement.innerHTML = "<span style=
'font-family:MS Pゴシック;position:absolute;top:...
font-weight:bold;font-color:black;font-size:25px;
background-color:white;width:74px;height:20px;z-in...
title + "</span>";
}
-[[Enterキーで送信されてしまうのを防ぐ>http://allabout.co...
-[[ボタン押下でウィンドウを閉じる>http://www.tagindex.com...
<input type="button" value="サブウィンドウを閉じる" onCl...
-[[JavaScriptで新しいウィンドウをサイズ指定して開く>http:...
-[[Javascriptによるフォームの制御>http://www.atmarkit.co....
-[[submit buttonの結果を別ウィンドウで開く>http://suz-lab...
-[[onclick属性問題について>http://d.hatena.ne.jp/amachang...
-[[バーチャルキーボードのスクリプト>http://coliss.com/art...
-[[テーブルの縦列、横列をハイライト>http://blog.livedoor....
-[[tr要素の「display : block;」にはまる>http://www.h-fj.c...
-[[角丸を簡単な記述で実装するスクリプト>http://coliss.com...
-【超基礎】リンクをクリックしたらJavaScriptのfunctionを実...
<a href="javaScript:hoge_func()">実行する</a>
*パララックス [#lbba82b7]
-[[【React】ライブラリーを使わないでパララックスを使って...
-[[複数のレイヤーをずらして動かし立体感を与えるスクリプト...
*文字列処理 [#ka5ac567]
-[[JavaScript で Base64 - 30歳からのプログラミング>https:...
-[[javascriptでtoLocaleString()およびtofixed(2)を使用...
num.toLocaleString(undefined, {minimumFractionDigits: 2})
-[[全角半角変換>http://blog.livedoor.jp/dankogai/archives...
-[[Quotemeta 正規表現中のメタ文字をすべてエスケープしてく...
-[[郵便番号から住所へ変換:http://blog.livedoor.jp/dankoga...
* 日付処理 [#sa3fc1c5]
-[[Intl.DateTimeFormat を使うときは気をつけないと50倍くら...
-[[JavaScriptでDateをyyyy/MM/dd HH:mm:ssにフォーマットす...
const date = new Date(2001, 0, 2, 3, 4, 5);
const d = new Intl.DateTimeFormat("ja-jp", {
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
}).format(date);
console.log(d); //=> "2001/01/02 03:04:05"
-[[Moment.jsを使う>https://qiita.com/osakanafish/items/5e...
*画像 [#j14ecc65]
-[[canvasのgetContext("2d")って何 - Qiita>https://qiita.c...
-[[IEでlabelの子要素に画像を含める>http://labs.unoh.net/2...
-[[画像の本来の幅と高さを取得>http://d.hatena.ne.jp/iname...
-[[手めくり風画像ギャラリー>http://phpspot.org/blog/archi...
-[[スクリプトとスタイルシートで作る画像ギャラリーのサンプ...
-[[グラフチュートリアル集>http://www.designwalker.com/200...
*通信 [#o9d8740b]
-[[Java から JavaScript への通信>http://java.sun.com/j2se...
--JSObject
-[[無名関数を使った非同期通信のススメ>http://satoshi.blog...
-[[Eメール送信>http://code.nanigac.com/source/view/168]]
*アニメーション、ゲーム [#qbcee0c0]
-[[マウスストーカー(視線) - Qiita>https://qiita.com/xrx...
-[[運命が邪魔をする退会ボタン - Qiita>https://qiita.com/Y...
-[[Colorful Rain Animation Effects using Html CSS & Vanil...
-[[JavaScript アニメーションとデザインパターン>http://ama...
-[[JavaScriptでテトリスみたいなゲームを作ろう>http://svn....
-[[アニメーションするドロップダウンメニュー>http://phpspo...
-[[Matrix風にページを表示する:http://www.simplexsimple.co...
-女の子が降ってくるスクリプト(http://q.hatena.ne.jp/12313...
javascript:(
function(){
scroll(0,0);
H='http://hamachiya.com/';
D=document;
F=Math.floor;
R=Math.random;
Q=new Image;
Q.src=H+'g1.gif';
L=function(){
var X=F(R()*vw);
var Y=0;
var r=F(R()*9)+3;
var V=Z(X,Y);
D.body.appendChild(V);
var f=function(){
if(Y+r<vh){
V.style.top=(Y+=r)+'px'
}else{
V.style.top=vh+'px';
V.src=H+'g2.gif';
setTimeout(function(){V.src=H+'g3.gif'},550);
clearInterval(t);
}
};
var t=setInterval(f,40)
};
Z=function(x){
var e=D.createElement('img');
e.src=Q.src;
var s=e.style;
s.position='absolute';
s.left=x+'px';
s.top=0;
return e;
};
var vw,vh;
Q.onload=function(){
vw=(self.innerWidth||
D.documentElement.clientWidth||D.body.clientWidth)
-Q.width;
vh=(self.innerHeight||
D.documentElement.clientHeight||D.body.clientHeight)
-Q.height;
setInterval(L,800);
Q.onload={}
}
}
)()
*開発技法 [#n319b052]
-[[Visual Studioで静的HTMLページのJavaScriptコードをデバ...
-[[Eight Simple Rules for Maintainable Javascript >http:/...
-[[ある意味究極のソースコード添付法:http://blog.livedoor....
*ブックマークレット [#efea4dad]
-[[Firefoxでブックマークレットが動かなくなることがある理...
--CSP(Content Security Policy)を無効にする
-[[Chrome Dev Toolでブックマークレットを実行する - Qiita>...
--ブックマークレットのデバッグ
-URLコピーしてクリップボードに入れる例
javascript:(function(){var text =document.title+">"+docu...
--余計な引数が付くのを取り除きたい場合
javascript:(function(){var w = document.URL;if (w.indexO...
-[[JavaScriptでクリップボードに文字をコピーする(ブラウザ)...
-[[ブックマークレット/Bookmarkletの作り方>https://www.ca...
-[[WebページタイトルとURLを一発でコピーできるBookmarklet>...
-[[【個人開発】ネットで調べ物するたびに、タイトルとアドレ...
-[[作業効率が加速する…無駄を省いてブログ執筆の時間を短縮...
-[[ブックマークレットとは>http://d.hatena.ne.jp/keyword/%...
--Bookmarklet。ウェブブラウザで作動するJavaScriptプログラ...
--通常ウェブブラウザでブックマーク(お気に入り)を選ぶと...
--インストールはそのコードをブックマークするだけで行える。
--「ブックマークを選ぶ」という操作だけで機能を実行できる...
終了行:
(本ページで扱うのはES6以前のJavaScript(Vanilla JS)の話で...
→JavaScript
→モダンJavaScript
→JavaScript関連ツール
→JavaScriptの基礎
→AJAX関連
#contents
*サブトピック [#z5b7cc25]
-JavaScript言語仕様系Tips
*一般 [#e640ed99]
-[[JavaScriptだけでユーザーのIPアドレスを取得する方法 | ...
-[[JavaScriptで要素をドラッグして移動する簡単な方法 #Java...
-[[JavaScriptの小技集 #JavaScript - Qiita>https://qiita.c...
-[[JavaScriptデザインパターン入門 - Qiita>https://qiita.c...
--モジュールパターン、オブザーバーパターン
-[[要素にあわせて形状が変化するマウスカーソル - Qiita>htt...
-[[コーディング時間を節約できる JavaScript1行コード20...
-[[【超ザックリ・図解付き解説】JavaScriptのDOM>https://ze...
-[[好きなサイトをダークモード化してみる。 - Qiita>https:/...
-[[How to check battery status with javascript : 2 simple...
-[[JavaScript generators ELI5 - DEV Community>https://dev...
--yieldとかの話
-[[JavaScript shorthand tips and tricks - DEV Community>h...
-[[JavaScriptのデバックにはdebugger文を使おう - Qiita>htt...
-[[【Javascript】配列内の重複要素を削除する - Qiita>https...
-[[JavaScript: Web Workerを動かす最小限のコード - Qiita>h...
-[[Native File System API でテキストエディタを作る>https:...
-[[JavaScriptのコーディングTips集>http://d.hatena.ne.jp/l...
-[[Ruby,Python,PHP,JavaScriptでマルチプラットフォームなデ...
-[[JavaScriptプログラマが理解しておくべき8つのこと。の個...
-[[javascriptプログラマのレベル10>http://tech.kayac.com/a...
-[[JavaScript初心者におくる24のグレイトなtips>http://d.ha...
-[[JavaScriptを高速化する31のチェックリスト>http://journa...
-[[7 JavaScript Techniques You Should Be Using Today>http...
-[[9 Javascript Tips you may not know:http://aymanh.com/9...
*console.log [#mf5a3ce4]
-[[console.log() の代わりにdevtoolsのLogpointsを使う #Jav...
-[[【JavaScript】Consoleの基本的な出力とグループ化 - Qiit...
-[[console.logをもっと使いこなす! - Qiita>https://qiita....
-[[console.log(); しか使えなかった自分へ。。。 - Qiita>ht...
--console.log({変数名});
--console.time();
--console.assert();
--console.table();
-[[JavaScriptでconsole.log()を使うのはやめよう - Qiita>ht...
-[[今すぐJavaScriptデバッグ効率を上げるconsoleテクニック>...
-[[【2019年4月版】JavaScriptのconsoleがすごいことになって...
*Web画面制御系 [#n0c6469c]
-[[JSでブラウザの戻るボタンを止める方法。 - Qiita>https:/...
-[[[JS]スマートフォンのタッチイベントを取得する各スクリプ...
-[[ソースコピーですぐ使えてスマホ専用サイト作成に便利!PC...
-[[ amachang の 「一行で IE の JavaScript を高速化する方...
-htmlのタイトルを画面中に表示させるJavaScriptの例
element = document.getElementsByTagName("body");
var title = document.title;
if(element[0]){
var childElement = document.createElement("span");
element[0].appendChild(childElement);
childElement.innerHTML = "<span style=
'font-family:MS Pゴシック;position:absolute;top:...
font-weight:bold;font-color:black;font-size:25px;
background-color:white;width:74px;height:20px;z-in...
title + "</span>";
}
-[[Enterキーで送信されてしまうのを防ぐ>http://allabout.co...
-[[ボタン押下でウィンドウを閉じる>http://www.tagindex.com...
<input type="button" value="サブウィンドウを閉じる" onCl...
-[[JavaScriptで新しいウィンドウをサイズ指定して開く>http:...
-[[Javascriptによるフォームの制御>http://www.atmarkit.co....
-[[submit buttonの結果を別ウィンドウで開く>http://suz-lab...
-[[onclick属性問題について>http://d.hatena.ne.jp/amachang...
-[[バーチャルキーボードのスクリプト>http://coliss.com/art...
-[[テーブルの縦列、横列をハイライト>http://blog.livedoor....
-[[tr要素の「display : block;」にはまる>http://www.h-fj.c...
-[[角丸を簡単な記述で実装するスクリプト>http://coliss.com...
-【超基礎】リンクをクリックしたらJavaScriptのfunctionを実...
<a href="javaScript:hoge_func()">実行する</a>
*パララックス [#lbba82b7]
-[[【React】ライブラリーを使わないでパララックスを使って...
-[[複数のレイヤーをずらして動かし立体感を与えるスクリプト...
*文字列処理 [#ka5ac567]
-[[JavaScript で Base64 - 30歳からのプログラミング>https:...
-[[javascriptでtoLocaleString()およびtofixed(2)を使用...
num.toLocaleString(undefined, {minimumFractionDigits: 2})
-[[全角半角変換>http://blog.livedoor.jp/dankogai/archives...
-[[Quotemeta 正規表現中のメタ文字をすべてエスケープしてく...
-[[郵便番号から住所へ変換:http://blog.livedoor.jp/dankoga...
* 日付処理 [#sa3fc1c5]
-[[Intl.DateTimeFormat を使うときは気をつけないと50倍くら...
-[[JavaScriptでDateをyyyy/MM/dd HH:mm:ssにフォーマットす...
const date = new Date(2001, 0, 2, 3, 4, 5);
const d = new Intl.DateTimeFormat("ja-jp", {
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
}).format(date);
console.log(d); //=> "2001/01/02 03:04:05"
-[[Moment.jsを使う>https://qiita.com/osakanafish/items/5e...
*画像 [#j14ecc65]
-[[canvasのgetContext("2d")って何 - Qiita>https://qiita.c...
-[[IEでlabelの子要素に画像を含める>http://labs.unoh.net/2...
-[[画像の本来の幅と高さを取得>http://d.hatena.ne.jp/iname...
-[[手めくり風画像ギャラリー>http://phpspot.org/blog/archi...
-[[スクリプトとスタイルシートで作る画像ギャラリーのサンプ...
-[[グラフチュートリアル集>http://www.designwalker.com/200...
*通信 [#o9d8740b]
-[[Java から JavaScript への通信>http://java.sun.com/j2se...
--JSObject
-[[無名関数を使った非同期通信のススメ>http://satoshi.blog...
-[[Eメール送信>http://code.nanigac.com/source/view/168]]
*アニメーション、ゲーム [#qbcee0c0]
-[[マウスストーカー(視線) - Qiita>https://qiita.com/xrx...
-[[運命が邪魔をする退会ボタン - Qiita>https://qiita.com/Y...
-[[Colorful Rain Animation Effects using Html CSS & Vanil...
-[[JavaScript アニメーションとデザインパターン>http://ama...
-[[JavaScriptでテトリスみたいなゲームを作ろう>http://svn....
-[[アニメーションするドロップダウンメニュー>http://phpspo...
-[[Matrix風にページを表示する:http://www.simplexsimple.co...
-女の子が降ってくるスクリプト(http://q.hatena.ne.jp/12313...
javascript:(
function(){
scroll(0,0);
H='http://hamachiya.com/';
D=document;
F=Math.floor;
R=Math.random;
Q=new Image;
Q.src=H+'g1.gif';
L=function(){
var X=F(R()*vw);
var Y=0;
var r=F(R()*9)+3;
var V=Z(X,Y);
D.body.appendChild(V);
var f=function(){
if(Y+r<vh){
V.style.top=(Y+=r)+'px'
}else{
V.style.top=vh+'px';
V.src=H+'g2.gif';
setTimeout(function(){V.src=H+'g3.gif'},550);
clearInterval(t);
}
};
var t=setInterval(f,40)
};
Z=function(x){
var e=D.createElement('img');
e.src=Q.src;
var s=e.style;
s.position='absolute';
s.left=x+'px';
s.top=0;
return e;
};
var vw,vh;
Q.onload=function(){
vw=(self.innerWidth||
D.documentElement.clientWidth||D.body.clientWidth)
-Q.width;
vh=(self.innerHeight||
D.documentElement.clientHeight||D.body.clientHeight)
-Q.height;
setInterval(L,800);
Q.onload={}
}
}
)()
*開発技法 [#n319b052]
-[[Visual Studioで静的HTMLページのJavaScriptコードをデバ...
-[[Eight Simple Rules for Maintainable Javascript >http:/...
-[[ある意味究極のソースコード添付法:http://blog.livedoor....
*ブックマークレット [#efea4dad]
-[[Firefoxでブックマークレットが動かなくなることがある理...
--CSP(Content Security Policy)を無効にする
-[[Chrome Dev Toolでブックマークレットを実行する - Qiita>...
--ブックマークレットのデバッグ
-URLコピーしてクリップボードに入れる例
javascript:(function(){var text =document.title+">"+docu...
--余計な引数が付くのを取り除きたい場合
javascript:(function(){var w = document.URL;if (w.indexO...
-[[JavaScriptでクリップボードに文字をコピーする(ブラウザ)...
-[[ブックマークレット/Bookmarkletの作り方>https://www.ca...
-[[WebページタイトルとURLを一発でコピーできるBookmarklet>...
-[[【個人開発】ネットで調べ物するたびに、タイトルとアドレ...
-[[作業効率が加速する…無駄を省いてブログ執筆の時間を短縮...
-[[ブックマークレットとは>http://d.hatena.ne.jp/keyword/%...
--Bookmarklet。ウェブブラウザで作動するJavaScriptプログラ...
--通常ウェブブラウザでブックマーク(お気に入り)を選ぶと...
--インストールはそのコードをブックマークするだけで行える。
--「ブックマークを選ぶ」という操作だけで機能を実行できる...
ページ名: