こんにちはRyokutyaです。
※この記事は ある程度 HTML,CSSを勉強して多少理解できる人で、JavaScriptを今から勉強していこうと考えている人向けの記事です。
HTML,CSSの説明や検証画面の説明が基本的にないのでご了承ください。
目次
まずJavaScriptの説明をはじめる前にどこにcode(コード)を書けばいいのか説明していきましょう。
JavaScriptを記述する方法は2つあります。
JavaScriptはHTMLのドキュメント内の<head>~</head>,<body>~</body>の中ならどこにでも記述することができます。
<head>
<script>
console.log('Hello World') ;
</script>
</head>
<body>
<script>
console.log('Hello World') ;
</script>
</body>
<script>~</script>で囲んだ中にJavaScriptを記述すればOKです。
JavaScriptはcssと同じように別のファイルに記述しておいて読み込むこともできます。
<script>でsrc属性を指定し、JavaScriptファイルが保存されている場所を指定してすることで、 <script src=”./〇〇/××.js”></script>のようにしてファイルを読み込むことができます。
<head>
<scrip src=".〇〇/××.js"><script>
</head>
<body>
<scrip src=".〇〇/××.js"><script>
</body>
複雑なJavaScriptを組むととても長いcodeになり、HTMLに直接書き込むと非常に煩雑になり可読性が落ちるミスの原因となるため、別ファイルに記述したものを読み込むのが一般的です。
JavaScriptはHTMLに直接記述しているか、外部から読み込むかに関わらず記述した順番(先に書かれている<script></script>から)で実行されていきます。
<body>
<script>
console.log('Hello World') ; ←実行される順番①
</script>
<scrip src=".〇〇/××.js"><script> ←実行される順番②
<script>
console.log('Hello Ryokutya') ; ←実行される順番③
</script>
</body>
JavaScriptの基本的なルールとして、
〇〇は(△△を)××しなさい。
という書き方をします。
「〇〇は」にあたる部分をオブジェクト(命令先)
「××しなさい」に当たる部分をメソッド(命令内容)
「△△を」にあたる部分をパラメータ(命令内容の詳細)
といいます。
例としてconsole.log(‘Hello World’);について見ていきましょう。
〇〇は(△△を)××しなさい。 でいうところの、
「〇〇は」はconsole,「××しなさい」は.log,「(△△を)」は‘Hello World’,「。」は;にあたります。
つまり、 console.log(‘Hello World’); は
consoleはHello Worldを表示しなさい(.logが表示しなさいという命令)という意味になります。
console.log(‘Hello World’); を入力すると、ブラウザの検証画面のconsole画面にHello Worldが表示されます。
<body>
<script>
console.log('Hello World') ;
</script>
</body>
オブジェクトは命令先のことでconsoleもオブジェクトの1つです。
ブラウザ画面の中には様々なオブジェクトがあります。
メソッドは命令内容のことです。
メソッドはオブジェクトに対して「××しなさい」と具体的な実行内容を指示する部分です。
各オブジェクトには、使用できるメソッドがあらかじめ用意されています。
「〇〇オブジェクトに使えるメッソド」などでググれば使用できるメソッドが出てくるのでぜひ一度調べてみてください。
メソッドの後ろには.log(),.dir(),.error()などのように()が付きます。
メソッドの後ろにある()の部分に入るものをパラメータといいます。
今回の例で言えば’Hello World’の部分です。
メソッドはより細かく指示を出すものです。
console.log();だけだと、consoleは出力しなさい。という意味になるのですが、「何を」出力すればいいの?っとなってしまい何も表示してくれません。
そんなときはconsole.log(‘Hello World’);とすることで、
consoleは「Hello World」を表示しなさい。という風により細かい指示をだしてあげるこで命令を実行してくれます。
JavaScriptは「’」シングルクォーテーション(shift + 「7」キー)で前後を囲まれた文字を「文字列」として扱う決まりがあります。
シングルクォーテーションで囲まれていない場合は「文字列以外」であることをしめしており、中に入っているものをJavaScriptが適切な形にしてくれます。
では例を見てみましょう。
<script>
console.log('Hello World'); 例①
console.log(10+5); 例②
console.log('10+5'); 例③
<script>
例①の結果はHello Worldとなります。
例②の結果はどうなるでしょうか?
答えは15と表示されます。
JavaScriptが計算式が入っていると判断し10+5の計算結果である15を表示してくれます。
では例③はどうなるでしょうか?
答えは10+5と表示されます。
例③は(’10+5′)のように「’」で10+5の前後を囲っているためJavaScriptが「計算式」ではなく「文字列」と判断し()なに記述された文字をそのまま表示します。
<script>
console.log('Hello World'); 結果:Hello World
console.log(10+5); 結果:15
console.log('10+5'); 結果:10+5
<script>
セミコロン(;)は文の終わりを表します。
日本語の「。」や英語の「.」と同じです。文の終わりには必ず必要なので忘れないようにしましょう。
JavaScriptを学んでいくうえで「オブジェクト」や「メッソド」などの名前がよくでてくるのでどれが何を指してるのかわかるとcodeや説明がわかりやすいと思いますのでしっかり覚えておきたいですね。
今回はここまで、それではまた次回お会いしましょう。(^^)/
緑茶のカテゴリー
(29)
(1)
コメントを残す