キュアセブン技術ブログ

考えたこと,学んだことを書きます

あなたのいいところ診断

N予備校に通い始めて1ヶ月がたった.学校の期末テストを挟んだこともあって進んでない期間があったけど,最近は多い日は120分の授業を4コマ受けてます*1

今生放送でやってる授業まではあと40コマほどあるわけで(もっと?),せっかく生放送見れても環境ができてないとあって,早く追いつきたいし,授業では得た知識をすぐパソコンで試せるから実感できるのが楽しい〜.

今の進捗状況は

f:id:shiningcureseven:20170308102956p:plain

こんな感じで,Webプログラミング入門を終えたのでどんなことをやったか紹介します.

 

Java Scriptをコンソールで実行してみる

最初は誰でも簡単に始められるという理由でJavaScriptを学んだ.

ブラウザさえあれば,ちょっとしたものなら試せる!

HTMLで自己紹介ページを作成

HTMLを学びながら自己紹介ページを作成〜

emmetの補完機能に慣れつつ,マップのリンクを入れたり,画像のリンクを入れたり,Youtubeのリンクを入れたりできることを学んだ.

表も作れた.

プログラミングのいろいろを学んだ

今度はJavaScriptをVScodedで書きながら,配列やら関数やらオブジェクトやら,プログラミングで使う考え方を習った.これは学校の授業ではC言語でやったから,スクリプト言語ではこう書くんだね〜と比べながら見れたので退屈しなかった.

CSS

CSS知らないようで知ってた.HTMLのページに色をつけられることくらいは知ってたけど,HTMLの範疇だと思ってた.これCSSだったのかあ..cssで独立できることがわかった.書き方もわかった.

いいところ診断を作った

これがWebプログラミング入門コースの総まとめになるんだけど,いいところ診断という動くページを作りながら .js .html .cssから構成されるプログラムを作った.

最初は要件定義から行った.(N予備校,Nice)

モックアップとして HTMLをざっと作った.idをタグに含ませること,classをタグに含ませることで.css,.jsで扱えるようにした.inputタグで入力欄を作れた.

CSSで見た目を良くした.

JavaScriptファイルを作った.同じ名前の入力の時同じ結果が出るように,文字コードの整数値の和のあまりを診断結果の配列の添え字にするロジックにした.

診断結果を表示するために正規表現も習った.

ツイート機能をつけるにはどうしたらいいか学んだ.Twitterから取ってきただけなんだけどかっこいいね.

なんだかんだでできたのが

キュアセブン作あなたのいいところ診断

はい〜

動くからやってみてね.

 

Webプログラミング入門ではできたHTMLを自分のブラウザでしかうごかせなかったんだけど,今Linux開発環境構築コースを進めてるからGitHubで公開できたよ.

またこれも終わり次第ブログにまとめようと思います.

*1:実際は1.5倍速で見てるし授業のペースはかなりゆっくりなので辛い所業ではない.