ツイッター
ハッシュタグ
#xhack勉強会
お名前 学習歴 jsへの思い
今日学んで欲しいこと
DOM操作(id, class, tagそれぞれよる指定方法と違い)
JavaScriptの関数呼び出し/関数の宣言
イベントの登録(onclick、onmouseoverなど)
JavaScriptオブジェクト
リファレンス確認するようにする
JavaScript
JavaScriptとは
JavaScriptの記述パターン
関数やイベントを直接HTMLのタグの中に記述
<input id="foo" type="button" value="foo" onclick="alert('bar');alert('baz')">
ヘッダやボディにscriptタグで記述
外部ファイル記述して読みこむ
HTMLの操作ができる(DOM操作)
ID、クラスによる指定
イベント
documentが生成されるタイミング
やってみよう https://jsfiddle.net/
document.getElementById
document.getElementsByClassName
document.getElementsByTagName
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p class="company">X-HACK</p>
<p class="company">X-HACK</p>
<p class="company">X-HACK</p>
<p class="company">X-HACK</p>
<script>
document.getElementsByClassName("company")[0].innerHTML = "Just do it";
// let companies = document.getElementsByClassName("company");
// companies[0].innerHTML = "Just do it";
for (let i=0; i<companies.length; i++) {
companies[i].innerHTML = "Just do it";
}
</script>
</body>
</html>