JavaScriptのTips

(本ページで扱うのはES6以前のJavaScript(Vanilla JS)の話です）

→JavaScript

→モダンJavaScript

→JavaScript関連ツール

→JavaScriptの基礎

→AJAX関連

サブトピック †

• JavaScript言語仕様系Tips

一般 †

• 好きなサイトをダークモード化してみる。 - Qiita 2019

• How to check battery status with javascript : 2 simple steps 2022.7

• 奇妙なJavaScript - Qiita 2022.7

  ['constructor']['constructor']['constructor']('return this')()['console']['log']('Hello JavaScript!')

• JavaScript generators ELI5 - DEV Community 2022.7
  • yieldとかの話

• JavaScript shorthand tips and tricks - DEV Community 2022.7

• JavaScriptのデバックにはdebugger文を使おう - Qiita 2022.6

• 【Javascript】配列内の重複要素を削除する - Qiita 2022.4

• JavaScript: Web Workerを動かす最小限のコード - Qiita 2022.1

• Native File System API でテキストエディタを作る 2021.10

• JavaScriptのコーディングTips集 2014.3.14

• Ruby,Python,PHP,JavaScriptでマルチプラットフォームなデスクトップアプリを簡単に作成する 2010.2.19

• JavaScriptプログラマが理解しておくべき8つのこと。の個人的補足 2009.12.27

• javascriptプログラマのレベル10

• JavaScript初心者におくる24のグレイトなtips 2009.12.13

• JavaScriptを高速化する31のチェックリスト 2009.10.29

• 7 JavaScript Techniques You Should Be Using Today

• 9 Javascript Tips you may not know

console.log †

• console.logをもっと使いこなす！ - Qiita 2022.9
• console.log(); しか使えなかった自分へ。。。 - Qiita 2022.6
  • console.log({変数名});
  • console.time();
  • console.assert();
  • console.table();

• JavaScriptでconsole.log()を使うのはやめよう - Qiita 2022.5

• 今すぐJavaScriptデバッグ効率を上げるconsoleテクニック 2019.10

• 【2019年4月版】JavaScriptのconsoleがすごいことになってた。 2019.4

Web画面制御系 †

• [JS]スマートフォンのタッチイベントを取得する各スクリプトのまとめ（仕様比較） 2012.6.21

• ソースコピーですぐ使えてスマホ専用サイト作成に便利！PC・スマートフォンサイトの振り分けJavaScript作りました。 2012.5.29

• 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:ＭＳ Ｐゴシック;position:absolute;top:740px;left:900px;]
        font-weight:bold;font-color:black;font-size:25px;
        background-color:white;width:74px;height:20px;z-index:1000;'>" +
        title + "</span>";
  }

• Enterキーで送信されてしまうのを防ぐ

• ボタン押下でウィンドウを閉じる

  <input type="button" value="サブウィンドウを閉じる" onClick="window.close()">

• JavaScriptで新しいウィンドウをサイズ指定して開く

• Javascriptによるフォームの制御

• submit buttonの結果を別ウィンドウで開く

• onclick属性問題について 2008.5.18

• バーチャルキーボードのスクリプト

• テーブルの縦列、横列をハイライト

• tr要素の「display : block;」にはまる

• 角丸を簡単な記述で実装するスクリプト 2008.3.10

• 【超基礎】リンクをクリックしたらJavaScriptのfunctionを実行したいとき

  <a href="javaScript:hoge_func()">実行する</a>
  

パララックス †

• 【React】ライブラリーを使わないでパララックスを使って、リッチなサイトを作る - Qiita 2022.6
• 複数のレイヤーをずらして動かし立体感を与えるスクリプト(parallax) 2009

文字列処理 †

• javascriptでtoLocaleString（）およびtofixed（2）を使用する方法 2019.2

  num.toLocaleString(undefined, {minimumFractionDigits: 2})

• 全角半角変換

• Quotemeta 正規表現中のメタ文字をすべてエスケープしてくれる

• 郵便番号から住所へ変換

日付処理 †

• JavaScriptでDateをyyyy/MM/dd HH:mm:ssにフォーマットする方法 (date-fnsなどのライブラリなしで) - Qiita 2021.11

  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を使う 2015.9

画像 †

• canvasのgetContext("2d")って何 - Qiita 2020.9

• IEでlabelの子要素に画像を含める
• 画像の本来の幅と高さを取得

• 手めくり風画像ギャラリー
• スクリプトとスタイルシートで作る画像ギャラリーのサンプル

• グラフチュートリアル集

通信 †

• Java から JavaScript への通信
  • JSObject

• 無名関数を使った非同期通信のススメ 2010.1.19

• Eメール送信

アニメーション、ゲーム †

• Colorful Rain Animation Effects using Html CSS & Vanilla Javascript @Online Tutorials - YouTube 2021.12

• JavaScript アニメーションとデザインパターン 2012.5.14

• JavaScriptでテトリスみたいなゲームを作ろう

• アニメーションするドロップダウンメニュー

• Matrix風にページを表示する

• 女の子が降ってくるスクリプト(http://q.hatena.ne.jp/1231366704の31番)

  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={}
    }
  }
  )()
  	

開発技法 †

• Visual Studioで静的HTMLページのJavaScriptコードをデバッグするには？

• Eight Simple Rules for Maintainable Javascript 2017.7.3

• ある意味究極のソースコード添付法

ブックマークレット †

• Chrome Dev Toolでブックマークレットを実行する - Qiita 2020
  • ブックマークレットのデバッグ

• URLコピーしてクリップボードに入れる例

  javascript:(function(){var text =document.title+">"+document.URL; navigator.clipboard.writeText(text).then(e =>{alert('Copy OK!');});})();

• JavaScriptでクリップボードに文字をコピーする(ブラウザ) - Qiita 2020.12

• ブックマークレット／Bookmarkletの作り方

• WebページタイトルとURLを一発でコピーできるBookmarklet 2021.4

• 【個人開発】ネットで調べ物するたびに、タイトルとアドレスをメモれるツールを作って10年以上使っている話 2021.8

• 作業効率が加速する…無駄を省いてブログ執筆の時間を短縮しよう！私が現在使用している「ブックマークレット」6選！ 2012.9.11

• ブックマークレットとは
  • Bookmarklet。ウェブブラウザで作動するJavaScriptプログラムの一種。
  • 通常ウェブブラウザでブックマーク（お気に入り）を選ぶと、登録しておいたURLに遷移するが、URLの代わりにJavaScriptのプログラムコードをブックマークしておくことで、それを選んだ時にプログラムが実行されてちょっとした機能が実現できる。そのようなものをブックマークレットと言う。
  • インストールはそのコードをブックマークするだけで行える。
  • 「ブックマークを選ぶ」という操作だけで機能を実行できる点が手軽であり、ブラウザの簡便な追加機能として様々な種類のものが広く配布されている。