##概要
codepenはiframeで別のブラウザでレンダリングした画面を埋め込んでいるため、手元で動かしているブラウザと異なる挙動を示す場合がある。
以下のようにjavascript内でDOMを操作する場合、htmlファイル内でのjavascriptの呼び出し（ <script src="script.js"></script>）は対象のDOM（<button>）の後に書く、あるいはdeferを使用するが、codepenだと<button>の前に書いても問題なく実行出来た。
##やりたいこと
ボタンを押すと文字列が出力される、という挙動をhtmlとjavascriptで確認する。
【参照】
https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript#How_do_you_add_JavaScript_to_your_page
例）codepenの場合
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Apply JavaScript example</title>
<script src="script.js"></script>
</head>
<body>
<button onclick="">Click me</button>
</body>
</html>
script.js
function createParagraph() {
let para = document.createElement('p');
para.textContent = 'You clicked the button!';
document.body.appendChild(para);
}
const buttons = document.querySelectorAll('button');
for(let i = 0; i < buttons.length ; i++) {
buttons[i].addEventListener('click', createParagraph);
}
例）手元のブラウザの場合（今回はChrome）
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Apply JavaScript example</title>
</head>
<body>
<button>Click me</button>
</body>
<script src="script.js"></script>
</html>
または
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Apply JavaScript example</title>
<script src="script.js" defer></script>
</head>
<body>
<button>Click me</button>
</body>
</html>