NULL

var car = ['소나타', 50000, 'asd']; // array console.log(car); var car2 = {name: '소나타', price : 50000}; // object자료형 //key : value형태로 저장가능한게 장점. // 실제 저장되는 값은 value이고 key는 자료의 이름이다. console.log(car2.name); // 사용방법 1 console.log(car2['price']);// 사용방법 2 array/Object 차이 array는 순서개념이 존재한다. (왼쪽에서 오른쪽으로 가는 순서) 하지만 Object는 순서개념이 없다. (어느 곳에 위치하든 순서영향이 없다.) 순서개념이 존재하는 array는 - 0번부터 0번까지 자르기 - 0번 바꾸기 - 맨 뒤,..

이벤트 버블링 어떤 html태그에 이벤트가 발생하면 그 html의 상위요소까지 이벤트가 실행되는 현상을 이벤트 버블링이라고 한다. click이라는 이벤트를 예로 들자면, html 태그에 클릭이 발생하면 그의 모든 상위요소까지 자동으로 클릭이 된다는 뜻이다. hello 위의 코드를 보면 p태그의 hello라는 글자를 클릭하게 되면 브라우저는 사용자가 클릭을 총 3번 했다고 인지한다. 예 ) p위에 div와 그 위의 div 위와 같은 현상이 이벤트 버블링이다. 브라우저는 원래 이렇게 동작하도록 되어있으며 이 사실을 잊은 채 코드를 짜다보면 가끔 이상한 현상이 발생할 수 있다. (← 해당 창을 누르면 모달창 닫으라는 코드를 짬) 모달창 내용 사용자가 이거 클릭해도 이벤트 버블링 때문에 이것도 클릭한 것이 된다..

js. jquery 퍼센트 스크롤 JS window.addEventListener("scroll", function () { var per = ((window.scrollY / (document.body.clientHeight - window.innerHeight)) * 100); box.style.width = per + "%"; console.log(per.toFixed(0) + "%"); }) jquery $(window).on("scroll", function(){ var percent = ($(window).scrollTop() / ($(document).height() - $(window).height())) * 100; $('.box__width').css('width', percent+"%..

스크롤 이벤트리스너 window.addEventListener('scroll', function(){ console.log('123') }); 스크롤바를 조작하면 scroll 이벤트가 발생한다. 그래서 scroll 이벤트리스너를 전체 페이지에 달면 전체 페이지를 스크롤할 때마다 원하는 코드를 실행할 수 있다. 코드를 실행하고 스크롤을 조작하면 할때마다 123이 콘솔에 출력된다. 참고로 window는 그냥 전체 페이지를 의미한다. document도 전체 페이지인데 window가 약간 더 큰 개념이고 scroll 이벤트리스너는 관습적으로 window에 붙인다. 스크롤 관련 유용한 기능들 window.addEventListener('scroll', function(){ console.log( window.sc..

return 함수를 반환해준다. 그리고 함수 종료의 뜻도 있다. 리턴을 만나면 함수가 종료되서 리턴 아래 코드들은 생략된다. function 함수(){ return 123 console.log(456); } console.log(함수()); 123을 출력해주고 함수가 종료되서 456은 출력되지 않는다. 함수는 숫자를 집어넣으면 규칙에 따라 다른 숫자가 나오는 변환기역할을 한다. 변환기 만들 때 return 문법이 유용하게 사용된다. 예시 - 부가세 계산기 console.log(60000 * 0.1); console.log(50000 * 0.1); console.log(80000 * 0.1); 예를 들어 6만원, 5만원, 8만원짜리 상품 3개의 부가세를 구해서 콘솔창에 출력하려면 이렇게 필요할 때 마다 0..

.includes() 문자에서 찾을 단어가 들어있는지 검사하고 있다면 true / 없으면 false 반환한다. '문자'.includes('찾을단어') // 사용법 'abc'.includes('a'); // true 'abc'.includes('ab'); // true 'abc'.includes('ac'); // true 그외에 값은 false 문자 abc중 하나라도 포함하고 있으면 true를 반환한다. 하지만 한글, 영어가 들어있는지, a로 끝나는지, 마침표 다음 영어가 있는지 등등 이와 같은 경우는 includes() 만으로 검증하기 힘들다. 정규표현식 (regular expression) 정규식은 문자 검사를 할 때 사용하는 식이다. 어떤 문자에 "abc"라는 단어가 들어있는지 확인할 때 사용한다. ..

setTimeout JS 기본 함수 중에서 setTimeout 이라는 함수가 존재한다. 효과는 몇초 후에 코드를 실행하는 역할이다. setTimeout(function(){ 실행할 코드 }, 기다릴 시간); 시간은 ms단위로 1초당 1000이다. setInterval() 정해진 초마다 코드를 연속으로 실행하고 싶다면 setInterval()를 사용한다. setInterval(function(){ 실행할 코드 }, 기다릴 시간); 방법은 전과 동일하다. 콜백함수 함수 파라미터 자리에 들어가는 함수를 콜백함수라고 한다. setTimeout(), addEvenListener() 와 같은 함수들은 콜백함수를 요구한다. 콜백함수도 일종의 함수이기에 다른 곳에서 만든 함수를 집어 넣어도 잘 작동한다. setTime..

var 예금액 = 60000; var 미래예금액 = 0; if ( 예금액 >= 50000 ){ 미래예금액 = 예금액 * 1.2 ** 2 ; // 사용법 예시 } else { 미래예금액 = 예금액 * 1.15 ** 2; // 사용법 예시 } console.log(미래예금액) 위에 코드를 보면 1.2, 1.5을 2번 씩 거듭제곱하는 코드이다. 2번 제곱해야 하는 상황에 1.2 * 1.2 혹은 1.15 * 1.15 이렇게 쓰게 되면 2번 이상 제곱해야하는 상황이 오면 계속 일일히 코드를 넣어줘야하는데 거듭제곱 연산자를 사용하게 되면 간편해진다.

event.preventDefault() html에서 태그의 고유 동작으로 페이지를 이동시키거나 form 안에 input등의 전송을 하는 동작을 중지시켜준다. submitBtn.addEventListener("click", function(e){ if(userID.value.length == 0){ alert("아이디를 입력해주세요."); e.preventDefault(); }else if(userPWD.value.length == 0){ alert("비밀번호를 입력해주세요."); e.preventDefault(); }else if(userPWD.value.length < 6){ alert("비밀번호 6자리 이상 입력해주세요."); e.preventDefault(); } }) 로그인 form에서 아이디와..

classList는 클래스를 추가한다. classList.toggle 사용법 해당 클래스가 없다면 추가하고, 존재한다면 제거한다. menuBtn[0].addEventListener('click', function(){ menuList[0].classList.toggle('show'); }) show는 display: block 속성을 가지고 있다. 해당요소가 block이라면 그대로 놔두고 block이 아니라면 show클래스를 추가한다.