[N予備校]【2018年度】プログラミング入門 Webアプリ その1
N予備校
4月になり、新年度となったので、N予備校のプログラミング関連の授業を受講していきたいと思います。
【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 のオブジェクト
オブジェクトに関数を持たせることができるのが興味深かったです。クラスみたいな使い方ができると思いました。
感想
しっかり完走していきたい。