こんにちは、タクゾウです。
今回も、JavaScriptの基礎をまとめて行きたいと思います。
JavaScriptの関数とは
複数の命令を一塊の命令にまとめたもの。
関数を使う事により。毎回同じ処理を書く必要がなくなる。
イメージでいうとドラクエ8の錬金釜のイメージ笑。
(素材を入れると新しいアイテムができる)
関数の書き方
JavaScript
function 関数名(引数1, 引数2, 引数3){
//関数の処理を記述
return 値;
} MEMO
関数名が同じでも、引数の個数が違う場合別の関数として認識されるので注意！DOMとは
hmtlの要素に対して、その要素に対してアクセスし書き換えたり削除したりできる仕組みの事
DOMとjavascriptの関係
javascriptはこのDOMを元にHMTL、CSSを操作しているため、DOMが生成される前に操作しようとしてもエラーになってします。
HTML
<body>
<script>
//h1を操作する処理がエラーになる
</script>
<h1>操作する対象のDOM</h1>
<script>
//h1を操作する処理が正常に動く。
</script>
</body>確実にDOMが読み込まれたあとに処理をさせるように、DOMContentLoadedやLoadeを指定する事が多いです。
これにより、DOMが生成された後に、JSを実行する事が可能になります。
JavaScript
window.addEventListener("DOMContentLoaded", function(){
//DOMを作り終わってから実行
},false
); JavaScript
window.addEventListener("loade", function(){
//画像やCSSが全て読み込まれたら実行
},false
);基本的にDOMが生成されたタイミングで実行される事が多いので、DOMContentLoadedの書き方で書きましょう！！
MEMO
ここに文章オブジェクトとは
javascriptはオブジェクトを操作する言語であり、
オブジェクトは、プロパティとメソッドをもっています。
基本的なオブジェクトを紹介します。
- Document：hmtlの要素を書き換えたりするメソッドを持っている。
- window：がブラウザの画面の情報を持っている。
- location：パスのプロパティ
- Stirng：文字列のプロパティ
DOMを取得する例。
JavaScript
//hmtl5以前
document.getElementById("id名");
document.getElementsByTagName(タグ名);
document.getElementsByClassName(クラス名);
//html5以降
document.querySelector(セレクター);
オブジェクト操作方法
オブジェクト名.」メソッド名(引数血)
オブジェクト名.プロパティ名 = 値；
まとめ
- スクリプト、ソース、コードは全部同じ意味
- オブジェクトの持つ変数をプロパティ、関数をメソッドと呼ぶ
- jsはオブジェクトを操作している。
- DOMはDocumentオブジェクトの事
- JSはDOMがつくられてから実行されるようにDOMContentLoadedを使う。
コメントを残す