DOCTYPE html&gt | zip358.com

javascriptの並列処理について

2018.02.13

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();

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2018年02月13 02:34日

タグ

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>

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2017年10月01 06:09日

タグ

'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>

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2017年06月10 06:09日

タグ

１, 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は型の設定通り動作してくれるという
事なので注意が必要です。
ちなみに上記のコードが動作するかは未検証です(´Д｀)

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2016年03月19 06:00日

タグ

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>

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2015年07月22 06:37日

タグ

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,

Functionの引数に初期値を設定するとφ(..)メモメモ。

2015.06.18

Logging

<?php
function memo($gets="メモ",$chk=false){
    if(!$chk)$gets.="った??！";
    return $gets;
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>zip358.com:Fチェック</title>
</head>
<body>
<p><?=memo("テスト",true);?></p>
<p><?=memo("テスト");?></p>
<p><?=memo();?></p>
</body>
</html>

DEMO https://zip358.com/tool/get-p.php
これ、覚えとくと便利な記述です、最初にFunctionの引数に初期値を与えて置けば、引数があるなしで処理を変更することも可能になります。ちょっとした事ですが知っていると知らないとでは差がでます。ちなみにC++でも同じことが出来ます。Javaで同じことが出来るかは未確認です。言語によってできる出来ないとかがあるので、アプリ開発時には注意が必要になります。Javaの場合、同じメソッド名で引数の違うものが作れてしまうのでおそらく、こういう事は出来ないと思います。この頃、知ったことですがVB6やAccessには黄金期があったということを知りました。そういえばVB6を使っていた会社があったなと、いまではVB2005とかにはバージョンアップしていると思います。こういうことを言えば敵をつくりそうですが、昔のほうがコードが見やすかった気がします。いまは、オブジェクト指向を更に良くしようと機能ベタベタ追加しているので、コードがややこしくなってきているように感じます。馬鹿なので人のコードを見るのがかなり、不得意です。

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2015年06月18 05:54日

タグ

AM, body&gt, C++, chk, DOCTYPE html&gt, function memo, gets, head&gt, html lang, java, meta charset, p&gt, title&gt, utf-8, VB2005, VB6, zip358.com, オブジェクト指向, コード, 初期値, 引数,

（ #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;
?>

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2015年03月01 08:09日

タグ

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, トイウコトデ,

WordPressの擬似URLの仕組みってこれだけだと思います(　´д)ﾋｿ(´д｀)ﾋｿ(д｀ )

2015.01.23

Logging

WordPressの擬似URLの仕組みってこれだけだと思います。自分の記事は静的なアドレス（擬似）になっていると思います。これはWordPressの設定のパーマリンク設定を/%postname%.htmlこういうふうに設定しているからhtmlファイルで作ったようなURLで表示されているわけです。ちなみに公開途中でURLの表示設定をいじくると今まで検索で表示されていたものが全部飛んじゃうでSEO的にオススメできません。じゃ動的URLってなにかと言えば、zip358.com?p=1とか言うアドレスでページが表示されるURLを動的URLって言います。話し戻しまして、これってどういう仕組みで動いているのかと言う疑問符が付くと思います。答えはこういう感じ、あるURLを入力するとDBにそのURLは存在するかと言う問い合わせを検索かけます、検索を結果が有れば表示するという事をしているだけです。ちなみに.htaccessとphpの合わせ技になります。.htaccessに、あるURLが飛んできたらこのPHPを見てねという処理をしてあげれば良いわけです。.htaccessはURLを偽造できます。(ΦωΦ)ﾌﾌﾌ…。
今回はDB処理検索を除いたサンプルサイトを作りましたのでご覧ください。
https://zip358.com/tool/sample-x/あいうえお.htmlこのサイトURLの日本語を変更しても拡張子を変更してもサイトが表示されます(※https://zip358.com/tool/sample-x/の移行URL変更だったらhttps://zip358.com/tool/sample-x/あいうえお/wawa.htmlでも同じサイトが表示されます。：存在しないURL以外、同じサイトを表示(ΦωΦ)ﾌﾌﾌ…ヤバイか？)。
https://zip358.com/tool/sample-x/の配下に.htaccessファイルとindex.phpを置いています。
.htaccess

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /tool/sample-x/index.php [L]

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>zip358.com:sample-x</title>
<link rel="stylesheet" type="text/css" href="css/html5reset.css"  />
<style>
iframe { width: 95%; height: 95%; position: absolute; margin: 0; }
body{font-size:16pt;overflow:hidden;}
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<?php
 echo '<a href="http://'.$_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"].'">http://'.$_SERVER["HTTP_HOST"] .htmlspecialchars(urldecode ($_SERVER["REQUEST_URI"])).'</a>というアドレスを打ちましたね<br><br>';
?>
<iframe src="/tool/sample-x/html5up-twenty/index.html"  marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="auto">
</body>
</html>

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2015年01月23 06:00日

タグ

AM, body&gt, br&gt, DOCTYPE html&gt, head&gt, htaccess, html5reset.css, html5up-twenty, if lt IE 9, iframe src, index.html, index.php, meta charset, RewriteCond, sample-x, sample-x&lt, script&gt, style&gt, title&gt, wawa.html, zip358.com, 体,

@Blog{zip358.com}

日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。

javascriptの並列処理について

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

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

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

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

Functionの引数に初期値を設定するとφ(..)メモメモ。

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

WordPressの擬似URLの仕組みってこれだけだと思います(　´д)ﾋｿ(´д｀)ﾋｿ(д｀ )