サラリーマン夜の勉強 JavaScript
本日の学習
ウェブ開発入門完全攻略コース
JavaScript入門 終了
JavaScript DOM操作 ノードを追加まで
メモ
onclickはHTMLとJavaScriptどっちでも記述できるみたいだがどっちを使えばいいのか。
クリックイベントの指定方法は主に3つあるようで、
HTMLで<input type="button" onclick="関数名()">とする方法
JavaScriptでonclickプロパティを使う方法
var button = document.getElementById("ボタンのid"); var btnfnc = function(){ } button.onclick = btnfnc;
JavaScriptでaddEventListenerを使う方法
最後のやつは使ってみてはいません。
JavaScriptの処理は上から行われて行くのではないのか？
function append() { // li要素を生成 var li = document.createElement("li"); console.log(li); // テキストノードを生成 var text = document.createTextNode("追加文字列"); console.log(text); // liタグの要素に、テキストノード textを追加 li.appendChild(text); // idがlistsのulタグに、liを追加。具体的には<li>追加文字列</li>が、追加される。 lists.appendChild(li); }
これで実行するとコンソールに表示されるのは
<li></li>
追加文字列
となるのかと思いましたが、実際は
<li>追加文字列</li>
<li>追加文字列</li>
となったので上から実行されるわけではないのですかね。
明日調べる。
ウェブ開発入門完全攻略コース bootstrap
bootstrapのnavbarの解説で分からない所があったので、メモを残しておきます。
navbarの色を変更する方法
文字色を変更する場合は、navbar-lightかnavbar-dark
背景色を変更する場合は、bg-lightかbg-dark`
そして背景色の変更はcssのbackground-colorで色指定できるという解説がありました。
文字色の色指定はclass名とliをcssで指定して、colorで変更できました。
#変更前 <nav class="navbar navbar-light bg-light"> 省略 <ul> <li>...</li> </ul> </nav> #文字色と背景色を変更する <nav class="navbar"> 省略 <ul> <li>...</li> <ul> </nav>
.navbar { background-color: カラーコード; } .navbar-brand { color: カラーコード; } .nav-link { color: カラーコード; }
これで文字色も変更できました。結局わからずに進んでしまったのですが、liでcss指定すると文字の色が変更できませんでした。
この方法で色の変更をするとハンバーガーメニューが見えなくなってしまいました。
調べた所次の方法でハンバーガーメニューの色を変更できるようです。
.navbar-toggler { #枠の色 border-color: カラーコード; #背景色 background-color: カラーコード; } .navbar-toggler-icon { #三本線の変更 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='カラーコード' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }
stroke=の部分を変更すると色が変わるみたいです。
上記の通りやっても変更できませんでしたが、
nav .navbar-toggler { border-color: カラーコード; background-color: カラーコード; } .navbar-toggler .navbar-toggler-icon { background-image : url("..."); }
これで変えることができました。 cssの記述の基礎が理解できていないかもしれません。
参考にさせていただいた記事
スクールに通うために
まず退職願を出さないといけないので書き方を調べました。
紙を買いに文房具店に行ったところ退職願を書くためのセットが売っていたので買いました。
退職願を書くのは初めてなので、こういうのはありがたいですね。
明日書こうと思います。
スクールに行き就活をするので、再就職できるのは半年からそれ以上先になります。
それまでに必要なものを調べました。
まず税金ですが、所得税と住民税を払わなければなりません。
両方とも分割または一括で支払うようです。
所得税、住民税ともに送られてくる納付書通りに収めておけば問題ないようですが、所得税は2/16から3/15の間に確定申告が必要なようです。
次に保険です。
健康保険は、国民健康保険か任意継続被保険者制度のどちらかを選ばなければなりません。
失業保険は自己都合退職なので、3か月後ということですが、申請してから3か月だということなのですぐに行ったほうがいいようです。
失業保険の手続きに必要なものは雇用保険被保険者証と離職票です。
どちらも退職する会社からもらいます。
失業保険に必要な書類
離職票、通帳、雇用保険被保険者証、本人確認資料、3ヶ月以内に撮影した写真2枚、印鑑、マイナンバー確認証明書
最後に年金です。
退職する会社から年金手帳をもらい、市町村役場か年金事務所で各民年金の変更手続きをします。
退職する会社から受け取らなければならない書類
雇用保険被保険者証
健康保険資格消失証明書
年金手帳
直前になって慌てないように自分なりに調べてまとめてみました。
メモ用です。
ウェブ開発入門完全攻略コース セクション7から
テキストエディタの自動補完によって稀に意図していない文字が入力されるのが嫌だったので検索した結果
https://qiita.com/mitsudaman/items/a727d36c9fac47987fab
enterで確定することはあまりないと思いますが、多少は良くなると思います。
タグを入力すると自動で終了タグも入力されてしまうのが鬱陶しいと思っている方は次の設定もやった方がいいと思います。
https://teratail.com/questions/189128
Auto Close Tagの設定はありませんでした。
終了タグは </ まで入力すると自動補完が表示されるようになります。
セクション7のウェブサイトのコーディングについては個人的な意見としては、progateでやっていたので何とか理解できたのですが、この教材から始めるとついていくのが結構大変かなと思います。
動画の通りに入力していって終わってしまうと全く勉強にならないと思ったので、一回終わったあとに一から自分でページを作成してみようかなと思いましたが、完成しませんでした。
また明日やってみようかと思います。
ウェブ開発入門完全攻略コース HTMLステップアップ編
progateのウェブ開発パス(ruby on rails)をやった方はHTML基礎編は最後の演習だけやれば問題なさそうでしたが、ステップアップ編ではテーブルというprogateでは使わなかったものが出てきた。
progateのHTML/CSSを学習したわけではなくパスだけを学習したので、結構使ってないものがありそう。
HTMLステップアップ編終了。約5時間
CSS入門
初めてのCSS⑵で出てきた
<link rel="" href="">
動画では
<link rel="stylesheet" href="stylesheets/first.css">
となっているが、vscodeの自動補完に任せて入力した結果
<link rel="stylesheet" href="/css-basic/stylesheets/first.css">
と入力して動画との差異には気づいたものの、できそうなのにと結構な時間悩んでしまいました。
/Users/-----/Desktop/web /css-basic/stylesheets/first.css
と入力して行けるかなとやってみるも駄目でした。
とりあえずスルーして進めて行った所、背景とボーダー⑵でパス指定の説明がありました。
これでできました。
今開いているファイルのフォルダから1つ戻ってそこから下に降りていくということですね。
progateでは嫌というほど出てきた、ボックスモデルとフロートレイアウトの説明はあっさりとしていますが、分かりやすかったです。
clearプロパティは使った覚えはなかったですが、補足で必要性が分かりました。
全く関係のない話ですが 退職するのは初めての経験なので、退職願の書き方はこのサイトを参考にしようと思っています。
ウェブ開発入門完全攻略コース HTML入門
とりあえずprogateのweb開発パス(ruby on rails)を一周終えたので今日からudemyの教材をやっていこうと思います。
ウェブ開発入門完全攻略コース
https://www.udemy.com/course/web-application-development/
これをやっていきたいと思います。
htmlとcssのところは復習のようなものなので特に書くことはないと思います。
progateではブラウザで完結していたので、エディタを使うのは初めてです。
HTML入門のリストの所でemmetというものが出てきました。
どのエディタでも使えるのかは分かりませんが、マルチカーソル機能は覚えておいた方が良さそうです。
同じ単語を一つ選択する command+d これで選択している単語と次の同じ単語を同時に書き換えることができるようになります。
本日は演習：HTML基礎まで
サラリーマン夜の勉強
初めましてｙｍです。
このブログでは、IT業務未経験の私が学んだプログラミング等を日記として残していければと思っています。
初心者ですので参考になる情報ではなく、個人的なメモのようなものになると思います。
ブログもプログラミングと同じく未経験ですがよろしくお願いします。
簡単な自己紹介
私の経歴は4年制大学を5年通い中退→ガス小売就職
未経験からプログラマーになろうと思った理由ですが、今の仕事はルーティンになっている業務が多く楽しさを見出すことはできませんでした。
そして自分が何をしていきたいのかを考えプログラマーを目指すことを考えました。
大学を中退していて27歳という年齢なので簡単ではないと思いますが、同じような方に見てもらえればいいと思いこのブログに残していきたいと思います。
拙い文章で申し訳ございませんが、よろしくお願いします。
