どうも！ 職業訓練生のがっちゃんです！
ただいま長期人材育成コースの「情報セキュリティ管理者資格」２年コースを絶賛受講中です。勉強の予習復習のため、また、同じコースを目指す方の参考にしていただくべく、自分の勉強した足跡をできるだけ詳しく残すようにします。
♪お願い♪
あくまで私が理解したことですので、超初心者目線の内容になっています。また、超初心者ゆえの間違いが多々あるかと思います。そのあたりは優しい目で見守っていただき、目に余る間違いにつきましてはお知らせいただけますと大変勉強になります。
５月の職業訓練記録（情報セキュリティ管理者資格コース）「JavaScript編①」
今月はジャバスクリプトの操作についても教えていただきました。ちょっとだけですけどね。
先生いわく、「このコースはプログラミングを覚えるのが本分ではなく、広く知識を得るためにプログラミングを教えている」んだそうです。というわけで、このJavaScriptについても、ちょっとさわりを教えてくださいましたよ。
JavaScriptはJavaとは違うのだよ
JavaScriptは、1995年に「LiveScript」という名前で誕生。
でも、当時人気だったJava言語にあやかって「JavaScript」と名称変更したそうです。
なんてフレキシブル、というか考えがゆるすぎるっすよねぇ。
名前変えただけで、人気の言語になるもんなんすかねぇ。
そんなノリで命名されたJavaScriptさん、言語仕様もゆるい作りになっているそうです。
「動的型付け言語」という言語だそうで、「変数」とか「関数」に入る型を事前に決めておかなくても良いそうなんです。
プログラムを実行する時に決まるような感じ。
だから、プログラムを比較的カンタンに作ることができるそうです。
※pythonとかruby、perl、PHPさんとかが同じ仲間だそうです。
反対に「静的型付け言語」というヤツは、「変数」とか「関数」に入る型は事前に決めとかなあきません。
この変数さんは、整数として使ってね、この変数さんは文字として使ってね、この関数さんは、小数を扱いますぜ、という感じで決めときます。だから、プログラムを書くのは少し複雑になります。
※C言語、C++、C#とか、javaさんとかが同じ仲間だそうです。
※「動的」は、「状況によって態度を変えるヤツ」、「静的」は、「どんな状況でも態度を変えへんヤツ」という感じでしょうかね。ま、どっちの言語にも「ええとこ」と「悪いとこ」があるそうです。
なんやかんやで今回は、JavaScriptさんを勉強することに。
「ビジュアルスタジオコード」という無料のソフトを使いつつJavaScriptの基本を教わりました。
以下がその内容です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<span style="font-family: メイリオ, Meiryo;"><!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> <h1>javascript練習</h2> <script> //JavaScriptは<script>と</script>で囲んでプログラムします。 //画面に文字を出力します(document.write) document.write("情報セキュリティ <br> がっちゃん"); document.write('がっちゃんです！'); /*ﾎﾟｯﾌﾟｱｯﾌﾟｳｲﾝﾄﾞｳを表示します(window.alert)*/ window.alert('JavaScript練習中'); /* 複数行のｺﾒﾝﾄを書くことが できます。 */ //裏画面に文字を表示する(console.log) //ｸﾞｰｸﾞﾙｸﾛｰﾑ→右ｸﾘｯｸ→検証→consoleで見ることができます。 //typeof()は、()の中にある型の判定をしてくれる console.log(typeof(false)); //変数宣言と動的型付 //var(数字でも文字でも代入可能) var x = 1000; console.log(typeof(x)); x = "大阪市" console.log(typeof(x)); let name = "福山雅弘"; name = "がっちゃん\n子ども会"; console.log(name); //const(再度代入が不可能なコマンド) const a = "大阪"; //a = "東京";(こんな風に再代入するとエラーとなる) console.log("aの値は"+(a)); b = "大阪"; b = "東京"; console.log("bの値は"+(b)); console.log("10%3の答えは"+(10%3)); //がっちゃんはバイクが好きです const bike = 100+23; console.log("がっちゃんはバイクを"+bike+"台持っているわけがない"); //const x = 2; const array = ["犬","猫","うさぎ"]; array[array.length-1]; //array.push("インコ"); //末尾に追加 console.log("配列の要素の数は"+(array.length)); //let(再度代入が可能なコマンド) let y = 10; y += 1; // y = y + 1という意味 y -= 1; // y = y - 1 y *= 2; // y = y * 2 y /= 3; // y = y / 3 console.log("yの値は"+(y)); let z = 0; z++; //1加算(ｲﾝｸﾘﾒﾝﾄ) z++; z--; //1減算(ﾃﾞｸﾘﾒﾝﾄ) console.log("zの値は"+(z)); let p = 0; console.log("p++の値は"+(p++)); //1が出力されるとおもいきや0が出力されます。出力してから加算されるためです。 console.log("pの値は"+(p)); let q = 0; console.log("++qの値は"+(++q)); //この場合は、加算されてから出力されるので１になる。 </script> </body> </html></span> |
※出力結果の確認として「グーグルクローム」というブラウザソフトの画面と、その裏画面（ブラウザ画面上で右クリックし「検証」ボタンを選択するとあらわれます。で、「console」タブを開きます。）を使用しました。
これを使えば、あなたも「プログラマ」っぽくなります！
プラスアルファで「Windows Power Shell」も使っちゃえばあなたはもう、プロのITエンジニア！になったかのように妄想することができます（笑）。
本日の日付と時間をブラウザに表示するプログラムを組んでみた
ひととおりJavaScriptの基本をマスター！？できたので、次は、本日の日付と時間をブラウザに表示するプログラムを作ることになりました。以下がそのプログラムです。
うまく動けば、JavaScriptをマスターしたような気になりますよ（笑）。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<span style="font-family: メイリオ, Meiryo;"><!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>本日の日付と時間</title> <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet"> <style> #current{ text-align: center; font-size: 250%; border: 1px solid blue; width:50%; margin:0 auto; background-color: black; color: white; font-family: 'VT323', monospace; } </style> </head> <body> <body> <p id="current">2019/11/8（Fri）17:26:00</p> <script> function getCurrentDate(){ //日付を取得する const date = new Date(); //西暦4桁を取得する const currentYear = date.getFullYear(); //月を取得する const currentMonth = date.getMonth()+1; //日 const currentDate = date.getDate(); //曜日 const wday = ["日","月","火","水","木","金","土"]; const currentWeekofDay = wday[date.getDay()]; //時 const currentHours = adjustTime(date.getHours()); //分 const currentMinutes = adjustTime(date.getMinutes()); //秒 const currentSeconds = adjustTime(date.getSeconds()); //P#currentﾀｸﾞを書き換える const str = `${currentYear}年${currentMonth}月${currentDate}日（${currentWeekofDay}）${currentHours}時${currentMinutes}分${currentSeconds}秒`; const current = document.getElementById("current"); current.innerText = str; } setInterval('getCurrentDate()',1000); //引数を二つ持つ、繰り返し処理するｺﾏﾝﾄﾞ(1000分の1秒単位に呼び出す) function adjustTime(a){ //関数はどこに書いても見つけに来てくれる。aはこの関数だけで処理する値 if(a < 10) return `0${a}`; else return a; } const str2 = `${currentYear}年${currentMonth}月${currentDate}日`; console.log(str2); </script> </body> </body> </html></span> |
こんな感じでJavaScriptの授業がすすんでいきましたよ。
次回はif文とか使って、もっとプログラムっぽいことをやっていきますよ。
今回も最後までお付き合いいただき、ありがとうございました！
