おしゃれなライオンのように、先端学校第2期TIL(4月15日)

12798 ワード
jquery JavaScript TIL 先端学校2期 テキストリンク

🔖LikeLion FrontEndSchool TIL 4月15日(金)


Code Linコース


まず作成したJavaScript


  • 宝くじ番号抽出器

    6個の1から45のランダムで重複しない数字を出力します.

  • code
    let ball = [];
while (ball.length < 6) {
  let num = parseInt(Math.random() * 45 + 1);
  if (ball.indexOf(num) == -1) {
    //배열에 num 없으면 -1 반환 되는 함수
    ball.push(num);
  }
}
ball.sort((a, b) => a - b);
/* (a, b) => a - b 수식 입력 안하면 앞자리 수부터 비교해서 정렬함 */
document.write("<div class='container'>");
for (let i = 1; i <= 6; i++) {
  document.write(
    "<div class='ball ball" + i + "'>" + ball[i - 1] + "</div>"
  );
}
document.write("</div>");
  • parseInt(Math.random() * 45 + 1) Math.random()関数は0から1の乱数を返す関数であり、1から45の乱数を得るために45に1を乗じ、parseInt関数を用いて乱数を整数で返す.
  • ball.indexOf(num) indexOf()関数呼び出し関数の配列では、パラメータ値がある場合はインデックスを返し、ない場合は-1を返します.6つの重複しない数字を配列に格納する必要があるため、この関数を使用して-1を返す場合にのみ、配列に数字を入力できます.
  • ball.sort((a, b) => a - b);parameterをvoidとして使用して関数を呼び出すと、数字の前列から比較してアルファベット順に数字を並べ替えるので、(a, b) => a - b矢印関数をparameterとして昇順に並べることができます.

  • ワードけいさんき

    textareaに入力した文字数.

  • code
    countText();
function countText() {
  let content = document.getElementById("jasosoel").value;
  if (content.length > 200) {
    content = content.substring(0, 200);
    document.getElementById("jasosoel").value = content;
  }
  document.getElementById("count").innerHTML =
    "(" + content.length + "/200)";
}
  • content.substring(0, 200)最大文字数を制限するためにcontentの長さが200を超えると、substring()関数を使用して入力しても、入力されたテキストは消えてしまいます.
  • onkeydown="countText()"textareaのonkeydownプロパティをcountText()関数として指定し、キーボードを押すたびに文字数を3回反映できます.

  • jQueryベース&jQueryを使った簡単なStarcraftゲーム

  • jQueryデフォルト構文$("element's name(class, id)").function()

    • ドローン画像をクリックするとピットを攻撃しHPを下げることができます.

  • code
    let hp = 3;
$("#drone").click(function () {
  $("#spit").fadeIn();
  $("#spit").animate({
    left: "+=250",
  });
  $("#spit").fadeOut(function () {
    //callback 함수 활용
    hp--;
    $("#hp").text("HP: " + hp);
    if (hp == 0) {
      $("#bunker").fadeOut();
    }
  });
  $("#spit").css({
    left: "150px",
  });
});
  • $("#drone").click()idがdroneの要素をクリックすると、動作queryでclick()関数の内部に匿名関数を宣言し、クリック時の動作を制御することができます.
  • fadeout() , fadeIn()画像を表示または非表示にする関数

    • 熱検索ランキングに載ったセレンゲッティ動物のテストを作る


    🚀 Repository Link
    [BaekJoon]288774と7
    [SpringBoot]V-RIS開発ログ(2)-MySQLバインドを使用し、Spring Data JPAを使用して会員管理システムと誤り訂正を簡略化