javascriptの並列処理について

2018.02.13

Logging


 
javascriptの並列処理についてdemoサイトを作りましたので
参照し見てください。尚、コードは下記になります。
注意点とかは下記の画像を参照してみて下さい。
使用してわかったことは落ちないというのは良いことだということ。
落ちても表面上はエラー警告などはないので、結構便利なんじゃないだろうかという事です。
ちなみにこちらがデモサイトのリンクになります。
https://zip358.com/tool/worker/

<!DOCTYPE html>
<html>
    <head>
        <title>worker</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            var wkr = new Worker("worker.js");
            wkr.onmessage = function(d) {
                document.getElementById("wkr").innerHTML = document.getElementById("wkr").innerHTML +  d.data + "<br>";
            };
        </script>
    </head>
    <body>
        <div id="wkr">
        </div>
    </body>
</html>
var e = 0;
function en(){
    e = e + 1;
    postMessage((e*3.14));
    if(e < 1000)en();
}
en();

 
 

タグ

AM, body&gt, device-width, div&gt, DOCTYPE html&gt, document.getElementById, function en, head&gt, initial-scale, innerHTML, meta charset, meta name, new Worker, script src, script&gt, title&gt, var wkr, wkr.onmessage, worker.js, worker&lt,

サンプルJSプラグイン2、無名関数の引数渡し。

2017.10.01

Logging


昨日に続きJQueryのプラグイン作りを行なっています。
いろいろと勉強になります、何となく分かってきました。
javascriptでもいろいろと出来るのだなと感心しています。
ソースを毎度おなじみですが、解説なしのコードを貼り付けておきます。
今回はリターン時に無名関数を使ってみました。そして無名関数に引数渡しを
行なっています。
サンプルプログラムはこちらです。
https://zip358.com/tool/jsp/index1.html

(function($){
    $.fn.Lform = {
        Lget:function(c){
            var s = "";
            if(!c){
                $("body form").each(function(i, e) {
                    s+= "<input type='button' class='cssform' data-lfm='" + i + "' value='" + i + "番目のフォームを送信させる'><br>";
                });
            }else{
                s = "<input type='button' class='cssform' data-lfm='" + c + "'  value='" + c + "番目のフォームを送信させる'><br>";
            }
            return (function(s){
                console.log(s);
                $("#lsform").html(s);
                $(".cssform").click(function(){
                    var i = $(this).data("lfm");
                    $("body form").eq(i).submit();
                });
            })(s);
        }
    };
})(jQuery);
<!DOCTYPE html>
<html>
    <head>
        <title>JQプラグインか?::from送信プラグイン{BODYの中に複数のフォームが有る場合、指定したフォームを送信させる。}</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="lform.js"></script>
        <script>
            $(function(){
               $("#gLform").click(function(){
                   $("#gLform").Lform.Lget();
               });
               $("#gLform1").click(function(){
                   $("#gLform1").Lform.Lget(1);
               });
            });
        </script>
        <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
        ga('create', 'UA-71682075-1', 'auto');
        ga('send', 'pageview');
      </script>
    </head>
    <body>
        <h1>form送信プラグイン{BODYの中に複数のフォームが有る場合、指定したフォームを送信させる。}</h1>
        <input type="button" id="gLform" value="送信する"><input type="button" id="gLform1" value="送信する">
        <p id="lsform"></p>
        <form action="https://yahoo.co.jp" method="GET">
        </form>
        <form action="https://google.co.jp" method="GET">
        </form>
        <form action="https://www.msn.com/ja-jp" method="GET">
        </form>
    </body>
</html>

タグ

'cssform', 'GoogleAnalyticsObject', AM, body form, body&gt, button, data-lfm, DOCTYPE html&gt, form action, form&gt, gLform1, head&gt, input type, Lform.Lget, lsform, m.parentNode.insertBefore, s.getElementsByTagName, script src, script&gt, title&gt,

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

2017.06.10

Logging


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

 

タグ

, ajax.googleapis.com, AM, console.log, div id, div&gt, DOCTYPE html&gt, head&gt, html5shiv.googlecode.com, input type, link rel, meta http-equiv, return str, script src, script&gt, str1, stylesheet, title&gt, topcoat-desktop-dark.css, var ajikan, var str,

2桁になると数字と文字でバグる非同期通信の穴。MYSQLめ!!

2016.03.19

Logging

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>2桁になると数字と文字でバグる非同期通信の穴。MYSQLめ!!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js"></script>
   <script>
  $(function() {
        hoge(0);
  });
  function hoge(cnt){
    $.ajax({
       type: "POST",
       url: "json.php",
       data:{
           cnt:cnt
       },
       dataType: 'json',
       success: function(obj){
           var cnt = Number(obj.cnt);
           var id_name = obj.id_name;
           $("#id_no").html(cnt);
           $("#id_name").html(id_name);
            if(id_name!=""){
                 hoge(++cnt);
             }else{
                 alert("もうねぇよ━━━(゚∀゚≡(゚∀゚≡゚∀゚)≡゚∀゚)━━━━!!")
             }
       }
    });
  }
  </script>
</head>
<body>
No:<span id="id_no"></span>ID:NAME:<span id="id_name"></span>
</body>
</html>
<?php
//json.php
$cnt = $_POST["cnt"];
$link = mysql_connect('localhost', 'user', 'pass');
if (!$link) {
    die('接続失敗です。'.mysql_error());
}
$db_selected = mysql_select_db('database_name_hoge', $link);
if (!$db_selected){
    die('データベース選択失敗です。'.mysql_error());
}
//$result = mysql_query('SELECT * FROM where id_no =' . $cnt);
$result = mysql_query('SELECT * FROM where id_no =' . intval($cnt));
if (!$result) {
    die('クエリーが失敗しました。'.mysql_error());
}
$row = mysql_fetch_assoc($result);
$obj["id_name"] = $row['id_name'];
$obj["cnt"] = $cnt;
$json = json_encode($obj);
echo $json;

上記のソースはおそらく正しく動くであろうコードです。
このコードで何がしたいのかを解説していきます。
このHTML(index.html)が呼ばれたら(表示されたら)、
再帰処理がかかりPHPが動作してデータベースのテーブルから
主キーのid_no(int型)を検索しid_name(text型)を参照し
jsonで値を返して、受け取り表示するというものです。
簡単なプログラムですが、MYSQLに問い合わせをするときに
ちゃんとint型に変換してあげないと2桁なるとバグるという
問題が発生します!!
要するに0?9の間は参照してくれるのに
10になるとアレ・・・??
ってなり、参照してくれなくなるという
問題が発生します。
トイウコトデ・・・。
PHPやJQは案外いい加減な振る舞いをしてくれるけど
MYSQLは型の設定通り動作してくれるという
事なので注意が必要です。
ちなみに上記のコードが動作するかは未検証です(´Д`)

タグ

ajax.googleapis.com, AM, body&gt, code.jquery.com, datepicker.regional, datepicker.setDefaults, DOCTYPE html&gt, FROM where id_no, function hoge, head&gt, jquery-1.10.2.js, jquery-ui-i18n.min.js, jquery-ui.css, json.php, meta charset, MYSQL, script src, script&gt, select, span id, span&gt, title&gt,

非同期通信の改良版{jsonで非同期}

2015.07.22

Logging


 
つい最近、この方法を知った自分です・・・。それまではこういう方法で返せると思っていなかったというかソコまで考えていなかったです。ちなみに、このjson形式で送信すると複数のデータがやりとりできるので便利です。グーグルでjson形式で非同期受信などとググるとサンプルコードがでてきます。php結構凄いなとかおもいます。おそらく他の言語でも同じようなことが出来るのだと思います。javaとか確実に出来そうな気がします。
日々、他の人が書いたコードを見ることは勉強になります。こんな書き方があるだなとか、ほんと日々、勉強になります。自分の糧にも繋がります。いま自分がもっともコードを書くときに苦戦するのが変数やオブジェクトの名前付け・・・基本的に自分は英語があまりわからないので、すごく勉強していればよかったなと思うわけです。学生時代には一にも二にも勉強だとおもいます。遊びも大事ですけど・・、やはり勉強していると将来の幅が広がることは間違いないです。
 
サンプルサイトはこちら。https://zip358.com/tool/sample-0722/

<?php
$hoge = $_POST['hoge'];
$obj=array();
$obj["hoge"]="urlエンコードされた文字::".urlencode($hoge)."通常文字::".$hoge;
header("Content-Type: application/json; charset=utf-8");
echo json_encode($obj);
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>zip358.com:sample-非同期2</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(function(){
   $("#textarea-hoge").keyup(function() {
      $.ajax({
         type: "POST",
         url: "sample-0722.php",
         dataType:'json',
         data: {
              "hoge" : $("#textarea-hoge").val()
         },
         success: function(data) {
            $("#hoge2").text(data.hoge);
         },
         error:function(data) {
         }
      });
   });
});
</script>
</head>
<body>
		<br><br>文字をURLエンコード処理して返します。何か入力してください。<br>※非同期通信なので性格に処理してくれるわけではありません。<br><br>
        <textarea id="textarea-hoge" rows="10" cols="100"></textarea>
		<br>
		<div id="hoge2"></div>
</body>
</html>

 

タグ

AM, body&gt, br&gt, code.jquery.com, data.hoge, DOCTYPE html&gt, function, head&gt, hoge2, jquery-1.11.2.min.js, jquery-migrate-1.2.1.min.js, meta charset, sample-0722.php, script src, script&gt, textarea id, textarea-hoge, textarea&gt, title&gt, utf-8, zip358.com,

#プログラムサンプル ブログパーツは検索して出てくるのでうっぷします。

2015.03.11

Logging


ブログパーツの簡素な仕組みをUPします。基本はこれだけです。基本はこれだけですけど応用すると少々面倒くさいのでそこら辺はご想像におまかせします。これを基にして正規に配布する状態にするには、サーバの負荷の事やセキュリティとかそういう事まで考えなくてはならないので少々面倒くさいです。特にIDを発行して配布する場合などは結構、コードを書かないといけないです。また、悪意のあるユーザーがサーバに負荷をかけれる要因にもなりますので、安易にブログパーツを提供するのはオススメできません。ちなみに自分のブログパーツ用のJSを貼り付けても動作はしません(ファイルがないので)。ただ、下記のサンプルコードを自分自身のサーバ上に設置し、設置したURL(任意のURL)をJSで呼び出すと動作し、それを配布することも可能です。
PHPファイル

<?php
header("Content-type: application/javascript");
$str = htmlspecialchars($_GET["hoge"]);
if($str!=""){
	echo "document.write($str);";
}else{
	echo "document.write('hoge!?');";
}
?>

JS貼付け用。

<script src="https://zip358.com/tool/sample-tool/sample-blogtool.php?hoge='こんにちは'" language="JavaScript" charset="utf-8"></script>

タグ

AM, charset, Content-type, document.write, echo, header, hoge, htmlspecialchars, javascript, JS貼付け用, script src, script&gt, STR, utf-8, これだけ, ご想像, サーバ, セキュリティ, そこら辺, プログラムサンプル ブログパーツ, 負荷,

( #PHPサンプル )非同期通信のPHPサンプルコードを作ってみましたのでどうぞ。

2015.03.01

Logging


非同期通信で入力した文字をURLエンコード して返す、コードを書いてみましたのでどうぞ。お使いください。ただし、この処理には欠陥があって処理に負荷がかかると上手く結果を返してくれない恐れがあります。非同期処理なので処理するプログラムにばんばんと値を投げますが、返答を待たずに次の処理を投げるので、どの処理が最初に返ってくるのかは、わからないのです。一見、うまく動いてそうですけどただ、処理に負荷がかかっていないのでうまく処理された状態になっているだけです。なので、非同期処理を使う場合は、投げる値にID(順番)を付与して処理しないといけないです。
トイウコトデ、サンプルコードを置いときますのでお使いください。(デモサイトこちら
https://zip358.com/tool/sample-0301.zip(DL)
ソースは下記参照
HTML側(JQuery側)のソース=処理を投げる側=処理された結果を出力する側。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>zip358.com:sample-非同期</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(function(){
   $("#textarea-hoge").keyup(function() {
      $.ajax({
         type: "POST",
         url: "sample-0301.php",
         dataType:'html',
         data: {
              "hoge" : $("#textarea-hoge").val(),
         },
         success: function(data) {
            $("#hoge2").text(data);
         },
         error:function(data) {
         }
      });
   });
});
</script>
</head>
<body>
		<br><br>文字をURLエンコード処理して返します。何か入力してください。<br>※非同期通信なので性格に処理してくれるわけではありません。<br><br>
        <textarea id="textarea-hoge" rows="10" cols="100"></textarea>
		<br>
		<div id="hoge2"></div>
</body>
</html>

PHP側のソース=処理する側。

<?php
$hoge = $_POST['hoge'];
echo "urlエンコードされた文字::".urlencode($hoge)."通常文字::".$hoge;
?>

タグ

AM, body&gt, br&gt, code.jquery.com, DOCTYPE html&gt, function, head&gt, hoge2, html lang, jquery-1.11.2.min.js, jquery-migrate-1.2.1.min.js, meta charset, sample-0301.php, script src, script&gt, textarea id, textarea-hoge, textarea&gt, title&gt, zip358.com, トイウコトデ,