ピュアチャ〜ジ

広告代理店のディレクターを辞め、マレーシアに飛び立ちました。ふわふわ生活して、やっぱり収入を上げて豊かに人生にしたい!と思いプログラミング学習を始めました!フリーランスまでの道のりを描くブログです

【Webデザイン勉強14日目】〜Part2〜

はいどうも!

 

今日も作業を行いました!

 

1枚目

これが苦戦しました。笑

 

constにdoubleを定義して、a*2の数をconsole.logに返す処理を行う記述です。

1.doubleで定義

2.constを読み込む

3.double(12)の12がaに代入される

4.a×2がreturnによってconsole.logに返される

5.24と表示する

f:id:terushi-diary:20200110001405p:plain

結果

f:id:terushi-diary:20200110001414p:plain

 

2枚目

コメントアウトしたconst〜の部分と下のconst〜の記述は同様の意味を持ちます。

手順としては以下です。

1.functionを消す

2. =>を記述

3.returnを消す

4.};を消す

 

f:id:terushi-diary:20200110001422p:plain

結果

変わらないことがわかります。

f:id:terushi-diary:20200110001430p:plain

 

3枚目

{}の中で定義されたxは、{}の中でのみ定義されます。

そのため、外にconsole.log(x);を記述しても表示がされません。

f:id:terushi-diary:20200110002802p:plain

 

表示例

f:id:terushi-diary:20200110002811p:plain

 

 

4枚目
{}の外側にxを定義すると、問題なく表示されます。

f:id:terushi-diary:20200110001438p:plain

表示

f:id:terushi-diary:20200110001445p:plain

 

5枚目

HTMLファイルでscriptを2種類定義した時の記述について

上のscript=画面の右側のJavascript

下のscript=HTMLファイルの下側の処理

 

ポイント

別のscriptファイルで定義していた場合でも、xが二つ登場する場合、上は問題なく実行されますが下はエラーで表示がされません。重複で定義ができないためです。

xを複数定義する場合、{}で囲うことで問題なく定義、処理が可能です。

 

f:id:terushi-diary:20200110001453p:plain

表示

f:id:terushi-diary:20200110001511p:plain

 

6枚目

複数の数字を定義する方法について

[]の中に、,で区切ることで複数の数字を一回で定義できます。

また、定義の後に変更することもできます。

 

scores[2] の記述で、44に再定義しています。

数える順番は0,1,2という順番なので、40に44が再代入されたことになります。

console.logでscoresを表示する指示をしてあげると、80, 90, 44と表示できます。

 

console.log(scores.length);の処理で、数字が何個あるか数えて表示することができます。

f:id:terushi-diary:20200110001520p:plain

表示

f:id:terushi-diary:20200110001528p:plain

 

今日は、ここまで!

【Webデザイン勉強13日目】〜Part2〜

はいどうも!

今日も作業をしましたが、JavaScript結構難しいぞ!笑

 

HTML,CSSとは明らかに違う気がします、多分!笑

 

成長痛として、激しい痛みが伴っていますが、今日の進捗を報告します。

 

関数宣言と関数式という表現があることを学びました!

 

 

f:id:terushi-diary:20200109003717p:plain

コード例(returnがない場合)f:id:terushi-diary:20200109010148p:plain

表示例

f:id:terushi-diary:20200109010159p:plain


f:id:terushi-diary:20200109003726p:plain

 

コメントが関数宣言、下が関数式です。

表記方法は違いますが、どちらも同様の意味合いです。

 

関数宣言→関数式にする方法は以下です。(returnの場合)

1.functionを消す

2.{とreturnを消して、代わりに「=>」を入力

3.最後にセミコロン「;」を入力する

 

以上です!

f:id:terushi-diary:20200109003803p:plain

f:id:terushi-diary:20200109003815p:plain

 

【Webデザイン勉強12日目】〜Part2〜

はいどうも!

 

本日も作業を行いました!

 

 

1枚目

functionにshowAdという名前を代入し、下のconsoleで同じ処理をするという記述です。

f:id:terushi-diary:20200108005326p:plain

表示

f:id:terushi-diary:20200108005333p:plain

 

2枚目

1枚目の処理の変化Verで、基本的には同じ処理を行うのですが一部(真ん中の文字)を変数にし、表示を変えたい時の記述です。

下のshowAdの中に変数として代入したい文字列を入れ、上部の定義の部分で渡される値を受け取るための変数(message)を記述します。

2行目は文字列を代入するためテンプレートリテラルとなっており、「'」→「`」となっているところも注意が必要です。

中央のshowAd()のように、定義していない場合、一番上部の'ad'表示される指示も学習しました。

f:id:terushi-diary:20200108005341p:plain

表示

f:id:terushi-diary:20200108005350p:plain

 

3枚目

function sumは足し算の指示です。

console.logで下の2行の合計を表示することができます。

f:id:terushi-diary:20200108005358p:plain

表示

f:id:terushi-diary:20200108005417p:plain

 

4枚目

functionの下の部分をreturnとすると、関数 (function)を式に代入して計算することができます。

f:id:terushi-diary:20200108010957p:plain

表示

f:id:terushi-diary:20200108011003p:plain




今日は、ここまで!

【Webデザイン勉強11日目】〜Part2〜

はいこんばんは!

眠い!笑

 

今日も作業を行いました!

 

 

【コード】

iに1を代入、10になるまで繰り返す処理です。

バッククオート「`」 + ${ i }  で、文字列と数字を組み合わせて記述することができます。

f:id:terushi-diary:20200106230812p:plain

【表示】

f:id:terushi-diary:20200106230821p:plain

【コード】

単純に10になるまで処理を繰り返し、helloと表示をさせます

f:id:terushi-diary:20200106230830p:plain

【表示】

f:id:terushi-diary:20200106230839p:plain

 

【コード】

iが4だった場合、continue; で4の処理はスキップする意味

f:id:terushi-diary:20200106230846p:plain

【表示】

f:id:terushi-diary:20200106230858p:plain

 

【コード】

iを3で割ってあまりが0の場合(つまり3の倍数)にスキップをする

f:id:terushi-diary:20200106230907p:plain

【表示例】

f:id:terushi-diary:20200106230915p:plain

 

【コード】

iが4の場合、処理を終わる(break;)

f:id:terushi-diary:20200106230923p:plain

【表示】

f:id:terushi-diary:20200106230943p:plain

 

こんな感じです!

 

昼間に動画をかる〜く流し見てたら、夜の勉強の入り具合がよかったです!

これめちゃいい気がしてきました、続けようと思います!

 

今日は、ここまで!

【Webデザイン勉強10日目】〜Part2〜

 こんばんは!

本日も作業を行いました!

 

(昨日更新できなかったんですが、一応1本動画は見て学習しています!笑

 

1枚目

以下、長く記述したものと短く記述したものは同じ意味です。

ifの中にifを追加してもいいですし、「&&」を使用することで二つの条件が揃った時という意味を持ちます。

ちなみに、===はイコールという意味です。

f:id:terushi-diary:20200106012804p:plain

 

 

 

2枚目

以下の記述も、同様の意味を持ちます。

if / else if /else ifと記述してもいいですし、switchを利用し比較する文字を記述。

caseに変数を記入しbreakまで記述すると、そこまでの記述が実行されます。

caseを2回利用することも可能でして、今回の場合を比べるとblueもしくはgreenの際に表記をするという指示になります。

どれにも該当しない場合、defaultと記述しその際に表示させる文字列をconsoleで記述します。

f:id:terushi-diary:20200106012839p:plain

f:id:terushi-diary:20200106012849p:plain

 

「続ける」ことを大切に、毎日作業をしてきていましたが、どうしても無理な状況の時には「手を動かさない」選択肢もあると思いました。

もちろん、毎日手を動かした方がいいに決まっています。

しかしながら、それが非常なストレスになることもわかりました。

休みたくて休んでいるわけではないのだから、手を動かせない日は動画を見ておくとか、できることがあるのでその意味で毎日勉強することを継続していこうと思います。

 

今日は、ここまで。

【Webデザイン勉強9日目】〜Part2〜

はいどうも!

今日も作業を行いました!

 

今日はちょっと時間が足りなくて、補足文章なしです、、!

でも作業はやりました!笑

 

f:id:terushi-diary:20200103235836p:plain

f:id:terushi-diary:20200103235849p:plain

f:id:terushi-diary:20200103235900p:plain

f:id:terushi-diary:20200103235922p:plain

f:id:terushi-diary:20200103235958p:plain

f:id:terushi-diary:20200104000017p:plain

f:id:terushi-diary:20200104000028p:plain

f:id:terushi-diary:20200104000039p:plain

f:id:terushi-diary:20200104000050p:plain

f:id:terushi-diary:20200104000100p:plain

f:id:terushi-diary:20200104000113p:plain

 

今日は、ここまで!