常連

注目の的

社会貢献

データベースから値を取得して、下記のようなリストで表示するようなページを作成しています。
その中の1つをクリックしたら、その値をフォームに反映させ、
データベースの更新を行うような仕組みを実装したいと思っています。
javascriptのクリックイベントでやるイメージなのですが、
同じクラスでidをそれぞれ付けられないため、どのように値を取ってくればいいのかがわかりません。
何かいい方法があれば教えていただけないでしょうか。
よろしくお願いいたします。

```html
<div class="a">
    <a href="#">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>
<div class="a">
    <a href="#">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>
<div class="a">
    <a href="#">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>
<div class="a">
    <a href="#">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>
```

5/8 14:50追記

色々と調べてみましたが、下記のようなやり方でできないかと考えています。
しかしうまくいかないみたいで、おかしな所があれば教えていただけないでしょうか。
よろしくお願いいたします。

```html
<div class="a" onclick = "getID(this);" id="固有の値">
    <a href="#">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>
<div class="a" onclick = "getID(this);" id="固有の値">
    <a href="#">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>
<div class="a" onclick = "getID(this);" id="固有の値">
    <a href="#">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>
```

```javascript
function getID(element) {
var ele_id = element.id;
var class_A = document.getElementById('#'+ele_id).find('.A').innerHTML;
}
```

phpによるデータベースの更新（javascript)

現在チャットを作成中なのですが、cometを使い

1.ajaxでphpにリクエスト
2.phpでデータベースをチェック、変化があるまでループで待機
 変化があれば値を返す

といった感じで書き込みを表示させているのですが
2.でのwhileでループ中に 504 Gateway Timeout とでてしまいます。
どうすればいいでしょうか

```php
if (isset($_GET["state"])&&$_GET["state"]==="monitoring") {
      $sql=sprintf('SELECT p.* FROM chat_posts p
          ORDER BY p.res_created DESC LIMIT 1 ');
      $posts=mysqli_query($db,$sql) or die(mysqli_error($db));
      $post=mysqli_fetch_assoc($posts);
      $lastres=$post["res_created"];
      $newres=$lastres;
      while ($newres===$lastres) {//書き込みがあるまでループ
        $sql=sprintf('SELECT p.* FROM chat_posts p
            ORDER BY p.res_created DESC LIMIT 1 ');
        $posts=mysqli_query($db,$sql) or die(mysqli_error($db));
        $post=mysqli_fetch_assoc($posts);
        $newres=$post["res_created"];
        session_write_close();
        sleep(1);
        if($newres!==$lastres){//書き込みがあった場合全書き込みを渡す
          $sql=sprintf('SELECT p.* FROM chat_posts p
              ORDER BY p.res_created DESC ');
          $posts=mysqli_query($db,$sql) or die(mysqli_error($db));
          while ($post=mysqli_fetch_assoc($posts)) {
                      $res[]=array(
                              'postnum'=>3,
                              'num'=>$post['res_id'],
                              'name'=>$post['res_name'],
                              'res'=>$post['res'],
                              'time'=>$post['res_created']
                                );
          }
            header(' Content-type:application/json; charset=utf-8 ' );
            header(' X-Content-Type-Option:nosniff ' );
            echo json_encode(
                $res,JSON_HEX_TAG | JSON_UNESCAPED_UNICODE | JSON_HEX_APOS |
                JSON_HEX_QUOT | JSON_HEX_AMP
             );# code...# code...# code...
          break;
        }
      }
    }
```

cometを使ったリアルタイムチャットについて

###前提・実現したいこと
mysqlから取得したデータををPHPからjavascriptにjson形式の文字列型で渡していますが
このjsonのデータをユーザーに見えないようにしたいです。
※

###発生している問題・エラーメッセージ
以下のソースの「 $jsonStr = json_encode( $db_data );」で、データベースの中身が
ずらりと表示されてしいます。

###該当のソースコード
PHP,html,javascript

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>PHP DBAccess TEST</title>
</head>
<body>

<?php
//DBへの接続
$mysqli = new mysqli("XXXXXXXXx.ne.jp", "db", "password", "dbmain");

if(mysqli_connect_errno()){
	die('接続失敗です。'.mysqli_connect_error());
}

print('<p>接続に成功しました。</p>');

//処理
        $sql = "SELECT id, FROM datamain";
        
        unset($db_data); 
        if ($result = $mysqli->query($sql)) {         
          while ($row = $result->fetch_assoc()) {
              $db_data[] = $row;
          }
          $result->free();
        }
        
    //JSON形式で出力する
    $jsonStr = json_encode( $db_data );

// mysqli_close : DB切断
$close_flag = mysqli_close($mysqli);

if ($close_flag){
    print('<p>切断に成功しました。</p>');
} else {
	die('切断失敗です。');
}
?>

<script>
var maindata = JSON.parse('<?php echo $jsonStr; ?>');
document.write(maindata[2]['id'])

</script>

</body>
</html>

###試したこと
ajaxを使えば解決するのかとか考えましたが、試していません。
ajaxの使用経験はありません。

###補足情報(言語/FW/ツール等のバージョンなど)

webアプリでjsonのデータをユーザーに見えないようにしたい

###JavaScriptの勉強方法を参考にさせてください。
質問を見て頂いてありがとうございます。

JavaScriptを独学で勉強しております。
変数、条件分岐、繰り返し処理、配列と連想配列、関数の基礎的な動きは一通り実際にコードを書いて動かしてみました。
日々の練習として上記のコードを反復して書いていきたいと思っています。

皆様には次のステップとしてオススメの勉強方法、書籍がございましたらお教えていただけたらと思います。
目標地点は、Webデザインにおいてフレームワークの仕組みを理解してカスタマイズ出来るようになること、簡単な機能程度ならば自身で組めるようになることです。

一朝一夕では身につかないと思っております。
皆様の経験を教えていただけたら幸いです。

JavaScript　勉強方法

いつもお世話になっております。
googlemapのような動きをする地図jqueryを探しています。

必要な機能としては
1.任意の画像を設定できる
2.座標設定でマーカーを設置できる
3.マーカーに情報や画像を設定できる
4.スクロールまたはボタンから地図の拡大縮小ができる
5.ドラッグで地図を動かすことができる

上記５点を満たすjqueryを探しています。

[CRAFTMAP](http://kachibito.net/web-design/craftmap.html)
このjsが一番近いと思ったのですがズームができません。

他にも探しましたが、１～５の必要な条件のどれかがかけてしまいます。

もし、条件を満たすようなものをご存知の方、もしくは
条件を満たすような方法をご存知のかたいましたら、

よろしくお願い致します。

追記：
条件1の画像というのは自分で作った画像です。
自分で作った地図画像をズームしたり、マーカーを設置したいということです。

画像を設置し、googlemapのような動きをする地図jquery

JavaScriptで複数の変数を宣言するとき、
下記①②のような2パターンの書き方があるようですが、
これは何か違いがあるのでしょうか？

※Node.js(express)をインストールしたら①の書き方でした。
※②はいろんな人のブログで見かけます。

①それぞれにvarをつける
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');

②varは1つ、以降の変数はカンマで区切って最後にセミコロン
var express = require('express')
  , path = require('path')
  , favicon = require('serve-favicon');

よろしくお願いします。