学習24日目 小休止。私の勉強環境
こんにちは、KATUUUNです。
今日は主にSQLを使ってみたり、セキリュティについて学習していました。
いつもプログラミンの話も味気ないなと思ったので、今日は私のPC周りを紹介します。
机の上に必要なもの以外置かない！を徹底した結果、机がとても小さくなりました。合わせて電気スタンドもコンパクトです。
そして、、、
休憩時間に利用できる、ヨガマットと足ツボシートです。全力でリフレッシュしています。
今日は以上です。明日もプログラミング頑張るぞ！
学習23日目 JavaScriptとお友達になる！
こんにちは！KATUUUNです。今週からJavaScriptを学習しています。早く使いこなしてロントサイドで威力を発揮したいです。
昨日に引き続きJavaScriptで学習したことをアウトプットします。
今日はトップページ内の投稿フォームにコメント記述し、投稿ボタンを押したら、コメントがトップページに表示される流れについて
1.まずは投稿機能を非同期通信化する。
.jsファイルを作成。その後ページが読み込まれることをトリガーにしてイベントを発生させる。
例
function post (){
（処理）
};
window.addEventListener('load', post);
ここではloadイベントをaddEventListener()で発火させました。
2.投稿ボタンをクリックしたら投稿フォームがコンソールに表示される
例
function post (){
const submit = document.getElementById("submit_btn");
submit.addEventListener("click", (e) => {
console.log(document.getElementById("new_article"));
e.preventDefault();
});
};
window.addEventListener('load', post);
・id名はあくまで一例です。またちゃんと所得できているかを確認するためにコンソールに表示させています。
・クリックした時にイベントが発火するためclickというイベント名を用いています。
・ブラウザからのリクエストキャンセルするためにpreventDefault()メソッドを使用します。
3.サーバーへリクエストする
例
function post (){
const submit = document.getElementById("submit_btn");
submit.addEventListener("click", (e) => {
const formData = new FormData(document.getElementById("new_article"));
const XHR = new XMLHttpRequest();
XHR.open("POST", "/articles", true);
XHR.responseType = "json";
XHR.send(formData);
e.preventDefault();
});
};
window.addEventListener('load', post);・FormData(document.getElementById("new_article"))によってコメントの内容を所得しています
・const XHR = new XMLHttpRequest();によってjavaがサーバーとHTTP通信を行えます
・XHR.open("POST", "/articles", true);によってリクエストの内容を具体化しています
・XHR.responseType = "json";によってレスポンス時にjson形式で返すようにしています。
・ XHR.send(formData);の記述で送ります
4.レスポンスを受け取る
例
function post (){
const submit = document.getElementById("submit_btn");
submit.addEventListener("click", (e) => {
const formData = new FormData(document.getElementById("new_article"));
const XHR = new XMLHttpRequest();
XHR.open("POST", "/articles", true);
XHR.responseType = "json";
XHR.send(formData);
XHR.onload = () => {
console.log(XHR.response.article);
};
e.preventDefault();
});
};
window.addEventListener('load', post);XHR.onload はリクエストの送信が成功したときに呼び出されるプロパティ
5.レスポンスの情報をブラウザに表示する
例
function post() {
const submit = document.getElementById("submit_btn");
submit.addEventListener("click", (e) => {
const formData = new FormData(document.getElementById("new_article"));
const XHR = new XMLHttpRequest();
XHR.open("POST", "/articles", true);
XHR.responseType = "json";
XHR.send(formData);
XHR.onload = () => {
const item = XHR.response.article;
const contentsArea = document.getElementById("contents_area");
const articleText = document.getElementById("article_text");
const HTML = `
<div class="article">
${ item.text }
</div>`;
contentsArea.insertAdjacentHTML("afterbegin", HTML);
articleText.value = "";
};
e.preventDefault();
});
};
window.addEventListener("load", post);
以上です
学習22日目 Javaで画面表示を変える方法
こんばんは、KATUUUNです。 ブログは最近始めましたが、実はプログラミング自体は約３週間くらい学習しています。
今日は私の苦手分野、JabaScriptのうち、「画面表示を変える方法」について書こうと思います。
1.表示を変えたいHTMLを指定する
（例）
li class="background-red" id="lists" リスト /li
(今回はidを設定した)
2.JabaScriptファイルがHTMLの要素を所得する
const pullDownButton = document.getElementById("lists")
3.イベントを発火させる
・load：ページ全体が全て読み込まれた後に、イベント発火する
・click：指定された要素がクリックされた時に、イベントが発火する
・mouseover：マウスカーソルが指定された要素上に乗った時に、イベントが発火する
・mouseout：マウスカーソルが指定された要素上から外れた時に、イベントが発火する
(要素)addEventListener("イベント名",関数)を使う
（例）
pullDownButton.addEventListener('mouseover', function(){ ("処理") })
4.どんな変化をつけたいか決める
（例）インラインスタイル追加で変化をつけたい
pullDownButton.addEventListener('mouseover', function(){ pullDownButton.setAttribute("style", "background-color:#FFBEDA;") })
変化をつける方法は他にもいっぱいあります。早く使いこなせるようにないたいです。 今日はここまで。ありがとうございました。
船のエンジニアからWEBエンジニアへ！KATUUUN参上！
初めましてKATUUUNと申します。軽く自己紹介させてください。以前は船のエンジニアとして働いていました。
今はWEBエンジニアを目指して猛勉強中です。自分の知識のアウトプットのためにHatenaBlogを使おうと思います。 これからよろしくお願いします
