さもくんのProgramming Life

プログラミングに関する用語、分かりにくい単語を紹介

JavaScript for文のループ処理について解説　繰り返し処理を書く

 

f:id:samokun:20200429183821j:plain


こんにちは、完全独学でプログラミング勉強中のさとさんです。

 

html,css,jsと一通り勉強してみたけど、ほぼ忘れてしまうので困っています。

なので、とりあえずは繰り返し勉強中の内容をバラバラではありますが、

アウトプットしていきます。

 

今日は

繰り返し処理の

１、for

２、while　(while   do...while)

３、forEach

をまとめていきます。

 

１、for

一言で言うと、決められた回数だけ処理を繰り返す処理です

 

forの基本

for ( 初期値；　条件式；　加算式)  {

       繰り返し処理を書く

　　}　　

3つの引数を与えてあげるのが一般的です。

 

1 初期値 ; どこから始めるか、何番目から。

（例）0から始まって　　　　let i = 0;

2 条件式；どこまで繰り返す、何回まで。

（例）5回まで                         i <  5;

3 加算式 ; 何個ずつ

（例）1個ずつ                          i++

 構文

for(①let i =0; ②i < 5; ③i++)
 
console.log(i);

 

 

実行結果

  1. 0
  2. 1
  3. 2
  4. 3
  5. 4

 

 for文のループ処理を途中で抜ける

 繰り返しの途中で処理を中断してループ処理を抜ける

  continueとbreakを使って処理を抜けます。

 

continue   繰り返し処理の最中に特定のタイミングだけ処理を実行させないとか。偶数だけとか。5だけとか。 3だけスキップとか。

使い方

3だけスキップ

構文

for(let i = 0; i <= 5; ++i){
if(i === 3) continue;
console.log(i);
}

 

実行結果3

0

1

2

4

5

3が表示されずに、４から表示された。

 

 break   繰り返しの途中で処理を中断する

10回のループ処理の5回目で処理を抜けたり、特定の値にマッチした際に処理を抜けることが可能です。


 使い方

4からは表示されない

構文

for(var i = 0; i <= 5; ++i){
if(i === 4) break;

console.log(i);
}

実行結果

0

1

2

3

4以降処理を中断する

 

２、while

1 while  2 do...while

while文とよく似た機能を持つ「do...while文」について学習します。

1 while 

指定した条件が満たされている間、特定の処理を繰り返す。

構文

while( 条件式 ) {
 
//繰り返し処理
}
 

 

2 do...while

一旦繰り返し処理を行う。その後に条件式を評価する。

構文

do {
 
//繰り返し処理

} while( 条件式 );

 

 

３、forEach

 

配列時のfor文を簡単にする。

構文

var array = [配列データ];
 
array.forEach( コールバック関数 )

 ちなみに、breakやcontinueは使えない。

 

コールバック関数・・・関数の引数に別の関数を指定する処理とか。

あの処理が終わった後に、この関数を実行したい。

引数として3つの値を受け取ることができる。

     value:     配列の値

     index      配列の番号

     array      現在処理している配列

 

今日は、JavaScriptのループ処理について勉強しました。

 

それではまた、来週か再来週！！ 

 

 

はじめてのJS 1

はじめてのJS 1

 

#01 JavaScriptを使ってみよう

 

JavaScript とはプログラミング言語で、

動的にコンテンツを更新したり、マルチメディアを管理したり、その他多くのことができるスクリプト言語です。

 

JavaScript を使うといろいろなことができますが、よくあるのは HTML や CSS で作られたページの中の要素を操作するといった使い方ですね。

 

たとえば、ユーザーが画像をクリックしたら、詳細ウィンドウをサッと表示するといった動きを作ることができます。

 

他にも、3択クイズを作ったり、数字をタッチしていくゲームや、もしくはピンポンゲームのようなものを作っていくことができます。

 

では学習を進めていきたいのですが、今回ブラウザは Chrome 、エディタは VS Code を使っていきます。

 

 

#02 ひな形となるファイルを作ろう

 

さて、さっそく VS Code でコードを書いていきましょう。

 

今回のレッスンでは HTML/CSS の知識を前提としているので、もしわからないところがあったら、新たに更新予定ですので、レッスンを参考にしてみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript Practice</title>
<style>
.box {
width: 100px;
height: 100px;
background: skyblue;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

 

文書宣言をして html 要素を書いてあげて、その中に head 要素と body 要素を配置してあげましょう。

 

head 要素のほうですが、文字コードの設定とタイトルの設定をしてあげます。

 

文字コードは meta タグで <meta charset="utf-8"> と設定してあげましょう。

 

body のほうですが、とりあえず div をひとつ配置してあげて、あとで JavaScript で操作していきましょう。

 

それから、わかりやすくスタイルを付けてあげたいので class 属性を付けてあげます。では、クラス名は box としてあげましょう。

 

box クラスに対してスタイルを付けていきたいので、今回は style タグの中に書いてあげます。

 

box クラスの要素に対して width: 100px; height: 100px; background: skyblue; 、そしてあとでクリックしたときの動作を付けるので、クリックできることがわかりやすいように cursor: pointer; としてあげましょう。

 

ではブラウザのほうで確認していきます。

 

f:id:samokun:20200413210847p:plain

こうですね、 div がこのように表示されたのがわかります。 

では、ここまでうまくいったので続きは次回にしていきましょう。

 

Javascriptで変数の計算 4

こんにちは、さとさんです。

今日も、地道にプログラミングの勉強をしていきます。

誰一人プログラミング友達がいませんが頑張ます。

 

今日は、 変数を使った計算をしてみます。

それではいきましょう。

 

例えば　let price = 500;というコードがあったとします。

'use strict';
 
let price = 500;
 
このpriceに対して100足したり引いたりするのはよく使うので、短い記法があるのでみていきます。
 
まずは、100足したい時は
'use strict';
let price = 500;
price += 100;
にします。そうしたら600になる計算になります。
 
次に2掛けたい時は
'use strict';
let price = 500;
price *= 2;
にすると、1000になります。
 
単に1足すだけは
'use strict';

let price = 500;
price++;
 
1引くだけは
'use strict';

let price = 500;
price--;
となります。
 
こういった処理はよく使われるので覚えていきましょう。
 
 
次に、データ型についてみていきます。
 
まず、文字列と数値に関して注意すべき点をみていきます。
例えば、文字列をかけたり引いたりしてみます
'use strict';

console.log('5' * 3);
console.log('5' - '3');
 
consoleでみていきます

f:id:samokun:20191111163022p:plain

こうですね。きちんと計算できています。
JSではこのように、数字からなる文字列も数値に変換して演算できます。
 
ただし＋を使った場合だけは例外だったりするのでみていきましょう。
 ＋を使っていきます。
 
'use strict';
console.log('5' + 3);
こうすると8になると思いきや
53という文字列になります
 
このように文字列と数値の間に＋演算子をかいた場合、文字列の連結のための演算子として扱われます。
ちなみに、文字列の連結ではなく、足し算がしたかった場合文字列を整数値に変換してあげればOKです。
その記法ですが、parseInt()という命令を使います。
parseInt('5',10)としてあげるとこちらの文字列を10進数の整数値に変換してくれます。
'use strict';

console.log(parseInt('5', 10) + 3);

結果は8になります。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Javascript　基礎文法編　定数と変数 3

こんにちはさとさんです。

サラリーマンをしているとなかなかプログラミング、blogの勉強の時間が取りにくいですが、地道に頑張っていきます。それではいきましょう。

 

今日の課題は、

  • 定数
  • 変数

の仕組みについて見ていきます

 

まず用語として

定数const　プログラムの中で値に付けられる名前のことを定数と呼び、再代入はできない（数字にあだ名をつけるイメージかな）

変数let       上記の意味は同じで再代入できる。

を覚えておいてください。また詳しく説明します。

 

例えば、150円の商品が140個売り上げと160個売り上げた時の計算をします。とりあえずconsoleで打ち込みます。

'use strict';

// 定数

console.log(150 * 140);
console.log(150 * 160);

 

これだと後で見た時に、どの数字が何を表してるかわかりずらいです。

そう言う時、値段を単語にするとわかりやすいと思います。

今回は値段をpriceとします。

'use strict';

// 定数

console.log(price * 140);
console.log(price * 160);

 

こうするとわかりやすいと思います。

このようにプログラムの中で値に付けられる名前のことを定数と呼びます。

 

では、使い方を見ていきます。

定数を作るには、定数を使いますよと宣言をする必要があります。

constというキーワードの後に定数名を書いてあげます。定数名は自分で好きに付けられます。今回はpriceにします。具体的に、const price = 150;と書きます。

 

'use strict';

const price = 150;

console.log(price * 140);
console.log(price * 160);

 

このように値を代入すると、これ以降はpriceは150という値に変わってくれるので、きちんと計算ができます。

 

consoleで見てみます

f:id:samokun:20191109211943p:plain

うまく言ってるようです、

次は、変数をみていきます。

数字変えたい時

先ほどのpriceはもう宣言されているので値だけ変えればと思います。

しかし、constで宣言された定数には値を再代入できないというルールがあります。

どうするかというと、定数ではなくて変数を使っていきます。

 

変数はletで宣言します。

constをletに変えてあげます。みていきましょう

'use strict';

let price = 150;
console.log(price * 140);
console.log(price * 160);

price = 170;
console.log(price * 140);

 こうですね。こうすると計算ができます。

 

なお、定数と変数の使い分けですが値がころころ変わるとわかりずらいので

なるべくconstを使いつつどうしても必要な時にletを使います。

 

定数と変数にはいくつかルールがあります

英数字、＄、＿のみ　　　let-name;

数値から始められない　　let 0price;

大文字小文字は区別されるのでよく確認

予約語は使えない　　　　let const;

 

続きは次回で

 

 

 

 

 

 

 

 

 

 

 

Javascript　基礎文法編　use strictでエラーチェック 2

 こんにちは、さとさんです。

 

早速JavaScript Basicsの基礎からやっていきます。

 

今日は

  • JSを別ファイルから実行
  • 'use strict';について
  • console.log()を使って文字列の扱い

をやっていきます。

 

まずは、HTMLを書いていきましょう

 タイトルをJavaScript Basicsにします。

 

そして、body最終の直前に<script src="js/main.js"></script>と入力し、別ファイルから実行していきます。

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript Basics</title>
</head>
<body>


<script src="js/main.js"></script>
</body>
</html>

 

次に、JSのファイルで、'use strict';を使います。

'use strict';は厳密なエラーチェックをしてくれます。

JSのエラーチェックコード

JSのエラーチェックコード

 

 

次は、console.log()を使って文字列の扱いについて見ていきます。

まずは、javascriptdでは、'(シングルクォーテーション）か

”（ダブルクォーテーション）を使い文字列を作ります。

どちらも、好きな方を使いましょう。

 文字列を入力していく中で、 it'me などは'(シングルクォーテーション）が被ってしまいます。

it\'meとして

\（バックスラッシュ）を使うと単なる文字列として扱われます。

 

'use strict';

console.log('it\'s me!');

 

ちなみに、\nとすると改行

　　　\tとするとタブと言う意味になります

'use strict';

// console.log('hel\nlo wor\tld');

 

処理結果を、デベロッパーツールのコンソールで確認します

f:id:samokun:20191107090640p:plain

console

 最後に、文字列の連結について見ていきます。

文字列を繋げたい時は、単に＋記号を使ってあげればOKです

 （例）　hellowとworldを繋げる。

'use strict';

console.log('hello' + 'world');

 こうですね、

 

続きは次回で、

 

用語　console.log

動作確認

処理結果を確認

プラウザのコンソールに値を表示するための命令

 

 

 

 

 

 

 

htmlとcssの次はJavaScriptで動きをつけよう 1

こんにちは、さとさんです。

これまで、htmlとcssをひたすらやってきて自身のサイトを作ることができました。レベルは低いけど。。。

次は何か動きが欲しくてJavaScriptの勉強しています。何かと難しそうだけど、ほんまの基礎から勉強しblogへアウトプットしていきたいと思います。それでは、いきましょう。

まずは、

　１、JavaScriptの概要
　２、学習の進め方
を明確にして、進めていきたいと思います。

１、JavaScriptの概要

htmlとcssで作ったページをJavaScriptを使ってページ内の要素を操作することができる。
例えば、ボタンをクリックしたら何かを表示させたり、回転させたり、簡単なゲームを作ることができます。
何か楽しそう。

２、学習の進め方

JavaScriptの勉強範囲は広いから、3項目に分けて勉強します。

　２−１、基礎文法
　　扱えるデータの種類や基本的な計算の仕方について

　２−２、オブジェクト
　　より複雑な構造について

　２−３、DOM
　　JavaScriptからプラウザ内の要素を扱う仕組みについて
学んでいきます。

他にも、
　Canvas API(絵を書いたり)
　Local Strage(データベース構築)
　動画、音楽再生、位置情報にアクセスできたりできるけど
そこは追々勉強します

といった基本的なことから勉強をblogにしていきます。

つづきは次のblogで💏