常連

注目の的

社会貢献

質問力

## テーマ、知りたいこと
プログラミングを独学で習得した方にお聞きします。
プログラミング学習でよく言われることが、「構文やコーディングを覚える必要はなく、モノを作るなどの実践の中で身に着けろ」ということだと思います。
その「モノを作る」段階でどのようなことをしたのか具体的に教えてください。また、それらを行う上でオススメの教材やyoutubeの動画などのコンテンツがあれば教えてください。
次に、ソフトがうまく起動しなかったり、コマンドプロンプトの扱いがわからなかったりとコーディングのエラー以前の問題に躓いて思ったように進まなかったりしたときにどのように対処したのかを教えてください。


## 背景、状況
私はプログラミングの初心者で、現在は大学に通っています。
機械学習に興味があり、独習pythonという書籍で文法や構文を学習しています。
周りにプログラミングの相談をできる環境はないです。
「いちばんやさしいpython機械学習の教本」という書籍を買って、本の内容の通りに進めようとしています。


プログラミング独学についてのアドバイスをいただきたいです。

### 前提・実現したいこと
Ajaxで製品の画像をアップロードする機能を実装したい

製品ごとの画像をuploadできる機能のクライアント側を実装しております。
サーバー仕様書によると、
http://hoge.com/api/products?id=hoge
にPOSTすることでidがhogeの製品の画像をuploadすることができるようなのですが、
お恥ずかしながら初心者のため、uploadすることができずにおります。

サーバー側は
・クロスオリジンの設定は対応済み
・マルチパートのデータには対応していません

### 発生している問題・エラーメッセージ

```
500 Internal Server Error
```

### 該当のソースコード

```Javascript
// uploadButtonをクリックで、フォームで選択された画像ファイルをuploadImgに格納し、
// uploadImgを引数としてpostImgを起動
document.getElementById("uploadButton").addEventListener(
                    'click',
                    function() {
                        var elementFile = document.getElementById("upload");
                        var uploadImg = elementFile.files[0];
                        postImg(uploadImg);
                    }, false);

// 上記のクリックで起動されるpostImgについての記述となります
// content-typeを指定して、apiのURLにuploadImgをPOSTします。
 var postImg = function(uploadImg) {
                var contentType = uploadImg.type
                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'http://hoge.com/api/products?id=hoge', true);
                xhr.setRequestHeader('Content-Type', contentType);
                xhr.onload = function(e) {
                    if (this.readyState == 4) {
                        maeesage.innerHTML = "アップロードが完了しました。";
                    }
                };
                xhr.send(uploadImg);
            };
```

### 試したこと

個人的には
xhr.openの箇所でURLにパラメーターも指定してしまっているところが間違っているのではないかと考えております。
書籍では、GETと異なり、POSTの場合は xhr.send内でパラメーターを指定すると書いてありました。
しかし、そうすると、現在sendで指定しているuploadImgを今度はどこに書けば良いのかわからず・・・迷っております。

上級者のみなさまに、手がかりをご教示頂けたら、大変ありがたいです。
こちらの理解不足で、足りない情報などございましたらお気軽にお申し付けくださいませ。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Ajaxで製品の画像をアップロードする機能を実装したい

mysqlで取得（fetch）した値をPHPで配列に変え
```ここに言語を入力
 $arr=array('name'=>$res['name'],'pass'=>$res['pass']);
 $jsonTest = json_encode($arr);
 echo $jsonTest;
```

その値をJavaScriptで受け取っています・・
しかし、正しく表示されません。。
データベースへの接続はもんだいありません

```ここに言語を入力
   var xhr = new XMLHttpRequest();      
   xhr.open("POST","...",false);
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   xhr.addEventListener("load", function(e){
          var ar=(JSON.parse(xhr.responseText ||"null"));
          console.log(ar['name']);
        });  

        var datatex ="....";
        xhr.send(datatex);  
```

エラーはでていないのですが配列を受け取るにはどうしたらいいのでしょうか？

追記：

console.logの結果はnullです
JSON.parse(xhr.responseText ||"null")をxhr.responseTextとしても
Arrayとは表示されず、空白欄の改行が出力されるだけとなります。

XMLHttpRequestで配列を受け取るには

### 質問事項

JavaScript初学者です。
addEventListenerにて定義した処理（イベントリスナー）の実行タイミングを理解しようと以下のコードを実行したのですが、実行結果が想定と異なりました。原因はなんでしょうか。。。

### 該当のソースコード

```JavaScript
document.getElementById("btn").addEventListener("click",function () {
        var xhr = new XMLHttpRequest();

        xhr.addEventListener("readystatechange",function () {
          console.log("readyState：" + xhr.readyState);
        },false)

        console.log("1.Open前");
        xhr.open("GET", "scripts/book.xml");
        console.log("2.Open後,Send前");
        xhr.send(null);
        console.log("3.Send後");

      },
      false
    );
```
・ボタン押下時にXMLHttpRequestを実行
・XHLHttpRequestのreadystateが変化したタイミングでイベント実行

### 想定した結果
イベント発火によるイベントリスナーはsetTimeoutのように、WebAPIによってタスクキューに入ってからコールスタックに入ると理解しているので、イベントリスナーは最後に行われると思ってました。

```console
1.Open前
2.Open後,Send前
3.Send後
readyState：1　　　　　　＜＝Openの時のイベント処理
readyState：2
readyState：3
readyState：4
```


### 実際の結果

実際には、同期処理である「console.log("2.Open後,Send前");」の処理よりも先に、Openによるイベントリスナーが動作しています。
```console
1.Open前
redyState：1　　　　　　＜＝Openの時のイベント処理
2.Open後,Send前
3.Send後
redyState：2
redyState：3
redyState：4
```

JavaScript イベントリスナーの実行タイミングを理解したい

https://oshiete.goo.ne.jp/qa/2413519.html
上記ページの「※1 FirefoxやOperaではOK」という方法：

```
#Header {
  height:100px;
  background-color:#cfc;
}
#Content {
  position:absolute;
  top:100px;
  left:0;
  right:0;
  bottom:0;
  overflow:auto;
  background-color:#ccc;
}
```

でできることは確認したのですが、何しろ10年前の記事ですので、今でもこれがいいやり方なのでしょうか？それとももっといい方法があるのでしょうか？

---
ご回答とこちらの比較表を元に、最新のプロパティを使って書いたものがこうなりました：
http://liginc.co.jp/web/html-css/css/21024#a14

```block.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>block style</title>
	<link rel="stylesheet" href="block.css" />
</head>
<body>
	<div id="container">
		<header>header</header>
		<article>
			<div id="article_inner">
			article
			</div>
		</article>
	</div>
</body>
</html>
```


```block.css
html,body {
	height: 100%;
	padding: 0;
	margin: 0;
}

#container {
	display: flex;
	flex-direction: column;
	height: 100%;
	max-height: 100%;
	width: 100%;
}

header {
	width: 100%;
	height: 32px;
	background-color: #fcc;
}

article {
	width: 100%;
	flex: 1;
	overflow: auto;
	position: relative;
	background-color: #ccf;
}

#article_inner {
	position: absolute;
	width: 100%;
	height: 100%;
}
```

スタイルシートで画面を上下に分割，高さを上部はpxで指定，下部は残り全部にする方法

レスポンシブでサイズによって、画像を切り替える方法がいくつかありますが、現場では、どの方法を採用していることが多いですか？

jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験
http://black-flag.net/jquery/20120808-4047.html

breakpoints.jsを使用したレスポンシブでの画像切り替え
http://www.webopixel.net/javascript/804.html



また画像は、ブレークポイント分作っていますか？
下記の三つくらい作るのでしょうか？
320、640、1920（PCもIPHONE6プラスと同じにしてしまう。これ以上はお思いのでつくらない）