ブログBlog
JavaScript初歩まとめ
皆さんこんばんは。榊原です。
本日はJavaScriptで学んだ初歩的なことについて自分の勉強もかねて説明したいと思います。
◇オブジェクト◇
『オブジェクト』はブラウザのウィンドウやフォームなどの基礎構成の部分に当たります。
JavaScriptを使って制御できる部分のことを指します。
◇プロパティ◇
『プロパティ』とは『オブジェクト』の状態や属性のことです。
◇メソッド◇
『オブジェクト』にどんな処理をさせるか記述したものです。
これらを踏まえて以下のコードをみてみます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テスト</title>
<script type="text/javascript">
window.onload = function () {
const btn = document.getElementById("testButton");
btn.onclick = function () {
alert("クリックされました");
};
};
</script>
</head>
<body>
<input type="button" id="testButton" value="押すとどうなるでしょうか？">
</body>
</html>
『window』『document』『btn』が『オブジェクト』にあたり、それを『.(ピリオド)』でつなげた『onload』『getElementById』『onclick』がプロパティにあたります。
それぞれ『読み込まれたとき』『id=”testButton”が取得されたとき』『クリックされたとき』ということです。
最後に『function ()』がメソッドにあたり、『作用』という意味です。
window.onload = function () {
const btn = document.getElementById("testButton");
btn.onclick = function () {
alert("クリックされました");
};
};
紐解いていくと、このコードの意味は
◇ウィンドウが読み込まれた時に作用する内容 ドキュメントからid="testButton"を取得 ◇ボタンがクリックされた時作用する内容 "クリックされました"とアラートで表示
となります。
一見するとよくわからない事がごちゃごちゃ書いてあるように見えますが、意味を分析すると分かりやすいですねo(*￣︶￣*)o
これからも勉強していきます。