いよいよ第一プロジェクト!!Instagramをクローンします.(別名Wistartramプロジェクト)

1st Project : Westagram

クローンコード？

clone+コードの合成語だと思いますが、その名の通り
これは,実際に運営されているウェブサイトに従って符号化と学習を行うことを意味する.

まず結果を見せてください。

html

3つのシードを作成しましたが、結果が長すぎて、以下を省略します...
できるだけ詳細なクラスの特徴を貼り付けますか?キャラクター?私はそれを星に縛るように努力した.
div-ssectionを別々に使ったほうがいいと思います.
ページが移動しないという特徴を持つシードの下の画像は、aラベルの代わりにbuttonラベルを使用し、ul-li構造を使用して類似要素をリストするフレームワークを設定して寸法します.
思ったより掴む構造が多かったので、ちょっと慌てました.
すぐに気まずいでしょう.nav領域も3つの部分に分けて表記すべきだと思いますし、種子部分もどのように構造して、クラスにはっきり見えるのか、本当に悩んでいます.
結論は...本当にうるさい...(对不起,对不起.)
でもJavaScriptで種を作りましたうん.ハハハ.(気まずい)

css

今回cssの仕事をしたとき、最大のアイデアは「できれば、似たような要素をクラスの形でスタイリングしましょう!」はい.
以前は公費学院に通っていて、htmlの表記やcssの造形をよくしていましたが、その時は似たような要素でも、縛ったフレームが違うと、それぞれ造形を行います.
今回はセレクターの良さを利用!可能であれば、似たような表記が同じレベルで造形されています.

common.cssとreset.cssです.
commonには、2つのファイルで共有されているアイテム(ボタン初期化プロパティやaタグ初期化プロパティなど)が含まれています.resetでは、chromeによって提供されるすべての基本属性をリセットできるスタイル寸法がインターネットで受信され、適用される.

nav,main-right部分は位置決めで上部に固定されている.
mainのfeedsはfloat:左に移動(?)あげました.
似たような属性を持つmain-rightの内容では,物語,友人推薦部分に1つのクラスを用いて,同じ造形を行った.
login部分ではinputラベルが同じ属性を持っていて、本当に!!簡単すぎてよかったです.かわいい
floatやabsoluteではなくflexをできるだけ先に使用します.
videify-content、align-contentもたくさん使えてよかった:)
gridもいつか使ってみたいなぁ….
なぜcssクラスを与えたのか、だんだん分かってきました.
確かに、効率に差が出る可能性があります.同じコードを複数回作成し、クラスバッチで属性を付与します.
もちろん、完全に慣れる前に...もっと時間がかかりますが、

javascript

main.js

最初に実現したのはコメントを書くことです!!
ローカルストレージではなく、appendChildとcreateElementを使用して作成されます.
面白さを増すためにニックネーム部分にMathを付けますrandomとflowerを使用して数字を追加します.
おもしろくないですか…?面白いと思ったら面白いと思ってください!!!

セッション後のマスター。変更

以前のコードでは、createElement、appendChild、createTextNodeを使用していました.セッションでinnerHTMLを使うともっと簡単に修正できるので、innerHTMLで書いてみます.
以前に存在したhtmlをそのままにして、後で作成したコメントだけを追加したいので、createElement(「li」)と.CommentListでAppendChildを使用してそのままにします.

 const commentList = document.querySelector(
    "#main article .comments .commentList"
  );

  const li = commentList.appendChild(document.createElement("li"));
  li.className = "comment";

  li.appendChild(document.createElement("a")).appendChild(
    document.createTextNode('nick')
  );
  li.appendChild(document.createElement("p")).appendChild(
   document.createTextNode(comment)
  );

こんなハーモニー.

 const commentList = document.querySelector(
    "#main article .comments .commentList"
  );

  const li = commentList.appendChild(document.createElement("li"));
  li.className = "comment";
  li.innerHTML = '<a href="#">nick</a><p>${comment}</p>';

とても简単になりました!!!
HOMEMEMEMEMEMEMEINNERHTMLを書ける開発者になることを決意した瞬間です.

login.js

入力したパスワードが各入力の1文字以上の場合は、ボタンをアクティブにするためにコードを記述します.
ボタンをクリックします.disabled = true/false; 利用しました.
Inputのvaluelengthを利用して、最初のイベントリスナーはkeypress?keydown? 私はあなたにあげました.ボタンを押す前の長さを持ってきたので、少し崩れてしまいました.
KeyUpイベントを思い出してよかったので、KeyUpの長さを変えてもらって良かったです

login.変更

銀善と一緒に夕食を食べた時に見つけた間違い
loginBtnをアクティブにして、ユーザー名やパスワードを削除すると...無効にされないのは、非常に悲しい事実です.
簡単に直した.

if (inputIdValueLength && inputPwValueLength) {
   button.disabled = false;
   button.style.cursor = "pointer";
   button.style.opacity = "100%";
   button.addEventListener("click", () => {
     document.location.href = "../html/main.html";
   });
}

こんなハーモニーしかありません.

if (!inputIdValueLength || !inputPwValueLength) {
  button.disabled = true;
  button.style.cursor = "initial";
  button.style.opacity = "40%";
}

この和弦を付けました!!解決済み.ざいりょう☆

frontend最初のセッションが終了した後

きれいな順番でcssを並べます

もう書き終わったから、ちゃんと整理させてください.うん.
小細工をした.明らかに、公費学院の先生が教えてくれたプログラムには、cssを分類する拡張機能があります.見つけました.
これはpostCSS sortingという拡張プログラムで、設定されています.これはとても友好的な良いプログラムで、もし私がjsonの中で順序を入力するならば、それは順序によって整理します:)
やはり世界は広くて、うるさい人が多いです.需要に応じて供給する.

DOMの理解と記憶

これを今日習ったHTTPと一緒にPostと書くことにしました.
これを使い切ってInstagramで付加機能を実現することにしました.
習ったことを忘れる前に片付ける

QuerySelectorとgetElementsByClassName

以前はquerySelectorはほとんどなかったので、getElementsByClassNameやgetElementByIdのように直接クラスやIDを使ってhtmlにアクセスするのは気まずいです.
突然好奇心が生まれて、二つの違いがあるかどうかを聞いた.
結論がない!かつて.
それはいったいなぜ分離したのか、なぜ異なる方法が生まれたのか...
jsxで反応を书く时とjsで反応を书く时の差は多くありませんか...
=>classNameはHTML Collectionを返し、querySelector AllはNodeListを返します.
HTML CollectionではArrayメソッドは使用できないためforEachなどは使用できませんが、for文は使用できます.
NodeList正確にはtypeはArrayではありませんArrayメソッドを使用できます.でも.なぜ利用できるのかもう一度探すべきだと思います.ぐるぐる回る
=>さっきもう一度調べましたが、NoteListではpushやsortなどは使えません.ちょっと...理解すればするほど、難しいJavaScriptの世界を見ているような気がします.
=>NodeListはarray-like objectなのでarrayMethodを使用できます.
=>ただしHTML Collectionもarray-like objectどうして彼はだめだと言ったの...?

コンソールの順序

上図にもありますが、コンソールを撮ってclassを変更しました.
しかし、変更前のコンソールではclassはすべてhiで表示されます.
ゼロ秒のブログで答えを見つけた…!!!
オブジェクトを記録すると、オブジェクトの内容変更がリアルタイムで更新されます.
そのため、コンソールではクラス全員がhiに撮られた.
実際、settimeoutでclassNameを遅く変更し、コンソールをたたくとclassがリストに表示されます.理解すればするほど不思議になり、困難になるJavaScriptの世界.
=>同期しているが非同期で実行されているjavascriptの特性からobjectの変化がconsoleより先である可能性があると推測する.したがって、コンソール.logでリストを撮ってもhiの結論が出てくる!!
このような非同期処理を処理するために、async、await、promiseなどが存在する.