본문 바로가기

02_STUDY/JavaScript6

[ JavaScript ] 논리연산자(&&, ||)를 활용한 단축평가 단축평가(Short-circuit Evaluation)란 논리 연산자를 사용해 조건식을 평가할 때, 첫 번째 피연산자만으로 결과를 확정지을 수 있을 때 두 번쨰 피 연산자의 평가를 생략하는 것을 말한다. 단축평가를 사용하면 보다 간결하게 코드를 작성할 수 있다. 아래의 예를 보자. ' && ' 연산자를 활용한 단축평가 ( AND 연산 ) 첫 번째 피연산자가 Falsy한 값일 경우 그 값을 반환하고 첫 번째 피연산자가 Truthy한 값이면 두 번째 피연산자를 반환한다. const value = 0; const text = value && "Hi!"; console.log(text); //출력:0 const result = false && "Hi"; console.log(result); //출력:false .. 2023. 8. 28.
[ JavaScript ] Truthy와 Falsy 자바스크립트에서는 논리적인 판단을 위해 값을 참(true) 또는 거짓(false)로 판별하는데 이때 'Truthy'와 'Falsy'라는 개념이 사용된다. Truthy 와 Falsy가 뭐죠? Truthy는 Falsy 는 직접적으로 ture와 false는 아니지만 조건식이나 논리 연산에서 참과 거짓으로 간주되는 값을 의미한다. 이 값들은 조건식이나 논리 연산에서 자동으로 판별되어 참과 거짓으로 활용된다. Truthy 값의 예시 true 논리적 참 숫자 0을 제외한 모든 숫자 문자열(빈 문자열 제외한 모든 문자, ex) "0", "false"도 string) 객체 및 배열 (빈 객체 { } 빈 배열 [ ] 도 참으로 간주됨) Falsy 값의 예시 false 논리적 거짓 0, -0 숫자0과 -0 '' , "" .. 2023. 8. 28.
[ JavaScript ] insertBefore()보다 더 편리하게 쓸 수 있는 insertAdjacentElement(), 특정 위치에 요소 추가하기 insertAdjacentElement() DOM요소에 새로운 요소를 특정 위치에 추가하는 기능을 제공하는 메서드. ( * 'adjacent: 인접한'이란 뜻으로 아마 인접한 위치에 요소를 추가하기에 ) element.insertAdjacentElement(position, newElement); element 기준이 되는 요소 position 새로운 요소를 추가할 위치를 지정하는 문자열 - beforebegin 요소 바로 앞에 추가 - afterbegin 요소의 첫 번째 자식으로 추가 - beforeend 요소의 마지막 자식으로 추가 - afterend 요소의 바로 뒤에 추가 newElement 추가할 새로운 DOM 요소 insertAdjacentElement()는 전에 많이 사용했던 insertBef.. 2023. 8. 4.
[ JavaScript ] insertBefore()로 원하는 요소 앞에 요소를 추가하기 insertBefore() 자바스크립트에서 DOM을 조작하는 메서드 중 하나로 특정 요소를 다른 요소 앞에 삽입할 수 있는 코드. parentNode.insertBefore(newNode, referenceNode); parentNode 요소를 추가할 부모 노드 newNode 새롭게 추가하고 싶은 노드 referenceNode newNode를 넣을 위치를 기준으로 할 때 해당 위치의 요소 HTML 코드 item1 item3 JS 코드 //부모 노드 가져오기 const itemList = document.getElementById('itemList'); //새로운 리스트 아이템 만들기 const newItem = document.createElement('li'); newItem.textContent = .. 2023. 8. 4.
[ JavaScript ] DOM(Document Object Model) 과 node에 대해서 브라우저가 실행될 때 전역객체인 window가 있고 그 안에 DOM, BOM, JavaScript 객체가 있다. DOM ( Document Object Model ) : 웹페이지의 문서에 대한 객체 BOM ( Browser Object Model ) : 브라우저에 관련된 객체 JavaScript core : 자바스크립트 언어에 정의되어 있는 객체 DOM (Document Object Model) 문서 객체 모델 웹 문서용 프로그래밍 인터페이스로 문서를 노드와 객체로 나타내는 것. 웹 사이트를 구축하는 데 사용되는 Web API. DOM node는 이 API를 쓰는데 필수적인 인터페이스라고 할 수 있다. 우리가 웹 페이지를 만들면 html파일을 브라우저에서 읽는데 브라우저에서 태그를 분석해 노드로 변환한다.. 2023. 2. 12.
[ JavaScript ] JS 스크롤 이동하기, scrollBy(현위치, 만큼)와 scrollTo(전체, 까지)의 차이 JS에서 스크롤 이동할 때 사용하는 비슷하지만 다른 scrollBy와 scrollTo에 대해 알아보자. by와 to의 뜻으로 짐작해서 쓴다면 쉽게 헷갈리지 않을 것이다! scrollBy(x-coord, y-coord) 위치하는 곳에서 ~만큼 이동 현재 위치에서 y좌표로 200px만큼 이동하기 x,y축으로이동할 만큼의 픽셀값을 지정해주기만 하면 된다. window.scrollBy(0,200); 오브젝트 형태로도 전달 가능하다. 세로값인 y대신 top, 가로값인 x대신 left를 통해 이동할 만큼의 픽셀값을 지정한다. window.scrollBy({ top: 100, left: 0 }); options - behaivor window.scrollBy({ top: 50, left: 20, behavior: '.. 2023. 2. 11.

티스토리툴바