プログラミング（Hello world）の勉強

プログラミングについて書きます

トップ > プログラミング > 【JavaScript】プログラムの勉強をはじめます(クライアントサイト、変数宣言とか)❗

【JavaScript】プログラムの勉強をはじめます(クライアントサイト、変数宣言とか)❗

プログラミング プログラミング言語 JavaScript 今さら聞けないよ

こんにちは、すのうビーです。
久々の記事の更新です。というか、半年ぶりの記事となります。
では、JavaScriptの勉強をはじめます。
勉強なので、分からないところは、調べて参考になるサイトを記載しています。
では、一緒に勉強していきましょう！
f:id:greenupf:20200404210541j:plain



JavaScriptというと、Web系システムのフロント部分のプログラム言語というイメージがあります。
今回の記事では、JavaScriptはWeb系のシステムのどの部分になるのか、HTMLやCSSやJavaとの関係を確認し、簡単なプログラムを書きたいと思います。
この記事がJavaScriptを勉強している人の参考になればと思います。
記事の内容は、JavaScriptとは、JavaScriptの例、最後にまとめとなります。

JavaScriptとは

Web系のシステムで言うと、クライアントサイドで動くスクリプトとサーバ側で動くスクリプトの２つがあります。
JavaScriptはクライアントサイドでHTML・CSSと合わせ、ブラウザ上の画面を動的に表示するように出来ます。
ちなみに、サーバサイドで動くプログラム言語は、Java・Ruby・PHPがあります。

JavaScriptの例

JavaScriptのコメントの書き方、変数宣言の種類、コンソール出力、ＨＴＭＬ出力、文字列結合、改行を意識して、簡単なプログラムを作成しました。

<script>
//コメント（1行）
/*コメント（複数行１）
  コメント（複数行２）*/

//変数宣言（var、let、const）
var varNum; //関数内　指定しない場合もvar
let letNum;  //ブロック内
const constNum = 0;  //ブロック内　定数

//初期処理
varNum=1;
letNum=2;

if (true) {
  newDate = new Date(); //varで定義されるか確認
}


//主処置
//Consoleに処理開始日時を出力
console.log('consoleに処理開始時間を出力\n' + newDate .toLocaleString()); 


//変数の値を出力
document.write('varNum：' +varNum.toString() +'</br>'); 
document.write('letNum：' +letNum.toString() +'</br>'); 
document.write('constNum：' +constNum.toString() +'</br>'); 

//＋による数値の計算と文字の結合
document.write('1+1=' ); 
document.write(1+1 +'</br>'); 　//左に文字がないため、1+1は計算され2

document.write('1+1≠' +1+1 +'</br>');  //左に文字があるため、1+1は結合され11
</script>

では、上のJavaScriptを実行します。出力結果は次です。

👇のサイトを参考にして、上のJavaScriptの例を書きました。
www.javadrive.jp


まとめ

JavaScriptの勉強として、JavaScriptの使われ方を確認し、JavaScriptの例として気になる変数宣言や文字列結合などを確認しました。

  • コメントは、//１行コメント と /*複数行コメント*/がある
  • 変数は、var・let・const の3種類がある
    • var は関数内、letとconst はブロック内で参照できる
    • 変数を宣言しない場合はvarとなる
  • コンソール出力は、console.log('コンソール出力\n');
    • \nは改行
  • ブラウザ出力は、document.write('ブラウザ出力＜/br＞');
    • ＜/br＞は改行　※＜＞は全角で記載。実際は半角になるので、注意！
  • 文字列結合と計算　左から処理され文字があれば文字列結合される。
    • document.write('文字：' +1+1); 　→文字：11
    • document.write(1+1 + '：計算結果'); 　→2：計算結果

今回の例には含んでいませんが、trueとfalseの判定、型の変換ルール、エラー処理が気になる

引き続きJavaScriptの勉強をしますので、JavaScriptの勉強をする人は読者登録をお願いします。

おまけ（もぐりチェック）

次のJavaScriptの出力結果はどのようになるでしょうか？

<script>
document.write(1+1 + '：' +1+1 ); 
</script>

①11:11
②2:11
③2:2

分からない人は、プロもぐらー。答えは②です

最後まで、読んでいただきありがとうございます。