ヤマカサのプログラミング勉強日記

プログラミングに関する日記とどうでもよい雑記からなるブログです。

[N予備校]【2018年度】プログラミング入門 Webアプリ その1

N予備校

4月になり、新年度となったので、N予備校のプログラミング関連の授業を受講していきたいと思います。

www.nnn.ed.nico

【2018年度】プログラミング入門 Webアプリ

まず初めに【2018年度】プログラミング入門 Webアプリをやっていきたいと思います。Web アプリに関する講義です。

HTML や CSS については、ドットインストールなどである程度触れたので、最初から躓くことがないようにやっていきます。

第0章 入門コースをはじめよう

プログラミングの説明や講義について。

第1章 はじめよう

* 01 プログラミング体験をしてみよう

Google Chromeディベロッパツールのコンソールで JavaScript の alert を用いた計算や文字の表示を行いました。

* 02 はじめてのHTML

VSCode で htmlファイルを作ってブラウザで確認をしました。

* 03 さまざまなHTMLタグ

基本的なタグの使い方を学びました。

h, p, a, img, table などのタグを使いました。

table タグ

tr: table row 表の1行

th: table header 表の見出し

td: table date 表の中身

* 04 HTML で作る自己紹介ページ

ドットインストールで同じようなものを作ったことがありますが、ここでも似たようなものを作るようです。まあ、簡易的なものですが。

See the Pen LvYoyw by ヤマカサ (@yamakasa33) on CodePen.

* 05 はじめてのJavaScript

最近話題になった JavaScript について学びます。

document.write('<h1>JavaScript を学ぼう</h1>');
console.log('見出しを表示しました');
* 06 JavaScriptでの計算

JavaScript を用いて四則演算を行いました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JavaScript の計算</title>
</head>
<body>
  <script src="../js-grammar/calc.js"></script>
</body>
</html>
(function(){
  'use strict';
  var x = 24;
  var y = -0.25 * x + 14.1;
  document.write(x + "<BR>");
  var r = 12;
  var s = r * r * 3.14;
  document.write(s);
})();
* 07 JavaScript で論理を扱う

if 分野論理演算について。

* 08 JavaScript のループ

for 文を使ったループについて。

(function(){
  'use strict';
  for(var i = 1; i < 31; i++){
    if(i % 15 == 0){
      document.write('FizzBuzz<BR>');
    }else if(i % 3 == 0){
      document.write('Fizz<BR>');
    }else if(i % 5 == 0){
      document.write('Buzz<BR>');
    }else{
      document.write(i + '<BR>');
    }
  }
})();
* 09 JavaScript のコレクション

配列の使い方について。

(function(){
  'use strict'
  var names = ['あ', 'い', 'う', 'え', 'お', 'か', 'き', 'く', 'け', 'こ'];
  for(var i = 0; i < names.length; i++){
    for(var j = 0; j < names.length; j++){
      document.write(names[i] + names[j] + '<BR>')
    }
  }
})();
* 10 JavaScript の関数

関数の定義と使い方について。

(function () {
  'use strict';
  function fact(n) {
      if(n == 1) return 1;
      return n * fact(n - 1);
  }
  document.write('2 の階乗は ' + fact(2) + 'です。');
  document.write('3 の階乗は ' + fact(3) + 'です。');
  document.write('5 の階乗は ' + fact(5) + 'です。');
})();
* 11 JavaScript のオブジェクト

オブジェクトに関数を持たせることができるのが興味深かったです。クラスみたいな使い方ができると思いました。

感想

しっかり完走していきたい。