프론트/JavaScript

[JavaScript] 제어문 정리하자

원코딩 2022. 8. 1. 14:34

HTML의 태그를 어떻게 제어할 것인가 

동적인 부분에 중심을 두었다. 화면의 동적인 움직임 

삭제, 수정, 추가 읽기 등을 처리 할 때 

 

.jsp 파일은 새로운 동작을 실행하면 메모리가 새롭게 갱신된다. 

기존 페이지의 내용이 사라지는 불상사가 생기는 것이다. 

 

영화 예매를 한다고 가정해보자. 

영화관과 영화 시간 인원 좌석 등을 선택 하고 

하나의 값만 수정하려고 뒤로 돌아가면 모든 데이터가 사라져 있다. 

해당 홈페이지를 이용할 사람이 몇이나 될까? 

 

자바스크립트를 이러한 현상을 해결해준다. 

영화관, 영화 , 시간, 인원, 좌석 등의 모든 동작을 데이터를 유지하고 있다. 

 

1. 변수 

데이터를 저장하는 '변수'는 자동 지정 변수를 사용한다. let , const변수 

변수만 지정하면 데이터형이 무엇이던 알아서 저장해준다. 

 

2. 데이터 처리

연산자와 제어문을 통해 

*for

*for of

*map 중요함

*forEach 중요함 

 

3. 재사용

함수 

 

매개변수O 리턴형O
function func_name(id,pwd)
{
      return 값;
}

 

매개변수O 리턴형X
function func_name(id,pwd)
{
      
}

 

매개변수X 리턴형O
function func_name()
{
      return 값;
}

 

매개변수X 리턴형X
function func_name()
{
     
}

 

[이벤트 처리하는 법 ]

함수를 호출 시 

태그에서 호출 한다. 

클릭하면 호출할 함수를 지정하는 것. 

click 

<input type=button onclick="함수명">

 

hover (마우스를 가져다 댔을 때)

mouseover

 

change

 

keyup (키를 놨을 때) 

검색 창에서 검색어를 검색하면 밑에 관련 검색어가 자동으로 검색되는 경우 등 

 

 

 

DOMScript

[태그 읽기]

 

getElementById() 

getElementByName()

querySelector("SELECTOR") 많이 사용됨 선택자 !! 

 

document.querySelector("") 이거를 요약해서 ==>  $("") 이렇게 사용한다. 이게 바로 jquery

 

 

 

[서버호환]

JSON 을