본문 바로가기

js5

캐러셀 슬라이드(근데 이제 translate 를 곁들인) * 공부 및 자격증을 위해 작성하는 글입니다. * 부족한 내용이나 틀린 내용을 알려주시면 감사합니다. * 코딩애플 js 강의를 참고하여 기능을 연습했습니다. 예전에 margin-left를 이용한 슬라이드(캐러셀)을 배운적이 있었다. 그런데 translate를 이용해야 애니메이션 기능을 만들때 더욱 부드럽게 작용한다고 한다. 실제로 이번에 다시 기능 복습하면서 캐러셀을 margin-left를 사용해서 만들었었는데 PC에선 괜찮았지만 모바일에서는 '다음' 버튼을 처음 화면에서 누를 때마다 캐러셀 넘김이 뚝뚝 끊겼다. translate로 다시 만드니 이 부분은 해결됐다. 2022. 4. 16.
[JS] 비교 연산자 비교 연산자 크다 작다 크거나 같다 작거나 같다 같다 같지 않다 수학 ≤ ≥ = ≠ JS = == != a = 3 = 을 사용하는 것은 두 값이 서로 같은지 비교를 하는 것이 아니라 '할당'을 의미한다. 'a에 3이라는 값을 넣었다'라고 이해하기 a == 3 (동등연산자) a랑 3이랑 같은지 알고 싶을 때 사용 a != 3 a랑 3이랑 다른지 알고 싶을 때 사용 비교 연산자를 사용하면 값이 반환되는데 그 반환 값은 항상 Boolean형인 true or false로 나타남 console.log(20 > 10); //true console.log(20 == 10); //false console.log(20 != 10); //true '동등 연산자(==)'는 이상하게 동작할 때가 있다. 숫자형과 문자형을 비교.. 2022. 1. 28.
JS 대화상자 alert(), prompt(), confirm() alert() 알림 창을 띄워주는 기능 메세지를 보여주고, 확인 버튼을 누르면 알림 창이 닫힘 사용자와의 상호작용 보단 일방적으로 알리는 용도로 사용 prompt() 사용자에게 어떤 값을 입력받을 때 사용 사용자에게 메세지를 보여주고, 어떤 값을 입력받을 수 있는 필드를 제공함 prompt()에 두 번째 인수를 넣으면 입력창에 디폴트 값을 제공함 취소 버튼을 누르면 null값을 반환함 prompt()는 2개의 인수를 받을 수 있다. 인수를 2개 넣었을 경우 첫 번째 인수는 메세지가 되고, 두 번째 인수는 입력받을 디폴트 값이 된다. (디폴트 값이 미리 들어가 있으면, 뭔가 안내를 하거나 힌트를 줄 때 유용하다.) // prompt() 함수로 사용자가 입력한 값을 받아서 // 변수 name에 받아서 저장한.. 2022. 1. 17.
자료형(string, number, boolean...) 문자형 (String) const name1 = "Gandalf"; //큰 따옴표 const name2 = 'Gandalf'; //작은 따옴표 const name3 = `Gandalf`; //백틱 큰 따옴표는 작은 따옴표를 감쌀 수 있다. const a = "I'm hungry."; 작은 따옴표만 쓰고 싶을 땐, 역슬래시 사용하기. const b = 'I\'m hungry.'; 백틱은 문자열 내부에 변수를 사용할 수 있다. 일반 따옴표로 감싸면 변수명이 문자로 인식되어 그대로 노출된다. //"My name is ${name1}" const c = `My name is ${name1}`; console.log(c) //"My name is Gandalf." 표현식도 가능하다. const age = 20; .. 2022. 1. 8.