不惑にしてまだ何者でもない者のブログ

Arduino関連、Raspberry Pi関連、プログラミング学習

paizaラーニング『JavaScript入門編2: 条件によって処理を変えてみよう (全6回) 』を受講してみた

2020-10-18 13:28:20 | paiza
次は、『JavaScript入門編2: 条件によって処理を変えてみよう (全6回) 』を受講。


01:数値が一致した場合、メッセージを表示

  • if文の基本形
// if文による条件分岐
process.stdin.resume();
process.stdin.setEncoding('utf8');
var number = 1;
if (number == 1) {
 console.log("スキ!"); // 条件式が成立したときの処理
} else {
 console.log("キライ"); // 条件式が成立しなかったときの処理
}

02:複数の条件を組み合わせてみよう

  • if - else if -else  の基本形
// if文による条件分岐
process.stdin.resume();
process.stdin.setEncoding('utf8');
var number = 1;
if (number == 1) {
 console.log("スキ!"); // 条件式が成立したときの処理
} else if (number == 2) {
 console.log("どちらでもない");// 条件式2が成立したときの処理
} else {
 console.log("キライ"); // 条件式が成立しなかったときの処理
}

03:比較演算子で条件分岐してみよう

  • 比較演算子の種類
    • a==b:aとbが等しい
    • a
    • a>b:aがbよりも大きい
    • a<=b:aがb以下である
    • a>=b:aがb以上である
    • a!=b:aとbが等しくない

04:おみくじを作ってみよう

  • おみくじ
// おみくじを作る
// 比較演算子 == > < >= <= !=
// 大吉 中吉 小吉 凶 大凶
process.stdin.resume();
process.stdin.setEncoding('utf8');
var omikuji = parseInt(Math.random() * 10) + 1;
console.log(omikuji);
if (omikuji == 1) {
 console.log("大吉");
} else if (omikuji ==2) {
 console.log("中吉");
} else if (omikuji <= 4) {
 console.log("小吉");
} else if (omikuji <= 7) {
 console.log("凶");
} else {
 console.log("大凶");
}

05:RPGのクリティカルヒットを再現

  • おみくじ
// RPGのクリティカルヒットを再現
// 比較演算子 == > < >= <= !=

// スライムと戦っている。
// 1から10の目のサイコロをふって、
// 6未満:サイコロの目だけダメージを与えたと表示。
// 6以上:クリティカルヒットとして、100のダメージを与えたと表示。

process.stdin.resume();
process.stdin.setEncoding('utf8');
var hit = parseInt(Math.random() * 10) + 1;
console.log(hit);
if (hit
 console.log("スライムに、" + hit + "のダメージを与えた!");
} else {
 console.log("クリティカルヒット!スライムに、100のダメージを与えた!");
}

06:西暦から平成何年か求めてみよう

  • 平成年から西暦年を求める
    • 平成年に1988を足す
  • 西暦年から平成年を求める
    • 西暦から1988を引く

感想

ちょっと冗長だったかな。
西暦から平成への変換って。
もう時代は令和だけどな😁 
コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

paizaラーニング『JavaScript入門編1: JavaScriptをはじめよう (全9回) 』を受講してみた

2020-10-17 17:19:11 | paiza
さぁ契約期間中にどんどん進めて行こう。
今度は『JavaScript入門編 (全4レッスン) 』を始める。
まず、『JavaScript入門編1: JavaScriptをはじめよう (全9回)』から受講。


01:JavaScriptとは?

  • JavaScriptで何ができるのか
    • Webページの制御:ブラウザで実行
    • Webサイトの制御:サーバーで実行(Node.js)
    • デスクトップ/スマホアプリの開発
  • 採用例
    • Bootstrap:HTMLフレームワーク
    • Googleマップ:Webサービス(フロントエンド)
    • Netflix, PayPal:Webサービス(Node.js)
  • JavaScriptの特徴
    • 1990年代に登場
    • 主要なWebブラウザに搭載のスクリプト言語
    • Node.jsの登場で、サーバーサイドでも利用が広がる
    • 用途の合わせたライブラリが充実している
      (jQuery, Node.js)

02:JavaScriptでプログラムを書いてみよう

  • hello world
process.stdin.resume();
process.stdin.setEncoding('utf8');
// Here your code !
console.log("hello world");

03:コメントで、プログラムを見やすく!

  • JavaScriptでは、「//」から行末までがコメントになる
  • 複数の行をコメントアウトするときは、コメント行の先頭に「/∗」を、末尾に「∗/」を記述

04:HTMLを表示してみよう

  • JavaScriptで改行しない場合
    • process.stdout.write(スタンダードアウト ライト)関数を使う
  • 改行する場合:"\n"を追加する
    • console.log("文字列")
    • process.stdout.write("文字列\n")

05:変数を使えるようになろう

  • 変数名の付け方
    • 最初の1文字目:英文字または、「_」(アンダーバー)
    • 2文字目以降 :英文字・数字または、「_」(アンダーバー)

06:サイコロを作ろう

  • Math.random():0以上1未満のランダムな数値を出力する
  • parseInt():小数点以下を切り捨てて整数にする

07:演算子で計算してみよう

  • 基本的な演算子
    • +:足し算
    • -:引き算
    • *:掛け算
    • /:割り算
    • %:剰余

08:値段を計算してみよう

  • ここまでの応用として、演算子とrandom関数を使って、リンゴの値段を計算する

09:データの型を覚えよう

  • データ型
    • 整数
    • 文字列

感想

簡単だったが、実際の環境で、JavaScript単体をどうやって動かすのかがわからない。
多分、HTMLに組み込んで使うんだろな。

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

paizaラーニング『HTML/CSS入門編3: HTML要素を学ぼう (全6回) 』を受講してみた

2020-10-17 00:21:26 | paiza
本講座最後のレッスン3『HTML/CSS入門編3: HTML要素を学ぼう (全6回)
』を受講。
最後は再びHTMLらしい。


あれ?またまた、声優さんの声が違う!?
レッスン1と同じかな?レッスン2とは違うよな?😟 

01:画像とリンクを載せよう

  • imgタグ:<img>タグのsrc属性で指定した画像を表示。単独で使う。
  • アンカータグ:<a>タグのhref属性で指定したアドレスにリンクを張る。<a>と</a>の間のテキストや画像が、リンクとして表示される。
    • target属性は、リンク先を同じウィンドウで開くか、別ウィンドウで開くかを指定できる。
      • 「_blank」とすると別ウィンドウで開く
      • 省略すると、同じウィンドウで表示
  • Bootstrapを使って画像を自動調節する
    • <img class="img-responsive center-block" src="http://(URL)">

02:リストとナビゲーションバーを追加しよう

  • 見出し
    <h1>と</h1>の間が、表題になる。
    <h2>と</h2>の間が、大見出しになる。
    <h3>と</h3>の間が、中見出しになる。
    <h4>と</h4>の間が、小見出しになる。
  • 箇条書き
<ul>
 <li>ねこ</li>
 <li>いぬ</li>
 <li>うさぎ</li>
</ul>
  • Bootstrapを使ったナビゲーションバーの表示
    • <nav class="navbar navbar-inverse navbar-fixed-top">
  • ページ内のリンク
    • href="#"はページの先頭へのリンク
<a href="#list">List</a>

<h2 id="list">動物リスト</h2>

なんか次で最後のチャプターとか言ってたけど、このレッスン3はチャプター6まであるよな。
昔はチャプター3までしかなかったのだろう。

03:テーブルを表示しよう

  • テーブルの基本形
<table>
 <thead><!-- ここが表題-->
  <tr><!-- 横一行ごとに記述する-->
   <th>#</th>
   <th>名前</th>
   <th>特徴</th>
   <th>住所</th>
  </tr>
 </thead>
 <tbody><!-- ここが表の本体-->
  <tr><!-- 横一行ごとに記述する-->
   <td>1</td>
   <td>たま</td>
   <td>くつ下</td>
   <td>東京都港区南青山</td>
  </tr>
 </tbody>
</table>

04:基本的なフォームを作ろう

  • フォームの基本形
<form action="#" method="post">
 <label for="comment_1">コメント</label>
 <input type="text" name="comment">
 <button type="submit">送信する</button>
</form>

05:フォームにパーツを追加しよう

  • 複数行のテキストエリアの基本形
<form action="#" method="post">
 <label for="message">メッセージ</label>
 <textarea name="message" id="message" rows="3"></textarea>
 <button type="submit">送信する</button>
</form>
  • Bootstrapでの複数行のテキストエリアの基本形
<form action="#" method="post">
 <div class="form-group">
  <label for="message">メッセージ</label>
  <textarea class="form-control" name="message" id="message" rows="3">   </textarea>
 /div>
 <button type="submit">送信する</button>
</form>
  • プルダウンメニューの基本形
<form action="#" method="post">
 <select name="select" id="select">
  <option>タマ</option>
  <option>ミケ</option>
  <option>トラ</option>
 </select>
</form>

06:グリッドでフォームを作ろう

  • Bootstrapのグリッドの基本形
<div class="container">
 <div class="row">
  <div class="col-sm-12">
   <h1>1行目</h1>
  </div>
 </div>
 <div class="row">
  <div class="col-sm-4">
   <h2>2行目のA</h2>
  </div>
  <div class="col-sm-4">
   <h2>2行目のB</h2>
  </div>
  <div class="col-sm-4">
   <h2>2行目のC</h2>
  </div>
 </div>
</div>
<!-- /.container -->

感想

とりあえず、『HTML/CSS入門編 (全3レッスン)』の全3レッスンに関して、認定証を取得した。
認定証をまたみたいときはどうやってアクセスするんだろう?
まぁこれが何の役に立つかわからないけど。
コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

paizaラーニング『HTML/CSS入門編2: CSSの基礎を学ぼう (全6回) 』を受講してみた

2020-10-16 22:18:23 | paiza
HTMLの次は、CSS
ってことで、レッスン2の『HTML/CSS入門編2: CSSの基礎を学ぼう (全6回) 』を受講


なんかやっぱりレッスン1とレッスン2で声が違うな?
同じ声優さんだけど、喋り方が変わっただけなのか?

01:CSSの基本形を理解しよう

  • CSSの書式
body {
 padding-top: 50px;
 background-color: lightgray;
}

02:CSSの色指定を理解しよう

  • 背景色
background-color: white;
  • 文字色
color: white;
  • 色の表現方法:色の組み合わせ
×
×
×
×
×
×
×
×
×
×
×
水色
×
  • カラー参照

03:CSSのフォント指定を理解しよう

  • 文字の太さ
font-weight: bold;
  • 文字のサイズ
font-size: 120%;
  • 文字の種類
    • serif:明朝体など文字の端にヒゲがある文字
    • suns serif:ゴシック体など

04:CSSのレイアウト指定を理解しよう

  • 要素の枠線を表示
border: dotted #008080;
  • 要素の内側の余白
padding: 30px;
  • 要素の内側の余白
margin: 30px;

05:レスポンシブデザインにしよう

  • レスポンシブデザイン:
    • スマホやタブレット・PCなどサイズが異なるディスプレイでも、単一のHTMLファイルで、最適なデザインで表示する技術。
  • Bootstrapのコンテナの基本形
    <div class="container">
        <div class="starter-template">
   <h1></h1>
        <div class="starter-template">
    <div class="container">

06:Bootstrapのグリッドシステムを理解しよう

  • Bootstrapのグリッドの基本形
    • 12グリッドある
    <div class="container">
  <div class="row">
   <div class="col-sm-12">
    <h1>1行目</h1>
   </div>
  </div>
  <div class="row">
   <div class="col-sm-4">
    <h2>2行目のA</h2>
   </div>
   <div class="col-sm-4">
    <h2>2行目のB</h2>
   </div>
   <div class="col-sm-4">
    <h2>2行目のC</h2>
   </div>
  </div>
    </div>


感想

結局どの言語でもそうだが、1つ1つの機能の記述方法を覚えるのはツラいので、入力補完してくれるツールが必要だな。
Bootstrapを使う場合のそんなツールってあるのかな?
多分、あるんだろうけど。

あと、ブログの中でタグをタグとして記述するには、どうしたらいいのだろうか?
とりあえず半角の角カッコを全角に変換してみたけど。
先頭のインデックスも思うように付けられないし。
コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

paizaラーニング『HTML/CSS入門編1: HTML/CSSを理解しよう (全4回) 』を受講してみた

2020-10-15 23:04:08 | paiza
今日から『HTML/CSS入門編 (全3レッスン)』を始めよう。
まずは『HTML/CSS入門編1: HTML/CSSを理解しよう (全4回)』を受講。


01:Webページの仕組みを知ろう

あれなんか講師の声(霧島京子)が違う?声優さん変わったのか?逆にこっちの方が初期なのかな?

  • HTML:Hyper Text Markup Language
    • Webページの内容と構成を指定する
    • テキストファイルとして記述する
    • 基本的に、1ページにつき1ファイル
  • CSS:Cascading Style Sheets
    • Webページのスタイルを指定する
      (サイズ・色・フォント・レイアウトなど)
    • テキストファイルとして記述する
    • 複数のCSSを組み合わせたり、複数のHTMLから共通のCSSを利用したりできる
  • Bootstrap:ツイッター社が開発した高機能なHTMLフレームワーク。
    • HTMLフレームワークは、あらかじめデザインされたHTML/CSSをセットにしたもの。CSSフレームワークと呼ばれることもある
    • オープンソースで誰でも自由に利用OK
    • Webページ用の便利な部品を多数装備
    • レスポンシブデザインに対応

02:Webページを作ってみよう

  • タグの書式
    • <html>と</html>にはさまれた部分が、Webページになる
    • <h1>と</h1>にはさまれた部分が、見出しになる
    • <!-- コメント -->
↑タグが機能してしまうのを避けるため、<>を全角で記述。

03:テキストを表示してみよう

  • 主なタグ
    • pタグ: <p>と</p>ではさまれた部分が、段落になります。
    • brタグ: <br>単独で使用するタグです。この位置で改行します。
    • strongタグ:<strong>と</strong>ではさまれた部分を、強調します。

04:Bootstrapを使ってみよう

  • HTML5の雛形
<!DOCTYPE html>
<html lang="ja">

<head>
 
  <title>Project Nyaan</title>
</head>

<body>
   

吾輩は猫である。


</body>
  • Bootstrapを導入したページ

<!DOCTYPE html>
<html lang="ja">

<head>
 
 
 
  
  <title>Project Nyaan</title>
 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body>
 

吾輩は猫である。

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>


感想

かなり初歩だが、Bootstrapについては知らなかったので、勉強になった。
コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする