0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

JavaScriptを初めて学ぶ

Posted at

まずhtmlの

の終わりに
...

<script src="~~.js"></script>
</body>

を書くことでJavascriptをhtmlに挿入する。

jsファイルの最初に、`use strict;`と書き、厳密なエラーチェックを可能にしておく。

console.log(`Hello World`);
console.log(1+5*2-4);

と、いう風に、Webサイトのconsoleてところ(検証したら出てくるやつ)で文字を載せたり、演算したり。
というかまずそもそも
console.logってなにか。調べてみるとどうやら、cosole.logを実行すると、()内をブラウザのコンソールに表示することができる、らしい。
Consoleは日本語で「慰める」、らしい。コンソールってなんだよ。

調べてみると、コンソールとは。。。
・Webブラウザなどの開発者ツールに含まれている、プログラムのデバッグやテストを支援するための機能
・プログラムが実行される際に、console.log などの命令を使って、特定の値やメッセージをコンソールに出力することができます。←ここで出力結果を確認し、正しくエラーが起きてないか確認できる
・JavaScriptのコードにエラーがないか表示もしてくれる。またどこでどんな問題が発生しているか伝えてくれるので、バグを特定し修正がしやすい
console.logを使うことで、プログラムの実行中に変数の値や処理の進行状況を表示可能
・何より!JavaScriptのコードを直接入力して実行することが可能
・Webブラウザ以外でもよく使われる。コンソールはプログラム開発において非常に役立つ機能の一つで、プログラムのデバッグやテストを支援するために活用されることが多い。

といったふうに、コードに対して、お前ちゃんとやってんの?っていう優しい上司みたいな機能なのかなと。なんかこの言語がどうやって動的Webサイト作りに役立ってくのかまだよくわからんけども。

とりあえず基礎から!
・変数(let)を宣言できる
letは変数を宣言するキーワード。再代入がいくらでも可能。再宣言ができない。

let a;   //変数aを宣言!
console.log(a);  //この時点ではまだ何もaに入っていない
a =5;    //変数5が!
console.log(a);
a =10; //変数10が!
console.log(a); 
//  let a; と入力しても、再宣言はNG.

さらに、最初から初期値を設定も

let y=10;
console.log(y);
y =15;   //もちろんその後も変更できる
console.log(y);
y++; //インクリメント(1足す)。この場合、Consoleでは16が表示される

let str ="Hello World"; //変数は文字列も入るよ
console.log(str);

let i, j, k;  //さらに複数いきなり宣言も可能。

・定数(const)を宣言できる
constは定数を宣言するキーワード。固定されて変化しない値。再代入できない定数とも言える

const b=1; //初期化の時に代入しないとエラーが起きる
console.log(b);

const food="オムライス";
console.log(country);

ていうかそもそも。。
変数とは?
値に名前をつけて一時的に入れるもの
値の変更が可能
変数a =(空)→(123)→(トマト)

定数とは?
変化しない値に、名前をつけて一時的に保持できる入れ物
値は変更不可
定数b=(100)

条件分岐(もし〜〜なら、〜〜する)
if(条件式){
条件式がtrueの時に実行したい処理
else if(条件式2){
条件式2がtrueの時に実行したい処理
}
}else{
 条件式がfalseの時に実行したい処理
}
ちなみにelseは省略化

例えば

const x = 10;
if(x >= 25){
    console.log('25以上の数字')
}
else if(x >= 50){
    console.log('50以上の数字')
}
else if(x >= 100){
    console.log('100以上の数字')
}
else{
    console.log('25未満の数字')
}

consoleでは「25未満の数字」と表示

条件式では
==(等しい), !=(等しくない), ===(厳密に等しい), !==(厳密に等しくない), >(〜より大きい), >=(〜以上), <(〜より小さい), <=(以下)
などある

==と!==の違いって何。と思う。
例えば

let num = 10;
let str = '10';
if(num === str){
    console.log('等しい');
}else{
    console.log('等しくない');
}

consoleでは等しくない、と表示される。条件式が==の場合、等しい、になる。==は抽象的な比較なので、型が違っても等しい、になる。

構文switch

switch(式){
case 値1:
式===値1であるときに実行したい処理を書く
break; ここでswitch文を抜ける意味
case 値:
式===値2であるときに実行したい処理を書く
break;
default:
式の値が全ての値に合致しない時に、実行したい処理を書く
break;
}

例えば

const n = 10;
switch(n){
    case 1:
        console.log('one')
        break;  //原則各case毎にbreakを入れる
    case 10:
        console.log('ten')
        break;
    default:
        console.log('other number')
        break;
}

繰り返し処理
・構文for
for(初期化式;ループ継続条件式;)増滅式{
繰り返し実行したい処理を記述
}
例えば

for(let i=1; i<=5; i++){
    console.log(i);
}

そしたら、1,2,3,4,5が表示される
let i=1は3以下なので、console.log(i)が実行
そしたらi++で、i=2になる。でまたiは3以下なので・・・
と、条件が成り立たなくなるまでループする。

・構文while
while(条件式){
条件式がtrueの時に実行したい処理
}
例えば

let i =1;
while(i <= 5){
    console.log(i);
    i++;
}

そしたら、1,2,3,4,5と表示される
i=1と初期値設定。i <=5の条件が通ったので、1が出力される。そしたらi++で、iの値が2に。それを条件が成り立たなくなるまでループ。i++がないと無限ループになるので、気を付ける
for構文とほぼ同じじゃあん。。

・do while構文
do{
条件式がtrueの時に実行したい処理
} while(条件式);

例えば

let i = 1;
do{
    console.log(i);
    i++
} while(i <= 5);

そしたら、1,2,3,4,5が出力される

一番最初にconsole.log(i),1が出力される。そのあと、i++する。iが2に。そしてwhileのi<=5の条件が成り立つので、そのまま条件が成り立たなくなるまでループ

whileは条件の判断が前にあって、条件によってはループを一度もしないことも。
do whileの場合は条件の判断が後ろにあって、条件に関わらず最低一回はループする

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?