記録

猫でもできるjsでゴリゴリ


有言実行ということで、ゴリゴリJSのサンプル書いてみました。
と言ってもサンプルなので数行だけです。
唯、これを理解すると結構便利です。使い方は人それぞれだと思いますが
簡単に言えばJSのプラグインの考え方と似ていますね。
最初の部分だけ変更すればプラグインになっちゃうからね。
トイウコトでサンプルです。
本当はボタン押しても何も動かない仕様にするつもりでした。
コンソールログから出力した値から導き出して欲しかったけど
いまどきオープンなので・・・。
サンプルサイトとソースを掲載します。
https://www.zip358.com/tool/ajikan_js/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>猫でもできるjsでゴリゴリ</title>
    <meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../topcoat/main/fonts/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="../topcoat/css/topcoat-desktop-dark.css">
    <link rel="stylesheet" type="text/css" href="../topcoat/main/css/main.css">
    <link rel="stylesheet" type="text/css" href="../topcoat/main/css/brackets.css"><!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <script>
        $(function(){
            var ajikan  = {
                ajisen:function(){
                    var str = "味せんべい";
                    console.log(str);
                    return str;
                },neko:function(){
                    var str = "猫が";
                    console.log(str);
                    return str;
                },loop:function(obj){
                    var cnt = Number($(obj).val());
                    console.log(cnt);
                    return cnt;
                },taberu:function(ore,str1,str2,cnt){
                    var o = "";
                    for(var i=0;i<cnt;i++){
                        o+=str1;
                    }
                    for(var i=0;i<cnt;i++){
                        o+=str2;
                    }
                    o+="たべる?";
                    $(ore).html(o);
                    return;
                }
            };
            $("#ore").click(function(){
                  console.log("oioioi・・投資信託");
                  var e  =  ajikan;
                  e.taberu("#obj",e.neko(),e.ajisen(),e.loop("#cnt"));
            });
        });
    </script>
  </head>
  <body class="dark">
      <div id="wrapper">
          <section class="component">
              <input type="text" value="" id="cnt">
              <input type="button" value="お!!" id="ore">
              <div id="obj">
              </div>
            </section>
      </div>
  </body>
</html>

 



明日、JSコードを書きます。前のページ

リクルートの人工知能api(a3rt)で自動記事生成の作り方。次のページ

関連記事

  1. 記録

    プログラマーじゃないのにコードが書ける人がゾクゾク(´Д`)?

    プログラマーじゃないのにコードが書ける人が今よりかゾクゾクでてくる時…

  2. 記録

    漫画家がぞくぞくYOUTUBEに参入されています。

    漫画家がぞくぞくYOUTUBEに参入されています、例えば漫画家・浦沢…

  3. 記録

    試行錯誤と思考、自分の頭の中。

    昨日、YOUTUBEにPHPの解説動画をUPしたのだけど、意外…

  4. 記録

    島フェスの告知依頼が来ました。

    島フェスの告知依頼がきましたので告知をtosajin.infoのTw…

  5. 記録

    NHKスペシャルの天使か悪魔か、羽生善治、人工知能を探るが面白そうだったので見た。

    NHKスペシャルの天使か悪魔か、羽生善治、人工知能を探るが面白そうだ…

  6. 記録

    フリーで出来る人と出来ない人がいる。

    フリーで出来る人と出来ない人がいる。・社交的であるか?・秀でた能…

PAGE TOP