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

JavaScript

モダンJavaScript

JavaScript関連ツール

JavaScriptの基礎

AJAX関連

サブトピック

一般

  • 奇妙なJavaScript - Qiita 2022.7
    ['constructor']['constructor']['constructor']('return this')()['console']['log']('Hello JavaScript!')

console.log

Web画面制御系

  • 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:740px;left:900px;]
          font-weight:bold;font-color:black;font-size:25px;
          background-color:white;width:74px;height:20px;z-index:1000;'>" +
          title + "</span>";
    }
  • 【超基礎】リンクをクリックしたらJavaScriptのfunctionを実行したいとき
    <a href="javaScript:hoge_func()">実行する</a>
    

パララックス

文字列処理

日付処理

画像

通信

アニメーション、ゲーム

  • 女の子が降ってくるスクリプト(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={}
      }
    }
    )()
    	

開発技法

ブックマークレット

  • URLコピーしてクリップボードに入れる例
    javascript:(function(){var text =document.title+">"+document.URL; navigator.clipboard.writeText(text).then(e =>{alert('Copy OK!');});})();
  • ブックマークレットとは
    • Bookmarklet。ウェブブラウザで作動するJavaScriptプログラムの一種。
    • 通常ウェブブラウザでブックマーク(お気に入り)を選ぶと、登録しておいたURLに遷移するが、URLの代わりにJavaScriptのプログラムコードをブックマークしておくことで、それを選んだ時にプログラムが実行されてちょっとした機能が実現できる。そのようなものをブックマークレットと言う。
    • インストールはそのコードをブックマークするだけで行える。
    • 「ブックマークを選ぶ」という操作だけで機能を実行できる点が手軽であり、ブラウザの簡便な追加機能として様々な種類のものが広く配布されている。

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2022-10-12 (水) 09:34:18 (46d)