Spells and Charms

プログラミング(呪文学)の学習記録。

プログラミング

this についての理解(1)

前回の記事で自分が次になにをすべきか確認したので早速thisからとりかかりました。 ahochauyo.hatenablog.com ( ・∇・)! 日本語の記事でわかりやすかったのはこちら。 takkyunさんという方の記事です。takkyun - Qiita qiita.com 英語はこれがわかりやすか…

flexbox 垂直と水平の話

Hello, world! ( ・∇・) 数日前からflexboxをやりはじめたのですがある一点がわかっておらず苦戦しました。 ( ・∇・;) それは、flex-directionの方向ありきで他のプロパティを考えないといけないところ! それがわかってやっとスッキリ。 赤字部分が抜けてい…

クロージャ | 割と詳細に書いてある記事がわかりやすかったのでシェア

Hello World! 前回の記事でクロージャについて紹介したのですが、理解に一役かってくれた記事があるので今回はそちらの記事のざくっとしたまとめを残しておきたいと思います。 ahochauyo.hatenablog.com ( ・∇・) JavaScriptにおけるLexical Environmentとは…

クロージャについての理解 | Closures

もし「クロージャって?」と聞かれた時に、「あ、こう答えたら良いかもしれない」という言い方を思いついたので、メモしておきたいと思います。 (言い方って・・) その言い方とは、 関数とその関数が参照できるスコープのセットです。 ( ・∇・) 関数だけと…

コールバックをつかった掛け算タイマー

0から100までのランダムな数字を2つ掛け算し、結果を5秒後に表示するというもの。 multiplierはすぐには実行せず、executeの中でコールバックされています。 JavaScript function multiplier(num1,num2){ document.getElementById("answer").innerHTML = "Th…

コールバックをつかった掛け算タイマー

0から100までのランダムな数字を2つ掛け算し、結果を5秒後に表示するというもの。 multiplierはすぐには実行せず、executeの中でコールバックされています。 JavaScript function multiplier(num1,num2){ document.getElementById("answer").innerHTML = "Th…

コードを書く前に方針をたてよう

方針とは。 インプットはなにか。 アウトプットはなにか。 そして関数の中でなにをするのか。 関数でないこともあるかもしれませんが、要するにどんな処理を経てアウトプットになるのか、書ければいいと思っています。 テクニカルインタビューで指摘があって…

はじめてゲームつくったよ!

いつもプログラミングのことを教えてくださっているCTOから、こんな課題をいただき、ゲームを作成してみました。 CSSはつくっていないのでごく簡素なもので、仕組みづくりのJavaScriptの部分を頑張った感じです。 お題 徳川さんはプログラミングの練習をして…

functionってなに?

function はJavaScriptの基礎っぽいのだが、functionそのものがなんなのかあまりわからず、混乱の日々が続いている。 今ひとつわかりいやすい記事に出会えていなかったのだが、この方の記事はたしかにわかりやすかったので備忘録としてはっておく。 senews.j…

入力値がどんな型なのか知りたい 〜配列(array)の判定〜

Javascriptには、型とよばれるタイプがあるのですが、練習問題を解いていくにあたって「入力値がどんな型なのか知りたい」ときがあります。 typeof という演算子をつかいましょう、 という情報をネットで見かけることが多かったのですが、自分の場合タイトル…

charAt を手に入れた!

文字列から指定した位置の文字列1文字のみを取り出す呪文。 string.charAt(指定位置の番号) 指定位置の番号は左から、0,1,2,3,4と進んでいく。 String.prototype.charAt() | MDN

呪文解禁 路頭に迷う

1月2日から仕事が再開、通常運転となって10日ほど経過した。 やはりホリデー中のようにはいかない。仕事で体もつかれてしまうのとシフト勤務で時間帯もバラバラなためリズムよく充分な集中タイムをプログラミンに割り当てられないのが最近の悩みだ。 とはい…

【Eloquent JavaScript】読み方(我流)

この本 をチャプター5まで急ピッチで読み理解せねばならないので、最初に方針をたてておく。 集中して読むと忘れてしまうので読み始める前にメモで残しておく。 1 速読 1.0 各章3回速読してから次の章に進む1.1.1 章最後のSummaryを読む。賞の構造をとらえて…

【短期ロードマップ】2019.1-2

依然として春からBootcampに行きたい希望はある。せねばならないことが具体的になってきたので、改訂。 ahochauyo.hatenablog.com 2019.1 -練習問題系 kata 8kyuからスタートして7kyuまで完全に解けるように。 paiza レベルCの問題をスラスラ解けるくらい。B…

JavaScriptではいくつか型が存在している。 ahochauyo.hatenablog.com 先にでてきたものに合わせて計算するという仕組みになっているので要注意。 //変数は数値 var x = 1x += 2 // xは数字。これは1+2の足し算だな。3をいれとこう。 //変数は文字列 var y =…

var

varは初期値を与えずに宣言だけすると、最初はundefinedの状態。 var x console.log(x) // undefined var x = 10 // 初期値を与える例1console.log(x) // 10 var x = “abc” // 初期値を与える例2console.log(x) // abc varは毎回新しく変数を宣言する。 {}の…

左辺がなくてもいい。=がなくてもいい。 プログラミング初心者なので、まだ感覚的に体得できていない感じがある。 いままでは、 配列を数値に変換して計算させたり、 この条件ならば計算Aそれ以外は計算Bなど、 計算をするプログラムが多かった。 つまり va…

【短期ロードマップ】2018.12 - 2019.3 ※随時更新

2018年 12月 paiza転職、というサイトのD問題 105問全部。 udemy Javascript video 呪文一覧作成 階乗 閏年 2019年 1月 2月 4月開始のBoot Camp 申し込める段階にあるか判断 3月

【Day5】累乗しつづける- Modified

さっきアップしたやつ、もう絶滅しかかってるやり方でやってたらしい。虚。 ahochauyo.hatenablog.com てことで、現役のやり方に修正しました。 Modified code JavaScript function loop(){ var n = document.getElementById("nb").value; var x = n; while(x…

【Day5】累乗しつづける

次の課題はこんなかんじでした。ちょっと時間かかったなあ。 テキストボックスを一つ用意して、 そこに打ち込んだ数字を1000を超えるまで自分の累乗をしていって、その都度途中の値をconsole.logで出力するプログラムを作る 例えば5って打ち込まれてなんかex…

【Day4】Repeat Alert

次の課題はこんなかんじ。 テキストボックスを二つ用意して 一つ目のテキストボックスに打ち込まれた文字を二つ目のテキストボックスに打ち込まれた回数alertで繰り返し表示してみて 例えば test 3 って二つ打ち込まれとったら testって書いたアラートが3回…

【Day3】 Arithmetic

次の課題はこんなかんじ。 四則演算のやついこ 数字を入れるテキストボックス2つと、その間に+,-, x, ÷を選べるセレクタを用意して、 ボタン押したら計算結果をアラートしよかほしたら Language HTML/ Javascript My code <html lang="en"> <head> <meta charset="utf-8"> <title>Arithmetic</title> </head> <body> <form id="arthmetic"> <input type="text" id="n1"> <select id="op"> </select></form></body></html>

console.log() を手に入れる

今現在3つめの課題でちょっと苦戦中。ある程度コードを書いたが、なにかが呼ばれていない模様で 動作しない。 そこで、タイトルのとおり、console.log() なるものがあるよと教えてもらう。 右クリックするとでてくるInspectの画面をつかう。 右側のやつ 上の…

【Day2】 Text box - Modified

前回記事をdocumentを使わずにやってみようという話。 ahochauyo.hatenablog.com Language HTML CSS Javascript Code HTML/ Javascript <html lang="en"> <head> <meta charset="utf-8"> <title>googrun</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <div class="container"> </div></body></html>

【Day2】 Text box

次の課題はこんなかんじ。 テキストボックスに何か入力してボタン押したら テキストボックスの中に入れた文字がアラートで表示されるように 前回検索ボックスをつくったのでそのまま流用することに。 Language HTML (前回分から一部変更) CSS (前回分から変…

【Day1】 Top page like the Google's.

最初の課題はグーグルみたいなトップページをつくるというチャレンジ。ボタンを押したらどこかに飛ぶ、などの動きはなし。見た目のみ。 Language HTMLCSS My code HTML <html lang="en"> <head> <meta charset="utf-8"> <title>googrun</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <div class="container"> <img src="googrun.jpg" alt="logo"> <…</div></body></html>

【初歩】CSSでFlexboxをつかいたいときの宣言

必ず、CSS classごとに、display: flex; というpropertyを忘れないように。 これはHTMLでいう開始タグみたいなもので、 この宣言をしないと、flexboxは効かない。 参考までに自分のCSSで解説すると、赤字をぬかして青字だけ書いてました。 .container { disp…

【プログラミング学習】なんとなく一旦のゴールきめた。

友人のエンジニアの人に少し前から手ほどきをしてもらっている ネットの情報や、ベルリンでBoot campに参加され大胆なキャリアチェンジを成功させた佐藤さんのブログを参考にさせていただき、自分も目標は1000時間にしようとおもう。 来年の春か夏でBoot cam…