Javascript[クリーンアップ中]

querySelector()

const tag = document.querySelector("tagname");
const id = document.querySelector("#idname");
const class = document.querySelector(".classname");

は、要素の1つ目を取得し、そうでない場合はNULLを返します.

getElementBy()よりも効率的です.

const container = document.querySelector("#title");
const matches = container.querySelectorAll("div.highlighted > p");

この要素をすべてインポートするときにquerySelector All()を使用します.

idがtestの場合、divでハイライトされたクラス内のpラベルのノードリストが返されます.

querySelector All()[0]のようにインデックスを使用してアクセスします.

<div class="user-panel main">
  <input name="login">
</div>


const element = document.querySelector("div.user-panel.main input[name=login]");

forEach

inputArray.forEach(function(element, index, array) {});

const body = document.querySelector("body");
const title = document.createElement("h1");
body.appendChild(title);
title.innerHTML = "Hello!";
title.style.color = "rgb(255,255,255)"; //"#FFFFFF";

タスクボディの内容を変数ボディに含めます.

タイトルには

タスクh 1の内容が含まれている.

変数体に変数titleの内容を追加および変更します.

const title = document.querySelector("h2");
title.innerHTML = "HOLA!";
title.style.color = "green";

Takeh 2の内容をタイトルに書き込んで修正します.

function init() {
}

const init = () => {
}

両者の違いは?

Dateオブジェクト

const now = new Data(); // 객체
const now2 = new Date("yyyy-mm-dd:hh:mm:ss+0900"); // +0900:대한민국 표준시

now.getTime(); // 1970년 1월 1일 UTC(국제표준시) 00:00으로부터 지난 시간을 millisecond로 표현
now.getDate(); // 1:1일, 2:2일..
now.getDay(); // 0:월요일, 1:화요일..
now.getMonth(); // 0:1월, 1:2월..

Math.floor()

小数点以下の位置を削除します.

層()はMathの静的メソッドであり,ユーザが作成したMathオブジェクトを呼び出すことができないメソッドである.

setInterval()

setInterval(func, 1000);

func関数は1秒ごとに周期的に呼び出される.

.valueプロパティ

document.querySelector(".className").value;

classNameのselectタグ内のオプションの値を返します.

localStorage.getItem()

localStorage.getItem("keyName");

ローカルストレージでは、keyNameを使用してkeyの値を返します.

.selectedプロパティ

const selected = localStorage.getItem("keyName");
document.querySelector(`option[value="${selected}"]`).selected; // true or false

属性をtrueに指定します.そうでない場合falseになります.

なぜJSを使うのですか？

HTML操作および変更

Selector

document.getElementByClassName()[0].~

ClassName()は、Id()とは異なり、インデックスを使用してすべてのタグを検索します.

addEventListener

document.getElementById().addEventListener('click', function(){})

「click」はセレクタ()を有効にします.

event : click, keydown, scroll, mouseover

onclick=""

<button onclick=""></buttom>

をクリックして、「」内のJSを実行します.

UIの作成方法

モード、Alert、Tap、Tool tip、Submenu

は事前に設計され、隠されています.

JS、必要に応じて展示します.

function

の長いコードを1つの単語に略すことができます.

Tip

JSがHTMLより高い場合はエラーが発生します.

JQuery

Library

JSと変わらない.

ReactJSはJQueryよりHTML操作が得意です.

JQueryで作成されたサイトが多く、勉強しないわけにはいきません.

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
밑에서 부터 구현

CDNは他のサイトが管理しているため、不安定です.

HTMLは上から1行1行の読み取りを開始するため、ヘッダ宣言時に読み取りとダウンロードを停止する.

document.getElementById('id')
document.querySelector('#id').innerHTML = "Hello";
$('#id').html("Hello");
$('#id').css('color','pink');
$('#id').attr('src','');

querySelector()は、1つだけ見つけて最初のインデックスを取得できます.

$('.class').on('click', function(){})
$('.class').click(function(){})

addEventListener('click', funciton(){})

インデックスなしで

という名前のセレクタを一度に変更できます.

toggle()[hide()/show], slideToggle(), fadeToggle()

<input id=test>
$('#test').val() 

input value

田植えをする

のポップアップメニューにもう一つのウィンドウが追加されましたが、実際にはモデールはウィンドウを追加しておらず、ただの感じでした.

=

1 == '1' // true
1 === '1' // false

preventDefault()

$('.form').on('submit', function(e) {
    e.preventDefault();
}

フォームのsubmitは、転送を阻止します.

var

undefined (Not error)

生存範囲機能

forゲート範囲以上.

let

再宣言不可

uninitialized (Error)

生存範囲{}

forゲート範囲で参照できます.

const

再割当不可

typeof()

number

string

少なくとも1つの

文字列がある場合、number演算とともに文字列演算を行う.

Array, Object

let arr = ['BMW', 520]; // 여러가지 자료형 저장
console.log(arr[0]);

let obj = { brand : "BMW", model : 520 }; // key : value
console.log(obj.brand);
console.log(obj.['brand']);

のインデックス範囲を超える場合、

は定義されません.

arr.push()

form, input, change event

inputイベント:入力値を変更するとき

変更イベント:入力値が変更されてフォーカスが失われた場合、

$('#option1').on('change', function () {
    if ($('#option1').val() == '셔츠')
        $('.size-select').show();
});

Grave accent

`(逆引用符)

let temp = `<option>${size[i]}</option>`;


let temp1 = "<option>S</option><option>M</option><option>L</option>"
let temp2 = `<option>S</option>
             <option>M</option>
             <option>L</option>`             

Hoisting

変数、関数宣言は常に上方に解析されます.

test

/abc/.test('abcdef')
/[A-z]/.test('a')
/\S+@\S+\.\S+/.test('email') // 특수문자 포함 모든 문자 1개, + 붙으면 여러 문자

true

Event Bubbling

これは

活動が上位要素に拡散する現象である.

サブラベルを押すと、上のすべての親ラベルを押すことになります.

eventListenerを作成するときは注意してください.

$('.black-bg').click(function (event) {
      // event.target; // 지금 실제 클릭한 요소
      // event.currentTarget; // 지금 이벤트리스너가 있는 곳, $(this);
      //if (event.target == event.currentTarget)
      if (event.target == this)
        $('.black-bg').hide();
    })

Data Binding

データをJSとしてHTMLに入れる操作

Array.forEach(function(element){});

let size = [85, 90, 95, 100, 105, 110, 115];

size.forEach(function(e){
    let temp = `<option>${e}</option>`;
    $('#option2').append(temp);
});

の配列数を繰り返します.

コールバック関数のパラメータは、配列内の各要素です.

Web開発方法

サーバがHTMLをユーザに送信方式

を完了する.

サーバは空のHTMLとデータを送信し、ブラウザでJSを使用して

を埋め込む.

AJAXでサーバからデータを取得します.

sort

let a = [20, 3, 1];
a.sort(); // 1, 20, 30


a.sort(function(a, b) { // a, b는 배열의 원소
    return a - b; // 1, 3, 20
    // +를 반환하면 a를 오른쪽, b를 왼쪽으로 보낸다
})

昇順:a-b;

降順:b-a;

既存の配列を変更します.

a.sort(function (a, b) {
    let result = a.title > b.title;
    if (result == true) {
        return 1;
    } else {
        return -1;
    }
})

文字の比較には、ブールと正数と負数が使用されます.

filter

let a = [7, 3, 5];
let a2 = a.filter(function(e) {
    return e < 6; // 3, 5
}

は既存の配列を変更しないので、新しい変数を作成する必要があります.

map

let a = [7, 3, 5];
let a2 = a.map(function(e) {
    return e * 2; // 14, 6, 10
}

spread operator

let b = [3, 9, 1, 7, 5];
let c = [...b]; // 3, 9, 1, 7, 5

DOM

Document Object Model

これは

JSがHTMLを解釈可能な文法にまとめたことを意味する.

対象資料型を使用します.

ブラウザは、JSがHTMLを読み込むときにDOMを作成することによってHTMLを操作する.

<script> //ERROR : p태그에 대한 DOM이 생성되기 전
  document.getElementById('test').innerHTML = '안녕'
</script>

<p id="test">Hello</p>

JSでは、HTMLを変更するにはDOMを生成する必要があります.

<script>
  $(document).ready(function(){
    document.getElementById('test').innerHTML = '안녕'
  });
</script>

<p id="test">Hello</p>

document.addEventListener('DOMContentLoaded', function() {
  //DOM생성이 완료되었을 때 실행할 코드 
});

AJAX

サーバにデータ(GET,POST)を要求し,リフレッシュすることなく取得する.

フロントエンド開発者

の商品を見て、コメントなど

を見て

    <script>
        $('.btn-primary').click(function () {
            $.ajax({
            url: "",
            type: "GET",
            }).done(function (data) {
            $('#id').html(data);
            }).fail(function(){
            
            }).always(function(){
            
            });
        });
    </script>

GET

URL要求を入力、

を読み出す.

POST

URLの非表示情報転送や要求を変更せずに

に書き込む.

JSON

{"brand" : "Hyundai", "model" : "Kona", "price" : 30000, "img" : "https://codingapple1.github.io/kona.jpg"}

のデータを送信および受信すると、テキスト形式でない場合、途中で割り込みが発生する可能性があるため、オブジェクトタイプのキー値に引用符を付けます.

let obj = JSON.parse(json);
let json = JSON.stringfy(obj);

objectのようです.欲しい資料が撮れないので、変換プロセスが必要です.

jQueryのajax関数を使用してJSONを自動的にオブジェクトに変換します.

Hammer.js

<script>
    let img1 = document.querySelectorAll('.slide-box>img')[0];

    let manager = new Hammer.Manager(img1);
    manager.add(new Hammer.Pan({
      threshold: 0
    }));

    // pan event
    manager.on('pan', function (event) {

      if (event.deltaX < 0) {
        $('.slide-container').css('transform', `translateX(${event.deltaX}px)`);
        
        if (event.isFinal) { // 마우스를 놓으면

          $('.slide-container').addClass('transforming');
          $('.slide-container').css('transform', `translateX(-100vw)`);
          setTimeout(function () {
            $('.slide-container').removeClass('transforming');
          }, 500);
        }
      }
    });
</script>

タッチ機能付きスライド