バッチャン 日常バッサバッサ

男子大学生の日常を便利にするブログです! 下宿・一人暮らし・SMAP・新しい地図 に関する情報を発信しています!

code2 <JavaScript>スコープについて <jQuery>チュートリアル

f:id:tsubasa8770:20190210224657j:plain

code programming


テックアカデミーでプログラミングを勉強しています。

僕の場合は、【PHP・Laravelコース】と【フロントエンドコースを両方勉強しています。

個人的には、オススメは【フロントエンドコース】です。

副業でコッソリ稼ぐことができる可能性があるからです。

 

そして、途中からですが少しずつ勉強したことをアウトプットしようと思っています。

 

今日はその2回目になります!

 

自分なりのメモ・アウトプットが皆さんのお役に立てれば良いな と思っています。

 

詳しくまとめる<ザックリ大枠を掴む

 

 

なお、僕のメモで間違っている点や、もっと詳しく教えて欲しいことがあれば、コメントやツイッターにDMなどを送ってもらえると嬉しいです!

 

twitter.com

 

 

 

学習内容

それでは、2回目の学習内容はこちらです。

 JavaScriptの電卓作成にはなかなか時間がかかりました。

 

今回なんとか自力でできた大きな理由を2点発見できました。

  1. カリキュラムに近いカタチで作成に臨むこと
  2. 『言語 作りたいもの』で検索すること(今回の場合『JavaScript 電卓』

この二点をこれからも意識しておくと、これからのプログラミング学習も効率がいいと理解できました。

 

特に2番は有効です。

なぜなら、同じ悩みのプログラム初心者の人間の意見に共感できますし、変にキレイすぎないコードなので、初心者にとってはわかりやすいからです。

もちろん全く同じコードで、同じ機能を作っているわけではないです。ただ参考にはなると思います!

 

ぜひ、お試しあれ!

 

テックアカデミー フロントエンドコース<JavaScript

 

Javascript 電卓作成

  • return false;は<a>タグを止める役割らしい。。。?
  • 関数の基本は 3種類
    ① 呼び出されて実行される関数
    ② 引数の有る関数
    ③ 戻り値の有る関数

・戻り値returnのつまづき →初心に戻って基礎理解にシフトしました。

 

戻り値return のわかりやすい例

水道管を作る  =function(関数名){} ←関数を作ること

水、そのもの  =return 戻り値

蛇口を開ける動作=関数名() ←関数の呼び出し

 

  • undefiendは戻り値(return)が存在しない時に現れる。
  • 戻り値(return)がある場合は、その戻り値の値がconsoleに表示される
  • もちろん、値の入っていない変数や、存在しないオブジェクトのプロパティにアクセスしたときにもundefiendは表示される。

 

つまり、undefiendが表示される可能性は4つパターンがある

  1. コンソールに入力して実行したコードが、結果を返していない
  2. 呼び出したメソッドや関数が、returnで戻り値を返していない
  3. アクセスした変数に、値がセットされていない
  4. アクセスしたオブジェクトのプロパティが、存在していない

1、2番は自分が間違えていなくても、undefiendが出る可能性がある。

しかし、3番の『値がセットされていない』・4番の『プロパティが存在していない』というのは、コードを書いている自分のミスの可能性がある。

下の二つの場合は、見直しが必要かと思われる。

 

 

・スコープ

  • スコープ = 変数のアクセス可能範囲のこと
  • なぜ必要か = アクセス範囲を決めて、大事なコードを変更してしまうなどの、トラブルを防ぐため
  • JavaScriptには『グローバルスコープ』と『ローカルスコープ』がある
  • グローバルスコープ = JavaScriptのコード内全体でアクセスできる変数のこと
  • ローカルスコープ = 関数内で定義された変数(別名:関数スコープ)

 

→『グローバルスコープ』:関数で定義される変数

→『ローカルスコープ』:関数で定義される変数

 

  • 同じ変数名をグローバルスコープにもローカルスコープにもつけた場合 → 優先順位 ローカル>グローバル 

 

〜〜〜 JavaScript終了 〜〜〜

jQuery

復習:Progate

PHP

PHP 学習コースⅠ

  • switch

switch ($remainder) {

case 0:
echo '大吉です。';
break;

case 1:
echo '中吉です。';
break;

この時の引数($remainder)が全てに必要だと思ってしまっていた。f:id:tsubasa8770:20190211174353p:plain

その他

jQuery

jQuery 初級編 終了

  • jQuery = 全てのブラウザに対応してくれる仲介役(ブログラマー → jQuery →ブラウザ)

基本的な使い方→ $( ' p ' ) . fadeOut(1500);

何を.どうするのか(どれだけの時間で) が基本形

 

  • イベント = 何か行動が起きること(クリックされた…など)
  • イベントの構文は、$('セレクタ').イベント名(function(){ });  でできる
  • hoverイベント $('セレクタ').hover(マウスをのせた時の処理, マウスをはずした時の処理);

 

 

ドットインストール 

JavaScript> 

function 自分がつけたい関数名() { ←これを仮引数

省略したいことを書く場所

};

 

呼び出したい場所で

自分がつけた関数名(); ←これを実印数

 

戻り値とは、結果(答え)を自分に戻す

例)7+3=10 → 10が戻って来る。さらにそこから 10+7=17をしたりする。

 

まとめ

 我ながら頑張ったと言える2回目となりました。

はてなブログでアウトプットを始めてから、飲み込みが早くなった気がします!

このまま、鈍行ではありますが、少しずつ進めて行きましょう!

 

現在は、jQueryなので、CSSと似ているので、とてもやりやすい内容です。このままのペースが続くように努力します

 

 

最後まで読んでいただきありがとうございました。バッチャンでした。