2018-06-04

プログラミングのお勉強：010＆011日目

プログラム

やったこと：JavaScriptに触れる

相も変わらずProgateの無料レッスン

昨日はJSのレッスン1、今日はレッスン2。

console.log("Hello World");　で出力　最後にセミコロン必要

//　文頭につけるとコメントアウト
数字と文字列の扱い、結合、計算、演算子、真偽値、とかはRubyと同じ

こういうのはいろんな言語で共通？
var name = "John" 変数の定義　最初に var 必要二語以上の変数名は大文字で区切る

userName（キャメルケース）　 user_name（スネークケース） Rubyはこっち

変数の値更新の時は var つけない
比較演算子 a === b　等しいときtrue

A !== b　異なるときtrue

console.log(6 + 2 === 5);　falseと出力

Rubyは==と!=だった

< > <= >= はrubyと同じ &&と||も同じ
if(level >= 10){

console.log("熟練冒険者");

}else if(level >= 5 && level < 10){

console.log("中堅冒険者");

}else{

console.log("新人冒険者");

}

if文の書き方はRubyと似てるけど微妙に違う
switch (item){

case "片手剣":

console.log("装備出来ます");

break;

case "両手剣":

console.log("装備出来ますが、盾が装備できません");

break;

default:

console.log("装備できません");<>/p

}

var item = 片手剣"　のとき「装備出来ます」が出力

case　と　default　のあと:（コロン）が必要

それぞれの case ごとの区切りに break を入れる

2018-06-01

プログラミングのお勉強：010日目

プログラム

今日やったこと：コマンドラインに触れる

もう寝るのでまとめメモは明日。

（追記）

ターミナルと呼ばれるものにコマンド（命令）を入力することで、コンピュータに指示を与える

自分が今いるディレクトリ＝カレントディレクトリ
いちばん親の階層＝ルートディレクトリ　/で表される
ホームディレクトリ　ユーザが起点とするディレクトリ　~で表す

touch ファイル名　：ファイル作成

cat ファイル名　：ファイルの中身表示

mkdir ディレクトリ名　：ディレクトリ（フォルダ）作成 make directory

cd ディレクトリ名　：ディレクトリ移動 change directory
・・ひとつ親の階層に移動するには cd ..
・・ディレクトリ指定せず cd のみだとホームディレクトリに移動

pwd　：カレントディレクトリを表示　print word directory　

ls　：今いるディレクトリの中身を表示　list

mv 移動させたいファイル／ディレクトリ名　移動先のディレクトリ名　：ファイルを移動
mv 現在のファイル／ディレクトリ名　新しい名前　：名称変更

cp コピーするファイル名　新しいファイル名　：コピー
cp -r コピーするディレクトリ名　新しいディレクトリ名　：コピー

rm 削除するファイル名
rm -r 削除するディレクトリ名

2018-05-30

プログラミングのお勉強：009日目

プログラム

今日やったこと：Ruby入門

ProgateのRuby1を最後まで。

とりあえず無料でできるレッスン後幾つかやってから有料レッスン登録するかな。

条件分岐　if

score = 94
if score > 80
puts "よくできました"
end
条件が成り立てば出力
score = 94
puts score > 80
と入れると、「true」が出力　成り立たないと「false」が出力
・・・「真偽値」
if文＝条件式がtrueなら処理実行、falseなら実行されない

・・・「比較演算子」
「<」「>」「<=」「>=」
「==」　a == b　aとbが等しいときtrue
「!=」　a != b　aとbが異なるときtrue

if　条件式
処理　←条件式がtrueのとき実行
else
処理　←条件式がfalseのとき実行
end

if　条件式1
処理　←条件式1がtrueで実行
elsif　条件式2
処理　←条件式1がfalse　条件式2がtrueで実行
else　
処理　←条件式1も2もfalseで実行
end

score = 68
if score <= 80 && score > 60
puts "まずまずです"
end

論理演算子　&&　かつ　||　または

2018-05-30

プログラミングのお勉強：008日目

プログラム

今日やったこと：Rubyに触れた

Progateの有料会員になる踏ん切りがつかなかったので、ひとまずHTML&CSS中級に進まず、Ruby1をやってみた。

そのうち有料レッスン受けるつもりだけど、似たような料金設定ならProgateとN予備校、どっちがいいだろう。

puts "XXX" もしくは 'XXX' で「XXX」と出力
puts 5 + 7 で13（足し算） / で割り算 % で割り算の余りを出力
puts "にゃ" + "わん" で「にゃわん」
数字と文字列は別。puts "5" + "7" だと「57」
変数。text = "僕もそう思う" 「=」はイコールではなく、右の値を左に代入する
puts text で「僕もそう思う」と出力
puts text + "にゃわん" で「僕もそう思うにゃわん」
number = 2 としていて、この変数を5に変えたいとき、number = number + 3 と書く
number += 3 と省略して書くことができる
変数展開。変数を文字列に含める書き方。puts "僕は#{number}才です"
数値と文字列は + で結合できないので、変数展開で書く

2018-05-27

プログラミングのお勉強：007日目

プログラム

やったこと：習ったHTMLとCSSを書いてみる

ほぼ丸パクリで書いたのにコンタクトフォームの部分がなんかずれた。

見比べて修正すべきなんだろうけど、時間が来たので今日はここまで。

追記

見直したら解決した。

2018-05-26

プログラミングのお勉強：006日目

プログラム

勉強したこと

HTML&CSS初級コース復習終わり。以下メモ

------------------
HTMLとは
-----------------

■タグ

<*>開始タグ　</*>終了タグ
タグの中に入れた*は「要素」　
テキストをタグで囲んで「要素」の意味を付与
要素を要素で囲む入れ子構造が基本

例：
<ul>
<li></li>
<li></li>
<li></li>
</ul>

前後で改行が入り、親要素の幅一杯に広がる要素ブロック要素
<div> <h1> <p>
改行されない要素インライン要素
<a> <span>

ボックスモデル
HTMLの全ての要素には、borderがあり、その外側の余白はmargin, 内側の余白はpadding

・<h1><h2>…<h6>　見出し headingの略

・<p>　段落　paragraphの略

・　コメント　ブラウザに表示されない

・<a>　リンク　anchorの略　<a>ここがリンクになる</a>

・<img>　画像　<img src="***">で指定　終了タグ不要

・<li>　リスト　箇条書き　囲む要素によって種類が変わる
・<ul>　アンオーダーリスト　リストを囲む要素　戦闘に黒丸がつく
・<ol>　オーダーリスト　先頭に数字

・<div>　要素をグループ化　divisionの略

・<span>　囲んだ部分のみにCSSを適用
・・<p>裸人倶楽部は<span>裸人教団</span>として学園内に地位を確立</p>

・<input>　終了タグ不要　1行のテキスト入力を受け取る

・<textarea>　終了タグ必要　複数行のテキスト入力

・<!DOCTYPE html>　DOCTYPE宣言　HTMLのバージョンを宣言　まだよく分からない

・<head>　ページの設定：文字コード　ページタイトル　CSSの読み込み

・・<meta charset="utf-8">　文字コード　多分キャラクターセットの略
・・<title></title>
・・<link rel="stylesheet" href="******.css">　CSSの読み込み

・<body>　ブラウザに表示される部分

■属性
開始タグの中に記述　値の指定は""の中身
<* 属性="値の指定">

・href　Hy0pertext REFerenceの略　リンク先を指定

・・<a href="https://hogehoge.com">リンク名<a>

・src　Sourceの略　画像、スクリプトとかを指定

・・<img src="*******">　

・class　タグに名前を付けて別々のCSSを適用できるようにする

・・<li class="selected">***</li>
・・クラス名でCSS指定時には先頭にドット　.selected{

・charset　文字コート指定　HTML5の推奨はUTF-8

・rel　リンク先の位置付けを表す　
・・<link rel="stylesheet">　ならリンク先はスタイルシート

・type　要素によって様々な種別を指定
・・<input type="submit">　送信ボタン
・・<input type="search">　検索欄

・value　入力コントロールの初期値を指定
・・<input type="submit" value="保存">　送信ボタンの「送信」→「保存」に変更
　

-----------------
CSSとは
-----------------
HTMLの要素に対して色、大きさ、配置などを指定し、ページをデザインするための言語

書き方　何の（h1）｛　何を（color）：どうする（red）；｝

h1{
color:red;
}

対象となる要素（↑だとh1）が「セレクタ」、変更項目が「プロパティ」

セレクタがクラス名の場合、先頭にドット

.logo01{
font-size:100px;
font-family:ariel
}

特定クラス内の要素を指定する場合

.header-list li{

複数のセレクタをコンマで区切ればそれらに同じCSSを適用

h1,p{

CSS内でのコメントは　/* */　を使う

■プロパティ

・color　文字の色変更　文字コード（#******）

・font-size　文字の大きさpxで指定　font-size:20px;

・font-family　フォント名にスペースある時は""で囲む　

・・font-famili:selif;
・・font-family:"New Type Roman";

・background-color

・width　横幅　height　高さ　pxで指定

・list-style　list-style:none;　で先頭のマーク消す

・float　ボックスの回り込み位置を指定　leftで左寄せ　rightで右寄せ

・border　枠線の太さ、種類、色を指定
・・border:5px solid red;
・・単に border だと上下左右に線（囲まれる）
・・下線なら border-bottom　上に線なら border-top のように指定

・padding　ボックス内部の余白
・・padding-top patting-right padding-bottom padding-left
・・padding:20px 10px 20px 10px;　でtop,right,bottom,leftの順に設定
・・padding:20px 10px;　で上下と左右

・margin　ボックス外部の余白

2018-05-25

プログラミングのお勉強：005日目

プログラム

勉強したこと

HTML&CSS初級　5章まで復習しながらメモ帳にまとめ

最後までやるつもりだったけどだるくなったのでここまで