【初級編DAY11】JavaScriptの基本文法を学ぼうâ‘

デイトラWEB制作【初級編DAY11】JavaScriptの基本文法を学ぼう①

 

■JavaScriptとは■

htmlやcssに動きをつける言語

動きをつけることでかっこいいサイトが作ることができ、ユーザーにとっても使い易いサイトとなる！

 

 

極めるとスマホアプリも作れます！
少し難易度は上がりますがサイト制作には欠かせない一つ！頑張ろう！

 

 

 

htmlとJavaScriptをつなげる

 

使用する要素：script

 

.htmlファイル

<script src="jsファイルを指定"></script>

※htmlのbodyタグ直前に入れます

 

cssの時はリンクタグをheaderに入れていたね！

 

これでJSファイルとhtmlファイルの連携が完了です！

 

 

---

コンソール画面を使おう

 

■コンソール画面とは■

・JavaScriptを入出力できる場所

・エラーデバックやテスト環境として使用する

 

使用方法：検証ツール⇒コンソールタブ⇒コンソール画面
.jsファイルに直接打ち込むのではなく、簡単なものであればまずはコンソール画面で表示の確認を行っていきましょう♫

 

 

---

 

 

console.log　を使おう

 

■console.log()とは■

メッセージをウェブコンソールに出力することができるメソッドです。

 

■記述の基本■

＜console.log()のカッコ内＞

・ダブルコーテーション（""）かシングルコーテーション（''）で表示したい文字を囲む※どちらでもOK

・数字の計算の時はダブル(シングル)コーテーションでは囲わない

 

実際に文字列を表示していこう

.jsファイル

console.log("田中");

＞コンソール画面に　田中　の文字が表示されたら成功です！

 

 

注意①

ダブルコーテーションやシングルコーテーションを文字として表示したいときはどちらか異なるコーテーションで囲む

判定	入力	⇒	表示
◎	"'文字'"	⇒	'文字'
◎	'"文字"'	⇒	"文字"
×	""文字""または''文字''	⇒	エラー

 

文同じもので囲うとエラーとなるよ！

 

 

注意②

全角が使えるのはダブル(シングル)コーテーションの中のみ！

他の場所に全角を使うとエラーとなります。

 

プログラミング全般は半角で記述するよ！

 

最後にセミコロン（;）忘れずに。

 

 

文字列の連結

ダブル(シングル)コーテーションで囲った文字列を＋でつなぐと文字列が連結され表示される

 

.jsファイル

console.log("田中"+"太郎");

＞コンソール画面に　田中太郎の文字が表示されたら成功！

 

好きな数連結することが可能！

 

 

 

数字の計算

注意

ダブル(シングル)コーテーションでは囲まない

数字や計算結果として表示したいときは囲まないようにしよう！

 

囲ってしまうと文字列として表示されてしまうよ！

 

計算に使う記号
・足し算　・・・　+
・引き算　・・・　-
・割り算　・・・　/
・掛け算　・・・　*

※計算の優先順位を変えたいときはカッコ（）を使用します。
例
2+3*2=8
(2+3)*2=10

算数と一緒ですね！

 

 

割り算のあまりを求めるとき

計算に使用する記号
割り算のあまりを求める　・・・　%

例　結果1と表示される

4/3=あまり１

4%3＝１

使う場面も出てくるので覚えておこう！

 

 

---

 

変数と定数

 

■変数とは■

データにラベルをつける行為
値を入れておく箱のようなもの

 

■定数とは■

最初に入れた値を後から変更できない変数もどき

 

例
96という数字があるとする
96の数字だけでは何の数字であるかわからない

そこで任意のコードを使い、ある箱にscoreという名前を付け、その箱に数字の96を入れているイメージ

※今回はletを使用
let score=96
ある箱はscoreのラベルがつき（宣言、定義）、96が入ったイメージ

 

scoreの中に96を入れるようなことを　代入する　ともいうよ！

 

⇓変数と定数についていまいちわからない方はコチラがおすすめです。

とても分かり易く記事の参考にさせて頂きました。

wa3.i-3-i.info

 

実際に使用してみよう

let score = 96;

console.log(score);

スコアは96です

スコアを表示してください

⇒コンソール画面に96が表示されていればOK！

 

---

 

変数の種類

変数を定義するのに使用される変数は3つあります。

 

■変数の種類■

let、const、varの３つが使用可能。
３つの違いは再宣言や代入の可否が関係している。簡単にまとめると以下のようになる。

let・・・再宣言不可、再代入可（変数）
const・・・再宣言、再代入共に不可（定数のようなもの）
var・・・再宣言、再代入共に可（変数）

？どれを扱えばいい？
基本はconstでの定義がおすすめ
意図しない書き換えを防ぐ＝定数
書き換えが必要＝変数
基本はconstを使用し、どうしてもletでなくてはいけないときに使用する。

？varは？
varは古い記法となるため使用は非推奨となる。
　　　

 

JavaScript以外にも使う概念なので覚えておこう！

 

⇓上記はざっくりとした情報のみとなっています。
詳細はコチラの記事がとても分かり易く記事の参考にさせて頂きました。

qiita.com

 

---

 

変数の使用【let】

let score = 96;

console.log(score);

＞scoreの宣言後　96が代入され、コンソール画面には96を表示される。

 

定数の使用【const】

const score = 96;

console.log(score);

＞let同様96がコンソール画面に表示されるが、値の書き換えは不可

 

 

定義したスコアを書き換える【let】

let score = 96;

score=72

console.log(score);

＞scoreに96を代入した後、72に書き換わりる。

　コンソール画面には72が表示される。

 

定義した値を計算して表示【let・const】

let score = 96;

console.log(score*2);

＞scoreに96を代入した後、scoreに入っている数字を×２として表示させる

　コンソール画面には192が表示される。

 

 

一度定義した変数を別の変数でも使用する【let・const】

let score = 96;

let scoreDouble = score * 2;

console.log(scoreDouble);

＞scoreに96を代入

　宣言したscoreDoubleにscoreの96を×2した192を代入

　コンソール画面にはscoreDoubleにある192が表示される

 

 

文字の代入が可能【let・const】

let message = "メッセージ";

console.log(message);

＞message宣言後、"メッセージ"を代入

　コンソール画面には　メッセージ　と表示される

 

 

変数を文字列へ埋め込む【let・const】

方法①

プラス（＋）でつなぐ方法。ダブルコーテーション内に空白を入れる（"　"）ことで苗字と名前の間に空白を入れられる。

let firstName = "山田";

let lastName = "太郎";

console.log(firstName + " " + lastName + "さん");

＞山田　太郎

 

 

方法②

バックコーテーション（``）の使用。

※バックコーテーションもダブル・シングル同様に文字列を表示させるための記号。

 

■記述方法の違い■

${変数名}　と記入することで定義した変数を埋め込むことが可能

 

例

console.log(`${firstName} ${lastName}さん`)

＞山田 太郎さん

 

バックコーテーション内は文字列なのでスペースを入れるだけで空白を開けることが可能です。

 

こちらの方法②の方が完結できれいにかけてイイね！

 

 

---

変数名のルール

１．記号の使用は不可

　◎　アルファベット、数字

　✖　記号

 

２．始まりはアルファベットから

　◎　message123

　✖　123message

 

３．先頭文字を大文字にしない。※エラーではないが推奨の書き方ではない

　◎　message

　✖　Massage

 

---

 

ユーザースニペットを使おう！

■スニペットとは■

単語登録のように、キーを登録し簡単に使い回しできる機能のことです。各拡張子ごとに登録が可能。

 

詳しいスニペットの登録はコチラ！

記事がとても分かり易く記事の参考にさせて頂きました。

haniwaman.com

 

---

 

JavaScriptの勉強は始まったばかり！

少し難しく感じますが、一つずつ覚えていきましょう♫